/* ==========================================================================
   WPBono FSE Theme — Custom CSS
   --------------------------------------------------------------------------
   theme.json owns typography, button, spacing, and color tokens. This file
   holds what theme.json can't express: fixed/sticky positioning, JS-state
   classes (scroll, mobile-menu, header-light), scroll-section/Swiper layout,
   and plugin-integration overrides (EventON, ARMember, WPAdverts) that must
   out-specificity third-party CSS.
   ========================================================================== */

/* ==========================================================================
   Design tokens
   --------------------------------------------------------------------------
   z-index ladder and radius scale referenced throughout this file, collected
   here so the stacking order and corner-radius system are legible in one
   place. --calendar-* (a second, deliberately separate red used only by the
   EventON section) also lives here — see that section's own comment for why
   it isn't unified with --wp--preset--color--primary.
   ========================================================================== */
:root {
    /* z-index ladder */
    --wpbono-z-reveal-main: 2;
    --wpbono-z-reveal-footer: 3;
    --wpbono-z-header: 9000;
    --wpbono-z-section-nav: 9999;
    --wpbono-z-overlay: 100000;
    --wpbono-z-overlay-top: 100002;

    /* radius scale */
    --wpbono-radius-sm: 4px;
    --wpbono-radius-md: 12px;
    --wpbono-radius-card: 14px;
    --wpbono-radius-pill: 30px;
    --wpbono-radius-full: 999px;

    /* EventON calendar — see "EventON calendar / yearly view" section below */
    --calendar-primary: #ff3832;
    --calendar-light: #f5f5f5;
    --calendar-gray: #d3d3d3;
    --calendar-button-bg: var(--wp--preset--color--primary, #d71920);
}

/* Push footer to bottom on short pages */
.wp-site-blocks {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}

.wp-site-blocks > .wp-block-template-part:last-child {
    margin-top: auto;
}

/* Smooth scrolling (respects user preference) */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

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

/* ==========================================================================
   Core content blocks
   --------------------------------------------------------------------------
   Coherent defaults for core blocks used in migrated/authored content.
   Colors, radii, borders and spacing that theme.json can express live there
   (styles.blocks); only what theme.json can't emit — cursor, ::marker,
   overflow, hover/focus states, and third-party pagination markup — lives
   here. Duplicated (not @imported) into editor.css for the block editor.
   ========================================================================== */

/* core/details (accordion) */
.wp-block-details summary {
    font-weight: 600;
    cursor: pointer;
}

.wp-block-details summary::marker {
    color: var(--wp--preset--color--primary, #d71920);
}

.wp-block-details[open] summary {
    margin-bottom: var(--wp--preset--spacing--10, 10px);
}

/* core/table */
.wp-block-table thead th {
    background: #f5f5f5;
}

.wp-block-table td,
.wp-block-table th {
    padding: var(--wp--preset--spacing--10, 10px) var(--wp--preset--spacing--15, 15px);
}

.wp-block-table figcaption {
    color: var(--wp--preset--color--text-muted, #6b6b6b);
    font-size: var(--wp--preset--font-size--small, 14px);
    margin-top: var(--wp--preset--spacing--10, 10px);
}

.wp-block-table.is-style-stripes tbody tr:nth-child(odd) td {
    background-color: #f5f5f5;
}

/* Wide tables scroll horizontally on narrow screens instead of overflowing
   or clipping. */
.wp-block-table {
    overflow-x: auto;
}

/* core/code, core/preformatted: font/background/radius/padding come from
   theme.json; overflow can't be expressed there. */
.wp-block-code,
.wp-block-preformatted {
    overflow-x: auto;
}

/* core/separator */
.wp-block-separator {
    opacity: 0.4;
}

.wp-block-separator.is-style-wide {
    max-width: none;
}

/* core/search */
.wp-block-search__input {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--wp--preset--color--border-input, #dadada);
    border-radius: var(--wpbono-radius-sm, 4px);
    font: inherit;
}

.wp-block-search__input:focus-visible {
    border-color: var(--wp--preset--color--primary, #d71920);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #d71920) 18%, transparent);
}

.wp-block-search__button {
    border-radius: var(--wpbono-radius-pill, 30px);
}

/* core/query-pagination — adapted from the WPAdverts pagination recipe
   further down this file, so both read as one system. */
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--wp--preset--color--border-light, #e5e5e5);
    border-radius: var(--wpbono-radius-full, 999px);
    text-decoration: none;
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
    border-color: var(--wp--preset--color--primary, #d71920);
    background: var(--wp--preset--color--primary, #d71920);
    color: var(--wp--preset--color--white, #fff);
}

/* core/comments family */
.wp-block-comments .wp-block-avatar img {
    border-radius: 50%;
}

.wp-block-comments .wp-block-comment-author-name {
    font-weight: 700;
}

.wp-block-comments .wp-block-comment-reply-link,
.wp-block-comments .comment-reply-link {
    color: var(--wp--preset--color--primary, #d71920);
    text-decoration: none;
}

.wp-block-comments .wp-block-comment-reply-link:hover,
.wp-block-comments .comment-reply-link:hover {
    text-decoration: underline;
}

.wp-block-comments .wp-block-comments-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    border-radius: var(--wpbono-radius-full, 999px);
    border: 1px solid var(--wp--preset--color--border-light, #e5e5e5);
    text-decoration: none;
}

/* Block-rendered comment form fields match the global form baseline
   (defined later in this file) plus the comment-form width/size deltas. */
.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
    width: 100%;
    font-size: 16px;
}

/* core/social-links in content (the footer already has its own layout resets) */
.wp-block-post-content .wp-block-social-link a {
    color: var(--wp--preset--color--text-muted, #6b6b6b);
}

.wp-block-post-content .wp-block-social-link a:hover {
    color: var(--wp--preset--color--primary, #d71920);
}

/* core/file */
.wp-block-file__button {
    border-radius: var(--wpbono-radius-pill, 30px);
}

/* core/tag-cloud */
.wp-block-tag-cloud a {
    display: inline-block;
    padding: 4px 14px;
    border: 1px solid var(--wp--preset--color--border-light, #e5e5e5);
    border-radius: var(--wpbono-radius-pill, 30px);
    text-decoration: none;
}

.wp-block-tag-cloud a:hover {
    border-color: var(--wp--preset--color--primary, #d71920);
    color: var(--wp--preset--color--primary, #d71920);
}

/* core/calendar */
.wp-block-calendar table caption {
    font-weight: 700;
}

.wp-block-calendar table td#today {
    background: var(--wp--preset--color--primary, #d71920);
    color: var(--wp--preset--color--white, #fff);
}

/* core/list: primary-color markers, breathing room for nested lists */
.wp-block-post-content li::marker {
    color: var(--wp--preset--color--primary, #d71920);
}

.wp-block-post-content ul ul,
.wp-block-post-content ol ol,
.wp-block-post-content ul ol,
.wp-block-post-content ol ul {
    margin-top: var(--wp--preset--spacing--10, 10px);
}

/* Post navigation (previous/next links) */
.wp-block-post-navigation-link a {
    text-decoration: none;
    font-weight: 600;
}

.wp-block-post-navigation-link a:hover {
    color: var(--wp--preset--color--primary, #d71920);
}

/* core/button outline variation. Core's `.wp-block-button.is-style-outline
   > .wp-block-button__link` isn't wrapped in `:where()`, so it wins the
   specificity fight against a theme.json variation — handled directly here
   instead. The base button element already gives every button a 1px border,
   so only fill/text are repainted to avoid a double border. */
.wp-block-button.is-style-outline > .wp-block-button__link {
    background: transparent;
    border-color: var(--wp--preset--color--primary, #d71920);
    color: var(--wp--preset--color--primary, #d71920);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
    background: var(--wp--preset--color--primary, #d71920);
    color: var(--wp--preset--color--white, #fff);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Transparent overlay header on all pages */
.wpbono-fse-theme-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    padding-top: 10px !important;
    background: transparent !important;
    border-bottom-color: transparent !important;
    z-index: var(--wpbono-z-header, 9000);
    transition: background-color 0.25s ease;
}

.admin-bar .wpbono-fse-theme-header {
    top: 32px !important;
}

/* Remove admin bar gap so cover blocks start flush at viewport top */
html.wp-toolbar {
    margin-top: 0 !important;
    padding-top: 32px !important;
}

/* Dark gradient behind header: always-on scrim so there's a subtle shadow
   while scrolling in both header states (light-bg and dark-bg). */
.wpbono-fse-theme-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.30) 0%, transparent 100%);
    pointer-events: none;
    z-index: -1;
    opacity: 1;
    transition: opacity 0.25s ease;
}

/* Scrolled: no band, no tint — just a soft blur of whatever passes under
   the bar. Background stays transparent so the adaptive light/dark text
   logic keeps working. */
.wpbono-fse-theme-header.is-scrolled,
body.wpbono-no-hero .wpbono-fse-theme-header {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Browsers without any backdrop-filter support (prefixed or not) get a
   semi-solid fallback instead of a fully transparent bar, so scrolled/no-hero
   pages still separate the header from content. Where blur is supported the
   frosted (no-tint) look above is unchanged. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wpbono-fse-theme-header.is-scrolled,
    body.wpbono-no-hero .wpbono-fse-theme-header {
        background: rgba(255, 255, 255, 0.92) !important;
    }

    .wpbono-fse-theme-header.is-scrolled.header-light,
    body.wpbono-no-hero .wpbono-fse-theme-header.header-light {
        background: rgba(20, 20, 20, 0.85) !important;
    }
}

/* The dark gradient scrim belongs to the top-of-page hero state only; once
   scrolled (or on pages without a hero) it reads as a dirty band over light
   content — the blur provides the separation instead. */
.wpbono-fse-theme-header.is-scrolled::before,
body.wpbono-no-hero .wpbono-fse-theme-header::before {
    opacity: 0;
}

/* Pages without a hero: content must clear the fixed header. Some templates
   (e.g. EventON singles) render a plain group instead of <main>, so target
   whatever element follows the header part. */
body.wpbono-no-hero .wp-site-blocks > header.wp-block-template-part + * {
    padding-top: 96px;
}

/* Optical alignment: the logo box is geometrically centered, but the "d"
   ascender pulls the box's center above the visual center of the "roc" body.
   Nudge the whole nav (menu items + avatar) down so it lines up with the
   logo's optical middle. Desktop only — the mobile header is a separate layout.

   Default derived from the DROC logo geometry: the dense "roc" body center sits
   ~8.8% of the logo height below the box center; at the header's rendered logo
   height (~64px) that is ~5.6px, rounded to 6px. Tune via
   --wpbono-header-nav-offset if the logo file or size changes. */
@media (min-width: 1025px) {
    .wpbono-fse-theme-header .wp-block-navigation {
        transform: translateY(var(--wpbono-header-nav-offset, 6px));
    }
}

/* Navigation text — default white (JS only needs to switch it to black once
   it detects a light background under the header; avoids a black flash on load) */
.wpbono-fse-theme-header .wp-block-navigation-item__content {
    color: #fff !important;
    font-weight: 400;
    transition: color 0.2s ease;
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-icon {
    color: #fff !important;
    transition: color 0.2s ease;
}

.wpbono-fse-theme-header .wp-block-site-logo img {
    max-height: 64px;
    width: auto;
    transition: opacity 0.2s ease;
    /* Keep the logo's own colors. Which variant (light-bg vs dark-bg) is shown
       is handled by JS swapping the SVG src on the header theme (see custom.js),
       not by a color filter that would flatten the artwork. */
    filter: none;
}

/* Light mode: white text for dark backgrounds. A subtle text-shadow is a
   contrast fallback over bright hero imagery — NOT a background tint, which
   would violate the frosted-header contract. */
.wpbono-fse-theme-header.header-light .wp-block-navigation-item__content {
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.wpbono-fse-theme-header.header-light .wp-block-navigation__submenu-icon {
    color: #fff !important;
}

.wpbono-fse-theme-header.header-light .wp-block-site-logo {
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

/* Dark text for light backgrounds — JS-applied once detectBackground() runs;
   text stays white (the default above) until then. */
.wpbono-fse-theme-header.header-on-light .wp-block-navigation-item__content {
    color: #000 !important;
}

.wpbono-fse-theme-header.header-on-light .wp-block-navigation__submenu-icon {
    color: #000 !important;
}

/* Navigation link hover effect */
.wpbono-fse-theme-header .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary, #d71920) !important;
}

/* Two-tone ring: the red outline alone is invisible on primary-red surfaces
   (e.g. the button element's own background), so a white halo box-shadow
   keeps the ring visible on any background color. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-navigation-item__content:focus-visible,
.wp-block-button__link:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #d71920);
    outline-offset: 3px;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.6);
}

/* Button colors, pill radius, border and hover/focus inversion now live in
   theme.json (styles.elements.button). Only the transition — which theme.json
   cannot emit — stays here. */
.wp-block-button__link,
a.wp-element-button {
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Button-style nav items (WordPress "Button" or the legacy theme "Pill").
   Matches the homepage "Join Now" button: filled DROC red, white text, red
   border, pill radius. Identical in both header states so it stays legible on
   light and dark backgrounds; inverts to red-on-white on hover/focus. */
.wpbono-fse-theme-header :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content,
.wpbono-fse-theme-header.header-light :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content {
    background: var(--wp--preset--color--primary, #d71920);
    color: #fff !important;
    border: 1px solid var(--wp--preset--color--primary, #d71920);
    padding: 5px 16px;
    border-radius: var(--wpbono-radius-pill, 30px);
    font-weight: 600;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* Tighten the gap between adjacent pill buttons (e.g. Join + Login) without
   changing the Navigation block's global blockGap. Pulls the second pill left
   from the 28px flex gap. */
.wpbono-fse-theme-header :is(.is-style-button, .is-style-pill) + :is(.is-style-button, .is-style-pill) {
    margin-left: -16px;
}

.wpbono-fse-theme-header :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content:hover,
.wpbono-fse-theme-header :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content:focus-visible {
    background: #fff;
    color: var(--wp--preset--color--primary, #d71920) !important;
    border-color: var(--wp--preset--color--primary, #d71920);
}

/* Navigation dropdown styling */
.wpbono-fse-theme-header .wp-block-navigation__submenu-container {
    /* 0.5 alpha left white text over light content below WCAG contrast; the
       mobile overlay already uses 0.82, so raise this to match (0.85). */
    background: rgba(72, 72, 78, 0.85) !important;
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    border: 0 !important;
    border-top: 0 !important;
    border-radius: var(--wpbono-radius-md, 12px) !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14);
    padding: 0;
    min-width: 235px;
    margin-top: 12px;
    position: relative;
    /* Slide-down animation */
    animation: wpbono-dropdown-open 0.25s ease-out;
    transform-origin: top center;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container {
        background: rgba(40, 40, 44, 0.96) !important;
    }
}

/* WP 7.0.2 core adds `.wp-block-navigation-item { background: inherit }`, so each
   submenu item re-inherits and re-paints the container's translucent background,
   stacking opacity into a darker square-cornered box inside the rounded panel.
   Keep items transparent so only the container paints the panel. */
.wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
    background: transparent !important;
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:first-child > .wp-block-navigation-item__content {
    border-top-left-radius: var(--wpbono-radius-md, 12px);
    border-top-right-radius: var(--wpbono-radius-md, 12px);
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child > .wp-block-navigation-item__content {
    border-bottom-left-radius: var(--wpbono-radius-md, 12px);
    border-bottom-right-radius: var(--wpbono-radius-md, 12px);
}

/* Keep hover "connected" from parent item into dropdown */
.wpbono-fse-theme-header .wp-block-navigation-item {
    position: relative;
}

.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item.has-child::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
    background: transparent;
    z-index: 5;
}

/* Second-level submenus: inline expanded tree, not a side flyout (desktop).
   When a dropdown node has children (e.g. Events > Calendar > …), render the
   children inline inside the same panel — always expanded, indented under the
   parent with a connecting line — instead of opening a second box to the side.
   Mirrors the mobile accordion feel but permanently open. Mobile (<=1024px)
   keeps its own overlay/accordion, so this is desktop-only. */
@media (min-width: 1025px) {
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container {
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        /* Core keeps the closed nested panel collapsed (overflow:hidden, 0 size);
           reset so it grows to its children inline. */
        display: block !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        min-width: 0 !important;
        margin: 2px 0 10px 26px !important;
        padding: 0 0 0 14px !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        box-shadow: none !important;
        border: 0 !important;
        border-left: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 0 !important;
        animation: none !important;
    }

    /* The nested list's 14px left padding (the gap between the connector line
       and the label) is otherwise dead space that swallows clicks. Pull the
       link's hit box back over it, adding the same 14px to its own padding so
       the label doesn't move. Hover paints no background here, so the
       connecting line stays visually intact.

       The selector needs five classes: core's
       `.wp-block-navigation .has-child .wp-block-navigation__submenu-container
       > .wp-block-navigation-item > .wp-block-navigation-item__content`
       (0,5,0) already beats this file's 3-class dropdown padding rule, so the
       effective horizontal padding here is core's 1em (14px), not the 20px
       declared above — hence 28px, not 34px. */
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-container .wp-block-navigation-item > .wp-block-navigation-item__content {
        margin-left: -14px;
        padding-left: 28px;
    }

    /* Parent node reads as a section header; drop its flyout ">" chevron.
       Core lays the item out as flex-row (link | submenu side by side); force
       block so the children stack *below* the parent link, not beside it. */
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child {
        display: block !important;
    }
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container > .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
        font-weight: 600;
    }
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation__submenu-icon {
        display: none !important;
    }
    /* The invisible hover-bridge belongs to flyouts; not needed inline. */
    .wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item.has-child::after {
        content: none !important;
    }

    /* Edge-safe dropdowns: the nav is right-justified, so a top-level dropdown
       near the right edge can overflow the viewport. custom.js measures each
       panel on open and adds .wpbono-flip-right when it would spill past the
       right edge, anchoring it to the item's right edge instead. Only the
       overflowing menus flip; the rest stay aligned under their item. (The
       account/avatar menu is already right-anchored by its own rule.) */
    .wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-container.wpbono-flip-right {
        left: auto !important;
        right: 0 !important;
    }
}

@keyframes wpbono-dropdown-open {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile full-screen menu entrance (open only; close stays instant) */
@keyframes wpbono-mobile-menu-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes wpbono-mobile-menu-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    display: block;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: #fff !important;
    line-height: 1.35;
    transition: color 0.16s ease, transform 0.16s ease;
    transform: translateX(0);
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--primary, #d71920) !important;
    background: transparent;
    transform: translateX(7px);
}

.wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content svg,
.wpbono-fse-theme-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content .dashicons {
    width: 12px;
    height: 12px;
    margin-right: 10px;
    opacity: 0.85;
    vertical-align: -1px;
}

/* Active top-level item underline in red, like source site */
.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
    position: relative;
    text-decoration: none !important;
}

.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -8px;
    height: 2px;
    background: var(--wp--preset--color--primary, #d71920);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: center center;
    transition: transform 0.18s ease-out, opacity 0.14s ease-out;
}

/* The active/hovered item's text color must follow the header theme, not be
   forced white: on a light-background header (black nav text) a white current
   item is invisible — only its red underline shows. The base rules already set
   black on light headers and white on .header-light (dark) headers, so the
   current/ancestor item simply inherits them; the red underline below is the
   active cue, and hover color comes from the hover rule above (primary). */

.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content::after,
.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content::after,
.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item.has-child.is-menu-open > .wp-block-navigation-item__content::after,
.wpbono-fse-theme-header .wp-block-navigation__container > .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after {
    opacity: 1;
    transform: scaleX(1);
}

/* Mobile overlay menu is handled in responsive rules below */

/* Hamburger button */
.wpbono-fse-theme-header .wp-block-navigation__responsive-container-open {
    padding: 8px;
}

/* ==========================================================================
   Content spacing
   ========================================================================== */

/* Content flows under the fixed header — no gap between header and content */
.wp-site-blocks {
    gap: 0 !important;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group,
.wp-site-blocks > .wp-block-post-content {
    margin-top: 0 !important;
}

/* Keep first hero/cover flush under fixed header (avoids white band on 404/custom pages) */
.wp-site-blocks > .wp-block-template-part + .wp-block-cover {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

/* Post content max-width for readability. Matches theme.json's
   settings.layout.contentSize via the global custom property core emits,
   instead of a hardcoded value that had drifted from it (1100px vs 1170px). */
.wp-block-post-content > *:not(.alignwide):not(.alignfull) {
    max-width: var(--wp--style--global--content-size, 1170px);
    margin-left: auto;
    margin-right: auto;
}

/* Regression fix (2.0.0 shipped without this): templates nest a
   constrained wp:group ("main") around a constrained wp:post-content —
   two "type":"constrained" layouts deep. Core's alignfull escape only
   cancels ONE level of root padding, so it never reaches the viewport
   here; the cover renders capped to post-content's own 1170px box.
   Viewport-relative margins fix it at any nesting depth as long as the
   ancestor chain stays centered (it does). Deliberately no width:100vw
   here (that combined with overflow-x:hidden previously, just to hide
   the scrollbar-width overflow it caused) — margins alone are enough
   since core already sets max-width:none on the alignfull block. */
.wp-block-post-content > .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* vc_hoverbox equivalent for converted cards */
.wpbono-vc-hoverbox-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--wpbono-radius-md, 12px);
    aspect-ratio: 16 / 9;
    margin: 0 8px 16px;
    background: #f5f5f5;
}

.wpbono-vc-hoverbox-card__front,
.wpbono-vc-hoverbox-card__back {
    position: absolute;
    inset: 0;
}

.wpbono-vc-hoverbox-card__front {
    transition: opacity 0.4s ease;
    pointer-events: auto;
}

.wpbono-vc-hoverbox-card__image {
    margin: 0 !important;
    width: 100%;
    height: 100%;
}

.wpbono-vc-hoverbox-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wpbono-vc-hoverbox-card__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 40px 24px 20px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.55));
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
}

.wpbono-vc-hoverbox-card__back {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 32px 24px;
    background: #f5f5f5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.wpbono-vc-hoverbox-card__heading {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

.wpbono-vc-hoverbox-card__content {
    max-width: 440px;
    margin: 0 auto;
    font-size: 14px;
    line-height: 1.6;
    color: #333;
}

.wpbono-vc-hoverbox-card__content p {
    margin: 0 0 8px;
}

@media (hover: hover) {
    .wpbono-vc-hoverbox-card:hover .wpbono-vc-hoverbox-card__front {
        opacity: 0;
        pointer-events: none;
    }

    .wpbono-vc-hoverbox-card:hover .wpbono-vc-hoverbox-card__back {
        opacity: 1;
        pointer-events: auto;
    }
}

@media (hover: none) {
    .wpbono-vc-hoverbox-card {
        aspect-ratio: auto;
    }

    .wpbono-vc-hoverbox-card__front,
    .wpbono-vc-hoverbox-card__back {
        position: static;
    }

    .wpbono-vc-hoverbox-card__back {
        opacity: 1;
        text-align: left;
    }

    .wpbono-vc-hoverbox-card__title {
        font-size: 18px;
        padding: 20px 16px 14px;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

/* Footer separator */
.wp-block-template-part[data-area="footer"] .wp-block-separator {
    border-color: rgba(255, 255, 255, 0.1);
    margin: 0;
}

/* Footer widget headings */
.wp-block-template-part[data-area="footer"] h4 {
    margin-bottom: 20px;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Footer links */
.wp-block-template-part[data-area="footer"] a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.2s;
}

/* Footer widget menus: match header font family */
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-navigation-item__content,
.wp-block-template-part[data-area="footer"] .wp-block-navigation .wp-block-page-list__item-link,
.wp-block-template-part[data-area="footer"] .wp-widget-group .menu a {
    font-family: var(--wp--preset--font-family--lato), sans-serif;
}

.wp-block-template-part[data-area="footer"] a:hover {
    color: #fff;
}

.wp-block-template-part[data-area="footer"] a:focus-visible {
    color: #fff;
}

/* Footer "Next event" teaser (red links bar, first column). Single line on
   desktop/tablet — the column sizes itself to fit (see the layout policy
   below). The mobile media query re-enables wrapping. */
.wpbono-next-event {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: center;
    gap: 0.35em;
    font-family: var(--wp--preset--font-family--lato), sans-serif;
    font-size: var(--wp--preset--font-size--small);
    line-height: 1.5;
}
.wpbono-next-event__label {
    opacity: 0.8;
}
.wp-site-blocks > footer .wpbono-next-event__link {
    color: #fff;
    font-weight: 700;
}
.wpbono-next-event.is-empty {
    opacity: 0.6;
}

/* Footer red nav row layout (desktop/tablet — 781px and below is handled in
   the mobile media query further down).

   These rules own the row geometry outright, because the footer template part
   is customized in the Site Editor on the live site and the DB copy overrides
   parts/footer.html. That copy saved the wrapper as a *constrained* group, so
   the row was capped to the 1170px reading width with empty gutters either
   side; the theme file uses a flow group. Both shapes are normalized here:
   horizontal padding is stripped from the wrapper and re-applied to the
   columns row, which then spans the full viewport. Don't move the padding
   back onto the group — an editor save can overwrite it, CSS can't. */
.wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    /* Core gives .wp-block-columns a ~25px block-end margin. Inside the red
       bar that is dead space the wrapper's padding doesn't cancel, so the
       stripe rendered 8px above the row and 33px below it. */
    margin-bottom: 0;
    padding-left: 30px;
    padding-right: 30px;
}

/* Column 1 (next-event teaser) takes exactly the width its single line needs;
   the link columns split whatever is left, evenly. `width: max-content` is what
   makes flex-basis:auto resolve to the teaser's one-line width instead of
   swallowing the whole row. */
.wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column:first-child {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
}
.wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column:not(:first-child) {
    flex: 1 1 0;
    max-width: none;
    min-width: 0;
}

/* The global link element now carries an underline (WCAG 1.4.1). Footer links
   already signal "link" via color + hover, so suppress it here — same
   front-end-only scoping as above, since [data-area="footer"] never reaches
   the rendered page. */
.wp-site-blocks > footer a {
    text-decoration: none;
}

/* Red links bar (primary bg): hover to black — the global theme.json link
   hover is `primary` red, which is red-on-red here. NOTE: the front-end footer
   has no [data-area="footer"] (that attribute is editor-only), so scope by the
   footer element itself, not the data attribute. */
.wp-site-blocks > footer .has-primary-background-color a:hover,
.wp-site-blocks > footer .has-primary-background-color a:focus-visible {
    color: #000;
}
.wpbono-next-event__link:hover {
    text-decoration: underline;
}

/* Footer bottom bar alignment */
#footer-bottom,
.wp-block-template-part[data-area="footer"] .has-footer-bottom-bg-background-color {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

/* Remove global block-gap seam before footer; the nested footer-part (if any)
   must not introduce its own top seam either. */
.wp-site-blocks > footer.wp-block-template-part,
.wp-site-blocks > footer.wp-block-template-part > footer.wp-block-template-part {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
}

.wp-block-template-part[data-area="footer"] .wpbono-footer-image {
    margin: 0;
    line-height: 0;
}

.wpbono-footer-image img {
    width: auto;
    height: auto;
    display: block;
    max-height: 24px;
    max-width: 100%;
    object-fit: contain;
}

.wp-block-template-part[data-area="footer"] .wpbono-footer-social-row {
    gap: 10px;
    padding-right: 18px;
}

.wp-block-template-part[data-area="footer"] .wpbono-footer-social-row p {
    margin: 0;
}

.wp-block-template-part[data-area="footer"] .wpbono-footer-social-row .wp-block-social-links {
    margin: 0;
}

/* ==========================================================================
   Skip link (accessibility)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: var(--wpbono-z-overlay, 100000);
    padding: 8px 16px;
    background: #000;
    color: #fff;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}

/* Standard WP screen-reader-text recipe, defined locally so accessible-only
   content doesn't depend on core CSS load order. */
.screen-reader-text {
    border: 0;
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: var(--wpbono-radius-sm, 4px);
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip-path: none;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: var(--wpbono-z-overlay, 100000);
}

/* ==========================================================================
   Post formats & cards
   ========================================================================== */

/* Post card featured image border radius */
.wp-block-post-featured-image img {
    border-radius: 8px;
}

/* Post title link styling */
.wp-block-post-title a {
    text-decoration: none;
    color: inherit;
}

.wp-block-post-title a:hover {
    color: var(--wp--preset--color--primary, #d71920);
}

/* ==========================================================================
   Forms (global baseline)
   --------------------------------------------------------------------------
   Bare form fields anywhere in front-end content — comments, the search
   block, any future block-editor form — get one consistent baseline: a
   touch-friendly height, the theme's input border color, and a color-mix
   focus ring that matches the button/link accent. Promoted from the
   WPAdverts recipe (below), which predates this and can now inherit it.
   Scoped to `.wp-site-blocks` (the front-end content root) via a zero-
   specificity `:where()` so it never fights wp-admin screens, the header
   nav, or a plugin's own higher-specificity rules. */
.wp-site-blocks :where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], textarea, select) {
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--wp--preset--color--border-input, #dadada);
    border-radius: var(--wpbono-radius-sm, 4px);
    background: var(--wp--preset--color--white, #fff);
    color: var(--wp--preset--color--body-text, #333);
    font: inherit;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wp-site-blocks :where(input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="password"], input[type="tel"], input[type="number"], textarea, select):focus-visible {
    border-color: var(--wp--preset--color--primary, #d71920);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary, #d71920) 18%, transparent);
}

/* Comment form: baseline above covers border/radius/focus; only the
   comment-specific width and font-size deltas stay here. */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    font-size: 16px;
}

.comment-form input[type="text"]:focus-visible,
.comment-form input[type="email"]:focus-visible,
.comment-form input[type="url"]:focus-visible,
.comment-form textarea:focus-visible {
    border-color: #333;
    outline: 2px solid var(--wp--preset--color--primary, #d71920);
    outline-offset: 2px;
}

/* .comment-form .submit intentionally not styled here: the button element
   style (theme.json) already renders it as the theme's red pill button. A
   local rule previously repainted it as a black 4px-radius square, fighting
   that treatment — removed so the element style wins. */

/* ==========================================================================
   Scroll-sections template: Swiper-driven sections
   ========================================================================== */

/* Lock scrolling only after the desktop controller mounts successfully. */
body.wpbono-has-scroll-sections,
html.wpbono-has-scroll-sections {
    overflow: hidden;
    height: 100%;
}

/* Swiper container fills viewport — break out of content max-width */
.wpbono-onepage-swiper {
    height: 100vh !important;
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

/* Each cover fills the slide */
.wpbono-onepage-swiper .swiper-slide .wp-block-cover.alignfull {
    height: 100vh !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Footer behavior
   ========================================================================== */

/* Default pages: normal in-flow footer */
footer.wp-block-template-part {
    position: relative;
    box-shadow: none;
}

/* Scroll-sections template only: fixed footer reveal */
body.wpbono-has-scroll-sections .wp-site-blocks {
    padding-bottom: clamp(320px, 38vh, 520px);
}

body.wpbono-has-scroll-sections .wp-site-blocks > footer.wp-block-template-part {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--wpbono-z-reveal-footer, 3);
    box-shadow: 0 -28px 52px rgba(0, 0, 0, 0.34);
    transform: translateY(100%);
    transition: transform 550ms ease;
    pointer-events: none;
}

body.wpbono-has-scroll-sections .wp-site-blocks > main {
    position: relative;
    z-index: var(--wpbono-z-reveal-main, 2);
    transition: transform 550ms ease;
}

body.wpbono-has-scroll-sections.wpbono-scroll-footer-visible .wp-site-blocks > footer.wp-block-template-part {
    transform: translateY(0);
    pointer-events: auto;
}

body.wpbono-has-scroll-sections.wpbono-scroll-footer-visible .wp-site-blocks > main {
    transform: translate3d(0, calc(-1 * var(--wpbono-footer-reveal-offset, 0px)), 0);
}

/* Regular pages: keep footer in flow with breathing room from content */
body:not(.wpbono-has-scroll-sections) .wp-site-blocks > main:not(.has-scroll-sections) {
    padding-bottom: clamp(48px, 6vh, 96px);
}

/* Scroll-sections templates must not inherit regular-page footer spacing */
.wp-site-blocks > main.has-scroll-sections {
    padding-bottom: 0 !important;
}

/* 404 page: footer should attach to the hero area without a white gap */
body.error404 .wp-site-blocks > footer.wp-block-template-part {
    margin-top: 0;
}

body.error404 main .wp-block-cover {
    margin-bottom: 0;
}

/* ==========================================================================
   Scroll-sections template: Section navigator dots
   ========================================================================== */

#wpbono-section-nav {
    position: fixed;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    width: 44px;
    z-index: var(--wpbono-z-section-nav, 9999);
}

#wpbono-section-nav ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    border-radius: var(--wpbono-radius-full, 999px);
    background: rgba(7, 19, 30, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(1.5px);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #wpbono-section-nav ul {
        background: rgba(7, 19, 30, 0.45);
    }
}

#wpbono-section-nav li {
    list-style: none;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0;
}

#wpbono-section-nav button {
    display: inline-flex;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--wpbono-radius-full, 999px);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

#wpbono-section-nav button::before {
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-radius: var(--wpbono-radius-full, 999px);
    opacity: 0.38;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: height 0.3s, opacity 0.3s, background 0.3s;
}

/* Two-tone, positive-offset ring: a negative-offset white outline on this
   near-transparent pill could disappear against whatever scrolls behind it;
   the outline sits outside the button, and the dark halo keeps it visible
   over light backgrounds too. */
#wpbono-section-nav button:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.35);
}

#wpbono-section-nav li.bullet-active button::before {
    height: 38px;
    background: rgba(255, 255, 255, 0.78);
    opacity: 0.8;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Revert transparent header + disable Swiper on mobile/tablet */
@media (max-width: 1024px) {
    /* Keep translucent overlay header on mobile */
    .wpbono-fse-theme-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        min-height: calc(env(safe-area-inset-top, 0px) + 56px) !important;
        padding-top: env(safe-area-inset-top, 0px) !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        background: rgba(44, 10, 14, 0.34) !important;
        border-bottom-color: transparent !important;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }

    .wpbono-fse-theme-header::before {
        display: block;
        opacity: 0.75;
    }

    /* Mobile header is already translucent; only the content offset applies */
    body.wpbono-no-hero .wp-site-blocks > header.wp-block-template-part + * {
        padding-top: calc(env(safe-area-inset-top, 0px) + 72px);
    }

    .wpbono-fse-theme-header .wp-block-navigation-item__content,
    .wpbono-fse-theme-header .wp-block-navigation__submenu-icon {
        color: #fff !important;
    }

    .wpbono-fse-theme-header .wp-block-site-logo img {
        max-height: 46px;
        width: auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container-open {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: 16px;
        width: 44px;
        height: 44px;
        padding: 10px;
        border-radius: var(--wpbono-radius-full, 999px);
        background: rgba(0, 0, 0, 0.22) !important;
        box-shadow: none;
        color: #fff !important;
        -webkit-tap-highlight-color: transparent;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container-open svg,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container-open svg path {
        color: #fff !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    html.wpbono-mobile-menu-open,
    body.wpbono-mobile-menu-open {
        overflow: hidden !important;
    }

    body.wpbono-mobile-menu-open .wpbono-fse-theme-header {
        background: transparent !important;
        border-bottom-color: transparent !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
    }

    body.wpbono-mobile-menu-open .wpbono-fse-theme-header .wp-block-site-logo {
        opacity: 1;
        pointer-events: auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) {
        /* Strict mobile menu type scale */
        --wpbono-mobile-type-primary: clamp(1.4rem, 1.15rem + 1.1vw, 1.75rem);
        --wpbono-mobile-type-secondary: clamp(0.98rem, 0.92rem + 0.35vw, 1.08rem);
        --wpbono-mobile-type-auth: clamp(0.92rem, 0.88rem + 0.28vw, 1rem);
        --wpbono-mobile-nav-font: var(--wp--preset--font-family--lato), "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        min-height: 100dvh !important;
        z-index: var(--wpbono-z-overlay, 100000) !important;
        background: rgba(0, 0, 0, 0.82) !important;
        backdrop-filter: blur(12px) saturate(115%) !important;
        -webkit-backdrop-filter: blur(12px) saturate(115%) !important;
        padding: 0 !important;
        overflow: hidden !important;
        pointer-events: auto;
        animation: wpbono-mobile-menu-in 0.2s ease-out;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-dialog {
        height: 100%;
        width: 100%;
        background: transparent !important;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-close {
        position: fixed;
        top: calc(env(safe-area-inset-top, 0px) + 10px);
        right: 16px;
        z-index: var(--wpbono-z-overlay-top, 100002);
        width: 44px;
        height: 44px;
        padding: 10px;
        margin: 0;
        border: 0;
        border-radius: var(--wpbono-radius-full, 999px);
        background: rgba(0, 0, 0, 0.22) !important;
        color: #fff !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-close svg,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-close svg path {
        color: #fff !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-content {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        /* Center the menu block vertically; safe center keeps the top
           reachable when the menu is taller than the viewport. */
        justify-content: safe center;
        /* The nav can render more than one __container (e.g. main links +
           login/join). The scroll region must be this wrapper, not the
           containers, or they overlap and clip each other. */
        overflow-y: auto;
        scrollbar-width: none;
        overscroll-behavior: contain;
        animation: wpbono-mobile-menu-rise 0.24s ease-out both;
        -webkit-overflow-scrolling: touch;
        width: 100%;
        max-width: 100%;
        margin: 0;
        border: 0;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none;
        padding: calc(env(safe-area-inset-top, 0px) + 72px) 24px max(env(safe-area-inset-bottom, 0px), 20px);
        max-height: 100dvh;
        pointer-events: auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        align-content: flex-start !important;
        gap: 2px;
        flex: 0 0 auto;
        height: auto;
        overflow: visible;
        pointer-events: auto;
        /* Center the menu column with equal side space */
        width: min(420px, 100%);
        margin-left: auto;
        margin-right: auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__responsive-container-content::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item {
        border-bottom: 0;
        padding: 0;
        margin: 0;
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item:last-child {
        border-bottom: 0;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item.has-child {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        column-gap: 8px;
        align-items: center;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item__content {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: 50px;
        font-size: var(--wpbono-mobile-type-primary);
        line-height: 1.18;
        font-weight: 600;
        font-family: var(--wpbono-mobile-nav-font);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        color: #fff !important;
        text-transform: none;
        letter-spacing: 0;
        text-shadow: none;
        padding: 8px 0;
        border-radius: 0;
        touch-action: manipulation;
        transition: none;
        pointer-events: auto;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::after {
        content: none !important;
        display: none !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item > .wp-block-navigation-item__content:hover,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item > .wp-block-navigation-item__content:focus {
        color: #fff !important;
        background: transparent !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item.current-menu-ancestor > .wp-block-navigation-item__content {
        background: transparent;
        color: #fff !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) :is(.is-style-button, .is-style-pill) {
        margin-left: 0;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content {
        width: fit-content;
        min-width: 120px;
        background: var(--wp--preset--color--primary, #d71920) !important;
        border: 1px solid var(--wp--preset--color--primary, #d71920);
        border-radius: var(--wpbono-radius-pill, 30px) !important;
        padding: 10px 20px !important;
        font-weight: 600 !important;
        font-family: var(--wpbono-mobile-nav-font);
        color: #fff !important;
        justify-content: center;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content:hover,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) :is(.is-style-button, .is-style-pill) > .wp-block-navigation-item__content:focus-visible {
        background: #fff !important;
        color: var(--wp--preset--color--primary, #d71920) !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wpbono-mobile-submenu-toggle {
        width: 44px;
        height: 44px;
        margin-right: 0;
        padding: 0;
        border: 0;
        background: transparent;
        color: rgba(255, 255, 255, 0.55);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        justify-self: end;
        position: relative;
        z-index: 2;
        pointer-events: auto;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.16s ease;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wpbono-mobile-submenu-toggle svg {
        width: 20px;
        height: 20px;
        transition: transform 0.22s ease;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wpbono-mobile-submenu-toggle[aria-expanded="true"] {
        color: #fff;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wpbono-mobile-submenu-toggle[aria-expanded="true"] svg {
        transform: rotate(180deg);
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wpbono-mobile-submenu-toggle:focus-visible {
        color: #fff;
        outline: 2px solid var(--wp--preset--color--primary, #d71920);
        outline-offset: 2px;
        border-radius: 8px;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container {
        background: transparent !important;
        box-shadow: none !important;
        border: 0 !important;
        border-radius: 0 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
        grid-column: 1 / -1;
        margin: 0 0 10px 2px;
        padding: 0 0 2px 12px;
        border-left: 1px solid rgba(255, 255, 255, 0.32) !important;
        min-width: 0;
        display: block;
        overflow: hidden;
        max-height: 420px;
        opacity: 1;
        visibility: visible;
        transition: max-height 0.24s ease-out, opacity 0.18s ease-out, margin-bottom 0.24s ease-out, visibility 0s;
    }

    /* Collapsed: keep [hidden] for state but stay display:block so the
       max-height/opacity transition can run. visibility:hidden keeps links
       out of the tab order and the a11y tree. */
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container[hidden] {
        display: block !important;
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        margin-bottom: 0;
        pointer-events: none;
        transition: max-height 0.18s ease-in, opacity 0.12s ease-in, margin-bottom 0.18s ease-in, visibility 0s linear 0.18s;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
        min-height: 36px;
        font-size: var(--wpbono-mobile-type-secondary);
        line-height: 1.3;
        font-weight: 500;
        font-family: var(--wpbono-mobile-nav-font);
        -webkit-font-smoothing: antialiased;
        text-rendering: optimizeLegibility;
        opacity: 1;
        padding: 5px 0;
        color: rgba(255, 255, 255, 0.84) !important;
        transform: none !important;
        transition: none !important;
        background: transparent !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
        transform: none !important;
        color: rgba(255, 255, 255, 0.98) !important;
        background: transparent !important;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container .wp-block-navigation-item {
        border-bottom: 0;
    }

    .wpbono-fse-theme-header .wp-block-navigation__responsive-container:is(.is-menu-open,.has-modal-open) .wp-block-navigation__submenu-container .wp-block-navigation-item:last-child {
        border-bottom: 0;
    }

    body.wpbono-mobile-menu-open .wpbono-fse-theme-header .wp-block-navigation__responsive-container-open {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.wpbono-mobile-menu-open .wpbono-fse-theme-header .wp-block-site-logo {
        position: relative;
        z-index: var(--wpbono-z-overlay-top, 100002);
    }

    .wpbono-fse-theme-header .wpbono-mobile-auth-actions {
        margin-top: auto;
        padding-top: 18px;
        padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .wpbono-fse-theme-header .wpbono-mobile-auth-actions .wpbono-mobile-auth-link {
        min-height: 44px;
        min-width: 120px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 11px 20px;
        border-radius: var(--wpbono-radius-full, 999px);
        text-decoration: none;
        font-size: var(--wpbono-mobile-type-auth);
        letter-spacing: 0.01em;
        font-weight: 600;
        line-height: 1.1;
        border: 1px solid rgba(255, 255, 255, 0.8);
        color: #fff;
        pointer-events: auto;
    }

    .wpbono-fse-theme-header .wpbono-mobile-auth-actions .wpbono-mobile-auth-link.is-join {
        background: #fff;
        color: #101827;
        border-color: #fff;
    }

    .wpbono-fse-theme-header .wpbono-mobile-auth-source {
        display: none !important;
    }

    .has-scroll-sections .wp-block-cover.alignfull {
        height: auto;
        min-height: 100dvh;
    }

    /* Only the hero (first section) stays full-height. Content-light sections
       after it size to their content so they don't leave large empty gaps. */
    .has-scroll-sections .wp-block-cover.alignfull ~ .wp-block-cover.alignfull {
        min-height: 0;
    }

    /* Mobile fallback (no Swiper): remove default block-gap seams between sections */
    .has-scroll-sections,
    .has-scroll-sections .wp-block-post-content,
    .has-scroll-sections .wp-block-post-content.is-layout-flow {
        gap: 0 !important;
    }

    .has-scroll-sections > .wp-block-cover.alignfull,
    .has-scroll-sections > .wp-block-post-content > .wp-block-cover.alignfull,
    .has-scroll-sections > .wp-block-post-content.is-layout-flow > .wp-block-cover.alignfull {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Mobile/tablet: fully disable scroll-footer reveal mechanics.
       (footer.wp-block-template-part's position/box-shadow and the
       .wp-site-blocks base padding-bottom are already 0/relative
       unconditionally — see the top of this file and the Footer behavior
       section — so only the scroll-sections state override is needed here.) */
    body.wpbono-has-scroll-sections .wp-site-blocks {
        padding-bottom: 0 !important;
    }

    body.wpbono-has-scroll-sections .wp-site-blocks > footer.wp-block-template-part {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        pointer-events: auto !important;
        box-shadow: none !important;
    }

    body.wpbono-has-scroll-sections .wp-site-blocks > main,
    body.wpbono-has-scroll-sections.wpbono-scroll-footer-visible .wp-site-blocks > main {
        transform: none !important;
    }

    #wpbono-section-nav {
        display: none;
    }
}

@media (max-width: 781px) {
    /* Stack widget/footer-content columns on mobile (keep top red nav row handled separately) */
    .wp-block-template-part[data-area="footer"] .wp-block-columns {
        flex-direction: column;
    }

    /* Keep top red footer nav row tidy and predictable on phones: the
       next-event teaser gets a row to itself, the link columns share the
       next one (wrapping to a second row if they don't fit).
       `flex-wrap` needs !important to beat core's
       `.wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap
       !important }` — without it the teaser is squeezed into a ~110px column
       and breaks one word per line. */
    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns {
        flex-direction: row;
        flex-wrap: wrap !important;
        justify-content: center;
        gap: 4px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* The wrapper's desktop vertical padding (spacing|20) plus two 44px tap
       rows made the red stripe ~200px tall on a phone. Tighten it. */
    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) {
        padding-top: 8px !important;
        padding-bottom: 8px !important;
    }

    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column {
        /* !important beats core's mobile `flex-basis: 100% !important`, which
           would otherwise force each link onto its own row. */
        /* Four link columns now (About / T&C / Disclaimer / Contact us), so the
           basis has to be small enough for all of them to share one row on a
           phone; the nowrap rule below keeps the longer labels from breaking
           mid-word inside their column. */
        flex: 1 1 22% !important;
        min-width: 0;
    }

    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column:not(:first-child) a {
        white-space: nowrap;
    }

    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column:first-child {
        flex: 0 0 100% !important;
        width: auto;
        max-width: 100%;
    }

    /* Long event titles must wrap here rather than overflow the phone. */
    .wp-site-blocks > footer .wpbono-next-event {
        flex-wrap: wrap;
        white-space: normal;
    }

    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        /* min-height already guarantees the 44px tap target; vertical padding
           on top of it just inflates the stripe. */
        padding: 0 12px;
    }

    /* Reduce header padding on mobile */
    .wpbono-fse-theme-header {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* Reduce content padding */
    .wp-block-post-content > *:not(.alignwide):not(.alignfull) {
        max-width: 100%;
    }
}

/* Smallest phones can't fit all four labels on one row: the last one would sit
   flush against the viewport edge. Widen the basis so the row breaks 3 + 1. */
@media (max-width: 359px) {
    .wp-site-blocks > footer.wp-block-template-part > .wp-block-group:not(.has-footer-bottom-bg-background-color) > .wp-block-columns > .wp-block-column:not(:first-child) {
        flex: 1 1 30% !important;
    }
}

@media (max-width: 600px) {
    /* Footer bottom: enforce deterministic 3-line layout on narrow screens */
    .has-footer-bottom-bg-background-color {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }

    .has-footer-bottom-bg-background-color > .wp-block-image.wpbono-footer-image {
        margin: 0 auto;
        flex: 0 0 auto !important;
        flex-basis: auto !important;
        width: auto !important;
    }

    .has-footer-bottom-bg-background-color > p {
        margin: 0;
    }

    .has-footer-bottom-bg-background-color > .wpbono-footer-social-row {
        width: 100%;
        justify-content: center;
        padding-right: 0;
        gap: 8px;
    }

    .has-footer-bottom-bg-background-color > .wpbono-footer-social-row > p,
    .has-footer-bottom-bg-background-color > .wpbono-footer-social-row .wp-block-social-links {
        margin: 0;
    }

    .has-footer-bottom-bg-background-color > .wpbono-footer-social-row .wp-block-social-links {
        margin-right: 0;
    }
}

/* ==========================================================================
   Account avatar (top-right menu)
   ========================================================================== */

/* The account submenu label is replaced server-side (functions.php) with the
   user's avatar. Render it as a round image; keep the dropdown chevron beside it. */
.wpbono-account-menu > .wp-block-navigation-item__content {
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

.wpbono-account-menu .wpbono-user-avatar-wrap {
    display: inline-flex;
    align-items: center;
}

/* Target the <img> inside the wrapper, not a class: ARMember serves member
   photos through the get_avatar filter with its own markup, dropping the class
   argument, so the image would otherwise render at its native (square) size. */
.wpbono-account-menu .wpbono-user-avatar-wrap img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    border: 2px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.wpbono-account-menu > .wp-block-navigation-item__content:hover .wpbono-user-avatar-wrap img,
.wpbono-account-menu > .wp-block-navigation-item__content:focus-visible .wpbono-user-avatar-wrap img {
    border-color: var(--wp--preset--color--primary, #d71920);
    transform: scale(1.05);
}

/* On light headers the white ring disappears; use a subtle dark ring instead. */
.wpbono-fse-theme-header:not(.header-light) .wpbono-account-menu .wpbono-user-avatar-wrap img {
    border-color: rgba(0, 0, 0, 0.12);
}

/* Chevron toggle sits snug against the avatar. */
.wpbono-account-menu > .wp-block-navigation-submenu__toggle {
    padding-left: 2px;
}

/* The avatar is the last (rightmost) item, so its dropdown must right-align to
   the item and expand leftward, or it overflows off the right edge. */
.wpbono-fse-theme-header .wpbono-account-menu > .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
}

/* ==========================================================================
   Display headings (performance cue)
   ========================================================================== */

/* Tighten hero cover titles. letter-spacing and line-height have no inline
   counterpart on migrated hero H1s, so they apply without !important. Size and
   weight stay owned by the heading's own attributes: set the "Display" font-size
   preset (and weight 800) on a hero heading in the editor to reach 56–64px. */
.wp-block-cover h1 {
    letter-spacing: -0.02em;
    line-height: 1.08;
}

/* ==========================================================================
   EventON plugin
   ========================================================================== */

/* EventON forces its single-event H1 to its own `--evo_font_1` (Poppins/serif)
   via `.evo_page_body .evo_sin_page .evosin_event_title` (specificity 0,3,0),
   which beats theme.json's `:where(h1)` heading rule. Match that selector with
   a higher specificity (0,3,1) so the event title uses the theme heading font. */
.evo_page_body .evo_sin_page h1.evosin_event_title {
    font-family: var(--wp--preset--font-family--raleway, "Raleway", sans-serif);
    /* Performance-cue display treatment: heavier, tighter, confident size.
       This selector (0,3,1) also outranks EventON's own font-size rule. */
    font-size: var(--wp--preset--font-size--display, clamp(40px, 6vw, 64px));
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* EventON RSVP availability badge ("OPEN — Spaces Still Available"). The RSVP
   add-on paints it with its own cyan prime color (#00aafb), which clashes with
   the palette. Repaint the positive availability badges to the theme accent
   (orange reads as "go", stays distinct from the gray "RSVP Closed" tag). Scoped
   to the availability badges only — not the generic .remaining_count, which also
   carries "No more spots left". */
.evcal_evdata_row .evors_attendance_count_data .evors_remaining_spots,
.evors_nocap_spaceleft,
.evors_noshowcount_spaceleft {
    background-color: var(--wp--preset--color--primary, #d71920) !important;
    color: #fff !important;
}

/* The "OPEN" pill inside the badge carries its own cyan background; make it a
   green "go" bubble on the red badge. */
.evors_nocap_spaceleft em.space,
.evors_noshowcount_spaceleft em.space,
.evcal_evdata_row .evors_attendance_count_data .evors_remaining_spots em {
    background-color: #2e9e44 !important;
    color: #fff !important;
}

/* RSVP "party size" plusminus input inherits the surrounding form's white
   text color, but its own box is light gray/white, so the number is
   unreadable. Force dark text on this specific input only. */
#evorsvp_form .evo_field_plusminus_container input.evo_plusminus_change_input {
    color: #000 !important;
}

/* ==========================================================================
   EventON calendar / yearly view (migrated from production Additional CSS)
   ==========================================================================
   Moved out of the site's Additional CSS so it is version-controlled and
   deploys with the theme. Values kept identical to production. Styles the
   Yearly View calendar (.evoYV), its header arrows, calendar list/boxy skins,
   event description text, RSVP manager list, and EventON list buttons.

   NOTE: --calendar-primary (#ff3832) is a separate red from the theme `primary`
   token (#d71920); it is preserved as-is to match production. The .is-style-fill
   list button here is a rounded-rect (10px) rather than the theme's global pill
   — intentional EventON-list treatment, kept as production had it. The
   --calendar-* custom properties themselves now live in the top-of-file token
   block alongside the rest of the theme's design tokens. */

.ajde_evcal_calendar.evoYV,
.ajde_evcal_calendar.evoYV * {
    font-family: var(--wp--preset--font-family--lato, "Lato", "Helvetica Neue", Arial, sans-serif) !important;
}

.ajde_evcal_calendar.evoYV {
    color: var(--calendar-light);
}

.ajde_evcal_calendar.evoYV #evcal_cur,
.ajde_evcal_calendar.evoYV .calendar_header p.evo_month_title,
.ajde_evcal_calendar.evoYV .evo_footer_nav p.evo_month_title,
.evoYV .month_title {
    display: block;
    margin: 0 0 6px !important;
    padding: 0 !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    letter-spacing: .05em;
    line-height: 1 !important;
    color: var(--calendar-primary) !important;
}

.ajde_evcal_calendar.evoYV #evcal_cur,
.ajde_evcal_calendar.evoYV .calendar_header p.evo_month_title,
.ajde_evcal_calendar.evoYV .evo_footer_nav p.evo_month_title {
    font-size: clamp(2rem, 4vw, 3.25rem) !important;
    line-height: .95 !important;
    letter-spacing: .04em;
}

.evoYV .month_title {
    font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
}

.evoYV .day_names {
    opacity: .8;
    margin-bottom: 2px !important;
}

.evoYV .day_names .day_box {
    color: var(--calendar-primary);
    font-size: 11px !important;
    line-height: 1.1 !important;
    font-weight: 700 !important;
    letter-spacing: .08em;
}

.evoYV .month_box .day_box,
.evoYV .day_names .day_box {
    min-height: 32px !important;
    padding: 2px 0 !important;
}

.evoYV .evoyv_month_in {
    padding: 0 16px 10px 0 !important;
}

.evoYV .month_box .day_box .day_box_color,
.evoYV .month_box .day_box .day_box_in {
    width: 30px !important;
    height: 30px !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    font-size: 15px !important;
    line-height: 1 !important;
}

.evoYV .month_box .day_box .day_box_in {
    color: var(--calendar-light);
    font-weight: 700 !important;
}

.evoYV .month_box .day_box .day_box_color {
    top: 0 !important;
    color: #fff;
}

/* Lock the "has event" day marker to the brand red regardless of EventON's
   per-environment day-color setting (its default is a pale cream/yellow).
   Keep the day number white for contrast on the red circle. */
.evoYV .month_box .day_box.he .day_box_color {
    background-color: var(--wp--preset--color--primary, #d71920) !important;
}

.evoYV .month_box .day_box.he .day_box_in {
    color: #fff !important;
}

/* Event-list month divider ("JULY 2026") sits on the white content background.
   Its color otherwise comes from EventON's per-environment text-color setting,
   which has shown white-on-white where that setting is light. Pin it to the
   dark heading color so it's always legible. (The Yearly View uses a separate
   .evo_month_title / .month_title, kept red on the dark calendar above.) */
.eventon_events_list:not(.evoYV) .evcal_month_line,
.eventon_events_list:not(.evoYV) .evcal_month_line p {
    color: var(--wp--preset--color--heading-text, #000000) !important;
}

.evoYV .month_box .day_box:hover .day_box_in {
    background-color: rgba(255, 255, 255, .45) !important;
    color: #fff !important;
}

.ajde_evcal_calendar.evoYV .calendar_header .evo_header_mo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ajde_evcal_calendar.evoYV .calendar_header p.evo_arrows {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

.ajde_evcal_calendar.evoYV .calendar_header .evcal_arrows {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    padding: 0 !important;
    border: 2px solid var(--calendar-primary) !important;
    border-radius: var(--wpbono-radius-full, 999px) !important;
    background: #fff !important;
    color: var(--calendar-primary) !important;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .08) !important;
}

.ajde_evcal_calendar.evoYV .calendar_header .evcal_arrows i {
    display: none !important;
}

.ajde_evcal_calendar.evoYV .calendar_header #evcal_prev::before,
.ajde_evcal_calendar.evoYV .calendar_header #evcal_next::before {
    content: "" !important;
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    border-top: 2px solid currentColor !important;
    border-right: 2px solid currentColor !important;
}

.ajde_evcal_calendar.evoYV .calendar_header #evcal_prev::before {
    transform: rotate(-135deg) translate(-1px, -1px) !important;
}

.ajde_evcal_calendar.evoYV .calendar_header #evcal_next::before {
    transform: rotate(45deg) translate(-1px, 1px) !important;
}

.ajde_evcal_calendar.evoYV .calendar_header .evcal_arrows:hover,
.ajde_evcal_calendar.evoYV .calendar_header .evcal_arrows:focus-visible {
    background: var(--calendar-primary) !important;
    color: #fff !important;
}

.ajde_evcal_calendar.color #evcal_list.eventon_events_list .eventon_list_event .evoet_cx span.evcal_event_title {
    color: #fff;
}

.ajde_evcal_calendar.boxy #evcal_list .eventon_list_event .desc_trig.hasFtIMG .evcal_desc {
    padding-left: 55px !important;
}

.eventon_list_event .evo_metarow_details .eventon_full_description p,
.eventon_list_event .evo_metarow_details .eventon_full_description li {
    font-size: 14px;
    line-height: 1.45;
    padding: 0;
}

.eventon_desc_in .wp-block-heading {
    margin-top: 1em;
}

.eventon_rsvp_rsvplist p.rsvpmanager_event {
    background-color: var(--calendar-light);
}

.eventon_rsvp_rsvplist p.rsvpmanager_event.pastevent {
    background-color: var(--calendar-gray);
}

.evo_lightbox .evo_tax_social_media a,
.evocard_row .evo_metarow_organizer .evo_card_organizer_social a {
    font-size: inherit;
}

.eventon_events_list .eventon_list_event .wp-block-button.is-style-fill a.wp-block-button__link {
    background-color: var(--calendar-button-bg);
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 1.125em;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    transition: filter 150ms ease, transform 150ms ease;
}

.eventon_events_list .eventon_list_event .wp-block-button.is-style-fill a.wp-block-button__link:hover {
    filter: brightness(.95);
    transform: translateY(-1px);
}

.eventon_events_list .eventon_list_event .wp-block-button.is-style-fill a.wp-block-button__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.evo_page_content .ajde_events {
    min-width: 0;
    overflow: hidden;
}

.eventon_single_event .wp-block-embed,
.eventon_single_event iframe {
    max-width: 100%;
    overflow: hidden;
}

@media (min-width: 1024px) {
    .evoYV .evoyv_year_grid {
        justify-content: flex-start !important;
    }
    .evoYV .evoyv_month {
        width: 25% !important;
    }
    .evoYV .evoyv_month_in {
        padding-right: 12px !important;
    }
}

@media (max-width: 768px) {
    .ajde_evcal_calendar.evoYV .calendar_header .evo_header_mo {
        justify-content: flex-start !important;
    }
    .ajde_evcal_calendar.evoYV #evcal_cur,
    .ajde_evcal_calendar.evoYV .calendar_header p.evo_month_title,
    .ajde_evcal_calendar.evoYV .evo_footer_nav p.evo_month_title {
        font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
    }
    .evoYV .evoyv_month_in {
        padding-right: 10px !important;
    }
}

/* Full-bleed cover as the last content block: drop main's global bottom
   padding so the white page background doesn't leak as a strip above the
   footer (e.g. the ARMember login/restricted page, whose content is a single
   100vh alignfull cover). */
main:has(> .entry-content > .wp-block-cover.alignfull:last-child) {
    padding-bottom: 0;
}

/* ==========================================================================
   ARMember forms — global theme typography (form-ID agnostic)
   --------------------------------------------------------------------------
   ARMember generates per-form CSS scoped to `.arm_form_<id>` (e.g. 102 login,
   112 registration, and a new id per future form) that hardcodes its own font
   with `!important`. So `font-family: inherit`, the global body font, and any
   per-form override all lose — and per-form rules don't scale to new forms.

   Anchor instead on `.arm-default-form`, the skin base class present on every
   default-skin ARMember form. Repeating it four times raises specificity above
   ARMember's longest generated selectors (~4 classes) so these rules win by
   specificity alone — independent of source order, which Breeze's CSS
   minification can reshuffle. Verified live against forms 102 and 112.

   Body → Lato, headings/section titles → Raleway, matching theme.json.

   The Lato rule targets every descendant (`*`) rather than enumerating
   ARMember's many legacy classes (.arm_module_*, .arm_plan_*, .arm_order_*,
   classless summary divs, …) — that whack-a-mole never ends. Icons are the one
   exception: they use the `.armfa` class with FontAwesome set on the element,
   so `:not([class*="armfa"])` preserves them. Raleway uses a 5× anchor so it
   outranks the Lato `*` rule (which the icon `:not` pushes to a 4-class score).
   Verified live on forms 102 and 112: all text → Lato, titles → Raleway, icons
   keep FontAwesome.
   ========================================================================== */
.arm-default-form.arm-default-form.arm-default-form.arm-default-form,
.arm-default-form.arm-default-form.arm-default-form.arm-default-form *:not([class*="armfa"]) {
    font-family: var(--wp--preset--font-family--lato) !important;
}

.arm-default-form.arm-default-form.arm-default-form.arm-default-form.arm-default-form .arm-df__heading-text,
.arm-default-form.arm-default-form.arm-default-form.arm-default-form.arm-default-form .arm_setup_form_title,
.arm-default-form.arm-default-form.arm-default-form.arm-default-form.arm-default-form .arm_setup_section_title_wrapper {
    font-family: var(--wp--preset--font-family--raleway) !important;
}

/* Text color. Some pages (e.g. /join/) wrap the form in a Cover block, which
   forces inner text to white for its dark image. ARMember colors its headings,
   inputs, links and submit button explicitly, so those stay legible, but plan
   labels, gateway labels and HTML-field text have no color and inherit the
   Cover's white -> white-on-white on the form's white cards. Setting the color
   only on the form container (NOT descendants, NOT *) fixes those via
   inheritance while leaving every explicitly-colored element (headings, inputs,
   red links, white-on-red button) untouched. Verified live on form 112. */
.arm-default-form.arm-default-form.arm-default-form.arm-default-form {
    color: var(--wp--preset--color--body-text) !important;
}

/* The Join page's full-width Cover uses fluid block padding that reaches about
   81px per side at a 390px viewport. Combined with ARMember's nested 30px
   padding, that leaves form controls only about 124px wide. Keep the desktop
   composition intact, but give the registration form a compact mobile gutter. */
@media (max-width: 600px) {
    body.page-id-4844 .entry-content > .wp-block-cover.alignfull {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }

    body.page-id-4844 .arm_module_forms_container {
        padding-right: 0 !important;
        padding-left: 0 !important;
    }

    body.page-id-4844 .arm-default-form {
        padding-right: 12px !important;
        padding-left: 12px !important;
    }
}

/* ==========================================================================
   ARMember account/profile widgets ("My Account" page) — global typography
   --------------------------------------------------------------------------
   Separate from the `.arm-default-form` skin above: the profile page is built
   from `[arm_profile]`, `[arm_current_membership]` and `[arm_transactions]`
   shortcodes, each rendering its own inline `<style>` block that hardcodes a
   different fallback font per widget (Roboto for profile fields/name/tabs,
   Poppins for tab links, NotoSans for pagination) with `!important` — a
   cacophony of 3-4 fonts on one page. `.arm_profile_container` wraps the
   profile widget end-to-end (avatar, tabs, detail rows, delete-confirm
   popup); `.arm_shortcode_grid_container` is the shared base class on both
   the membership and transactions widgets. ARMember's longest generated
   chain is 5 classes, so a 6x-repeated anchor (7 with `:not`) outranks it by
   specificity alone, independent of source order. */
.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container,
.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container *:not([class*="armfa"]),
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container *:not([class*="armfa"]) {
    font-family: var(--wp--preset--font-family--lato) !important;
}

/* Section titles ("Personal Details", the member name, "Current Membership",
   "Transactions") read as headings, so give them Raleway to match every
   other heading on the site. */
.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container .arm_profile_detail_text,
.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container.arm_profile_container .arm_profile_link,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_current_membership_heading_main,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_transactions_heading_main {
    font-family: var(--wp--preset--font-family--raleway) !important;
}

/* Action buttons ("Make Payment", cancel/renew/update-card, view-invoice)
   ship as small sharp-cornered blue rectangles with underlined text — the
   generated CSS again hardcodes color/border/radius/decoration with
   `!important` at a 3-class chain, so a 4x-repeated anchor is enough to
   outrank it. Repaint them as the site's pill button (theme.json
   `styles.elements.button`) instead of matching that CSS by fighting font
   alone. Verified live on the "Make Payment" button. */
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_renew_subscription_button,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_cancel_subscription_button,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_update_card_button_style,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_view_invoice_button {
    background-color: var(--wp--preset--color--primary) !important;
    border: 1px solid var(--wp--preset--color--primary) !important;
    border-radius: var(--wpbono-radius-pill, 30px) !important;
    color: var(--wp--preset--color--white) !important;
    text-decoration: none !important;
    padding: 6px 18px !important;
}

.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_renew_subscription_button:hover,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_cancel_subscription_button:hover,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_update_card_button_style:hover,
.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container.arm_shortcode_grid_container .arm_view_invoice_button:hover {
    background-color: var(--wp--preset--color--white) !important;
    color: var(--wp--preset--color--primary) !important;
}

/* ==========================================================================
   WPAdverts classifieds
   --------------------------------------------------------------------------
   WPAdverts owns the listing markup and utility classes; WPBono supplies the
   visual language. Keep these overrides scoped to the plugin's stable wrapper
   classes so unrelated forms and cards continue to follow theme.json.
   ========================================================================== */
.wpadverts-blocks,
.wpadverts-single,
.wpadverts-form,
.wpadverts-cpt,
.wpadverts-cpt-data-table,
.adverts-options,
.adverts-list,
.adverts-form {
    --wpbono-adverts-surface: var(--wp--preset--color--white, #fff);
    --wpbono-adverts-ink: var(--wp--preset--color--body-text, #333);
    --wpbono-adverts-muted: var(--wp--preset--color--text-muted, #6b6b6b);
    --wpbono-adverts-border: var(--wp--preset--color--border-light, #e5e5e5);
    --wpbono-adverts-input-border: var(--wp--preset--color--border-input, #dadada);
    --wpbono-adverts-primary: var(--wp--preset--color--primary, #d71920);
    --wpbono-adverts-accent: var(--wp--preset--color--accent, #ff6900);
    color: var(--wpbono-adverts-ink);
    font-family: var(--wp--preset--font-family--lato, "Lato", sans-serif);
}

.wpadverts-blocks :is(h1, h2, h3, h4, h5, h6),
.wpadverts-single :is(h1, h2, h3, h4, h5, h6),
.adverts-form :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--wp--preset--font-family--raleway, "Raleway", sans-serif);
}

/* Legacy search and publishing forms. */
.adverts-options,
.adverts-form {
    border: 1px solid var(--wpbono-adverts-border);
    border-radius: var(--wpbono-radius-card, 14px);
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(0, 0, 0, .05));
}

.adverts-form {
    padding: clamp(18px, 3vw, 30px);
}

.adverts-options {
    margin-bottom: var(--wp--preset--spacing--30, 30px);
    padding: 18px;
}

.wpadverts-form label,
.adverts-form label,
.adverts-search-input-label,
.wpa-field-label {
    color: var(--wp--preset--color--text-heading, #222);
    font-weight: 700;
}

.wpadverts-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], select, textarea),
.adverts-form :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="password"], select, textarea),
.adverts-search :is(input[type="text"], input[type="search"], select) {
    min-height: 48px;
    border: 1px solid var(--wpbono-adverts-input-border);
    border-radius: 10px;
    background: var(--wpbono-adverts-surface);
    color: var(--wpbono-adverts-ink);
    font: inherit;
    box-shadow: none;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.wpadverts-form textarea,
.adverts-form textarea {
    min-height: 140px;
}

.wpadverts-form :is(input, select, textarea):focus,
.adverts-form :is(input, select, textarea):focus,
.adverts-search :is(input, select):focus {
    border-color: var(--wpbono-adverts-primary);
    outline: 0;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wpbono-adverts-primary) 18%, transparent);
}

.wpadverts-form .wpa-field-desc,
.adverts-form .adverts-field-description {
    color: var(--wpbono-adverts-muted);
    font-size: var(--wp--preset--font-size--small, 14px);
}

/* TinyMCE icons need explicit contrast after WPAdverts toolbar buttons inherit
   the classifieds primary background. */
.wpadverts-form .mce-toolbar .mce-btn button .mce-ico {
    color: var(--wp--preset--color--white, #fff);
}

/* Category shortcuts shown above the archive search. */
.wpadverts-block-categories .wpa-block-categories-item {
    overflow: hidden;
    min-height: 82px;
    border-color: var(--wpbono-adverts-border);
    border-radius: var(--wpbono-radius-card, 14px);
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(0, 0, 0, .05));
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wpadverts-block-categories .wpa-block-categories-item:hover,
.wpadverts-block-categories .wpa-block-categories-item:focus-within {
    border-color: color-mix(in srgb, var(--wpbono-adverts-primary) 32%, var(--wpbono-adverts-border));
    box-shadow: var(--wp--preset--shadow--md, 0 4px 10px rgba(0, 0, 0, .08));
    transform: translateY(-2px);
}

.wpadverts-category-link,
.wpa-block-categories-title {
    color: var(--wp--preset--color--text-heading, #222);
    font-family: var(--wp--preset--font-family--raleway, "Raleway", sans-serif);
    text-decoration: none;
}

.wpadverts-category-link:hover,
.wpadverts-category-link:focus-visible {
    color: var(--wpbono-adverts-primary);
}

/* Buttons and compact controls. The longer selectors intentionally outrank
   WPAdverts' utility classes without using !important color declarations. */
.wpadverts-blocks :is(.button, button, input[type="submit"]),
.wpadverts-single :is(.button, button, input[type="submit"]),
.adverts-form :is(.adverts-button, button, input[type="submit"]),
.adverts-options :is(.adverts-button, .adverts-button-small, input[type="submit"]) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid var(--wpbono-adverts-primary);
    border-radius: var(--wpbono-radius-pill, 30px);
    background: var(--wpbono-adverts-primary);
    color: var(--wp--preset--color--white, #fff);
    font: 700 15px/1.2 var(--wp--preset--font-family--lato, "Lato", sans-serif);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.wpadverts-blocks :is(.button, button, input[type="submit"]):hover,
.wpadverts-single :is(.button, button, input[type="submit"]):hover,
.adverts-form :is(.adverts-button, button, input[type="submit"]):hover,
.adverts-options :is(.adverts-button, .adverts-button-small, input[type="submit"]):hover {
    background: var(--wp--preset--color--white, #fff);
    color: var(--wpbono-adverts-primary);
    transform: translateY(-1px);
}

.wpadverts-blocks :is(.button, button, input[type="submit"]):focus-visible,
.wpadverts-single :is(.button, button, input[type="submit"]):focus-visible,
.adverts-form :is(.adverts-button, button, input[type="submit"]):focus-visible,
.adverts-options :is(.adverts-button, .adverts-button-small, input[type="submit"]):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--wpbono-adverts-primary) 35%, transparent);
    outline-offset: 3px;
}

/* Block list cards. */
.wpadverts-block-list .wpa-block-list-results {
    gap: clamp(16px, 2.2vw, 26px);
}

.wpadverts-block-list .wpa-result-item {
    overflow: hidden;
    border: 1px solid var(--wpbono-adverts-border);
    border-radius: var(--wpbono-radius-card, 14px);
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(0, 0, 0, .05));
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.wpadverts-block-list .wpa-result-item:hover,
.wpadverts-block-list .wpa-result-item:focus-within {
    border-color: color-mix(in srgb, var(--wpbono-adverts-primary) 32%, var(--wpbono-adverts-border));
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--md, 0 4px 10px rgba(0, 0, 0, .08));
    transform: translateY(-2px);
}

.wpadverts-block-list .wpa-result-details {
    min-width: 0;
    gap: 16px;
    padding: 18px;
}

.wpadverts-block-list .wpa-result-title-text {
    color: var(--wp--preset--color--text-heading, #222);
    font-family: var(--wp--preset--font-family--raleway, "Raleway", sans-serif);
    font-size: clamp(18px, 1.4vw, 21px);
    font-weight: 700;
    line-height: 1.25;
}

.wpadverts-block-list .wpa-result-link:hover .wpa-result-title-text,
.wpadverts-block-list .wpa-result-link:focus-visible .wpa-result-title-text {
    color: var(--wpbono-adverts-primary);
}

.wpadverts-block-list .wpa-result-meta {
    gap: 7px 14px;
    flex-wrap: wrap;
    color: var(--wpbono-adverts-muted);
    font-size: var(--wp--preset--font-size--small, 14px);
}

.wpadverts-block-list .wpa-result-last-text {
    color: var(--wpbono-adverts-primary);
    font-size: clamp(18px, 1.6vw, 23px);
    font-weight: 700;
    white-space: nowrap;
}

.wpadverts-block-list .advert-is-featured {
    background: color-mix(in srgb, var(--wpbono-adverts-accent) 7%, white);
}

.wpadverts-block-list .wpa-result-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 250ms ease;
}

.wpadverts-block-list .wpa-result-item:hover img {
    transform: scale(1.025);
}

/* Legacy shortcode list, retained for existing pages. */
.adverts-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 2.2vw, 26px);
    background: transparent;
}

.adverts-list .advert-item {
    position: relative;
    overflow: hidden;
    width: auto;
    margin: 0;
    border: 1px solid var(--wpbono-adverts-border);
    border-radius: var(--wpbono-radius-card, 14px);
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(0, 0, 0, .05));
}

.adverts-list .advert-img {
    aspect-ratio: 4 / 3;
    background: #f5f5f5;
}

.adverts-list .advert-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.adverts-list .advert-post-title,
.adverts-list .advert-published {
    padding-right: 18px;
    padding-left: 18px;
}

.adverts-list .advert-post-title {
    padding-top: 16px;
    font-family: var(--wp--preset--font-family--raleway, "Raleway", sans-serif);
    font-size: 20px;
    font-weight: 700;
}

.adverts-list .advert-published {
    padding-bottom: 18px;
    color: var(--wpbono-adverts-muted);
    font-size: var(--wp--preset--font-size--small, 14px);
}

.adverts-list .advert-price {
    color: var(--wpbono-adverts-primary);
    font-size: 20px;
    font-weight: 700;
}

/* Single advert and structured detail panels. */
.wpadverts-single,
.wpadverts-cpt,
.wpadverts-cpt-data-table {
    color: var(--wpbono-adverts-ink);
    font-family: var(--wp--preset--font-family--lato, "Lato", sans-serif);
}

.wpadverts-single .adverts-single-box,
.wpadverts-single .adverts-single-grid-details {
    overflow: hidden;
    border: 1px solid var(--wpbono-adverts-border);
    border-radius: var(--wpbono-radius-card, 14px);
    background: var(--wpbono-adverts-surface);
    box-shadow: var(--wp--preset--shadow--sm, 0 1px 2px rgba(0, 0, 0, .05));
}

.wpadverts-single .adverts-single-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
}

.wpadverts-single .adverts-single-author-avatar img {
    border-radius: 50%;
}

.wpadverts-single .adverts-price-box {
    border-radius: var(--wpbono-radius-full, 999px);
    background: var(--wpbono-adverts-primary);
    color: var(--wp--preset--color--white, #fff);
    font-weight: 700;
}

.wpadverts-single .adverts-grid-row {
    border-color: var(--wpbono-adverts-border);
}

.wpadverts-single .adverts-round-icon {
    background: color-mix(in srgb, var(--wpbono-adverts-primary) 10%, white);
    color: var(--wpbono-adverts-primary);
}

.wpadverts-single .adverts-content {
    margin-top: var(--wp--preset--spacing--30, 30px);
    color: var(--wpbono-adverts-ink);
    font-size: 18px;
    line-height: 1.65;
}

/* Pagination and status messages. */
.wpadverts-pagination,
.adverts-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: var(--wp--preset--spacing--30, 30px);
}

.wpadverts-pagination .page-numbers,
.adverts-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    border: 1px solid var(--wpbono-adverts-border);
    border-radius: 50%;
    background: var(--wpbono-adverts-surface);
    color: var(--wpbono-adverts-ink);
    text-decoration: none;
}

.wpadverts-pagination .page-numbers.current,
.wpadverts-pagination a.page-numbers:hover,
.adverts-pagination .page-numbers.current,
.adverts-pagination a.page-numbers:hover {
    border-color: var(--wpbono-adverts-primary);
    background: var(--wpbono-adverts-primary);
    color: var(--wp--preset--color--white, #fff);
}

.wpadverts-flash,
.adverts-flash,
.adverts-list-empty {
    border-radius: var(--wpbono-radius-md, 12px);
    font-family: var(--wp--preset--font-family--lato, "Lato", sans-serif);
}

@media (max-width: 781px) {
    .adverts-list {
        grid-template-columns: 1fr;
    }

    .wpadverts-block-list .wpa-block-list-results {
        grid-template-columns: 1fr;
    }

    .wpadverts-block-list .wpa-result-item {
        flex-direction: column;
    }

    .wpadverts-block-list .wpa-result-item > .atw-flex-none {
        width: 100%;
    }

    .wpadverts-block-list .wpa-result-details,
    .wpadverts-single .adverts-single-box {
        flex-direction: column;
        align-items: stretch;
    }

    .wpadverts-block-list .wpa-detail-right {
        justify-content: flex-start;
    }

    .adverts-form {
        padding: 16px;
    }
}

/* prefers-reduced-motion already handled globally near the top of this file. */