/* Fonts load via App.razor <link> + preconnect (avoids render-blocking @import). */

/* Sticky chrome: top banner + nav stick together above page content. */
.site-chrome {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.site-top-banner {
    --site-top-banner-bg: #1c1d22;
    --site-top-banner-fg: #f4f2ed;
    background: var(--site-top-banner-bg);
    color: var(--site-top-banner-fg);
    border-bottom: 1px solid color-mix(in srgb, var(--site-top-banner-fg) 18%, transparent);
}

.site-top-banner-inner {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.55rem 1.25rem;
    box-sizing: border-box;
    text-align: center;
}

.site-top-banner-content,
.site-top-banner-content.cms-content {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.4;
    color: inherit;
}

.site-top-banner-content :is(p, div) {
    margin: 0;
}

.site-top-banner-content a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    font-weight: 600;
    pointer-events: auto;
    touch-action: manipulation;
}

.site-top-banner-content a:hover {
    opacity: 0.88;
}

/* Site-wide booking / floating badge (bottom-right). Colors follow theme tokens. */
.site-floating-badge {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1040;
    margin: 0;
    border: 0;
    border-radius: 999px;
    padding: 0.85rem 1.35rem;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1.2;
    color: var(--btn-primary-text);
    background: var(--btn-primary-bg);
    box-shadow:
        0 10px 28px color-mix(in srgb, var(--btn-primary-bg) 35%, transparent),
        0 2px 8px color-mix(in srgb, #000 22%, transparent);
    cursor: pointer;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.site-floating-badge:hover {
    background: var(--btn-primary-hover-bg);
    transform: translateY(-2px);
}

.site-floating-badge:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 3px;
}

.site-floating-badge:active {
    transform: translateY(0);
}

@media (max-width: 575.98px) {
    .site-floating-badge {
        right: 0.85rem;
        bottom: 0.85rem;
        padding: 0.75rem 1.1rem;
        font-size: 0.9rem;
    }
}

.site-top-banner--preview {
    border-radius: var(--radius-md, 0.35rem);
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.site-header {
    position: relative;
    z-index: 1;
    background: var(--header-bg);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.site-nav {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    min-height: var(--nav-height);
    box-sizing: border-box;
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    text-decoration: none;
    color: var(--heading-color);
    flex-shrink: 0;
}

.brand-logo {
    height: 2.5rem;
    width: auto;
}

/* Swap the wordmark by theme (data-theme is set pre-paint, so no flash).
   Default (no attribute) follows the site's light default. */
.brand-logo-inverse {
    display: none;
}

html[data-theme="dark"] .brand-logo-default {
    display: none;
}

html[data-theme="dark"] .brand-logo-inverse {
    display: inline-block;
}

.brand-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.04em;
    line-height: 1;
}

.site-nav .links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.15rem 0.5rem;
    min-width: 0;
}

.site-nav .nav-link {
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.2s, color 0.2s;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    color: var(--heading-color);
}

.site-nav .nav-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-left: auto;
    flex-shrink: 0;
}

/* Admin-only shortcut into the block editor for the page being viewed. */
.admin-fab-stack {
    position: fixed;
    top: 5.25rem;
    right: 1rem;
    z-index: 1050;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    max-width: calc(100vw - 2rem);
}

.page-edit-fab,
.admin-fab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    transition: transform 0.14s ease, box-shadow 0.14s ease, background 0.14s ease;
}

.page-edit-fab {
    background: var(--accent-gold);
    color: #1a1a1a;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 65%, #000);
}

.page-edit-fab:hover {
    background: color-mix(in srgb, var(--accent-gold) 90%, #000);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
    color: #1a1a1a;
}

.page-edit-fab:focus-visible {
    outline: 2px solid #1a1a1a;
    outline-offset: 2px;
}

.admin-fab {
    background: rgba(22, 24, 28, 0.88);
    color: #f5f5f5;
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}

.admin-fab:hover {
    background: rgba(22, 24, 28, 0.96);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.32);
    transform: translateY(-1px);
    color: #fff;
}

.admin-fab:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.page-edit-fab svg,
.admin-fab svg {
    width: 16px;
    height: 16px;
    flex: none;
}

/* Feedback shortcuts (Report a bug / Request a feature) live in the same stack. */
.feedback-fab {
    cursor: pointer;
    font-family: inherit;
}

.feedback-fab-bug {
    background: rgba(120, 30, 34, 0.9);
    border-color: rgba(255, 120, 120, 0.35);
}

.feedback-fab-bug:hover {
    background: rgba(140, 34, 38, 0.96);
}

.feedback-fab-feature {
    background: rgba(30, 64, 96, 0.9);
    border-color: rgba(120, 190, 255, 0.35);
}

.feedback-fab-feature:hover {
    background: rgba(34, 76, 116, 0.96);
}

/* Chips for elements captured by the bug-report picker. */
.feedback-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}

.feedback-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem 0.15rem 0.5rem;
    background: var(--surface-bg-muted, rgba(127, 127, 127, 0.12));
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.78rem;
}

.feedback-chip-tag {
    font-family: var(--font-mono, monospace);
    color: var(--accent-gold, #c9a24b);
}

.feedback-chip-remove {
    border: none;
    background: transparent;
    color: inherit;
    cursor: pointer;
    line-height: 1;
    font-size: 1rem;
    padding: 0;
    opacity: 0.7;
}

.feedback-chip-remove:hover {
    opacity: 1;
}

/* Hidden while the element picker is active so page clicks reach the page. */
.contact-form-modal-overlay.is-hidden {
    display: none;
}

/* Element picker overlay (bug report "select an element"). */
#bhis-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    cursor: crosshair;
}

#bhis-picker-highlight {
    position: absolute;
    pointer-events: none;
    z-index: 99998;
    border: 2px solid rgba(0, 200, 255, 0.85);
    background: rgba(0, 200, 255, 0.10);
    border-radius: 3px;
    transition: top 0.06s, left 0.06s, width 0.06s, height 0.06s;
    box-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
}

#bhis-picker-tooltip {
    position: absolute;
    pointer-events: none;
    z-index: 100000;
    background: rgba(15, 15, 25, 0.92);
    color: #46d5ff;
    font-family: var(--font-mono, monospace);
    font-size: 0.72rem;
    padding: 2px 8px;
    border-radius: 4px;
    white-space: nowrap;
    border: 1px solid rgba(0, 200, 255, 0.4);
}

#bhis-picker-bar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 1.2rem;
    background: rgba(15, 15, 25, 0.95);
    border: 1px solid rgba(0, 200, 255, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    color: #f5f5f5;
}

.bhis-picker-bar-icon {
    font-size: 1.1rem;
}

.bhis-picker-bar-text {
    font-size: 0.85rem;
    white-space: nowrap;
}

.bhis-picker-bar-cancel {
    background: #ef4444;
    color: #fff;
    border: none;
    padding: 0.3rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.bhis-picker-bar-cancel:hover {
    opacity: 0.85;
}

@media (max-width: 640px) {
    .admin-fab-stack {
        top: auto;
        bottom: 1rem;
        right: 1rem;
    }

    .page-edit-fab,
    .admin-fab {
        padding: 0.6rem;
    }

    .page-edit-fab span,
    .admin-fab span {
        display: none;
    }
}

.nav-section {
    position: relative;
}

.nav-section-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.nav-section-trigger:hover,
.nav-section.is-open .nav-section-trigger {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    color: var(--heading-color);
}

.nav-chevron {
    display: inline-block;
    width: 0.45rem;
    height: 0.45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg) translateY(-1px);
    transition: transform 0.2s;
}

.nav-section.is-open .nav-chevron {
    transform: rotate(-135deg) translateY(1px);
}

.nav-drawer {
    display: none;
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 1100;
    min-width: 18rem;
    width: max-content;
    max-height: min(70vh, 28rem);
    overflow-y: auto;
    padding: 0.5rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md, 0 12px 32px rgba(0, 0, 0, 0.18));
}

.nav-section.is-open .nav-drawer {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.nav-drawer-heading {
    margin: 0.55rem 0.35rem 0.15rem;
    padding: 0.35rem 0.4rem 0.15rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
}

.nav-drawer-heading:first-child,
.nav-drawer-overview + .nav-drawer-heading,
.nav-drawer-group:first-child .nav-drawer-heading,
.nav-drawer-overview + .nav-drawer-group .nav-drawer-heading {
    margin-top: 0.15rem;
    border-top: none;
}

.nav-drawer-group {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.nav-drawer-group-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    margin: 0.2rem 0 0;
    padding: 0.45rem 0.65rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
}

.nav-drawer-group-trigger:hover,
.nav-drawer-group.is-open .nav-drawer-group-trigger {
    color: var(--heading-color);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.nav-drawer-group.is-open .nav-drawer-group-trigger .nav-chevron {
    transform: rotate(180deg);
}

.nav-drawer-group-links {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding-left: 0.35rem;
}

/* ─── Tree-line navigation ─── */
.nav-drawer > .nav-tree-children {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

.nav-drawer > .nav-tree-children > .nav-tree-node > .nav-tree-branch {
    display: none;
}

.nav-tree-children {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}

/* Tree lines only appear inside groups */
.nav-tree-group > .nav-tree-children {
    margin-left: 0.5rem;
    padding-left: 0.7rem;
    border-left: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
}

/* Hide branch arms for top-level flat items */
.nav-tree-children > .nav-tree-node > .nav-tree-branch {
    display: none;
}

/* Show branch arms only inside groups */
.nav-tree-group > .nav-tree-children > .nav-tree-node > .nav-tree-branch {
    display: block;
}

.nav-tree-node {
    display: flex;
    align-items: flex-start;
    position: relative;
}

/* Horizontal branch arm from the vertical border */
.nav-tree-branch {
    flex-shrink: 0;
    width: 0.6rem;
    height: 0;
    border-bottom: 1px solid var(--border-color, rgba(128, 128, 128, 0.25));
    margin-top: 0.85rem;
}

/* For last item, clip the parent border-left at this node's midpoint */
.nav-tree-children > .nav-tree-node:last-child {
    /* The border-left should stop at this item. Use a background mask. */
}

/* Group label styling within tree */
.nav-tree-group {
    flex: 1;
}

.nav-tree-label {
    display: block;
    padding: 0.3rem 0.4rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Collapsible group toggle */
.nav-tree-toggle {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.4rem;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}

.nav-tree-toggle:hover {
    color: var(--heading-color);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
}

.nav-tree-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1;
    border-radius: 2px;
    background: var(--border-color, rgba(128, 128, 128, 0.2));
    color: var(--text-muted);
}

.nav-tree-toggle:hover .nav-tree-toggle-icon {
    background: color-mix(in srgb, var(--accent-gold) 25%, transparent);
    color: var(--heading-color);
}

/* Links inside tree nodes */
.nav-tree-node > .nav-drawer-link {
    flex: 1;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    white-space: nowrap;
}

.nav-drawer-link {
    display: block;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
    color: var(--text-primary);
    transition: background 0.15s, color 0.15s;
}

.nav-drawer-link:hover,
.nav-drawer-link.active {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    color: var(--heading-color);
}

.nav-drawer-overview {
    font-size: 0.8125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0.25rem;
    padding-bottom: 0.6rem;
}

.nav-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1;
    border: none;
    background: transparent;
    cursor: default;
}

.nav-drawer-backdrop--menu {
    background: rgba(0, 0, 0, 0.35);
}

@media (max-width: 991.98px) {
    .nav-drawer-backdrop--section {
        display: none;
    }
}

@media (min-width: 992px) {
    .nav-drawer-backdrop--menu {
        display: none;
    }
}

.nav-menu-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    flex: 0 0 auto;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.nav-menu-toggle:hover {
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
    color: var(--heading-color);
}

.nav-menu-toggle:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
}

.nav-menu-toggle-bar {
    display: block;
    width: 1.125rem;
    height: 2px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.site-header.is-mobile-nav-open .nav-menu-toggle-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-mobile-nav-open .nav-menu-toggle-bar:nth-child(2) {
    opacity: 0;
}

.site-header.is-mobile-nav-open .nav-menu-toggle-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

@media (min-width: 992px) {
    .site-nav .links {
        display: flex !important;
    }
}

@media (max-width: 991.98px) {
    .site-nav {
        flex-wrap: wrap;
        gap: 0.45rem 0.75rem;
        padding: 0.55rem 1rem;
    }

    /* Row 1: logo left, hamburger right */
    .site-nav .brand {
        order: 1;
        flex: 1 1 0;
        min-width: 0;
    }

    .site-nav .brand-logo {
        height: 2.15rem;
    }

    .site-nav .brand-text {
        font-size: 1.25rem;
    }

    .nav-menu-toggle {
        display: inline-flex;
        order: 2;
        flex: 0 0 auto;
    }

    /* Row 2: search, auth, theme — all on one line */
    .site-nav .nav-actions {
        order: 3;
        width: 100%;
        margin-left: 0;
        gap: 0.4rem;
        flex-wrap: nowrap;
    }

    .site-nav .nav-actions .nav-search {
        flex: 1 1 0;
        min-width: 0;
    }

    .site-nav .nav-actions .nav-search-input {
        width: 100%;
        max-width: none;
    }

    .site-nav .nav-actions .member-auth-nav {
        flex: 0 0 auto;
    }

    .site-nav .nav-actions .theme-toggle {
        flex: 0 0 auto;
    }

    /* Row 3: links (menu drawer) */
    .site-nav .links {
        display: none;
        width: 100%;
        order: 4;
        flex-direction: column;
        align-items: stretch;
        gap: 0.25rem;
        padding-top: 0.65rem;
        margin-top: 0.15rem;
        border-top: 1px solid var(--border-color);
    }

    .site-header.is-mobile-nav-open .site-nav .links {
        display: flex;
        max-height: calc(100dvh - var(--site-chrome-height, var(--nav-height, 4.25rem)) - 0.75rem);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .nav-section {
        width: 100%;
    }

    .nav-section-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .nav-drawer {
        position: static;
        display: none;
        width: max-content;
        min-width: 0;
        max-width: none;
        max-height: none;
        overflow: visible;
        margin: 0.15rem 0 0.35rem 0.75rem;
        padding: 0.35rem 0 0.35rem 0.65rem;
        border: none;
        border-left: 2px solid color-mix(in srgb, var(--accent-gold) 40%, var(--border-color));
        border-radius: 0;
        box-shadow: none;
        background: transparent;
    }

    .nav-section.is-open .nav-drawer {
        display: flex;
    }

    .nav-drawer-link {
        padding-left: 0.65rem;
    }
}

/* Narrow phones: compact auth and search further */
@media (max-width: 420px) {
    .site-nav .nav-actions {
        gap: 0.3rem;
    }

    .site-nav .nav-actions .nav-search-input {
        font-size: 0.82rem;
        padding-left: 1.75rem;
        padding-right: 0.5rem;
    }

    .member-auth-signin,
    .member-auth-register {
        padding: 0.32rem 0.65rem;
        font-size: 0.78rem;
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--surface-bg);
    color: var(--heading-color);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s, transform 0.15s;
}

.theme-toggle:hover {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg));
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.theme-toggle svg {
    display: none;
    flex-shrink: 0;
}

/* One icon only — driven by html[data-theme] (set in head before paint).
   Missing attribute = light (same as first-visit default). */
html[data-theme="dark"] .theme-toggle .icon-sun {
    display: block;
}

html[data-theme="light"] .theme-toggle .icon-moon,
html:not([data-theme]) .theme-toggle .icon-moon {
    display: block;
}

html[data-theme="dark"] .theme-toggle {
    color: var(--accent-gold);
    background: var(--bhis-slate);
    border-color: var(--border-color-strong);
}

html[data-theme="light"] .theme-toggle,
html:not([data-theme]) .theme-toggle {
    color: #5c4a10;
    background: #ffffff;
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-sm);
}

html[data-theme="light"] .theme-toggle:hover,
html:not([data-theme]) .theme-toggle:hover {
    color: var(--bhis-rust-deep);
}

/* Must sit above the fixed hex canvas (z-index: 0). Keep this in global CSS so
   NuGet hosts don't depend on the RCL scoped-CSS bundle loading. */
.layout-root {
    position: relative;
    z-index: 1;
}

.site-shell {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.site-shell main {
    flex: 1;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    min-width: 0;
    padding: 1.5rem 1.25rem 3rem;
    overflow-x: clip;
}

.site-shell main .content {
    min-width: 0;
    max-width: 100%;
}

.page-loading {
    padding: 2rem 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 9999;
    padding: 0.5rem 1rem;
    background: var(--accent-gold);
    color: var(--accent-on-primary);
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
}

/* Classic two-column hero (content + image) */
.site-hero {
    background: var(--hero-gradient);
    color: var(--hero-text);
    border-radius: var(--radius-lg);
    padding: clamp(2rem, 5vw, 3.5rem);
    display: grid;
    /* minmax(0, …) so long titles wrap in-column instead of expanding the track. */
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 2rem;
    align-items: center;
    box-shadow: var(--glow);
    margin-bottom: 2.5rem;
    position: relative;
    overflow: hidden;
}

.site-hero.site-hero--custom-bg {
    background: var(--hero-block-bg, var(--hero-gradient));
}

.site-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 20%, color-mix(in srgb, var(--accent-gold) 22%, transparent), transparent 50%);
    pointer-events: none;
}

.site-hero-content {
    position: relative;
    z-index: 1;
    min-width: 0;
    max-width: 100%;
}

.site-hero h1,
.site-hero-title,
.site-hero h1.cms-content,
.site-hero h1.cms-content > p,
.site-hero .cms-content .ql-size-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
    color: var(--hero-text);
    margin-bottom: 0.75rem;
    max-width: 100%;
    /* Prefer breaks between words; mid-word only if a single token is wider than the column. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.site-hero .lead {
    font-size: var(--text-size-subtitle);
    opacity: 0.92;
    max-width: 36rem;
}

.site-hero-image {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.06);
    padding: 0.75rem;
    justify-self: end;
}

.site-hero-image--sm {
    max-width: 14rem;
}

.site-hero-image--md {
    max-width: 22rem;
}

.site-hero-image--lg {
    max-width: 100%;
}

.site-hero-image-edit {
    position: relative;
    z-index: 1;
    justify-self: end;
    width: 100%;
}

.site-hero-image-edit .site-hero-image--sm,
.site-hero-image-edit:has(.site-hero-image--sm) {
    max-width: 14rem;
}

.site-hero-image-edit:has(.site-hero-image--md) {
    max-width: 22rem;
}

/* Image-only hero banner (e.g. imported blog headers). */
.site-hero-banner {
    margin: 0 0 2rem;
    text-align: center;
}

.site-hero-banner-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    margin: 0 auto;
    border-radius: var(--radius-md);
}

.eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: var(--text-size-eyebrow);
    font-weight: 700;
    color: var(--accent-gold);
}

.site-hero .eyebrow {
    color: var(--hero-eyebrow, var(--accent-gold));
}

/* The hero sits on a dark gradient in every theme, so its rich text must use the
   hero text color rather than the page body color (.cms-content forces
   --text-primary, which is near-black in light themes and unreadable here).
   Prefer word-boundary wraps; avoid mid-word breaks unless a token is too long. */
.site-hero .cms-content {
    color: var(--hero-text);
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.site-hero .cms-content .cms-muted {
    color: color-mix(in srgb, var(--hero-text) 72%, transparent);
}

.site-hero .cms-content a {
    color: var(--hero-eyebrow, #ffe08a);
}

.site-hero .cms-content a:hover {
    color: #ffffff;
}

.site-hero h1.cms-content > p,
.site-hero p.cms-content > p {
    margin: 0;
}

/* Canvas RTF: inherit block text color; toolbar uses normal chrome colors. */
.site-hero .canvas-rich-text-wrap .ql-toolbar,
.quote-band .canvas-rich-text-wrap .ql-toolbar {
    color: var(--input-text);
}

.section-block {
    margin-bottom: 0;
    max-width: 100%;
    min-width: 0;
}

.section-block img,
.feature-banner img,
.carousel-slide-image {
    max-width: 100%;
    height: auto;
}

.section-header {
    margin-bottom: 1.25rem;
}

.section-header h2 {
    font-family: var(--font-display);
    font-size: var(--text-size-title);
    letter-spacing: 0.03em;
    margin: 0;
}

/* Button group block — flex row/column of action buttons */
.button-group-shell {
    width: 100%;
}

.button-group-width-narrow {
    max-width: 32rem;
}

.button-group-width-medium {
    max-width: 46rem;
}

.button-group-width-full {
    max-width: none;
}

.button-group-shell--align-start {
    margin-inline: 0 auto 0 0;
}

.button-group-shell--align-center {
    margin-inline: auto;
}

.button-group-shell--align-end {
    margin-inline: 0 0 0 auto;
}

.button-group-block .button-group-row {
    display: flex;
    gap: var(--button-group-gap, 0.75rem);
}

.button-group-row--dir-row {
    flex-direction: row;
}

.button-group-row--dir-column {
    flex-direction: column;
}

.button-group-row--align-start {
    justify-content: flex-start;
}

.button-group-row--align-center {
    justify-content: center;
}

.button-group-row--align-end {
    justify-content: flex-end;
}

.button-group-row--dir-column.button-group-row--align-start {
    align-items: flex-start;
}

.button-group-row--dir-column.button-group-row--align-center {
    align-items: center;
}

.button-group-row--dir-column.button-group-row--align-end {
    align-items: flex-end;
}

.button-group-row--wrap {
    flex-wrap: wrap;
}

.button-group-row--gap-sm {
    --button-group-gap: 0.5rem;
}

.button-group-row--gap-md {
    --button-group-gap: 0.75rem;
}

.button-group-row--gap-lg {
    --button-group-gap: 1.25rem;
}

.button-group-empty-hint {
    color: var(--text-muted, #6c757d);
    font-size: var(--text-size-body);
    margin: 0;
}

/* Podcast block — Transistor.fm embed */
.podcast-block-player {
    width: 100%;
    max-width: 100%;
}

.podcast-block-player iframe {
    display: block;
    width: 100%;
    height: var(--podcast-player-height, 180px);
    border: 0;
}

.podcast-block-player--audio audio {
    width: 100%;
}

.podcast-block-outbound-link {
    font-weight: 600;
}

/* Contact form modal (public site) */
.contact-form-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    /* Column flex + margin:auto on the modal centers it while still allowing the overlay
       to scroll to the very top/bottom of a tall modal (plain align/justify-center clips
       the overflow instead). Padding reserves the sticky nav up top and a safe gap below. */
    display: flex;
    flex-direction: column;
    padding: calc(var(--site-chrome-height, var(--nav-height, 4.25rem)) + 1rem) 1rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, 0.55);
    overflow-y: auto;
}

.contact-form-modal {
    width: min(40rem, 100%);
    margin: auto;
    display: flex;
    flex-direction: column;
    /* Capped to the space between the reserved chrome (top) and the bottom gap so the
       header/footer are never clipped; the body scrolls internally instead. */
    max-height: calc(100dvh - var(--site-chrome-height, var(--nav-height, 4.25rem)) - 2.5rem);
    background: var(--page-bg-elevated, var(--surface-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.contact-form-modal-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.contact-form-modal-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    margin: 0;
}

/* EditForm renders a plain <form> between the modal and its body/footer, which
   breaks the column-flex chain. Make the form itself the flexing column so the
   body can scroll and the footer (submit button) stays pinned and visible. */
.contact-form-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.contact-form-modal-body {
    /* Grow to fill the space between header/footer and scroll internally so a tall
       form never pushes the modal past its max-height (which clipped the top). */
    flex: 1 1 auto;
    min-height: 0;
    padding: 1.25rem;
    overflow-y: auto;
}

.contact-form-modal-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
}

.contact-form-modal-footer-left {
    justify-content: flex-start;
}

/* First-party Calendly booking dialog (floating badge fallback when widget.js is blocked). */
.wb-calendly-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: color-mix(in srgb, #0b1220 62%, transparent);
    backdrop-filter: blur(2px);
}

.wb-calendly-dialog {
    display: flex;
    flex-direction: column;
    width: min(920px, 100%);
    height: min(720px, calc(100vh - 2rem));
    max-height: calc(100vh - 2rem);
    background: var(--surface-elevated, #fff);
    color: var(--text-primary, #111);
    border-radius: var(--radius-lg, 12px);
    box-shadow: 0 24px 64px color-mix(in srgb, #000 35%, transparent);
    overflow: hidden;
}

.wb-calendly-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--text-primary, #111) 12%, transparent);
    flex-shrink: 0;
}

.wb-calendly-dialog-title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.wb-calendly-dialog-body {
    flex: 1 1 auto;
    min-height: 0;
}

.wb-calendly-dialog-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #fff;
}

html.wb-calendly-dialog-open {
    overflow: hidden;
}

/* Inline Calendly field inside public forms / embed popups */
.calendly-form-field-embed {
    width: 100%;
    min-height: 680px;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    background: #fff;
}

.calendly-form-field-frame {
    display: block;
    width: 100%;
    height: 680px;
    border: 0;
}

.calendly-form-field-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 12rem;
    border: 1px dashed var(--border-color, #dee2e6);
    border-radius: 0.5rem;
    font-size: 0.9rem;
}

/* Store locator popup — wider shell for list + map */
.store-locator-modal {
    width: min(72rem, 100%);
}

.store-locator-modal-body {
    padding: 0.85rem 1rem 1rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.store-locator-modal-body .store-locator-embed {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.store-locator-modal-body .store-locator {
    flex: 1 1 auto;
    min-height: 0;
}

.store-locator-modal-body .store-locator-shell {
    min-height: min(440px, 60dvh);
    height: min(520px, 68dvh);
}

@media (max-width: 767.98px) {
    .store-locator-modal-body .store-locator-shell {
        grid-template-columns: 1fr;
        height: auto;
        min-height: 0;
    }

    .store-locator-modal-body .store-locator-map-wrap {
        min-height: 260px;
    }
}

.contact-form-modal-footer-center {
    justify-content: center;
}

.contact-form-modal-footer-right {
    justify-content: flex-end;
}

.contact-us-block-hint {
    font-size: var(--text-size-body);
}

.contact-us-block-actions {
    display: flex;
}

.contact-us-align-left {
    justify-content: flex-start;
}

.contact-us-align-center {
    justify-content: center;
}

.contact-us-align-right {
    justify-content: flex-end;
}

/* Admin form field builder */
.form-field-builder {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-field-builder-item {
    padding: 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
}

.topic-strip-section {
    margin-bottom: 2rem;
}

.topic-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.topic-strip-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
}

.topic-strip--align-center .topic-strip-chips {
    justify-content: center;
}

.topic-strip--align-end .topic-strip-chips {
    justify-content: flex-end;
}

/* Without a feature image, shrink the chip row so the strip can center/end-align it. */
.topic-strip--align-center:not(:has(.topic-strip-feature)),
.topic-strip--align-end:not(:has(.topic-strip-feature)) {
    justify-content: center;
}

.topic-strip--align-center:not(:has(.topic-strip-feature)) .topic-strip-chips,
.topic-strip--align-end:not(:has(.topic-strip-feature)) .topic-strip-chips {
    flex: 0 1 auto;
}

.topic-strip--align-end:not(:has(.topic-strip-feature)) {
    justify-content: flex-end;
}

.topic-strip--align-center:has(.topic-strip-feature),
.topic-strip--align-end:has(.topic-strip-feature) {
    justify-content: center;
}

.topic-strip--align-center .topic-strip-feature,
.topic-strip--align-end .topic-strip-feature {
    margin-left: 0;
}

.topic-strip-feature {
    flex: 0 1 auto;
    max-width: min(100%, 320px);
    max-height: 140px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin-left: auto;
    border-radius: var(--radius-sm);
}

.topic-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg));
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--heading-color);
}

a.topic-chip {
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

a.topic-chip:hover {
    background: color-mix(in srgb, var(--accent-gold) 28%, var(--surface-bg));
    border-color: var(--accent-gold);
    color: var(--heading-color);
}

.topic-chip-with-image {
    gap: 0.45rem;
    padding-left: 0.35rem;
}

.topic-chip-icon {
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.topic-chip-image-only {
    padding: 0.25rem;
}

.topic-chip-photo {
    display: block;
    max-height: 3.5rem;
    max-width: 8rem;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-sm);
}

/* Blog topic chip strip. */
.blog-topic-strip-section {
    margin-bottom: 1.25rem;
}

.topic-strip.blog-topic-strip {
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.speaker-section {
    margin: 2.5rem 0;
    padding: 2rem;
    background: linear-gradient(180deg, color-mix(in srgb, var(--accent-rust) 8%, var(--surface-bg)), var(--surface-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
}

.speaker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1.25rem;
}

.speaker-card {
    text-align: center;
    transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: no-preference) {
    .speaker-card:hover {
        transform: translateY(-4px);
    }
}

.speaker-photo {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-md);
    border: 2px solid color-mix(in srgb, var(--accent-gold) 50%, transparent);
    background: var(--page-bg);
}

.speaker-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    margin: 0.65rem 0 0.2rem;
    color: var(--heading-color);
}

.speaker-title {
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--text-primary) 75%, transparent);
    margin: 0;
}

.speaker-bio {
    font-size: 0.8rem;
    margin-top: 0.5rem;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s, max-height 0.25s;
}

.speaker-card:hover .speaker-bio,
.speaker-card:focus-within .speaker-bio {
    opacity: 1;
    max-height: 8rem;
}

/* Card / link grid block */
.card-grid-block {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-col, 16rem), 1fr));
    gap: var(--card-grid-gap, 1rem);
    align-items: stretch;
}

.card-grid-block.card-grid-gap-sm { --card-grid-gap: 0.65rem; }
.card-grid-block.card-grid-gap-md { --card-grid-gap: 1rem; }
.card-grid-block.card-grid-gap-lg { --card-grid-gap: 1.5rem; }

.card-grid-block.card-grid-cols-1 { grid-template-columns: 1fr; }
.card-grid-block.card-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card-grid-block.card-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card-grid-block.card-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Grid placement only — card text stays left-aligned */
.card-grid-block.card-grid-align-center:not([class*="card-grid-cols-"]) {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min-col, 16rem), var(--card-grid-min-col, 16rem)));
    justify-content: center;
}

.card-grid-block.card-grid-align-right:not([class*="card-grid-cols-"]) {
    grid-template-columns: repeat(auto-fit, minmax(var(--card-grid-min-col, 16rem), var(--card-grid-min-col, 16rem)));
    justify-content: end;
}

.card-grid-block.card-grid-align-center[class*="card-grid-cols-"] {
    justify-content: center;
}

.card-grid-block.card-grid-align-right[class*="card-grid-cols-"] {
    justify-content: end;
}

.card-grid-cell {
    display: flex;
    min-width: 0;
}

.card-grid-card {
    display: flex;
    flex-direction: column;
    width: var(--card-grid-card-width, 100%);
    max-width: 100%;
    min-height: var(--card-grid-card-height, auto);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

a.card-grid-card:hover {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.card-grid-equal-height .card-grid-card,
.card-grid-equal-height .card-grid-cell > .item-frame,
.card-grid-equal-height .card-grid-cell > .item-frame > .card-grid-card-edit {
    height: 100%;
}

/* Uniform card height — body text scrolls when content overflows */
.card-grid-fixed-height .card-grid-card,
.card-grid-fixed-height .card-grid-cell > .item-frame,
.card-grid-fixed-height .card-grid-cell > .item-frame > .card-grid-card-edit {
    height: var(--card-grid-fixed-height, 26rem);
    max-height: var(--card-grid-fixed-height, 26rem);
}

.card-grid-fixed-height .card-grid-card-inner {
    height: 100%;
    min-height: 0;
}

.card-grid-fixed-height .card-grid-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.card-grid-fixed-height .card-grid-text {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 0.2rem;
    scrollbar-gutter: stable;
}

.card-grid-fixed-height .card-grid-text::-webkit-scrollbar {
    width: 6px;
}

.card-grid-fixed-height .card-grid-text::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-primary) 25%, transparent);
    border-radius: 999px;
}

.card-grid-fixed-height .card-grid-cta {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    /* Keep the button out of the scrollable text's touch region on iOS. */
    isolation: isolate;
}

.card-grid-card-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.card-grid-card-layout-horizontal .card-grid-card-inner {
    flex-direction: row;
    align-items: stretch;
}

.card-grid-card-layout-horizontal .card-grid-media {
    flex: 0 0 min(42%, 12rem);
    max-width: 42%;
}

.card-grid-card-layout-horizontal .card-grid-body {
    flex: 1;
    min-width: 0;
}

.card-grid-media {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    background: color-mix(in srgb, var(--surface-bg) 88%, var(--text-primary) 12%);
}

.card-grid-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: var(--card-grid-image-fit, contain);
}

.card-grid-image-fit-contain { --card-grid-image-fit: contain; }
.card-grid-image-fit-cover { --card-grid-image-fit: cover; }

/* Natural image height — no squishing */
.card-grid-image-height-auto .card-grid-media {
    min-height: 4.5rem;
}

.card-grid-image-height-auto .card-grid-media img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 12rem;
    margin: 0 auto;
}

.card-grid-image-height-auto.card-grid-image-fit-cover .card-grid-media img {
    width: 100%;
    height: auto;
    max-height: none;
}

/* Fixed custom height */
.card-grid-image-height-custom .card-grid-media {
    height: var(--card-grid-image-height, 12rem);
}

/* Aspect ratio presets */
.card-grid-image-height-16-9 .card-grid-media { aspect-ratio: 16 / 9; }
.card-grid-image-height-4-3 .card-grid-media { aspect-ratio: 4 / 3; }
.card-grid-image-height-3-4 .card-grid-media { aspect-ratio: 3 / 4; }
.card-grid-image-height-1-1 .card-grid-media { aspect-ratio: 1 / 1; }
.card-grid-image-height-2-3 .card-grid-media { aspect-ratio: 2 / 3; }

.card-grid-image-height-16-9 .card-grid-media img,
.card-grid-image-height-4-3 .card-grid-media img,
.card-grid-image-height-3-4 .card-grid-media img,
.card-grid-image-height-1-1 .card-grid-media img,
.card-grid-image-height-2-3 .card-grid-media img,
.card-grid-image-height-custom .card-grid-media img {
    width: 100%;
    height: 100%;
}

.card-grid-image-bleed .card-grid-media {
    border-radius: 0;
    margin: 0;
}

.card-grid-image-bleed .card-grid-body {
    padding-top: 0.25rem;
}

.card-grid-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    padding: 1.1rem 1.25rem 1.25rem;
    min-width: 0;
    text-align: left;
    align-items: stretch;
}

.card-grid-title {
    font-size: 1.1rem;
    margin: 0;
    line-height: 1.25;
}

.card-grid-text {
    flex: 1;
    font-size: var(--text-size-body, 0.95rem);
    color: var(--text-muted);
}

.card-grid-cta {
    align-self: flex-start;
    margin-top: auto;
    position: relative;
    z-index: 2;
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Only when the whole card is the link (decorative CTA label, if ever present). */
a.card-grid-card .card-grid-cta {
    pointer-events: none;
}

.card-grid-tile-label {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--heading-color);
}

/* Tile layout — compact centered labels (independent of grid alignment) */
.card-grid-layout-tile .card-grid-body {
    align-items: center;
    text-align: center;
    padding: 0.85rem 1rem 1rem;
}

.card-grid-layout-tile .card-grid-media {
    width: 100%;
}

.card-grid-layout-tile.card-grid-image-height-auto .card-grid-media img {
    max-height: 4.5rem;
}

/* Legacy quick-access / service pill grids (non-block usages) */
.quick-access-grid,
.service-pill-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--card-grid-min-col, 11rem), 1fr));
    gap: 1rem;
    align-items: stretch;
}

.quick-access-card,
.service-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.65rem;
    min-height: 5.5rem;
    padding: 1rem 0.85rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    text-decoration: none;
    color: inherit;
    text-align: center;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
    overflow: hidden;
}

.quick-access-card:hover,
.service-pill:hover {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.quick-access-card img,
.service-pill img {
    display: block;
    max-width: 100%;
    max-height: 3.25rem;
    width: auto;
    height: auto;
    object-fit: contain;
}

.quick-access-card img:is([src=""], :not([src])) {
    display: none;
}

.quick-access-label,
.service-pill-label {
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.25;
    color: var(--heading-color);
}

.feature-banner {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    padding: 1rem;
    text-align: center;
}

.feature-banner img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.cms-content {
    line-height: 1.65;
    color: var(--text-primary);
    /* Wrap on spaces; only split mid-word if a single token is wider than the line. */
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    -webkit-user-select: text;
    user-select: text;
}

.cms-content pre,
.cms-content code {
    overflow-x: auto;
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-word;
    -webkit-user-select: text;
    user-select: text;
}

/* Fenced code blocks: theme-aware surface + readable text in light/dark */
.cms-content pre,
.cms-content .gh-md-code pre {
    white-space: pre;
    word-break: normal;
    overflow-wrap: normal;
    border: 1px solid var(--border-color-strong, var(--border-color, transparent));
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--accent-gold, #f5b335) 18%, transparent),
        0 1px 2px color-mix(in srgb, #000 8%, transparent);
    background: var(--code-bg, var(--surface-bg-hover, #ebe8e1));
    color: var(--text-primary, #2a2a28);
}

.cms-content :not(pre) > code {
    padding: 0.1rem 0.38rem;
    border-radius: 0.28rem;
    border: 1px solid var(--border-color-strong, var(--border-color, color-mix(in srgb, currentColor 28%, transparent)));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold, #f5b335) 12%, transparent);
    background: var(--code-bg, var(--surface-bg-hover, #ebe8e1));
    color: var(--text-primary, #2a2a28);
}

.cms-content h1,
.cms-content h2,
.cms-content h3,
.cms-content h4 {
    font-family: var(--font-display);
    letter-spacing: 0.03em;
    color: var(--heading-color);
    margin: 0 0 0.85rem;
    line-height: 1.15;
}

.cms-content h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.cms-content h2 { font-size: clamp(1.65rem, 3vw, 2.15rem); }
.cms-content h3 { font-size: clamp(1.35rem, 2.5vw, 1.75rem); }
.cms-content h4 { font-size: 1.2rem; }

.cms-content .cms-lead {
    font-size: var(--text-size-subtitle);
    color: var(--text-muted);
}

/* Standard rich-text sizes — Eyebrow / Body / Subtitle / Title.
   Typography only; color comes from context (.eyebrow, .text-muted, .site-hero, etc.). */
.cms-content .ql-size-eyebrow {
    font-size: var(--text-size-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}

.cms-content .ql-size-body {
    font-family: inherit;
    font-size: var(--text-size-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.6;
}

.cms-content .ql-size-subtitle {
    font-size: var(--text-size-subtitle);
}

.cms-content .ql-size-title {
    font-family: var(--font-display);
    font-size: var(--text-size-title);
    letter-spacing: 0.03em;
    line-height: 1.15;
    text-transform: none;
}

/* Default semantic colors for sizes when the wrapper does not already paint text.
   Eyebrow size keeps brand gold; title/subtitle follow heading/muted unless a parent
   (hero, quote band, .eyebrow, .text-muted) supplies a contextual color. */
.cms-content .ql-size-eyebrow {
    color: var(--accent-gold);
}

.cms-content .ql-size-subtitle {
    color: var(--text-muted);
}

h1.cms-content,
h2.cms-content,
h3.cms-content,
.section-title.cms-content,
.cta-band-title.cms-content {
    color: var(--heading-color);
}

.cms-content .ql-size-title {
    color: var(--heading-color);
}

/* Contextual surfaces: inherit the surrounding text color instead of page tokens. */
.site-hero .cms-content .ql-size-title,
.site-hero .cms-content .ql-size-subtitle,
.site-hero .cms-content .ql-size-body,
.site-hero h1.cms-content,
.site-hero .section-title.cms-content,
.quote-band .cms-content .ql-size-title,
.quote-band .cms-content .ql-size-subtitle,
.quote-band .cms-content .ql-size-body {
    color: inherit;
}

.site-hero .cms-content .ql-size-title,
.site-hero h1.cms-content,
.site-hero h1.cms-content .ql-size-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 4rem);
    letter-spacing: 0.02em;
    line-height: 1.05;
}

.site-hero .cms-content .ql-size-eyebrow,
.quote-band .cms-content .ql-size-eyebrow {
    color: var(--accent-gold);
}

/* Section header wrappers must not override explicit ql-size-* choices. */
.section-header .eyebrow .ql-size-title,
.section-header .cms-content.eyebrow .ql-size-title,
.section-header .text-muted .ql-size-title,
.section-header p.text-muted .ql-size-title,
.section-header .section-subtitle .ql-size-title {
    font-family: var(--font-display);
    font-size: var(--text-size-title);
    letter-spacing: 0.03em;
    line-height: 1.15;
    font-weight: inherit;
    text-transform: none;
    color: var(--heading-color);
}

/* When the block (<p>/<li>) has an explicit line-height from the RTF picker, let
   size spans inherit it instead of forcing the title/body defaults above. */
.cms-content p[style*="line-height"] .ql-size-title,
.cms-content p[style*="line-height"] .ql-size-eyebrow,
.cms-content p[style*="line-height"] .ql-size-subtitle,
.cms-content p[style*="line-height"] .ql-size-body,
.cms-content li[style*="line-height"] .ql-size-title,
.cms-content li[style*="line-height"] .ql-size-eyebrow,
.cms-content li[style*="line-height"] .ql-size-subtitle,
.cms-content li[style*="line-height"] .ql-size-body,
.section-header p[style*="line-height"] .ql-size-title,
.section-header p[style*="line-height"] .ql-size-eyebrow,
.section-header p[style*="line-height"] .ql-size-subtitle,
.section-header p[style*="line-height"] .ql-size-body {
    line-height: inherit;
}

/* Size defaults above lose to an explicit RTF line-height pick (block/inline style
   from the editor, or legacy .ql-line-height-* classes below). */

.section-header .eyebrow .ql-size-subtitle,
.section-header .cms-content.eyebrow .ql-size-subtitle,
.section-header h2 .ql-size-subtitle,
.section-header .text-muted .ql-size-subtitle,
.section-header .section-subtitle .ql-size-subtitle {
    font-size: var(--text-size-subtitle);
    font-weight: inherit;
    text-transform: none;
    letter-spacing: normal;
    color: var(--text-muted);
}

.section-header .eyebrow .ql-size-eyebrow,
.section-header h2 .ql-size-eyebrow,
.section-header .text-muted .ql-size-eyebrow,
.section-header .section-subtitle .ql-size-eyebrow {
    font-size: var(--text-size-eyebrow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
}

.section-header .eyebrow .ql-size-body,
.section-header .cms-content.eyebrow .ql-size-body,
.section-header h2 .ql-size-body,
.section-header .section-title .ql-size-body,
.section-header .text-muted .ql-size-body,
.section-header .section-subtitle .ql-size-body {
    font-family: inherit;
    font-size: var(--text-size-body);
    font-weight: 400;
    letter-spacing: normal;
    text-transform: none;
    line-height: 1.6;
    color: inherit;
}

.section-header h2 .ql-size-title {
    font-family: var(--font-display);
    font-size: var(--text-size-title);
    letter-spacing: 0.03em;
    line-height: 1.15;
    color: inherit;
}

/* Explicit line-height from the RTF picker.
   After size + section-header title rules so it wins in titles/eyebrows/subtitles. */
.cms-content .ql-line-height-tight,
.cms-content.ql-line-height-tight,
.section-header .ql-line-height-tight,
.section-header h2 .ql-line-height-tight,
.section-header .section-title .ql-line-height-tight,
.section-header .eyebrow .ql-line-height-tight,
.section-header .section-subtitle .ql-line-height-tight,
.section-header .text-muted .ql-line-height-tight,
.cta-band-title .ql-line-height-tight,
.site-hero .cms-content .ql-line-height-tight {
    line-height: 1;
}

.cms-content .ql-line-height-snug,
.cms-content.ql-line-height-snug,
.section-header .ql-line-height-snug,
.section-header h2 .ql-line-height-snug,
.section-header .section-title .ql-line-height-snug,
.section-header .eyebrow .ql-line-height-snug,
.section-header .section-subtitle .ql-line-height-snug,
.section-header .text-muted .ql-line-height-snug,
.cta-band-title .ql-line-height-snug,
.site-hero .cms-content .ql-line-height-snug {
    line-height: 1.25;
}

.cms-content .ql-line-height-normal,
.cms-content.ql-line-height-normal,
.section-header .ql-line-height-normal,
.section-header h2 .ql-line-height-normal,
.section-header .section-title .ql-line-height-normal,
.section-header .eyebrow .ql-line-height-normal,
.section-header .section-subtitle .ql-line-height-normal,
.section-header .text-muted .ql-line-height-normal,
.cta-band-title .ql-line-height-normal,
.site-hero .cms-content .ql-line-height-normal {
    line-height: 1.5;
}

.cms-content .ql-line-height-relaxed,
.cms-content.ql-line-height-relaxed,
.section-header .ql-line-height-relaxed,
.section-header h2 .ql-line-height-relaxed,
.section-header .section-title .ql-line-height-relaxed,
.section-header .eyebrow .ql-line-height-relaxed,
.section-header .section-subtitle .ql-line-height-relaxed,
.section-header .text-muted .ql-line-height-relaxed,
.cta-band-title .ql-line-height-relaxed,
.site-hero .cms-content .ql-line-height-relaxed {
    line-height: 1.75;
}

.cms-content .ql-line-height-loose,
.cms-content.ql-line-height-loose,
.section-header .ql-line-height-loose,
.section-header h2 .ql-line-height-loose,
.section-header .section-title .ql-line-height-loose,
.section-header .eyebrow .ql-line-height-loose,
.section-header .section-subtitle .ql-line-height-loose,
.section-header .text-muted .ql-line-height-loose,
.cta-band-title .ql-line-height-loose,
.site-hero .cms-content .ql-line-height-loose {
    line-height: 2;
}

.section-header .section-subtitle {
    color: var(--text-muted);
}

.cms-content .cms-accent {
    color: var(--accent-gold);
}

.cms-content .cms-muted {
    color: var(--text-muted);
}

.cms-content .cms-display {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cms-content .cms-highlight {
    background: color-mix(in srgb, var(--accent-gold) 22%, transparent);
    padding: 0.1em 0.35em;
    border-radius: 4px;
}

/* Alignment may live on a child <p>, or on the host after unwrap promotion. */
.cms-content.ql-align-center,
.cms-content .ql-align-center {
    text-align: center;
}

.cms-content.ql-align-right,
.cms-content .ql-align-right {
    text-align: right;
}

.cms-content.ql-align-justify,
.cms-content .ql-align-justify {
    text-align: justify;
}

.cms-content.ql-align-left,
.cms-content .ql-align-left {
    text-align: left;
}

.cms-content .ql-font-display {
    font-family: var(--font-display);
    letter-spacing: 0.04em;
}

.cms-content .ql-font-serif {
    font-family: Georgia, "Times New Roman", serif;
}

/* Match Quill's tight paragraph rhythm for sized headings; body copy keeps readable gaps. */
.cms-content p {
    margin: 0 0 1.15rem;
}

.cms-content p:last-child {
    margin-bottom: 0;
}

/* Quill's editor uses margin:0 on <p>. Enter-separated title/eyebrow/subtitle lines
   must keep that stacked look on the live page — otherwise "Tight" line-height looks
   correct in the RTF editor and falls apart after save from paragraph margins. */
.cms-content p:has(.ql-size-title),
.cms-content p:has(.ql-size-eyebrow),
.cms-content p:has(.ql-size-subtitle),
h1.cms-content > p,
h2.cms-content > p,
h3.cms-content > p,
h4.cms-content > p,
.section-title.cms-content > p,
.cta-band-title.cms-content > p {
    margin-bottom: 0;
}

/* Spacing between title-size and body-size paragraphs in one field. */
.cms-content p:has(.ql-size-title) + p:has(.ql-size-body),
.cms-content p:has(.ql-size-eyebrow) + p:has(.ql-size-body),
.cms-content p:has(.ql-size-subtitle) + p:has(.ql-size-body),
.cms-content p:has(.ql-size-title) + p:not(:has([class*="ql-size-"])),
.cms-content p:has(.ql-size-eyebrow) + p:not(:has([class*="ql-size-"])),
.cms-content p:has(.ql-size-subtitle) + p:not(:has([class*="ql-size-"])) {
    margin-top: 0.85rem;
}

.cms-content ul,
.cms-content ol {
    margin: 0 0 1.15rem;
    padding-left: 1.35rem;
}

.cms-content li {
    margin-bottom: 0.45rem;
}

.cms-content li:last-child {
    margin-bottom: 0;
}

.cms-content li > ul,
.cms-content li > ol {
    margin: 0.35rem 0 0.45rem;
}

.cms-content ul ul {
    list-style-type: circle;
}

.cms-content ul ul ul {
    list-style-type: square;
}

.cms-content ol ol {
    list-style-type: lower-alpha;
}

.cms-content ol ol ol {
    list-style-type: lower-roman;
}

/* Quill 2 fallback: all lists are <ol> + data-list / ql-indent until semantic export runs. */
.cms-content ol li[data-list="bullet"],
.cms-content ul li[data-list="bullet"] {
    list-style-type: disc;
}

.cms-content ol li[data-list="ordered"] {
    list-style-type: decimal;
}

.cms-content ol li[data-list="bullet"] .ql-ui,
.cms-content ol li[data-list="ordered"] .ql-ui,
.cms-content ul li[data-list="bullet"] .ql-ui {
    display: none;
}

.cms-content li.ql-indent-1 { margin-left: 1.5em; }
.cms-content li.ql-indent-2 { margin-left: 3em; }
.cms-content li.ql-indent-3 { margin-left: 4.5em; }
.cms-content li.ql-indent-4 { margin-left: 6em; }
.cms-content li.ql-indent-5 { margin-left: 7.5em; }
.cms-content li.ql-indent-6 { margin-left: 9em; }
.cms-content li.ql-indent-7 { margin-left: 10.5em; }
.cms-content li.ql-indent-8 { margin-left: 12em; }

.cms-content a {
    color: var(--link-color, var(--accent-gold));
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
}

.cms-content a:hover {
    color: color-mix(in srgb, var(--link-color, var(--accent-gold)) 70%, #fff);
}

.cms-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Imported blog images: centered; border on the image, not the container. */
.cms-content img.cms-blog-image {
    display: block;
    margin-inline: auto;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--surface-muted, rgba(255, 255, 255, 0.04));
}

.cms-content figure {
    margin: 1.75rem 0;
}

.cms-content figure.cms-blog-figure {
    margin-inline: auto;
    text-align: center;
}

.cms-content figure.ql-align-center {
    text-align: center;
    margin-inline: auto;
}

.cms-content figure.ql-align-right {
    float: right;
    margin: 0.25rem 0 1rem 1.25rem;
    text-align: right;
}

.cms-content figure.alignleft {
    float: left;
    margin: 0.25rem 1.25rem 1rem 0;
    text-align: left;
}

.cms-content figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    text-align: center;
}

/* Honor alignment classes from pasted WordPress content alongside Quill's ql-align-*. */
.cms-content .aligncenter {
    display: block;
    margin-inline: auto;
    text-align: center;
}

.cms-content .alignright {
    float: right;
    margin: 0.25rem 0 1rem 1.25rem;
}

.cms-content .alignleft {
    float: left;
    margin: 0.25rem 1.25rem 1rem 0;
}

.cms-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
}

.cms-content blockquote {
    border-left: 4px solid var(--accent-gold);
    padding-left: 1rem;
    margin: 1.5rem 0;
    font-style: italic;
}

/* Expertise / content panel (screenshot-style block) */
.content-panel-block {
    padding: 2rem 2.25rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
}

.content-panel-title {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 3vw, 2.25rem);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 1.25rem;
    color: var(--heading-color);
}

.feature-split-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 2rem;
    align-items: center;
}

.feature-split-media img {
    width: 100%;
    border-radius: var(--radius-md);
    display: block;
}

.feature-split-title {
    font-family: var(--font-display);
    font-size: var(--text-size-title);
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}

.feature-split-lead {
    font-size: var(--text-size-subtitle);
    color: var(--text-muted);
}

.callout-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

.callout-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    padding: 1.25rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s, transform 0.15s;
}

a.callout-card:hover {
    border-color: var(--accent-gold);
    transform: translateY(-2px);
}

.callout-card h3 {
    font-size: 1.1rem;
    margin: 0;
}

.callout-card img {
    max-height: 3rem;
    width: auto;
}

.quote-band {
    padding: 2rem 0;
}

.quote-band-inner {
    margin: 0;
    padding: 1.5rem 1.75rem;
    border-left: 4px solid var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 8%, var(--surface-bg));
    border-radius: var(--radius-sm);
}

.quote-band-cite {
    margin-top: 0.75rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* Block studio (admin preview) */
.block-studio {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--page-bg);
}

.block-studio-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: var(--surface-bg);
    border-bottom: 1px solid var(--border-color);
    font-size: 0.875rem;
}

.block-studio-canvas {
    padding: 1.25rem;
    max-height: 70vh;
    overflow: auto;
}

.block-studio-canvas .section-block {
    margin-bottom: 1.5rem;
}

.block-studio-draft {
    opacity: 0.55;
    outline: 2px dashed var(--accent-gold);
    outline-offset: 4px;
}

.block-studio-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 8rem;
    padding: 1.5rem 1rem;
    border: 1px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-color, #f5b335) 4%, var(--surface-bg));
    text-align: center;
}

.block-studio-placeholder-icon {
    color: var(--text-muted);
    opacity: 0.85;
}

.block-studio-placeholder-title {
    margin: 0;
    font-weight: 600;
    color: var(--heading-color);
}

.block-studio-placeholder-hint {
    margin: 0;
    max-width: 28rem;
    font-size: 0.875rem;
    color: var(--text-muted);
}

.rich-text-editor {
    display: grid;
    gap: 0.5rem;
}

.rich-text-preview-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.rich-text-preview-panel {
    padding: 1rem 1.15rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    min-height: 6rem;
}

.pdf-embed-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
}

.pdf-embed-lead {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.pdf-embed-frame-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-bg);
}

.pdf-embed-frame {
    width: 100%;
    height: var(--pdf-height, 720px);
    border: 0;
    display: block;
}

.pdf-embed-actions {
    margin-top: 0.75rem;
}

.pdf-embed-mobile-fallback {
    display: none;
}

.pdf-embed-actions-desktop {
    display: block;
}

@media (max-width: 767.98px) {
    .pdf-embed-frame-wrap {
        display: none;
    }

    .pdf-embed-actions-desktop {
        display: none;
    }

    .pdf-embed-mobile-fallback {
        display: block;
        padding: 1.25rem 1rem;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        background: var(--surface-bg);
        text-align: center;
    }

    .pdf-embed-mobile-fallback-copy {
        color: var(--text-muted);
        margin: 0;
    }
}

.columns-layout-title {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    margin-bottom: 0.5rem;
}

.columns-layout-lead {
    color: var(--text-muted);
    margin-bottom: 1.25rem;
}

.columns-layout-block {
    max-width: 100%;
    /* Avoid overflow-x: clip — it forces overflow-y clipping too and hides Quill link tooltips. */
    overflow: visible;
}

.columns-layout-row {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 100%;
    width: 100%;
    align-items: start;
}

.columns-layout-col {
    grid-column: span min(var(--col-span, 12), 12);
    min-width: 0;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
}

.columns-layout-col-title {
    font-size: 1.15rem;
    margin: 0 0 0.75rem;
}

.columns-layout-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    min-width: 0;
}

/* In-builder column editing affordances */
.columns-layout-row.is-editing {
    gap: 1rem;
    align-items: stretch;
}

.columns-layout-row.is-editing .columns-layout-col {
    position: relative;
    border: 1px dashed color-mix(in srgb, var(--accent-gold) 45%, transparent);
    border-radius: 12px;
    padding: 2rem 0.85rem 0.85rem;
    background: color-mix(in srgb, var(--accent-gold) 3%, transparent);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 10rem;
    overflow: visible;
}

.columns-layout-row.is-editing .columns-layout-stack {
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
}

/* Width badge floats so it never offsets one column's content vs the other. */
.columns-layout-col-head {
    position: absolute;
    top: 0.45rem;
    right: 0.55rem;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    pointer-events: none;
}

/* Keep nested RTF tops aligned across sibling columns. */
.columns-layout-col .column-container-drop > .block-frame:first-child .section-header-edit {
    margin-top: 0;
}

.columns-layout-col .column-container-drop > .block-frame:first-child .section-block > .canvas-rich-text-idle {
    margin-top: 0.5rem;
}

.columns-layout-col-badge {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--accent-gold) 75%, #5a4500);
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    border-radius: 999px;
    padding: 0.12rem 0.6rem;
}

.columns-layout-col-add {
    display: flex;
    justify-content: center;
    padding-top: 0.35rem;
}

.columns-layout-col-add .builder-insert-btn {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    background: transparent;
    color: color-mix(in srgb, var(--accent-gold) 80%, #3a2c00);
    border: 1.5px dashed color-mix(in srgb, var(--accent-gold) 50%, transparent);
    box-shadow: none;
}

.columns-layout-col-add .builder-insert-btn:hover {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    border-color: var(--accent-gold);
    box-shadow: none;
}

/* Hover / open “Add to column” or active drop → highlight that column only. */
.columns-layout-row.is-editing .columns-layout-col:has(.columns-layout-col-add:hover),
.columns-layout-row.is-editing .columns-layout-col:has(.columns-layout-col-add .add-element-overlay),
.columns-layout-row.is-editing .columns-layout-col:has(.column-container-drop.is-drop-target) {
    border-color: var(--accent-gold);
    border-style: solid;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-gold) 14%, transparent),
            color-mix(in srgb, var(--accent-gold) 6%, transparent)
        );
    box-shadow:
        0 0 0 2px var(--accent-gold),
        0 0 0 6px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

.columns-layout-block-entry {
    min-width: 0;
}

.columns-layout-block-entry .section-block {
    margin-bottom: 0;
}

.media-path-picker-browser {
    background: var(--surface-bg);
    border-color: var(--border-color) !important;
}

/* Tablet: stack multi-column layouts; simplify grids inside columns */
@media (max-width: 991.98px) {
    .feature-split-grid {
        grid-template-columns: 1fr;
    }

    .columns-layout-row {
        gap: 1.25rem;
    }

    .columns-layout-col {
        grid-column: 1 / -1;
    }

    .columns-layout-col .site-hero {
        grid-template-columns: 1fr;
        padding: clamp(1.5rem, 4vw, 2.5rem);
    }

    .columns-layout-col .site-hero-image,
    .columns-layout-col .site-hero-image-edit {
        max-width: 100%;
        justify-self: center;
    }

    .columns-layout-col .feature-split-grid,
    .columns-layout-col .carousel-slide {
        grid-template-columns: 1fr;
    }

    .columns-layout-col .callout-grid,
    .columns-layout-col .card-grid-block,
    .columns-layout-col .quick-access-grid,
    .columns-layout-col .service-pill-grid,
    .columns-layout-col .speaker-grid {
        grid-template-columns: 1fr;
    }

    .columns-layout-col .carousel-shell {
        flex-wrap: wrap;
    }

    .columns-layout-col .carousel-viewport {
        flex: 1 1 100%;
        min-width: 0;
        min-height: 0;
    }

    .columns-layout-col .topic-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .columns-layout-col .topic-strip-feature {
        margin-left: 0;
        max-width: 100%;
        max-height: none;
        align-self: center;
    }
}

/* Phone: tighter spacing and overflow guards for all blocks */
@media (max-width: 767.98px) {
    .site-shell main {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .section-block {
        margin-bottom: 2rem;
    }

    .columns-layout-row {
        gap: 1rem;
    }

    .columns-layout-stack {
        gap: 1.25rem;
    }

    .callout-grid {
        grid-template-columns: 1fr;
    }

    .quick-access-grid,
    .service-pill-grid {
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    }

    .topic-strip {
        flex-direction: column;
        align-items: stretch;
    }

    .topic-strip-chips {
        width: 100%;
    }

    .topic-strip-feature {
        margin-left: 0;
        max-width: 100%;
        max-height: 12rem;
        align-self: center;
    }

    .carousel-shell {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .carousel-viewport {
        flex: 1 1 100%;
        min-width: 0;
        min-height: 12rem;
    }

    .carousel-btn {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1.25rem;
    }

    .content-panel-block {
        padding: 1.25rem 1rem;
    }

    .pdf-embed-frame-wrap {
        max-height: min(var(--pdf-height, 720px), 70vh);
    }

    .pdf-embed-frame {
        height: min(var(--pdf-height, 720px), 70vh);
    }
}

.site-footer {
    border-top: 1px solid var(--border-color);
    background: var(--footer-bg);
    padding: 2rem 1.25rem;
    margin-top: auto;
    color: var(--text-primary);
    transition: background-color 0.2s ease, border-color 0.2s ease;
    /* Above promo rails (z-index 5); opaque so rails scroll under the footer. */
    position: relative;
    z-index: 6;
}

.site-footer-inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.footer-links a,
.footer-links .footer-cookie-prefs {
    font-weight: 600;
}

.blog-list article {
    border-bottom: 1px solid var(--border-color);
    padding: 1.25rem 0;
}

.blog-list article:last-child {
    border-bottom: none;
}

.blog-list h2 {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.blog-list h2 a {
    text-decoration: none;
    color: var(--heading-color);
}

.blog-list h2 a:hover {
    color: var(--accent-gold);
}

.blog-card {
    display: grid;
    gap: 1rem;
    border-bottom: 1px solid var(--border-color);
    padding: 1.5rem 0;
}

@media (min-width: 768px) {
    .blog-card:has(.blog-card-image) {
        grid-template-columns: 220px 1fr;
        align-items: start;
    }
}

.blog-card:last-child {
    border-bottom: none;
}

.blog-card-image {
    width: 100%;
    height: auto;
    border-radius: 0.35rem;
    object-fit: cover;
}

.blog-card-title {
    font-size: 1.35rem;
    margin-bottom: 0.35rem;
}

.blog-card-title a {
    text-decoration: none;
    color: var(--heading-color);
}

.blog-card-title a:hover {
    color: var(--accent-gold);
}

.blog-chip {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    margin: 0 0.35rem 0.35rem 0;
    border-radius: 999px;
    background: var(--accent-gold);
    color: #111;
    text-decoration: none;
}

.blog-chip-muted {
    background: var(--surface-muted, rgba(255, 255, 255, 0.08));
    color: var(--body-color);
    border: 1px solid var(--border-color);
}

.blog-post-hero-image {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    border-radius: 0.35rem;
}

/* ---- Blog “On This Page” sidebar ---- */
.blog-post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(12rem, 16.5rem);
    gap: 2rem 2.75rem;
    align-items: start;
}

.blog-post-layout:has(.blog-on-this-page[hidden]),
.blog-post-layout:not(:has(.blog-on-this-page)) {
    grid-template-columns: minmax(0, 1fr);
}

.blog-post-main {
    min-width: 0;
}

.blog-on-this-page {
    /* Follow site/page theme: link accent → primary → gold. */
    --blog-otp-accent: var(--link-color, var(--accent-primary, var(--accent-gold)));
    position: sticky;
    top: calc(var(--site-chrome-height, var(--nav-height, 4.25rem)) + 1rem);
    align-self: start;
    max-height: calc(100dvh - var(--site-chrome-height, var(--nav-height, 4.25rem)) - 2rem);
    overflow: auto;
    overscroll-behavior: contain;
}

.blog-on-this-page[hidden] {
    display: none !important;
}

.blog-otp-details {
    border: none;
    margin: 0;
    padding: 0;
}

.blog-otp-summary {
    font-family: var(--font-body, inherit);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.3;
    cursor: pointer;
    list-style: none;
    margin: 0 0 0.85rem;
}

.blog-otp-summary::-webkit-details-marker {
    display: none;
}

.blog-otp-nav {
    margin: 0;
}

.blog-otp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.blog-otp-item--h3 {
    padding-left: 0.85rem;
}

.blog-otp-link {
    display: block;
    color: var(--text-primary, var(--body-color));
    text-decoration: none;
    font-size: 0.92rem;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.blog-otp-link:hover {
    color: var(--link-hover-color, var(--blog-otp-accent));
    text-decoration: none;
}

.blog-otp-link.is-active {
    color: var(--blog-otp-accent);
    font-weight: 600;
}

.blog-otp-share {
    margin-top: 1.15rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-color, #e4e4e7);
}

.blog-otp-share-label {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.blog-otp-share-actions {
    display: flex;
    gap: 0.45rem;
}

.blog-otp-share-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    padding: 0;
    border-radius: 999px;
    border: 1px solid var(--border-color, #e4e4e7);
    background: var(--surface-bg, #fff);
    color: var(--heading-color);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.blog-otp-share-btn:hover {
    border-color: color-mix(in srgb, var(--blog-otp-accent) 55%, var(--border-color));
    background: color-mix(in srgb, var(--blog-otp-accent) 12%, var(--surface-bg, #fff));
    color: var(--blog-otp-accent);
}

.blog-otp-share-btn svg {
    width: 1.05rem;
    height: 1.05rem;
}

.blog-otp-heading {
    scroll-margin-top: var(--site-chrome-height, var(--nav-height, 4.25rem));
}

@media (min-width: 961px) {
    .blog-otp-summary {
        pointer-events: none;
        cursor: default;
    }

    /* Keep the rail open on desktop even before JS sets the open attribute. */
    .blog-otp-details > .blog-otp-body {
        display: block !important;
    }
}

@media (max-width: 960px) {
    .blog-post-layout {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .blog-on-this-page {
        order: -1;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0.85rem 1rem;
        border: 1px solid var(--border-color, #e4e4e7);
        border-radius: var(--radius-md, 0.5rem);
        background: color-mix(in srgb, var(--surface-bg, #fff) 92%, var(--blog-otp-accent) 8%);
    }

    .blog-otp-summary {
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .blog-otp-summary::after {
        content: "";
        width: 0.45rem;
        height: 0.45rem;
        border-right: 2px solid var(--text-muted);
        border-bottom: 2px solid var(--text-muted);
        transform: rotate(45deg);
        transition: transform 0.15s ease;
        flex-shrink: 0;
    }

    .blog-otp-details[open] > .blog-otp-summary {
        margin-bottom: 0.75rem;
    }

    .blog-otp-details[open] > .blog-otp-summary::after {
        transform: rotate(-135deg);
        margin-top: 0.25rem;
    }

    .blog-otp-share {
        margin-top: 0.9rem;
        padding-top: 0.85rem;
    }
}

/* ---- Blog List block (reusable, searchable, filterable, virtualized) ---- */
.blog-list-block {
    margin-block: 1.5rem;
}

.blog-list-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

/* Shared client-side debounced search (js/debounced-search.js) — typing never hits SignalR. */
.debounced-search {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
}

.debounced-search--icon .debounced-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--text-muted, var(--body-color));
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.debounced-search--icon input.form-control {
    padding-left: 2.4rem;
}

.debounced-search--clear input {
    padding-right: 3.5rem;
}

.debounced-search-clear {
    position: absolute;
    right: 0.35rem;
    z-index: 1;
    text-decoration: none;
}

.blog-list-search {
    position: relative;
    flex: 1 1 16rem;
    min-width: 12rem;
}

.blog-list-search svg,
.blog-list-search .debounced-search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.05rem;
    height: 1.05rem;
    color: var(--body-color);
    opacity: 0.6;
    pointer-events: none;
}

.blog-list-search .form-control {
    padding-left: 2.4rem;
}

.blog-list-filter {
    flex: 0 1 14rem;
    min-width: 10rem;
    width: auto;
}

.blog-list-count {
    margin-bottom: 0.75rem;
}

.blog-list-empty {
    padding: 1.5rem 0;
}

.blog-list-viewport {
    /* Height is set inline from the block config (default 600px). */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    /* Room for the card hover lift (translateY) + shadow so the top/bottom borders aren't clipped. */
    padding: 6px 0.25rem 10px 0;
}

/* Fixed row height keeps the virtualizer math exact: nothing overflows the scroll container.
   The heights below MUST stay in sync with _rowHeight in BlogListBlockView.razor:
   multi-column = 410 + 24 margin = 434px; single-column = 270 + 20 margin = 290px. */
.blog-list-row {
    display: grid;
    grid-template-columns: repeat(var(--blog-list-cols, 3), minmax(0, 1fr));
    gap: 1.25rem;
    height: 410px;
    margin-bottom: 24px;
    align-items: stretch;
    box-sizing: border-box;
    width: 100%;
}

.blog-list-cols-1 {
    --blog-list-cols: 1;
}

.blog-list-cols-2 {
    --blog-list-cols: 2;
}

.blog-list-cols-3 {
    --blog-list-cols: 3;
}

.blog-list-cols-4 {
    --blog-list-cols: 4;
}

@media (max-width: 992px) {
    .blog-list-cols-3 .blog-list-row,
    .blog-list-cols-4 .blog-list-row {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .blog-list-cols-2 .blog-list-row,
    .blog-list-cols-3 .blog-list-row,
    .blog-list-cols-4 .blog-list-row {
        grid-template-columns: 1fr;
    }
}

/* Vertical card layout inside the block (overrides the horizontal list-style card) */
.blog-list-block .blog-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0;
    height: 100%;
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
    overflow: hidden;
    background: var(--surface-muted, rgba(255, 255, 255, 0.03));
    padding: 0;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.blog-list-block .blog-card:hover {
    /* Keep the lift small — the viewport clips anything that escapes its padding box. */
    transform: translateY(-2px);
    border-color: var(--accent-gold);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

/* Full-card hit target (absolute; does not take flex space). */
.blog-card-link {
    position: absolute;
    inset: 0;
    z-index: 3;
    text-decoration: none;
    border-radius: inherit;
}

/* Hover gradient over the card image. */
.blog-card-link::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 42%);
    opacity: 0;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

/* "Read article" label along the bottom of the card. */
.blog-card-hover {
    position: absolute;
    left: 50%;
    bottom: 0.85rem;
    transform: translate(-50%, 0.5rem);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--accent-gold, #f5c518);
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.8rem;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}

.blog-card-hover svg {
    width: 0.95rem;
    height: 0.95rem;
}

.blog-list-block .blog-card:hover .blog-card-link::before,
.blog-card-link:focus-visible::before {
    opacity: 1;
}

.blog-list-block .blog-card:hover .blog-card-hover,
.blog-card-link:focus-visible .blog-card-hover {
    opacity: 1;
    transform: translate(-50%, 0);
}

.blog-list-block .blog-card-image-link {
    /* Center image; border follows the photo, not the frame. */
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    height: 160px;
    overflow: hidden;
    padding: 0.85rem;
}

.blog-list-block .blog-card-image {
    /* Size to the image's own aspect ratio, capped to the frame, so the border fits it exactly. */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    background: var(--surface-muted, rgba(255, 255, 255, 0.06));
    border: 1px solid var(--border-color);
    border-radius: 0.6rem;
}

.blog-list-block .blog-card-body {
    padding: 1rem 1.25rem 1.1rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.blog-list-block .blog-card-title {
    font-size: 1.15rem;
    line-height: 1.35;
    margin-bottom: 0.35rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* Padding gives glyph descenders (g, p, y) room so the clamp doesn't shear the bottom of the text. */
    padding-bottom: 0.12em;
    color: var(--heading-color);
}

.blog-list-block .blog-card-excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Category chips + guest-author badge */
.blog-card-categories {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.35rem;
    margin-bottom: 0.5rem;
    /* Single row that scrolls sideways so long topic lists never break the card height. */
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 0.15rem;
    /* Sit above the full-card link overlay (z-index 3) so each chip is individually clickable. */
    position: relative;
    z-index: 4;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.blog-card-categories::-webkit-scrollbar {
    height: 4px;
}

.blog-card-categories::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted, #888) 40%, transparent);
    border-radius: 999px;
}

.blog-card-cat {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.18rem 0.5rem;
    border-radius: 999px;
    background: var(--surface-muted, rgba(255, 255, 255, 0.08));
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
    white-space: nowrap;
}

a.blog-card-cat {
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

a.blog-card-cat:hover,
a.blog-card-cat:focus-visible {
    background: color-mix(in srgb, var(--accent-gold) 24%, var(--surface-bg));
    color: var(--heading-color);
}

.blog-card-cat-guest {
    background: var(--accent-gold, #f5c518);
    color: #1a1a1a;
}

.blog-card-spacer {
    visibility: hidden;
}

/* Single-column lists render as full-width horizontal cards: image left, content right. */
.blog-list-cols-1 .blog-list-row {
    height: 270px;
    margin-bottom: 20px;
}

.blog-list-cols-1 .blog-card {
    flex-direction: row;
    align-items: stretch;
}

.blog-list-cols-1 .blog-card-image-link {
    flex: 0 0 34%;
    max-width: 360px;
    height: auto;
    align-self: stretch;
    /* Image left, content right: inset the framed image with extra room on the left. */
    padding: 1.25rem 1rem 1.25rem 1.5rem;
}

.blog-list-cols-1 .blog-card-body {
    padding: 1.25rem 1.6rem;
}

.blog-list-cols-1 .blog-card-title {
    font-size: 1.3rem;
}

.blog-list-cols-1 .blog-card-excerpt {
    max-width: 70ch;
    -webkit-line-clamp: 2;
}

/* Keep the single-column card horizontal at all widths so the fixed row height (and the virtualizer's
   ItemSize) stays exact. The image column just narrows on small screens. */
@media (max-width: 640px) {
    .blog-list-cols-1 .blog-card-image-link {
        flex-basis: 38%;
        max-width: 150px;
        padding: 0.8rem 0 0.8rem 0.8rem;
    }

    .blog-list-cols-1 .blog-card-body {
        padding: 1rem 1.1rem;
    }

    .blog-list-cols-1 .blog-card-title {
        font-size: 1.2rem;
    }
}

/* Author block element inside each card */
.blog-card-author {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin-top: auto;
    padding-top: 1rem;
}

.blog-card-author-avatar {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    min-width: 40px;
    max-width: 40px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    background: var(--surface-muted, rgba(255, 255, 255, 0.08));
}

.blog-card-author-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--heading-color);
    border: 1px solid var(--border-color);
    text-transform: uppercase;
}

.blog-card-author-text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
    min-width: 0;
}

.blog-card-author-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--heading-color);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Keep the author profile link clickable above the full-card link overlay. */
a.blog-card-author-name {
    position: relative;
    z-index: 4;
}

a.blog-card-author-name:hover {
    color: var(--accent-gold);
}

.blog-card-author-title {
    font-size: 0.78rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.blog-card-author-guest {
    color: var(--accent-gold, #f5c518);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Guest byline rendered as its own block on imported posts. */
.blog-guest-byline {
    font-size: 0.95rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.7));
    margin: 0.25rem 0 1rem;
}

.blog-guest-byline a {
    font-weight: 600;
    color: var(--heading-color);
}

.blog-guest-byline .blog-guest-tag {
    color: var(--accent-gold, #f5c518);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.78rem;
}

.blog-guest-byline .blog-guest-date {
    margin-left: 0.5rem;
    padding-left: 0.6rem;
    border-left: 1px solid color-mix(in srgb, var(--body-color) 25%, transparent);
}

.author-block-photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-block-name {
    font-weight: 700;
    font-size: 1.1rem;
}

/* Compact blog author byline (Author block) */
.author-byline {
    margin: 1.25rem 0;
}

.author-byline-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.author-byline-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.author-byline-avatar-placeholder {
    display: inline-block;
    background: color-mix(in srgb, var(--body-color) 18%, transparent);
}

.author-byline-rule {
    width: 1px;
    align-self: stretch;
    min-height: 2.5rem;
    background: color-mix(in srgb, var(--accent-primary) 45%, var(--border-color));
    flex-shrink: 0;
}

.author-byline-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.author-byline-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: #2ec4d4;
    text-decoration: none;
}

a.author-byline-name:hover {
    color: #5ad8e6;
    text-decoration: underline;
}

.author-byline-title {
    font-size: 0.85rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--body-color) 72%, transparent);
}

.author-byline-dot {
    margin: 0 0.4rem;
    opacity: 0.6;
}

.author-byline-date {
    white-space: nowrap;
}

.author-byline-guest {
    font-weight: 600;
    color: var(--accent-gold);
}

/* Combined blog header: byline (author + date) above a big centered header image. */
.blog-header {
    margin: 0 0 2rem;
}

.blog-header-byline {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 1.25rem;
}

.blog-header-avatar {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    min-width: 48px;
    max-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

.blog-header-avatar-placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-primary) 22%, transparent);
    color: var(--heading-color);
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
}

.blog-header-byline-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.blog-header-name {
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.2;
    color: var(--accent-gold, var(--accent-primary));
    text-decoration: none;
}

a.blog-header-name:hover {
    color: color-mix(in srgb, var(--accent-gold, var(--accent-primary)) 80%, var(--heading-color));
    text-decoration: underline;
}

.blog-header-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.85rem;
    line-height: 1.3;
    color: color-mix(in srgb, var(--body-color) 72%, transparent);
}

.blog-header-guest {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--accent-gold, #f5c518);
}

.blog-header-dot {
    margin: 0 0.45rem;
    opacity: 0.6;
}

.blog-header-date {
    white-space: nowrap;
}

.blog-header-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: contain;
    border-radius: var(--radius-md);
    margin: 0;
}

.video-block-player iframe,
.video-block-player video {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0.35rem;
    background: #000;
}

.pagination-bar {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.cta-band {
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-gold) 18%, var(--surface-bg)), var(--surface-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: 2rem;
}

.cta-band-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
    color: var(--heading-color);
}

.cta-band-title .ql-size-body {
    font-family: inherit;
    font-size: var(--text-size-body);
    font-weight: 400;
    letter-spacing: normal;
    line-height: 1.6;
    color: inherit;
}

.cta-band-title .ql-size-title {
    color: inherit;
}

.cta-band-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cta-band-actions--left {
    justify-content: flex-start;
}

.cta-band-actions--center {
    justify-content: center;
}

.cta-band-actions--right {
    justify-content: flex-end;
}

.admin-block-preview {
    max-width: 120px;
    max-height: 80px;
    object-fit: cover;
    border-radius: 6px;
}

.admin-item-row td {
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .carousel-slide {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 991.98px) {
    .site-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .card-grid-block.card-grid-cols-3,
    .card-grid-block.card-grid-cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .card-grid-card-layout-horizontal .card-grid-card-inner {
        flex-direction: column;
    }

    .card-grid-card-layout-horizontal .card-grid-media {
        flex: none;
        max-width: none;
    }
}

@media (max-width: 575.98px) {
    .brand-text {
        display: none;
    }

    .card-grid-block.card-grid-cols-2,
    .card-grid-block.card-grid-cols-3,
    .card-grid-block.card-grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .quick-access-grid,
    .service-pill-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 399.98px) {
    .quick-access-grid,
    .service-pill-grid {
        grid-template-columns: 1fr;
    }
}

/* Public breadcrumbs */
.site-breadcrumb {
    margin: 0 0 1.25rem;
    padding: 0;
}

.site-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.4;
}

.site-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
}

.site-breadcrumb-item:not(:first-child)::before {
    content: "/";
    color: var(--border-color-strong);
    font-weight: 400;
}

.site-breadcrumb-item a {
    color: var(--link-color);
    text-decoration: none;
}

.site-breadcrumb-item a:hover {
    text-decoration: underline;
}

.site-breadcrumb-item.is-current span {
    color: var(--text-primary);
    font-weight: 600;
}

/* ============================================================
   Admin page builder (breadcrumb, toolbar, block canvas, palette)
   ============================================================ */

.admin-breadcrumb {
    position: sticky;
    top: var(--nav-height, 4.25rem);
    z-index: 900;
    margin: 0 0 1rem;
    padding: 0.6rem 0;
    background: var(--page-bg);
    border-bottom: 1px solid var(--border-color);
}

.admin-breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
}

.admin-breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-muted);
}

.admin-breadcrumb-item:not(:first-child)::before {
    content: "/";
    color: var(--border-color-strong);
}

.admin-breadcrumb-item a {
    color: var(--link-color);
    text-decoration: none;
}

.admin-breadcrumb-item a:hover {
    text-decoration: underline;
}

.admin-breadcrumb-item.is-current span {
    color: var(--text-primary);
    font-weight: 600;
}

.builder-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.builder-toolbar-page {
    min-width: min(20rem, 100%);
    flex: 1 1 16rem;
}

.builder-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* --- Block canvas (draggable cards) --- */
.block-canvas-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.block-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem 0.9rem;
    background: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.block-card:hover {
    border-color: var(--border-color-strong);
    box-shadow: var(--shadow-sm);
}

.block-card-draft {
    border-style: dashed;
    background: color-mix(in srgb, var(--accent-gold) 6%, var(--surface-bg));
}

.block-card-handle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: grab;
}

.block-card-handle:hover {
    background: var(--surface-bg-hover);
    color: var(--text-primary);
}

.block-card-handle:active {
    cursor: grabbing;
}

.block-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg));
    color: var(--accent-gold);
}

.block-card-body {
    flex: 1 1 auto;
    min-width: 0;
}

.block-card-titleline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.block-card-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.block-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.1rem;
}

.block-card-type {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.7rem;
    color: var(--accent-gold);
}

.block-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 0 0 auto;
}

/* SortableJS drag states */
.block-card-ghost {
    opacity: 0.4;
    border-style: dashed;
    border-color: var(--accent-gold);
}

.block-card-chosen {
    box-shadow: var(--shadow-md);
}

.block-card-dragging {
    box-shadow: var(--shadow-md);
    transform: rotate(0.5deg);
}

/* --- Empty state --- */
.block-canvas-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.4rem;
    padding: 2.5rem 1.5rem;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
}

.block-canvas-empty-icon {
    color: var(--text-muted);
    margin-bottom: 0.25rem;
}

.block-canvas-empty-title {
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.block-canvas-empty-text {
    color: var(--text-muted);
    margin: 0 0 0.5rem;
    max-width: 28rem;
}

/* --- Add element palette --- */
.add-element-plus {
    font-weight: 700;
    margin-right: 0.15rem;
}

.add-element-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 5vh, 4rem) 1rem;
    background: rgba(0, 0, 0, 0.55);
    overflow-y: auto;
}

/* Overlay lives inside builder hosts that use isolation/overflow stacking contexts.
   Lift those hosts while the picker is open so later siblings (e.g. Upcoming Events)
   cannot paint through the palette. */
.cms-block-shell:has(.add-element-overlay),
.builder-item:has(.add-element-overlay),
.block-frame:has(.add-element-overlay),
.columns-layout-col:has(.add-element-overlay),
.section-container-stack:has(.add-element-overlay) {
    position: relative;
    z-index: 1100;
}

.add-element-dialog {
    width: min(56rem, 100%);
    background: var(--page-bg-elevated, var(--surface-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.add-element-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-bg);
}

.add-element-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    margin: 0;
}

.add-element-subtitle {
    color: var(--text-muted);
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
}

.add-element-body {
    padding: 1.25rem 1.35rem;
    max-height: 70vh;
    overflow-y: auto;
}

.add-element-category + .add-element-category {
    margin-top: 1.5rem;
}

.add-element-category-name {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.6rem;
}

.add-element-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.7rem;
}

.add-element-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    text-align: left;
    text-decoration: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

.add-element-card:hover {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
    color: var(--text-primary);
}

.add-element-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg));
    color: var(--accent-gold);
}

.add-element-card-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.add-element-card-label {
    font-weight: 600;
}

.add-element-card-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.3;
}

/* Linked-block palette card: insert body + copy action. */
.add-element-card-custom {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.add-element-card-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 0.9rem;
    background: none;
    border: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    text-align: left;
    color: inherit;
    cursor: pointer;
    width: 100%;
    transition: background 0.15s ease;
}

.add-element-card-main:hover {
    background: color-mix(in srgb, var(--accent-gold) 6%, transparent);
}

.add-element-card-copy {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    border: none;
    border-top: 1px solid var(--border-color);
    background: none;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    text-align: left;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
}

.add-element-card-copy::before {
    content: "+";
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.9rem;
    line-height: 1;
}

.add-element-card-copy:hover {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--accent-gold);
}

/* Inline Form block: constrain the form width within the block. */
.form-block-shell {
    width: 100%;
}

.form-block-width-narrow {
    max-width: 32rem;
}

.form-block-width-medium {
    max-width: 46rem;
}

.form-block-width-full {
    max-width: none;
}

.form-block-align-left {
    margin-inline: 0 auto 0 0;
}

.form-block-align-center {
    margin-inline: auto;
}

.form-block-align-right {
    margin-inline: 0 0 0 auto;
}

.form-block-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.form-block-actions-left {
    justify-content: flex-start;
}

.form-block-actions-center {
    justify-content: center;
}

.form-block-actions-right {
    justify-content: flex-end;
}

/* Sticky search + filter toolbar above the scrolling palette body. */
.add-element-tools {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.85rem 1.35rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-bg);
}

.add-element-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--page-bg-elevated, var(--surface-bg));
    color: var(--text-muted);
    width: 100%;
}

.add-element-search:focus-within {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 25%, transparent);
}

.add-element-search .debounced-search-icon {
    position: static;
    transform: none;
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
    opacity: 0.75;
}

.add-element-search-input {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: none;
    outline: none;
    color: var(--text-primary);
    font-size: 0.95rem;
    padding: 0;
}

.add-element-search-clear {
    position: static;
    flex: 0 0 auto;
    border: none;
    background: none;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.15rem;
    text-decoration: none;
}

.add-element-search-clear:hover {
    color: var(--text-primary);
}

.add-element-filters {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.15rem;
    scrollbar-width: thin;
}

.add-element-filter {
    flex: 0 0 auto;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--page-bg-elevated, var(--surface-bg));
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.75rem;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.add-element-filter:hover {
    border-color: var(--accent-gold);
    color: var(--text-primary);
}

.add-element-filter.is-active {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 16%, var(--surface-bg));
    color: var(--accent-gold);
}

/* Collapsible reusable-block sections at the bottom of the palette. */
.add-element-collapsible-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0;
    margin-bottom: 0.6rem;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.add-element-collapsible-head .add-element-category-name {
    margin-bottom: 0;
}

.add-element-collapsible-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-gold) 14%, var(--surface-bg));
    color: var(--accent-gold);
    font-size: 0.72rem;
    font-weight: 700;
}

.add-element-collapsible-chevron {
    margin-left: auto;
    color: var(--text-muted);
    transition: transform 0.15s ease;
}

.add-element-collapsible-chevron.is-open {
    transform: rotate(90deg);
}

.add-element-empty {
    padding: 1.5rem 0.5rem;
    text-align: center;
    color: var(--text-muted);
}

.custom-block-dialog {
    max-width: 32rem;
}

/* Image primitive */
.image-block-section {
    margin-block: 0.5rem;
}

.image-block {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.image-block-align-left {
    align-items: flex-start;
    text-align: left;
}

.image-block-align-center {
    align-items: center;
    text-align: center;
}

.image-block-align-right {
    align-items: flex-end;
    text-align: right;
}

/* Shrink-wrap the frame so flex alignment (and text-align for the editor's
   inline-block EditableImage) actually moves the image. width:100% made the
   published <img display:block> ignore center/right. */
.image-block-frame {
    width: fit-content;
    max-width: 100%;
}

.image-block-frame > a {
    display: block;
    max-width: 100%;
}

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

.image-block-rounded .image-block-frame img {
    border-radius: var(--radius-md);
}

.image-block-caption {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Divider primitive — keep a clear break between sections on light/dark themes */
.divider-block {
    width: 100%;
    opacity: 1;
    display: block;
    clear: both;
}

.divider-block-spacer {
    width: 100%;
}

.custom-block-divider {
    width: 100%;
    opacity: 1;
    display: block;
}

/* Linked block badge shown only in the builder */
.linked-block-ref-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.6rem;
    margin-bottom: 0.4rem;
    border: 1px dashed color-mix(in srgb, var(--accent-gold) 45%, transparent);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    font-size: 0.8rem;
}

.linked-block-ref-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--text-secondary, var(--text-muted));
}

.linked-block-ref-edit {
    margin-left: auto;
    font-weight: 600;
    white-space: nowrap;
}

/* ---- Custom blocks (user-designed reusable block types) ---- */
.custom-block {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.custom-block-el {
    text-align: left;
}

.custom-block-align-center {
    text-align: center;
}

.custom-block-align-right {
    text-align: right;
}

.custom-block-text {
    margin: 0;
}

.custom-block-image-frame {
    display: inline-block;
    max-width: 100%;
}

.custom-block-image-frame img {
    display: block;
    width: 100%;
    height: auto;
}

.custom-block-image-frame.is-rounded img {
    border-radius: var(--radius-md, 12px);
}

.custom-block-divider {
    width: 100%;
}

.custom-block-divider-spacer {
    width: 100%;
}

/* Inline editing helpers for a placed custom block instance */
.custom-block-editing .custom-block-el {
    outline: 1px dashed color-mix(in srgb, var(--accent-gold) 30%, transparent);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.custom-block-button-edit {
    display: inline-flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-start;
}

.custom-block-button-url {
    max-width: 320px;
}

/* ---- Custom block definition builder ---- */
.cbdef-builder {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .cbdef-builder {
        grid-template-columns: 1fr;
    }
}

.cbdef-editor {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.cbdef-el {
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-md, 12px);
    padding: 1rem;
    background: var(--surface-1, rgba(255, 255, 255, 0.03));
}

.cbdef-el-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.cbdef-el-type {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-muted));
}

.cbdef-el-actions {
    display: flex;
    gap: 0.3rem;
}

.cbdef-field {
    margin-bottom: 0.75rem;
}

.cbdef-field .form-label {
    font-size: 0.8rem;
    margin-bottom: 0.25rem;
}

.cbdef-field-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.cbdef-field-row .cbdef-field {
    flex: 1 1 140px;
}

.cbdef-check {
    margin-bottom: 0.75rem;
}

.cbdef-add {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
}

.cbdef-add-label {
    font-weight: 600;
    font-size: 0.85rem;
    margin-right: 0.25rem;
}

.cbdef-preview {
    position: sticky;
    top: 1rem;
}

.cbdef-preview-label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.75rem;
    color: var(--text-secondary, var(--text-muted));
    margin-bottom: 0.5rem;
}

.cbdef-preview-frame {
    border: 1px solid var(--border-color, rgba(148, 163, 184, 0.3));
    border-radius: var(--radius-md, 12px);
    padding: 1.25rem;
    background: var(--surface-1, rgba(255, 255, 255, 0.03));
}

@media (max-width: 575.98px) {
    .block-card {
        flex-wrap: wrap;
    }

    .block-card-actions {
        width: 100%;
        justify-content: flex-end;
    }
}

/* ============================================================
   Media library — reusable browser + modal popup
   ============================================================ */

/* ---- Modal chrome (wraps the reusable browser for the block editor) ---- */
.media-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: clamp(1rem, 5vh, 4rem) 1rem;
    background: rgba(0, 0, 0, 0.55);
    overflow-y: auto;
}

.media-modal {
    width: min(60rem, 100%);
    display: flex;
    flex-direction: column;
    max-height: 86vh;
    background: var(--page-bg-elevated, var(--surface-bg));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.media-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: var(--surface-bg);
}

.media-modal-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    margin: 0;
}

/* In the modal the browser fills the remaining height and only its body scrolls. */
.media-modal .media-browser {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.media-modal .media-browser-body {
    overflow-y: auto;
}

.media-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border-color);
    background: var(--surface-bg);
}

.media-modal-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

/* ---- Reusable browser (inline on /admin/media and inside the modal) ---- */
.media-browser-card {
    overflow: hidden;
}

.media-browser-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--surface-bg) 70%, transparent);
}

.media-browser-path {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-family: var(--font-mono, monospace);
    word-break: break-all;
}

.media-browser-newfolder {
    width: auto;
    max-width: 18rem;
    flex: 1 1 12rem;
}

.media-browser-upload {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    margin-left: auto;
}

.media-browser-upload.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* The real <input type=file> sits invisibly over the styled label button. */
.media-browser-upload-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.media-browser-searchbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.media-browser-search-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.media-browser-search-wrap .debounced-search-icon,
.media-browser-search-icon {
    font-size: 0.85rem;
    opacity: 0.7;
}

.media-browser-search {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
}

.media-browser-search-wrap .debounced-search-clear,
.media-browser-search-clear {
    flex: none;
    padding: 0 0.25rem;
    text-decoration: none;
}

.media-browser-search-count {
    flex: none;
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

.media-upload-progress {
    padding: 0.55rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}

.media-upload-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
}

.media-upload-progress-label {
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 0;
}

.media-upload-progress-count {
    flex: 0 0 auto;
    color: var(--text-muted);
    margin-left: 0.75rem;
    font-variant-numeric: tabular-nums;
}

.media-upload-progress-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color, #ddd);
    overflow: hidden;
}

.media-upload-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-gold, #f5b335);
    transition: width 0.25s ease;
}

.media-browser-message {
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    color: var(--text-primary);
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
    border-bottom: 1px solid var(--border-color);
}

.media-browser-body {
    padding: 1rem 1.25rem;
}

.media-browser-folders {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.media-folder-chip {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    overflow: hidden;
    background: var(--surface-bg);
}

.media-folder-open {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.55rem 0.3rem 0.75rem;
    background: none;
    border: none;
    color: var(--text-primary);
    font-size: 0.82rem;
    cursor: pointer;
}

.media-folder-open:hover {
    color: var(--accent-gold);
}

.media-folder-icon {
    font-size: 0.95rem;
}

.media-folder-del {
    padding: 0 0.55rem;
    background: none;
    border: none;
    border-left: 1px solid var(--border-color);
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
}

.media-folder-del:hover {
    background: color-mix(in srgb, #dc3545 16%, transparent);
    color: #dc3545;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.75rem;
}

.media-tile {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--surface-bg);
    overflow: hidden;
    transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.08s ease;
}

.media-tile:hover {
    border-color: var(--accent-gold);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.media-tile.is-selected {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.media-tile-pick {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--text-primary);
}

.media-tile-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    width: 100%;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    overflow: hidden;
}

.media-tile-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.media-tile-ext {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
}

.media-tile-name {
    display: block;
    padding: 0.4rem 0.5rem 0.15rem;
    font-size: 0.72rem;
    line-height: 1.25;
    word-break: break-word;
    border-top: 1px solid var(--border-color);
}

.media-tile-folder {
    display: block;
    padding: 0 0.5rem 0.4rem;
    font-size: 0.65rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.media-tile-corner {
    position: absolute;
    top: 0.3rem;
    width: 1.45rem;
    height: 1.45rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.14s ease, background 0.14s ease;
}

.media-tile-copy {
    left: 0.3rem;
}

.media-tile-del {
    right: 0.3rem;
    font-size: 1rem;
}

.media-tile:hover .media-tile-corner,
.media-tile:focus-within .media-tile-corner {
    opacity: 1;
}

.media-tile-copy:hover {
    background: var(--accent-gold);
    color: #1a1a1a;
}

.media-tile-del:hover {
    background: #dc3545;
}

.media-browser-empty {
    margin: 0;
    padding: 1.5rem 0.25rem;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 575.98px) {
    .media-modal-hint {
        display: none;
    }

    .media-browser-upload {
        margin-left: 0;
    }
}

/* ============================================================
   WYSIWYG page builder canvas
   ============================================================ */

.builder-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.85rem 1.5rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border-color, #e4e4e7);
}

.builder-bar-main {
    min-width: 0;
}

.builder-bar-intro {
    margin: 0.3rem 0 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    max-width: 60ch;
}

.builder-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.builder-bar-page {
    position: relative;
    z-index: 30;
}

.builder-page-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 29;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.builder-page-picker {
    position: relative;
    z-index: 31;
}

.builder-page-picker-btn {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 14rem;
    max-width: min(22rem, 72vw);
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border-color, #d4d4d8);
    border-radius: var(--radius-md, 10px);
    background: var(--page-bg-elevated, var(--surface-bg));
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.builder-page-picker-btn:hover,
.builder-page-picker-btn[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent-teal, #0d9488) 45%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-teal, #0d9488) 12%, transparent);
}

.builder-page-picker-btn-label {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-page-picker-btn-slug {
    flex: 0 1 auto;
    max-width: 7rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-page-picker-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 0.85rem;
}

.builder-page-picker-panel {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 32;
    display: flex;
    flex-direction: column;
    width: min(24rem, 92vw);
    max-height: min(28rem, 70vh);
    padding: 0.65rem;
    border: 1px solid var(--border-color, #d4d4d8);
    border-radius: var(--radius-lg, 14px);
    background: var(--page-bg-elevated, var(--surface-bg));
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18);
}

.builder-page-picker-search {
    margin-bottom: 0.55rem;
}

.builder-page-picker-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.55rem;
}

.builder-page-picker-filter {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--border-color, #d4d4d8);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
}

.builder-page-picker-filter.is-active {
    border-color: color-mix(in srgb, var(--accent-teal, #0d9488) 50%, var(--border-color));
    background: color-mix(in srgb, var(--accent-teal, #0d9488) 12%, transparent);
    color: var(--text-primary);
}

.builder-page-picker-filter-count {
    opacity: 0.75;
}

.builder-page-picker-list {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
}

.builder-page-picker-empty {
    padding: 0.85rem 0.5rem;
    color: var(--text-muted);
    font-size: 0.85rem;
    text-align: center;
}

.builder-page-picker-item button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.builder-page-picker-item button:hover {
    background: var(--surface-bg-hover, rgba(0, 0, 0, 0.04));
}

.builder-page-picker-item.is-selected button {
    background: color-mix(in srgb, var(--accent-teal, #0d9488) 10%, transparent);
}

.builder-page-picker-item-main {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.builder-page-picker-item-title {
    font-weight: 600;
    font-size: 0.88rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-page-picker-item-slug {
    font-size: 0.72rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.builder-page-picker-item-slug code {
    font-size: inherit;
    color: inherit;
    background: transparent;
}

.builder-page-picker-item-badge {
    flex: 0 0 auto;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

@media (max-width: 640px) {
    .builder-page-picker-btn {
        min-width: 11rem;
        max-width: 100%;
    }

    .builder-page-picker-btn-slug {
        display: none;
    }

    .builder-page-picker-panel {
        left: auto;
        right: 0;
        width: min(22rem, calc(100vw - 1.5rem));
    }
}

.builder-page-picker--embedded .builder-page-picker-panel {
    position: static;
    width: 100%;
    max-height: 16rem;
    margin-top: 0.35rem;
    box-shadow: none;
}

.builder-page-picker--embedded .builder-page-picker-btn {
    width: 100%;
    max-width: none;
}

.builder-bar-theme .form-select {
    min-width: 11rem;
}

.builder-save-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    background: color-mix(in srgb, #2e9e5b 9%, transparent);
    transition: background 0.2s ease;
}

.builder-save-status.is-saving {
    background: color-mix(in srgb, var(--accent-gold) 14%, transparent);
}

.builder-save-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #2e9e5b;
}

.builder-save-status.is-saving .builder-save-dot {
    background: var(--accent-gold);
    animation: builder-pulse 0.9s ease-in-out infinite;
}

@keyframes builder-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Draft staging toolbar */
.builder-draft-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.9rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.85rem;
    border: 1px solid var(--border-color, #e4e4e7);
    border-radius: 0.6rem;
    background: var(--surface-bg, #fff);
}

.builder-draft-status {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    white-space: nowrap;
}

.builder-draft-status::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
}

.builder-draft-status.is-live {
    color: #2e9e5b;
    background: color-mix(in srgb, #2e9e5b 12%, transparent);
}

.builder-draft-status.is-dirty {
    color: #b7791f;
    background: color-mix(in srgb, #b7791f 14%, transparent);
}

.builder-draft-status.is-draft {
    color: var(--text-muted, #6b7280);
    background: color-mix(in srgb, var(--text-muted, #6b7280) 14%, transparent);
}

.builder-draft-meta {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
}

.builder-draft-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

.builder-schedule-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    padding: 0.55rem 0.85rem;
    border: 1px dashed var(--border-color, #e4e4e7);
    border-radius: 0.6rem;
    background: color-mix(in srgb, var(--surface-bg, #fff) 92%, var(--accent-gold, #f5b335) 8%);
}

.builder-schedule-input {
    max-width: 15rem;
}

.builder-share-link code {
    max-width: min(48rem, 100%);
}

.builder-presence {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    font-size: 0.95rem;
    line-height: 1.35;
    color: #7a2e0e;
    background: #fff4d6;
    border: 2px solid #f59e0b;
    border-left-width: 8px;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.35);
    animation: builder-presence-pulse 1.8s ease-in-out infinite;
}

.builder-presence-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #f59e0b;
    color: #fff;
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1;
}

.builder-presence-text strong {
    color: #6b2708;
}

@keyframes builder-presence-pulse {
    0%, 100% { box-shadow: 0 4px 16px rgba(245, 158, 11, 0.30); }
    50% { box-shadow: 0 4px 22px rgba(245, 158, 11, 0.60); }
}

@media (prefers-reduced-motion: reduce) {
    .builder-presence {
        animation: none;
    }
}

/* Admin draft preview */
.page-draft-available {
    margin: 1.25rem 0;
    padding: 1rem 1.15rem;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 45%, var(--border-color));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-bg));
    max-width: 36rem;
}

.page-draft-available-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.draft-preview-banner {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: #1f2937;
    color: #f9fafb;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}

.draft-preview-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0.6rem 1rem;
}

.draft-preview-tag {
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.72rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: var(--accent-gold, #d4a017);
    color: #1f2937;
}

.draft-preview-text {
    font-size: 0.85rem;
    color: #e5e7eb;
}

.draft-preview-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.draft-preview-surface {
    padding-top: 1.5rem;
}

.builder-canvas {
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--accent-gold) 4%, transparent), color-mix(in srgb, var(--accent-gold) 4%, transparent)),
        repeating-linear-gradient(45deg, color-mix(in srgb, var(--text-muted) 6%, transparent) 0, color-mix(in srgb, var(--text-muted) 6%, transparent) 1px, transparent 1px, transparent 12px),
        var(--surface-bg, #fff);
    border: 1px solid var(--surface-border, #e4e4e7);
    border-radius: var(--radius-md, 14px);
    padding: 1.25rem;
    min-height: 60vh;
}

.builder-canvas-inner {
    max-width: 1180px;
    margin: 0 auto;
    /* Mirror the live page background so the sheet matches the active theme. */
    background: var(--page-bg, #fff);
    border-radius: var(--radius-sm, 10px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.18), 0 8px 30px rgba(0,0,0,0.12);
    overflow: hidden;
}

.builder-frames {
    display: block;
    /* Small headroom so the first block's hover toolbar isn't clipped by the
       sheet's overflow: hidden; the insert zones provide the rest of the gap. */
    padding-top: 0.75rem;
}

/* In the canvas, spacing between blocks is owned by the fixed-height insert
   zones, so drop each top-level block's own trailing margin to keep the gaps
   perfectly even. (Scoped to the builder; the live site is unaffected.) */
.builder-frames .block-frame-body > .section-block {
    margin-bottom: 0;
}

/* Shared "add element" pill button (used by canvas, end-of-page and columns) */
.builder-insert-btn.btn,
.builder-insert-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: var(--accent-gold);
    background-image: none;
    color: #1a1a1a;
    border: none;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.1;
    padding: 0.34rem 0.9rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
    cursor: pointer;
    transition: opacity 0.16s ease, max-width 0.18s ease, padding 0.18s ease,
                background-color 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.builder-insert-btn.btn:hover,
.builder-insert-btn:hover {
    background-color: color-mix(in srgb, var(--accent-gold) 90%, #000);
    background-image: none;
    color: #1a1a1a;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
}

.builder-insert-btn .add-element-plus {
    margin: 0;
    font-size: 0.95rem;
}

/* Insert zones between blocks: an even gap with a calm "+" that grows into a
   labelled pill on hover. Fixed height keeps the spacing identical everywhere. */
.builder-insert-zone {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    margin: 0;
    /* No z-index: a positioned stacking context here would trap .add-element-overlay
       (fixed, rendered inside) and let carousels paint over the open palette.
       z-index: auto lets the overlay's own z-index apply at the root. */
}

.builder-insert-zone::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 7%;
    right: 7%;
    height: 2px;
    border-radius: 2px;
    transform: translateY(-50%);
    background: var(--accent-gold);
    opacity: 0.12;
    transition: opacity 0.16s ease;
}

.builder-insert-zone:hover::before {
    opacity: 0.4;
}

.builder-insert-zone .builder-insert-btn {
    position: relative;
    /* Lift only the button (not the whole zone) above adjacent blocks, so the
       sibling .add-element-overlay isn't trapped in a low stacking context.
       This stays in the root stacking context, far below the picker overlay
       (z-index 1080), so the open picker always paints over the button. */
    z-index: 3;
    justify-content: center;
    gap: 0;
    overflow: hidden;
    white-space: nowrap;
    min-width: 1.9rem;
    height: 1.9rem;
    padding: 0;
    /* Always visible, but calm until the zone is hovered. */
    opacity: 0.6;
    box-shadow: none;
}

/* At rest only the "+" shows; the label collapses to zero width. */
.builder-insert-zone .builder-insert-btn .add-element-label {
    display: inline-block;
    max-width: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-width 0.18s ease, opacity 0.16s ease;
}

.builder-insert-zone:hover .builder-insert-btn,
.builder-insert-zone:focus-within .builder-insert-btn {
    opacity: 1;
    gap: 0.3rem;
    padding: 0 0.95rem;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.builder-insert-zone:hover .builder-insert-btn .add-element-label,
.builder-insert-zone:focus-within .builder-insert-btn .add-element-label {
    max-width: 13rem;
    opacity: 1;
}

/* Block frame chrome */
.block-frame {
    position: relative;
    outline: 1px dashed transparent;
    outline-offset: -2px;
    transition: outline-color 0.12s ease, box-shadow 0.12s ease;
    cursor: default;
}

.block-frame:hover {
    outline-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
}

.block-frame.is-selected {
    outline: 2px solid var(--accent-gold);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.block-frame.is-draft {
    opacity: 0.96;
}

.block-frame.is-draft::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, color-mix(in srgb, #c08a00 8%, transparent) 0, color-mix(in srgb, #c08a00 8%, transparent) 1px, transparent 1px, transparent 10px);
    pointer-events: none;
}

.block-frame-toolbar {
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-100%);
    display: none;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.3rem;
    background: #23232a;
    color: #fff;
    border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
    font-size: 0.8rem;
    z-index: 5;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
}

.block-frame:hover > .block-frame-toolbar,
.block-frame.is-selected > .block-frame-toolbar,
/* Keep the toolbar up while the cursor moves onto this block's own
   "add element" button (which lives inside the same builder-item). */
.builder-item:hover > .block-frame > .block-frame-toolbar {
    display: flex;
}

.block-frame-label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0 0.35rem;
    white-space: nowrap;
}

.block-frame-draft {
    font-size: 0.65rem;
    text-transform: uppercase;
    background: var(--accent-gold);
    color: #1a1a1a;
    border-radius: 4px;
    padding: 0.05rem 0.3rem;
}

.block-frame-spacer {
    width: 0.4rem;
}

.block-frame-handle,
.block-frame-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: none;
    background: transparent;
    color: #d4d4d8;
    border-radius: 6px;
    cursor: pointer;
    line-height: 1;
}

.block-frame-handle {
    cursor: grab;
}

.block-frame-handle:hover,
.block-frame-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}

.block-frame-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.block-frame-btn-danger:hover {
    background: #c0392b;
    color: #fff;
}

.block-frame-body {
    position: relative;
}

/* SortableJS drag states for frames */
.block-frame-ghost {
    opacity: 0.45;
    outline: 2px dashed var(--accent-gold);
    outline-offset: -2px;
    border-radius: var(--radius-sm, 8px);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.block-frame-chosen {
    box-shadow: 0 0 0 2px var(--accent-gold);
}

.block-frame-dragging {
    opacity: 0.96;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
    cursor: grabbing !important;
}

/* While dragging: calm competing UI so drop targets read clearly. */
html.builder-is-dragging,
html.builder-is-dragging * {
    cursor: grabbing !important;
}

html.builder-is-dragging .builder-insert-zone {
    opacity: 0.35;
    pointer-events: none;
}

html.builder-is-dragging .section-container-add {
    opacity: 0.4;
    pointer-events: none;
}

/* Empty canvas state */
.builder-empty {
    text-align: center;
    padding: 4rem 1.5rem;
    color: var(--text-muted);
}

.builder-empty-icon {
    color: var(--accent-gold);
    margin-bottom: 0.75rem;
}

.builder-empty-title {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-strong, #1a1a1a);
    margin-bottom: 0.25rem;
}

.builder-empty-text {
    margin-bottom: 1.25rem;
}

/* Inline editable affordances */
.canvas-editable {
    outline: none;
    border-radius: 4px;
    transition: box-shadow 0.12s ease, background 0.12s ease;
    cursor: text;
    min-width: 2rem;
    min-height: 1em;
}

.canvas-editable:hover {
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 45%, transparent);
}

.canvas-editable:focus {
    box-shadow: 0 0 0 2px var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}

.canvas-editable:empty::before {
    content: attr(data-placeholder);
    color: var(--text-muted);
    opacity: 0.65;
    pointer-events: none;
}

.canvas-editable-rich {
    min-width: 0;
}

.canvas-editable-image {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.canvas-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    min-width: 220px;
    background: color-mix(in srgb, var(--text-muted) 10%, transparent);
    border: 2px dashed color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: var(--radius-sm, 8px);
    color: var(--text-muted);
}

.canvas-image-replace {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 0.3rem 0.7rem;
    border-radius: 999px;
    cursor: pointer;
    z-index: 2;
}

.canvas-image-replace input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.columns-layout-empty-hint {
    border: 1px dashed color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: var(--radius-sm, 8px);
    padding: 1.75rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
}

/* Shared internal padding for top-level content blocks (own shell). */
.cms-block-shell {
    --cms-block-pad-y: 1.5rem;
    --cms-block-pad-x: 1.75rem;
}

.cms-block-shell + .cms-block-shell {
    margin-top: 1.25rem;
}

/* Nested shells (column / section children) — tighter pad, no stacked sibling gap. */
.cms-block-shell-nested {
    --cms-block-pad-y: 1rem;
    --cms-block-pad-x: 1.15rem;
}

.cms-block-shell-nested + .cms-block-shell-nested,
.columns-layout-col .cms-block-shell + .cms-block-shell,
.column-container-drop .cms-block-shell + .cms-block-shell,
.columns-layout-block-entry .cms-block-shell + .cms-block-shell {
    margin-top: 0;
}

.columns-layout-stack .cms-block-shell,
.column-container-drop .cms-block-shell,
.columns-layout-block-entry .cms-block-shell {
    width: 100%;
}

@media (max-width: 767.98px) {
    .cms-block-shell {
        --cms-block-pad-y: 1.15rem;
        --cms-block-pad-x: 1.25rem;
    }

    .cms-block-shell + .cms-block-shell {
        margin-top: 1rem;
    }
}

.cms-block-shell > .section-block,
.cms-block-shell > .video-block {
    padding: var(--cms-block-pad-y) var(--cms-block-pad-x);
}

.cms-block-shell:has(> .site-hero)::before,
.cms-block-shell:has(> .carousel-block)::before {
    background: transparent;
}

.cms-block-shell > .site-hero,
.cms-block-shell > .site-hero-banner {
    border-radius: inherit;
}

/* Full-bleed / self-padded layouts: don't inherit the shared inset. */
.cms-block-shell > .content-panel-block {
    padding: 2rem 2.25rem;
}

@media (max-width: 767.98px) {
    .cms-block-shell > .content-panel-block {
        padding: 1.25rem 1rem;
    }
}

.cms-block-shell > .quote-band {
    padding: 2rem 0;
}

.cms-block-shell > .cta-band {
    padding: 2rem;
}

.cms-block-shell > .image-block-section {
    padding: var(--cms-block-pad-y) 0;
}

/* Section container — shared background via parent cms-block-shell; nested blocks skip their own shell. */
.section-container-block {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.section-container-intro {
    margin-bottom: 0;
}

.section-container-stack {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.section-container-stack.is-editing {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px dashed color-mix(in srgb, var(--border-color) 70%, transparent);
}

.section-container-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 4.5rem;
    padding: 0.65rem;
    border: 1.5px dashed transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        min-height 0.16s ease,
        outline-color 0.16s ease;
}

/* Hover / open “Add to section” → light up only that section (direct child, so nested
   sections don’t also paint their parent). Same chrome as the active drag drop-target. */
.section-container-block:has(> .section-container-stack > .section-container-add:hover),
.section-container-block:has(> .section-container-stack > .section-container-add .add-element-overlay),
.section-container-block:has(> .section-container-stack > .section-container-drop.is-drop-target) {
    border-radius: var(--radius-md, 10px);
    box-shadow:
        0 0 0 2px var(--accent-gold),
        0 0 0 6px color-mix(in srgb, var(--accent-gold) 18%, transparent);
}

.section-container-stack.is-editing:has(> .section-container-add:hover) > .section-container-drop,
.section-container-stack.is-editing:has(> .section-container-add .add-element-overlay) > .section-container-drop {
    border-color: var(--accent-gold);
    border-style: solid;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-gold) 14%, transparent),
            color-mix(in srgb, var(--accent-gold) 6%, transparent)
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent),
        0 0 0 4px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

.section-container-stack.is-editing:has(> .section-container-add:hover) > .section-container-drop::after,
.section-container-stack.is-editing:has(> .section-container-add .add-element-overlay) > .section-container-drop::after {
    content: attr(data-add-label);
    position: absolute;
    top: 0.45rem;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: var(--accent-gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-gold) 45%, transparent);
    pointer-events: none;
    white-space: nowrap;
}

/* Drop-ready outline on sections while dragging. */
html.builder-is-dragging .section-container-block:has(> .section-container-stack > .section-container-drop.is-drop-ready) {
    border-radius: var(--radius-md, 10px);
    outline: 1.5px dashed color-mix(in srgb, var(--accent-gold) 40%, transparent);
    outline-offset: 3px;
}

html.builder-is-dragging .section-container-block:has(> .section-container-stack > .section-container-drop.is-drop-target) {
    outline: none;
}

/* Highlight ready drop lists during drag. */
html.builder-is-dragging .section-container-drop.is-drop-ready {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
    min-height: 5.5rem;
}

html.builder-is-dragging .builder-frames.is-drop-ready {
    outline: 1.5px dashed color-mix(in srgb, var(--accent-gold) 28%, transparent);
    outline-offset: 6px;
    border-radius: var(--radius-md, 10px);
}

/* The list Sortable currently aims at — clear “into section” vs “on page”. */
html.builder-is-dragging .section-container-drop.is-drop-target {
    border-color: var(--accent-gold);
    border-style: solid;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-gold) 14%, transparent),
            color-mix(in srgb, var(--accent-gold) 6%, transparent)
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent),
        0 0 0 4px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

html.builder-is-dragging .section-container-drop.is-drop-target::after {
    content: attr(data-drop-label);
    position: absolute;
    top: 0.45rem;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: var(--accent-gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-gold) 45%, transparent);
    pointer-events: none;
    white-space: nowrap;
}

html.builder-is-dragging .builder-frames.is-drop-target {
    position: relative;
    outline-color: var(--accent-gold);
    outline-style: solid;
    outline-width: 2px;
    background: color-mix(in srgb, var(--accent-gold) 4%, transparent);
}

html.builder-is-dragging .builder-frames.is-drop-target::before {
    content: attr(data-drop-label);
    position: sticky;
    top: 0.5rem;
    z-index: 5;
    display: block;
    width: fit-content;
    margin: 0 auto 0.5rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: color-mix(in srgb, var(--accent-gold) 88%, #fff);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
    pointer-events: none;
}

/* Section insertion placeholder (full opacity). */
.section-container-drop > .block-frame-ghost {
    opacity: 1;
    min-height: 3.25rem;
    outline: none;
    border: 2px dashed var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-bg, #fff));
    box-shadow: none;
}

.section-container-drop > .block-frame-ghost .block-frame-toolbar,
.section-container-drop > .block-frame-ghost .block-frame-body {
    opacity: 0.22;
}

.section-container-entry {
    min-width: 0;
}

.section-container-add {
    display: flex;
    justify-content: center;
    padding-top: 0.25rem;
    transition: opacity 0.16s ease;
}

.section-container-add .builder-insert-btn {
    width: 100%;
    max-width: 280px;
}

.section-container-empty-hint {
    border: 1px dashed color-mix(in srgb, var(--text-muted) 40%, transparent);
    border-radius: var(--radius-sm, 8px);
    padding: 1.35rem 1rem;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin: 0;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

html.builder-is-dragging .section-container-drop.is-drop-ready .section-container-empty-hint {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: color-mix(in srgb, var(--text-strong, #1a1a1a) 80%, var(--accent-gold));
}

html.builder-is-dragging .section-container-drop.is-drop-target .section-container-empty-hint {
    border-color: transparent;
    background: transparent;
    color: transparent;
}

/* ----- Column drop zones (mirror section DnD chrome) ----- */

.column-container-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 8.5rem;
    padding: 0.65rem;
    border: 1.5px dashed transparent;
    border-radius: var(--radius-md, 10px);
    background: transparent;
    transition:
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease,
        min-height 0.16s ease,
        outline-color 0.16s ease;
}

/* Keep the Add control inside the drop zone from looking like a sortable card. */
.column-container-drop > .columns-layout-col-add {
    margin-top: auto;
    padding-top: 0.5rem;
}

.column-container-drop:has(> .columns-layout-col-add:hover),
.column-container-drop:has(> .columns-layout-col-add .add-element-overlay) {
    border-color: var(--accent-gold);
    border-style: solid;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-gold) 14%, transparent),
            color-mix(in srgb, var(--accent-gold) 6%, transparent)
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent),
        0 0 0 4px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

.column-container-drop:has(> .columns-layout-col-add:hover)::after,
.column-container-drop:has(> .columns-layout-col-add .add-element-overlay)::after {
    content: attr(data-add-label);
    position: absolute;
    top: 0.45rem;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: var(--accent-gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-gold) 45%, transparent);
    pointer-events: none;
    white-space: nowrap;
}

html.builder-is-dragging .columns-layout-row.is-editing .columns-layout-col {
    min-height: 14rem;
}

html.builder-is-dragging .column-container-drop.is-drop-ready {
    border-color: color-mix(in srgb, var(--accent-gold) 45%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 5%, transparent);
    min-height: 10rem;
}

/* While dragging, mute page-level ghost parking next to a columns layout. */
html.builder-is-dragging .builder-item:has(.columns-layout-block) > .block-frame-ghost,
html.builder-is-dragging .builder-frames > .block-frame-ghost {
    opacity: 0.55;
}

html.builder-is-dragging .column-container-drop.is-drop-target {
    border-color: var(--accent-gold);
    border-style: solid;
    background:
        linear-gradient(
            180deg,
            color-mix(in srgb, var(--accent-gold) 14%, transparent),
            color-mix(in srgb, var(--accent-gold) 6%, transparent)
        );
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent),
        0 0 0 4px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

html.builder-is-dragging .column-container-drop.is-drop-target::after {
    content: attr(data-drop-label);
    position: absolute;
    top: 0.45rem;
    left: 50%;
    z-index: 4;
    transform: translateX(-50%);
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #1a1a1a;
    background: var(--accent-gold);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent-gold) 45%, transparent);
    pointer-events: none;
    white-space: nowrap;
}

.column-container-drop > .block-frame-ghost {
    opacity: 1;
    min-height: 3.25rem;
    outline: none;
    border: 2px dashed var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 12%, var(--surface-bg, #fff));
    box-shadow: none;
}

.column-container-drop > .block-frame-ghost .block-frame-toolbar,
.column-container-drop > .block-frame-ghost .block-frame-body {
    opacity: 0.22;
}

html.builder-is-dragging .column-container-drop.is-drop-ready .columns-layout-empty-hint {
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    background: color-mix(in srgb, var(--accent-gold) 8%, transparent);
    color: color-mix(in srgb, var(--text-strong, #1a1a1a) 80%, var(--accent-gold));
}

html.builder-is-dragging .column-container-drop.is-drop-target .columns-layout-empty-hint {
    border-color: transparent;
    background: transparent;
    color: transparent;
}

.section-header .cms-content p:last-child {
    margin-bottom: 0;
}

.section-header .ql-align-center,
.section-header .cms-content.ql-align-center {
    text-align: center;
}

.section-header .ql-align-right,
.section-header .cms-content.ql-align-right {
    text-align: right;
}

.section-header .ql-align-justify,
.section-header .cms-content.ql-align-justify {
    text-align: justify;
}

/* Settings drawer */
.builder-drawer-scrim {
    position: fixed;
    inset: 0;
    background: rgba(15,15,20,0.45);
    z-index: 1080;
    animation: builder-fade 0.15s ease;
}

.builder-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(560px, 96vw);
    background: var(--surface-bg, #fff);
    border-left: 1px solid var(--surface-border, #e4e4e7);
    box-shadow: -12px 0 40px rgba(0,0,0,0.2);
    z-index: 1081;
    display: flex;
    flex-direction: column;
    animation: builder-slide-in 0.2s ease;
}

@keyframes builder-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

.builder-drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
}

.builder-drawer-title {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.builder-drawer-sub {
    margin: 0.1rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.builder-drawer-close {
    border: none;
    background: transparent;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0 0.3rem;
}

.builder-drawer-close:hover {
    color: var(--text-strong, #1a1a1a);
}

.builder-drawer-body {
    flex: 1;
    min-height: 0;
    overflow: hidden;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.builder-settings.is-embedded {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    height: 100%;
}

/* Standalone page: wrapper is layout-transparent so Bootstrap columns still work. */
.builder-settings:not(.is-embedded) .builder-settings-scroll {
    display: contents;
}

.builder-settings.is-embedded .builder-settings-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 1.25rem;
}

.builder-settings.is-embedded .builder-settings-footer {
    flex: 0 0 auto;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--surface-border, #e4e4e7);
    background: var(--surface-bg, #fff);
    box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.06);
}

.builder-settings.is-embedded .builder-settings-main .card {
    border: none;
    box-shadow: none;
}

.builder-settings.is-embedded .builder-settings-main .card-body {
    padding: 0;
}

/* ============================================================
   Collapsible settings sections (advanced option groups)
   ============================================================ */
.settings-section {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px);
    margin-bottom: 0.85rem;
    background: color-mix(in srgb, var(--text-primary) 6%, var(--surface-bg));
    color: var(--text-primary);
}

.settings-section-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    color: inherit;
    border-radius: var(--radius-sm, 8px);
}

.settings-section.is-open > .settings-section-head {
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--radius-sm, 8px) var(--radius-sm, 8px) 0 0;
}

.settings-section-head:hover {
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
}

.settings-section-head:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: -2px;
}

.settings-section-titles {
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-section-title {
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
}

.settings-section-sub {
    font-size: 0.72rem;
    color: var(--text-muted, #6b6b6b);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-section-chevron {
    flex: none;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--text-muted, #6b6b6b);
    transform: rotate(90deg);
    transition: transform 0.16s ease;
}

.settings-section.is-open > .settings-section-head .settings-section-chevron {
    transform: rotate(-90deg);
}

.settings-section-inner {
    padding: 0.85rem;
}

/* ============================================================
   Multi-item manager (slides, cards, chips, columns)
   ============================================================ */
.item-manager-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.item-manager-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: 1.4rem;
    padding: 0 0.4rem;
    margin-left: 0.35rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    color: color-mix(in srgb, var(--accent-gold) 85%, var(--text-primary));
    font-size: 0.78rem;
    font-weight: 700;
    vertical-align: middle;
}

.item-manager-add {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    white-space: nowrap;
}

.item-manager-add-plus {
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
}

.item-manager-empty {
    padding: 0.85rem 0.25rem;
}

.item-manager-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item-manager-item {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md, 12px);
    background: var(--surface-bg);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.item-manager-item:hover {
    border-color: var(--border-color-strong, var(--accent-gold));
}

.item-manager-item.is-open {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold) 16%, transparent);
}

.item-manager-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
}

.item-manager-reorder {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    flex: 0 0 auto;
}

.item-manager-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.item-manager-iconbtn:hover:not(:disabled) {
    background: var(--surface-bg-hover, color-mix(in srgb, var(--text-muted) 12%, transparent));
    color: var(--text-primary);
}

.item-manager-iconbtn:disabled {
    opacity: 0.3;
    cursor: default;
}

.item-manager-iconbtn-danger {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
}

.item-manager-iconbtn-danger:hover {
    background: #c0392b;
    color: #fff;
}

.item-manager-summary {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.25rem 0.35rem;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 8px;
}

.item-manager-summary:hover {
    background: color-mix(in srgb, var(--accent-gold) 7%, transparent);
}

.item-manager-thumb {
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 8px;
    object-fit: cover;
    background: color-mix(in srgb, var(--text-muted) 12%, transparent);
}

.item-manager-thumb-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.85rem;
    border: 1px dashed var(--border-color-strong, var(--border-color));
}

.item-manager-titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.item-manager-title {
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-manager-sub {
    font-size: 0.78rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-manager-badge {
    flex: 0 0 auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    background: color-mix(in srgb, var(--accent-gold) 22%, transparent);
    color: color-mix(in srgb, var(--accent-gold) 88%, var(--text-primary));
}

.item-manager-chevron {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 1.1rem;
    line-height: 1;
    transition: transform 0.18s ease;
}

.item-manager-chevron.is-open {
    transform: rotate(90deg);
}

.item-manager-body {
    padding: 0.85rem 0.85rem 1rem;
    border-top: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--accent-gold) 3%, var(--surface-bg));
}

.item-manager-formactions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

@media (max-width: 575.98px) {
    .block-frame-toolbar {
        position: static;
        transform: none;
        border-radius: var(--radius-sm, 8px);
        margin: 0.25rem;
    }
}

/* ===== Admin dashboard ===== */
.admin-dashboard-head {
    margin-bottom: 1.75rem;
}

.admin-dashboard-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.admin-dashboard-account {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.admin-dashboard-user {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.admin-dashboard-lead {
    color: var(--text-muted);
    max-width: 60ch;
    margin-bottom: 0;
}

.admin-group {
    margin-bottom: 2rem;
}

.admin-group-title {
    font-size: 0.82rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin-bottom: 0.85rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
}

.admin-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}

.admin-tile {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--surface-border, #e4e4e7);
    border-radius: 14px;
    background: var(--surface-bg, #fff);
    text-decoration: none;
    color: inherit;
    transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
}

.admin-tile:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    box-shadow: 0 8px 26px rgba(0,0,0,0.10);
    text-decoration: none;
    color: inherit;
}

.admin-tile.is-primary {
    border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    background:
        linear-gradient(0deg, color-mix(in srgb, var(--accent-gold) 6%, transparent), color-mix(in srgb, var(--accent-gold) 6%, transparent)),
        var(--surface-bg, #fff);
}

.admin-tile-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: color-mix(in srgb, var(--accent-gold) 16%, transparent);
    color: color-mix(in srgb, var(--accent-gold) 80%, #5a4500);
}

.admin-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-tile-title {
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.admin-tile-desc {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 0.6rem;
}

.admin-tile-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: color-mix(in srgb, var(--accent-gold) 82%, #5a4500);
    margin-top: auto;
}

.admin-tile-cta svg {
    transition: transform 0.14s ease;
}

.admin-tile:hover .admin-tile-cta svg {
    transform: translateX(3px);
}

/* Admin → Pages: card grid in a viewport-height scroll column beside the editor form. */
@media (min-width: 992px) {
    .admin-content-row {
        align-items: flex-start;
    }

    .admin-content-list-col {
        overflow-y: auto;
        scrollbar-gutter: stable;
    }
}

.admin-content-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-content-search {
    max-width: 100%;
}

.admin-content-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
    margin-bottom: 0;
}

.admin-content-tabs .nav-item {
    margin-bottom: -1px;
}

.admin-content-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.55rem 0.15rem;
    margin-right: 1.1rem;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-muted);
    background: transparent;
    transition: color 0.14s ease, border-color 0.14s ease;
}

.admin-content-tabs .nav-link:hover {
    color: var(--heading-color);
}

.admin-content-tabs .nav-link.active {
    color: var(--heading-color);
    border-bottom-color: var(--accent-gold, #f5b335);
}

.admin-content-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 14%, var(--surface-bg, #fff));
    color: color-mix(in srgb, var(--accent-gold, #f5b335) 75%, var(--heading-color));
}

.admin-content-tabs .nav-link.active .admin-content-tab-count {
    background: var(--accent-gold, #f5b335);
    color: var(--btn-primary-text, #1a1a1a);
}

.admin-content-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.admin-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.7rem;
    border: 1px solid var(--surface-border, #e4e4e7);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}

.admin-filter-chip:hover {
    color: var(--heading-color);
    border-color: color-mix(in srgb, var(--accent-gold, #f5b335) 45%, var(--surface-border));
}

.admin-filter-chip.is-active {
    color: var(--btn-primary-text, #1a1a1a);
    background: var(--accent-gold, #f5b335);
    border-color: var(--accent-gold, #f5b335);
}

.admin-filter-chip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    background: color-mix(in srgb, var(--text-muted) 18%, transparent);
    color: inherit;
}

.admin-filter-chip.is-active .admin-filter-chip-count {
    background: color-mix(in srgb, #000 18%, transparent);
}

.admin-pages-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    gap: 0.85rem;
    align-content: start;
}

.admin-page-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--surface-border, #e4e4e7);
    border-radius: 12px;
    background: var(--surface-bg, #fff);
    min-width: 0;
}

.admin-page-card.is-selected {
    border-color: color-mix(in srgb, var(--accent-gold) 60%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-gold) 35%, transparent);
}

.admin-page-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.admin-page-card-title {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--heading-color);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-page-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.admin-page-card-slug {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-muted);
    overflow: hidden;
}

.admin-page-card-slug code {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-page-card-meta {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-page-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: auto;
    padding-top: 0.35rem;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: rgba(8, 10, 12, 0.62);
    backdrop-filter: blur(3px);
}

.admin-modal {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: 92vh;
    overflow-y: auto;
    padding: 1.4rem 1.4rem 1.2rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg, 16px);
    background: var(--page-bg-elevated, var(--surface-bg));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.admin-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.7rem;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.admin-modal-close:hover {
    background: var(--surface-bg-hover);
    color: var(--text-primary);
}

/* ===== Inline item editing on the canvas ===== */
.item-frame {
    position: relative;
}

.item-frame-toolbar {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    z-index: 4;
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    border-radius: 8px;
    background: rgba(20, 20, 22, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    opacity: 0;
    transition: opacity 0.12s ease;
    pointer-events: none;
}

.item-frame:hover .item-frame-toolbar,
.item-frame:focus-within .item-frame-toolbar {
    opacity: 1;
    pointer-events: auto;
}

.item-frame-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #f2f2f2;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
}

.item-frame-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.item-frame-btn-danger:hover {
    background: #c0392b;
    color: #fff;
}

.card-grid-card-edit {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    cursor: default;
    min-height: 100%;
}

.card-grid-link-edit,
.card-grid-caption-edit {
    font-size: 0.78rem;
    color: var(--accent-gold);
    word-break: break-all;
}

.card-grid-banner-edit {
    margin-bottom: 0.75rem;
}

.card-grid-add-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 140px;
    height: 100%;
    border: 2px dashed color-mix(in srgb, var(--accent-gold) 50%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--accent-gold) 4%, transparent);
    color: var(--text-muted);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}

.card-grid-add-tile:hover {
    border-color: var(--accent-gold);
    background: color-mix(in srgb, var(--accent-gold) 10%, transparent);
    color: var(--text-strong, inherit);
}

.card-grid-add-plus {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--accent-gold);
}

.section-header-edit {
    margin-bottom: 1rem;
}

.carousel-edit-hint {
    font-size: 0.78rem;
    color: var(--text-muted, #6b7280);
    margin: 0 0 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Per-block bg opacity: solid theme tokens on body; .cms-block-translucent redefines
   --surface-bg/--page-bg/--border-color with --cms-block-bg-opacity (avoids custom-property cycles). */
body {
    --cms-surface-base: var(--surface-bg);
    --cms-page-base: var(--page-bg);
    --cms-border-base: var(--border-color);
}

.cms-block-shell {
    position: relative;
    isolation: isolate;
    border-radius: 1rem;
    overflow: hidden;
}

/* Shell page-tint so empty block areas aren't transparent at 100% opacity. */
.cms-block-shell::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--cms-page-base);
    border-radius: inherit;
}

.cms-block-translucent {
    --surface-bg: color-mix(in srgb, var(--cms-surface-base) calc(var(--cms-block-bg-opacity, 1) * 100%), transparent);
    --page-bg: color-mix(in srgb, var(--cms-page-base) calc(var(--cms-block-bg-opacity, 1) * 100%), transparent);
    /* Border opacity matches fill. */
    --border-color: color-mix(in srgb, var(--cms-border-base) calc(var(--cms-block-bg-opacity, 1) * 100%), transparent);
}

.cms-block-translucent::before {
    background: color-mix(in srgb, var(--cms-page-base) calc(var(--cms-block-bg-opacity, 1) * 100%), transparent);
    border-radius: inherit;
}

/* ── Scroll hex-tile entrance reveal ────────────────────────────────────────────
   Blocks opt-in via "Hex reveal" in block settings. The hex canvas covers just the
   targeted region (title or content, not both). The block background fades from
   transparent to its configured --cms-block-bg-opacity so it doesn't pop in.
   scroll-animate.js adds .scroll-entrance-active once any scroll anim is detected,
   and .scroll-animate-visible / .scroll-hex-title-done once reveals fire. */

/* Background fade: starts transparent, transitions to the set block opacity.
   Uses the server-rendered classes directly so background is hidden before JS loads. */
.scroll-animate::before,
.scroll-hex-title::before,
.scroll-slide-in::before,
.scroll-title-slide::before {
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-bg-visible::before {
    opacity: 1;
}

/* Pending cover: hide block chrome until hex/binary owns the region.
   Beats early .scroll-slide-visible (higher specificity / !important) so content
   cannot peek through an empty binary walk-in canvas. */
.scroll-animate:not(.scroll-animate-visible) > *:not(.section-header):not(.section-block):not(.binary-tile-canvas):not(.scroll-hex-canvas):not(.promo-binary-canvas),
.scroll-animate:not(.scroll-animate-visible) > .section-block > *:not(.section-header),
.scroll-animate:not(.scroll-animate-visible) .cms-content,
.scroll-animate:not(.scroll-animate-visible) .gh-md-block,
.scroll-animate:not(.scroll-animate-visible) .store-locator,
.scroll-animate:not(.scroll-animate-visible) .store-locator-block,
.scroll-entrance-covering > *:not(.section-header):not(.section-block):not(.binary-tile-canvas):not(.scroll-hex-canvas):not(.promo-binary-canvas),
.scroll-entrance-covering > .section-block > *:not(.section-header) {
    opacity: 0 !important;
    visibility: hidden;
}

.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide h1,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide h2,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide h3,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .cms-entrance-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .section-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .site-hero-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .cta-band-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .feature-split-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .book-3d-block-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .content-panel-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .pdf-embed-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .pdf-showcase-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .columns-layout-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .pdf-magazine-grid-caption,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide .eyebrow,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible h1,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible h2,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible h3,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .cms-entrance-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .section-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .site-hero-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .cta-band-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .feature-split-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .book-3d-block-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .content-panel-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .pdf-embed-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .pdf-showcase-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .columns-layout-title,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .pdf-magazine-grid-caption,
.scroll-hex-title:not(.scroll-hex-title-done).scroll-title-slide.scroll-slide-visible .eyebrow {
    opacity: 0 !important;
    transform: none !important;
}

/* Content hex reveal: hide content containers that the hex canvas will cover.
   Matches the same selectors as CONTENT_SELECTOR in scroll-animate.js.
   Title / header elements stay visible (not targeted here). */
.scroll-animate .section-block > .cms-content,
.scroll-animate .cms-content,
.scroll-animate .gh-md-block,
.scroll-animate .section-container-intro,
.scroll-animate .section-container-stack,
.scroll-animate .site-hero-copy,
.scroll-animate .site-hero-media,
.scroll-animate .site-hero-body,
.scroll-animate .site-hero-actions,
.scroll-animate .cta-band-actions,
.scroll-animate .feature-split-grid,
.scroll-animate .feature-split-copy,
.scroll-animate .feature-split-media,
.scroll-animate .card-grid-block,
.scroll-animate .flip-card-grid,
.scroll-animate .button-group-row,
.scroll-animate .button-group-shell,
.scroll-animate .image-block,
.scroll-animate .video-block-player,
.scroll-animate .accordion-stack,
.scroll-animate .team-grid,
.scroll-animate .quote-band-inner,
.scroll-animate .content-panel-body,
.scroll-animate .carousel-shell,
.scroll-animate .feature-banner,
.scroll-animate .book-3d-showcase,
.scroll-animate .form-block-shell,
.scroll-animate .pdf-magazine-grid,
.scroll-animate .table-block-scroll,
.scroll-animate .podcast-block-player,
.scroll-animate .contact-us-block-actions,
.scroll-animate .blog-list-viewport,
.scroll-animate .blog-list-toolbar,
.scroll-animate .columns-layout-row,
.scroll-animate .ec,
.scroll-animate .promo-viewport,
.scroll-animate .cta-band-inner,
.scroll-animate .callout-grid,
.scroll-animate .topic-strip,
.scroll-animate .hex-cluster,
.scroll-animate .pdf-embed-block,
.scroll-animate .pdf-embed-frame-wrap,
.scroll-animate .pdf-showcase,
.scroll-animate .pdf-magazine-block,
.scroll-animate .pdf-magazine-wrap,
.scroll-animate .table-block-grid,
.scroll-animate .image-block-frame,
.scroll-animate .author-byline,
.scroll-animate .blog-header,
.scroll-animate .section-jump-nav,
.scroll-animate .upcoming-event-list,
.scroll-animate .store-locator,
.scroll-animate .store-locator-block {
    opacity: 0;
}

.scroll-animate.scroll-animate-visible .section-block > .cms-content,
.scroll-animate.scroll-animate-visible .cms-content,
.scroll-animate.scroll-animate-visible .gh-md-block,
.scroll-animate.scroll-animate-visible .section-container-intro,
.scroll-animate.scroll-animate-visible .section-container-stack,
.scroll-animate.scroll-animate-visible .site-hero-copy,
.scroll-animate.scroll-animate-visible .site-hero-media,
.scroll-animate.scroll-animate-visible .site-hero-body,
.scroll-animate.scroll-animate-visible .site-hero-actions,
.scroll-animate.scroll-animate-visible .cta-band-actions,
.scroll-animate.scroll-animate-visible .feature-split-grid,
.scroll-animate.scroll-animate-visible .feature-split-copy,
.scroll-animate.scroll-animate-visible .feature-split-media,
.scroll-animate.scroll-animate-visible .card-grid-block,
.scroll-animate.scroll-animate-visible .flip-card-grid,
.scroll-animate.scroll-animate-visible .button-group-row,
.scroll-animate.scroll-animate-visible .button-group-shell,
.scroll-animate.scroll-animate-visible .image-block,
.scroll-animate.scroll-animate-visible .video-block-player,
.scroll-animate.scroll-animate-visible .accordion-stack,
.scroll-animate.scroll-animate-visible .team-grid,
.scroll-animate.scroll-animate-visible .quote-band-inner,
.scroll-animate.scroll-animate-visible .content-panel-body,
.scroll-animate.scroll-animate-visible .carousel-shell,
.scroll-animate.scroll-animate-visible .feature-banner,
.scroll-animate.scroll-animate-visible .book-3d-showcase,
.scroll-animate.scroll-animate-visible .form-block-shell,
.scroll-animate.scroll-animate-visible .pdf-magazine-grid,
.scroll-animate.scroll-animate-visible .table-block-scroll,
.scroll-animate.scroll-animate-visible .podcast-block-player,
.scroll-animate.scroll-animate-visible .contact-us-block-actions,
.scroll-animate.scroll-animate-visible .blog-list-viewport,
.scroll-animate.scroll-animate-visible .blog-list-toolbar,
.scroll-animate.scroll-animate-visible .columns-layout-row,
.scroll-animate.scroll-animate-visible .ec,
.scroll-animate.scroll-animate-visible .promo-viewport,
.scroll-animate.scroll-animate-visible .cta-band-inner,
.scroll-animate.scroll-animate-visible .callout-grid,
.scroll-animate.scroll-animate-visible .topic-strip,
.scroll-animate.scroll-animate-visible .hex-cluster,
.scroll-animate.scroll-animate-visible .pdf-embed-block,
.scroll-animate.scroll-animate-visible .pdf-embed-frame-wrap,
.scroll-animate.scroll-animate-visible .pdf-showcase,
.scroll-animate.scroll-animate-visible .pdf-magazine-block,
.scroll-animate.scroll-animate-visible .pdf-magazine-wrap,
.scroll-animate.scroll-animate-visible .table-block-grid,
.scroll-animate.scroll-animate-visible .image-block-frame,
.scroll-animate.scroll-animate-visible .author-byline,
.scroll-animate.scroll-animate-visible .blog-header,
.scroll-animate.scroll-animate-visible .section-jump-nav,
.scroll-animate.scroll-animate-visible .upcoming-event-list,
.scroll-animate.scroll-animate-visible .store-locator,
.scroll-animate.scroll-animate-visible .store-locator-block {
    opacity: 1;
    visibility: visible;
}

/* Hex + slide together: after hex completes, don't keep content at opacity:0 waiting on slide
   (equal-specificity .scroll-slide-in rules below used to win and strand the block). */
.scroll-animate.scroll-animate-visible.scroll-slide-in .section-block > .cms-content,
.scroll-animate.scroll-animate-visible.scroll-slide-in .cms-content,
.scroll-animate.scroll-animate-visible.scroll-slide-in .gh-md-block,
.scroll-animate.scroll-animate-visible.scroll-slide-in .section-container-intro,
.scroll-animate.scroll-animate-visible.scroll-slide-in .section-container-stack,
.scroll-animate.scroll-animate-visible.scroll-slide-in .site-hero-copy,
.scroll-animate.scroll-animate-visible.scroll-slide-in .site-hero-media,
.scroll-animate.scroll-animate-visible.scroll-slide-in .site-hero-body,
.scroll-animate.scroll-animate-visible.scroll-slide-in .site-hero-actions,
.scroll-animate.scroll-animate-visible.scroll-slide-in .cta-band-actions,
.scroll-animate.scroll-animate-visible.scroll-slide-in .feature-split-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .feature-split-copy,
.scroll-animate.scroll-animate-visible.scroll-slide-in .feature-split-media,
.scroll-animate.scroll-animate-visible.scroll-slide-in .card-grid-block,
.scroll-animate.scroll-animate-visible.scroll-slide-in .flip-card-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .button-group-row,
.scroll-animate.scroll-animate-visible.scroll-slide-in .button-group-shell,
.scroll-animate.scroll-animate-visible.scroll-slide-in .image-block,
.scroll-animate.scroll-animate-visible.scroll-slide-in .video-block-player,
.scroll-animate.scroll-animate-visible.scroll-slide-in .accordion-stack,
.scroll-animate.scroll-animate-visible.scroll-slide-in .team-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .quote-band-inner,
.scroll-animate.scroll-animate-visible.scroll-slide-in .content-panel-body,
.scroll-animate.scroll-animate-visible.scroll-slide-in .carousel-shell,
.scroll-animate.scroll-animate-visible.scroll-slide-in .feature-banner,
.scroll-animate.scroll-animate-visible.scroll-slide-in .book-3d-showcase,
.scroll-animate.scroll-animate-visible.scroll-slide-in .form-block-shell,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-magazine-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .table-block-scroll,
.scroll-animate.scroll-animate-visible.scroll-slide-in .podcast-block-player,
.scroll-animate.scroll-animate-visible.scroll-slide-in .contact-us-block-actions,
.scroll-animate.scroll-animate-visible.scroll-slide-in .blog-list-viewport,
.scroll-animate.scroll-animate-visible.scroll-slide-in .blog-list-toolbar,
.scroll-animate.scroll-animate-visible.scroll-slide-in .columns-layout-row,
.scroll-animate.scroll-animate-visible.scroll-slide-in .ec,
.scroll-animate.scroll-animate-visible.scroll-slide-in .promo-viewport,
.scroll-animate.scroll-animate-visible.scroll-slide-in .cta-band-inner,
.scroll-animate.scroll-animate-visible.scroll-slide-in .callout-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .topic-strip,
.scroll-animate.scroll-animate-visible.scroll-slide-in .hex-cluster,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-embed-block,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-embed-frame-wrap,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-showcase,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-magazine-block,
.scroll-animate.scroll-animate-visible.scroll-slide-in .pdf-magazine-wrap,
.scroll-animate.scroll-animate-visible.scroll-slide-in .table-block-grid,
.scroll-animate.scroll-animate-visible.scroll-slide-in .image-block-frame,
.scroll-animate.scroll-animate-visible.scroll-slide-in .author-byline,
.scroll-animate.scroll-animate-visible.scroll-slide-in .blog-header,
.scroll-animate.scroll-animate-visible.scroll-slide-in .section-jump-nav,
.scroll-animate.scroll-animate-visible.scroll-slide-in .upcoming-event-list,
.scroll-animate.scroll-animate-visible.scroll-slide-in .store-locator,
.scroll-animate.scroll-animate-visible.scroll-slide-in .store-locator-block {
    opacity: 1;
    visibility: visible;
}

.scroll-hex-title.scroll-hex-title-done.scroll-title-slide h1,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide h2,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide h3,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .cms-entrance-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .section-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .site-hero-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .cta-band-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .feature-split-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .book-3d-block-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .content-panel-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .pdf-embed-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .pdf-showcase-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .columns-layout-title,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .pdf-magazine-grid-caption,
.scroll-hex-title.scroll-hex-title-done.scroll-title-slide .eyebrow {
    opacity: 1;
}

/* Title hex reveal: hide title until the hex canvas reveals it */
.scroll-hex-title h1,
.scroll-hex-title h2,
.scroll-hex-title h3,
.scroll-hex-title .cms-entrance-title,
.scroll-hex-title .section-title,
.scroll-hex-title .site-hero-title,
.scroll-hex-title .cta-band-title,
.scroll-hex-title .feature-split-title,
.scroll-hex-title .book-3d-block-title,
.scroll-hex-title .content-panel-title,
.scroll-hex-title .pdf-embed-title,
.scroll-hex-title .pdf-showcase-title,
.scroll-hex-title .columns-layout-title,
.scroll-hex-title .pdf-magazine-grid-caption,
.scroll-hex-title .eyebrow {
    opacity: 0;
}

.scroll-hex-title.scroll-hex-title-done h1,
.scroll-hex-title.scroll-hex-title-done h2,
.scroll-hex-title.scroll-hex-title-done h3,
.scroll-hex-title.scroll-hex-title-done .cms-entrance-title,
.scroll-hex-title.scroll-hex-title-done .section-title,
.scroll-hex-title.scroll-hex-title-done .site-hero-title,
.scroll-hex-title.scroll-hex-title-done .cta-band-title,
.scroll-hex-title.scroll-hex-title-done .feature-split-title,
.scroll-hex-title.scroll-hex-title-done .book-3d-block-title,
.scroll-hex-title.scroll-hex-title-done .content-panel-title,
.scroll-hex-title.scroll-hex-title-done .pdf-embed-title,
.scroll-hex-title.scroll-hex-title-done .pdf-showcase-title,
.scroll-hex-title.scroll-hex-title-done .columns-layout-title,
.scroll-hex-title.scroll-hex-title-done .pdf-magazine-grid-caption,
.scroll-hex-title.scroll-hex-title-done .eyebrow {
    opacity: 1;
}

.scroll-hex-canvas {
    border-radius: inherit;
}

/* ── Title slide-in on scroll ───────────────────────────────────────────────────
   Headings and eyebrow slide up. Controlled independently from content slide-in. */
.scroll-title-slide h1,
.scroll-title-slide h2,
.scroll-title-slide h3,
.scroll-title-slide .cms-entrance-title,
.scroll-title-slide .section-title,
.scroll-title-slide .site-hero-title,
.scroll-title-slide .cta-band-title,
.scroll-title-slide .feature-split-title,
.scroll-title-slide .book-3d-block-title,
.scroll-title-slide .content-panel-title,
.scroll-title-slide .pdf-embed-title,
.scroll-title-slide .pdf-showcase-title,
.scroll-title-slide .columns-layout-title,
.scroll-title-slide .pdf-magazine-grid-caption,
.scroll-title-slide .eyebrow {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-title-slide.scroll-slide-visible h1,
.scroll-title-slide.scroll-slide-visible h2,
.scroll-title-slide.scroll-slide-visible h3,
.scroll-title-slide.scroll-slide-visible .cms-entrance-title,
.scroll-title-slide.scroll-slide-visible .section-title,
.scroll-title-slide.scroll-slide-visible .site-hero-title,
.scroll-title-slide.scroll-slide-visible .cta-band-title,
.scroll-title-slide.scroll-slide-visible .feature-split-title,
.scroll-title-slide.scroll-slide-visible .book-3d-block-title,
.scroll-title-slide.scroll-slide-visible .content-panel-title,
.scroll-title-slide.scroll-slide-visible .pdf-embed-title,
.scroll-title-slide.scroll-slide-visible .pdf-showcase-title,
.scroll-title-slide.scroll-slide-visible .columns-layout-title,
.scroll-title-slide.scroll-slide-visible .pdf-magazine-grid-caption,
.scroll-title-slide.scroll-slide-visible .eyebrow {
    opacity: 1;
    transform: translateY(0);
}

.scroll-title-slide.scroll-slide-visible .eyebrow {
    transition-delay: 0ms;
}

.scroll-title-slide.scroll-slide-visible h1,
.scroll-title-slide.scroll-slide-visible h2,
.scroll-title-slide.scroll-slide-visible h3,
.scroll-title-slide.scroll-slide-visible .cms-entrance-title,
.scroll-title-slide.scroll-slide-visible .section-title,
.scroll-title-slide.scroll-slide-visible .site-hero-title,
.scroll-title-slide.scroll-slide-visible .cta-band-title,
.scroll-title-slide.scroll-slide-visible .feature-split-title,
.scroll-title-slide.scroll-slide-visible .book-3d-block-title,
.scroll-title-slide.scroll-slide-visible .content-panel-title,
.scroll-title-slide.scroll-slide-visible .pdf-embed-title,
.scroll-title-slide.scroll-slide-visible .pdf-showcase-title,
.scroll-title-slide.scroll-slide-visible .columns-layout-title,
.scroll-title-slide.scroll-slide-visible .pdf-magazine-grid-caption {
    transition-delay: 80ms;
}

/* ── Content slide-in on scroll ────────────────────────────────────────────────
   Body text, images, buttons, and other non-heading content slides up.
   Enable both title + content for everything to animate in with stagger. */
.scroll-slide-in .section-block > div.cms-content,
.scroll-slide-in .site-hero-body,
.scroll-slide-in .site-hero-actions,
.scroll-slide-in .site-hero-copy,
.scroll-slide-in .site-hero-media,
.scroll-slide-in .cta-band-actions,
.scroll-slide-in .feature-split-grid,
.scroll-slide-in .feature-split-copy,
.scroll-slide-in .feature-split-media,
.scroll-slide-in .section-container-intro,
.scroll-slide-in .section-container-stack,
.scroll-slide-in .card-grid-block,
.scroll-slide-in .flip-card-grid,
.scroll-slide-in .button-group-row,
.scroll-slide-in .button-group-shell,
.scroll-slide-in .image-block,
.scroll-slide-in .video-block-player,
.scroll-slide-in .accordion-stack,
.scroll-slide-in .team-grid,
.scroll-slide-in .quote-band-inner,
.scroll-slide-in .content-panel-body,
.scroll-slide-in .carousel-shell,
.scroll-slide-in .feature-banner,
.scroll-slide-in .book-3d-showcase,
.scroll-slide-in .form-block-shell,
.scroll-slide-in .pdf-magazine-grid,
.scroll-slide-in .table-block-scroll,
.scroll-slide-in .podcast-block-player,
.scroll-slide-in .contact-us-block-actions,
.scroll-slide-in .blog-list-viewport,
.scroll-slide-in .blog-list-toolbar,
.scroll-slide-in .columns-layout-row,
.scroll-slide-in .ec,
.scroll-slide-in .promo-viewport,
.scroll-slide-in .cta-band-inner,
.scroll-slide-in .callout-grid,
.scroll-slide-in .topic-strip,
.scroll-slide-in .hex-cluster,
.scroll-slide-in .pdf-embed-block,
.scroll-slide-in .pdf-embed-frame-wrap,
.scroll-slide-in .pdf-showcase,
.scroll-slide-in .pdf-magazine-block,
.scroll-slide-in .pdf-magazine-wrap,
.scroll-slide-in .table-block-grid,
.scroll-slide-in .image-block-frame,
.scroll-slide-in .author-byline,
.scroll-slide-in .blog-header,
.scroll-slide-in .section-jump-nav,
.scroll-slide-in .upcoming-event-list {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.scroll-slide-in.scroll-slide-visible .section-block > div.cms-content,
.scroll-slide-in.scroll-slide-visible .site-hero-body,
.scroll-slide-in.scroll-slide-visible .site-hero-actions,
.scroll-slide-in.scroll-slide-visible .site-hero-copy,
.scroll-slide-in.scroll-slide-visible .site-hero-media,
.scroll-slide-in.scroll-slide-visible .cta-band-actions,
.scroll-slide-in.scroll-slide-visible .feature-split-grid,
.scroll-slide-in.scroll-slide-visible .feature-split-copy,
.scroll-slide-in.scroll-slide-visible .feature-split-media,
.scroll-slide-in.scroll-slide-visible .section-container-intro,
.scroll-slide-in.scroll-slide-visible .section-container-stack,
.scroll-slide-in.scroll-slide-visible .card-grid-block,
.scroll-slide-in.scroll-slide-visible .flip-card-grid,
.scroll-slide-in.scroll-slide-visible .button-group-row,
.scroll-slide-in.scroll-slide-visible .button-group-shell,
.scroll-slide-in.scroll-slide-visible .image-block,
.scroll-slide-in.scroll-slide-visible .video-block-player,
.scroll-slide-in.scroll-slide-visible .accordion-stack,
.scroll-slide-in.scroll-slide-visible .team-grid,
.scroll-slide-in.scroll-slide-visible .quote-band-inner,
.scroll-slide-in.scroll-slide-visible .content-panel-body,
.scroll-slide-in.scroll-slide-visible .carousel-shell,
.scroll-slide-in.scroll-slide-visible .feature-banner,
.scroll-slide-in.scroll-slide-visible .book-3d-showcase,
.scroll-slide-in.scroll-slide-visible .form-block-shell,
.scroll-slide-in.scroll-slide-visible .pdf-magazine-grid,
.scroll-slide-in.scroll-slide-visible .table-block-scroll,
.scroll-slide-in.scroll-slide-visible .podcast-block-player,
.scroll-slide-in.scroll-slide-visible .contact-us-block-actions,
.scroll-slide-in.scroll-slide-visible .blog-list-viewport,
.scroll-slide-in.scroll-slide-visible .blog-list-toolbar,
.scroll-slide-in.scroll-slide-visible .columns-layout-row,
.scroll-slide-in.scroll-slide-visible .ec,
.scroll-slide-in.scroll-slide-visible .promo-viewport,
.scroll-slide-in.scroll-slide-visible .cta-band-inner,
.scroll-slide-in.scroll-slide-visible .callout-grid,
.scroll-slide-in.scroll-slide-visible .topic-strip,
.scroll-slide-in.scroll-slide-visible .hex-cluster,
.scroll-slide-in.scroll-slide-visible .pdf-embed-block,
.scroll-slide-in.scroll-slide-visible .pdf-embed-frame-wrap,
.scroll-slide-in.scroll-slide-visible .pdf-showcase,
.scroll-slide-in.scroll-slide-visible .pdf-magazine-block,
.scroll-slide-in.scroll-slide-visible .pdf-magazine-wrap,
.scroll-slide-in.scroll-slide-visible .table-block-grid,
.scroll-slide-in.scroll-slide-visible .image-block-frame,
.scroll-slide-in.scroll-slide-visible .author-byline,
.scroll-slide-in.scroll-slide-visible .blog-header,
.scroll-slide-in.scroll-slide-visible .section-jump-nav,
.scroll-slide-in.scroll-slide-visible .upcoming-event-list {
    opacity: 1;
    transform: translateY(0);
}

/* When both title + content are enabled, stagger content after the title */
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .section-block > div.cms-content,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .site-hero-body,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .site-hero-actions,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .site-hero-copy,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .site-hero-media,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .cta-band-actions,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .feature-split-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .feature-split-copy,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .feature-split-media,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .section-container-intro,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .section-container-stack,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .card-grid-block,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .flip-card-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .button-group-row,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .button-group-shell,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .image-block,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .video-block-player,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .accordion-stack,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .team-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .quote-band-inner,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .content-panel-body,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .carousel-shell,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .feature-banner,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .book-3d-showcase,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .form-block-shell,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-magazine-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .table-block-scroll,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .podcast-block-player,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .contact-us-block-actions,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .blog-list-viewport,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .blog-list-toolbar,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .columns-layout-row,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .ec,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .promo-viewport,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .cta-band-inner,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .callout-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .topic-strip,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .hex-cluster,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-embed-block,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-embed-frame-wrap,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-showcase,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-magazine-block,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .pdf-magazine-wrap,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .table-block-grid,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .image-block-frame,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .author-byline,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .blog-header,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .section-jump-nav,
.scroll-title-slide.scroll-slide-in.scroll-slide-visible .upcoming-event-list {
    transition-delay: 180ms;
}

@media (prefers-reduced-motion: reduce) {
    .scroll-animate::before,
    .scroll-hex-title::before,
    .scroll-slide-in::before,
    .scroll-title-slide::before {
        opacity: 1;
        transition: none;
    }
    .scroll-animate .section-block > div.cms-content,
    .scroll-animate .section-container-intro,
    .scroll-animate .section-container-stack,
    .scroll-animate .site-hero-copy,
    .scroll-animate .site-hero-media,
    .scroll-animate .site-hero-body,
    .scroll-animate .site-hero-actions,
    .scroll-animate .cta-band-actions,
    .scroll-animate .feature-split-grid,
    .scroll-animate .feature-split-copy,
    .scroll-animate .feature-split-media,
    .scroll-animate .card-grid-block,
    .scroll-animate .flip-card-grid,
    .scroll-animate .button-group-row,
    .scroll-animate .button-group-shell,
    .scroll-animate .image-block,
    .scroll-animate .video-block-player,
    .scroll-animate .accordion-stack,
    .scroll-animate .team-grid,
    .scroll-animate .quote-band-inner,
    .scroll-animate .content-panel-body,
    .scroll-animate .carousel-shell,
    .scroll-animate .feature-banner,
    .scroll-animate .book-3d-showcase,
    .scroll-animate .form-block-shell,
    .scroll-animate .pdf-magazine-grid,
    .scroll-animate .table-block-scroll,
    .scroll-animate .podcast-block-player,
    .scroll-animate .contact-us-block-actions,
    .scroll-animate .blog-list-viewport,
    .scroll-animate .blog-list-toolbar,
    .scroll-animate .columns-layout-row,
    .scroll-animate .ec,
    .scroll-animate .promo-viewport,
.scroll-animate .cta-band-inner,
.scroll-animate .callout-grid,
.scroll-animate .topic-strip,
.scroll-animate .hex-cluster,
.scroll-animate .pdf-embed-block,
.scroll-animate .pdf-embed-frame-wrap,
.scroll-animate .pdf-showcase,
.scroll-animate .pdf-magazine-block,
.scroll-animate .pdf-magazine-wrap,
.scroll-animate .table-block-grid,
.scroll-animate .image-block-frame,
.scroll-animate .author-byline,
.scroll-animate .blog-header,
.scroll-animate .section-jump-nav,
.scroll-animate .upcoming-event-list {
        opacity: 1;
    }
    .scroll-hex-title h1,
    .scroll-hex-title h2,
    .scroll-hex-title h3,
    .scroll-hex-title .section-title,
    .scroll-hex-title .site-hero-title,
    .scroll-hex-title .eyebrow {
        opacity: 1;
    }
    .scroll-title-slide h1,
    .scroll-title-slide h2,
    .scroll-title-slide h3,
    .scroll-title-slide .section-title,
    .scroll-title-slide .site-hero-title,
    .scroll-title-slide .eyebrow {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .scroll-slide-in .section-block > div.cms-content,
    .scroll-slide-in .site-hero-body,
    .scroll-slide-in .site-hero-actions,
    .scroll-slide-in .site-hero-copy,
    .scroll-slide-in .site-hero-media,
    .scroll-slide-in .cta-band-actions,
    .scroll-slide-in .feature-split-grid,
    .scroll-slide-in .feature-split-copy,
    .scroll-slide-in .feature-split-media,
    .scroll-slide-in .section-container-intro,
    .scroll-slide-in .section-container-stack,
    .scroll-slide-in .card-grid-block,
    .scroll-slide-in .flip-card-grid,
    .scroll-slide-in .button-group-row,
    .scroll-slide-in .button-group-shell,
    .scroll-slide-in .image-block,
    .scroll-slide-in .video-block-player,
    .scroll-slide-in .accordion-stack,
    .scroll-slide-in .team-grid,
    .scroll-slide-in .quote-band-inner,
    .scroll-slide-in .content-panel-body,
    .scroll-slide-in .carousel-shell,
    .scroll-slide-in .feature-banner,
    .scroll-slide-in .book-3d-showcase,
    .scroll-slide-in .form-block-shell,
    .scroll-slide-in .pdf-magazine-grid,
    .scroll-slide-in .table-block-scroll,
    .scroll-slide-in .podcast-block-player,
    .scroll-slide-in .contact-us-block-actions,
    .scroll-slide-in .blog-list-viewport,
    .scroll-slide-in .blog-list-toolbar,
    .scroll-slide-in .columns-layout-row,
    .scroll-slide-in .ec,
    .scroll-slide-in .promo-viewport,
.scroll-slide-in .cta-band-inner,
.scroll-slide-in .callout-grid,
.scroll-slide-in .topic-strip,
.scroll-slide-in .hex-cluster,
.scroll-slide-in .pdf-embed-block,
.scroll-slide-in .pdf-embed-frame-wrap,
.scroll-slide-in .pdf-showcase,
.scroll-slide-in .pdf-magazine-block,
.scroll-slide-in .pdf-magazine-wrap,
.scroll-slide-in .table-block-grid,
.scroll-slide-in .image-block-frame,
.scroll-slide-in .author-byline,
.scroll-slide-in .blog-header,
.scroll-slide-in .section-jump-nav,
.scroll-slide-in .upcoming-event-list {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ---- Audit console (/admin/audit-log) ---- */
.audit-console {
    --audit-row-h: 3.35rem;
    --audit-header-h: 2.5rem;
    --audit-grid-h: min(68vh, 42rem);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    color: var(--text-primary);
}

/* Searchable admin grids (audit / forms / submissions): inputs follow light/dark tokens. */
.audit-console .form-control,
.audit-console .form-select,
.forms-console .form-control,
.forms-console .form-select,
.submissions-console .form-control,
.submissions-console .form-select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.audit-console .form-control::placeholder,
.forms-console .form-control::placeholder,
.submissions-console .form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.audit-console .form-control:focus,
.audit-console .form-select:focus,
.forms-console .form-control:focus,
.forms-console .form-select:focus,
.submissions-console .form-control:focus,
.submissions-console .form-select:focus {
    background-color: var(--input-bg);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, var(--input-border));
    color: var(--input-text);
    box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent-gold) 22%, transparent);
}

.audit-console .form-select option,
.forms-console .form-select option,
.submissions-console .form-select option {
    background-color: var(--surface-bg);
    color: var(--text-primary);
}

.audit-console-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
}

.audit-console-head .section-title {
    margin-bottom: 0.15rem;
}

.audit-console-lead {
    margin: 0;
    max-width: 40rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.audit-console-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.audit-console-panel {
    border: 1px solid var(--surface-border, var(--border-color));
    border-radius: 0.65rem;
    background: var(--surface, var(--surface-bg));
    color: var(--text-primary);
    box-shadow: 0 1px 2px color-mix(in srgb, #000 4%, transparent);
    overflow: hidden;
}

.audit-console-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
    background: color-mix(in srgb, var(--surface, #fff) 92%, var(--accent-gold, #f5b335) 8%);
}

.audit-console-toolbar-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 0.75rem;
    align-items: flex-end;
}

.audit-console-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.audit-console-field label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0;
}

.audit-console-field .form-control,
.audit-console-field .form-select,
.audit-console-field .debounced-search {
    min-width: 9.5rem;
}

.audit-console-field-search {
    flex: 1 1 14rem;
}

.audit-console-field-search .form-control,
.audit-console-field-search .debounced-search {
    min-width: 14rem;
}

.audit-console-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.45rem 1rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
    background: color-mix(in srgb, var(--surface, #fff) 96%, #000 4%);
    font-size: 0.8rem;
    color: var(--text-muted);
}

.audit-console-meta strong {
    color: var(--heading-color);
    font-weight: 700;
}

.audit-console-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: var(--audit-grid-h);
}

.audit-console-body.has-detail {
    grid-template-columns: minmax(0, 1fr) minmax(18rem, 26rem);
}

.audit-grid-shell {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-right: 1px solid transparent;
}

.audit-console-body.has-detail .audit-grid-shell {
    border-right-color: var(--surface-border, #e4e4e7);
}

.audit-grid-header,
.audit-grid-row {
    display: grid;
    grid-template-columns: 6.5rem 9.5rem 7.25rem 7.5rem minmax(8rem, 1fr) minmax(12rem, 1.6fr);
    gap: 0.65rem;
    align-items: center;
    padding: 0 1rem;
}

.audit-grid-header {
    height: var(--audit-header-h);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
    background: color-mix(in srgb, var(--surface, #fff) 94%, #000 6%);
    position: sticky;
    top: 0;
    z-index: 2;
}

.audit-grid-viewport {
    height: calc(var(--audit-grid-h) - var(--audit-header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.audit-grid-row {
    height: var(--audit-row-h);
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border, #e4e4e7) 70%, transparent);
    cursor: pointer;
    background: transparent;
    width: 100%;
    text-align: left;
    border-left: 3px solid transparent;
    border-right: none;
    border-top: none;
    font: inherit;
    color: inherit;
}

.audit-grid-row:hover {
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 8%, transparent);
}

.audit-grid-row.is-selected {
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 14%, transparent);
    border-left-color: var(--accent-gold, #f5b335);
}

.audit-grid-row.is-suspicious {
    border-left-color: #d97706;
}

.audit-grid-row.is-suspicious.is-selected {
    border-left-color: #b45309;
}

.audit-grid-cell {
    min-width: 0;
    overflow: hidden;
}

.audit-grid-cell-muted {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.audit-grid-when {
    font-variant-numeric: tabular-nums;
    font-size: 0.8rem;
    white-space: nowrap;
}

.audit-grid-when-sub {
    display: block;
    font-size: 0.68rem;
    color: var(--text-muted);
}

.audit-grid-who {
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-grid-entity,
.audit-grid-summary {
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-grid-type {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-badge {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 0.15rem 0.45rem;
    border-radius: 0.3rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.audit-badge-default {
    background: color-mix(in srgb, var(--text-muted) 16%, transparent);
    color: var(--heading-color);
}

.audit-badge-security {
    background: color-mix(in srgb, #0284c7 18%, transparent);
    color: #0369a1;
}

.audit-badge-suspicious {
    background: color-mix(in srgb, #d97706 22%, transparent);
    color: #92400e;
}

.audit-badge-success {
    background: color-mix(in srgb, #16a34a 18%, transparent);
    color: #166534;
}

html[data-theme="dark"] .audit-badge-security {
    background: color-mix(in srgb, #38bdf8 22%, transparent);
    color: #7dd3fc;
}

html[data-theme="dark"] .audit-badge-suspicious {
    background: color-mix(in srgb, #fbbf24 22%, transparent);
    color: #fcd34d;
}

html[data-theme="dark"] .audit-badge-success {
    background: color-mix(in srgb, #4ade80 20%, transparent);
    color: #86efac;
}

.audit-grid-empty,
.audit-grid-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--text-muted);
    font-size: 0.9rem;
    padding: 2rem;
    text-align: center;
}

.audit-detail {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: color-mix(in srgb, var(--surface, #fff) 97%, #000 3%);
}

.audit-detail-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--surface-border, #e4e4e7);
}

.audit-detail-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.3;
}

.audit-detail-sub {
    margin: 0.2rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.audit-detail-body {
    padding: 0.85rem 1rem 1.25rem;
    overflow: auto;
    max-height: calc(var(--audit-grid-h) - 3.5rem);
}

.audit-detail-kv {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: 0.35rem 0.65rem;
    margin: 0 0 1rem;
    font-size: 0.8rem;
}

.audit-detail-kv dt {
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
}

.audit-detail-kv dd {
    margin: 0;
    min-width: 0;
    word-break: break-word;
}

.audit-diff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
    margin-bottom: 0.75rem;
}

.audit-diff-table th,
.audit-diff-table td {
    border: 1px solid var(--surface-border, #e4e4e7);
    padding: 0.4rem 0.5rem;
    vertical-align: top;
}

.audit-diff-table th {
    background: color-mix(in srgb, var(--surface, #fff) 92%, #000 8%);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
}

.audit-diff-table pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 8rem;
    overflow: auto;
    margin: 0;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.audit-details-json {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 14rem;
    overflow: auto;
    margin: 0.35rem 0 0;
    padding: 0.55rem 0.65rem;
    border-radius: 0.4rem;
    background: color-mix(in srgb, #000 4%, var(--surface, #fff));
    font-size: 0.72rem;
}

.audit-filter-chip.is-danger.is-active,
.admin-filter-chip.is-danger.is-active {
    background: #d97706;
    border-color: #d97706;
    color: #fff;
}

@media (max-width: 960px) {
    .audit-console-body.has-detail {
        grid-template-columns: 1fr;
    }

    .audit-console-body.has-detail .audit-grid-shell {
        border-right: none;
        border-bottom: 1px solid var(--surface-border, #e4e4e7);
    }

    .audit-grid-header,
    .audit-grid-row {
        grid-template-columns: 5.5rem 7rem 6rem minmax(0, 1fr);
    }

    .audit-grid-header > :nth-child(4),
    .audit-grid-header > :nth-child(5),
    .audit-grid-row > :nth-child(4),
    .audit-grid-row > :nth-child(5) {
        display: none;
    }

    .audit-detail-body {
        max-height: none;
    }
}

/* —— Submissions queue (audit-console layout variant) —— */
.submissions-console .submissions-grid-header,
.submissions-console .submissions-grid-row {
    grid-template-columns: 1.75rem 6.5rem minmax(8rem, 1.1fr) minmax(7rem, 1fr) 6.5rem 5.25rem 6.25rem 5.5rem;
    gap: 0.55rem;
}

.submissions-console .submissions-grid-row {
    height: auto;
    min-height: var(--audit-row-h);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    align-items: start;
    cursor: pointer;
}

.submissions-console .submissions-grid-row.is-unreviewed {
    border-left-color: color-mix(in srgb, var(--accent-gold, #f5b335) 70%, transparent);
}

.submissions-console .submissions-grid-row.is-checked {
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 8%, var(--surface, #fff));
}

.submissions-check-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0.15rem;
}

.submissions-bulk-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.65rem;
    margin: 0;
    padding: 0.55rem 0.85rem;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-border, #e4e4e7) 90%, transparent);
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 10%, var(--surface, #fff));
}

.submissions-bulk-count {
    font-size: 0.82rem;
    font-weight: 650;
    margin-right: 0.25rem;
}

.submissions-console .submissions-email-sub {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.submissions-detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 0.85rem;
}

.submissions-detail-section {
    margin: 1rem 0 0.45rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.submissions-response-list {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.submissions-response-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7.5rem) minmax(0, 1fr);
    gap: 0.35rem 0.65rem;
    padding: 0.45rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--surface-border, #e4e4e7) 85%, transparent);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--surface, #fff) 96%, #000 4%);
}

.submissions-response-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-muted);
    padding-top: 0.1rem;
}

.submissions-response-value {
    min-width: 0;
}

.submissions-response-text {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
    font: inherit;
    font-size: 0.84rem;
    line-height: 1.4;
}

.submissions-file-link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.35rem 0.5rem;
    border-radius: 0.35rem;
    border: 1px solid color-mix(in srgb, var(--accent-gold, #f5b335) 40%, var(--surface-border, #e4e4e7));
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 10%, transparent);
    text-decoration: none;
    color: inherit;
}

.submissions-file-link:hover {
    border-color: var(--accent-gold, #f5b335);
    background: color-mix(in srgb, var(--accent-gold, #f5b335) 18%, transparent);
}

.submissions-file-name {
    font-size: 0.84rem;
    font-weight: 650;
    word-break: break-word;
}

.submissions-file-meta {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.submissions-delivery-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.submissions-delivery-item {
    padding: 0.45rem 0.55rem;
    border-radius: 0.4rem;
    border: 1px solid var(--surface-border, #e4e4e7);
    background: var(--surface, #fff);
}

.submissions-delivery-item.is-fail {
    border-color: color-mix(in srgb, #d97706 45%, var(--surface-border, #e4e4e7));
}

.submissions-delivery-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.55rem;
    font-size: 0.8rem;
}

.submissions-delivery-dest {
    margin-top: 0.2rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-word;
}

.submissions-delivery-error {
    margin: 0.35rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.72rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: #92400e;
}

html[data-theme="dark"] .submissions-delivery-error {
    color: #fcd34d;
}

@media (max-width: 1100px) {
    .submissions-console .submissions-grid-header,
    .submissions-console .submissions-grid-row {
        grid-template-columns: 1.75rem 6rem minmax(7rem, 1.2fr) minmax(6rem, 1fr) 5.5rem 5.25rem;
    }

    /* Hide Page (5) and Delivery (7); keep checkbox + When/From/Form/Files/Status */
    .submissions-console .submissions-grid-header > :nth-child(5),
    .submissions-console .submissions-grid-header > :nth-child(7),
    .submissions-console .submissions-grid-row > :nth-child(5),
    .submissions-console .submissions-grid-row > :nth-child(7) {
        display: none;
    }
}

@media (max-width: 960px) {
    .submissions-console .submissions-grid-header,
    .submissions-console .submissions-grid-row {
        grid-template-columns: 1.75rem 5.5rem minmax(0, 1.3fr) 5rem 5rem;
    }

    .submissions-console .submissions-grid-header > :nth-child(n),
    .submissions-console .submissions-grid-row > :nth-child(n) {
        display: block;
    }

    /* Hide Form (4), Page (5), Delivery (7) */
    .submissions-console .submissions-grid-header > :nth-child(4),
    .submissions-console .submissions-grid-header > :nth-child(5),
    .submissions-console .submissions-grid-header > :nth-child(7),
    .submissions-console .submissions-grid-row > :nth-child(4),
    .submissions-console .submissions-grid-row > :nth-child(5),
    .submissions-console .submissions-grid-row > :nth-child(7) {
        display: none;
    }

    .submissions-response-row {
        grid-template-columns: 1fr;
    }
}

/* —— Forms list (audit-console layout variant) —— */
.forms-console .forms-grid-header,
.forms-console .forms-grid-row {
    grid-template-columns: minmax(8rem, 1.3fr) minmax(6rem, 0.9fr) 4.5rem minmax(7rem, 1.1fr) 5.5rem 5.75rem;
    gap: 0.55rem;
}

.forms-console .forms-grid-row {
    height: auto;
    min-height: var(--audit-row-h);
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
    align-items: center;
}

.forms-console .forms-grid-row.is-draft {
    border-left-color: color-mix(in srgb, var(--text-muted) 55%, transparent);
}

.forms-usage-list {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.84rem;
}

.forms-usage-list li + li {
    margin-top: 0.25rem;
}

.forms-detail-intro {
    font-size: 0.84rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

@media (max-width: 1100px) {
    .forms-console .forms-grid-header,
    .forms-console .forms-grid-row {
        grid-template-columns: minmax(7rem, 1.3fr) minmax(5rem, 0.9fr) 4.25rem 5.5rem 5.5rem;
    }

    .forms-console .forms-grid-header > :nth-child(4),
    .forms-console .forms-grid-row > :nth-child(4) {
        display: none;
    }
}

@media (max-width: 960px) {
    .forms-console .forms-grid-header,
    .forms-console .forms-grid-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 5.25rem;
    }

    .forms-console .forms-grid-header > :nth-child(n),
    .forms-console .forms-grid-row > :nth-child(n) {
        display: block;
    }

    .forms-console .forms-grid-header > :nth-child(2),
    .forms-console .forms-grid-header > :nth-child(3),
    .forms-console .forms-grid-header > :nth-child(4),
    .forms-console .forms-grid-row > :nth-child(2),
    .forms-console .forms-grid-row > :nth-child(3),
    .forms-console .forms-grid-row > :nth-child(4) {
        display: none;
    }
}

/* ---- Member auth (nav, shell, profile drawer) — uses site theme tokens ---- */
.member-auth-nav {
    display: flex;
    align-items: center;
    position: relative;
}

.member-auth-guest {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.member-auth-signin,
.member-auth-register {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.38rem 0.9rem;
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.84rem;
    font-weight: 600;
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, filter 0.14s ease;
}

.member-auth-signin {
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    background: transparent;
}

.member-auth-signin:hover {
    border-color: var(--accent-gold);
    color: var(--accent-gold);
}

.member-auth-register {
    border: 1px solid var(--btn-primary-border, var(--accent-gold));
    background: var(--btn-primary-bg, var(--accent-gold));
    color: var(--btn-primary-text, var(--accent-on-primary));
}

.member-auth-register:hover {
    background: var(--btn-primary-hover-bg, var(--accent-gold));
    color: var(--btn-primary-text, var(--accent-on-primary));
    filter: brightness(1.03);
}

.member-auth-user-wrap {
    position: relative;
}

.member-auth-user {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.15rem;
    padding: 0.18rem 0.55rem 0.18rem 0.22rem;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--surface-bg, var(--page-bg-elevated)) 70%, transparent);
    color: var(--text-primary);
    cursor: pointer;
    font-family: var(--font-body);
}

.member-auth-user:hover,
.member-auth-user.is-open {
    border-color: var(--accent-gold);
    box-shadow: var(--focus-ring);
}

.member-auth-avatar {
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--surface-bg);
}

.member-auth-avatar--placeholder,
.member-profile-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-gold) 24%, var(--surface-bg));
    color: var(--heading-color, var(--text-primary));
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.member-auth-name {
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
}

.member-auth-chevron {
    width: 0.4rem;
    height: 0.4rem;
    margin-right: 0.15rem;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg) translateY(-1px);
    opacity: 0.85;
}

.member-auth-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    border: 0;
    background: transparent;
    cursor: default;
}

.member-auth-menu {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 0;
    z-index: 1100;
    min-width: 13.5rem;
    padding: 0.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--page-bg-elevated, var(--surface-bg));
    box-shadow: var(--shadow-md);
}

.member-auth-menu-header {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.55rem 0.7rem 0.65rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid var(--border-color);
}

.member-auth-menu-label {
    font-size: var(--text-size-eyebrow);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.member-auth-menu-identity {
    font-size: 0.92rem;
    color: var(--heading-color, var(--text-primary));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-auth-menu-item,
.member-auth-logout-form .member-auth-menu-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.88rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.member-auth-menu-item:hover {
    background: var(--surface-bg-hover, color-mix(in srgb, var(--text-primary) 8%, transparent));
}

.member-auth-menu-item--danger {
    color: var(--accent-rust);
}

.member-auth-logout-form {
    margin: 0;
}

.member-auth-shell {
    min-height: calc(100dvh - var(--nav-height, 4.25rem));
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem 3rem;
}

.layout-root--empty .content--auth {
    max-width: none;
    margin: 0;
    padding: 0;
}

.layout-root--empty .member-auth-shell {
    min-height: 100dvh;
}

.member-auth-card {
    width: min(26rem, 100%);
    padding: 1.75rem 1.6rem 1.5rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--page-bg-elevated, var(--surface-bg));
    box-shadow: var(--shadow-md);
}

.member-auth-eyebrow {
    margin: 0 0 0.35rem;
    font-size: var(--text-size-eyebrow);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--accent-gold);
    font-weight: 700;
}

.member-auth-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3vw, 2.1rem);
    letter-spacing: 0.02em;
    color: var(--heading-color, var(--text-primary));
    line-height: 1.1;
}

.member-auth-lead {
    margin: 0 0 1.25rem;
    color: var(--text-muted);
    font-size: 0.95rem;
}

.member-auth-consent {
    padding: 0.85rem 1rem;
    border: 1px solid color-mix(in srgb, var(--border-color, currentColor) 55%, transparent);
    border-radius: 0.4rem;
    background: color-mix(in srgb, var(--surface-bg, transparent) 88%, transparent);
}

.member-auth-consent .form-check-label {
    font-weight: 600;
}

.member-auth-consent-note {
    line-height: 1.45;
}

.member-auth-consent-note a {
    color: var(--link-color);
}

.member-auth-form .form-control {
    background: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

.member-auth-form .form-control:focus {
    border-color: var(--accent-gold);
    box-shadow: var(--focus-ring);
}

.member-auth-footer {
    margin: 1.1rem 0 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.member-auth-footer a {
    color: var(--link-color);
    text-decoration: none;
    font-weight: 600;
}

.member-auth-footer a:hover {
    color: var(--link-hover-color);
}

.member-profile-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    justify-content: flex-end;
    background: color-mix(in srgb, #0b1220 52%, transparent);
    backdrop-filter: blur(6px);
    animation: member-profile-fade 0.18s ease-out;
}

@keyframes member-profile-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

.member-profile-drawer {
    width: min(28rem, 100vw);
    height: 100%;
    display: flex;
    flex-direction: column;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--header-bg, var(--surface-bg)) 88%, transparent), transparent 8.5rem),
        var(--page-bg-elevated, var(--surface-bg, #fff));
    border-left: 1px solid var(--border-color);
    box-shadow: -18px 0 48px color-mix(in srgb, #000 22%, transparent);
    color: var(--text-primary);
    animation: member-profile-slide 0.22s ease-out;
}

@keyframes member-profile-slide {
    from { transform: translateX(1.25rem); opacity: 0.7; }
    to { transform: translateX(0); opacity: 1; }
}

.member-profile-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.35rem 1.35rem 1.1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
}

.member-profile-head-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    min-width: 0;
}

.member-profile-head-copy {
    min-width: 0;
}

.member-profile-avatar {
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
    border: 2px solid color-mix(in srgb, var(--accent-gold, #c9a227) 50%, var(--border-color));
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-gold, #c9a227) 12%, transparent);
}

.member-profile-avatar--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 18%, var(--surface-bg, #fff));
    color: var(--heading-color, var(--text-primary));
    font-weight: 700;
    letter-spacing: 0.02em;
}

.member-profile-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    font-weight: 650;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.member-profile-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--heading-color, var(--text-primary));
}

.member-profile-handle {
    margin: 0.28rem 0 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-profile-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.55rem;
}

.member-profile-role {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
    background: color-mix(in srgb, var(--surface-bg, #fff) 70%, transparent);
    color: var(--text-muted);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.member-profile-close {
    border: 0;
    background: color-mix(in srgb, var(--surface-bg, #fff) 55%, transparent);
    color: var(--text-muted);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.member-profile-close:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--text-primary) 8%, transparent);
}

.member-profile-body {
    flex: 1 1 auto;
    overflow: auto;
    padding: 1.15rem 1.35rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.member-profile-status {
    border-radius: 0.65rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.member-profile-status.is-ok {
    background: color-mix(in srgb, #1f8a4c 14%, transparent);
    color: color-mix(in srgb, #1f8a4c 80%, var(--text-primary));
    border: 1px solid color-mix(in srgb, #1f8a4c 28%, transparent);
}

.member-profile-status.is-error {
    background: color-mix(in srgb, #b42318 12%, transparent);
    color: color-mix(in srgb, #b42318 85%, var(--text-primary));
    border: 1px solid color-mix(in srgb, #b42318 26%, transparent);
}

.member-profile-section {
    border: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    border-radius: 0.9rem;
    padding: 1rem 1rem 1.1rem;
    background: color-mix(in srgb, var(--surface-bg, #fff) 72%, transparent);
}

.member-profile-section-head {
    margin-bottom: 0.9rem;
}

.member-profile-section-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--heading-color, var(--text-primary));
}

.member-profile-section-copy {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.member-profile-empty {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.member-profile-fields {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.member-profile-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.member-profile-label {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.02em;
}

.member-profile-required {
    color: color-mix(in srgb, #b42318 80%, var(--text-primary));
    margin-left: 0.15rem;
}

.member-profile-input {
    width: 100%;
    border: 1px solid var(--input-border, var(--border-color));
    background: var(--input-bg, var(--surface-bg, #fff));
    color: var(--input-text, var(--text-primary));
    border-radius: 0.55rem;
    padding: 0.65rem 0.75rem;
    font: inherit;
    line-height: 1.3;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.member-profile-input:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 65%, var(--border-color));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-gold, #c9a227) 18%, transparent);
}

.member-profile-input:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.member-profile-input--area {
    resize: vertical;
    min-height: 6rem;
}

.member-profile-color-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.member-profile-input--color {
    width: 3.25rem;
    height: 2.4rem;
    padding: 0.2rem;
    cursor: pointer;
}

.member-profile-color-value {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
}

.member-profile-btn {
    margin-top: 1rem;
    width: 100%;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    padding: 0.72rem 1rem;
    font: inherit;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.member-profile-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.member-profile-btn--primary {
    background: var(--btn-primary-bg, var(--accent-gold, #c9a227));
    color: var(--btn-primary-text, #111);
    border-color: color-mix(in srgb, var(--btn-primary-bg, var(--accent-gold, #c9a227)) 80%, #000);
}

.member-profile-btn--primary:hover:not(:disabled) {
    filter: brightness(1.04);
}

.member-profile-btn--ghost {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-color);
}

.member-profile-btn--ghost:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text-primary) 5%, transparent);
}

@media (max-width: 720px) {
    .member-auth-name {
        display: none;
    }

    .member-auth-register {
        display: none;
    }

    .member-profile-drawer {
        width: 100vw;
    }

    .member-auth-shell {
        padding: 1.25rem 0.85rem 2rem;
    }
}

/* Circuit failure banner — clearer copy + recovering state (see circuit-recovery.js). */
#blazor-error-ui .blazor-error-msg {
    display: inline;
    max-width: min(52rem, calc(100% - 2rem));
    line-height: 1.35;
}

#blazor-error-ui.is-recovering .blazor-error-msg {
    font-weight: 600;
}

#blazor-error-ui .reload {
    white-space: nowrap;
}

/* Public CMS controls: always receive taps (iOS Safari).
   Never leave decorative pointer-events:none on real <a.btn>/<button.btn>. */
a.btn,
button.btn,
.btn[href],
.card-grid-cta,
.hero-actions .btn,
.cta-band .btn,
.feature-split .btn,
.button-group .btn,
.flip-card-face .btn,
.book-3d-actions .btn,
.carousel-slide .btn,
.accordion-item .btn,
.team-card-link {
    pointer-events: auto;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 1;
}