/*!
 * Theme Name:  Matt's Fit Chef
 * Theme URI:   https://mattsfitchef.com
 * Description: Matt's Fit Chef — real food recipes and nutrition guides.
 *              Sage & Pastel brand system: soft sage #1C2B1E/#6B9E78, sage CTA #7AAF87,
 *              pop peach #F4A261. Built with Claude Code.
 * Version:     1.2.0
 * Author:      Matteo
 * Author URI:  https://mattsfitchef.com
 * Text Domain: mattsfitchef
 * Requires at least: 6.4
 * Tested up to:      6.7
 * Requires PHP:      8.2
 * License:     Proprietary
 *
 * --- FONT NOTE ---
 * DM Sans is loaded via Google Fonts. Add this to inc/setup.php:
 *   wp_enqueue_style(
 *     'mattsfitchef-fonts',
 *     'https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700;9..40,800&display=swap',
 *     [], null
 *   );
 */


/* =============================================================================
   DESIGN TOKENS — Sage & Pastel Brand System v4.0
   Single source of truth. Never hardcode hex values outside this block.
   ============================================================================= */

:root {

  /* --- Primary: Sage Dark --- */
  --mfc-deep:             #1C2B1E;   /* Hero backgrounds, nav, footer, near-black text */
  --mfc-deep-mid:         #2A3D2C;   /* Hover states on dark surfaces                 */
  --mfc-forest:           #6B9E78;   /* Links, secondary actions, badges               */
  --mfc-forest-muted:     #8BB898;   /* Secondary text on dark, subtle labels          */
  --mfc-forest-surface:   #E8F0E9;   /* Tinted backgrounds, tag fills                  */

  /* --- Accent: Pastel Sage CTA --- */
  --mfc-electric:         #7AAF87;   /* Primary CTA, active indicators, star ratings   */
  --mfc-electric-dark:    #5A9068;   /* Hover on electric elements                     */
  --mfc-electric-surface: #E4F0E7;   /* Callout backgrounds, highlight zones           */

  /* --- Pop: Peach --- */
  --mfc-pop:              #F4A261;   /* Category labels, secondary CTAs, energy accents */
  --mfc-pop-dark:         #D4803E;   /* Hover on pop elements                           */
  --mfc-pop-surface:      #FFF4EC;   /* Peach-tinted surface areas                      */

  /* --- Macro data-viz (hero ring, macro bars, nutrition tab) --- */
  --mfc-macro-protein:    #7AAF87;   /* = electric — protein segments & bars            */
  --mfc-macro-carbs:      #F4A261;   /* = pop — carb segments & bars                    */
  --mfc-macro-fat:        #E9C46A;   /* honey — third hue, distinct from sage/peach     */
  --mfc-macro-track:      #E3DED6;   /* ring/bar track on cream backgrounds             */

  /* --- Backgrounds --- */
  --mfc-bg:               #FAF8F5;   /* Default page background                         */
  --mfc-bg-secondary:     #F2EDE6;   /* Section alternates, input backgrounds           */
  --mfc-bg-tertiary:      #EDE9E3;   /* Cards, subtle differentiators                   */
  --mfc-bg-stone:         #EDE9E3;   /* Alias for bg-tertiary — category icon fills     */
  --mfc-bg-footer:        #E8F0E9;   /* Footer background — soft sage tint              */
  --mfc-bg-dark:          #1C2B1E;   /* Dark sections (newsletter strip)                */
  --mfc-bg-dark-raised:   #2A3D2C;   /* Raised surfaces on dark bg                     */

  /* --- Text --- */
  --mfc-text:             #1C2B1E;   /* Body copy, default text                         */
  --mfc-text-secondary:   #4A6B52;   /* Subtitles, supporting copy                      */
  --mfc-text-tertiary:    #6B9E78;   /* Timestamps, captions, metadata                  */
  --mfc-text-muted:       #8BB898;   /* Placeholders, disabled states                   */
  --mfc-text-inverse:     #F0F5F1;   /* Text on dark backgrounds                        */

  /* --- Borders --- */
  --mfc-border:           #D5E8D8;   /* Default: cards, inputs, dividers                */
  --mfc-border-strong:    #B5D4BC;   /* Emphasis: hover states, active inputs           */
  --mfc-border-dark:      #2A3D2C;   /* Borders on dark backgrounds                     */

  /* --- Social network brand colors (exempt from the brand palette) --- */
  --mfc-social-pinterest: #E60023;
  --mfc-social-facebook:  #1877F2;
  --mfc-social-x:         #000000;

  /* --- Difficulty badge status colors (recipe-badges.css) --- */
  --mfc-diff-easy-bg:     #E6F4EA;
  --mfc-diff-easy-text:   #2D6A4F;
  --mfc-diff-easy-border: #B7DEC5;
  --mfc-diff-med-bg:      #FFF3E0;
  --mfc-diff-med-text:    #B45309;
  --mfc-diff-med-border:  #FDDCAA;
  --mfc-diff-hard-bg:     #FEE2E2;
  --mfc-diff-hard-text:   #B91C1C;
  --mfc-diff-hard-border: #FECACA;

  /* --- Typography --- */
  --mfc-font:             'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mfc-font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  /* --- Type Scale --- */
  --mfc-text-xs:          0.75rem;               /* 12px — badges, labels, captions     */
  --mfc-text-sm:          0.875rem;              /* 14px — meta, nav, small buttons     */
  --mfc-text-base:        1.0625rem;             /* 17px — body copy                    */
  --mfc-text-lg:          1.125rem;              /* 18px — lead paragraphs, card titles */
  --mfc-text-xl:          1.25rem;               /* 20px — h5, subheadings              */
  --mfc-text-2xl:         1.5rem;                /* 24px — h4                           */
  --mfc-text-3xl:         2rem;                  /* 32px — h3                           */
  --mfc-text-4xl:         2.5rem;                /* 40px — h2                           */
  --mfc-text-5xl:         3.25rem;               /* 52px — h1                           */
  --mfc-text-display:     clamp(3rem, 6vw, 4.5rem); /* Hero headlines, fluid           */

  /* --- Spacing (4px base unit) --- */
  --mfc-space-1:          0.25rem;   /*  4px */
  --mfc-space-2:          0.5rem;    /*  8px */
  --mfc-space-3:          0.75rem;   /* 12px */
  --mfc-space-4:          1rem;      /* 16px */
  --mfc-space-5:          1.25rem;   /* 20px */
  --mfc-space-6:          1.5rem;    /* 24px */
  --mfc-space-8:          2rem;      /* 32px */
  --mfc-space-10:         2.5rem;    /* 40px */
  --mfc-space-12:         3rem;      /* 48px */
  --mfc-space-16:         4rem;      /* 64px */
  --mfc-space-20:         5rem;      /* 80px */
  --mfc-space-24:         6rem;      /* 96px */
  --mfc-space-32:         8rem;      /* 128px */

  /* --- Border Radius --- */
  --mfc-radius-sm:        4px;
  --mfc-radius-md:        8px;
  --mfc-radius-lg:        12px;
  --mfc-radius-xl:        20px;
  --mfc-radius-full:      9999px;

  /* --- Layout --- */
  --mfc-content-width:    720px;
  --mfc-wide-width:       1200px;
  --mfc-padding-x:        clamp(1.25rem, 4vw, 2.5rem);

  /* Height reserved for Raptive's mobile bottom anchor (adhesion) ad.
     Used by body padding AND every bottom-fixed UI element (nav drawer
     footer, filter bottom sheet) — the anchor renders at a near-maximum
     z-index, so fixed elements must keep controls above it themselves. */
  --mfc-raptive-anchor:   90px;

  /* --- Transitions --- */
  --mfc-transition:       150ms ease;
  --mfc-transition-slow:  300ms ease;
}


/* =============================================================================
   RESET
   ============================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--mfc-font);
  font-size: var(--mfc-text-base);
  font-weight: 400;
  line-height: 1.7;
  color: var(--mfc-text);
  background-color: var(--mfc-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, h5, h6,
p, figure, blockquote {
  margin: 0;
}

input, button, textarea, select {
  font: inherit;
}


/* =============================================================================
   TYPOGRAPHY
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mfc-font);
  font-weight: 700;
  line-height: 1.1;
  color: var(--mfc-text);
  letter-spacing: -0.02em;
}

h1 { font-size: var(--mfc-text-5xl);   font-weight: 800; letter-spacing: -0.03em;  }
h2 { font-size: var(--mfc-text-4xl);   font-weight: 800;  letter-spacing: -0.03em;  }
h3 { font-size: var(--mfc-text-3xl);                     letter-spacing: -0.02em;  }
h4 { font-size: var(--mfc-text-2xl);                     letter-spacing: -0.015em; }
h5 { font-size: var(--mfc-text-xl);                      letter-spacing: -0.005em; }
h6 { font-size: var(--mfc-text-lg);                                                 }

.display-text {
  font-size: var(--mfc-text-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
}

p {
  margin-bottom: var(--mfc-space-4);
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--mfc-forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--mfc-transition);
}

a:hover  { color: var(--mfc-pop); }

a:focus-visible {
  outline: 2px solid var(--mfc-electric);
  outline-offset: 3px;
  border-radius: 2px;
  text-decoration: none;
}

strong, b { font-weight: 700; }
small      { font-size: var(--mfc-text-sm); }


/* --- Eyebrow / label text --- */
.eyebrow {
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mfc-forest-muted);
  display: block;
}

.eyebrow--electric { color: var(--mfc-electric); }
.eyebrow--pop      { color: var(--mfc-pop); }
.eyebrow--inverse  { color: rgba(245, 249, 246, 0.65); }


/* --- Prose (long-form article content) --- */
.prose > * + * { margin-top: var(--mfc-space-5); }

.prose h2,
.prose h3,
.prose h4 {
  margin-top: var(--mfc-space-10);
  margin-bottom: var(--mfc-space-3);
}

.prose ul,
.prose ol {
  padding-left: var(--mfc-space-6);
  list-style: revert;
  margin-bottom: var(--mfc-space-4);
}

.prose li { margin-bottom: var(--mfc-space-2); }

.prose blockquote {
  border-left: 3px solid var(--mfc-electric);
  padding-left: var(--mfc-space-5);
  color: var(--mfc-text-secondary);
  font-size: var(--mfc-text-lg);
  font-style: italic;
}

.prose code {
  font-family: var(--mfc-font-mono);
  font-size: 0.875em;
  background: var(--mfc-bg-tertiary);
  padding: 0.15em 0.4em;
  border-radius: var(--mfc-radius-sm);
  color: var(--mfc-deep);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--mfc-text-sm);
}

.prose th {
  background: var(--mfc-deep);
  color: var(--mfc-electric);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--mfc-text-xs);
  padding: var(--mfc-space-3) var(--mfc-space-4);
  text-align: left;
}

.prose td {
  padding: var(--mfc-space-3) var(--mfc-space-4);
  border-bottom: 0.5px solid var(--mfc-border);
  color: var(--mfc-text);
}

.prose tr:last-child td { border-bottom: none; }
.prose tr:nth-child(even) td { background: var(--mfc-bg-secondary); }


/* =============================================================================
   LAYOUT
   ============================================================================= */

.container {
  width: 100%;
  max-width: var(--mfc-wide-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mfc-padding-x);
  padding-right: var(--mfc-padding-x);
}

.container--content {
  width: 100%;
  max-width: calc(var(--mfc-content-width) + var(--mfc-padding-x) * 2);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--mfc-padding-x);
  padding-right: var(--mfc-padding-x);
}

.section {
  padding-top: var(--mfc-space-20);
  padding-bottom: var(--mfc-space-20);
}

.section--sm {
  padding-top: var(--mfc-space-12);
  padding-bottom: var(--mfc-space-12);
}

.section--pt-sm {
  padding-top: var(--mfc-space-8);
}

.section--dark {
  background-color: var(--mfc-bg-dark);
  color: var(--mfc-text-inverse);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--mfc-text-inverse);
}

.section--tinted {
  background-color: var(--mfc-bg-secondary);
}

/* --- Grid --- */
.grid {
  display: grid;
  gap: var(--mfc-space-10);
}

.grid--2        { grid-template-columns: repeat(2, 1fr); }
.grid--3        { grid-template-columns: repeat(3, 1fr); }
.grid--4        { grid-template-columns: repeat(4, 1fr); }
.grid--auto-2   { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.grid--auto-3   { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.grid--auto-4   { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

/* --- Flex helpers --- */
.flex          { display: flex; }
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap     { flex-wrap: wrap; }
.gap-2         { gap: var(--mfc-space-2); }
.gap-3         { gap: var(--mfc-space-3); }
.gap-4         { gap: var(--mfc-space-4); }
.gap-6         { gap: var(--mfc-space-6); }


/* =============================================================================
   HEADER
   ============================================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--mfc-bg);
  border-bottom: 0.5px solid var(--mfc-border);
  transition: box-shadow var(--mfc-transition-slow);
}

.site-header.is-scrolled {
  box-shadow: 0 2px 20px rgba(13, 43, 31, 0.08);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mfc-space-6);
  height: 64px;
}

.site-logo {
  font-size: var(--mfc-text-xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--mfc-deep);
  text-decoration: none;
  flex-shrink: 0;
}

.site-logo:hover { color: var(--mfc-deep); }

.site-logo__accent {
  color: var(--mfc-electric);
  background: var(--mfc-deep);
  padding: 1px 6px;
  border-radius: var(--mfc-radius-sm);
  margin-left: 2px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--mfc-space-1);
}

.site-nav a {
  font-size: var(--mfc-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mfc-text-secondary);
  text-decoration: none;
  padding: var(--mfc-space-2) var(--mfc-space-3);
  border-radius: var(--mfc-radius-md);
  transition: color var(--mfc-transition), background-color var(--mfc-transition);
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
  color: var(--mfc-deep);
  background: var(--mfc-bg-secondary);
}

.site-nav__cta {
  margin-left: var(--mfc-space-2);
}

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--mfc-space-2);
  color: var(--mfc-deep);
}

.nav-toggle__line {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--mfc-transition), opacity var(--mfc-transition);
}

.nav-toggle__line + .nav-toggle__line { margin-top: 5px; }


/* =============================================================================
   HERO
   ============================================================================= */

.hero {
  background: var(--mfc-bg-secondary);
  padding: var(--mfc-space-12) 0 var(--mfc-space-10);
  overflow: hidden;
}

.hero__eyebrow {
  margin-bottom: var(--mfc-space-4);
}

.hero__title {
  font-size: var(--mfc-text-display);
  font-weight: 800;
  line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--mfc-text);
  margin-bottom: var(--mfc-space-5);
}

.hero__title em {
  font-style: normal;
  color: var(--mfc-forest);
}

.hero__subtitle {
  font-size: var(--mfc-text-lg);
  color: var(--mfc-text-secondary);
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: var(--mfc-space-8);
}

.hero__actions {
  display: flex;
  gap: var(--mfc-space-4);
  flex-wrap: wrap;
}


/* =============================================================================
   BUTTONS
   ============================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mfc-space-2);
  font-family: var(--mfc-font);
  font-size: var(--mfc-text-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  padding: 14px 24px;
  border-radius: var(--mfc-radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    background-color var(--mfc-transition),
    color var(--mfc-transition),
    border-color var(--mfc-transition),
    transform var(--mfc-transition);
  white-space: nowrap;
}

.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn:focus-visible {
  outline: 2px solid var(--mfc-electric);
  outline-offset: 3px;
}

/* Primary — Pastel Sage (main CTA) */
.btn--primary {
  background-color: var(--mfc-electric);
  color: var(--mfc-deep);
  border-color: var(--mfc-electric);
}
.btn--primary:hover {
  background-color: var(--mfc-electric-dark);
  border-color: var(--mfc-electric-dark);
  color: var(--mfc-deep);
}

/* Secondary — Deep Forest */
.btn--secondary {
  background-color: var(--mfc-deep);
  color: var(--mfc-text-inverse);
  border-color: var(--mfc-deep);
}
.btn--secondary:hover {
  background-color: var(--mfc-deep-mid);
  border-color: var(--mfc-deep-mid);
  color: var(--mfc-electric);
}

/* Outline (light backgrounds) */
.btn--outline {
  background-color: transparent;
  color: var(--mfc-deep);
  border-color: var(--mfc-deep);
}
.btn--outline:hover {
  background-color: var(--mfc-deep);
  color: var(--mfc-electric);
}

/* Outline inverse (dark backgrounds) */
.btn--outline-inverse {
  background-color: transparent;
  color: var(--mfc-text-inverse);
  border-color: rgba(245, 249, 246, 0.35);
}
.btn--outline-inverse:hover {
  background-color: rgba(245, 249, 246, 0.1);
  border-color: var(--mfc-text-inverse);
}

/* Pop Orange (secondary energy) — deep text: white fails contrast on peach */
.btn--pop {
  background-color: var(--mfc-pop);
  color: var(--mfc-deep);
  border-color: var(--mfc-pop);
}
.btn--pop:hover {
  background-color: var(--mfc-pop-dark);
  border-color: var(--mfc-pop-dark);
  color: var(--mfc-deep);
}

/* Sizes */
.btn--sm  { font-size: var(--mfc-text-xs); padding: 9px 16px;  border-radius: var(--mfc-radius-sm); }
.btn--lg  { font-size: var(--mfc-text-lg); padding: 17px 32px; border-radius: var(--mfc-radius-lg); }
.btn--xl  { font-size: var(--mfc-text-xl); padding: 20px 40px; border-radius: var(--mfc-radius-lg); }


/* =============================================================================
   BADGES & TAGS
   ============================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--mfc-space-1);
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: var(--mfc-radius-sm);
  line-height: 1;
  text-decoration: none;
}

.badge--forest   { background: var(--mfc-forest-surface); color: var(--mfc-forest); }
.badge--electric { background: var(--mfc-electric-surface); color: var(--mfc-deep); }
.badge--pop      { background: var(--mfc-pop-surface); color: var(--mfc-pop-dark); }
.badge--dark     { background: var(--mfc-deep); color: var(--mfc-electric); }
.badge--neutral  { background: var(--mfc-bg-tertiary); color: var(--mfc-text-secondary); border: 0.5px solid var(--mfc-border); }


/* =============================================================================
   RECIPE CARD
   ============================================================================= */

.recipe-card {
  background: var(--mfc-bg);
  border-radius: var(--mfc-radius-xl);
  border: 1px solid var(--mfc-border);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 2px 12px rgba(28, 43, 30, 0.08);
  transition:
    transform var(--mfc-transition-slow),
    box-shadow var(--mfc-transition-slow),
    border-color var(--mfc-transition);
}

.recipe-card:hover {
  transform: translateY(-4px);
  border-color: var(--mfc-border-strong);
  box-shadow: 0 8px 32px rgba(28, 43, 30, 0.16);
  color: inherit;
}

.recipe-card__image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--mfc-bg-tertiary);
  flex-shrink: 0;
}

.recipe-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mfc-transition-slow);
}

.recipe-card:hover .recipe-card__image img {
  transform: scale(1.04);
}

/* Gradient scrim — makes category overlay and time badge legible over any photo */
.recipe-card__image::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 55%;
  background: linear-gradient(to top, rgba(12, 22, 13, 0.62) 0%, transparent 100%);
  pointer-events: none;
}

.recipe-card__time {
  position: absolute;
  bottom: var(--mfc-space-3);
  right: var(--mfc-space-3);
  z-index: 1;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--mfc-radius-sm);
  padding: var(--mfc-space-1) var(--mfc-space-2);
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  color: var(--mfc-deep);
  letter-spacing: 0.02em;
}

/* Category overlay pill on the image (bottom-left, above scrim) */
.recipe-card__cat-overlay {
  position: absolute;
  bottom: var(--mfc-space-2);
  left: var(--mfc-space-2);
  z-index: 1;
  padding: 3px 10px;
  border-radius: var(--mfc-radius-full);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.5;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.recipe-card__body {
  padding: var(--mfc-space-2) var(--mfc-space-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0;
  justify-content: center;
}

.recipe-card__category {
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mfc-pop);
}

.recipe-card__title {
  font-size: var(--mfc-text-sm);
  font-weight: 600;
  line-height: 1.3;
  color: var(--mfc-text);
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Thin-strip card: title only, no badge clutter */
.recipe-card .recipe-card__badges {
  display: none;
}

/* Featured / large card variant */
.recipe-card--featured {
  grid-column: span 2;
}

.recipe-card--featured .recipe-card__title {
  font-size: var(--mfc-text-2xl);
}


/* =============================================================================
   POST CARD (articles, nutrition guides)
   ============================================================================= */

.post-card {
  display: flex;
  gap: var(--mfc-space-4);
  text-decoration: none;
  color: inherit;
  padding: var(--mfc-space-5) 0;
  border-bottom: 0.5px solid var(--mfc-border);
  transition: opacity var(--mfc-transition);
}

.post-card:hover { opacity: 0.72; color: inherit; }

.post-card__image {
  width: 100px;
  aspect-ratio: 1;
  border-radius: var(--mfc-radius-md);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--mfc-bg-tertiary);
}

.post-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.post-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-1);
  justify-content: center;
}

.post-card__category {
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mfc-forest);
}

.post-card__title {
  font-size: var(--mfc-text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--mfc-text);
}

.post-card__meta {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-tertiary);
}


/* =============================================================================
   FORMS & INPUTS
   ============================================================================= */

.input {
  width: 100%;
  font-family: var(--mfc-font);
  font-size: var(--mfc-text-base);
  font-weight: 400;
  color: var(--mfc-text);
  background: var(--mfc-bg);
  border: 1px solid var(--mfc-border-strong);
  border-radius: var(--mfc-radius-md);
  padding: 12px 16px;
  line-height: 1.4;
  transition: border-color var(--mfc-transition), box-shadow var(--mfc-transition);
  appearance: none;
  -webkit-appearance: none;
}

.input:hover  { border-color: var(--mfc-forest-muted); }

.input:focus {
  outline: none;
  border-color: var(--mfc-electric);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mfc-electric) 25%, transparent);
}

.input::placeholder { color: var(--mfc-text-muted); }

/* Newsletter inline form */
.form-inline {
  display: flex;
  gap: var(--mfc-space-3);
}

.form-inline .input {
  flex: 1;
  min-width: 0;
}


/* =============================================================================
   AD SLOTS (Raptive)
   Reserves layout space ahead of Raptive's wrapper script to avoid CLS.
   ============================================================================= */

.ad-container {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Leaderboard slots — header / footer.
   Desktop 728×90; mobile units are typically 320×100, so reserve 100px there. */
.ad-container--header,
.ad-container--footer {
  min-height: 90px;
  margin: var(--mfc-space-6) 0;
}

@media (max-width: 768px) {
  .ad-container--header,
  .ad-container--footer {
    min-height: 100px;
  }
}

/* Rectangle slot — in-content.
   Desktop in-content commonly fills 336×280; mobile 300×250. */
.ad-container--content {
  min-height: 280px;
  margin: var(--mfc-space-8) 0;
}

@media (max-width: 768px) {
  .ad-container--content {
    min-height: 250px;
  }
}

/* NOTE: the 'sidebar' slot in inc/ads.php has no layout styles — no template
   renders a sidebar. If one is added, restore a pre-sized sticky container
   here (min-height 250px+; sticky top must include header + admin-bar offsets). */

/* Leave room for Raptive's mobile bottom anchor ad (~90px) so it
   doesn't cover the footer or newsletter strip CTA. */
@media (max-width: 768px) {
  body {
    padding-bottom: var(--mfc-raptive-anchor);
  }
}


/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer {
  background: var(--mfc-bg-footer);
  color: var(--mfc-text);
  padding: var(--mfc-space-16) 0 var(--mfc-space-8);
}

.site-footer a {
  color: var(--mfc-text-secondary);
  text-decoration: none;
  transition: color var(--mfc-transition);
}

.site-footer a:hover { color: var(--mfc-forest); }

.site-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--mfc-space-12);
  padding-bottom: var(--mfc-space-12);
  border-bottom: 0.5px solid var(--mfc-border);
}

.site-footer__brand-name {
  font-size: var(--mfc-text-2xl);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--mfc-text);
  margin-bottom: var(--mfc-space-3);
}

.site-footer__tagline {
  font-size: var(--mfc-text-base);
  color: var(--mfc-text-secondary);
  line-height: 1.6;
}

.site-footer__nav-title {
  font-size: var(--mfc-text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mfc-forest);
  margin-bottom: var(--mfc-space-4);
}

.site-footer__nav {
  display: flex;
  flex-direction: column;
  gap: var(--mfc-space-3);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mfc-space-4);
  padding-top: var(--mfc-space-6);
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-muted);
}


/* =============================================================================
   WPRM (WP Recipe Maker Pro) OVERRIDES
   ============================================================================= */

.wprm-recipe-container {
  /*border: 0.5px solid var(--mfc-border) !important;*/
  border-radius: var(--mfc-radius-lg) !important;
  background: var(--mfc-bg) !important;
  font-family: var(--mfc-font) !important;
  overflow: hidden;
}

.wprm-recipe-name {
  font-family: var(--mfc-font) !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--mfc-text) !important;
}

.wprm-recipe-block-container-columns {
  background: var(--mfc-bg-secondary) !important;
  border-radius: 0 !important;
}

.wprm-recipe-time,
.wprm-recipe-servings {
  font-weight: 700 !important;
  color: var(--mfc-deep) !important;
}

.wprm-recipe-time-label,
.wprm-recipe-servings-label {
  font-size: var(--mfc-text-xs) !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--mfc-text-tertiary) !important;
}

.wprm-recipe-ingredient-name {
  font-family: var(--mfc-font) !important;
  color: var(--mfc-text) !important;
}

.wprm-recipe-instruction-text {
  font-family: var(--mfc-font) !important;
  color: var(--mfc-text) !important;
  line-height: 1.65 !important;
}

.wprm-recipe-rating-star { color: var(--mfc-electric) !important; }
.wprm-recipe-rating-star-empty { color: var(--mfc-border-strong) !important; }

.wprm-recipe-print-link,
.wprm-recipe-jump-to-comments-link {
  background: var(--mfc-deep) !important;
  color: var(--mfc-electric) !important;
  font-family: var(--mfc-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: var(--mfc-radius-md) !important;
  font-size: var(--mfc-text-xs) !important;
  border: none !important;
}


/* =============================================================================
   WORDPRESS BLOCK EDITOR OVERRIDES
   ============================================================================= */

.wp-block-image figcaption {
  font-size: var(--mfc-text-sm);
  color: var(--mfc-text-tertiary);
  text-align: center;
  margin-top: var(--mfc-space-2);
}

.wp-block-quote {
  border-left: 3px solid var(--mfc-electric) !important;
  padding-left: var(--mfc-space-5);
  margin-left: 0;
  color: var(--mfc-text-secondary);
}

.wp-block-separator {
  border: none;
  border-top: 0.5px solid var(--mfc-border);
  margin: var(--mfc-space-8) auto;
}

.wp-block-button__link {
  font-family: var(--mfc-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  border-radius: var(--mfc-radius-md) !important;
  color: #ffff;
}

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--mfc-text-sm);
}

.wp-block-table th {
  background: var(--mfc-deep);
  color: var(--mfc-electric);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: var(--mfc-text-xs);
  padding: var(--mfc-space-3) var(--mfc-space-4);
  text-align: left;
}

.wp-block-table td {
  padding: var(--mfc-space-3) var(--mfc-space-4);
  border-bottom: 0.5px solid var(--mfc-border);
}

.wp-block-table tr:last-child td   { border-bottom: none; }
.wp-block-table tr:nth-child(even) td { background: var(--mfc-bg-secondary); }


/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

/* Accessibility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Text */
.text-center    { text-align: center; }
.text-left      { text-align: left; }
.text-right     { text-align: right; }
.font-bold      { font-weight: 700; }
.font-black     { font-weight: 800; }
.text-electric  { color: var(--mfc-electric); }
.text-pop       { color: var(--mfc-pop); }
.text-forest    { color: var(--mfc-forest); }
.text-inverse   { color: var(--mfc-text-inverse); }
.text-muted     { color: var(--mfc-text-tertiary); }

/* Backgrounds */
.bg-dark        { background-color: var(--mfc-bg-dark); }
.bg-tinted      { background-color: var(--mfc-bg-secondary); }
.bg-electric    { background-color: var(--mfc-electric); color: var(--mfc-deep); }

/* Borders & radius */
.rounded-sm   { border-radius: var(--mfc-radius-sm); }
.rounded-md   { border-radius: var(--mfc-radius-md); }
.rounded-lg   { border-radius: var(--mfc-radius-lg); }
.rounded-xl   { border-radius: var(--mfc-radius-xl); }
.rounded-full { border-radius: var(--mfc-radius-full); }

/* Spacing */
.mt-auto  { margin-top: auto; }
.w-full   { width: 100%; }


/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1024px) {
  .section {
    padding-top: var(--mfc-space-16);
    padding-bottom: var(--mfc-space-16);
  }
}

@media (max-width: 768px) {
  h1 { font-size: var(--mfc-text-4xl); }
  h2 { font-size: var(--mfc-text-3xl); }
  h3 { font-size: var(--mfc-text-2xl); }

  .site-header__inner { height: 56px; }
  .site-nav           { display: none; }

  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--mfc-bg);
    border-bottom: 0.5px solid var(--mfc-border);
    padding: var(--mfc-space-4) var(--mfc-padding-x);
    z-index: 99;
  }

  .nav-toggle { display: flex; flex-direction: column; }

  .hero {
    padding: var(--mfc-space-8) 0 var(--mfc-space-6);
  }

  .hero__actions    { flex-direction: column; }
  .btn--xl          { width: 100%; justify-content: center; }

  .grid--2,
  .grid--3,
  .grid--4          { grid-template-columns: 1fr; }

  .recipe-card--featured { grid-column: span 1; }

  .post-card__image  { width: 80px; }
  .post-card__title  { font-size: var(--mfc-text-lg); }

  .site-footer__grid { grid-template-columns: 1fr; gap: var(--mfc-space-8); }
  .site-footer__bottom { flex-direction: column; text-align: center; }

  .form-inline { flex-direction: column; }
}

/* 769 (not 768) so this never double-fires with the mobile block above;
   matches the min-width:769px convention in nav.css */
@media (min-width: 769px) and (max-width: 1024px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
}


/* =============================================================================
   WORDPRESS ADMIN BAR — logged-in offset corrections
   WP injects html { margin-top: 32px !important } (desktop) / 46px (mobile ≤782px)
   and renders a position:fixed admin bar at z-index 99999.
   Any position:sticky element with top:0 slides behind the bar without these rules.
   ============================================================================= */

body.admin-bar .site-header {
  top: 32px;
}

/* Sticky filter bar sits directly under the header (top = header height) */
body.admin-bar .archive-filters {
  top: calc(64px + 32px);
}

@media screen and (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px;
  }

  body.admin-bar .archive-filters {
    top: calc(64px + 46px);
  }
}


/* =============================================================================
   PRINT
   ============================================================================= */

@media print {
  .site-header,
  .site-footer,
  .ad-container,
  .btn,
  .nav-toggle {
    display: none !important;
  }

  body {
    color: #000;
    background: #fff;
    font-size: 12pt;
    line-height: 1.5;
  }

  a { color: inherit; text-decoration: none; }

  .wprm-recipe-container {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
  }
}