/**
 * Our Locations page.
 *   - Optional full-width hero banner (headings + height are ACF-controlled).
 *   - Two stacked, equal-height 50/50 rows below it:
 *       Row 1: hero image (left)  | opening hours (right)
 *       Row 2: address     (left) | Google Map embed (right)
 *
 * Rendered by [charlies_locations] (class-charlies-locations.php).
 */

/* ── Full-bleed white stage ───────────────────────────────────────────────
   The theme wraps page content in a padded container; break out with the
   100vw / margin trick so the rows span edge-to-edge. */
.cfc-locations {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    display: flex;
    flex-direction: column;
    background-color: #fff;
    overflow: hidden; /* clip the slide-in transforms so they can't cause h-scroll */
}

/* Use Arial for every piece of text on this page, overriding the theme fonts. */
.cfc-locations,
.cfc-locations *,
.cfc-locations-hero,
.cfc-locations-hero * {
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* ── Optional hero banner (full-width, above the rows) ─────────────────────
   Same treatment as the FAQ / About heroes. Header font sizes come from inline
   CSS vars set per device; blank fields fall through to these clamp() defaults. */
.cfc-locations-hero {
    position: relative;
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    /* Editor-controlled gap between the hero and the first row below it. */
    margin-bottom: var(--lhero-gap, 0);
    min-height: var(--lhero-h, 56vh);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center; /* matches the FAQ / About / Menu heroes */
    padding: clamp(40px, 8vh, 90px) clamp(24px, 6vw, 96px);
    color: var(--lhero-color, #fff);
    background-color: #111;
    background-image: var(--lhero-img);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
}

.cfc-locations-hero--noimg {
    background-image: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
}

.cfc-locations-hero__overlay {
    position: absolute;
    inset: 0;
    /* Left-to-right darkening so the text side stays legible over the photo. */
    background:
        linear-gradient(90deg,
            rgba(0, 0, 0, 0.35) 0%,
            rgba(0, 0, 0, 0.12) 45%,
            rgba(0, 0, 0, 0) 70%),
        var(--lhero-tint, #000);
    opacity: var(--lhero-tint-alpha, 0.45);
    pointer-events: none;
}

.cfc-locations-hero__content {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
}

.cfc-locations-hero__eyebrow {
    display: block;
    margin-bottom: 0.9em;
    color: var(--lhero-color, #fff);
    font-size: var(--lhero-eyebrow-size, clamp(0.78rem, 1.4vw, 0.95rem));
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.9;
}

.cfc-locations-hero__title {
    margin: 0;
    color: var(--lhero-color, #fff); /* beats the theme's own h1 colour */
    font-size: var(--lhero-title-size, clamp(2.4rem, 6vw, 4.6rem));
    font-weight: 800;
    line-height: 1.02;
    letter-spacing: 0.01em;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* Short red accent rule under the title. */
.cfc-locations-hero__rule {
    display: block;
    width: 64px;
    height: 4px;
    margin: clamp(16px, 2vw, 24px) auto 0;
    border-radius: 4px;
    background: var(--co-accent, #ff0006);
}

.cfc-locations-hero__subtitle {
    margin: clamp(18px, 2.4vw, 28px) auto 0;
    max-width: 620px;
    color: var(--lhero-color, #fff);
    font-size: var(--lhero-subtitle-size, clamp(1rem, 1.6vw, 1.2rem));
    line-height: 1.55;
    opacity: 0.95;
}

.cfc-locations-hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: clamp(24px, 3.5vw, 40px);
}

.cfc-locations-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 15px 34px;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border: 2px solid transparent;
    transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.cfc-locations-hero__btn--primary {
    color: #fff;
    background: var(--co-accent, #ff0006);
    border-color: var(--co-accent, #ff0006);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.28);
}

.cfc-locations-hero__btn--primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.cfc-locations-hero__btn--secondary {
    color: var(--lhero-color, #fff);
    background: transparent;
    border-color: rgba(255, 255, 255, 0.7);
}

.cfc-locations-hero__btn--secondary:hover {
    transform: translateY(-2px);
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
}

@media (max-width: 720px) {
    /* Centred on mobile to match every other hero (/menu, /faqs, /our-story,
       /events) — this one was the only left-aligned one. The hero is
       border-box with min-height, so vertical padding here is only a *floor*:
       min-height 360px + align-items:center does the real spacing. Keep it
       modest or the hero overshoots 360 once the subtitle wraps at 320px. */
    .cfc-locations-hero {
        min-height: var(--lhero-h-mobile, 360px);
        margin-bottom: var(--lhero-gap-mobile, var(--lhero-gap, 0));
        padding: 24px clamp(20px, 6vw, 40px);
        justify-content: center;
        text-align: center;
        /* Use the mobile-specific image (falls back to the desktop one). */
        background-image: var(--lhero-img-mobile, var(--lhero-img));
    }
    .cfc-locations-hero__content {
        margin-inline: auto;
    }
    /* Mobile only — the red accent rule is dropped here; desktop keeps it. */
    .cfc-locations-hero__rule {
        display: none;
    }
    .cfc-locations-hero__eyebrow {
        font-size: var(--lhero-eyebrow-size-m, clamp(0.72rem, 3vw, 0.88rem));
    }
    .cfc-locations-hero__title {
        font-size: var(--lhero-title-size-m, clamp(2rem, 9vw, 3.2rem));
        /* Site-wide mobile hero title standard: 40px / 900. Size already
           resolves to 40px from the ACF var; only the weight was out of step
           (800 against 900 everywhere else). */
        font-weight: 900;
    }
    .cfc-locations-hero__subtitle {
        font-size: var(--lhero-subtitle-size-m, clamp(0.95rem, 4vw, 1.1rem));
    }
    /* Two columns rather than full-width stacked: the pair took 120px of a
       360px hero on their own. Equal-width so they share the row evenly. */
    .cfc-locations-hero__actions {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 10px;
    }
    .cfc-locations-hero__btn {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        /* Smaller than the desktop 15px/34px pill so both fit a 272px row at
           320px; min-height keeps the 44px tap target. */
        padding: 11px 8px;
        font-size: 0.78rem;
        letter-spacing: 0.02em;
        min-height: 44px;
        white-space: nowrap;
    }
}

/* ── 50/50 row ────────────────────────────────────────────────────────── */
.cfc-locations__split {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* both halves match the taller side */
}

/* Second row sits under the first with a hairline divider between them. */
.cfc-locations__split--map {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.cfc-locations__split > * {
    flex: 1 1 50%;
    min-width: 300px;
    box-sizing: border-box;
}

/* ── Image half (row 1 left) — same height as every other half ────────── */
.cfc-locations__media {
    position: relative;
    height: var(--loc-row-h, 600px);
    background-color: #111;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.cfc-locations--noimg .cfc-locations__media {
    background-image: linear-gradient(135deg, #1a1a1a 0%, #2c2c2c 100%);
}

.cfc-locations__overlay {
    position: absolute;
    inset: 0;
    background: var(--loc-tint, #000);
    opacity: var(--loc-tint-alpha, 0.35);
    pointer-events: none;
}

/* ── Map half (row 2 right) — same height as every other half ─────────── */
.cfc-locations__map {
    position: relative;
    height: var(--loc-row-h, 600px);
    background: #f2f2f2;
}

.cfc-locations__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Text panels (row 1 right, row 2 left) ────────────────────────────────
   Fixed to the row height so the text half is exactly as tall as its
   image/map half — no white gap under the shorter side. */
.cfc-locations__panel {
    display: flex;
    flex-direction: column;
    height: var(--loc-row-h, 600px);
    padding: clamp(36px, 5vw, 72px) clamp(24px, 5vw, 80px);
    color: #111;
    text-align: center;
    background: #fff;
}

/* Uppercase / weight 900 / tight tracking is the shared section-heading
   treatment across the site (.cfc-about-row__heading, .cfc-event-row__heading),
   so "Opening Hours" and "Visit Us" read as the same rank of header as the
   About and Events pages. */
.cfc-locations__panel-title {
    margin: 0 0 clamp(18px, 2.4vw, 28px);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.02;
}

.cfc-locations__panel-title::after {
    content: "";
    display: block;
    width: 46px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 3px;
    background: var(--co-accent, #ff0006);
}

/* ── Address (Visit Us panel) ─────────────────────────────────────────────
   The panel centres its whole content group (address + button + parking) so
   they read together rather than the address floating in the middle. */
.cfc-locations__panel--address {
    justify-content: center;
}

.cfc-locations__address {
    font-style: normal;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: clamp(1.05rem, 1.5vw, 1.35rem);
    line-height: 1.5;
    letter-spacing: 0.01em;
}

/* Square, flat and uppercase — the pill/shadow/icon treatment is gone. */
.cfc-locations__directions {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    align-self: center;
    margin-top: clamp(22px, 3vw, 32px);
    padding: 13px 26px;
    border-radius: 0;
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background: var(--co-accent, #ff0006);
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Hidden rather than pulled from the markup, so restoring it is a one-liner.
   The 9px flex gap above collapses on its own with only one visible child. */
.cfc-locations__directions-icon {
    display: none;
}

.cfc-locations__directions:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.cfc-locations__directions-icon svg {
    width: 18px;
    height: 18px;
    display: block;
}

/* ── Parking block (under the address) ────────────────────────────────── */
.cfc-locations__parking {
    margin-top: clamp(26px, 3.5vw, 40px);
}

.cfc-locations__subtitle {
    margin: 0 0 8px;
    font-size: clamp(1.05rem, 1.6vw, 1.3rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.15;
}

.cfc-locations__subtext {
    max-width: 420px;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    color: rgba(0, 0, 0, 0.7);
}

.cfc-locations__subtext p {
    margin: 0 0 0.8em;
}

.cfc-locations__subtext p:last-child {
    margin-bottom: 0;
}

/* ── Opening hours ────────────────────────────────────────────────────── */
/* Scoped with .cfc-locations for specificity (0,2,0): Betheme styles content
   lists via `.the_content_wrapper ul { margin: 0 0 15px 30px }` (0,1,1), which
   outranked a bare .cfc-locations__hours (0,1,0). That 30px indent shifted the
   list right while width:100% kept it full-width, so every row ran ~30px past
   the panel and the day/time values were clipped by .cfc-locations'
   overflow:hidden. */
.cfc-locations .cfc-locations__hours {
    list-style: none;
    margin: auto 0 0;
    padding: 0;
    width: 100%;
    max-width: 560px;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
}

.cfc-locations__hours-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 2px;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

.cfc-locations__hours-row:last-child {
    border-bottom: 0;
}

.cfc-locations__hours-day {
    font-weight: 600;
    letter-spacing: 0.01em;
}

.cfc-locations__hours-time {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Open days: the day name gets the same near-black as its time, so the whole
   row reads as one unit against the muted closed days. Stated explicitly
   rather than left to inherit — the theme was tinting the inherited colour. */
.cfc-locations__hours-row.is-open .cfc-locations__hours-day,
.cfc-locations__hours-row.is-open .cfc-locations__hours-time {
    color: #111;
    font-weight: 700;
}

.cfc-locations__hours-row.is-closed .cfc-locations__hours-day,
.cfc-locations__hours-row.is-closed .cfc-locations__hours-time {
    color: rgba(0, 0, 0, 0.55);
    font-weight: 500;
}

.cfc-locations__hours-note {
    margin: clamp(18px, 2.4vw, 26px) 0 0;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
}

/* ── Responsive: each 50/50 stacks into image-over-text / text-over-map ── */
@media (max-width: 760px) {
    .cfc-locations__split > * {
        flex: 1 1 auto;
        width: 100%;
        min-width: 0;
    }
    /* Shopfront photo is desktop-only: on mobile it sat between the opening
       hours and the Visit Us panel adding height without adding information,
       so the first row becomes hours-only. (Desktop keeps its
       --loc-hero-h-mobile / "Image Height — Mobile" field unused now.) */
    .cfc-locations__media {
        display: none;
    }
    .cfc-locations__map {
        height: var(--loc-map-h-mobile, 320px);
    }
    /* Stacked halves size to their own content — drop the fixed row height. */
    .cfc-locations__panel {
        height: auto;
    }
    /* Opening hours first, photo underneath. column-reverse rather than
       reordering the markup, so the DOM (and screen-reader/tab order) still
       reads media → hours as it does on desktop. */
    .cfc-locations__split--hero {
        flex-direction: column-reverse;
    }

    /* Everything stays centred as on desktop, parking included. The button
       takes 60% of the row rather than stretching edge-to-edge — still a
       generous tap target, but it reads as a button rather than a bar. */
    .cfc-locations__directions {
        align-self: center;
        width: 60%;
        margin-top: 22px;
        padding-inline: 20px;
    }

    /* ── Parking sits below the map ────────────────────────────────────────
       `order` can only shuffle siblings, and the parking block is nested a
       level deeper than the map. So the address panel stops generating a box:
       its children are promoted into the row's own flex flow, becoming
       siblings of the map, and order then drops parking past it. Selectors
       still match the real DOM (display:contents changes boxes, not the tree),
       so the panel's padding has to move onto those children — which also
       leaves the map running edge-to-edge between them. */
    .cfc-locations__split--map {
        flex-direction: column;
        /* Carried over from the panel that no longer paints a box. */
        background: #fff;
        color: #111;
        text-align: center;
        /* Double gap to close the page out. The footer is a different kind of
           boundary from the ones inside the section — no divider, no heading,
           just the next block of text — so the standard gap read as too tight
           there. Padding on the row, not margin on the parking block: as the
           last flex item its bottom margin is dropped from the row's height. */
        padding-bottom: var(--loc-gap-m);
    }
    .cfc-locations__panel--address {
        display: contents;
    }
    .cfc-locations__panel--address > * {
        order: 1;
        margin-inline: clamp(24px, 5vw, 80px);
    }
    .cfc-locations__panel--address > .cfc-locations__panel-title {
        /* -4px for the same glyph leading as the hours title. */
        margin-top: calc(var(--loc-gap-m) - 4px);
    }
    .cfc-locations__map {
        order: 2;
        margin-top: var(--loc-gap-m);
    }
    .cfc-locations__panel--address > .cfc-locations__parking {
        order: 3;
        /* -3px for the leading above the smaller "Parking" heading. */
        margin-top: calc(var(--loc-gap-m) - 3px);
        /* No margin-bottom here — as the last flex item its bottom margin is
           dropped from the row's auto height and paints nothing. The gap below
           is the theme's, trimmed to --loc-gap-m at the end of this block. */
    }

    /* ── One gap between every section boundary ────────────────────────────
       Each boundary used to be set independently (hero margin + panel padding
       stacked to ~60px, the panel padded 36px, the map and parking 30px), so
       nothing lined up down the page. They all read from --loc-gap-m now;
       change that one value to retune the whole page.

       The per-boundary offsets below compensate for ink that sits inside its
       own box — glyph leading above a heading, the 6px row padding under the
       last opening-hours row — so what matches is the *visible* white, which
       is what's actually being looked at. */
    .cfc-locations {
        --loc-gap-m: 40px;
    }
    /* The hero's ACF gap stacked on top of the panel padding below it. Zero it
       so the panel owns the whole boundary — see the note in the summary about
       the "Space Below Hero — Mobile" field. */
    .cfc-locations-hero {
        margin-bottom: 0;
    }
    .cfc-locations__panel {
        /* -4px: the title's cap-height starts a few px below its box top. */
        padding-top: calc(var(--loc-gap-m) - 4px);
        /* -6px: the last hours row carries 6px of its own bottom padding. */
        padding-bottom: calc(var(--loc-gap-m) - 6px);
    }

    /* ── Foot of the page ──────────────────────────────────────────────────
       The page builder nests this section eight wrappers deep, and the ones
       carrying trailing space (WPBakery's .wpb_text_column margin, the section
       wrapper's padding) added ~50px below it — showing #Content's #fcfcfc as
       a stray grey band under a page that is otherwise edge-to-edge white.
       Paint that white, and zero the trailing space on the wrappers that
       actually contain this section, so the footer's own top padding is left
       as the final gap and it lands on --loc-gap-m like the rest.
       :has() keeps every other page's builder spacing untouched. */
    body #Content {
        background-color: #fff;
    }
    .section_wrapper:has(.cfc-locations),
    .the_content_wrapper:has(.cfc-locations),
    .wpb-content-wrapper:has(.cfc-locations),
    .vc_row:has(.cfc-locations),
    .wpb_column:has(.cfc-locations),
    .vc_column-inner:has(.cfc-locations),
    .wpb_wrapper:has(.cfc-locations),
    .wpb_text_column:has(.cfc-locations) {
        margin-bottom: 0;
        padding-bottom: 0;
    }
}

/* ── Entrance animations ──────────────────────────────────────────────────
   Each row's halves slide + fade in as the row scrolls into view: left halves
   from the left, right halves from the right, text following its media half.
   The hidden start-state only applies once JS has added .is-anim-ready, so the
   page stays fully visible if JS is disabled. Reduced-motion users skip it. */
@media (prefers-reduced-motion: no-preference) {
    .cfc-locations.is-anim-ready .cfc-locations__media,
    .cfc-locations.is-anim-ready .cfc-locations__map,
    .cfc-locations.is-anim-ready .cfc-locations__panel {
        opacity: 0;
        transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
        will-change: opacity, transform;
    }
    .cfc-locations.is-anim-ready .cfc-locations__media,
    .cfc-locations.is-anim-ready .cfc-locations__panel--address {
        transform: translateX(-44px);
    }
    .cfc-locations.is-anim-ready .cfc-locations__panel--hours,
    .cfc-locations.is-anim-ready .cfc-locations__map {
        transform: translateX(44px);
    }

    /* Settle into place once the row is visible. */
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__media,
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__map,
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__panel {
        opacity: 1;
        transform: none;
    }
    /* Text half follows its image/map half in slightly. */
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__panel {
        transition-delay: 0.12s;
    }

    /* Cascade the opening-hours rows in after the panel arrives. */
    .cfc-locations.is-anim-ready .cfc-locations__hours-row {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.5s ease, transform 0.5s ease;
    }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row {
        opacity: 1;
        transform: none;
    }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(1) { transition-delay: 0.22s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(2) { transition-delay: 0.29s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(3) { transition-delay: 0.36s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(4) { transition-delay: 0.43s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(5) { transition-delay: 0.50s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(6) { transition-delay: 0.57s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(7) { transition-delay: 0.64s; }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__hours-row:nth-child(n+8) { transition-delay: 0.71s; }
}

/* On mobile the address panel is display:contents (see above), so it paints
   nothing for opacity/transform to act on and the rules above would silently
   skip it — the map would slide in beside text that was already sitting there.
   Hand the entrance to the children that do render. */
@media (prefers-reduced-motion: no-preference) and (max-width: 760px) {
    .cfc-locations.is-anim-ready .cfc-locations__panel--address > * {
        opacity: 0;
        transform: translateX(-44px);
        transition: opacity 0.75s ease, transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1);
        transition-delay: 0.12s;
        will-change: opacity, transform;
    }
    .cfc-locations.is-anim-ready .cfc-locations__split.is-visible .cfc-locations__panel--address > * {
        opacity: 1;
        transform: none;
    }
}