/*
Theme Name: RecipeFlow Child
Template: twentytwentyfive
Version: 2.1.0
Description: RecipeFlow child theme for Twenty Twenty-Five
Author: RecipeFlow
*/

/* ════════════════════════════════════════════════════════════════
   TABLE OF CONTENTS
   ════════════════════════════════════════════════════════════════
   1. Design tokens                       (~line 14)
   2. Base / global resets                (~line 50)
   3. Logo                                (~line 100)
   4. Header / navigation                 (~line 124)
   5. Hero (homepage)                     (~line 233)
   6. Recipe row sections (homepage)      (~line 343)
   7. Recipe card                         (~line 419)
   8. Cards grid (4 / 2 columns)          (~line 502)
   9. Browse bar (homepage)               (~line 528)
  10. About mini (homepage)               (~line 572)
  11. Category hero (archive)             (~line 643)
  12. Subcategory tabs (archive)          (~line 686)
  13. Archive layout                      (~line 750)
  14. Pagination                          (~line 773)
  15. Sidebar                             (~line 844)
  16. Single post                         (~line 994)
  17. Static page (About, Contact)        (~line 1400)
  18. Comments                            (~line 1423)
  19. Rating section + More Recipes       (~line 1491)
  20. WPRM recipe card                    (~line 1564)
  21. Recipe Index page                   (~line 1751)
  22. Footer                              (~line 1814)
  23. Responsive (≤1024 / ≤782 / ≤640)    (~line 1898)
   ════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ════════════════════════════════════════════════════════════════ */
:root {
  --rf-plum:        #2D1B3D;
  --rf-plum-hover:  #3d2855;
  --rf-amber:       #E8732A;
  --rf-amber-light: #FFF0E4;
  --rf-amber-hover: #d4641f;
  --rf-teal:        #1B7A6E;
  --rf-teal-light:  #E4F3F1;
  --rf-bg:          #FAFAF8;
  --rf-bg-warm:     #FEF8F2;
  --rf-tips-bg:     #FFF5EC;
  --rf-text:        #1a1a1a;
  --rf-muted:       #5a5a5a;
  --rf-light:       #9b9b9b;
  --rf-border:      #E6E2DD;
  --rf-card-bg:     #FFFFFF;
  --rf-gradient:    linear-gradient(135deg, #E8732A 0%, #1B7A6E 100%);

  --rf-shadow-xs:  0 1px 3px rgba(0,0,0,0.05);
  --rf-shadow-sm:  0 2px 8px rgba(0,0,0,0.07);
  --rf-shadow-md:  0 6px 24px rgba(0,0,0,0.10);
  --rf-shadow-lg:  0 14px 48px rgba(0,0,0,0.14);

  --rf-radius:     14px;
  --rf-radius-sm:  8px;
  --rf-radius-pill: 100px;
}

/* ════════════════════════════════════════════════════════════════
   BASE
   ════════════════════════════════════════════════════════════════ */

/* Force Inter on all headings — TT5 loads Source Serif 4 for h1-h6 via its own global styles.
   This override runs later in the document (body-injected) and wins over head styles. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-query-title {
  font-family: 'Inter', sans-serif !important;
}

/* wp:query inside our custom containers must span full width — defensive against
   constrained-layout shrinking it below the container's max-width. */
.rf-recipe-row .wp-block-query,
.rf-section-inner > .wp-block-query {
  max-width: none !important;
  width: 100% !important;
}

*, *::before, *::after { box-sizing: border-box; }

/* Prevent any element from causing horizontal scroll.
   `overflow-x: clip` (not `hidden`) — `hidden` defeats `position: sticky` on descendants. */
html, body { overflow-x: clip; max-width: 100%; }

/* Override TT5 parent's :where(.wp-site-blocks) > * { margin-block-start: 1.2rem }
   which adds an unwanted ~19px gap above every top-level block (most visibly above <main>).
   :where() has zero specificity so a plain class selector beats it. */
.wp-site-blocks > * { margin-block-start: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', sans-serif;
  background-color: var(--rf-bg);
  color: var(--rf-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.65;
}

/* Sticky header offset when WP admin bar is visible (logged-in users) */
.admin-bar .rf-header,
.admin-bar header.wp-block-template-part > .wp-block-group {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .rf-header,
  .admin-bar header.wp-block-template-part > .wp-block-group { top: 46px; }
}

/* Fix empty blocks */
.wp-block-post-featured-image:empty,
.entry-content:empty,
.wp-block-post-content:empty { display: none !important; }


/* ════════════════════════════════════════════════════════════════
   LOGO
   ════════════════════════════════════════════════════════════════ */
.rf-logo-wrap {
  display: flex;
  align-items: baseline;
  gap: 1px;
  text-decoration: none;
}
.rf-logo-recipe {
  font-weight: 300;
  font-size: 16px;
  letter-spacing: 0.2em;
  color: rgba(255,255,255,0.90);
  text-transform: uppercase;
}
.rf-logo-flow {
  font-weight: 900;
  font-size: 16px;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #E8732A, #3FC4B2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.rf-header,
header.wp-block-template-part > .wp-block-group {
  background-color: var(--rf-plum);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

/* Sticky header */
.rf-header,
header.wp-block-template-part,
header.wp-block-template-part > .wp-block-group {
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

.rf-header-inner {
  max-width: 1200px;  /* matches .rf-single-wrap so logo + nav align with content column */
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  gap: 40px;
}

/* Nav links */
header.wp-block-template-part .wp-block-navigation a,
header.wp-block-template-part .wp-block-navigation .wp-block-navigation-item__content,
.rf-header .wp-block-navigation a {
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
header.wp-block-template-part .wp-block-navigation a:hover,
.rf-header .wp-block-navigation a:hover {
  color: white !important;
}

/* Mobile menu */
header.wp-block-template-part .wp-block-navigation__responsive-container-open,
header.wp-block-template-part .wp-block-navigation__responsive-container-close {
  color: #ffffff !important;
}
header.wp-block-template-part .wp-block-navigation__responsive-container.is-menu-open {
  background-color: var(--rf-plum) !important;
}

/* Desktop (>1024px): force WP's overlay-container to render as INLINE nav, hide hamburger.
   With overlayMenu:"always", WP only renders nav items inside .__responsive-container (no
   direct .__container child). We override that container's overlay-positioning so items
   appear inline at the right side of the header. */
@media (min-width: 1025px) {
  /* Hide hamburger and X-close on desktop */
  .rf-header-inner .wp-block-navigation__responsive-container-open { display: none !important; }
  .rf-header-inner .wp-block-navigation__responsive-container-close { display: none !important; }

  /* Make the responsive container behave like inline nav */
  .rf-header-inner .wp-block-navigation__responsive-container {
    display: block !important;
    position: static !important;
    visibility: visible !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    padding: 0 !important;
    opacity: 1 !important;
  }
  .rf-header-inner .wp-block-navigation__responsive-container-content {
    display: block !important;
    width: auto !important;
  }
  /* Items horizontal */
  .rf-header-inner .wp-block-navigation__container {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 1.75rem !important;
  }
  .rf-header-inner .wp-block-navigation__container > li { display: inline-flex !important; }
}

/* Template-part wrappers AFTER .rf-single-wrap (rating-cta, more-recipes, comments) must
   span the full viewport. Scoped via sibling selector so the SIDEBAR template-part
   inside .rf-single-wrap is NOT affected (it must stay constrained to its column).
   Single rule — no inner-section override (that caused layout interference with article content). */
.rf-single-wrap ~ .wp-block-template-part {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
}

/* X close button on mobile/tablet nav overlay — push further from corner so the
   touch target doesn't collide with the screen edge. */
.rf-header-inner .wp-block-navigation__responsive-container-close,
header.wp-block-template-part .wp-block-navigation__responsive-container-close {
  top: 20px !important;
  right: 20px !important;
  padding: 12px !important;
}

/* Browse button — compact */
.rf-btn-browse,
.rf-btn-browse a,
.rf-btn-browse .wp-block-button__link {
  background: var(--rf-amber) !important;
  color: white !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  padding: 5px 13px !important;
  border-radius: var(--rf-radius-pill) !important;
  border: none !important;
  text-decoration: none !important;
  transition: background 0.2s !important;
  white-space: nowrap !important;
}
.rf-btn-browse:hover .wp-block-button__link,
.rf-btn-browse a:hover { background: var(--rf-amber-hover) !important; }

/* Search toggle — visible on desktop AND mobile (FP-9). Order on desktop
   places it between nav and Browse Recipes button. Mobile keeps DOM order.
   `display: contents` on .wp-block-html promotes its children to flex items
   of the header (handles WP renderers that wrap wp:html in a div).  */
.rf-search-wrap {
  display: inline-flex !important;
  align-items: center;
  position: relative;
  visibility: visible !important;
  opacity: 1 !important;
}
.rf-header-inner > .wp-block-html { display: contents; }
.rf-search-toggle {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
@media (min-width: 1025px) {
  .rf-header-inner .wp-block-site-logo { order: 1; }
  .rf-header-inner .wp-block-navigation { order: 2; }
  .rf-header-inner .rf-search-wrap,
  .rf-header-inner > .wp-block-html { order: 3; }
  .rf-header-inner .wp-block-buttons { order: 4; }
}
.rf-search-toggle {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color 0.2s;
}
.rf-search-toggle:hover { color: white; }
.rf-search-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  width: 210px;
  background: var(--rf-plum);
  border-radius: 0 0 var(--rf-radius-sm) var(--rf-radius-sm);
  padding: 10px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.35);
  z-index: 300;
}
.rf-search-dropdown.open { display: flex; }
.rf-search-dropdown input {
  width: 100%;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--rf-radius-sm);
  color: white;
  padding: 9px 12px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  outline: none;
}
.rf-search-dropdown input::placeholder { color: rgba(255,255,255,0.45); }


/* ════════════════════════════════════════════════════════════════
   HERO (homepage)
   ════════════════════════════════════════════════════════════════ */
.rf-hero {
  background: var(--rf-bg-warm);
  background-image:
    radial-gradient(ellipse 800px 400px at 50% -40px, rgba(232,115,42,0.09) 0%, transparent 70%),
    radial-gradient(ellipse 600px 300px at 80% 100%, rgba(27,122,110,0.07) 0%, transparent 60%);
  padding: 80px 32px 72px;
  text-align: center;
  border-bottom: 1px solid var(--rf-border);
}
.rf-hero-inner {
  max-width: 700px;
  margin: 0 auto;
}
.rf-hero-eyebrow {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rf-amber);
  margin-bottom: 20px;
  padding: 5px 14px;
  background: var(--rf-amber-light);
  border-radius: var(--rf-radius-pill);
}
.rf-hero-title {
  font-size: clamp(42px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.035em;
  color: var(--rf-text);
  margin-bottom: 16px;
}
.rf-hero-title .rf-grad {
  background: var(--rf-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-hero-sub {
  font-size: 17px;
  color: var(--rf-muted);
  margin-bottom: 40px;
  line-height: 1.6;
}
.rf-search-form {
  display: flex;
  max-width: 580px;
  margin: 0 auto 28px;
  background: white;
  border-radius: var(--rf-radius-pill);
  box-shadow: 0 4px 28px rgba(0,0,0,0.11), 0 0 0 1.5px rgba(0,0,0,0.06);
  overflow: hidden;
}
.rf-search-form input[type="search"] {
  flex: 1;
  border: none;
  outline: none;
  padding: 16px 16px 16px 22px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  color: var(--rf-text);
  background: transparent;
  -webkit-appearance: none;
}
.rf-search-form input::placeholder { color: var(--rf-light); }
.rf-search-form button[type="submit"] {
  background: var(--rf-amber);
  color: white;
  border: none;
  padding: 13px 28px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: 0 var(--rf-radius-pill) var(--rf-radius-pill) 0;
  white-space: nowrap;
}
.rf-search-form button:hover { background: var(--rf-amber-hover); }

.rf-hero-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rf-hero-pills a {
  display: inline-block;
  padding: 7px 16px;
  background: white;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-muted);
  text-decoration: none;
  transition: all 0.18s;
}
.rf-hero-pills a:hover {
  border-color: var(--rf-amber);
  color: var(--rf-amber);
  background: var(--rf-amber-light);
}


/* ════════════════════════════════════════════════════════════════
   RECIPE ROW SECTIONS (homepage)
   ════════════════════════════════════════════════════════════════ */

/* Shared inner container — used by recipe rows and any full-width section */
.rf-section-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
@media (max-width: 640px) {
  .rf-section-inner { padding: 0 20px; }
}

.rf-recipe-row {
  padding: 56px 0 0;
}
.rf-recipe-row:last-of-type { padding-bottom: 64px; }

.rf-row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.rf-row-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Accent bar as a pseudo-element on the H2 itself — guaranteed to align with text metrics
   regardless of font-size, line-height, or surrounding flex layout. The legacy
   .rf-row-accent <div> in content is hidden so we don't render two bars. */
.rf-row-accent { display: none !important; }
.rf-row-header h2 {
  position: relative;
  padding-left: 16px;
}
.rf-row-header h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(50% + 2px);   /* 2px nudge down — accent visually balanced with the text glyphs
                              (Inter font has slightly more line-leading at top than at bottom) */
  transform: translateY(-50%);
  width: 4px;
  height: 0.95em;         /* slightly bigger so it reaches glyph bottom */
  border-radius: 2px;
  background: var(--rf-gradient);
}
.rf-row-header h2 {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  color: var(--rf-text) !important;
  margin: 0 !important;
  line-height: 1.1 !important;
}
.rf-row-header h2::after { display: none !important; } /* remove old underline */
.rf-row-subtitle {
  font-size: 13px !important;
  color: var(--rf-muted) !important;
  margin: 0 0 14px !important;
  font-weight: 400 !important;
  padding-left: 28px !important; /* align with h2 (after accent bar + gap) */
}
.rf-view-all {
  color: var(--rf-amber);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: color 0.2s;
}
.rf-view-all:hover { color: var(--rf-amber-hover); }

.rf-row-desc {
  font-size: 15px;
  color: var(--rf-muted);
  line-height: 1.68;
  margin-bottom: 24px;
  max-width: 680px;
}

.rf-row-divider {
  border: none;
  border-top: 1.5px solid var(--rf-border);
  margin: 0;
}


/* ════════════════════════════════════════════════════════════════
   RECIPE CARD
   ════════════════════════════════════════════════════════════════ */
/* Card visual treatment lives ONLY on .rf-card. The wp:query wrapper (.wp-block-post)
   stays transparent so we don't get a double border when .rf-card is nested inside. */
.rf-card {
  background: var(--rf-card-bg);
  border-radius: var(--rf-radius);
  overflow: hidden;
  box-shadow: var(--rf-shadow-xs);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  border: 1px solid rgba(0,0,0,0.05);
}
.rf-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--rf-shadow-lg);
}
/* Reset wp-block-post when it wraps a .rf-card — no double border / shadow / background */
.wp-block-query .wp-block-post {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  /* Make wp-block-post (grid item) and inner .rf-card both fill row height — equalises
     visible card heights even when titles wrap to different line counts. */
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-query .wp-block-post > .rf-card,
.wp-block-query .wp-block-post .rf-card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}
.wp-block-query .wp-block-post .rf-card .rf-card-body {
  flex: 1 !important;
}

/* Card image */
.rf-card .wp-block-post-featured-image,
.rf-card .card-img-wrap {
  overflow: hidden;
  aspect-ratio: 16/10;
  background: #f0ebe5;
}
.rf-card .wp-block-post-featured-image img,
.rf-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.45s ease;
  display: block;
}
.rf-card:hover .wp-block-post-featured-image img,
.rf-card:hover .card-img-wrap img {
  transform: scale(1.06);
}

/* Card body */
.rf-card-body {
  padding: 16px 18px 18px;
}

/* Card tag/category */
.rf-card-tag,
.rf-card .wp-block-post-terms {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--rf-radius-pill);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 9px;
  background: var(--rf-amber-light);
  color: var(--rf-amber);
  text-decoration: none;
}
.rf-card .wp-block-post-terms a { color: inherit; text-decoration: none; }

/* Card title */
.rf-card .wp-block-post-title,
.rf-card-title {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  margin-bottom: 10px !important;
  color: var(--rf-text) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rf-card .wp-block-post-title a { color: inherit; text-decoration: none; }

.rf-card-meta {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--rf-muted);
  font-weight: 500;
}


/* ════════════════════════════════════════════════════════════════
   CARDS GRID (4 columns)
   ════════════════════════════════════════════════════════════════ */

/* Query wrapper must be block — grid goes on the inner ul (post-template).
   Same pattern as rf-cards-2. If the wrapper itself is a grid, the ul
   only gets 1/4 of the width and all cards stack inside a tiny strip. */
.rf-cards-4 { display: block !important; }
.rf-cards-4.wp-block-post-template { gap: 22px !important; }

/* Archive grid — grid on post-template, NOT on query wrapper (pagination fix).
   Default align-items: stretch (no override) so cards equalise heights per row.
   Trade-off: cards without featured images get an empty area below their text — but
   uneven heights look worse than that hole, per user preference. */
.rf-cards-2 { display: block !important; }
.rf-cards-2 > .wp-block-post-template,
.rf-cards-2 > ul.wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 24px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  .rf-cards-2 > .wp-block-post-template { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════════
   BROWSE BAR (homepage)
   ════════════════════════════════════════════════════════════════ */
.rf-browse-bar {
  background: var(--rf-text);
  padding: 28px 32px;
}
.rf-browse-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.rf-browse-label {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.38);
  margin-bottom: 14px;
}
.rf-browse-scroll {
  display: flex;
  gap: 9px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.rf-browse-scroll::-webkit-scrollbar { display: none; }
.rf-browse-pill {
  display: inline-block;
  padding: 7px 17px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--rf-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  text-decoration: none;
  transition: all 0.18s;
  cursor: pointer;
}
.rf-browse-pill:hover { background: var(--rf-amber); border-color: var(--rf-amber); color: white; }


/* ════════════════════════════════════════════════════════════════
   ABOUT MINI (homepage)
   ════════════════════════════════════════════════════════════════ */
.rf-about-mini {
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 32px;       /* desktop padding — overridden in @media for tighter mobile/tablet */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
}
.rf-about-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rf-teal);
  margin-bottom: 14px;
}
.rf-about-title {
  font-size: clamp(32px, 4vw, 42px);
  font-weight: 900 !important;
  letter-spacing: -0.03em;
  line-height: 1.1 !important;
  margin-bottom: 20px;
}
.rf-about-title em {
  font-style: normal;
  background: var(--rf-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-about-text {
  font-size: 16px;
  color: var(--rf-muted);
  line-height: 1.75;
  margin-bottom: 14px;
}
.rf-btn-plum,
.rf-btn-plum .wp-block-button__link {
  background: var(--rf-plum) !important;
  color: white !important;
  border-radius: var(--rf-radius-pill) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 12px 26px !important;
  border: none !important;
  transition: background 0.2s, transform 0.15s !important;
}
.rf-btn-plum:hover .wp-block-button__link,
.rf-btn-plum a:hover {
  background: var(--rf-plum-hover) !important;
  transform: translateY(-1px) !important;
}
.rf-about-badge {
  background: var(--rf-tips-bg);
  border: 1.5px solid rgba(232,115,42,0.18);
  border-radius: var(--rf-radius);
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
}
.rf-about-badge-icon { font-size: 30px; flex-shrink: 0; }
.rf-about-badge strong { font-size: 14.5px; font-weight: 700; display: block; margin-bottom: 2px; }
.rf-about-badge span { font-size: 13px; color: var(--rf-muted); }


/* ════════════════════════════════════════════════════════════════
   CATEGORY HERO (archive page) — also used on Recipe Blog, Recipe Index,
   Latest Recipes. Inner has padding to align with .rf-header-inner so the
   title starts at the same x-position as the logo (logo edge alignment).
   ════════════════════════════════════════════════════════════════ */
.rf-cat-hero {
  background: var(--rf-bg-warm);
  border-bottom: 1px solid var(--rf-border);
  padding: 48px 0 36px;
}
.rf-cat-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}
/* Breadcrumb inside cat-hero — small, muted, like .rf-jump-bar (single post).
   Aggressive selectors covering all the variants Yoast/themes render breadcrumbs as
   (#breadcrumbs, .yoast-breadcrumbs, .breadcrumbs, plain <p> from wp:shortcode). */
.rf-cat-hero p:not(.rf-cat-desc),
.rf-cat-hero p:not(.rf-cat-desc) *,
.rf-cat-hero #breadcrumbs,
.rf-cat-hero #breadcrumbs *,
.rf-cat-hero .yoast-breadcrumbs,
.rf-cat-hero .yoast-breadcrumbs *,
.rf-cat-hero .breadcrumbs,
.rf-cat-hero .breadcrumbs *,
.rf-cat-hero .wp-block-shortcode,
.rf-cat-hero .wp-block-shortcode * {
  font-size: 11.5px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.rf-cat-hero p:not(.rf-cat-desc),
.rf-cat-hero #breadcrumbs,
.rf-cat-hero .yoast-breadcrumbs,
.rf-cat-hero .breadcrumbs,
.rf-cat-hero .wp-block-shortcode {
  color: var(--rf-muted) !important;
  margin-bottom: 6px !important;
}
.rf-cat-hero p:not(.rf-cat-desc) a,
.rf-cat-hero #breadcrumbs a,
.rf-cat-hero .yoast-breadcrumbs a,
.rf-cat-hero .breadcrumbs a,
.rf-cat-hero .wp-block-shortcode a {
  color: var(--rf-muted) !important;
  text-decoration: none !important;
  transition: color 0.18s !important;
}
.rf-cat-hero p:not(.rf-cat-desc) a:hover,
.rf-cat-hero #breadcrumbs a:hover,
.rf-cat-hero .yoast-breadcrumbs a:hover,
.rf-cat-hero .breadcrumbs a:hover,
.rf-cat-hero .wp-block-shortcode a:hover {
  color: var(--rf-amber) !important;
}
/* Re-assert title and desc in cat-hero — must beat the broad descendant rules above */
.rf-cat-hero .rf-cat-title,
.rf-cat-hero .wp-block-query-title {
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
  color: var(--rf-text) !important;
}
.rf-cat-hero .rf-cat-desc,
.rf-cat-hero .wp-block-term-description {
  font-size: 15.5px !important;
  color: var(--rf-muted) !important;
  line-height: 1.7 !important;
  max-width: 620px !important;
  margin: 0 !important;
  font-weight: 400 !important;
}

/* Search input (wp:search block) on /search/ page + 404. Pill-style, matches the
   homepage hero search aesthetic. SR-2 + E4-1.
   Selectors hit BOTH the .rf-search-bar variant AND any bare .wp-block-search
   used elsewhere — so styling is consistent regardless of how the block was
   inserted. */
.rf-search-bar,
.wp-block-search.rf-search-bar,
form.rf-search-bar {
  max-width: 580px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}
.rf-search-bar .wp-block-search__label,
form.rf-search-bar .wp-block-search__label { display: none !important; }
.rf-search-bar .wp-block-search__inside-wrapper,
form.rf-search-bar .wp-block-search__inside-wrapper {
  background: white !important;
  border-radius: var(--rf-radius-pill) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,0.11), 0 0 0 1.5px rgba(0,0,0,0.06) !important;
  overflow: hidden !important;
  display: flex !important;
  border: none !important;
  padding: 0 !important;
}
.rf-search-bar input.wp-block-search__input,
.rf-search-bar input[type="search"],
form.rf-search-bar input.wp-block-search__input,
form.rf-search-bar input[type="search"] {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  padding: 14px 16px 14px 22px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  color: var(--rf-text) !important;
  background: transparent !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
}
.rf-search-bar input.wp-block-search__input::placeholder,
.rf-search-bar input[type="search"]::placeholder { color: var(--rf-light) !important; }
.rf-search-bar button.wp-block-search__button,
.rf-search-bar button[type="submit"],
.rf-search-bar .wp-element-button,
form.rf-search-bar button.wp-block-search__button,
form.rf-search-bar button[type="submit"],
form.rf-search-bar .wp-element-button {
  background: var(--rf-amber) !important;
  background-color: var(--rf-amber) !important;
  color: white !important;
  border: none !important;
  padding: 13px 28px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border-radius: 0 var(--rf-radius-pill) var(--rf-radius-pill) 0 !important;
  white-space: nowrap !important;
  transition: background 0.2s !important;
  box-shadow: none !important;
  text-decoration: none !important;
  margin: 0 !important;
}
.rf-search-bar button.wp-block-search__button:hover,
.rf-search-bar button[type="submit"]:hover,
form.rf-search-bar button[type="submit"]:hover {
  background: var(--rf-amber-hover) !important;
  background-color: var(--rf-amber-hover) !important;
}
.rf-cat-label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--rf-amber-light);
  color: var(--rf-amber);
  border-radius: var(--rf-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.rf-cat-title,
.wp-block-query-title {
  font-size: clamp(32px, 5vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  margin-bottom: 14px !important;
  color: var(--rf-text) !important;
}
.rf-cat-desc,
.wp-block-term-description {
  font-size: 15.5px !important;
  color: var(--rf-muted) !important;
  line-height: 1.7 !important;
  max-width: 620px !important;
  margin-bottom: 0 !important;
}


/* ════════════════════════════════════════════════════════════════
   SUBCATEGORY TABS (archive)
   ════════════════════════════════════════════════════════════════ */
.rf-subcats {
  background: white;
  border-bottom: 1px solid var(--rf-border);
  padding: 0 32px;
  overflow-x: auto;
  scrollbar-width: none;
}
.rf-subcats::-webkit-scrollbar { display: none; }
.rf-subcats-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 0;
}
.rf-subcat-all {
  font-size: 13px;
  font-weight: 700;
  color: var(--rf-amber);
  text-decoration: none;
  border-bottom: 2.5px solid var(--rf-amber);
  padding: 0 16px;
  height: 52px;
  display: flex;
  align-items: center;
  white-space: nowrap;
}

/* Subcategory buttons (shortcode) */
.rf-subcategories {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 32px;
  max-width: 1200px;
  margin: 0 auto;
  background: white;
  border-bottom: 1px solid var(--rf-border);
}
.rf-subcategory-btn {
  display: inline-block;
  padding: 7px 16px;
  background: white;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--rf-muted);
  text-decoration: none;
  transition: all 0.18s;
  white-space: nowrap;
}
.rf-subcategory-btn:hover,
.rf-subcategory-btn.active {
  border-color: var(--rf-amber);
  color: var(--rf-amber);
  background: var(--rf-amber-light);
}


/* ════════════════════════════════════════════════════════════════
   ARCHIVE LAYOUT (2/3 + 1/3 with sidebar)
   ════════════════════════════════════════════════════════════════ */
.rf-archive-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 32px 72px;
}
/* wp:columns inside archive-wrap — flex layout with sidebar (replaces grid) */
.rf-archive-cols { align-items: flex-start !important; }
.rf-archive-cols.is-layout-flex { gap: 48px !important; }
.rf-article-col { flex: 1 !important; min-width: 0 !important; }

.rf-sort-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}
.rf-sort-count { font-size: 14px; color: var(--rf-muted); }
.rf-sort-count strong { color: var(--rf-text); font-weight: 700; }


/* ════════════════════════════════════════════════════════════════
   PAGINATION
   ════════════════════════════════════════════════════════════════ */
.wp-block-query-pagination,
.rf-pagination {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 40px !important;
  padding-top: 32px !important;
  border-top: 1.5px solid var(--rf-border) !important;
  width: 100% !important;
}
/* Numbers container must also be horizontal */
.wp-block-query-pagination-numbers {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 6px !important;
}
.wp-block-query-pagination-numbers a,
.wp-block-query-pagination-numbers span,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: var(--rf-radius-sm) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  color: var(--rf-muted) !important;
  border: 1.5px solid var(--rf-border) !important;
  transition: all 0.18s !important;
}
.wp-block-query-pagination-numbers .current {
  background: var(--rf-amber) !important;
  border-color: var(--rf-amber) !important;
  color: white !important;
}
.wp-block-query-pagination-numbers a:hover {
  border-color: var(--rf-amber) !important;
  color: var(--rf-amber) !important;
}

/* Previous / Next — amber pill, auto width to fit text */
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  width: auto !important;
  min-width: unset !important;
  padding: 0 18px !important;
  background: var(--rf-amber) !important;
  border-color: var(--rf-amber) !important;
  color: white !important;
  white-space: nowrap !important;
  border-radius: var(--rf-radius-pill) !important;
}
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  background: var(--rf-amber-hover) !important;
  border-color: var(--rf-amber-hover) !important;
  color: white !important;
}


/* ════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════ */
.rf-sidebar {
  position: sticky;
  top: 84px;
  align-self: start;
}

.rf-sidebar-card {
  background: white;
  border-radius: var(--rf-radius);
  padding: 22px;
  margin-bottom: 20px;
  box-shadow: var(--rf-shadow-xs);
  border: 1px solid rgba(0,0,0,0.05);
}
.rf-sidebar-card.rf-sidebar-nl {
  background: var(--rf-tips-bg);
  border: 1.5px solid rgba(232,115,42,0.18);
}

.rf-sidebar-heading {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--rf-muted) !important;
  margin-bottom: 16px !important;
  padding-bottom: 10px !important;
  border-bottom: 1.5px solid var(--rf-border) !important;
}

/* Author bio */
.rf-author-bio {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-bottom: 14px;
}
.rf-author-avatar {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--rf-border);
  background: linear-gradient(135deg, #E8732A, #1B7A6E);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 900;
  color: white;
}
.rf-author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rf-author-name { font-size: 15px; font-weight: 700; margin-bottom: 2px; }
.rf-author-role { font-size: 12px; color: var(--rf-amber); font-weight: 600; }
.rf-author-bio-text {
  font-size: 13px;
  color: var(--rf-muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

/* Popular list in sidebar */
.rf-popular-list,
.rf-sidebar .wp-block-latest-posts {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.rf-popular-list li,
.rf-sidebar .wp-block-latest-posts li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  padding: 10px 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
}
.rf-popular-list li:last-child,
.rf-sidebar .wp-block-latest-posts li:last-child { border-bottom: none !important; }

.rf-sidebar .wp-block-latest-posts__featured-image {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  border-radius: var(--rf-radius-sm) !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}
.rf-sidebar .wp-block-latest-posts__featured-image img {
  width: 100% !important; height: 100% !important; object-fit: cover !important;
}
.rf-sidebar .wp-block-latest-posts__post-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: var(--rf-text) !important;
  text-decoration: none !important;
}
.rf-sidebar .wp-block-latest-posts__post-title:hover { color: var(--rf-amber) !important; }

/* Categories in sidebar */
.rf-sidebar .wp-block-categories { list-style: none !important; padding: 0 !important; }
.rf-sidebar .wp-block-categories li {
  padding: 6px 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
  font-size: 13.5px !important;
}
.rf-sidebar .wp-block-categories li:last-child { border-bottom: none !important; }
.rf-sidebar .wp-block-categories a {
  color: var(--rf-text) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.18s !important;
}
.rf-sidebar .wp-block-categories a:hover { color: var(--rf-amber) !important; }

/* Newsletter in sidebar */
.rf-sidebar-nl-text { font-size: 13px; color: var(--rf-muted); line-height: 1.6; margin-bottom: 12px; }
.rf-sidebar-nl-input {
  width: 100%;
  padding: 9px 14px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--rf-text);
  outline: none;
  margin-bottom: 8px;
  transition: border-color 0.2s;
}
.rf-sidebar-nl-input:focus { border-color: var(--rf-amber); }
.rf-sidebar-nl-btn {
  width: 100%;
  padding: 9px;
  background: var(--rf-amber);
  color: white;
  border: none;
  border-radius: var(--rf-radius-pill);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.rf-sidebar-nl-btn:hover { background: var(--rf-amber-hover); }


/* ════════════════════════════════════════════════════════════════
   SINGLE POST
   ════════════════════════════════════════════════════════════════ */
.rf-single-wrap {
  max-width: 1200px !important;  /* food-blog standard: ~832px article + 320px sidebar + 48px gap */
  margin: 0 auto 0 auto !important;
  padding: 32px 32px 0 !important;  /* zero bottom — rating-section sits flush */
  display: block !important;
  overflow-x: clip;
}
/* Strip any vertical bleed from the article column / columns / post-content so nothing
   adds dead space between the last paragraph and the next section. */
.rf-single-columns,
.rf-article-col,
.rf-article-col .wp-block-post-content {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
.rf-single-wrap ~ .wp-block-template-part {
  margin-top: 0 !important;
}
/* Break out of constrained-layout 720px cap — columns need full wrap width */
.rf-single-columns.wp-block-columns {
  max-width: 100% !important;
  width: 100%;
}
/* wp:columns handles the flex layout; sidebar needs align-self:start for sticky to work */
.rf-single-columns {
  align-items: start !important;
}
.rf-article-col {
  min-width: 0; /* prevents flex blowout on narrow screens */
}
.rf-sidebar-col {
  position: sticky;
  top: 80px;
  align-self: start;
  min-width: 0;
}
/* Hidden wp:post-date block — used only for JS date reading */
.rf-hidden-date {
  display: none !important;
}

/* Jump bar */
.rf-jump-bar {
  background: white;
  border-bottom: 1px solid var(--rf-border);
  padding: 0;
}
.rf-jump-bar-inner {
  max-width: 1200px;       /* match .rf-single-wrap so breadcrumb aligns with content column */
  margin: 0 auto;
  padding: 0 32px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}
.rf-btn-jump {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: var(--rf-amber-light);
  color: var(--rf-amber);
  text-decoration: none;
  border-radius: var(--rf-radius-pill);
  font-size: 12.5px;
  font-weight: 700;
  transition: all 0.18s;
  white-space: nowrap;
}
.rf-btn-jump:hover { background: var(--rf-amber); color: white; }

/* Breadcrumb */
.rf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--rf-muted);
}
.rf-breadcrumb a { color: var(--rf-muted); text-decoration: none; transition: color 0.2s; }
.rf-breadcrumb a:hover { color: var(--rf-amber); }
.rf-breadcrumb-sep { color: var(--rf-light); }
.rf-breadcrumb-current { color: var(--rf-text); font-weight: 500; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Yoast SEO breadcrumbs — Yoast outputs <span class="breadcrumbs breadcrumb-keepcase">
   Newer versions use <nav class="yoast-breadcrumbs">. Target both.
   Font size 11px — small/secondary navigation element, clearly below body text. */
.breadcrumbs.breadcrumb-keepcase,
.yoast-breadcrumbs,
.wp-block-shortcode .breadcrumbs {
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--rf-muted) !important;
  line-height: 1.4 !important;
}
.breadcrumbs.breadcrumb-keepcase span,
.breadcrumbs.breadcrumb-keepcase p,
.yoast-breadcrumbs span,
.yoast-breadcrumbs p,
.yoast-breadcrumbs li,
.rf-jump-bar span,
.rf-jump-bar p {
  font-size: 11px !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--rf-muted) !important;
}
.breadcrumbs.breadcrumb-keepcase a,
.yoast-breadcrumbs a {
  color: var(--rf-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
  font-weight: 400 !important;
}
.breadcrumbs.breadcrumb-keepcase a:hover,
.yoast-breadcrumbs a:hover { color: var(--rf-amber) !important; }
.breadcrumb_last {
  color: var(--rf-text) !important;
  font-weight: 500 !important;
  max-width: 480px !important;
  display: inline-block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  vertical-align: bottom !important;
}
/* Neutralise any WP block default margins on the shortcode wrapper */
.rf-jump-bar .wp-block-shortcode,
.rf-cat-hero .wp-block-shortcode {
  font-size: 11px !important;
  line-height: 1.4 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.rf-jump-bar .wp-block-shortcode > *,
.rf-cat-hero .wp-block-shortcode > * {
  margin: 0 !important;
  padding: 0 !important;
}

/* Post tags */
.rf-post-tags { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.rf-post-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--rf-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--rf-amber-light);
  color: var(--rf-amber);
  text-decoration: none;
}
.rf-post-tag.teal { background: var(--rf-teal-light); color: var(--rf-teal); }

/* Post title */
.rf-post-title,
.wp-block-post-title {
  font-size: clamp(30px, 4vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 16px !important;
  color: var(--rf-text) !important;
}

/* Post intro */
.rf-post-intro {
  font-size: 17px;
  line-height: 1.75;
  color: var(--rf-muted);
  margin-bottom: 28px;
  border-left: 3px solid var(--rf-amber);
  padding-left: 20px;
  font-style: italic;
}

/* Recipe lead paragraph — hook / first paragraph of every recipe post.
   Targets:
   1) Explicit class on the writer's <p class="rf-lead"> output
   2) RETROACTIVE auto-styling for the FIRST <p> in any post's content. Single-paragraph
      treatment so we don't accidentally style every paragraph in the post. Works on all
      11k existing posts without rewriting any content.
   The previous :has(~ figure) approach matched any <p> with a figure later anywhere in
   the post — caught Storage / FAQ / Tips paragraphs. Switching to :first-of-type is precise. */
.rf-lead,
.wp-block-post-content > p:first-of-type {
  font-size: 1.1em;
  line-height: 1.75;
  color: var(--rf-text);
  border-left: 3px solid var(--rf-amber);
  padding-left: 20px;
  margin-bottom: 24px;
  margin-left: 0;
}

/* Post meta bar */
.rf-post-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rf-border);
  border-bottom: 1px solid var(--rf-border);
  margin-bottom: 32px;
  font-size: 13px;
  color: var(--rf-muted);
  flex-wrap: wrap;
}
.rf-meta-dot { color: var(--rf-border); }
.rf-meta-author { display: flex; align-items: center; gap: 8px; }
.rf-meta-avatar {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 50%;
  background: var(--rf-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 900; color: white;
  flex-shrink: 0;
}
.rf-meta-author-text { font-size: 13px; }
.rf-meta-author-link {
  color: var(--rf-amber);
  font-weight: 600;
  text-decoration: none;
}
.rf-meta-time { font-size: 13px; color: var(--rf-muted); }
.rf-meta-comment-link {
  font-size: 13px;
  color: var(--rf-muted);
  text-decoration: none;
}
.rf-affiliate-note {
  font-size: 11.5px;
  color: var(--rf-light);
  margin: -22px 0 18px;     /* tighter — sits closer to the meta-bar bottom border */
  font-style: italic;
}
#rf-post-date { width: 175px; white-space: nowrap; overflow: hidden; }
#rf-read-time { width: 80px; white-space: nowrap; overflow: hidden; }

/* Featured image */
.rf-featured-img,
.wp-block-post-featured-image {
  border-radius: var(--rf-radius) !important;
  overflow: hidden !important;
  margin-bottom: 20px !important;
}
/* WPRM jump-to-recipe button — transparent pill button. Catch-all selectors so the
   styling applies whether WPRM uses default markup or any custom template variant. */
.wprm-recipe-jump-to-recipe-container,
.wprm-jump-to-recipe-container,
[class^="wprm-recipe-jump"],
[class*=" wprm-recipe-jump"] {
  margin-top: 0 !important;
  margin-bottom: 24px !important;
}
.wprm-recipe-jump-to-recipe-container a,
.wprm-recipe-jump-to-recipe-container button,
.wprm-recipe-jump-to-recipe-jump,
.wprm-jump-to-recipe-jump,
a[class*="wprm-recipe-jump"],
a[class*="jump-to-recipe"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 6px 14px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  font-family: 'Inter', sans-serif !important;
  color: #828282 !important;       /* between --rf-muted (#5a5a5a) and --rf-light (#9b9b9b) — blended but not invisible */
  background: transparent !important;
  border: 1.5px solid var(--rf-border) !important;
  border-radius: 100px !important;
  text-decoration: none !important;
  transition: all 0.18s !important;
  letter-spacing: 0.02em !important;
  cursor: pointer !important;
}
.wprm-recipe-jump-to-recipe-container a:hover,
.wprm-recipe-jump-to-recipe-jump:hover,
.wprm-jump-to-recipe-jump:hover {
  border-color: var(--rf-amber) !important;
  color: var(--rf-amber) !important;
  background: var(--rf-amber-light) !important;
}

/* Kill ALL automatic block-gap on the article column — spacing comes from individual margins */
.rf-article-col.wp-block-column,
.rf-article-col {
  --wp--style--block-gap: 0 !important;
  row-gap: 0 !important;
}
.rf-article-col > * {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
/* Featured image bottom margin */
.rf-article-col > .wp-block-post-featured-image {
  margin-bottom: 20px !important;
}
/* First child inside post content — WPRM jump button */
.rf-article-col .wp-block-post-content > *:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.rf-featured-img img,
.wp-block-post-featured-image img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Post body prose */
.rf-post-body p,
.wp-block-post-content p {
  font-size: 16px;
  line-height: 1.78;
  color: var(--rf-text);
  margin-bottom: 18px;
}
.rf-post-body h2,
.wp-block-post-content h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 40px 0 14px !important;       /* default — restored to original spacing */
  scroll-margin-top: 90px;
}
/* Targeted: when an H2 follows a figure (typical "section ends with image, next section
   begins with heading"), tighten the top margin so we don't pile up figure-bottom-margin
   + WP block-gap + h2-top-margin into a 170px gap. */
.wp-block-post-content figure.wp-block-image + h2,
.wp-block-post-content figure + h2 {
  margin-top: 18px !important;
}
.rf-post-body h3,
.wp-block-post-content h3 {
  font-size: 18px !important;
  font-weight: 700 !important;
  margin: 28px 0 10px !important;
}
.rf-post-body ul, .rf-post-body ol { margin: 0 0 18px 22px; }
.rf-post-body li { font-size: 16px; line-height: 1.72; margin-bottom: 6px; }

/* Tips box */
.rf-tips-box,
.wp-block-post-content .wp-block-group.has-amber-background-color,
.wp-block-post-content .wp-block-group.has-background:not([class*="plum"]):not([class*="teal"]) {
  background: var(--rf-tips-bg) !important;
  border: 1px solid rgba(232,115,42,0.22) !important;
  border-left: 5px solid var(--rf-amber) !important;
  border-radius: var(--rf-radius) !important;
  padding: 20px 22px 20px 20px !important;
  margin: 36px 0 !important;
  box-shadow: 0 2px 12px rgba(232,115,42,0.08) !important;
}
.rf-tips-box-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--rf-amber);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rf-tips-box-title::before {
  content: "💡";
  font-size: 14px;
  line-height: 1;
}
.rf-tips-box li {
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: var(--rf-text) !important;
  margin-bottom: 8px !important;
  padding-left: 4px;
}
.rf-tips-box li:last-child { margin-bottom: 0 !important; }
.rf-tips-box p {
  font-size: 15px !important;
  line-height: 1.68 !important;
  color: var(--rf-text) !important;
  margin: 0 !important;
}

/* Callout variants — can be added as extra className in Gutenberg */
.rf-callout-warning {
  background: #fffbeb;
  border-color: rgba(234,179,8,0.3);
  border-left-color: #eab308;
}
.rf-callout-warning .rf-tips-box-title { color: #92400e; }
.rf-callout-warning .rf-tips-box-title::before { content: "⚠️"; }

.rf-callout-note {
  background: #f0f9ff;
  border-color: rgba(14,165,233,0.2);
  border-left-color: #0ea5e9;
}
.rf-callout-note .rf-tips-box-title { color: #0369a1; }
.rf-callout-note .rf-tips-box-title::before { content: "📝"; }

/* WPRM Recipe Card wrapper (legacy class — kept in case old posts reference it) */
.rf-recipe-card-wprm-wrap {
  border: 2px solid var(--rf-amber) !important;
  border-radius: var(--rf-radius) !important;
  margin: 48px 0 !important;
  overflow: hidden !important;
  box-shadow: var(--rf-shadow-md) !important;
}


/* ════════════════════════════════════════════════════════════════
   YOAST FAQ BLOCK — schema preserved, our visual styling layered on top
   ════════════════════════════════════════════════════════════════ */
.schema-faq,
.wp-block-yoast-faq-block {
  margin: 36px 0;
  border-top: 1.5px solid var(--rf-border);
}
.schema-faq-section,
.wp-block-yoast-faq-block .schema-faq-section {
  padding: 18px 0;
  border-bottom: 1px solid var(--rf-border);
}
.schema-faq-section:last-child { border-bottom: none; }
.schema-faq-question {
  display: block !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--rf-text) !important;
  margin-bottom: 8px !important;
  letter-spacing: -0.01em;
}
.schema-faq-answer {
  font-size: 16px !important;
  line-height: 1.7 !important;
  color: var(--rf-muted) !important;
  margin: 0 !important;
}
.schema-faq-answer p { margin: 0 0 8px 0; }
.schema-faq-answer p:last-child { margin-bottom: 0; }


/* ════════════════════════════════════════════════════════════════
   STATIC PAGE (About, Contact, etc.)
   ════════════════════════════════════════════════════════════════ */
.rf-page-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 56px 32px 80px;
}
.rf-page-title,
.rf-page-wrap .wp-block-post-title {
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
  margin-bottom: 32px !important;
  color: var(--rf-text) !important;
}
.rf-page-wrap p { font-size: 16px; line-height: 1.78; color: var(--rf-text); margin-bottom: 18px; }
.rf-page-wrap h2 { font-size: 24px !important; font-weight: 800 !important; margin: 40px 0 14px !important; }
.rf-page-wrap h3 { font-size: 19px !important; font-weight: 700 !important; margin: 28px 0 10px !important; }
@media (max-width: 640px) { .rf-page-wrap { padding: 40px 20px 60px; } }


/* ════════════════════════════════════════════════════════════════
   COMMENTS — full-width section at end of page
   ════════════════════════════════════════════════════════════════ */
.rf-comments-section {
  border-top: 2px solid var(--rf-border);
  padding: 56px 0 80px;
}
.rf-comments {
  max-width: 1200px;  /* match .rf-single-wrap so comments align with content above */
  margin: 0 auto;
  padding: 0 32px;
}
.rf-comments .wp-block-comments-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 28px !important;
  color: var(--rf-text) !important;
}
.rf-comments .wp-block-comment-author-name a {
  font-weight: 700;
  font-size: 14px;
  color: var(--rf-text);
  text-decoration: none;
}
.rf-comments .wp-block-comment-date a {
  font-size: 12px;
  color: var(--rf-muted);
  text-decoration: none;
}
.rf-comments .wp-block-comment-content p {
  font-size: 15px;
  line-height: 1.65;
  color: var(--rf-text);
  margin: 8px 0;
}
.rf-comments .wp-block-comment-reply-link a {
  font-size: 12px;
  font-weight: 700;
  color: var(--rf-amber);
  text-decoration: none;
}
/* Comment form text inputs + textarea — excluded checkbox/radio so they keep native sizing */
.rf-comments .wp-block-post-comments-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.rf-comments .wp-block-post-comments-form textarea {
  border: 1.5px solid var(--rf-border) !important;
  border-radius: var(--rf-radius-sm) !important;
  padding: 10px 14px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  width: 100% !important;
}
/* "Save my info" checkbox — native size, small spacing from label */
.rf-comments .wp-block-post-comments-form input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  accent-color: var(--rf-amber);   /* checkbox tick uses brand color when supported */
}
.rf-comments .wp-block-post-comments-form .comment-form-cookies-consent label {
  font-size: 13px;
  color: var(--rf-muted);
  display: inline;
  cursor: pointer;
}
.rf-comments .wp-block-post-comments-form input[type="submit"] {
  background: var(--rf-amber) !important;
  color: white !important;
  border: none !important;
  border-radius: var(--rf-radius-pill) !important;
  padding: 10px 24px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
}
.rf-comments .wp-block-post-comments-form input[type="submit"]:hover {
  background: var(--rf-amber-hover) !important;
}


/* ════════════════════════════════════════════════════════════════
   RATING SECTION + MORE RECIPES (full-width, outside sidebar)
   ════════════════════════════════════════════════════════════════ */
.rf-rating-section {
  background: var(--rf-plum);
  border-top: none;
  border-bottom: none;
  padding: 48px 0 36px;     /* top padding gives breathing space after last post element */
  margin-top: 0;
}
/* Kill bottom margin on the last block of post content so the rating-section sits close. */
.wp-block-post-content > *:last-child { margin-bottom: 0 !important; }
/* Hide the legacy "Made this recipe? Rate it below..." block from post content.
   Plum CTA below (rf/rating-cta dynamic block) replaces its function entirely. */
.wp-block-post-content .rf-rating-cta { display: none !important; }

/* JS hover state — applied by single-post.js (works around CSS sibling-selector
   issues where the 5th star wouldn't fire :hover on some WPRM widget structures) */
.wprm-rating-star.rf-hover-fill svg path,
.wprm-rating-star.rf-hover-fill svg { fill: var(--rf-amber) !important; }

/* Social share row inside plum CTA */
.rf-share-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
.rf-share-label {
  font-size: 12.5px;
  color: rgba(255,255,255,0.55);
  margin-right: 6px;
  letter-spacing: 0.02em;
}
.rf-share-row a,
.rf-share-row button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  text-decoration: none !important;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  transition: background 0.18s, color 0.18s, transform 0.15s;
}
.rf-share-row a:hover,
.rf-share-row button:hover {
  background: var(--rf-amber) !important;
  color: white !important;
  transform: translateY(-2px);
}
.rf-share-row a svg,
.rf-share-row button svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; }

/* CTA wrap — current rating display (read-only) + button to comment form */
.rf-rating-widget-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 14px;
  gap: 14px;
}
.rf-rating-current {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: rgba(255,255,255,0.92);
  font-size: 14px;
}
.rf-rating-current .wprm-recipe-rating { display: inline-flex; align-items: center; gap: 4px; }
.rf-rating-current .wprm-rating-star svg { width: 22px !important; height: 22px !important; display: inline-block; }
.rf-rating-current .wprm-rating-star svg path,
.rf-rating-current .wprm-rating-star.wprm-rating-star-full svg path,
.rf-rating-current .wprm-rating-star.wprm-rating-star-33 svg path,
.rf-rating-current .wprm-rating-star.wprm-rating-star-50 svg path,
.rf-rating-current .wprm-rating-star.wprm-rating-star-66 svg path {
  fill: var(--rf-amber) !important;
}
/* Anchor button → comment form */
.rf-rating-jump-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  background: var(--rf-amber) !important;
  color: white !important;
  text-decoration: none !important;
  padding: 12px 28px;
  border-radius: var(--rf-radius-pill);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  transition: background 0.2s, transform 0.15s;
}
.rf-rating-jump-btn:hover {
  background: var(--rf-amber-hover) !important;
  transform: translateY(-1px);
  color: white !important;
}
.rf-rating-cta { text-align: center; }
.rf-rating-cta h3 { font-size: 20px !important; font-weight: 800 !important; margin-bottom: 6px !important; color: #ffffff !important; }
.rf-rating-cta p { font-size: 14px; color: rgba(255,255,255,0.68); margin-bottom: 20px; }
.rf-rating-stars { display: flex; justify-content: center; gap: 4px; }
.rf-rating-stars .rf-star {
  font-size: 36px;
  cursor: pointer;
  transition: transform 0.1s, color 0.1s;
  display: inline-block;
  color: var(--rf-amber);
  line-height: 1;
  user-select: none;
}
.rf-rating-stars .rf-star:hover { transform: scale(1.2); }

.rf-more-section {
  padding: 32px 0 48px;     /* tighter both top and bottom */
}
.rf-more-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 24px !important;
  color: var(--rf-text) !important;
}

/* Cards grid — wp:query wraps posts in ul.wp-block-post-template inside the query div.
   We target BOTH the query wrapper AND the inner post-template. */
.rf-cards-4 > .wp-block-post-template,
.rf-cards-4 > ul.wp-block-post-template,
.wp-block-query.rf-cards-4 > .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Same fix as rf-cards-4: wrapper must be block so the inner ul gets full width */
.rf-more-grid { display: block !important; }
.rf-more-grid > .wp-block-post-template,
.rf-more-grid > ul.wp-block-post-template,
.wp-block-query.rf-more-grid > .wp-block-post-template {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
@media (max-width: 1024px) {
  .wp-block-query.rf-cards-4 > .wp-block-post-template,
  .rf-cards-4 > .wp-block-post-template,
  .rf-more-grid > .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .wp-block-query.rf-cards-4 > .wp-block-post-template,
  .rf-cards-4 > .wp-block-post-template { grid-template-columns: 1fr !important; }
  .wp-block-query.rf-more-grid > .wp-block-post-template,
  .rf-more-grid > .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
}


/* ════════════════════════════════════════════════════════════════
   WPRM RECIPE CARD — full RF design match
   ════════════════════════════════════════════════════════════════ */

/* Outer container */
.wprm-recipe-container {
  border: 2px solid var(--rf-amber) !important;
  border-radius: var(--rf-radius) !important;
  margin: 48px 0 !important;
  box-shadow: var(--rf-shadow-md) !important;
  overflow: hidden !important;
  background: #fff !important;
}

/* Amber header bar — targets both WPRM 8.x and 9.x class variants */
.wprm-recipe-container .wprm-recipe-name-container,
.wprm-recipe-container .wprm-recipe-header,
.wprm-recipe-container .wprm-recipe-block-container:first-child {
  background: var(--rf-amber) !important;
  padding: 16px 24px !important;
}
/* Recipe name: dark text by default (visible on any background) */
.wprm-recipe-name {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--rf-text) !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
  display: block !important;
}
/* White only when confirmed inside amber header wrapper */
.wprm-recipe-container .wprm-recipe-name-container .wprm-recipe-name,
.wprm-recipe-container .wprm-recipe-header .wprm-recipe-name {
  color: white !important;
}

/* Times meta — horizontal row with borders */
.wprm-recipe-times-container {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  border: 1px solid var(--rf-border) !important;
  border-radius: var(--rf-radius-sm) !important;
  overflow: hidden !important;
  margin: 20px 24px !important;
}
.wprm-recipe-block-container-column.wprm-recipe-time-container,
.wprm-recipe-time-container {
  padding: 12px 16px !important;
  text-align: center !important;
  border-right: 1px solid var(--rf-border) !important;
}
.wprm-recipe-time-container:last-child { border-right: none !important; }
.wprm-recipe-time-container .wprm-recipe-block-text-bold {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rf-light) !important;
  margin-bottom: 4px !important;
}
.wprm-recipe-time { font-size: 16px !important; font-weight: 800 !important; color: var(--rf-text) !important; }
.wprm-recipe-time-unit { font-size: 12px !important; color: var(--rf-muted) !important; }

/* Main content area */
.wprm-recipe-block-container-columns {
  background: var(--rf-tips-bg) !important;
  padding: 0 !important;
}
/* SP-8 — tighter padding so ingredient/instruction text starts close to the card's left edge.
   Higher specificity (`.wprm-recipe-container .wprm-recipe-block-container-column`) ensures
   we beat any conflicting WPRM template rules. */
.wprm-recipe-container .wprm-recipe-block-container-column,
.wprm-recipe-container [class*="wprm-recipe-block-container-column"]:not(.wprm-recipe-time-container) {
  padding: 16px 12px !important;
}

/* Section headings (Ingredients / Instructions) */
.wprm-recipe-ingredient-group-name,
.wprm-recipe-instruction-group-name,
.wprm-recipe-block-text-bold {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--rf-muted) !important;
  display: block !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1.5px solid var(--rf-border) !important;
}

/* Ingredients — single column always (no mid-item splits on desktop) */
.wprm-recipe-ingredients {
  list-style: none !important;
  padding: 0 !important;
  column-count: 1 !important;
  columns: 1 !important;
}
.wprm-recipe-ingredient {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  padding: 7px 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  break-inside: avoid !important;
  page-break-inside: avoid !important;
}
.wprm-recipe-ingredient:last-child { border-bottom: none !important; }
.wprm-recipe-ingredient-amount { font-weight: 700 !important; min-width: 42px !important; flex-shrink: 0 !important; color: var(--rf-text) !important; }
.wprm-recipe-ingredient-unit { font-weight: 600 !important; color: var(--rf-muted) !important; margin-right: 2px !important; }
.wprm-recipe-ingredient-name { color: var(--rf-text) !important; }

/* Instructions — amber numbered circles */
.wprm-recipe-instructions { list-style: none !important; padding: 0 !important; counter-reset: wprm-step !important; }
.wprm-recipe-instruction {
  display: flex !important;
  gap: 14px !important;
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--rf-border) !important;
  counter-increment: wprm-step !important;
  font-size: 14.5px !important;
  line-height: 1.65 !important;
}
.wprm-recipe-instruction:last-child { border-bottom: none !important; }
.wprm-recipe-instruction::before {
  content: counter(wprm-step) !important;
  min-width: 28px !important;
  height: 28px !important;
  background: var(--rf-amber) !important;
  color: white !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  margin-top: 2px !important;
}
.wprm-recipe-instruction-text { color: var(--rf-text) !important; }

/* Buttons — Print (filled Amber) + Pin (Plum outline) */
.wprm-recipe-print-wide-button.wprm-color-accent,
a.wprm-recipe-print-wide-button.wprm-color-accent {
  background: var(--rf-amber) !important;
  border-color: var(--rf-amber) !important;
  color: #fff !important;
}
.wprm-recipe-pin-wide-button.wprm-color-accent,
a.wprm-recipe-pin-wide-button.wprm-color-accent {
  background: transparent !important;
  border-color: var(--rf-plum) !important;
  color: var(--rf-plum) !important;
}
.wprm-recipe-pin-wide-button.wprm-color-accent svg path,
.wprm-recipe-pin-wide-button.wprm-color-accent svg g {
  fill: var(--rf-plum) !important;
}

/* Nutrition + notes footer */
.wprm-recipe-nutrition-container,
.wprm-recipe-notes-container {
  background: var(--rf-bg) !important;
  border-top: 1px solid var(--rf-border) !important;
  padding: 14px 24px !important;
  font-size: 13px !important;
  color: var(--rf-muted) !important;
}

/* Stars rating — recipe card */
.wprm-recipe-rating .wprm-rating-star svg { fill: var(--rf-amber) !important; }

/* WPRM comment rating widget — interactive star UI in comment form */
.wprm-comment-ratings-container,
.wprm-comment-rating,
.wprm-comment-rating-stars,
.comment-form-rating,
fieldset.comment-form-rating {
  margin: 12px 0 !important;
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 4px !important;
  overflow: visible !important;
  width: auto !important;
  font-size: 13px !important;
  color: var(--rf-muted) !important;
}
.wprm-comment-rating .wprm-rating-star,
.wprm-comment-rating-stars .wprm-rating-star,
.comment-form-rating .wprm-rating-star {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 2px !important;          /* hit-area extension prevents 5th-star edge clipping */
}
.wprm-comment-rating .wprm-rating-star svg,
.wprm-comment-rating-stars .wprm-rating-star svg,
.comment-form-rating .wprm-rating-star svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
  pointer-events: none !important;  /* hover fires on parent span, not inner svg */
}
.wprm-comment-rating .wprm-rating-star svg path,
.wprm-comment-rating-stars .wprm-rating-star svg path,
.comment-form-rating .wprm-rating-star svg path {
  fill: #d1d5db !important;
  transition: fill 0.1s;
}
.wprm-comment-rating .wprm-rating-star.wprm-rating-star-full svg path,
.wprm-comment-rating-stars .wprm-rating-star.wprm-rating-star-full svg path {
  fill: var(--rf-amber) !important;
}
/* Hover on any WPRM rating widget: fill stars amber up to (and including) hovered one.
   Implementation: parent :hover fills ALL amber, then sibling reset (~) un-fills stars
   AFTER the hovered one back to grey. The pointer-events:none on inner SVG (set above)
   ensures :hover fires reliably on the parent <span class="wprm-rating-star">. */
.wprm-comment-rating:hover .wprm-rating-star svg path,
.wprm-comment-rating-stars:hover .wprm-rating-star svg path,
.comment-form-rating:hover .wprm-rating-star svg path,
.wprm-recipe-rating:hover .wprm-rating-star svg path,
[class*="wprm-recipe-user-rating"]:hover .wprm-rating-star svg path,
.wprm-recipe-rating-rich-container:hover .wprm-rating-star svg path {
  fill: var(--rf-amber) !important;
}
.wprm-comment-rating .wprm-rating-star:hover ~ .wprm-rating-star svg path,
.wprm-comment-rating-stars .wprm-rating-star:hover ~ .wprm-rating-star svg path,
.comment-form-rating .wprm-rating-star:hover ~ .wprm-rating-star svg path,
.wprm-recipe-rating .wprm-rating-star:hover ~ .wprm-rating-star svg path,
[class*="wprm-recipe-user-rating"] .wprm-rating-star:hover ~ .wprm-rating-star svg path,
.wprm-recipe-rating-rich-container .wprm-rating-star:hover ~ .wprm-rating-star svg path {
  fill: #d1d5db !important;
}


/* ════════════════════════════════════════════════════════════════
   RECIPE INDEX PAGE — category grid layout
   ════════════════════════════════════════════════════════════════ */
.rf-recipe-index {
  padding: 40px 0 80px;
}

/* New dynamic grid — [rf_category_grid] shortcode output */
.rf-cat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.rf-cat-card {
  background: white;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  padding: 18px 20px;
  box-shadow: var(--rf-shadow-xs);
}
.rf-cat-card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 800;
  color: var(--rf-text);
  text-decoration: none;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid var(--rf-amber);
}
.rf-cat-card-title:hover { color: var(--rf-amber); }
.rf-cat-card-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--rf-muted);
  background: var(--rf-bg);
  border-radius: 100px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.rf-cat-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.rf-cat-card-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--rf-border);
  font-size: 13px;
}
.rf-cat-card-list li:last-child { border-bottom: none; }
.rf-cat-card-list a {
  color: var(--rf-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.rf-cat-card-list a:hover { color: var(--rf-amber); }

@media (max-width: 1024px) { .rf-cat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .rf-cat-grid { grid-template-columns: 1fr; } }


/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.rf-footer,
footer.wp-block-template-part,
footer.wp-block-template-part > .wp-block-group {
  background-color: var(--rf-plum) !important;
}
footer.wp-block-template-part *,
.rf-footer * { color: rgba(255,255,255,0.60); }
footer.wp-block-template-part a,
footer.wp-block-template-part .wp-block-navigation a,
.rf-footer a {
  color: rgba(255,255,255,0.60) !important;
  text-decoration: none !important;
  transition: color 0.2s !important;
}
footer.wp-block-template-part a:hover,
.rf-footer a:hover { color: white !important; }
footer.wp-block-template-part h4,
footer.wp-block-template-part .rf-footer-heading,
.rf-footer-heading {
  color: rgba(255,255,255,0.38) !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.rf-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 32px 36px;
}
.rf-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 48px;
  margin-bottom: 48px;
}
.rf-footer-about { font-size: 13.5px; line-height: 1.72; color: rgba(255,255,255,0.48) !important; margin-bottom: 20px; }
.rf-footer-socials { display: flex; gap: 14px; }
.rf-footer-links { list-style: none !important; padding: 0 !important; }
.rf-footer-links li { margin-bottom: 10px; }
.rf-footer-bottom {
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.09);
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  color: rgba(255,255,255,0.30) !important;
}
.rf-footer-nl-text { font-size: 13.5px; color: rgba(255,255,255,0.48) !important; line-height: 1.65; margin-bottom: 16px; }
.rf-nl-form { display: flex; gap: 8px; }
.rf-nl-form input {
  flex: 1;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--rf-radius-pill);
  padding: 10px 18px;
  color: white;
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  outline: none;
}
.rf-nl-form input::placeholder { color: rgba(255,255,255,0.30); }
.rf-nl-form button {
  background: var(--rf-amber);
  color: white;
  border: none;
  border-radius: var(--rf-radius-pill);
  padding: 10px 18px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}
.rf-nl-form button:hover { background: var(--rf-amber-hover); }


/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .rf-cards-4 { grid-template-columns: repeat(2, 1fr); }
  .rf-archive-wrap { grid-template-columns: 1fr; }
  /* FP-7/8: about-mini padding reduced on tablet so the gap before footer isn't huge */
  .rf-about-mini { grid-template-columns: 1fr; gap: 32px; padding: 48px 32px; }
  .rf-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Tablet + mobile layout breakpoint — hamburger nav, no sidebar, simplified layouts.
   Single threshold per XC-3 / FP-4: ≤1024 = tablet/mobile, ≥1025 = desktop.
   Admin-bar height adjustment stays at 782px (separate rule near top of file). */
@media (max-width: 1024px) {
  /* Sidebar: completely hidden on mobile */
  .rf-sidebar-col,
  .rf-sidebar-col.wp-block-column { display: none !important; }

  /* Remove TT5 constrained-layout side padding on mobile — desktop stays untouched */
  main.wp-block-group.is-layout-constrained { padding-inline: 0 !important; }

  /* Single post layout */
  .rf-single-wrap { padding: 20px 24px 20px !important; }

  /* Meta bar: wrap items, pull affiliate text closer */
  .rf-post-meta-bar { flex-wrap: wrap; gap: 8px 12px; margin-bottom: 6px !important; }

  /* Font sizes: bigger across the board on mobile */
  .rf-article-col p,
  .rf-article-col li { font-size: 18px !important; line-height: 1.8 !important; }
  /* Affiliate note — higher specificity than the p rule above */
  .rf-article-col .rf-post-meta-bar + p { margin-top: 2px !important; font-size: 11.5px !important; line-height: 1.5 !important; }
  .rf-post-title.wp-block-post-title,
  .rf-article-col h1 { font-size: 30px !important; line-height: 1.15 !important; }
  .rf-article-col h2,
  .wp-block-post-content h2 { font-size: 22px !important; line-height: 1.3 !important; }
  .rf-article-col h3,
  .wp-block-post-content h3 { font-size: 19px !important; }

  /* Card images: portrait crop on mobile */
  .rf-card .wp-block-post-featured-image img { aspect-ratio: 3/4 !important; object-fit: cover !important; }

  /* Header: layout — logo | [auto space] | 🔍 | ☰ */
  /* Logo ia tot spațiul liber → search + hamburger rămân lipite la dreapta */
  .rf-header-inner { padding: 0 16px; gap: 8px; justify-content: flex-start !important; }
  .rf-header-inner .wp-block-site-logo { flex-grow: 1 !important; }
  .rf-search-wrap { display: block; }
  .rf-header-inner .wp-block-navigation { flex-grow: 0 !important; flex-shrink: 0 !important; }
  /* Show hamburger button — WP handles overlay open/close natively with overlayMenu:always.
     Don't force overlay container visible here (that was leaking items into the header). */
  .rf-header-inner .wp-block-navigation__responsive-container-open { display: flex !important; }
  /* When overlay IS open, items vertical inside it (WP default is row) */
  .rf-header-inner .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
  }
  /* Browse Recipes hidden on mobile */
  .rf-btn-browse { display: none !important; }
  .rf-header-inner .wp-block-buttons { display: none !important; }

  /* WPRM recipe card: mobile layout */
  .wprm-recipe-times-container { grid-template-columns: repeat(2, 1fr) !important; margin: 12px !important; }
  .wprm-recipe-time-container:nth-child(2n) { border-right: none !important; }
  .wprm-recipe-time-container:nth-child(n+3) { border-top: 1px solid var(--rf-border) !important; }
  /* SP-7: when there are exactly 3 time boxes, the 3rd one is alone in its row — center it */
  .wprm-recipe-times-container .wprm-recipe-time-container:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    border-right: none !important;
  }
  .wprm-recipe-block-container-columns { display: block !important; }
  /* Reduced top padding — less gap before ingredient/instruction tables */
  .wprm-recipe-block-container-column { padding: 6px 14px 14px !important; }
  .wprm-recipe-container .wprm-recipe-name-container,
  .wprm-recipe-container .wprm-recipe-header,
  .wprm-recipe-container .wprm-recipe-block-container:first-child { padding: 12px 16px !important; }
  .wprm-recipe-nutrition-container,
  .wprm-recipe-notes-container { padding: 10px 14px !important; }
  /* Ingredients: force single column, compact amount, no mid-word breaks */
  .wprm-recipe-ingredients { column-count: 1 !important; }
  .wprm-recipe-ingredient { gap: 6px !important; flex-wrap: nowrap !important; }
  .wprm-recipe-ingredient-amount { min-width: 28px !important; white-space: nowrap !important; flex-shrink: 0 !important; }
  .wprm-recipe-ingredient-unit { white-space: nowrap !important; flex-shrink: 0 !important; }
  .wprm-recipe-ingredient-name { word-break: break-word !important; }
  /* Instructions: tighter circle + less gap */
  .wprm-recipe-instruction { gap: 10px !important; }
  .wprm-recipe-instruction::before { min-width: 24px !important; height: 24px !important; font-size: 11px !important; }

  /* More recipes: 2×2 grid on mobile — match base selector specificity */
  .wp-block-query.rf-more-grid > .wp-block-post-template,
  .rf-more-grid > .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }

  /* WPRM comment stars — touch-friendly pe mobile */
  .wprm-comment-rating .wprm-rating-star svg { width: 30px !important; height: 30px !important; }
  .wprm-recipe-rating .wprm-rating-star svg { width: 26px !important; height: 26px !important; }

  /* Comments: padding lateral pe elementul intern */
  .rf-comments-section { overflow-x: hidden !important; }
  .rf-comments { max-width: 100% !important; padding: 0 20px !important; box-sizing: border-box !important; }
  .wp-block-comments,
  .comment-list,
  .comment,
  .comment-body,
  .wp-block-post-comments-form,
  .comment-respond { max-width: 100% !important; overflow-x: hidden !important; box-sizing: border-box !important; }
  .rf-comments-section * { max-width: 100% !important; box-sizing: border-box !important; }
  .comment-form input,
  .comment-form select,
  .comment-form textarea,
  .wp-block-post-comments-form input,
  .wp-block-post-comments-form textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; }
  /* Tables and pre blocks inside comments also overflow */
  .comment-body table,
  .comment-body pre,
  .comment-body img { max-width: 100% !important; overflow-x: auto; }
}

@media (max-width: 640px) {
  .rf-cards-4,
  .rf-cards-2 { grid-template-columns: 1fr; }
  /* Section accent bar — drop the +2px nudge on mobile (it ends up too low at smaller font) */
  .rf-row-header h2::before { top: 50% !important; }
  /* Category pill hidden — breadcrumb already shows the category */
  .rf-post-tags { display: none !important; }
  .rf-hero { padding: 48px 20px; }
  .rf-browse-bar { padding: 24px 20px; }
  .rf-footer-grid { grid-template-columns: 1fr; }
  .rf-more-grid .wp-block-post-template { grid-template-columns: repeat(2, 1fr) !important; }
  /* SP-M-8: tighter "More Recipes" vertical spacing on phone */
  .rf-more-section { padding: 24px 0 32px !important; }
  /* About-mini section also tighter on phone (FP-7/8 partial) */
  .rf-about-mini { padding: 36px 20px !important; gap: 28px !important; }
  /* Footer top-padding tighter on phone */
  .rf-footer-inner { padding-top: 36px !important; }
}


/* ════════════════════════════════════════════════════════════════
   STATIC PAGE — CONTACT (page slug: contact)
   ════════════════════════════════════════════════════════════════ */

/* Hero */
.rf-contact-hero {
  background: var(--rf-bg-warm);
  background-image:
    radial-gradient(ellipse 600px 280px at 30% 0%, rgba(232,115,42,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 240px at 90% 100%, rgba(27,122,110,0.05) 0%, transparent 60%);
  border-bottom: 1px solid var(--rf-border);
  padding: 64px 32px 56px;
}
.rf-contact-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.rf-contact-hero-eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rf-amber);
  margin-bottom: 16px;
  padding: 5px 14px;
  background: var(--rf-amber-light);
  border-radius: var(--rf-radius-pill);
}
.rf-contact-hero-title {
  font-size: clamp(36px, 5vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  margin: 0 auto 14px !important;
  max-width: none;
  color: var(--rf-text);
  white-space: nowrap;
}
.rf-contact-hero-title em {
  font-style: normal;
  background: var(--rf-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-contact-hero-sub {
  font-size: 17px;
  color: var(--rf-muted);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}
@media (max-width: 720px) {
  .rf-contact-hero-title { white-space: normal; font-size: clamp(32px, 8vw, 44px) !important; }
}

/* Form section wrapper (full-width band) + content grid (1200 inner) */
.rf-contact-form-section {
  background: var(--rf-bg);
  padding: 56px 0 48px;
}
.rf-contact-faq-section {
  background: white;
  border-top: 1px solid var(--rf-border);
  border-bottom: 1px solid var(--rf-border);
  padding: 56px 0 56px;
}
.rf-contact-faq-section > * {
  max-width: 1100px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 32px;
  padding-right: 32px;
}
.rf-contact-faq-section > .rf-contact-faq-header {
  max-width: 1100px;
}
.rf-contact-faq-header { text-align: left; margin-bottom: 8px !important; }
/* FAQ — 2 columns on desktop */
@media (min-width: 768px) {
  .rf-contact-faq-section > .schema-faq,
  .rf-contact-faq-section > .wp-block-yoast-faq {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 48px !important;
  }
  .rf-contact-faq-section > .schema-faq > .schema-faq-section {
    border-bottom: 1px solid var(--rf-border) !important;
  }
}
.rf-contact-faq-eyebrow {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--rf-teal);
  margin: 0 0 12px;
}
.rf-contact-faq-title {
  font-size: clamp(28px, 3.5vw, 36px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.1 !important;
  margin: 0 0 24px !important;
  color: var(--rf-text);
}

/* Form + info grid */
.rf-contact-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.rf-contact-form-card {
  background: var(--rf-card-bg);
  border-radius: var(--rf-radius);
  padding: 36px 36px 32px;
  border: 1px solid var(--rf-border);
  box-shadow: var(--rf-shadow-sm);
}
.rf-contact-form-heading {
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 6px !important;
}
.rf-contact-form-sub {
  font-size: 14px;
  color: var(--rf-muted);
  margin: 0 0 28px;
}

/* CF7 inputs — styled by selector since the form is plugin-rendered */
.rf-contact-form-card .wpcf7-form p { margin: 0 0 18px; }
.rf-contact-form-card .wpcf7-form-control-wrap { display: block; }
.rf-contact-form-card input[type="text"],
.rf-contact-form-card input[type="email"],
.rf-contact-form-card select,
.rf-contact-form-card textarea {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  color: var(--rf-text);
  background: white;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  padding: 11px 14px;
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.rf-contact-form-card input:focus,
.rf-contact-form-card select:focus,
.rf-contact-form-card textarea:focus {
  border-color: var(--rf-amber);
  box-shadow: 0 0 0 3px rgba(232,115,42,0.10);
}
.rf-contact-form-card select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%235a5a5a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
  cursor: pointer;
}
.rf-contact-form-card textarea {
  resize: vertical;
  min-height: 130px;
  line-height: 1.6;
}
.rf-contact-form-card input[type="submit"] {
  background: var(--rf-amber);
  color: white;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 32px;
  border-radius: var(--rf-radius-pill);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
  width: auto;
  letter-spacing: 0.01em;
  margin-top: 8px;
}
.rf-contact-form-card input[type="submit"]:hover {
  background: var(--rf-amber-hover);
  transform: translateY(-1px);
}
.rf-contact-form-card .wpcf7-not-valid-tip {
  color: #c0392b;
  font-size: 12.5px;
  margin-top: 4px;
}
.rf-contact-form-card .wpcf7 form .wpcf7-response-output {
  border-radius: var(--rf-radius-sm);
  margin: 18px 0 0;
  padding: 12px 16px;
  font-size: 13.5px;
}

/* Info sidebar */
.rf-contact-info-stack { display: flex; flex-direction: column; gap: 18px; }
.rf-contact-info-card {
  background: var(--rf-tips-bg);
  border: 1.5px solid rgba(232,115,42,0.20);
  border-radius: var(--rf-radius);
  padding: 26px 24px;
}
.rf-contact-info-eyebrow {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--rf-amber);
  margin: 0 0 14px;
  display: flex; align-items: center; gap: 7px;
}
.rf-contact-info-eyebrow::before {
  content: ""; width: 14px; height: 1.5px;
  background: var(--rf-amber); border-radius: 2px;
}
.rf-contact-info-email {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: white;
  border-radius: var(--rf-radius-sm);
  text-decoration: none;
  color: var(--rf-text);
  font-size: 15px; font-weight: 600;
  border: 1px solid rgba(232,115,42,0.12);
  transition: border-color 0.2s;
  margin-bottom: 16px;
}
.rf-contact-info-email:hover { border-color: var(--rf-amber); }
.rf-contact-info-email-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: var(--rf-amber-light);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rf-contact-info-email-icon svg { width: 18px; height: 18px; color: var(--rf-amber); }
.rf-contact-info-email-text { display: flex; flex-direction: column; gap: 1px; }
.rf-contact-info-email-text small {
  font-size: 11px; color: var(--rf-muted);
  font-weight: 500; letter-spacing: 0.04em;
}
.rf-contact-info-stat {
  display: flex; align-items: center; gap: 11px;
  font-size: 13.5px;
  color: var(--rf-muted);
  padding: 10px 4px;
}
.rf-contact-info-stat-icon {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: white;
  border: 1.5px solid rgba(232,115,42,0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--rf-amber);
}
.rf-contact-info-stat-icon svg { width: 12px; height: 12px; }
.rf-contact-info-stat strong { color: var(--rf-text); font-weight: 700; margin-right: 2px; }
.rf-contact-info-note {
  background: white;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--rf-muted);
  line-height: 1.55;
  display: flex; gap: 10px;
}
.rf-contact-info-note-icon {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--rf-teal);
  margin-top: 2px;
}
.rf-contact-info-note strong { color: var(--rf-text); }
/* Form promise text (under CF7 submit) */
.rf-contact-form-promise {
  font-size: 12px;
  color: var(--rf-light);
  margin: 14px 0 0;
  text-align: center;
  line-height: 1.5;
}
/* Sidebar info card — divider + socials grid */
.rf-contact-info-divider {
  height: 1px;
  background: rgba(232,115,42,0.18);
  margin: 14px 0;
}
.rf-contact-info-socials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}
.rf-contact-info-socials a {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius-sm);
  text-decoration: none;
  color: var(--rf-text);
  font-size: 13px; font-weight: 600;
  transition: border-color 0.2s, color 0.2s;
}
.rf-contact-info-socials a:hover { border-color: var(--rf-amber); color: var(--rf-amber); }
.rf-contact-info-socials a svg { width: 14px; height: 14px; color: var(--rf-muted); transition: color 0.2s; }
.rf-contact-info-socials a:hover svg { color: var(--rf-amber); }

/* Recently Updated full-width band (used in page-contact template) */
.rf-ymliked-band {
  background: white;
  border-top: 1px solid var(--rf-border);
}
.rf-ymliked-header {
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.rf-ymliked-title {
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em;
  line-height: 1.1;
  position: relative;
  padding-left: 16px;
  margin: 0 !important;
  color: var(--rf-text);
}
.rf-ymliked-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 0.95em;
  border-radius: 2px;
  background: var(--rf-gradient);
}
.rf-ymliked-sub {
  max-width: 1200px;
  margin: 0 auto 22px;
  padding: 0 32px 0 50px;
  font-size: 13px;
  color: var(--rf-muted);
}
.rf-ymliked-band > .wp-block-query.rf-cards-4 {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Contact responsive */
@media (max-width: 1024px) {
  .rf-contact-wrap { grid-template-columns: 1fr; gap: 36px; padding: 0 24px; }
  .rf-contact-form-section { padding: 40px 0; }
  .rf-contact-faq-section { padding: 40px 0; }
}
@media (max-width: 640px) {
  .rf-contact-hero { padding: 48px 20px 40px; }
  .rf-contact-form-card { padding: 24px 20px; }
  .rf-ymliked-header,
  .rf-ymliked-sub,
  .rf-ymliked-band > .wp-block-query.rf-cards-4 {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .rf-ymliked-sub { padding-left: 38px !important; }
}

/* "View all X →" link inside category cards on Recipe Index */
.rf-cat-card-more-li { border-bottom: none !important; padding-top: 8px !important; }
.rf-cat-card-more {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--rf-amber) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ════════════════════════════════════════════════════════════════
   NEWSLETTER PAGE (page slug: newsletter)
   ════════════════════════════════════════════════════════════════ */
.rf-newsletter-hero {
  background: var(--rf-bg-warm);
  background-image:
    radial-gradient(ellipse 600px 280px at 30% 0%, rgba(232,115,42,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 500px 240px at 90% 100%, rgba(27,122,110,0.05) 0%, transparent 60%);
  border-bottom: 1px solid var(--rf-border);
  padding: 64px 32px 56px;
}
.rf-newsletter-hero-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 16px;
}
.rf-newsletter-hero-eyebrow {
  display: inline-block;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--rf-teal);
  margin-bottom: 16px;
  padding: 5px 14px;
  background: var(--rf-teal-light);
  border-radius: var(--rf-radius-pill);
}
.rf-newsletter-hero-title {
  font-size: clamp(36px, 5vw, 52px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.06 !important;
  margin: 0 auto 14px !important;
  color: var(--rf-text);
}
.rf-newsletter-hero-title em {
  font-style: normal;
  background: var(--rf-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rf-newsletter-hero-sub {
  font-size: 17px;
  color: var(--rf-muted);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}

/* Form + benefits sections wrap */
.rf-newsletter-form-section {
  background: var(--rf-bg);
  padding: 56px 32px;
}
.rf-newsletter-form-inner {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: white;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  padding: 36px 32px;
  box-shadow: var(--rf-shadow-sm);
}
.rf-newsletter-form-intro {
  font-size: 14px;
  color: var(--rf-muted);
  margin: 0 0 22px;
}
/* MC4WP form styling — adapt the plugin's default markup to RecipeFlow look */
.rf-newsletter-form-inner .mc4wp-form-fields,
.rf-newsletter-form-inner form { display: flex; flex-direction: column; gap: 12px; }
.rf-newsletter-form-inner input[type="email"] {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  padding: 12px 16px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-radius-pill);
  outline: none;
  transition: border-color 0.18s, box-shadow 0.18s;
  width: 100%;
}
.rf-newsletter-form-inner input[type="email"]:focus {
  border-color: var(--rf-amber);
  box-shadow: 0 0 0 3px rgba(232,115,42,0.10);
}
.rf-newsletter-form-inner input[type="submit"],
.rf-newsletter-form-inner button[type="submit"] {
  background: var(--rf-amber);
  color: white;
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  padding: 13px 24px;
  border-radius: var(--rf-radius-pill);
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.rf-newsletter-form-inner input[type="submit"]:hover,
.rf-newsletter-form-inner button[type="submit"]:hover {
  background: var(--rf-amber-hover);
  transform: translateY(-1px);
}

.rf-newsletter-benefits-section {
  background: white;
  border-top: 1px solid var(--rf-border);
  padding: 64px 32px;
}
.rf-newsletter-benefits-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.rf-newsletter-benefit {
  text-align: center;
  padding: 24px 16px;
}
.rf-newsletter-benefit-icon {
  font-size: 36px;
  display: block;
  margin-bottom: 12px;
}
.rf-newsletter-benefit h3 {
  font-size: 17px !important;
  font-weight: 800 !important;
  margin: 0 0 8px !important;
  color: var(--rf-text);
  letter-spacing: -0.01em;
}
.rf-newsletter-benefit p {
  font-size: 14.5px;
  color: var(--rf-muted);
  line-height: 1.6;
  margin: 0;
}
@media (max-width: 768px) {
  .rf-newsletter-benefits-inner { grid-template-columns: 1fr; gap: 16px; }
  .rf-newsletter-form-section { padding: 40px 20px; }
  .rf-newsletter-benefits-section { padding: 40px 20px; }
}


/* ════════════════════════════════════════════════════════════════
   TOC (Easy Table of Contents plugin)
   ════════════════════════════════════════════════════════════════ */
#ez-toc-container,
div.ez-toc-v2_0_71,
div[class*="ez-toc-v"] {
  background: var(--rf-tips-bg) !important;
  border: 1px solid rgba(232,115,42,0.20) !important;
  border-left: 4px solid var(--rf-amber) !important;
  border-radius: var(--rf-radius) !important;
  padding: 18px 22px !important;
  margin: 32px 0 !important;
  font-family: 'Inter', sans-serif !important;
  width: 100% !important;
  max-width: 100% !important;
  box-shadow: 0 2px 12px rgba(232,115,42,0.06) !important;
}
#ez-toc-container .ez-toc-title-container {
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid rgba(232,115,42,0.15) !important;
}
#ez-toc-container .ez-toc-title,
.ez-toc-title {
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.1em !important;
  color: var(--rf-amber) !important;
  margin: 0 !important;
  padding: 0 !important;
}
#ez-toc-container .ez-toc-title-toggle a,
#ez-toc-container .ez-toc-icon-toggle { color: var(--rf-muted) !important; }
#ez-toc-container ul.ez-toc-list,
#ez-toc-container nav ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin: 0 !important;
}
#ez-toc-container ul.ez-toc-list ul,
#ez-toc-container nav ul ul {
  list-style: none !important;
  padding-left: 18px !important;
  margin: 6px 0 !important;
}
#ez-toc-container li { padding: 4px 0 !important; font-size: 14.5px !important; line-height: 1.5 !important; }
#ez-toc-container a,
#ez-toc-container a.ez-toc-link {
  color: var(--rf-text) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.18s !important;
}
#ez-toc-container a:hover,
#ez-toc-container a.ez-toc-link:hover {
  color: var(--rf-amber) !important;
}


/* ════════════════════════════════════════════════════════════════
   RECIPE INDEX — curated content (page 48429)
   Targets the manual <ul class="recipe-index main-list"> structure.
   Note: images hidden (planned redesign — categories will be redone).
   ════════════════════════════════════════════════════════════════ */
.recipe-index.main-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 32px 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 18px !important;
}
.recipe-index.main-list > div {
  background: white;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-radius);
  padding: 16px 18px 14px;
  box-shadow: var(--rf-shadow-xs);
  display: flex;
  flex-direction: column;
  transition: border-color 0.18s, box-shadow 0.18s;
}
.recipe-index.main-list > div:hover {
  border-color: var(--rf-amber);
  box-shadow: var(--rf-shadow-sm);
}
.recipe-index.main-list li.main {
  list-style: none;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  color: var(--rf-text) !important;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 2px solid var(--rf-amber);
  text-transform: capitalize;
  letter-spacing: -0.01em;
}
.recipe-index.main-list .dropdown-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.recipe-index.main-list .dropdown-list li {
  padding: 3px 0 !important;
  border-bottom: none !important;
  font-size: 13px !important;
  list-style: none !important;
  margin: 0 !important;
}
.recipe-index.main-list .dropdown-list a {
  color: var(--rf-muted) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  font-weight: 500 !important;
}
.recipe-index.main-list .dropdown-list a:hover { color: var(--rf-amber) !important; }
/* Hide images — categories will be redone, no point styling broken images now */
.recipe-index.main-list img { display: none !important; }
@media (max-width: 1024px) {
  .recipe-index.main-list { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 640px) {
  .recipe-index.main-list { grid-template-columns: 1fr !important; }
}