/* ==========================================================================
   FOUNDATIONS
   --------------------------------------------------------------------------
   Cross-cutting modern baseline: keyboard accessibility, motion preferences,
   anchor-scroll behaviour and a few safety nets. Loaded on every page, after
   style.css, so it can correct older rules where needed.
   ========================================================================== */

/* ─── ANCHOR SCROLLING ───────────────────────────────────
   The navbar is fixed at 6em, so in-page anchors previously landed underneath
   it. scroll-padding keeps the target clear of the bar. */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 7.5rem;
}

/* ─── KEYBOARD FOCUS ─────────────────────────────────────
   There was no visible focus state anywhere on the site, which made it
   effectively unusable by keyboard. :focus-visible shows the ring for keyboard
   users without putting an outline on every mouse click. */
:focus-visible {
    outline: 2px solid var(--color-bg-accent);
    outline-offset: 3px;
    border-radius: 2px;
}

/* Dark surfaces need a lighter ring to stay visible. */
.navbar :focus-visible,
.site-footer :focus-visible,
.shop-club-banner :focus-visible,
.shop-promo :focus-visible,
.kg-cart-drawer :focus-visible {
    outline-color: #ffb59c;
}

/* Older browsers that don't know :focus-visible still get a focus ring. */
:focus:not(:focus-visible) { outline: none; }

/* ─── SKIP LINK ──────────────────────────────────────────
   First tab stop on every page: jumps past the navigation. */
.skip-link {
    /* Layout/hiding is set in style.css so it applies from first paint.
       Only the visible appearance is described here. */
    background: var(--color-bg-accent);
    color: #fff;
    font-family: var(--font-family-base);
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
}

/* On focus it un-clips and pins to the top of the viewport. */
.skip-link:focus {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    height: auto;
    padding: 0.85rem 1.6rem;
    overflow: visible;
    clip: auto;
    clip-path: none;
    z-index: 1001;
    color: #fff;
}

/* The skip target shouldn't draw a ring when focused programmatically. */
#main:focus { outline: none; }

/* <main> is a semantic landmark here, not a layout container, keep it
   transparent to layout so it can never introduce spacing of its own. */
main#main {
    display: block;
    margin: 0;
    padding: 0;
    max-width: none;
    background: none;
}

/* ─── MEDIA SAFETY NETS ──────────────────────────────────
   Stops any stray oversized asset from forcing a horizontal scrollbar. */
img,
video,
iframe {
    max-width: 100%;
}

img { height: auto; }

/* ─── SELECTION ──────────────────────────────────────── */
::selection {
    background: var(--color-bg-accent);
    color: #fff;
}

/* ─── SCROLL REVEAL ──────────────────────────────────────
   Paired with reveal.js. Only hides content once JS confirms it can reveal
   it again, so every page stays fully readable with JS off (reveal.js adds
   the has-reveal class to <html> before tagging anything). Site-wide, not
   page-specific, reveal.js runs the same auto-tagging on every page. */
.has-reveal [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.7s var(--ease-out) var(--reveal-delay, 0ms),
        transform 0.7s var(--ease-out) var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.has-reveal [data-reveal="fade"] { transform: none; }
.has-reveal [data-reveal="left"] { transform: translateX(-32px); }
.has-reveal [data-reveal="right"] { transform: translateX(32px); }

.has-reveal [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* On narrow screens a sideways reveal starts 32px off to the side, which is
   enough to push the page wide and cause a horizontal wobble before it
   animates in. Move vertically on mobile instead. */
@media (max-width: 760px) {
    .has-reveal [data-reveal="left"],
    .has-reveal [data-reveal="right"] { transform: translateY(28px); }
}

/* ─── REDUCED MOTION ─────────────────────────────────────
   Honours the OS "reduce motion" setting: no transitions, no animation, no
   smooth scrolling, and no hover zooms. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    .ab-strip__item:hover img,
    .product-card:hover .product-card__img-wrap img,
    .product-card:hover {
        transform: none;
    }

    .has-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ─── PRINT ──────────────────────────────────────────────
   Drop the furniture so product pages and menus print cleanly. */
@media print {
    .navbar,
    .site-footer,
    .kg-cart-drawer,
    .kg-cart-backdrop,
    .kg-toast,
    .skip-link,
    .shop-promo,
    .footer-map { display: none !important; }

    body { background: #fff; color: #000; }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.75em;
        word-break: break-all;
    }
}

/* ==========================================================================
   DESIGN SYSTEM
   --------------------------------------------------------------------------
   The site grew section by section, so the same elements were implemented
   several times over, six separate "eyebrow" classes, ad-hoc heading sizes,
   arbitrary spacing. This layer defines one scale and points the existing
   classes at it, so the look unifies without rewriting every page's markup.

   Loaded last, so it wins over the older per-section rules.
   ========================================================================== */

:root {
    /* Fluid type scale, each step interpolates between mobile and desktop,
       so there are no jumps at breakpoints. */
    --step--1: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
    --step-0:  clamp(0.94rem, 0.91rem + 0.15vw, 1.02rem);
    --step-1:  clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
    --step-2:  clamp(1.40rem, 1.26rem + 0.70vw, 1.85rem);
    --step-3:  clamp(1.70rem, 1.44rem + 1.30vw, 2.50rem);
    --step-4:  clamp(2.05rem, 1.60rem + 2.25vw, 3.30rem);

    /* Spacing scale (1.5x-ish), replaces scattered one-off rem values. */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1.25rem;
    --space-lg:  2rem;
    --space-xl:  3rem;
    --space-2xl: 4.5rem;
    --space-3xl: 7rem;

    /* Radii */
    --radius-sm: 4px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-pill: 100px;

    /* Elevation, soft and low-contrast, in keeping with the brand */
    --shadow-sm: 0 1px 2px rgba(14, 55, 35, 0.05);
    --shadow-md: 0 6px 24px rgba(14, 55, 35, 0.09);
    --shadow-lg: 0 16px 48px rgba(14, 55, 35, 0.14);

    /* Motion, one easing curve and two durations across the site */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 0.18s;
    --dur: 0.28s;

    --measure: 62ch;

    /* Hero treatment, shared by the homepage and every inner page so the two
       can't drift apart. */
    --hero-height: 92svh;
    --hero-height-sm: 94svh;
    --hero-scrim:
        linear-gradient(to top,
            rgba(6, 22, 14, 0.94) 0%,
            rgba(6, 22, 14, 0.72) 34%,
            rgba(6, 22, 14, 0.5) 62%,
            rgba(6, 22, 14, 0.55) 100%),
        rgba(6, 22, 14, 0.28);
}

/* ─── EYEBROW ────────────────────────────────────────────
   One treatment for all six historic variants: slightly larger and heavier
   than the old 10px, with a short rule that ties it to the heading below. */
.green-eyebrow,
.location-eyebrow,
.hours-eyebrow,
.ck-eyebrow,
.ck-eyebrow-dark,
.reviews-label {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-family: var(--font-family-base);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-text-accent);
}

.green-eyebrow::after,
.location-eyebrow::after,
.hours-eyebrow::after,
.ck-eyebrow::after,
.ck-eyebrow-dark::after,
.reviews-label::after {
    content: "";
    flex: 0 0 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* Centred headers get the rule on both sides instead. */
.deals-header .reviews-label,
.events-header .reviews-label,
.hours-section .hours-eyebrow,
.location-header .location-eyebrow {
    justify-content: center;
}

.deals-header .reviews-label::before,
.events-header .reviews-label::before,
.hours-section .hours-eyebrow::before,
.location-header .location-eyebrow::before {
    content: "";
    flex: 0 0 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

/* The eyebrow's own rule replaces the old accent dash underneath headings. */
.reviews-divider {
    width: 34px;
    height: 1px;
    background: var(--color-text-accent);
    border-radius: 0;
    opacity: 0.5;
}

/* ─── HEADINGS ───────────────────────────────────────────
   Bring the section headings onto one display scale: same face, same weight,
   same optical tightening. Sizes were previously set per section. */
.deals-title,
.hours-title,
.location-title,
.green-heading,
.ck-cakes-title,
.ck-extras-heading,
.wine-club-banner__heading,
.walk-banner__heading {
    font-family: var(--font-family-display);
    font-size: var(--step-3);
    font-weight: 400;
    letter-spacing: -0.01em;
    line-height: 1.14;
    text-wrap: balance;
}

/* Long headings shouldn't run the full width of a wide screen. */
.deals-title,
.hours-title,
.location-title { max-width: 22ch; }

/* ─── BODY COPY ──────────────────────────────────────────
   Cap line length so paragraphs stay readable on wide screens. */
.location-body,
.ck-extras-body,
.deal-desc {
    font-size: var(--step-0);
    line-height: 1.8;
    max-width: var(--measure);
}

/* ─── SURFACES ───────────────────────────────────────────
   One radius and one shadow family instead of a mix of 4/6/8/10/12px. */
.deal-card,
.hour-card,
.ck-cake-card,
.ck-tasting-card,
.product-card,
.checkout-panel {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.deal-card:hover,
.ck-cake-card:hover,
.product-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

/* ─── MOTION CONSISTENCY ─────────────────────────────────
   Everything eases the same way, so the site feels like one piece. */
a,
button,
.kg-btn,
.filter-tab,
.product-card__link,
.shop-category-tile {
    transition-timing-function: var(--ease);
}

/* ─── DISPLAY TYPE ───────────────────────────────────────
   The site now runs on Montserrat alone. A geometric sans needs a lighter
   weight and tighter tracking than the old serif did to read as "display"
   rather than "bold paragraph" at large sizes. Italics stay available for
   emphasis. */
.hm-hero__title,
.hm-title,
.hm-statement p,
.hm-feature__title,
.hm-visit__title,
.ab-heading,
.shop-hero__title,
.shop-club-banner__title,
.shop-promo__title,
.home-shop__title,
.single-product__name,
.deals-title,
.hours-title,
.location-title,
.green-heading,
.ck-cakes-title,
.ck-extras-heading {
    font-weight: 300;
    letter-spacing: -0.025em;
}

/* Smaller headings hold up better at 400. */
.product-card__name,
.hm-tile__name,
.ab-person__name,
.checkout-panel__title,
.kg-cart-drawer__title,
.related-section__title,
.product-section__title {
    font-weight: 400;
    letter-spacing: -0.015em;
}

/* ─── MOBILE OVERFLOW FIXES ──────────────────────────────
   The nav logo is width:100%, which on a narrow screen made the logo + basket
   + burger total wider than the viewport and produced ~38px of horizontal
   scroll on the whole page. Cap the logo instead. */
@media (max-width: 560px) {
    .navbar > ul { max-width: 100%; }

    .logomark {
        width: auto;
        max-width: 60vw;
    }

    .logomark-img {
        width: auto;
        max-width: 100%;
        max-height: 44px;
    }

    .menu-button > a { padding: 0 0.7em; }
}

/* The review pagination dots could out-run the viewport once there were
   enough reviews. */
.reviews-dots {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: 0.4rem;
}

/* ─── SCROLL PROGRESS ────────────────────────────────────
   A hairline of brand orange along the bottom edge of the fixed navbar that
   fills as you move down the page. */
.scroll-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: rgba(255, 254, 247, 0.1);
    overflow: hidden;
    pointer-events: none;
}

.scroll-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--color-bg-accent);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-progress span { transition: none; }
}