/* ==========================================================================
   AYO Brothers Farm — keep page headings clear of the header / menu

   Problem: every page's top section (hero) had a FIXED height (e.g. 100vh)
   and centred its text vertically. The header + menu sits on top of the
   hero. When the text is taller (Swahili sentences are longer, or the
   screen is small), the centred text grows upwards and slides under the
   menu.

   Fix: the hero is one screen tall (like the home page) but is allowed to
   grow, and its content always starts below the header. --ayo-header-h is measured by
   assets/js/layout-fixes.js (falls back to 170px if JavaScript is off).
   ========================================================================== */
section.hero-premium,
section.product-hero,
section.ops-hero,
section.sus-hero,
section.outg-hero,
section.contact-hero {
    /* Every page opens like the home page: the first section fills exactly
       one screen, its text and buttons centred in the space under the menu.
       If a small screen can't fit everything, the section grows instead of
       hiding the buttons. svh = the visible screen height on phones. */
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: calc(var(--ayo-header-h, 170px) + 24px);
    padding-bottom: 48px;
}

/* Contact page: no buttons in its banner, so instead of a full screen it is
   a shorter banner with the heading high up, and the info box + form start
   on the first screen (they overlap the banner's bottom by 80px by design). */
section.contact-hero {
    min-height: 0;
    align-items: flex-start;
    padding-top: calc(var(--ayo-header-h, 170px) + 40px);
    padding-bottom: 110px;
}

/* Laptop screens (height 900px or less): the big headings, especially the
   longer Swahili ones, pushed the buttons below the bottom of the screen.
   Scale the heading with the screen height so heading + text + buttons fit,
   and hide the small "scroll" hint, which there sat on top of the buttons.
   Taller screens keep the original sizes. */
@media (min-width: 768px) and (max-height: 900px) {
    /* each = the page's original size, but never taller than ~8.5% of the screen */
    section.hero-premium h1 { font-size: min(clamp(3rem, 6vw, 5.5rem), 8.5vh); }
    section.product-hero h1 { font-size: min(clamp(3rem, 5vw, 4.5rem), 8.5vh); }
    section.ops-hero h1     { font-size: min(clamp(3rem, 5vw, 5rem), 8.5vh); }
    section.sus-hero h1     { font-size: min(clamp(38px, 5.5vw, 72px), 8.5vh); }
    section.outg-hero h1    { font-size: min(clamp(3.5rem, 8vw, 6.5rem), 9vh); }
    section.contact-hero h1 { font-size: min(clamp(48px, 6vw, 76px), 8.5vh); }

    .sus-hero__scroll,
    .outg-scroll-indicator {
        display: none;
    }
}

/* Phones: a little less space under the menu */
@media (max-width: 767px) {
    section.hero-premium,
    section.product-hero,
    section.ops-hero,
    section.sus-hero,
    section.outg-hero,
    section.contact-hero {
        padding-top: calc(var(--ayo-header-h, 110px) + 20px);
        padding-bottom: 40px;
    }
}

/* ==========================================================================
   Header: menu below the top (black) bar, menu bar reaching the logo,
   smaller language button
   ========================================================================== */

/* 1. The menu used to start 50px from the top while the top bar is ~64px
      tall, so the menu covered the bottom of the top bar. Now the menu
      starts exactly where the top bar ends (--ayo-topbar-h is measured by
      assets/js/layout-fixes.js). Phones hide the top bar, so 0 there. */
@media (min-width: 768px) {
    .main-header--two:not(.sticky-header--cloned) {
        top: var(--ayo-topbar-h, 50px);
    }
}

/* 2. There was a 100–152px empty gap between the AYO logo and the green
      menu bar. Shrink it so the menu bar starts right after the logo. */
@media (min-width: 1200px) {
    .main-header--two .main-header__logo {
        margin-right: 24px;
    }
}

/* 3. The English/Swahili button was taller than everything else in the
      top bar (44px), making the bar thick and touching the links next to
      it (worse in Swahili, whose link names are longer). */
.topbar__language-switcher {
    margin-left: 18px;
    flex-shrink: 0;
}

.topbar__language-switcher .language-toggle-btn {
    font-size: 11px;
    gap: 7px;
    padding: 4px 8px 4px 10px;
    line-height: 1;
    letter-spacing: 0.04em;
}

.topbar__language-switcher .language-toggle__switch {
    width: 30px;
    height: 16px;
}

.topbar__language-switcher .language-toggle__thumb {
    width: 12px;
    height: 12px;
    left: 2px;
}

.topbar__language-switcher .language-toggle-btn.language-sw .language-toggle__thumb {
    transform: translateX(14px);
}

/* Keep the top-bar links on one line and away from the button */
.topbar__pages li a {
    white-space: nowrap;
}

/* ==========================================================================
   Top (black) bar text in white, like the English/Swahili button
   (Joe, 8 Oct 2026). The template made it grey (#7A7373), which was
   hard to read on black. Icons keep the brand colour; hover still
   turns the link the brand colour so people see it is clickable.
   ========================================================================== */
.topbar--two .topbar__info li,
.topbar--two .topbar__info li a,
.topbar--two .topbar__pages li a,
.topbar--two .topbar__pages li.current a {
    color: var(--boskery-white, #ffffff);
}

.topbar--two .topbar__info li a:hover,
.topbar--two .topbar__pages li a:hover {
    color: var(--boskery-base, #A42125);
}

/* ==========================================================================
   Full-width header (Joe, 8 Oct 2026)
   - The black top bar used to stop 15px before each screen edge (and at
     1650px on very wide screens). Now it runs from the left edge to the
     right edge.
   - The green menu bar now runs all the way to the right edge too, so its
     right end lines up with the black bar above it. The cart icon gets the
     same 40px inner space as the top-bar text, so both line up.
   ========================================================================== */
@media (min-width: 768px) {
    .topbar--two .container-fluid {
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }

    .topbar--two .topbar__inner {
        padding-left: 40px;
        padding-right: 40px;
    }

    .main-header--two .main-header__container-fluid {
        max-width: none;
        padding-left: 40px;
        padding-right: 0;
    }

    .main-header--two .main-header__right {
        padding-right: 40px;
    }
}

/* ==========================================================================
   Logo further left + green menu closer to it (Joe, 8 Oct 2026)
   The logo started 40px from the left edge; now 20px. The gap between
   the logo and the green menu bar goes from 24px to 8px.
   ========================================================================== */
@media (min-width: 768px) {
    .main-header--two .main-header__container-fluid {
        padding-left: 20px;
    }
}

@media (min-width: 1200px) {
    .main-header--two .main-header__logo {
        margin-right: 8px;
    }
}

/* ==========================================================================
   Top bar email + address in green, their icons in white (Joe, 8 Oct 2026)
   - Text: #59C36A, the site's own bright green (--boskery-green in the
     template). Darker brand greens (#043222) are unreadable on black.
   - Icons: white.
   - Hover (Claude's choice): text AND icon turn lime #c7ff00, the "glow"
     green already used on the Contact page, with the existing underline
     animation, so it is clearly clickable and still on-brand.
   "Contact Us" on the right stays white.
   ========================================================================== */
.topbar--two .topbar__info li,
.topbar--two .topbar__info li a {
    color: #2c6e53; /* menu green (#043222) family, brightened so it reads on black (Joe, 8 Oct) */
}

.topbar--two .topbar__info li i {
    color: var(--boskery-white, #ffffff);
    transition: color 300ms ease;
}

.topbar--two .topbar__info li:hover a,
.topbar--two .topbar__info li:hover i {
    color: #c7ff00;
}

/* ==========================================================================
   HOME the same colour as the other menu items (Joe, 8 Oct 2026)
   The template paints the menu item of the page you are on ("current")
   almond (#F6E9D9) instead of white, so on the home page HOME looked
   different. Keep it white like the rest; hover still shows almond.
   ========================================================================== */
.main-header--two .main-menu .main-menu__list > li.current:not(:hover) > a {
    color: #ffffff !important;
    text-shadow: none;
}

/* ==========================================================================
   Phone view fixes (Joe, 13 Oct 2026)
   ========================================================================== */

/* 1. Words glued together in headings on phones: the template hides every
      <br> inside headings below 576px wide, so "Table<br>Built" became
      "TableBuilt". Fixed in assets/js/layout-fixes.js, which puts a space
      before each such <br> (the text then wraps naturally on phones). */

/* 2. The template's "custom cursor" (two small circles that follow the
      mouse) showed up as a stray circle in the top-left corner on touch
      screens, where there is no mouse. Hide it on touch devices. */
@media (hover: none), (pointer: coarse) {
    .custom-cursor__cursor,
    .custom-cursor__cursor-two {
        display: none !important;
    }
}

/* 3. Sticky header (the copy that slides in when you scroll): its
      background is almost black-green, and the AYO logo is dark navy, so
      the logo disappeared. Put the logo on a small white card - the logo
      was designed on white. */
.sticky-header--cloned .main-header__logo img {
    background: #ffffff;
    border-radius: 10px;
    padding: 2px 6px;
    box-sizing: content-box;
}

/* 4. Home "Integrated Value Chain": on phones the steps stack vertically and
      the progress line runs down the middle - straight through the text.
      Give each step the section's background so the line only shows in
      the gaps between steps, linking them like a chain. */
@media (max-width: 991px) {
    .flow-section .flow-step,
    .ops-flow .flow-step {          /* same fix for /operations "Operational Pipeline" */
        background: var(--dark-bg, #0a0f0d);
        padding: 8px 12px 12px;
        border-radius: 16px;
    }
}

/* 5. Footer marquee ("AYO Brothers" running text) was too slow.
      ~1.5x faster: 20s -> 13s (home, products, operations) and
      30s -> 20s (sustainability, outgrowers, contact). */
.imm-footer__marquee-group { animation-duration: 13s !important; }
.imm-footer__marquee       { animation-duration: 20s !important; }

/* 6. The template's thin vertical "back top" text on the right edge sat
      under the WhatsApp button and was hard to see; it is replaced by the
      round scroll-to-top button (assets/js/scroll-top.js). */
.scroll-to-top { display: none !important; }

/* ==========================================================================
   Chains / connectors (Joe, 13 Oct 2026)
   ========================================================================== */

/* A. /outgrowers "How the Program Works" on phones & tablets (<=1024px):
      the dots sat 24px to the right of the line (line at 40px, dots at
      64px), so the chain looked broken, and the big step numbers "01".."04"
      lay on top of the line. Now each dot sits ON the line, level with its
      step title, and the number sits above the title, clear of the line. */
@media (max-width: 1024px) {
    .outg-timeline .outg-timeline__wrap { padding: 0 20px; }
    .outg-timeline .outg-timeline__line,
    .outg-timeline .outg-timeline__line-progress { left: 36px; }
    .outg-timeline .outg-step { padding-left: 52px; margin-bottom: 72px; }
    .outg-timeline .outg-step__node { left: 16px; top: 22px; transform: translate(-50%, -50%); }
    .outg-timeline .outg-step__number {
        left: 52px !important;
        right: auto !important;
        top: -38px;
        font-size: 3.2rem;
        color: rgba(255, 255, 255, 0.06);
    }
    .outg-timeline .outg-step__content { margin-bottom: 28px; }
    .outg-timeline .outg-step__visual { height: 300px; }
}
@media (max-width: 575px) {
    .outg-timeline .outg-step__title { font-size: 1.75rem; }
    .outg-timeline .outg-step__desc { font-size: 1.05rem; }
}

/* B. /sustainability "Three Pillars": the three icons had three colours
      (dark green, light green, brown). All now use the Environmental
      Responsibility green. Hover is unchanged. */
.sus-pillar .sus-pillar__icon-wrap--accent,
.sus-pillar .sus-pillar__icon-wrap--earth {
    background: rgba(4, 50, 34, 0.06);
    color: var(--sus-green, #043222);
    border: 1px solid rgba(4, 50, 34, 0.08);
}

/* C. /operations "End-to-End Visibility" on phones: the 4 stages stack
      vertically, but the connecting lines between them had 0 height
      (flex: 1 squeezed them), so nothing linked the stages. */
@media (max-width: 767px) {
    .ops-supply .supply-nodes { gap: 6px; }
    .ops-supply .s-path {
        flex: 0 0 48px;
        height: 48px;
        background: rgba(255, 255, 255, 0.18);   /* a bit brighter, easier to see */
    }
}

/* D. /products "Quality Assurance / Reliable Supply / Trusted Production":
      join the three icons with a line - across on wide screens, down on
      phones/tablets (where the cards stack). */
.trust-section .trust-card { position: relative; }
@media (min-width: 992px) {
    .trust-section .trust-card:not(:last-child)::after {
        content: "";
        position: absolute;
        top: 40px;                           /* middle of the 80px icon */
        left: calc(50% + 48px);              /* 8px after this icon      */
        width: calc(100% - 56px);            /* ...to 8px before the next */
        height: 2px;
        background: linear-gradient(90deg, var(--primary-green-light, #2c6e53), rgba(255, 255, 255, 0.12));
        pointer-events: none;
    }
}
@media (max-width: 991px) {
    .trust-section .trust-grid { gap: 56px; }
    .trust-section .trust-card:not(:last-child)::after {
        content: "";
        position: absolute;
        left: 50%;
        top: calc(100% + 8px);               /* below this card's text   */
        width: 2px;
        height: 40px;                        /* ...down to the next icon */
        transform: translateX(-50%);
        background: linear-gradient(180deg, var(--primary-green-light, #2c6e53), rgba(255, 255, 255, 0.12));
        pointer-events: none;
    }
}

/* ==========================================================================
   "Contact Us" on phones & tablets (Joe, 13 Oct 2026)
   Below 1200px the top bar (where "Contact Us" lives) is hidden or cramped
   and the main menu collapses into the hamburger, so visitors had no
   direct way to the Contact page. Two ways in now:
   1. an envelope icon in the header, next to the cart (always visible);
   2. a "Contact Us" item at the end of the hamburger menu.
   Desktop (>=1200px) is unchanged: it keeps "Contact Us" in the top bar.
   ========================================================================== */
.main-header__contact {
    font-size: 20px;
    color: #ffffff !important;
    margin-left: 22px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
}
.main-header__contact:hover { color: var(--boskery-almond, #F6E9D9) !important; }

@media (min-width: 1200px) {
    /* Desktop: the menu item is not needed (the envelope icon is shown) */
    .main-menu .main-menu__list > li.ayo-menu-contact { display: none; }
}

/* ==========================================================================
   Desktop header redesign - "C: Transparent modern" (Joe, 13 Oct 2026)
   - The black top bar is gone (email + address dropped at Joe's request);
     "Contact Us" is the envelope icon and the English/Swahili switch moved
     into the header, next to the cart.
   - No green box: the menu sits straight on the hero photo, with a thin
     line under it. The page you are on gets a soft "pill"; hover glows lime.
   - AYO logo on a white card (it was designed on white).
   - When you scroll, the sliding header is solid dark green with blur.
   ========================================================================== */
.ayo-header-lang { display: none; }               /* phones/tablets use the switch in the ☰ menu */

@media (min-width: 1200px) {
    .main-header--two .main-header__container-fluid { padding-right: 20px; }
    .main-header--two .main-header__inner {
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding: 16px 0;
        align-items: center;
    }
    .main-header--two .main-header__logo { margin-right: 56px; }
    .main-header--two .main-header__logo img {
        background: #ffffff;
        border-radius: 12px;
        padding: 3px 8px;
        box-sizing: content-box;
    }
    .main-header--two .main-header__right {
        background: transparent !important;
        padding: 0 !important;
    }
    .main-header--two .main-menu .main-menu__list > li { padding-top: 18px; padding-bottom: 18px; }
    .main-header--two .main-menu .main-menu__list > li + li { margin-left: 8px; }
    .main-header--two .main-menu .main-menu__list > li > a {
        padding: 10px 18px;
        border-radius: 999px;
        font-size: 15px;
        letter-spacing: 0.06em;
        transition: background 0.25s ease, color 0.25s ease;
    }
    html body .main-header--two .main-menu .main-menu__list > li.current > a {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff !important;
    }
    html body .main-header--two .main-menu .main-menu__list > li:hover > a {
        background: rgba(199, 255, 0, 0.16);
        color: #c7ff00 !important;
    }

    /* Right side: envelope, cart, language switch */
    .main-header--two .main-header__right__right { gap: 0; }
    .main-header--two .main-header__contact,
    .main-header--two .main-header__cart { margin-left: 22px; }
    .main-header--two .main-header__contact:hover,
    .main-header--two .main-header__cart:hover { color: #c7ff00 !important; }
    .ayo-header-lang { display: block; margin-left: 24px; }
    .ayo-header-lang .language-toggle-btn {
        background: rgba(0, 0, 0, 0.25);
        border: 1px solid rgba(255, 255, 255, 0.25);
        color: #ffffff;
    }

    /* Sliding header when scrolling */
    .sticky-header--cloned.main-header--two {
        background: rgba(4, 50, 34, 0.92) !important;
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }
    .sticky-header--cloned.main-header--two .main-header__inner { border-bottom: 0; }
}

/* ==========================================================================
   Tighter spacing between sections (Joe, 13 Oct 2026)
   Each section had 100-200px of empty space above AND below its content,
   so between two sections there was 200-340px of nothing (e.g. "Our
   Ecosystem" -> "Divisions" -> "Excellence in Action" on the home page),
   on every page and on phones too. Normal sections now get 80px top and
   bottom on desktop (56px on phones), call-to-action blocks 100px (72px),
   and section titles sit closer to what they introduce.
   (Selectors start with "html body" so they beat each page's own styles.)
   ========================================================================== */
html body .flow-section, html body .bento-section, html body .proof-section,
html body .featured-section, html body .trust-section,
html body .ops-flow, html body .ops-infra, html body .ops-supply, html body .ops-quality,
html body .ops-gallery, html body .ops-reliability,
html body .sus-section,
html body .outg-timeline, html body .outg-support {
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}
html body .stats-section, html body .ops-stats { padding-top: 64px !important; padding-bottom: 64px !important; }
html body .final-cta, html body .ops-cta, html body .contact-cta-closing,
html body .outg-calm, html body .sus-cta {
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}
html body .contact-main { padding-bottom: 80px !important; }
html body .imm-footer { padding-top: 72px; }

/* Section titles: less space between the title and its content */
html body .section-header { margin-bottom: 48px !important; }
html body .outg-timeline__header { margin-bottom: 72px !important; }
html body .sus-bento__header, html body .sus-pillars__header,
html body .sus-metrics__header { margin-bottom: 48px !important; }

@media (max-width: 991px) {
    html body .flow-section, html body .bento-section, html body .proof-section,
    html body .featured-section, html body .trust-section,
    html body .ops-flow, html body .ops-infra, html body .ops-supply, html body .ops-quality,
    html body .ops-gallery, html body .ops-reliability,
    html body .sus-section,
    html body .outg-timeline, html body .outg-support,
    html body .stats-section, html body .ops-stats {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
    html body .final-cta, html body .ops-cta, html body .contact-cta-closing,
    html body .outg-calm, html body .sus-cta {
        padding-top: 72px !important;
        padding-bottom: 72px !important;
    }
    html body .contact-main { padding-bottom: 56px !important; }
    html body .section-header { margin-bottom: 36px !important; }
    html body .outg-timeline__header { margin-bottom: 56px !important; }
}

/* Outgrowers page: same tightening (its sections had 150-200px each side) */
html body .outg-story { padding-top: 100px !important; padding-bottom: 100px !important; }
html body .outg-impact { padding-top: 80px !important; padding-bottom: 80px !important; }
html body .outg-timeline .outg-step:last-child { margin-bottom: 0 !important; }
@media (max-width: 991px) {
    html body .outg-story, html body .outg-impact { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* ==========================================================================
   Footer headline "From Our Farmland to Your Table" + footer logo (Joe, 13 Oct 2026)
   - On home/operations/products/sustainability the headline inherited the
     template's near-black heading colour (#021a12) on a near-black footer, so
     "From Our Farmland to Your" was invisible, and "Table" (#2c6e53) was dim.
     Joe: the whole line should take the colour of "Table". Use the brighter
     AYO green #3aa64e (the "Table" colour on contact/outgrowers) for the whole
     headline on every page: contrast 6.2:1 on the footer background.
   - The AYO logo is dark navy on a transparent background, so it vanished on
     the dark footer. Put it on a white card, like the sticky header logo.
   ========================================================================== */
html body .imm-footer__headline,
html body .imm-footer__headline em {
    color: #3aa64e !important;
    -webkit-text-fill-color: #3aa64e !important;
}

html body .imm-footer__logo {
    display: inline-block;
}

html body .imm-footer__logo img {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px 14px;
    box-sizing: content-box;
}

/* ==========================================================================
   Compact sliding header (Joe, 21 Oct 2026)
   The header copy that slides down when you scroll back up showed the logo at
   full size (about 60px tall). On phones it stuck out above and below the
   40px green menu bar, and on computers it made the sliding bar 105px tall.
   Size the logo to the bar: 36px on phones/tablets (40px with its white
   card = exactly the bar), 44px on computers, and slim the bar itself.
   ========================================================================== */
html body .sticky-header--cloned .main-header__logo img {
    height: 36px !important;
    width: auto !important;
    max-width: none !important;
    padding: 2px 7px;
}
html body .sticky-header--cloned .main-header__inner {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    align-items: center;
}
@media (min-width: 1200px) {
    html body .sticky-header--cloned .main-header__logo img {
        height: 44px !important;
        padding: 3px 8px;
    }
    html body .sticky-header--cloned .main-header__inner {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }
}