/* ============================================================
   Yellow Picnic — Homepage Template
   yp-homepage.css  |  loaded only on template-yp-homepage.php
   Colors, typography, and interaction states sourced from
   Figma "Interaction States Guide" (file: nbhDhPfBoHwv40n5cSuPpQ)
   ============================================================ */

/* ── Design tokens ────────────────────────────────────────── */
:root {
    /* Brand palette — exact Figma values */
    --yp-espresso:   #473B37;
    --yp-juniper:    #286841;
    --yp-ivory:      #F5F5F2;
    --yp-fawn:       #D9D6D0;   /* hover state for light buttons + secondary CTA */
    --yp-onyx:       #221F1B;
    --yp-white:      #FFFFFF;
    --yp-black:      #000000;

    /* Supporting tones */
    --yp-gray-light: #E8E5DF;
    --yp-gray-mid:   #9E9A95;

    /* Hover colours: dark buttons get Onyx 15% overlay blended in */
    --yp-espresso-hover: #413733;   /* #473B37 + #221F1B @15% */
    --yp-juniper-hover:  #275D3B;   /* #286841 + #221F1B @15% */

    /* Typography — families
       Figma brand tokens specify Instrument Serif for ALL serif/display type. */
    --yp-font-serif: 'Instrument Serif', Georgia, serif;
    --yp-font-sans:  'Montserrat', sans-serif;

    /* Type ramp — exact Figma "YP Text Styles"
       line-height = px (as authored), letter-spacing = % → em */
    --yp-display-size:   80px; --yp-display-lh:   75px; --yp-display-ls:   -0.04em; /* Instrument Serif 400 */
    --yp-h1-size:        40px; --yp-h1-lh:        30px; --yp-h1-ls:         0.02em; /* Instrument Serif 400 */
    --yp-h2-size:        30px; --yp-h2-lh:        35px; --yp-h2-ls:         0;       /* Instrument Serif 400 */
    --yp-body1-size:     18px; --yp-body1-lh:     26px; --yp-body1-ls:      0;       /* Montserrat 400 */
    --yp-body2-size:     14px; --yp-body2-lh:     20px; --yp-body2-ls:      0;       /* Montserrat 400 */
    --yp-cta-size:       15px; --yp-cta-lh:       1;    --yp-cta-ls:        0.10em;  /* Montserrat 500 */
    --yp-caption-size:   12px; --yp-caption-lh:   1;    --yp-caption-ls:    0.15em;  /* Montserrat 500 */

    /* Layout */
    --yp-nav-h:      80px;
    --yp-radius:     4px;

    /* Transition — all interactive elements use 180ms ease */
    --yp-t-btn:  background-color 180ms ease, border-color 180ms ease, color 180ms ease, opacity 180ms ease;
    --yp-t-link: color 180ms ease, opacity 180ms ease, transform 180ms ease;

    /* Section padding (Figma sections use 80px vertical) */
    --yp-pad-v-desk: 80px;
    --yp-pad-v-mob:  60px;
    --yp-pad-h-desk: 80px;
    --yp-pad-h-mob:  24px;
}

/* ── Fonts ────────────────────────────────────────────────── */
/* Instrument Serif + Montserrat are enqueued in functions.php
   (yp_homepage_assets). A CSS @import here is ignored by browsers
   because it would follow the :root rule above. */

/* ── Base reset (scoped to homepage body class) ───────────── */
body.yp-homepage {
    margin: 0;
    font-family: var(--yp-font-sans);
    font-size: 16px;
    color: var(--yp-espresso);
    background: var(--yp-white);
    -webkit-font-smoothing: antialiased;
}

body.yp-homepage *,
body.yp-homepage *::before,
body.yp-homepage *::after {
    box-sizing: border-box;
}

/* Force #000000 everywhere — overrides Salient's #444444 global styles */
body.yp-homepage p,
body.yp-homepage span,
body.yp-homepage div,
body.yp-homepage li,
body.yp-homepage h1,
body.yp-homepage h2,
body.yp-homepage h3,
body.yp-homepage h4,
body.yp-homepage h5,
body.yp-homepage h6,
body.yp-homepage label,
body.yp-homepage td,
body.yp-homepage th {
    color: #000000;
}

body.yp-homepage img    { max-width: 100%; display: block; }
body.yp-homepage a      { text-decoration: none; color: inherit; }
body.yp-homepage button { cursor: pointer; font-family: var(--yp-font-sans); }
body.yp-homepage p      { margin: 0; color: #000000; }
body.yp-homepage h1, body.yp-homepage h2, body.yp-homepage h3,
body.yp-homepage h4, body.yp-homepage h5, body.yp-homepage h6 { color: #000000; }
body.yp-homepage h1,
body.yp-homepage h2,
body.yp-homepage h3     { margin: 0; font-weight: 400; }

/* Brand accent colors must outweigh the blanket #000 override above
   (these selectors are (0,0,2,1) — higher specificity than body.yp-homepage p) */
body.yp-homepage .yp-eyebrow,
body.yp-homepage .yp-ticker__item { color: var(--yp-juniper); }
body.yp-homepage .yp-body2--title { color: var(--yp-juniper); margin-bottom: 5px; }

/* Hide Salient / WordPress default chrome on this template */
body.yp-homepage #header-outer,
body.yp-homepage .nectar-mobile-menu-holder,
body.yp-homepage #footer-outer {
    display: none !important;
}

/* ── Layout utilities ─────────────────────────────────────── */
.yp-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--yp-pad-h-desk);
}
.yp-section          { padding: var(--yp-pad-v-desk) 0; }
.yp-section__header  { margin-bottom: 60px; }  /* Figma: content flex gap-[60px] */
.yp-section__header--center { text-align: center; }
.yp-section__header--center .yp-headline1 { margin-top: 15px; }
/* Figma: 20px gap between headline and body copy within a section header */
.yp-section__header > .yp-body2,
.yp-section__header > p.yp-body2 { margin-top: 20px; }
.yp-section__cta     { display: flex; justify-content: center; margin-top: 60px; } /* Figma: gap-[60px] */
.yp-text-center      { text-align: center; }
.yp-mobile-only      { display: none; }

/* ── Typography ───────────────────────────────────────────── */
.yp-display {
    font-family: var(--yp-font-serif);
    font-size: clamp(40px, 4vw, 60px);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.yp-display2 {
    font-family: var(--yp-font-serif);
    font-size: clamp(40px, 5vw, 60px);
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 400;
}
.yp-headline1 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1;
    letter-spacing: 0.02em;
    font-weight: 400;
    color: #000000;
}
.yp-headline2 {
    font-family: 'Instrument Serif', serif;
    font-size: clamp(20px, 1.8vw, 26px);
    line-height: 1.3;
    font-weight: 400;
    color: #000000;
}
.yp-body1 {
    font-family: var(--yp-font-sans);
    font-size: 18px;
    line-height: 26px;
    font-weight: 400;
    color: #000000;
}
.yp-body2 {
    font-family: var(--yp-font-sans);
    font-size: 15px;
    line-height: 1.65;
    font-weight: 400;
    color: #000000;
}
.yp-body2--title {
    font-family: var(--yp-font-sans);
    font-size: 18px;
    font-weight: 500;
    color: var(--yp-juniper);
    margin-bottom: 5px;
}
.yp-eyebrow {
    font-family: var(--yp-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yp-juniper);
    margin-bottom: 15px;
}
.yp-caption {
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--yp-gray-mid);
}

/* ── Buttons ──────────────────────────────────────────────── */
/* Base — Montserrat Medium 12px / 1.2px tracking / uppercase / 180ms */
.yp-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    width: 180px !important;
    padding: 0 26px !important;
    font-family: var(--yp-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border: 1.5px solid transparent !important;
    border-radius: 0 !important;
    transition: var(--yp-t-btn) !important;
    white-space: nowrap !important;
    line-height: normal !important;
    cursor: pointer !important;
}

/* Espresso — Onyx 15% overlay on hover (per Interaction States Guide) */
.yp-btn--espresso {
    background: var(--yp-espresso) !important;
    color: var(--yp-white) !important;
    border-color: var(--yp-espresso) !important;
    position: relative;
}
.yp-btn--espresso::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yp-onyx);
    opacity: 0;
    transition: opacity 180ms ease;
}
.yp-btn--espresso:hover::after,
.yp-btn--espresso:focus-visible::after { opacity: 0.15; }

/* Juniper — Onyx 15% overlay on hover (per Interaction States Guide) */
.yp-btn--juniper {
    background: var(--yp-juniper) !important;
    color: var(--yp-white) !important;
    border-color: var(--yp-juniper) !important;
    position: relative;
}
.yp-btn--juniper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yp-onyx);
    opacity: 0;
    transition: opacity 180ms ease;
}
.yp-btn--juniper:hover::after,
.yp-btn--juniper:focus-visible::after { opacity: 0.15; }
/* Active / selected plan goal button */
.yp-btn--juniper.is-active {
    background: var(--yp-espresso) !important;
    border-color: var(--yp-espresso) !important;
    color: var(--yp-white) !important;
    box-shadow: 0 0 0 3px rgba(71,59,55,0.2) !important;
}

/* Ivory — Fawn on hover */
.yp-btn--ivory {
    background: var(--yp-ivory) !important;
    color: var(--yp-espresso) !important;
    border-color: var(--yp-ivory) !important;
}
.yp-btn--ivory:hover,
.yp-btn--ivory:focus-visible {
    background: var(--yp-fawn) !important;
    border-color: var(--yp-fawn) !important;
    color: var(--yp-espresso) !important;
}

/* Secondary (outline) — Fawn fill on hover, border thins to 1px */
.yp-btn--secondary {
    background: transparent !important;
    color: var(--yp-espresso) !important;
    border: 1.5px solid var(--yp-espresso) !important;
}
.yp-btn--secondary:hover,
.yp-btn--secondary:focus-visible {
    background: var(--yp-fawn) !important;
    border-width: 1px !important;
    color: var(--yp-espresso) !important;
}

.yp-btn--full { width: 100% !important; }

/* ── Desktop nav CTA — Figma: 37px, auto width, px-20, sharp, Onyx 15% hover ──
   Placed AFTER all base .yp-btn rules so same-specificity !important wins    */
.yp-nav__right .yp-btn {
    width: auto !important;
    height: 37px !important;
    padding: 0 20px !important;
    border-radius: 0 !important;
    letter-spacing: 0.12em !important;
    position: relative !important;
}
.yp-nav__right .yp-btn--espresso::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--yp-onyx);
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
}
.yp-nav__right .yp-btn--espresso:hover::after,
.yp-nav__right .yp-btn--espresso:focus-visible::after { opacity: 0.15; }

/* ── Text CTA (arrow link) ────────────────────────────────── */
/* Montserrat SemiBold 12px / 1.8px tracking / uppercase      */
/* Hover: arrow slides +6px (gap 15px → 21px)                 */
.yp-cta-text {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yp-espresso);
    transition: var(--yp-t-link);
}
.yp-cta-text:hover { opacity: 0.75; }
.yp-cta-text__arrow {
    transition: transform 180ms ease;
    flex-shrink: 0;
}
.yp-cta-text:hover .yp-cta-text__arrow { transform: translateX(6px); }

/* ── Nav ──────────────────────────────────────────────────── */
.yp-nav {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--yp-ivory);
    border-bottom: 1px solid var(--yp-fawn);
    height: var(--yp-nav-h);
}
/* Full-width override (hero mobile, newsletter) */
.yp-btn--full { width: 100% !important; }
/* Newsletter CTA keeps its own fixed width */
.yp-newsletter__form .yp-btn { width: 300px !important; }
.yp-nav__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--yp-pad-h-desk);
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 24px;
}
.yp-nav__left,
.yp-nav__right {
    display: flex;
    align-items: center;
    gap: 30px;
}
.yp-nav__right { justify-content: flex-end; }

/* Nav links — Montserrat Regular 14px; underline on hover (1px, Onyx 70%, 2px offset) */
.yp-nav__left a,
.yp-nav__right a:not(.yp-btn) {
    font-family: var(--yp-font-sans);
    font-size: 14px;
    font-weight: 400;
    color: var(--yp-black);
    text-decoration: none;
    transition: var(--yp-t-link);
    text-underline-offset: 2px;
}
.yp-nav__left a:hover,
.yp-nav__right a:not(.yp-btn):hover {
    text-decoration: underline;
    text-decoration-color: rgba(34,31,27,0.7);
    text-decoration-thickness: 1px;
}

/* Account dropdown (shown when logged in) */
.yp-nav__account { position: relative; display: flex; align-items: center; height: 100%; }
.yp-nav__account-toggle {
    font-family: var(--yp-font-sans);
    font-size: 14px; font-weight: 400; color: var(--yp-black);
    text-decoration: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
}
.yp-nav__caret { font-size: 10px; line-height: 1; }
.yp-nav__account-menu {
    position: absolute; top: 100%; right: 0; min-width: 230px;
    background: var(--yp-white); border: 1px solid var(--yp-fawn); border-radius: var(--yp-radius);
    padding: 6px 0; box-shadow: 0 10px 28px rgba(34,31,27,0.14);
    display: none; flex-direction: column; z-index: 1001;
}
.yp-nav__account:hover .yp-nav__account-menu,
.yp-nav__account:focus-within .yp-nav__account-menu { display: flex; }
.yp-nav__account-menu a {
    font-family: var(--yp-font-sans); font-size: 14px; font-weight: 400; color: var(--yp-espresso);
    text-decoration: none; padding: 11px 20px; white-space: nowrap; transition: background-color 120ms ease;
}
.yp-nav__account-menu a:hover { background: var(--yp-ivory); }

/* Logo */
.yp-nav__logo {
    font-family: var(--yp-font-serif);
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
    color: var(--yp-espresso);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yp-nav__logo-img {
    max-height: 44px;
    width: auto;
    display: block;
}

/* Hamburger — 2 lines per Figma (hide the middle span) */
/* SVG hamburger — two lines guaranteed identical weight via single SVG context */
.yp-nav__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
}
.yp-nav__hamburger svg { display: block; }

/* Mobile overlay */
.yp-nav__mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;        /* fallback for browsers without svh */
    height: 100svh;       /* cover only the visible viewport (no URL-bar gap) */
    min-height: 100svh;
    background: var(--yp-ivory);
    z-index: 100000;      /* above Salient's header, slide-out menu, and all page content */
    transform: translateX(-100%);
    transition: transform 300ms ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
}
.yp-nav__mobile-overlay.is-open { transform: translateX(0); }

/* Top bar inside the overlay: close (×) left, logo centered */
.yp-nav__mobile-bar {
    position: relative;
    flex: 0 0 60px;
    background: var(--yp-ivory);
    border-bottom: 1px solid var(--yp-fawn);
}
.yp-nav__close {
    position: absolute;
    left: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    /* Figma (1071:151): close icon 20×20px touch target, SVG 14×14px inside */
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--yp-onyx);
    cursor: pointer;
}
.yp-nav__mobile-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
}
.yp-nav__mobile-logo img { max-height: 31px; width: auto; display: block; }

/* Utility strip: Log In | FAQ */
.yp-nav__mobile-util {
    flex: 0 0 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    margin: 0;
    background: var(--yp-white);
}
.yp-nav__mobile-util a {
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 400;
    color: var(--yp-black) !important;
}

/* Link rows — container has NO horizontal padding so dividers run full-width */
.yp-nav__mobile-links {
    display: flex;
    flex-direction: column;
    background: var(--yp-ivory);
    padding: 0;
}
.yp-nav__mobile-links > a {
    display: flex;
    align-items: center;
    height: 56px;
    padding: 0 24px;
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--yp-black) !important;
    border-bottom: 1px solid var(--yp-fawn);
}
/* CTA row: 84px tall, button 44px × full-width, px-20 per Figma */
.yp-nav__mobile-cta-row {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 84px;
    padding: 0 24px;
    border-bottom: 1px solid var(--yp-fawn);
}
.yp-nav__mobile-cta-row .yp-btn {
    width: 100% !important;
    height: 44px !important;
    padding: 0 20px !important;
    font-family: var(--yp-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

/* Promo offer fills the remaining space */
.yp-nav__mobile-promo {
    flex: 1 0 auto;
    display: flex;
    align-items: flex-start;
    padding: 24px;
    margin: 0;
    background: var(--yp-ivory);
}
.yp-nav__mobile-promo-link {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    font-family: var(--yp-font-sans);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--yp-espresso) !important;
}
.yp-nav__mobile-promo-arrow { font-size: 14px; line-height: 1; }

/* ── Hero ─────────────────────────────────────────────────── */
.yp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 700px;
    overflow: hidden;
}
.yp-hero__image {
    background: var(--yp-gray-light);
    background-size: cover;
    background-position: center;
    height: 100%;
}
.yp-hero__copy {
    background: var(--yp-ivory);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px;
    gap: 40px;
    text-align: center;
    box-sizing: border-box;
}
/* Ivory panel fills its half of the viewport; copy content stays capped
   at the Figma width (494px) and centered — full-bleed band, capped inner. */
.yp-hero__copy .yp-body1,
.yp-hero__copy .yp-hero__ctas {
    width: 100%;
    max-width: 494px;
}
.yp-hero__copy .yp-display {
    width: 90%;
    max-width: 90%;
    font-family: 'Instrument Serif', serif;
    font-size: 75px;
    font-weight: 400;
    font-style: normal;
    line-height: 72px;
    letter-spacing: -0.04em;
    text-align: center;
    margin: 0;
}
.yp-hero__copy .yp-body1 {
    font-family: var(--yp-font-sans);
    font-size: 18px;
    font-weight: 400;
    line-height: 26px;
    letter-spacing: 0;
    text-align: center;
    color: var(--yp-onyx);
    margin: 0;
}
.yp-hero__ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
}
/* Hero button label typography */
.yp-hero__ctas .yp-btn {
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.1em;
    text-align: center;
    text-transform: uppercase;
    min-width: 180px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Ticker ───────────────────────────────────────────────── */
.yp-ticker {
    border-top: 1px solid var(--yp-fawn);
    border-bottom: 1px solid var(--yp-fawn);
    overflow: hidden;
    height: 56px;
    display: flex;
    align-items: center;
}
.yp-ticker__track {
    display: flex;
    align-items: center;
    white-space: nowrap;
    animation: yp-ticker-scroll 22s linear infinite;
}
.yp-ticker__item {
    font-family: var(--yp-font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--yp-juniper);
    padding: 0 4px;
}
.yp-ticker__dot {
    margin: 0 20px;
    color: var(--yp-gray-mid);
}
@keyframes yp-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.yp-ticker:hover .yp-ticker__track { animation-play-state: paused; }

/* Desktop: static spaced row — hide duplicate set, stop animation */
@media (min-width: 768px) {
    .yp-ticker {
        justify-content: center;
        height: 120px;
    }
    .yp-ticker__track {
        animation: none;
        justify-content: space-between;
        width: 1280px;
        max-width: 100%;
        padding: 0 120px;
        margin: 0 auto;
        box-sizing: border-box;
    }
    /* Hide the duplicated second set of items (items 7–12) on desktop */
    .yp-ticker__track .yp-ticker__item:nth-child(n+7) {
        display: none;
    }
    /* Figma desktop has no dot separators — evenly spaced text only */
    .yp-ticker__dot {
        display: none;
    }
}

/* ── Cards shared ─────────────────────────────────────────── */
.yp-cards {
    display: grid;
    gap: 32px;
}
.yp-cards--meals,
.yp-cards--testimonials {
    grid-template-columns: repeat(3, 1fr);
}
.yp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.yp-card__image {
    aspect-ratio: 1 / 1;
    background: var(--yp-gray-light);
    background-size: cover;
    background-position: center;
}
/* Grow the info panel to fill the (grid-equalized) card so all card
   bottoms align regardless of description length. */
.yp-card__info { padding: 24px 0; flex: 1 1 auto; }
.yp-card--meal .yp-card__info {
    background: var(--yp-ivory);
    padding: 30px 32px 40px;
}
.yp-card--meal .yp-headline2 {
    font-family: 'Instrument Serif', serif;
    font-size: 30px;
    font-weight: 400;
    font-style: normal;
    line-height: 35px;
    letter-spacing: 0;
    color: #000000;
    margin-bottom: 15px;
}
.yp-card--meal .yp-body2 {
    font-family: var(--yp-font-sans);
    font-size: 14px;
    font-weight: 400;
    font-style: normal;
    line-height: 20px;
    letter-spacing: 0;
    color: #000000;
}
/* Figma (3069:649): Quote Panel pt-30 pb-40 px-32, flex-col gap-15.
   Real quotes vary in length. Use min-height:200px + flex:1 so the CSS grid
   row equalizes all three cards to the tallest one. Content stacks from the
   top (quote→attribution), remaining space falls below — no clipping, no
   overflow, all cards equal height. */
.yp-card--testimonial .yp-card__info {
    background: var(--yp-ivory);
    padding: 30px 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
    flex: 1;
    min-height: 200px;
}
.yp-card--testimonial .yp-body1 { margin-bottom: 0; }
.yp-card--testimonial .yp-caption {
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #000000;
}

/* ── Scroll indicator (mobile carousel) ──────────────────── */
.yp-scroll-indicator { margin-top: 20px; }
.yp-scroll-indicator__track {
    height: 2px;
    background: var(--yp-gray-light);
    position: relative;
    border-radius: 2px;
    width: 315px;
    max-width: 100%;
}
.yp-scroll-indicator__thumb {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 40%;
    background: var(--yp-espresso);
    border-radius: 2px;
    transition: left 100ms linear;
}

/* ── Menu Cards section ───────────────────────────────────── */
.yp-menu-cards { background: var(--yp-white); }
.yp-menu-cards .yp-section__header { max-width: 600px; margin-left: auto; margin-right: auto; }

/* ── Plans section ────────────────────────────────────────── */
.yp-plans { background: var(--yp-white); padding: 60px 0 100px; }
.yp-plans .yp-section__header { max-width: 538px; margin-left: auto; margin-right: auto; margin-bottom: 40px; }
.yp-plans .yp-headline1 { margin-bottom: 20px; }
.yp-plans .yp-body2 { max-width: 538px; margin: 0 auto; }
.yp-plans__buttons {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 0;
    flex-wrap: wrap;
}
/* Goal buttons — Figma (1071:392): 206px × 48px, 15px, tracking 1.5px (0.15em)
   Intentionally wider + larger type than the standard 180px/12px CTA. */
/* Figma (3069:622): Plans buttons 180×42px (NOT standard 48px), 12px, tracking 1.2px */
.yp-plans__buttons .yp-btn {
    width: 180px !important;
    min-width: 180px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    padding: 0 26px !important;
}

/* ── Brand Philosophy section ─────────────────────────────── */
.yp-philosophy {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 80px 0 40px;
    background: var(--yp-white);
}
.yp-philosophy__image {
    background: var(--yp-gray-light);
    background-size: cover;
    background-position: center;
    min-height: 480px; /* floor; grid stretch makes it match the copy panel height */
}
.yp-philosophy__copy {
    background: var(--yp-ivory);
    display: flex;
    align-items: center;
    justify-content: center;
}
.yp-philosophy__copy-inner {
    /* Fill the full copy panel (720px on 1440px) so the centered headline
       is truly centered and the indented values align correctly vs Figma */
    width: 100%;
    padding: 60px 80px;
}
.yp-philosophy__copy-inner .yp-headline1 { margin-bottom: 45px; text-align: center; }
/* CTA aligns with the values (same 43px left indent per Figma) */
body.yp-homepage .yp-philosophy__copy-inner .yp-cta-text { padding-left: 43px; }
.yp-philosophy__values {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 35px;
    padding-left: 43px;
    padding-right: 20px;
}
/* Force the exact Figma value-pair rhythm. Every spacing property is !important
   so nothing from Salient's theme, Elementor, or WPBakery can override it. */
body.yp-homepage .yp-philosophy__values {
    display: flex !important;
    flex-direction: column !important;
    gap: 25px !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 35px !important;
    padding-left: 43px !important;
    padding-right: 20px !important;
}
body.yp-homepage .yp-philosophy__value {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.yp-homepage .yp-philosophy__value .yp-body2--title,
body.yp-homepage .yp-philosophy__value .yp-body2 {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 20px !important;
}
body.yp-homepage .yp-philosophy__value .yp-body2--title {
    font-size: 18px !important;
    color: var(--yp-juniper) !important;
}
body.yp-homepage .yp-philosophy__value .yp-body2 { font-size: 14px !important; }

/* ── Testimonials section ─────────────────────────────────── */
.yp-testimonials { background: var(--yp-white); }
.yp-testimonials .yp-section__header { max-width: 560px; margin-left: auto; margin-right: auto; }

/* ── Newsletter section ───────────────────────────────────── */
/* Input on Espresso background: Ivory border/text at rest → White at focus */
.yp-newsletter {
    background: var(--yp-espresso);
    color: var(--yp-ivory);
    padding: 80px 0;
    text-align: center;
}
/* Figma (1071:451): body copy is full white, 15px gap above, 40px below to form */
.yp-newsletter .yp-body2 {
    color: var(--yp-white) !important;
    margin-top: 15px;
    margin-bottom: 40px;
}
.yp-newsletter__header { margin-bottom: 0; }
/* Figma: display2 60px / 60px lh / -0.04em tracking / constrained to 634px
   so "15% Off" sits on line 1 and "Your First Order" wraps to line 2 */
.yp-newsletter .yp-display2 {
    color: var(--yp-white);
    max-width: 634px;
    margin-left: auto;
    margin-right: auto;
    font-size: 60px;
    line-height: 60px;
}
/* Desktop: side-by-side input (500px) + button (300px), 25px gap */
.yp-newsletter__form {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 25px;
    max-width: 825px;
    margin: 0 auto;
}
/* Figma (1071:457): whole input element at opacity-70, ivory border + ivory placeholder.
   Applying opacity to the element (not just border) matches the exact Figma treatment. */
.yp-newsletter__input {
    flex: 0 0 500px;
    max-width: 500px;
    height: 70px;
    padding: 0 30px;
    font-size: 18px;
    font-family: var(--yp-font-sans);
    font-weight: 400;
    color: var(--yp-ivory) !important;
    background: transparent !important;
    border: 1px solid var(--yp-ivory) !important;
    border-radius: 0 !important;
    outline: none;
    opacity: 0.7;
    transition: var(--yp-t-btn);
}
.yp-newsletter__input::placeholder {
    color: var(--yp-ivory);
    opacity: 1;
}
/* Active/typing: full opacity, white border */
.yp-newsletter__input:focus {
    opacity: 1;
    border-color: var(--yp-white) !important;
    color: var(--yp-white) !important;
}
.yp-newsletter__input:-webkit-autofill,
.yp-newsletter__input:-webkit-autofill:hover,
.yp-newsletter__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--yp-ivory);
    -webkit-box-shadow: 0 0 0 1000px var(--yp-espresso) inset;
    caret-color: var(--yp-ivory);
}
/* Newsletter CTA: ivory bg, black text, fawn on hover — no border-radius, 300px × 70px */
.yp-newsletter__form .yp-btn {
    flex: 0 0 300px;
    width: 300px !important;
    height: 70px !important;
    font-size: 15px !important;
    border-radius: 0 !important;
    letter-spacing: 0.1em !important;
}
body.yp-homepage .yp-newsletter__form .yp-btn--ivory {
    color: var(--yp-black) !important;
    background: var(--yp-ivory) !important;
}
body.yp-homepage .yp-newsletter__form .yp-btn--ivory:hover,
body.yp-homepage .yp-newsletter__form .yp-btn--ivory:focus-visible {
    background: var(--yp-fawn) !important;
    color: var(--yp-black) !important;
}
.yp-newsletter__message {
    font-size: 13px;
    margin-top: 28px;   /* more breathing room below the form */
    min-height: 20px;
    opacity: 0.9;
}
/* Higher specificity than the blanket body.yp-homepage p { color:#000 } so the
   confirmation stays the light brand tone (readable on the espresso band). */
body.yp-homepage .yp-newsletter__message {
    color: var(--yp-ivory);
}

/* ── Footer ───────────────────────────────────────────────── */
.yp-footer {
    background: var(--yp-ivory);
    /* Figma: py-60 px-20, gap-30 flex column */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 60px 20px;
    text-align: center;
}
.yp-footer__logo {
    display: block;
    font-family: var(--yp-font-serif);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--yp-espresso);
}
.yp-footer__logo-img {
    /* Figma desktop (1071:461): 53px tall × 130px wide */
    max-height: 53px;
    width: auto;
    display: block;
    margin: 0 auto;
}
.yp-footer__divider {
    border: none;
    border-top: 1px solid var(--yp-fawn);
    /* Figma desktop (1071:461): 478px wide */
    width: 478px;
    max-width: 478px;
    margin: 0;
}
.yp-footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.yp-footer__social {
    display: flex;
    gap: 20px;
    align-items: center;
}
.yp-footer__social a {
    color: var(--yp-black);
    opacity: 1;
    transition: var(--yp-t-link);
}
.yp-footer__social a:hover { opacity: 0.6; }
/* Figma desktop: social icons 25×25px */
.yp-footer__social svg,
.yp-footer__social img { width: 25px !important; height: 25px !important; }
/* Figma desktop (1071:461): 12px / 20px lh / Montserrat Medium / 432px wide */
.yp-footer__disclaimer {
    margin: 0;
    padding: 0;
    max-width: 432px;
    text-align: center;
    font-family: var(--yp-font-sans);
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    color: var(--yp-black);
}
.yp-footer__disclaimer a {
    color: var(--yp-black);
    text-decoration: none;
    text-underline-offset: 2px;
    transition: var(--yp-t-link);
}
.yp-footer__disclaimer a:hover { text-decoration: underline; }

/* ── Screen reader only ───────────────────────────────────── */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 767px)
   ============================================================ */
@media (max-width: 767px) {

    :root {
        /* Slightly taller mobile nav (60→72px) so the logo has more breathing
           room above the hero image, per designer feedback */
        --yp-nav-h: 72px;
    }

    .yp-container     { padding: 0 var(--yp-pad-h-mob); }
    .yp-section       { padding: var(--yp-pad-v-mob) 0; }
    .yp-section__header { margin-bottom: 40px; }   /* Figma: gap-40 between header and content */
    .yp-section__cta  { margin-top: 32px; }
    .yp-mobile-only   { display: block; }

    /* Mobile section header typography (Figma 1071:179) */
    .yp-eyebrow { font-size: 12px; letter-spacing: 0.1em; }
    .yp-headline1 { font-size: 38px; line-height: 36px; letter-spacing: 0.02em; }
    .yp-section__header .yp-body2,
    .yp-section__header > .yp-body2 { font-size: 12px; line-height: 18px; }

    /* Nav */
    .yp-nav__left,
    .yp-nav__right    { display: none; }
    .yp-nav__inner {
        grid-template-columns: 48px 1fr 48px;
        padding: 0 var(--yp-pad-h-mob);
    }
    .yp-nav__hamburger { display: flex; }
    .yp-nav__logo      { font-size: 18px; }

    /* Hero — stacked (Figma mobile: image 300px, copy panel px-32 py-44) */
    .yp-hero {
        grid-template-columns: 1fr;
        height: auto;
        min-height: auto;
    }
    .yp-hero__image {
        aspect-ratio: 393 / 300;
        min-height: 260px;
    }
    .yp-hero__copy {
        width: 100%;
        padding: 44px 32px;
    }
    .yp-hero__copy .yp-display {
        /* Override the desktop 90% — mobile copy is already padded 32px each side
           so 90% would shrink the column further and cause extra wrapping */
        width: 100%;
        max-width: 100%;
        font-size: 44px;
        line-height: 42px;
    }
    .yp-hero__copy .yp-body1 {
        font-size: 14px;
        line-height: 20px;
        max-width: 100%;
    }
    /* ── ALL mobile CTAs — Figma (1071:179): 315px × 50px, 12px, tracking 1.2px ──
       Applied individually so each section's !important chain is unambiguous.   */
    .yp-hero__ctas { flex-direction: column; gap: 16px; align-items: center; }
    .yp-hero__ctas .yp-btn {
        width: 315px !important;
        height: 50px !important;
        padding: 0 24px !important;
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
    }

    /* ── Carousel: zero container padding so carousel spans full viewport ── */
    /* Figma: Cards Carousel has pl-24 on a full-width parent with no extra offset.
       Using grid inside a padded container gives only 14px peek. Zeroing the
       container and adding 24px directly to carousel gives the correct 38px peek. */
    .yp-menu-cards .yp-container,
    .yp-testimonials .yp-container {
        padding-left: 0;
        padding-right: 0;
    }
    /* Re-add horizontal offset for non-carousel children */
    .yp-menu-cards .yp-section__header,
    .yp-testimonials .yp-section__header { padding: 0 32px; }
    .yp-menu-cards .yp-section__cta,
    .yp-testimonials .yp-section__cta {
        padding-left: 0;
        justify-content: center;
    }

    /* Carousel — flex row, scrolls horizontally, clips at right edge */
    .yp-cards--meals,
    .yp-cards--testimonials {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
        padding-left: 24px;   /* 24px from viewport left — matches Figma pl-24 */
        padding-right: 0;
        padding-bottom: 4px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 24px;  /* snapped cards land at 24px from left */
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .yp-cards--meals::-webkit-scrollbar,
    .yp-cards--testimonials::-webkit-scrollbar { display: none; }
    /* Each card: 315px fixed, never grows/shrinks */
    .yp-card {
        scroll-snap-align: start;
        flex: 0 0 315px;
        width: 315px !important;
        max-width: 315px;
    }
    /* Meal card: image 1:1 square, info h-200px pt-24 pb-32 px-24 (Figma 1071:226) */
    .yp-card--meal .yp-card__image { aspect-ratio: 1 / 1; }
    .yp-card--meal .yp-card__info {
        padding: 24px 24px 32px;
        height: 200px;
        min-height: unset;
        flex: none;
        overflow: hidden; /* clip long text to fixed 200px panel */
    }
    /* Testimonial: image 1:1 square, quote panel h-150px pt-24 pb-32 px-24 */
    .yp-card--testimonial .yp-card__info {
        padding: 24px 24px 32px;
        min-height: 150px;
        justify-content: flex-start;
    }
    /* Scroll indicator: 315px wide (matches card width), positioned under cards */
    .yp-scroll-indicator { margin-top: 4px; }
    .yp-scroll-indicator__track { width: 315px; }

    /* Plans — Figma mobile (1071:245): px-32 py-20, left-aligned header,
       315px × 50px buttons, 12px font, stacked with 16px gap, 40px gap to header */
    /* Figma (1071:245 / 1071:249 / 1071:250 / 1071:251):
       section py-20, horizontal padding from container only (32px each side).
       All text CENTER-aligned on mobile — items-start in Figma refers to the
       flex column direction, not text alignment. */
    /* Plans — Figma (1071:245): px-32 py-20, flex layout with EXACT gaps
       Content gap-40 (header→buttons), Section Header gap-20 (headline→body),
       Heading Stack gap-15 (eyebrow→headline). Use flex+!important to
       guarantee gaps regardless of other margin rules. */
    .yp-plans { padding: 20px 0; }
    .yp-plans .yp-container { padding-left: 32px; padding-right: 32px; }

    /* Section header: flex column, explicit gap between elements */
    .yp-plans .yp-section__header {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;          /* gaps set on children */
        max-width: 100%;
        text-align: center;
        margin: 0 0 40px !important; /* 40px to buttons (Content gap-40) */
    }

    /* Eyebrow: 12px, Heading Stack gap-15 achieved via margin-bottom */
    .yp-plans .yp-eyebrow {
        font-size: 12px !important;
        letter-spacing: 0.1em !important;
        margin: 0 0 15px 0 !important; /* gap-15 below eyebrow */
        text-align: center;
    }

    /* Headline: 38px/36px, no top margin (gap from eyebrow), 20px below */
    .yp-plans .yp-headline1 {
        font-size: 38px !important;
        line-height: 36px !important;
        letter-spacing: 0.02em !important;
        margin: 0 0 20px 0 !important; /* gap-20 to body (Section Header gap) */
        text-align: center;
    }

    /* Body: 12px/18px, no extra margin (handled by headline margin-bottom) */
    .yp-plans .yp-body2 {
        font-size: 12px !important;
        line-height: 18px !important;
        max-width: 100%;
        margin: 0 !important;
        text-align: center;
    }
    .yp-plans__buttons {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    .yp-plans__buttons .yp-btn {
        width: 315px !important;
        height: 50px !important;
        min-width: unset !important;
        padding: 0 24px !important;
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
    }
    .yp-btn--juniper { min-width: unset; }

    /* Philosophy — stacked (Figma mobile: 44px/32px padding, 40px headline gap,
       values indented 20px) */
    .yp-philosophy            { grid-template-columns: 1fr; padding: 0; }
    .yp-philosophy__image     { aspect-ratio: 393 / 491; min-height: 300px; height: auto; }
    .yp-philosophy__copy-inner { padding: 44px 32px; max-width: 100%; }
    .yp-philosophy__copy-inner .yp-headline1 { margin-bottom: 40px; }
    .yp-philosophy__values    { padding-left: 20px; padding-right: 0; }

    /* Newsletter — mobile section padding: 50px top/bottom, 32px sides (Figma) */
    .yp-newsletter { padding: 50px 32px; }
    /* Figma mobile: 40px gap between header and form */
    .yp-newsletter .yp-body2 { margin-bottom: 40px; }
    /* Stacked full-width form (Figma mobile: 50px input, 50px btn, 16px gap) */
    .yp-newsletter__form {
        flex-direction: column;
        gap: 16px;
        max-width: 315px;
        margin: 0 auto;
        padding: 0;
    }
    .yp-newsletter__input {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 50px;
        padding: 0 24px;
        font-size: 14px;
    }
    .yp-newsletter__form .yp-btn {
        flex: none;
        width: 100% !important;
        height: 50px !important;
        font-size: 12px !important;
    }

    /* Nav logo — slightly smaller on mobile */
    .yp-nav__logo-img { max-height: 36px; }

    /* ── Menu Cards (Figma: py-50, header max-w 345px, cards 26px/12px type) ── */
    .yp-menu-cards { padding: 50px 0; }
    .yp-menu-cards .yp-section__header {
        max-width: 345px;
        margin-left: auto;
        margin-right: auto;
        padding: 0 32px;
        text-align: center;
    }
    /* Section CTAs (menu cards, testimonials): 315px × 50px, 12px, tracking 1.2px */
    .yp-section__cta .yp-btn {
        width: 315px !important;
        height: 50px !important;
        padding: 0 24px !important;
        font-size: 12px !important;
        letter-spacing: 1.2px !important;
    }
    /* Mobile card info panel: pt-24 pb-32 px-24 (not desktop 30/40/32) */
    .yp-card--meal .yp-card__info { padding: 24px 24px 32px; }
    /* Mobile card title: 26px / 28px lh (vs desktop 30px / 35px) */
    .yp-card--meal .yp-headline2 { font-size: 26px !important; line-height: 28px !important; }
    /* Mobile card body: 12px / 18px lh (vs desktop 14px / 20px) */
    .yp-card--meal .yp-body2 { font-size: 12px !important; line-height: 18px !important; }

    /* ── Testimonials (Figma: pt-20 pb-50, quote 14px/20px, attr 9px) ── */
    .yp-testimonials { padding: 20px 0 50px; }
    .yp-testimonials .yp-section__header { padding: 0 32px; text-align: left; }
    /* Testimonial quote panel: pt-24 pb-32 px-24 (Figma mobile) */
    .yp-card--testimonial .yp-card__info { padding: 24px 24px 32px; }
    /* Quote text: 14px / 20px lh on mobile (vs desktop 18px / 26px) */
    .yp-card--testimonial .yp-body1 { font-size: 14px !important; line-height: 20px !important; }
    /* Attribution: 9px / tracking 1.35px on mobile (vs desktop 12px) */
    .yp-card--testimonial .yp-caption {
        font-size: 9px !important;
        letter-spacing: 0.15em !important;
    }

    /* ── Brand Philosophy (Figma: py-50, value body 12px/18px, CTA 10px) ── */
    .yp-philosophy { padding: 50px 0; }  /* re-add section padding (was 0) */
    /* Value body text: 12px/18px on mobile */
    body.yp-homepage .yp-philosophy__values .yp-body2 {
        font-size: 12px !important;
        line-height: 18px !important;
    }
    /* Philosophy CTA text: 10px tracking 1.5px on mobile */
    .yp-philosophy__copy-inner .yp-cta-text {
        font-size: 10px;
        letter-spacing: 0.15em;
    }

    /* ── Newsletter display: 48px / 46px lh on mobile (clamp gives wrong value) ── */
    .yp-newsletter .yp-display2 {
        font-size: 48px;
        line-height: 46px;
        letter-spacing: -0.04em;
    }

    /* Footer — mobile (1071:319) vs desktop (1071:461) */
    .yp-footer__logo-img   { max-height: 42px; }        /* 42px tall × 102px wide */
    .yp-footer__divider    { width: 220px; max-width: 220px; }  /* 220px */
    .yp-footer__social svg,
    .yp-footer__social img { width: 18px !important; height: 18px !important; }  /* 18px */
    .yp-footer__disclaimer { font-size: 9px; line-height: 15px; }  /* 9px / 15px */
}