/* ---------------------------------------------------------------------------
   Site location — Google Maps strip with overlaid address-and-hours card
   ---------------------------------------------------------------------------
   Rebuilds the original Flatsome UX Builder Location strip the home +
   about-us used to render inline: full-width Google Maps embed as the
   bottom layer, brand-blue card floating on the left containing the
   address and opening hours, cyan glow edges along the top and bottom.

   Lives between the page body and the global site footer (rendered by
   footer.php — applies on every page).
*/

.fz-site-location {
    position: relative;
    width: 100%;
    background: #1a1a3a; /* fallback if iframe fails to load (ad-blockers) */
}

/* ── Cyan glow edges (top + bottom) — recreates the .border-shadow look ─── */

.fz-site-location-edge {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 5px;
    background-color: #04bbd3;
    box-shadow: 0 0 45px 13px rgba(4, 187, 211, 0.45);
}

/* ── Map + card layered stage ────────────────────────────────────────────── */

.fz-site-location-stage {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
}

.fz-site-location-map {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.fz-site-location-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ── Floating address card (overlays the map on the left) ────────────────── */

.fz-site-location-card {
    position: absolute;
    top: 5%;
    left: 0;
    z-index: 1;
    width: 25%;
    min-width: 260px;
    max-width: 360px;
    height: 90%;
    padding: clamp(2.25rem, 3.5vw, 3rem) clamp(1.5rem, 2.6vw, 2.25rem) clamp(2.25rem, 3.5vw, 3rem);
    border-radius: 0 30px 30px 0;
    /* Gradient stops re-tuned 2026-06-08 for WCAG AA contrast vs white
       body text. The previous mid #0078ff (4.09:1) and end #04bbd3
       (2.32:1) both failed AA — body text on the lower half of the card
       was effectively unreadable for users with anything less than
       perfect colour vision. New stops:
         #1000bd (start) — 11.95:1 ✓AAA (unchanged, deep brand purple)
         #0050b3 (mid)   — 7.50:1 ✓AAA
         #0066cc (end)   — 5.57:1 ✓AA
       Brand identity preserved — still "deep purple → bright brand blue"
       on the diagonal — just darker enough at the bottom to clear the
       AA threshold. The bright cyan #04bbd3 still lives elsewhere on the
       site (cursor halo, glow accents, etc.) where it sits on darker
       backgrounds and isn't a contrast trap. */
    background: linear-gradient(135deg, #1000bd 0%, #0050b3 55%, #0066cc 100%);
    color: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.1rem;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
    overflow: hidden;
}
/* Extra breathing room between Location and Hours so they read as two
   distinct blocks, without inflating the gap before the CTA. */
.fz-site-location-block + .fz-site-location-block {
    margin-top: 0.85rem;
}
/* Subtle inner glow stripe across the gradient (mirrors the hero gradient
   sheen used elsewhere — keeps the card from feeling flat). */
.fz-site-location-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 80% 110%, rgba(4, 187, 211, 0.35), transparent 55%),
        radial-gradient(circle at 10% -10%, rgba(255, 255, 255, 0.12), transparent 45%);
    pointer-events: none;
    z-index: 0;
}
.fz-site-location-card > * {
    position: relative;
    z-index: 1;
}

.fz-site-location-block {
    display: flex;
    flex-direction: column;
}

.fz-site-location-heading {
    margin: 0 0 0.5rem;
    padding-bottom: 0.35rem;
    color: #ffffff;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: clamp(1.05rem, 1.55vw, 1.3rem);
    line-height: 1.1;
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    display: inline-block;
    align-self: flex-start;
}

.fz-site-location-address {
    margin: 0;
    font-style: normal;
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    line-height: 1.25;
    color: #ffffff;
    font-weight: 500;
}

.fz-site-location-access {
    margin: 0.6rem 0 0;
    font-size: clamp(0.72rem, 0.85vw, 0.82rem);
    line-height: 1.2;
    color: rgba(255, 255, 255, 0.85);
}
.fz-site-location-access-lead {
    display: block;
    font-style: italic;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 0.1rem;
}
.fz-site-location-access-body {
    display: block;
    font-weight: 400;
}

.fz-site-location-hours {
    margin: 0;
    /* 2-column grid pairs each day range with its time on the same row.
       Without this, the parent dl rules let dt/dd flow inline weirdly
       (the time of row 1 would butt up against the day of row 2). */
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    column-gap: 0.85rem;
    row-gap: 0.4rem;
    /* Match the address body — same family / weight so the card reads
       as one typographic system, not a stack of different treatments. */
    font-size: clamp(0.95rem, 1.15vw, 1.1rem);
    line-height: 1.25;
    color: #ffffff;
    font-weight: 500;
}
.fz-site-location-hours dt,
.fz-site-location-hours dd {
    margin: 0;
    color: #ffffff;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

/* "Escape Rooms Open at 11am" inline note under the hours list. */
.fz-site-location-hours-note {
    margin: 0.6rem 0 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    align-self: flex-start;
    color: #ffffff;
    font-size: clamp(0.85rem, 1vw, 0.95rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
}
.fz-site-location-hours-note i {
    font-size: 0.95rem;
    color: #ffffff;
}

/* ── Get Directions CTA — slim white pill with arrow icon ─────────────── */

.fz-site-location-directions,
.fz-site-location-directions:link,
.fz-site-location-directions:visited {
    margin-top: 1.2rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 1.15rem;
    border-radius: 999px;
    background: #ffffff;
    color: #1000bd;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 0.78rem;
    font-weight: 800;
    align-self: center;
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.22),
        0 0 0 0 rgba(4, 187, 211, 0.0);
    transition: transform 0.2s ease, box-shadow 0.25s ease, color 0.2s ease;
}
.fz-site-location-directions:hover,
.fz-site-location-directions:focus-visible {
    transform: translateY(-2px);
    color: #0c0c3e;
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        0 0 0 5px rgba(4, 187, 211, 0.32);
    outline: none;
}
.fz-site-location-directions:focus-visible {
    box-shadow:
        0 8px 22px rgba(0, 0, 0, 0.28),
        0 0 0 3px #ffffff,
        0 0 0 5px rgba(4, 187, 211, 0.85);
}
.fz-site-location-directions:active {
    transform: translateY(0);
}

.fz-site-location-directions-arrow {
    font-size: 0.78rem;
    line-height: 1;
    transition: transform 0.2s ease;
}
.fz-site-location-directions:hover .fz-site-location-directions-arrow,
.fz-site-location-directions:focus-visible .fz-site-location-directions-arrow {
    transform: translateX(3px);
}

/* ── Hide the legacy inline UX Builder location section globally ─────────
   .section.section-location is Flatsome's UX Builder Section class for the
   home + about-us inline strips. Hidden here so we don't render twice.
   Our own strip uses .fz-site-location so there's no collision. */
.section.section-location {
    display: none;
}

/* ── Tablet (721–1024px): widen card a touch — the new copy needs room ──── */

@media (min-width: 721px) and (max-width: 1024px) {
    .fz-site-location-stage {
        height: 560px;
    }
    .fz-site-location-card {
        width: 34%;
        max-width: 395px;
        padding: 1.6rem 1.4rem;
        gap: 0.9rem;
    }
}

/* ── Mobile (≤720px): stack card on top of the map ───────────────────────── */

@media (max-width: 720px) {
    .fz-site-location-stage {
        height: auto;
        display: flex;
        flex-direction: column;
    }
    .fz-site-location-map {
        position: relative;
        inset: auto;
        height: 320px;
    }
    .fz-site-location-card {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 100%;
        height: auto;
        border-radius: 0;
        padding: 2rem 1.4rem 2.25rem;
        text-align: center;
        align-items: center;
        gap: 1.3rem;
    }
    .fz-site-location-block {
        align-items: center;
    }
    .fz-site-location-hours-note,
    .fz-site-location-directions {
        align-self: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fz-site-location-directions,
    .fz-site-location-directions-icon {
        transition: none;
    }
}

.fz-site-location .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}