/* ============================================================
   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); }

/* 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: 56px; }
.yp-section__header--center { text-align: center; }
.yp-section__header--center .yp-headline1 { margin-top: 8px; }
.yp-section__cta     { display: flex; justify-content: center; margin-top: 56px; }
.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;
    padding: 0 28px !important;
    font-family: var(--yp-font-sans) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    border: 1.5px solid transparent !important;
    border-radius: var(--yp-radius) !important;
    transition: var(--yp-t-btn) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

/* Espresso (dark brown) — default + Onyx 15% overlay on hover */
.yp-btn--espresso {
    background: var(--yp-espresso) !important;
    color: var(--yp-white) !important;
    border-color: var(--yp-espresso) !important;
}
.yp-btn--espresso:hover,
.yp-btn--espresso:focus-visible {
    background: var(--yp-espresso-hover) !important;
    border-color: var(--yp-espresso-hover) !important;
    color: var(--yp-white) !important;
}

/* Juniper (green) — default + Onyx 15% overlay on hover */
.yp-btn--juniper {
    background: var(--yp-juniper) !important;
    color: var(--yp-white) !important;
    border-color: var(--yp-juniper) !important;
    min-width: 160px;
}
.yp-btn--juniper:hover,
.yp-btn--juniper:focus-visible {
    background: var(--yp-juniper-hover) !important;
    border-color: var(--yp-juniper-hover) !important;
    color: var(--yp-white) !important;
}
/* 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; }

/* ── 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);
}
/* Nav CTA is the compact variant (h37 / px20), not the full 48px button */
.yp-nav__right .yp-btn {
    height: 37px !important;
    padding: 0 20px !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;
}

/* 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 (mobile only) */
.yp-nav__hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    padding: 4px;
}
.yp-nav__hamburger span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--yp-espresso);
    transition: var(--yp-t-link);
}

/* Mobile overlay */
.yp-nav__mobile-overlay {
    position: fixed;
    inset: 0;
    background: var(--yp-white);
    z-index: 1001;
    transform: translateX(-100%);
    transition: transform 300ms ease;
    overflow-y: auto;
}
.yp-nav__mobile-overlay.is-open { transform: translateX(0); }
.yp-nav__mobile-inner {
    padding: 24px var(--yp-pad-h-mob);
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
.yp-nav__close {
    align-self: flex-start;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--yp-espresso);
    padding: 0;
    margin-bottom: 40px;
}
.yp-nav__mobile-links {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--yp-gray-light);
}
.yp-nav__mobile-links a {
    font-family: var(--yp-font-serif);
    font-size: 24px;
    font-weight: 400;
    padding: 18px 0;
    border-bottom: 1px solid var(--yp-gray-light);
    color: var(--yp-espresso);
}
.yp-nav__mobile-links .yp-btn {
    margin-top: 28px;
    font-family: var(--yp-font-sans);
    font-size: 12px;
    border-bottom: none;
}
.yp-nav__mobile-util {
    display: flex;
    gap: 24px;
    margin-top: auto;
    padding-top: 40px;
    padding-bottom: 24px;
}
.yp-nav__mobile-util a {
    font-size: 13px;
    color: var(--yp-gray-mid);
}

/* ── 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-display,
.yp-hero__copy .yp-body1,
.yp-hero__copy .yp-hero__ctas {
    width: 100%;
    max-width: 494px;
}
.yp-hero__copy .yp-display {
    font-family: 'Instrument Serif', serif;
    font-size: 80px;
    font-weight: 400;
    font-style: normal;
    line-height: 75px;
    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;
}
.yp-card--testimonial .yp-card__info {
    background: var(--yp-ivory);
    padding: 30px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.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; }
.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: 40px;
    flex-wrap: wrap;
}
/* Goal buttons use the CTA type token (Montserrat Medium 15px) at 206px wide */
.yp-plans__buttons .yp-btn {
    min-width: 206px !important;
    font-size: 15px !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;
}
.yp-philosophy__copy-inner {
    padding: 60px 80px;
    max-width: 640px;
}
.yp-philosophy__copy-inner .yp-headline1 { margin-bottom: 45px; text-align: center; }
.yp-philosophy__values {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-bottom: 35px;
}

/* ── 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;
}
.yp-newsletter .yp-body2 {
    color: rgba(245,245,242,0.65) !important;
    margin-top: 15px;
    margin-bottom: 40px;
}
.yp-newsletter__header { margin-bottom: 0; }
.yp-newsletter .yp-display2 { color: var(--yp-white); }
/* Detached input (500px) + button (300px), 25px gap */
.yp-newsletter__form {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    max-width: 825px;
    margin: 0 auto;
}
/* Default: Ivory border 70% opacity, Ivory placeholder */
.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-espresso) !important;   /* dark brand text — readable on light fill */
    background: var(--yp-ivory) !important;  /* light fill (matches the CTA button) */
    border: 1px solid var(--yp-fawn) !important;
    border-radius: var(--yp-radius);
    outline: none;
    transition: var(--yp-t-btn);
}
.yp-newsletter__input::placeholder { color: var(--yp-gray-mid); opacity: 1; }
/* Active/typing */
.yp-newsletter__input:focus {
    border-color: var(--yp-espresso) !important;
    color: var(--yp-espresso) !important;
}
/* Keep browser-autofill on-brand (Chrome forces its own light bg + colors otherwise) */
.yp-newsletter__input:-webkit-autofill,
.yp-newsletter__input:-webkit-autofill:hover,
.yp-newsletter__input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--yp-espresso);
    -webkit-box-shadow: 0 0 0 1000px var(--yp-ivory) inset;
    caret-color: var(--yp-espresso);
}
.yp-newsletter__form .yp-btn {
    flex: 0 0 300px;
    width: 300px !important;
    height: 70px !important;
    font-size: 15px !important;
    border-radius: var(--yp-radius) !important;
}
/* Figma: newsletter CTA label is black on the ivory button */
body.yp-homepage .yp-newsletter__form .yp-btn--ivory {
    color: #000 !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);
    padding: 60px 0;
    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);
    margin-bottom: 28px;
}
.yp-footer__logo-img {
    max-height: 42px;
    width: auto;
    display: block;        /* matches the global img rule … */
    margin: 0 auto;        /* …so center it explicitly (text-align can't center a block img) */
}
.yp-footer__divider {
    border: none;
    border-top: 1px solid var(--yp-fawn);
    max-width: 478px;
    margin: 0 auto 28px;
}
.yp-footer__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.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; }
.yp-footer__social svg { width: 24px; height: 24px; }
.yp-footer__disclaimer {
    max-width: 432px;
    text-align: center;
    line-height: 20px;
    font-size: 12px;
    font-weight: 500;
    color: var(--yp-black);
}
.yp-footer__legal a {
    color: var(--yp-black);
    text-underline-offset: 2px;
    transition: var(--yp-t-link);
}
.yp-footer__legal a:hover { text-decoration: underline; }
.yp-footer__legal-sep { margin: 0 6px; }

/* ── 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 {
        --yp-nav-h: 60px;
    }

    .yp-container     { padding: 0 var(--yp-pad-h-mob); }
    .yp-section       { padding: var(--yp-pad-v-mob) 0; }
    .yp-section__header { margin-bottom: 36px; }
    .yp-section__cta  { margin-top: 32px; }
    .yp-mobile-only   { display: block; }

    /* 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 {
        font-size: 48px;
        line-height: 46px;
    }
    .yp-hero__copy .yp-body1 {
        font-size: 14px;
        line-height: 20px;
        max-width: 100%;
    }
    .yp-hero__ctas        { flex-direction: column; gap: 16px; }
    .yp-hero__ctas .yp-btn { width: 100% !important; height: 50px !important; }

    /* Cards — horizontal scroll carousel */
    .yp-cards--meals,
    .yp-cards--testimonials {
        grid-template-columns: repeat(3, 315px);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 16px;
        padding-bottom: 4px;
    }
    .yp-cards--meals::-webkit-scrollbar,
    .yp-cards--testimonials::-webkit-scrollbar { display: none; }
    .yp-card { scroll-snap-align: start; }
    /* Mobile card panels use 24px padding (Figma) */
    .yp-card--meal .yp-card__info,
    .yp-card--testimonial .yp-card__info { padding: 24px; }

    /* Plans */
    .yp-plans__buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .yp-btn--juniper { min-width: unset; }

    /* Philosophy — stacked */
    .yp-philosophy            { grid-template-columns: 1fr; padding: 0; }
    .yp-philosophy__image     { aspect-ratio: 1 / 1; min-height: 300px; height: auto; }
    .yp-philosophy__copy-inner { padding: 40px var(--yp-pad-h-mob); max-width: 100%; }

    /* Newsletter — stacked full-width fields */
    .yp-newsletter__form {
        flex-direction: column;
        gap: 16px;
        max-width: 100%;
        padding: 0 var(--yp-pad-h-mob);
    }
    .yp-newsletter__input {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }
    .yp-newsletter__form .yp-btn {
        flex: 1 1 auto;
        width: 100% !important;
        height: 56px !important;
    }
}