/*
Theme Name: Guidelines
Theme URI: https://guideline-theme.com
Author: Isaac Swimmer
Author URI: https://guideline-theme.com
Description: A flexible, modern, ACF driven theme.
Version: 1.0.3
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 8.0
License: Proprietary
Text Domain: guidelines
*/

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body.no-scroll {
    overflow: hidden;
}

/* =============================================================================
   Skeleton Shimmer
   ============================================================================= */

@keyframes shimmer {
    0%   { background-position: -600px 0; }
    100% { background-position: 600px 0; }
}

/* Base shimmer — light tone (default) */
.skeleton {
    background: linear-gradient( 90deg, #e0e0e0 0px, #f0f0f0 60px, #e0e0e0 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
    border-radius: 4px;
}

/* ── Skeleton background tones ─────────────────────────────────────────────── */
/* Each tone sets the section bg and adjusts the shimmer gradient for contrast */

.skeleton-bg--off-white-light {
    background-color: #fafaf8;
}
.skeleton-bg--off-white-light .skeleton {
    background: linear-gradient( 90deg, #e8e8e4 0px, #f5f5f2 60px, #e8e8e4 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

.skeleton-bg--off-white-dark {
    background-color: #f0efe9;
}
.skeleton-bg--off-white-dark .skeleton {
    background: linear-gradient( 90deg, #deded7 0px, #ebebe4 60px, #deded7 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

.skeleton-bg--neutral-light {
    background-color: #d9d9d9;
}
.skeleton-bg--neutral-light .skeleton {
    background: linear-gradient( 90deg, #c8c8c8 0px, #e0e0e0 60px, #c8c8c8 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

.skeleton-bg--neutral-dark {
    background-color: #b0b0b0;
}
.skeleton-bg--neutral-dark .skeleton {
    background: linear-gradient( 90deg, #9e9e9e 0px, #c0c0c0 60px, #9e9e9e 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

.skeleton-bg--off-black-light {
    background-color: #3a3a3a;
    color: #f0f0f0;
}
.skeleton-bg--off-black-light .skeleton {
    background: linear-gradient( 90deg, #2e2e2e 0px, #4a4a4a 60px, #2e2e2e 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

.skeleton-bg--off-black-dark {
    background-color: #1e1e1e;
    color: #e8e8e8;
}
.skeleton-bg--off-black-dark .skeleton {
    background: linear-gradient( 90deg, #161616 0px, #2c2c2c 60px, #161616 120px );
    background-size: 600px 100%;
    animation: shimmer 1.8s infinite linear;
}

/* ── Shape Dividers ─────────────────────────────────────────────────────────── */
/* Decorative SVG shapes placed at the top or bottom of a section. The SVG is
   filled with the color of the adjacent section so the two sections appear to
   "interlock" visually along a shaped boundary (wave, tilt, triangle, etc.)
   rather than a straight horizontal line.

   The wrapper (.shape-divider) is absolutely positioned at the relevant edge,
   full-width, with its height set inline from the ACF value. The SVG stretches
   to fill the wrapper via preserveAspectRatio="none" + width: 100%.

   Any section hosting a divider needs position: relative (modular blocks set
   this themselves). The `overflow: hidden` on .shape-divider keeps the SVG
   from spilling outside if it's rendered beyond the wrapper.

   Sections that use shape dividers also need pointer-events: none on the
   wrapper so the shape doesn't block clicks on the section's own content. */

.shape-divider {
    position: absolute;
    left: 0;
    width: 100%;
    line-height: 0;
    pointer-events: none;
    overflow: hidden;
    /* z-index: 0 by default keeps it below the block's inner content (which
       is z-index 1+ in most of our blocks). The "Bring to Front" ACF field
       overrides this inline with z-index: 5 on an opt-in basis. */
    z-index: 0;
}

.shape-divider--top {
    /* -1px to avoid a hairline gap between the divider and the section edge */
    top: -1px;
}

.shape-divider--bottom {
    bottom: -1px;
}

/* Single SVG per divider. Multi-"layer" variants (double / triple) are a
   single SVG file containing multiple <path> elements — the layering is baked
   into the SVG by the designer, not stacked at runtime. This keeps the CSS
   simple and gives designers pixel-perfect control over each variant. */
.shape-divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* Any section hosting a shape divider needs a positioning context for
   the absolute-positioned .shape-divider wrappers. */
.has-shape-divider {
    position: relative;
}

/* ── Shape divider animation ────────────────────────────────────────────────
   Opt-in CSS drift on the SVG paths. Applied via the .shape-divider--animated
   class when the Animate ACF toggle is on. Targets individual <path> elements
   so multi-path variants (double / triple) animate with different timing —
   creates a parallax depth effect.

   Edge-clipping fix: the SVG is rendered 60px wider than the wrapper when
   animated, with a -30px left margin so it overhangs 30px on each side. The
   wrapper's overflow:hidden clips that 30px buffer. When paths translate by
   ±22px, the translate happens within the buffered region — wrapper edges
   stay fully filled, no empty gaps. 30 > 22 = no clipping visible.

   Tradeoff: the SVG stretches horizontally by a tiny amount (~3-6% depending
   on wrapper width), which slightly widens each shape's curves / peaks.
   Imperceptible on organic shapes (wave, curve, drip). Designer-crafted
   variant SVGs could optionally extend their paths beyond viewBox as a
   zero-stretch alternative — noted in potential-additions.md.

   All animation halts for users with prefers-reduced-motion enabled. */

/* Widen the animated SVG to create a 30px buffer on each side, so translate
   drifts never expose the wrapper's background. Wrapper's overflow: hidden
   clips the overhang. Applied only when .shape-divider--animated is present —
   static dividers render normally at 100% wrapper width. */
.shape-divider--animated svg {
    width: calc( 100% + 60px );
    max-width: none;
    margin-left: -30px;
}

@keyframes shape-divider-drift {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-22px); }
}

@keyframes shape-divider-drift-reverse {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(22px); }
}

/* Base animation — applies to every path at medium speed by default. */
.shape-divider--animated svg path {
    animation: shape-divider-drift 8s ease-in-out infinite;
    transform-origin: center;
}

/* Double variant — two paths, back drifts opposite direction + slower
   for a subtle parallax depth effect. */
.shape-divider--animated.shape-divider--double svg path:nth-child(1) {
    animation-name: shape-divider-drift-reverse;
    animation-duration: 12s;
}

/* Triple variant — three paths, each with different timing + direction
   so all three layers drift independently. */
.shape-divider--animated.shape-divider--triple svg path:nth-child(1) {
    /* Deepest back — slowest, reverse direction */
    animation-name: shape-divider-drift-reverse;
    animation-duration: 14s;
}
.shape-divider--animated.shape-divider--triple svg path:nth-child(2) {
    /* Mid layer — medium speed, forward direction */
    animation-duration: 9s;
}
.shape-divider--animated.shape-divider--triple svg path:nth-child(3) {
    /* Front layer — fastest, reverse direction */
    animation-name: shape-divider-drift-reverse;
    animation-duration: 6s;
}

/* Speed modifiers — scale all paths' animation-duration to match the
   editor's chosen pace (slow / medium / fast). For single-path dividers
   these apply cleanly; for multi-path variants, the variant-specific
   per-child timings above still apply relative ratios, so "slow" doubles
   all layer durations while preserving their parallax spread. */
.shape-divider--animated.shape-divider--speed-slow svg path    { animation-duration: 12s; }
.shape-divider--animated.shape-divider--speed-medium svg path  { animation-duration: 8s; }
.shape-divider--animated.shape-divider--speed-fast svg path    { animation-duration: 5s; }

/* Speed + variant combinations — explicitly set each layer's duration to
   preserve parallax spread while honoring the editor's chosen pace. Without
   these, the speed modifier would force all paths to the same duration,
   losing the per-layer timing differentiation that makes parallax work. */
.shape-divider--animated.shape-divider--speed-slow.shape-divider--double  svg path:nth-child(1) { animation-duration: 16s; }
.shape-divider--animated.shape-divider--speed-fast.shape-divider--double  svg path:nth-child(1) { animation-duration: 8s;  }

.shape-divider--animated.shape-divider--speed-slow.shape-divider--triple  svg path:nth-child(1) { animation-duration: 18s; }
.shape-divider--animated.shape-divider--speed-slow.shape-divider--triple  svg path:nth-child(2) { animation-duration: 13s; }
.shape-divider--animated.shape-divider--speed-slow.shape-divider--triple  svg path:nth-child(3) { animation-duration: 9s;  }
.shape-divider--animated.shape-divider--speed-fast.shape-divider--triple  svg path:nth-child(1) { animation-duration: 9s;  }
.shape-divider--animated.shape-divider--speed-fast.shape-divider--triple  svg path:nth-child(2) { animation-duration: 6s;  }
.shape-divider--animated.shape-divider--speed-fast.shape-divider--triple  svg path:nth-child(3) { animation-duration: 4s;  }

/* Accessibility — halt all shape divider animation for users with OS-level
   reduced-motion preference enabled. Same pattern used by gallery__marquee
   and the 404 page shimmer. */
@media ( prefers-reduced-motion: reduce ) {
    .shape-divider--animated svg path {
        animation: none;
    }
}

/* ── Background Overlay ─────────────────────────────────────────────────────── */
/* Shared overlay pattern: any section with `has-bg-overlay` gets a semi-transparent
   tint layer (via the `.section-overlay` div) rendered above the background but
   below the content. Color + opacity are set inline from ACF values. */

.has-bg-overlay {
    position: relative;
}

.section-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.has-bg-overlay > .block__inner {
    position: relative;
    z-index: 1;
}

/* ── Block inner container ──────────────────────────────────────────────────── */
/* Shared baseline for all full block inner wrappers. Per-block style.css
   overrides max-width and display as needed. */

.block__inner {
    width: 100%;
    margin: 0 auto;
    padding: 4rem 1.5rem;
}

/* ── Skeleton element modifiers ─────────────────────────────────────────────── */
/* Shared across all skeleton blocks. Applied to placeholder divs when a
   field is empty. Block-specific sizing (widths, heights) lives here. */

.skeleton--overline {
    height: 0.75rem;
    width: 25%;
}

.skeleton--heading {
    height: 3.5rem;
    width: 60%;
}

.skeleton--subheading {
    height: 1.5rem;
    width: 45%;
}

.skeleton--line {
    height: 1rem;
    width: 100%;
    max-width: 580px;
}

.skeleton--line-short {
    width: 70%;
}

.skeleton--cta {
    height: 48px;
    width: 140px;
    border-radius: 4px;
    margin-top: 0.5rem;
}

.skeleton--image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 8px;
}

/* Image placeholder — shimmer with a centred SVG icon */
.skeleton--image-placeholder {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.skeleton--image-placeholder svg {
    width: 64px;
    height: 64px;
    opacity: 0.25;
    flex-shrink: 0;
}

/* =============================================================================
   Site Banner
   ============================================================================= */

.site-banner {
    width: 100%;
    color: #fff;
}

.site-banner__content {
    padding: 0.6rem 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
}

/* Strip margins from WYSIWYG-generated paragraphs inside the banner */
.site-banner__content p {
    margin: 0;
}

.site-banner__content a {
    color: inherit;
    text-decoration: underline;
}

/* =============================================================================
   Header — Position Modes
   ============================================================================= */

/* Ensures the mobile drawer (position: absolute) is always contained
   within the header, including on static pages.

   `--site-header-height` is set at runtime by the per-header-type JS
   (header-simple.js / header-split-nav.js) on `:root` to match
   `header.offsetHeight` — captures the optional banner naturally.
   Setting on `:root` instead of here so siblings of <header> (like the
   mobile-menu backdrop) inherit it. CSS rules that consume the variable
   pass a 64px fallback for the moment before JS runs. */
.site-header {
    position: relative;
}

.site-header--sticky {
    position: sticky;
    top: 0;
    z-index: 200;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.site-header--sticky.is-hidden {
    opacity: 0;
    transform: translateY( -8px );
    pointer-events: none;
}

.site-header--fixed {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
}

/* Push body content down when fixed so it doesn't sit under the header.
   64px matches the header height defined in .header-simple. */
.header-is-fixed body,
body.header-is-fixed {
    padding-top: 64px;
}

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

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */
.header-simple {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.header-simple__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1.125rem;
}

.header-simple__logo img {
    height: 36px;
    width: auto;
}

/* ── Desktop nav ───────────────────────────────────────────────────────────── */
.header-simple__nav {
    display: none; /* hidden on mobile */
}

.header-simple__nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.header-simple__nav-list a {
    text-decoration: none;
    color: inherit;
    font-size: 0.9375rem;
}

.header-simple__nav-list a:hover {
    text-decoration: underline;
}

/* ── Hamburger ─────────────────────────────────────────────────────────────── */
.header-simple__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.header-simple__hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* Animate three bars into an X */
.header-simple__hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-simple__hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.header-simple__hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────── */
.header-simple__mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc( 100vh - 64px );
    overflow-y: auto;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 199;
}

.header-simple__mobile-menu.is-open {
    display: flex;
}

.header-simple__mobile-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.header-simple__mobile-list a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

/* ── Desktop chevron ───────────────────────────────────────────────────────── */
.header-simple__nav-list .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate( 45deg );
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* ── Desktop dropdowns ─────────────────────────────────────────────────────── */

/* WordPress wraps sub-menus in a <ul class="sub-menu"> */
.header-simple__nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}

.header-simple__nav-list .sub-menu a {
    display: block;
    padding: 0.6rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
}

.header-simple__nav-list .sub-menu li:last-child a {
    border-bottom: none;
}

/* Show on hover/focus-within of the parent <li> */
.header-simple__nav-list > li {
    position: relative;
}

.header-simple__nav-list > li:hover > .sub-menu,
.header-simple__nav-list > li:focus-within > .sub-menu {
    display: block;
}

/* ── Mobile sub-items ──────────────────────────────────────────────────────── */

/* Lay out the link + toggle button as a row */
.header-simple__mobile-list .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.header-simple__mobile-list .menu-item-has-children > a {
    flex: 1;
}

/* Sub-menus collapsed by default */
.header-simple__mobile-list .sub-menu {
    display: none;
    width: 100%;
    list-style: none;
    flex-direction: column;
}

.header-simple__mobile-list .menu-item-has-children.is-open > .sub-menu {
    display: flex;
    flex-direction: column;
}

.header-simple__mobile-list .sub-menu a {
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-size: 0.9375rem;
    color: #555;
    border-bottom: 1px solid #e5e5e5;
}

/* ── Submenu toggle button ─────────────────────────────────────────────────── */
.submenu-toggle {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.75rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.submenu-toggle::before {
    content: '';
    display: block;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate( 45deg );
    transition: transform 0.2s ease;
    position: relative;
    top: -2px;
}

.menu-item-has-children.is-open > .submenu-toggle::before {
    transform: rotate( -135deg );
    top: 2px;
}

/* ── Desktop breakpoint ────────────────────────────────────────────────────── */
@media ( min-width: 768px ) {

    .header-simple__nav {
        display: block;
    }

    .header-simple__hamburger {
        display: none;
    }

    /* Drawer should never show on desktop regardless of JS state */
    .header-simple__mobile-menu,
    .header-simple__mobile-menu.is-open {
        display: none;
    }

}

/* =============================================================================
   Split Nav Header
   ============================================================================= */

/* ── Outer wrapper ─────────────────────────────────────────────────────────── */
.header-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
}

/* ── Logo ──────────────────────────────────────────────────────────────────── */
.header-split__logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    font-weight: 700;
    font-size: 1.125rem;
    /* Keep logo centered even if left/right navs differ in width */
    position: absolute;
    left: 50%;
    transform: translateX( -50% );
}

.header-split__logo img {
    height: 36px;
    width: auto;
}

/* ── Desktop navs — hidden on mobile ──────────────────────────────────────── */
.header-split__nav {
    display: none;
    flex: 1;
}

.header-split__nav--right {
    display: none;
    justify-content: flex-end;
}

.header-split__nav-list {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.header-split__nav--right .header-split__nav-list {
    justify-content: flex-end;
}

.header-split__nav-list a {
    text-decoration: none;
    color: inherit;
    font-size: 0.9375rem;
}

.header-split__nav-list a:hover {
    text-decoration: underline;
}

/* ── Desktop dropdowns ─────────────────────────────────────────────────────── */
.header-split__nav-list .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate( 45deg );
    margin-left: 6px;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

.header-split__nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 180px;
    list-style: none;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    z-index: 100;
}

.header-split__nav-list .sub-menu a {
    display: block;
    padding: 0.6rem 1rem;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
}

.header-split__nav-list .sub-menu li:last-child a {
    border-bottom: none;
}

.header-split__nav-list > li {
    position: relative;
}

.header-split__nav-list > li:hover > .sub-menu,
.header-split__nav-list > li:focus-within > .sub-menu {
    display: block;
}

/* Right nav dropdowns open to the left so they don't overflow the viewport */
.header-split__nav--right .header-split__nav-list .sub-menu {
    left: auto;
    right: 0;
}

/* ── Hamburger ─────────────────────────────────────────────────────────────── */
.header-split__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    /* Push it to the right edge since there's no right nav on mobile */
    margin-left: auto;
}

.header-split__hamburger span {
    display: block;
    height: 2px;
    background: currentColor;
    transition: transform 0.2s ease, opacity 0.2s ease;
    transform-origin: center;
}

.header-split__hamburger.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.header-split__hamburger.is-active span:nth-child(2) {
    opacity: 0;
}
.header-split__hamburger.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile drawer ─────────────────────────────────────────────────────────── */
.header-split__mobile-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc( 100vh - 64px );
    overflow-y: auto;
    padding: 1rem 1.5rem;
    background: #fff;
    border-bottom: 1px solid #e5e5e5;
    z-index: 199;
}

.header-split__mobile-menu.is-open {
    display: flex;
}

.header-split__mobile-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

/* Divider between the two merged menu lists */
.header-split__mobile-list + .header-split__mobile-list {
    border-top: 1px solid #e5e5e5;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
}

.header-split__mobile-list a {
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    color: inherit;
    font-size: 1rem;
    border-bottom: 1px solid #e5e5e5;
}

/* Mobile sub-items */
.header-split__mobile-list .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.header-split__mobile-list .menu-item-has-children > a {
    flex: 1;
}

.header-split__mobile-list .sub-menu {
    display: none;
    width: 100%;
    list-style: none;
}

.header-split__mobile-list .menu-item-has-children.is-open > .sub-menu {
    display: flex;
    flex-direction: column;
}

.header-split__mobile-list .sub-menu a {
    padding: 0.75rem 0 0.75rem 1.5rem;
    font-size: 0.9375rem;
    color: #555;
    border-bottom: 1px solid #e5e5e5;
}

/* ── Desktop breakpoint ────────────────────────────────────────────────────── */
@media ( min-width: 768px ) {

    .header-split {
        /* Make room for the absolutely-positioned centered logo */
        position: relative;
    }

    .header-split__nav {
        display: flex;
    }

    .header-split__nav--right {
        display: flex;
    }

    .header-split__hamburger {
        display: none;
    }

    .header-split__mobile-menu,
    .header-split__mobile-menu.is-open {
        display: none;
    }

}

/* =============================================================================
   Block Editor — ACF Block Preview Overrides
   ============================================================================= */

.editor-editor-interface .acf-block-component {
    min-width: 100%;
}

.editor-editor-interface .acf-block-component .acf-block-preview > section {
    padding: 0px 20px;
}


.block-editor-inner-blocks {
    width: 100%;
}

/* TODO find and erase all the other versions of .block-editor-block-list__block .block-list-appender */
/* TODO find all the other stupid sylings that come pre-compiled with wordpress and destroy them one by one to clear bloat */

.block-editor-block-list__block .block-list-appender {
    position: relative !important;
    width: 100%;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* =============================================================================
   Site Header — CTA Stack
   =============================================================================
   Shared across header variants (simple, split-nav). Wrapper rendered by
   guidelines_render_header_ctas() in includes/header-settings.php with two
   context modifiers:

   - .site-header__ctas--desktop  — sits inline next to the nav at >=768px,
                                    hidden on mobile.
   - .site-header__ctas--mobile   — appears in the mobile drawer below the
                                    nav links, hidden on desktop.

   The per-CTA `.site-header__cta--hide-mobile` modifier hides that one CTA
   in BOTH contexts at <768px (desktop bar IS visible at >=768px so it shows
   there). Useful when only the primary CTA should follow into the drawer.
   ============================================================================= */

.site-header__ctas {
    display: flex;
    align-items: center;
    gap: 12px;
}

.site-header__cta {
    white-space: nowrap;
}

.site-header__cta-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

/* Desktop CTA stack — hidden on mobile by default. Shown at >=768px below. */
.site-header__ctas--desktop {
    display: none;
}

/* Mobile CTA stack — full-width buttons stacked vertically inside the drawer */
.site-header__ctas--mobile {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e5e5;
}

.site-header__ctas--mobile .site-header__cta {
    justify-content: center;
}

/* hide-mobile suppresses the CTA in the mobile drawer ONLY (and on the
   desktop bar at <768px, which is already hidden anyway). Chained class
   selector to beat the (0,1,0) specificity of `.btn`. */
@media ( max-width: 767.98px ) {
    .site-header__cta.site-header__cta--hide-mobile {
        display: none;
    }
}

@media ( min-width: 768px ) {
    .site-header__ctas--desktop {
        display: flex;
    }
    .site-header__ctas--mobile {
        display: none;
    }
}

/* =============================================================================
   Site Header — Mobile Menu Variants
   =============================================================================
   Architecture (Path A — single shared markup, variant via CSS only):

   - Both header types (`header-simple`, `header-split`) render their mobile
     drawer with a shared `.site-header__mobile-menu` class alongside the
     per-header-type class. Per-header-type rules govern internal layout
     (background, padding, list styles, typography); variant rules govern
     position + animation + visibility of the menu container itself.

   - Variant select (Header Settings → Mobile Menu Style) writes a
     `data-mobile-menu="dropdown|drawer-side|fullscreen|drawer-bottom"`
     attribute on the `<header class="site-header">` element. CSS reads
     that attribute to apply variant-specific rules.

   - Side drawer has a sub-option `data-drawer-side="left|right"` for which
     edge it slides in from. Default right.

   - Existing dropdown CSS (in header-simple / header-split sections above)
     IS the dropdown variant. New variants below override position +
     animation but inherit internal layout from the per-header-type rules.

   Variant specificity:
   - `.header-simple__mobile-menu` (existing dropdown rules) = (0,1,0)
   - `.site-header[data-mobile-menu="..."] .site-header__mobile-menu` = (0,2,0)
     New variants beat the existing rules cleanly without `!important`.

   Hide/show pattern:
   - Dropdown uses `display: none` / `display: flex` (no animation possible).
   - All other variants stay `display: flex` always; transform / opacity +
     `pointer-events: none` hide them when `.is-open` is absent. This lets
     the open/close transition animate.

   No JS changes needed — existing hamburger open/close handlers add and
   remove `.is-open` on the mobile-menu element, which is what every
   variant listens to.

   Backdrop dim is intentionally NOT included in v1. Body scroll lock plus
   the existing click-outside-the-header close handler is sufficient for
   v1; backdrop is logged as polish in `template-parts/headers/to-do.md`.
   ============================================================================= */

/* ── Variant: Side Drawer ─────────────────────────────────────────────────── */
/* Slides in from the right (default) or left edge. Starts BELOW the header
   so the header bar (with X button) stays visible and tappable while the
   drawer is open. Width clamped to a comfortable drawer size on tablets.
   Best for sites with longer menus or rich submenu nesting — doesn't
   compete with above-the-fold content for vertical space.

   `--site-header-height` is set by JS to `header.offsetHeight` (includes
   the optional banner). 64px fallback for the rare moment before JS runs. */
.site-header[data-mobile-menu="drawer-side"] .site-header__mobile-menu {
    display: flex;
    position: fixed;
    top: var( --site-header-height, 64px );
    bottom: 0;
    right: 0;
    left: auto;
    width: min( 85vw, 360px );
    max-height: none;
    transform: translateX( 100% );
    transition: transform 0.3s ease;
    pointer-events: none;
}

.site-header[data-mobile-menu="drawer-side"] .site-header__mobile-menu.is-open {
    transform: translateX( 0 );
    pointer-events: auto;
}

/* Drawer Side sub-option: left edge */
.site-header[data-mobile-menu="drawer-side"][data-drawer-side="left"] .site-header__mobile-menu {
    right: auto;
    left: 0;
    transform: translateX( -100% );
}

.site-header[data-mobile-menu="drawer-side"][data-drawer-side="left"] .site-header__mobile-menu.is-open {
    transform: translateX( 0 );
}

/* ── Variant: Full-screen Overlay ─────────────────────────────────────────── */
/* Menu covers the viewport BELOW the header — the header itself stays
   visible so editors / users can still see and tap the X (hamburger
   in active state) to close. Best for sites where the menu IS the
   primary nav action (single-page sites, portfolio sites with few but
   important sections). Per-header-type mobile-list rules render items
   vertically within the available viewport.

   Top offset uses the `--site-header-height` custom property declared
   on `.site-header` below — single source of truth so future Brand
   Identity changes to the header height cascade here automatically. */
.site-header[data-mobile-menu="fullscreen"] .site-header__mobile-menu {
    display: flex;
    position: fixed;
    top: var( --site-header-height, 64px );
    right: 0;
    bottom: 0;
    left: 0;
    max-height: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
    pointer-events: none;
}

.site-header[data-mobile-menu="fullscreen"] .site-header__mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease, visibility 0s linear 0s;
    pointer-events: auto;
}

/* ── Variant: Bottom Drawer ───────────────────────────────────────────────── */
/* Slides up from the bottom edge. Modern, app-like feel. Top corners
   rounded for a "sheet pulled up" affordance. Capped at 80vh so the top
   of the page stays visible above the drawer. */
.site-header[data-mobile-menu="drawer-bottom"] .site-header__mobile-menu {
    display: flex;
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    max-height: 80vh;
    border-radius: 16px 16px 0 0;
    transform: translateY( 100% );
    transition: transform 0.3s ease;
    pointer-events: none;
}

.site-header[data-mobile-menu="drawer-bottom"] .site-header__mobile-menu.is-open {
    transform: translateY( 0 );
    pointer-events: auto;
}

/* Hide all variants on desktop — the existing per-header-type @media
   `display: none` rules already cover dropdown, but the new variants
   default to `display: flex` so they need explicit hiding above the
   breakpoint. Backdrop element gets the same hide treatment. */
@media ( min-width: 768px ) {
    .site-header[data-mobile-menu="drawer-side"] .site-header__mobile-menu,
    .site-header[data-mobile-menu="fullscreen"] .site-header__mobile-menu,
    .site-header[data-mobile-menu="drawer-bottom"] .site-header__mobile-menu {
        display: none;
    }
    .site-header__mobile-backdrop {
        display: none !important;
    }
}

/* ── Mobile menu backdrop ─────────────────────────────────────────────────── */
/* Renders below the floating drawer variants (side, bottom) to visually
   separate the menu from the page content behind it. Top edge offset by
   `--site-header-height` so the header bar (and X button) stays visible
   AND interactive — backdrop only covers content below the header.

   Click-through is captured by the existing document-level "click outside
   header" handler in each header script — backdrop sits OUTSIDE the
   <header> in the DOM, so clicking it counts as "outside" and dismisses
   the menu.

   Skipped intentionally for:
   - dropdown — flush below the header, no need
   - fullscreen — already covers everything below the header

   z-index: 198 sits below the menu (199) but above page content. */
.site-header__mobile-backdrop {
    display: none;
    position: fixed;
    top: var( --site-header-height, 64px );
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba( 0, 0, 0, 0.5 );
    z-index: 198;
    cursor: pointer;
}

/* Show only when:
   - The mobile menu is open (body.no-scroll added by JS on open)
   - AND the variant is one that uses a backdrop. */
body.no-scroll .site-header[data-mobile-menu="drawer-side"] ~ .site-header__mobile-backdrop,
body.no-scroll .site-header[data-mobile-menu="drawer-bottom"] ~ .site-header__mobile-backdrop {
    display: block;
}