/* ==========================================================================
   1. Base reset
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

/* Remove WP's default 24px block-gap top margin from the page content wrapper —
   prevents a gap appearing above the hero slider on the homepage. */
.wp-site-blocks > .wp-block-post-content {
    margin-block-start: 0;
}

body {
    margin: 0;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.5;
    color: var(--wp--preset--color--body);
    background-color: var(--wp--preset--color--bg);
    -webkit-font-smoothing: antialiased;
}

/* Offset page content below the fixed header. JS measures the live height and
   sets --header-height on :root; fallback 80px covers the flash before JS runs. */
.wp-site-blocks {
    padding-top: var(--header-height, 80px);
}

/* Mobile gutters — give constrained page content breathing room on narrow viewports.
   Alignfull blocks (heroes, dark bands) are excluded so they still bleed to the edges. */
@media ( max-width: 1100px ) {
    .wp-site-blocks {
        padding-inline: 1rem;
    }
    .wp-site-blocks > .alignfull,
    .wp-site-blocks > .wp-block-template-part {
        margin-inline: -1rem;
        width: calc(100% + 2rem);
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   2. Typography
   ========================================================================== */

/* Noka — h1 only (display size justifies the uppercase weight). */
h1 {
    font-family: var(--wp--preset--font-family--heading);
    color: var(--wp--preset--color--heading);
    line-height: 1;
    text-transform: uppercase;
    margin-top: 0;
}

/* Object Sans Bold — h2–h6 (sentence case, structured copy). */
h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    color: var(--wp--preset--color--heading);
    line-height: 1.2;
    text-transform: none;
    margin-top: 0;
}

/* Roboto — body copy (long-form reading). */
body {
    font-family: var(--wp--preset--font-family--roboto);
}

p, li, td, th, blockquote {
    font-family: var(--wp--preset--font-family--roboto);
    line-height: 1.5;
}

/* Object Sans — UI elements (buttons, nav, labels, short text). */
button,
.wp-block-button__link,
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content,
input[type="submit"] {
    font-family: var(--wp--preset--font-family--body);
}

a {
    color: var(--wp--preset--color--primary);
    text-decoration: none;
}

a:hover {
    color: var(--wp--preset--color--accent);
}

/* Dark-section heading and link overrides — use .has-bg-dark-background-color on group blocks */
.has-bg-dark-background-color h1,
.has-bg-dark-background-color h2,
.has-bg-dark-background-color h3,
.has-bg-dark-background-color h4,
.has-bg-dark-background-color p,
.has-bg-dark-background-color li {
    color: var(--wp--preset--color--bg);
}

.has-bg-dark-background-color a {
    color: var(--wp--preset--color--accent);
}

.has-bg-dark-background-color a:hover {
    color: var(--wp--preset--color--bg);
}

/* Square bullets — applied to WP List blocks and any unclassed <ul> in content. */
.wp-block-list,
.wp-block-post-content ul:not([class]) {
    list-style-type: square;
}

/* ==========================================================================
   3. Layout utilities
   ========================================================================== */

/* Neutralise WP's block-gap top margin on full-width heroes/sliders so they sit
   flush with the sticky header. Target .alignfull rather than :first-child
   because the header template-part is first — the hero is second. :where() has
   zero specificity so any direct selector wins. */
.wp-site-blocks > :first-child,
.wp-site-blocks > .alignfull {
    margin-block-start: 0;
}


.alignfull {
    margin-left: calc(-1 * var(--wp--style--root--padding-right, 0px));
    margin-right: calc(-1 * var(--wp--style--root--padding-left, 0px));
    width: calc(100% + var(--wp--style--root--padding-right, 0px) + var(--wp--style--root--padding-left, 0px));
    max-width: none;
}

/* Page content vertical rhythm.
   - First constrained block on pages without a hero gets top spacing.
   - First constrained block after a full-bleed hero gets the same spacing.
   - Bottom padding gives the last section room to breathe before the footer.
   - Our Solutions child pages (tagged .is-solution-child via body_class filter)
     suppress this top gap — their hero or intro sits flush below the header. */
.wp-block-post-content > :not(.alignfull):first-child {
    margin-block-start: var(--wp--preset--spacing--xl, 4rem);
}
.wp-block-post-content > .alignfull + :not(.alignfull) {
    margin-block-start: var(--wp--preset--spacing--xl, 4rem);
}
.is-solution-child .wp-block-post-content > :not(.alignfull):first-child,
.is-solution-child .wp-block-post-content > .alignfull + :not(.alignfull),
.single-venue .wp-block-post-content > :not(.alignfull):first-child,
.single-venue .wp-block-post-content > .alignfull + :not(.alignfull) {
    margin-block-start: 0;
}
/* Pages using page-interior.html have the hero in the template, not the post content.
   When post content starts with an alignfull section (e.g. the news grid), give it spacing. */
.page-hero ~ .wp-block-post-content > .alignfull:first-child {
    margin-block-start: var(--wp--preset--spacing--lg, 3rem);
}
.wp-block-post-content {
    padding-block-end: 0;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

/* Site logo — SVGs have no intrinsic dimensions; set explicit height on the container
   so the img can fill it regardless of what WP stored in the media library. */
.wp-block-site-logo {
    flex-shrink: 0;
}

.wp-block-site-logo a {
    display: flex;
    align-items: center;
    line-height: 0;
    height: 100%;
}

.wp-block-site-logo img {
    display: block;
    width: auto;
    height: 100%;
    max-width: 260px;
    object-fit: contain;
    object-position: left center;
}

/* Header logo container — explicit height so SVG fills it */
.site-header .wp-block-site-logo {
    height: 46px;
}

.site-header {
    position: fixed !important;
    top: var(--wp-admin--admin-bar--height, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100;
    width: 100%;
    /* background set via block backgroundColor="primary" */
    padding-inline: max(2rem, calc((100% - 1310px) / 2));
    height: 80px;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
}

/* Nav links: white on dark header */
.site-header .wp-block-navigation a,
.site-header .wp-block-navigation .wp-block-navigation-item__content {
    color: var(--wp--preset--color--bg);
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--accent);
}

/* Active nav item — pill highlight (applied via nav item CSS class in Site Editor) */
.site-header .wp-block-navigation .is-cta > .wp-block-navigation-item__content {
    background-color: var(--wp--preset--color--accent);
    color: var(--wp--preset--color--primary);
    padding: 0.4em 1em;
    border-radius: 2em;
    font-weight: 700;
}

/* Scroll lock — scoped by .is-menu-open so it is safe outside the media query. */
body:has(.wp-block-navigation__responsive-container.is-menu-open) {
    overflow: hidden;
}

@media ( max-width: 1100px ) {

    /* Backdrop */
    .site-header .wp-block-navigation__responsive-close {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
    }

    /* Container — transparent full-viewport wrapper */
    .site-header .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: none !important;
        z-index: 9998 !important;
        box-shadow: none !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Drawer panel — slides in from the right */
    .site-header .wp-block-navigation__responsive-dialog {
        position: fixed !important;
        top: var(--wp-admin--admin-bar--height, 0px) !important;
        right: 0 !important;
        bottom: 0 !important;
        left: auto !important;
        width: 300px !important;
        max-width: 85vw !important;
        background: var(--wp--preset--color--primary) !important;
        z-index: 9999 !important;
        overflow-y: auto !important;
        padding: var(--header-height, 80px) 2rem 2rem !important;
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3) !important;
        animation: site-drawer-in 0.25s ease-out !important;
        display: flex !important;
        flex-direction: column !important;
    }

    @keyframes site-drawer-in {
        from { transform: translateX(100%); }
        to   { transform: translateX(0); }
    }

    /* Close button — absolute inside the dialog so it slides with the drawer
       rather than snapping. The transform on the drawer animation makes
       position:fixed behave as if it were absolute anyway, so use absolute
       intentionally and avoid the snap artefact. */
    .site-header .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        left: auto !important;
        width: 4rem !important;
        height: var(--header-height, 80px) !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 1 !important;
        background: transparent !important;
        border: 0 !important;
        cursor: pointer !important;
        color: var(--wp--preset--color--bg) !important;
    }

    /* Nav container — switch from flex row to full-width column stack */
    .site-header .is-menu-open .wp-block-navigation__container {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 0 !important;
    }

    .site-header .is-menu-open .wp-block-navigation-item {
        width: 100% !important;
    }

}

/* Nav links in the drawer — full-width stacked, white text on dark panel */
.site-header .is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    width: 100% !important;
    padding: 0.875rem 0 !important;
    text-align: left !important;
    color: var(--wp--preset--color--bg) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==========================================================================
   Mega Menu Panel
   --------------------------------------------------------------------------
   Trigger: add CSS classes "is-mega is-mega-{children|venues|posts}" to a
   navigation-submenu item in the Site Editor. The PHP filter in functions.php
   replaces the submenu <ul> contents with rich cards; these rules style them.
   ========================================================================== */

/* Panel uses position: fixed with explicit left/right insets — the inset
   calc gives a 1310px-wide centered panel on viewports ≥ 1310 + 4rem, scaling
   down with 2rem gutters on narrower screens. !important on width / min-width
   because WordPress nav core CSS sets min-width on submenu containers which
   was stretching the panel to full viewport. Padding reduced 3rem → 2rem for
   a more compact panel; line-clamp on excerpts (below) keeps card height
   consistent regardless of excerpt length. */
.wp-block-navigation .has-child.is-mega > .wp-block-navigation__submenu-container {
    position: fixed !important;
    top: calc(var(--wp-admin--admin-bar--height, 0px) + 80px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: min(1310px, calc(100vw - 4rem)) !important;
    min-width: 0 !important;
    max-width: none !important;
    margin-inline: auto !important;
    display: grid;
    gap: var(--wp--preset--spacing--md, 2rem);
    padding: var(--wp--preset--spacing--md, 2rem);
    background-color: var(--wp--preset--color--bg);
    color: var(--wp--preset--color--body);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    list-style: none;
    z-index: 99;
}

/* Source-specific column counts. */
.wp-block-navigation .is-mega-venues   > .wp-block-navigation__submenu-container { grid-template-columns: repeat(4, 1fr); }
.wp-block-navigation .is-mega-children > .wp-block-navigation__submenu-container { grid-template-columns: repeat(4, 1fr); }
.wp-block-navigation .is-mega-posts    > .wp-block-navigation__submenu-container { grid-template-columns: repeat(4, 1fr); }


/* Panel item — reset WP submenu default list-item styling. */
.mega-panel__item {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mega-panel__link {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--wp--preset--color--body) !important;
    text-decoration: none;
    height: 100%;
}

.mega-panel__link:hover {
    color: var(--wp--preset--color--primary) !important;
}

.mega-panel__image {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--wp--preset--color--border);
}

.mega-panel__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.mega-panel__link:hover .mega-panel__image img {
    transform: scale(1.03);
}

.mega-panel__title {
    display: block;
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
    font-size: var(--wp--preset--font-size--md, 1rem);
    color: var(--wp--preset--color--heading);
    line-height: 1.25;
    margin: 0;
}

.mega-panel__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--wp--preset--font-size--sm, 0.875rem);
    color: var(--wp--preset--color--muted);
    line-height: 1.4;
    margin: 0;
}
.mega-panel__link:hover .mega-panel__title {color:var(--wp--preset--color--accent) !important;}


/* Desktop: invisible ::after bridge below each mega <li> closes the pixel gap
   between the nav item bottom and the fixed panel top. Because ::after is part
   of the <li> element's hit area, the browser won't fire mouseleave while the
   mouse is traversing the gap — keeping the panel open. */
@media ( min-width: 1101px ) {
    .site-header .wp-block-navigation-item.has-child.is-mega {
        position: relative;
    }
    .site-header .wp-block-navigation-item.has-child.is-mega::after {
        content: '';
        position: absolute;
        top: 100%;
        left: -2rem;
        right: -2rem;
        height: 40px;
    }
}

/* Hamburger breakpoint override — show burger from 782px up to 1100px.
   WP core shows the full nav above 782px; we override that range. */
@media ( min-width: 783px ) and ( max-width: 1100px ) {
    .site-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
        display: none !important;
    }
    .site-header .wp-block-navigation__responsive-container-open {
        display: flex !important;
        color: var(--wp--preset--color--bg);
    }
}

/* Hamburger button hover/focus */
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:focus-visible {
    color: var(--wp--preset--color--accent);
}

/* Mobile — hide mega panel dynamic content entirely; parent items remain plain links. */
@media ( max-width: 1100px ) {
    .wp-block-navigation .has-child.is-mega > .wp-block-navigation__submenu-container {
        display: none !important;
    }
}

/* ==========================================================================
   5. Footer
   ========================================================================== */

.site-footer {
    /* background set via block backgroundColor="footer-bg" */
    color: var(--wp--preset--color--bg);
    padding: 2.5rem 2rem 1.5rem;
}

.site-footer a {
    color: var(--wp--preset--color--bg);
    opacity: 0.8;
    text-decoration: none;
}

.site-footer a:hover {
    opacity: 1;
    color: var(--wp--preset--color--accent);
}

.footer-aoc-heading {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
    text-align: center;
}

.footer-aoc-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.55);
    max-width: 720px;
    line-height: 1.5;
    text-align: center;
    margin-inline: auto;
}

.footer-divider {
    border-color: rgba(255, 255, 255, 0.12) !important;
    margin-block-start: var(--wp--preset--spacing--md, 2rem);
    margin-block-end: 0;
}

.footer-copyright {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.footer-nav .wp-block-navigation-item__content {
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.footer-social .wp-block-social-link {
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.footer-social .wp-block-social-link:hover {
    opacity: 1;
}

/* ==========================================================================
   Instagram Feed (template-part)
   --------------------------------------------------------------------------
   Section above the dark footer on most templates. Renders the Smash Balloon
   [instagram-feed] shortcode — the plugin's own styles handle the grid; we
   only style the heading and the CTA button beneath.
   ========================================================================== */

.section-instagram {
    text-align: center;
}

.section-instagram__heading {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--wp--preset--color--heading);
    margin: 0 0 var(--wp--preset--spacing--md, 2rem);
}

/* Smash Balloon container: cap width and centre so the feed sits within the
   page content area on wide screens. The plugin itself uses 100% by default. */
.section-instagram #sb_instagram,
.section-instagram .sbi_feed {
    max-width: var(--wp--style--global--content-size, 1310px);
    margin-inline: auto;
}

.section-instagram__cta .wp-block-button__link {
    padding: 0.6em 1.6em;
    font-weight: 700;
}

/* Smash Balloon "Follow Us" button — override plugin's inline background style
   and match the site's pill-outline button pattern. */
#sbi_load {
    text-align: center;
    margin-top: var(--wp--preset--spacing--md);
}

#sbi_load p {
    margin: 0;
}

/* <br> elements the plugin injects inside the button markup */
#sbi_load .sbi_follow_btn.sbi_custom br {
    display: none;
}

/* Prefix with #sbi_load (ID) to beat Smash Balloon's #sb_instagram .sbi_follow_btn a rule */
#sbi_load .sbi_follow_btn.sbi_custom a {
    display: inline-flex !important;
    align-items: center;
    gap: 0.5em;
    background: transparent !important;
    border: 2px solid var(--wp--preset--color--primary) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--wp--preset--color--primary) !important;
    font-family: var(--wp--preset--font-family--body);
    font-size: var(--wp--preset--font-size--sm);
    font-weight: 700;
    line-height: 1;
    padding: 0.75em 1.6em !important;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease !important;
}

#sbi_load .sbi_follow_btn.sbi_custom a:hover,
#sbi_load .sbi_follow_btn.sbi_custom a:focus {
    background: var(--wp--preset--color--primary) !important;
    color: var(--wp--preset--color--bg) !important;
    box-shadow: none !important;
}

/* SVG icon inherits button colour via currentColor */
#sbi_load .sbi_follow_btn.sbi_custom .svg-inline--fa {
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
    flex-shrink: 0;
}

/* ==========================================================================
   6. Component / block overrides
   ========================================================================== */

/* --- Hero title — two-tone last-word treatment --- */

/* Last word wraps to its own line and renders in accent cyan */
.hero-title__accent {
    color: var(--wp--preset--color--accent);
    display: block;
}

/* --- Full-bleed section default padding ---
   Any alignfull group/cover with a background gets vertical breathing room
   unless overridden by an inline style on the block. */
.wp-block-group.alignfull.has-background {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Inner columns inside story cover sections */
.story-section .wp-block-cover__inner-container > .wp-block-columns {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* --- Our Story page sections --- */

/* Eyebrow label: VISION / MISSION / SUSTAINABILITY */
.story-label {
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--wp--preset--color--accent);
    margin-bottom: 0.75rem;
}

/* Story cover sections — background bleeds full width, content constrained to 1310px */
.story-section .wp-block-cover__inner-container {
    max-width: var(--wp--style--global--content-size, 1310px);
    margin-inline: auto;
    width: 100%;
    padding-inline: 2rem;
    box-sizing: border-box;
}

/* Values section — vertical "OUR VALUES" sidebar label */
.values-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
}

.values-label-col {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 2px solid rgba(255, 255, 255, 0.15);
    padding-right: 2rem;
    min-height: 300px;
}

/* --- Noka heading block style variant --- */

.is-style-noka {
    font-family: var(--wp--preset--font-family--heading) !important;
    text-transform: uppercase !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}

/* --- News section (homepage latest posts) --- */

.section-news {
    padding: var(--wp--preset--spacing--xl) 0;
    background-color: var(--wp--preset--color--bg);
}

/* --- News card grid --- */

/* Base card styles: news_grid = column-wrapped (news page), --3col/4col = standalone query. */
.news_grid .wp-block-post,
.news-grid--3col .wp-block-post,
.news-grid--4col .wp-block-post {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    height: 100%;
}

.news_grid .wp-block-post-title,
.news-grid--3col .wp-block-post-title,
.news-grid--4col .wp-block-post-title {
    font-size: var(--wp--preset--font-size--md);
    line-height: 1.25;
    margin: 0;
}

.news_grid .wp-block-post-excerpt,
.news-grid--3col .wp-block-post-excerpt,
.news-grid--4col .wp-block-post-excerpt {
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--wp--preset--font-size--sm);
    line-height: 1.55;
    color: var(--wp--preset--color--muted);
    margin: 0;
}

.news_grid .wp-block-post-excerpt__more-text,
.news-grid--3col .wp-block-post-excerpt__more-text,
.news-grid--4col .wp-block-post-excerpt__more-text {
    text-decoration: underline;
    color: inherit;
}

/* Date pinned to bottom with top and bottom border — no separator block needed. */
.news_grid .wp-block-post-date,
.news-grid--3col .wp-block-post-date,
.news-grid--4col .wp-block-post-date {
    margin-top: auto;
    padding-block: 0.5rem;
    border-top: 1px solid var(--wp--preset--color--border);
    border-bottom: 1px solid var(--wp--preset--color--border);
    text-align: center;
    color: var(--wp--preset--color--muted);
    font-size: var(--wp--preset--font-size--sm);
}

/* Zero out WP's default 24px grid gap — padding-inline on items handles column spacing. */
.news-grid--3col .wp-block-post-template,
.news-grid--4col .wp-block-post-template {
    column-gap: 0;
}

/* Column dividers — all items get border-left, matching child-page-card pattern. */
.news-grid--3col .wp-block-post,
.news-grid--4col .wp-block-post {
    border-left: 1px solid var(--wp--preset--color--border);
    padding-inline: 1rem;
}

/* --- Gallery section --- */

.section-gallery {
    padding: var(--wp--preset--spacing--xl) 0;
}

/* --- Solutions / Venue Portfolio child-pages grid --- */

.venueslive-child-pages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 0;
    row-gap: var(--wp--preset--spacing--lg, 2.5rem);
}

.child-page-card {
    --card-accent: var(--wp--preset--color--accent);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--wp--preset--color--border);
    padding-inline: 1rem;
}


.child-page-card__image-link {
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    margin-bottom: 1rem;
}

.child-page-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.child-page-card:hover .child-page-card__image {
    transform: scale(1.03);
}

.child-page-card__content {
    display: flex;
    flex-direction: column;
    flex: 1;
}


.child-page-card__logo-link {
    display: block;
    margin-bottom: 0.75rem;
    line-height: 0;
}

/* Covers both inline <svg> and fallback <img> */
.child-page-card__logo {
    display: block;
    max-width: 200px;
    width: 100%;
    height: auto;
    max-height: 56px;
    /* img fallback sizing */
    object-fit: contain;
    object-position: left center;
}

/* The _REV logos use two classes: cls-1 (white) = "VENUESLIVE", cls-2 (service colour) = service name.
   cls-1 → primary navy; cls-2 → solution accent colour (set via solution_accent_colour post meta). */
.child-page-card__logo .cls-1 {
    fill: var(--wp--preset--color--primary) !important;
}

.child-page-card__logo .cls-2 {
    fill: var(--card-accent) !important;
}

.child-page-card__excerpt {
    font-size: var(--wp--preset--font-size--sm);
    color: var(--wp--preset--color--muted);
    margin: 0 0 1rem;
    flex: 1;
}

.child-page-card__cta {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--card-accent);
    text-decoration: none;
    align-self: flex-start;
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
}

.child-page-card__cta:hover {
    opacity: 0.75;
}

/* --- Timeline (Why Us page) --- */

.venueslive-timeline {
    position: relative;
    padding: 2rem 0;
}

.venueslive-timeline::before {
    content: '';
    position: absolute;
    left: 120px;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: var(--wp--preset--color--border);
}

.timeline-event {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 2rem;
    padding: 0 0 2.5rem 2.5rem;
    position: relative;
}

.timeline-event::before {
    content: '';
    position: absolute;
    left: 112px;
    top: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--primary);
    border: 3px solid var(--wp--preset--color--bg);
    box-shadow: 0 0 0 2px var(--wp--preset--color--primary);
}

.timeline-event__year {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--primary);
    font-weight: 700;
    padding-top: 2px;
    text-align: right;
}

.timeline-event__title {
    font-family: var(--wp--preset--font-family--heading);
    font-size: var(--wp--preset--font-size--lg);
    color: var(--wp--preset--color--heading);
    margin: 0 0 0.5rem;
}

.timeline-event__description {
    color: var(--wp--preset--color--body);
    margin: 0;
}

/* --- Cool Timeline Pro — VL Brand (Our Story page) --- */

/* Override CSS custom properties set by the plugin's inline <style> on .ctl-wrapper */
.ctl-wrapper {
    --ctw-ybx-bg:                var(--wp--preset--color--primary);
    --ctw-ybx-text-color:        var(--wp--preset--color--bg);
    --ctw-line-bg:               var(--wp--preset--color--accent);
    --ctw-line-filling-color:    var(--wp--preset--color--accent);
    --ctw-cbx-title-font-family: 'Object Sans', Arial, sans-serif;
    --ctw-cbx-title-font-weight: 700;
    --ctw-cbx-title-font-size:   1rem;
    --ctw-cbx-date-font-family:  'Object Sans', Arial, sans-serif;
    --ctw-cbx-date-font-weight:  500;
    --ctw-cbx-date-font-size:    0.875rem;
}

/* Plugin's light-skin rule resets first/second story colours to #aeaeae.
   Adding .ctl-design-7 gives us higher specificity to override it. */
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-7.light-skin {
    --ctw-first-story-color:  var(--wp--preset--color--primary);
    --ctw-second-story-color: var(--wp--preset--color--primary);
}

/* Year box font */
.ctl-wrapper .ctl-year-text span {
    font-family: var(--wp--preset--font-family--body);
    font-weight: 700;
}

/* Dot — plugin forces #aeaeae with !important on light-skin, so we match and override */
.ctl-wrapper .ctl-horizontal-timeline.light-skin .ctl-icondot,
.ctl-wrapper .ctl-horizontal-timeline.ctl-design-7.light-skin .ctl-icondot {
    background: var(--wp--preset--color--accent) !important;
}

/* Title link — plugin forces #aeaeae with !important on light-skin design-7 */
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7.light-skin .ctl-story .ctl-title a,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7.light-skin .ctl-story .ctl-title a:hover {
    color: var(--wp--preset--color--primary) !important;
    font-family: var(--wp--preset--font-family--body);
    text-decoration: none;
    transition: opacity 0.2s ease;
}
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7.light-skin .ctl-story .ctl-title a:hover {
    opacity: 0.7;
}

/* Arrow gradient (dot → content) — plugin forces grey gradient with !important */
.ctl-wrapper .ctl-horizontal-timeline.light-skin.ctl-design-7 .ctl-arrow {
    background: linear-gradient(to bottom, var(--wp--preset--color--accent) 0, transparent 100%) !important;
}

/* Month / date label above the dot */
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-label-big,
.ctl-wrapper .ctl-horizontal-wrapper.ctl-design-7 .ctl-label-big a {
    color: var(--wp--preset--color--muted) !important;
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-decoration: none;
}

/* Popup modal */
.ctl_popup_container {
    background: var(--wp--preset--color--bg);
}
.ctl_popup_title {
    color: var(--wp--preset--color--heading);
    font-family: var(--wp--preset--font-family--body);
    font-size: 1.25rem;
    font-weight: 700;
}
.ctl_popup_desc,
.ctl_popup_desc p {
    color: var(--wp--preset--color--body);
    font-family: var(--wp--preset--font-family--body);
}

/* --- Venue gallery slider --- */

.venueslive-venue-gallery {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.venue-gallery__track {
    display: flex;
    transition: transform 0.4s ease;
}

.venue-gallery__slide {
    flex: 0 0 100%;
    max-width: 100%;
}

.venue-gallery__slide img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.venue-gallery__prev,
.venue-gallery__next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    border-radius: 2px;
    transition: background 0.2s ease;
}

.venue-gallery__prev:hover,
.venue-gallery__next:hover {
    background: rgba(0, 0, 0, 0.75);
}

.venue-gallery__prev { left: 1rem; }
.venue-gallery__next { right: 1rem; }

/* --- Venue details key-value table --- */

.venue-details-table table {
    border: none;
    width: 100%;
    font-size: var(--wp--preset--font-size--sm);
    margin: 1rem 0;
}

.venue-details-table td {
    padding: 0.35rem 1rem 0.35rem 0;
    border: none;
    vertical-align: top;
}

.venue-details-table td:first-child {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    color: var(--wp--preset--color--muted);
    min-width: 6rem;
}

/* Outline button style — loaded here because venueslive/venue-details renders
   button markup directly, bypassing WP's per-block stylesheet loading. */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--primary);
    border-radius: 0;
    color: var(--wp--preset--color--primary);
    padding: 0.6em 1.4em;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--primary);
    color: var(--wp--preset--color--bg);
}

/* ==========================================================================
   7. Single post
   ========================================================================== */

.back-to-news a {
    font-family: var(--wp--preset--font-family--body);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--wp--preset--color--primary);
    letter-spacing: 0.02em;
}

.back-to-news a:hover {
    color: var(--wp--preset--color--accent);
}

/* Related articles grid — collapse to 2 cols on tablet, 1 on mobile */
.related-articles-grid.is-layout-grid {
    grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   8. Interior page hero
   ========================================================================== */


.page-hero .wp-block-post-title {
    color: var(--wp--preset--color--bg);
    max-width: none;
    text-align: left;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.8);
}

/* ==========================================================================
   8. Responsive breakpoints
   ========================================================================== */

@media ( max-width: 1024px ) {
    .related-articles-grid.is-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media ( max-width: 782px ) {
    .site-header {
        height: 64px;
        padding: 0 1rem;
    }

    .related-articles-grid.is-layout-grid {
        grid-template-columns: 1fr;
    }

    .venueslive-child-pages {
        grid-template-columns: 1fr;
    }

    .child-page-card {
        border-left: none;
        padding-inline: 0;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid var(--wp--preset--color--border);
    }

    .child-page-card:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .venueslive-timeline::before {
        left: 0;
    }

    .timeline-event {
        grid-template-columns: 1fr;
        padding-left: 1.5rem;
    }

    .timeline-event::before {
        left: -8px;
    }

    .timeline-event__year {
        text-align: left;
    }
}

/* ==========================================================================
   Solutions child pages
   ========================================================================== */

/* Align hero title with the 1310px constrained content below.
   padding-inline grows from a minimum of 1.5rem to half the space outside
   the content area, so the title left-edge matches constrained blocks exactly.
   Avoids relying on margin:auto inside a justify-content:flex-start flex parent. */
.page-hero.wp-block-cover .wp-block-cover__inner-container,
.solution-hero.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: max(1.5rem, calc((100% - var(--wp--style--global--content-size, 1310px)) / 2));
    box-sizing: border-box;
}

.solution-hero-logo {
    max-width: 260px;
    margin: 0;
}

.solution-logo {
    max-width: 180px;
    margin-bottom: 1.5rem;
}


/* Card grid dividers — same logic as team grid */
.solutions-grid > .wp-block-column {
    border-left: 1px solid var(--wp--preset--color--border);
    padding-inline: 1rem;
}

@media (max-width: 600px) {
    .solutions-grid > .wp-block-column {
        border-left: none;
        padding-inline: 0;
    }
}