@charset "UTF-8";
 
/*
Theme Name:  Boilerplate Master
Theme URI:   https://github.com/MattDee87/boilerplate-master
Author:      Matthew De Nero
Author URI:  https://github.com/MattDee87
Description: Vanilla WordPress boilerplate — reusable starting point for all projects. Update tokens, swap fonts, layer brand styles at the bottom.
Version:     4.0.1
Requires PHP: 8.1
License:     MIT
Text Domain: boilerplate
*/
 
/* ============================================================
   TABLE OF CONTENTS
   ──────────────────────────────────────────────────────────
    1.  IMPORTS
        1a. Body Font  (Inter variable — boilerplate default, replace per project)
        1b. Heading Font  (Outfit variable — boilerplate default, replace per project)
        1c. Accent / Mono Font  (JetBrains Mono variable — boilerplate default, replace per project)
        1d. ⚠️  TEST FONTS — client review only, remove when done
    2.  DESIGN TOKENS  ← start every new project here
        2a. Colors
        2b. Typography  (font families + scale + weights)
        2c. Spacing
        2d. Borders & Shadows
        2e. Layout
    3.  RESET & NORMALIZE
    4.  BASE TYPOGRAPHY
        4a. Body
        4b. Headings
        4c. Paragraphs
        4d. Links
        4e. Lists
        4f. Blockquote
        4g. Code & Pre
    5.  LAYOUT
        5a. Wrapper / Container
        5b. Main
        5c. Article
    6.  COMPONENTS
        6a. Header & Navigation
        6b. Buttons
        6c. Forms
        6d. Tables
        6e. Footer
    7.  WORDPRESS SPECIFICS
        7a. Block Editor
        7b. Alignment Helpers
        7c. Captions
        7e. Legacy colour preset names
    8.  UTILITIES
        8a. Skip to Main Content  (accessibility)
        8b. Scroll To Top
        8c. Font Testing Classes  (remove with test fonts)
        8d. General Helpers
    9.  RESPONSIVE
        9a. Tablet  — 768px
        9b. Mobile  — 480px
   10.  [CLIENT NAME] SHARED PATTERNS
        10a. Wrapper / Section Layout
        10b. Shared Buttons
        10c. Shared Eyebrow / Pill Labels
        10d. Shared Title Plate Patterns
        10e. Shared Gradient / Accent Lines
        10f. Shared Glass / Card Panels
        10g. Header
        10h. Footer
        10i. Contact Drawer / Global Overlays
        10j. Small Utilities
   ──────────────────────────────────────────────────────────
*/
 
 
/* ============================================================
   1. IMPORTS
   ============================================================ */
 
/* ──────────────────────────────────────────────────────────
   ⚠️  CSS RULE — @import MUST stay first in this file.
   Per spec, @import rules must precede every other rule
   (except @charset). Any rule placed before an @import —
   including @font-face — causes the browser to silently
   discard that @import with no console warning. The fonts
   it references then never load; the browser falls back to
   the next font in the stack instead. DO NOT move this
   @import block back down below the @font-face rules in
   §1a–1c.
   ────────────────────────────────────────────────────────── 

   ⚠️  1d. TEST FONTS — CLIENT FONT SELECTION ONLY
   ──────────────────────────────────────────────────────────
   These fonts are TEMPORARY. They exist solely to power the
   Font Test page shown to clients during the discovery phase.

   ✅  KEEP this import until the client locks in their
       final font system.
   ❌  REMOVE this @import once fonts are chosen.
       Also remove the matching font testing classes in §8c.

   Test fonts included:
   Poppins · Sora · Manrope · Space Grotesk · Barlow · Rajdhani
   (Inter + JetBrains Mono are self-hosted via @font-face below)
   ────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Sora:wght@400;600;700&family=Manrope:wght@400;600;700&family=Space+Grotesk:wght@400;600;700&family=Barlow:wght@400;600;700&family=Rajdhani:wght@400;600;700&display=swap');

/* ── 1a. Body Font — Inter (variable) ───────────────────────
   Boilerplate default. Replace with project font on new projects.
   See Font Self-Hosting Workflow in Guides/SETUP_GUIDE.md. */
@font-face {
    font-family: 'Inter';
    src: url('assets/fonts/inter-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── 1b. Heading Font — Outfit (variable) ───────────────────
   Boilerplate default. Replace with project font on new projects. */
@font-face {
    font-family: 'Outfit';
    src: url('assets/fonts/outfit-variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── 1c. Accent / Mono Font — JetBrains Mono (variable) ────
   Used for code blocks, labels, and UI accents.
   Boilerplate default. Replace with project font on new projects. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('assets/fonts/jetbrains-mono-variable.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
 
 
/* ============================================================
   2. DESIGN TOKENS — CSS CUSTOM PROPERTIES
   ──────────────────────────────────────────────────────────
   🚀  START EVERY NEW PROJECT HERE.
   Update these variables first before writing any custom CSS.
   Sizes, spacing, and structure are mostly reusable.
   Font families, colors, and visual personality live here.
   ============================================================ */
 
:root {
 
    /* ── 2a. Colors ─────────────────────────────────────────
       Neutral defaults. Replace with your project palette.   */
 
    --color-primary:        #1A1A1A;        /* Main brand / heading color     */
    --color-secondary:      #555555;        /* Supporting / subheading color  */
    --color-accent:         #0055CC;        /* CTA, links, highlights         */
    --color-accent-hover:   #003D99;        /* Hover state of accent          */
 
    --color-bg:             #FFFFFF;        /* Page background                */
    --color-bg-alt:         #F5F5F5;        /* Alternate / card background    */
    --color-bg-dark:        #1A1A1A;        /* Header, footer, dark sections  */
 
    --color-text:           #1A1A1A;        /* Primary body text              */
    --color-text-muted:     #666666;        /* Muted / secondary text         */
    --color-text-inverse:        #FFFFFF;                    /* Bright text on dark: headings, buttons, important labels */
    --color-text-inverse-soft:   rgba(255, 255, 255, 0.76);  /* Body/paragraph text on dark backgrounds */
    --color-text-inverse-muted:  rgba(255, 255, 255, 0.58);  /* Helper text, captions, meta, placeholders, quiet footer copy */
 
    --color-border:         #E0E0E0;        /* Borders, dividers, inputs      */
    --color-white:          #FFFFFF;
    --color-black:          #000000;
    --color-rating:         #F5A623;        /* Star rating gold — testimonials */
    --color-error:          #C0392B;        /* Form/field error state — contact block + drawer */

    /* ── 2b. Typography ─────────────────────────────────────
       Three font slots. Swap values + imports in §1.
       ─────────────────────────────────────────────────────
       --font-body:     paragraph text, UI elements
       --font-heading:  all h1–h6
       --font-accent:   code, labels, mono UI details        */
 
    --font-body:            'Inter', system-ui, sans-serif;
    --font-heading:         'Outfit', system-ui, sans-serif;
    --font-accent:          'JetBrains Mono', 'Courier New', monospace;
 
    /* Type scale — rem-based */
    --text-xs:              0.75rem;        /* 12px */
    --text-sm:              0.875rem;       /* 14px */
    --text-base:            1rem;           /* 16px */
    --text-md:              1.125rem;       /* 18px */
    --text-lg:              1.25rem;        /* 20px */
    --text-xl:              1.5rem;         /* 24px */
    --text-2xl:             1.75rem;        /* 28px */
    --text-3xl:             2.25rem;        /* 36px */
    --text-4xl:             3rem;           /* 48px */
 
    /* Font weights */
    --weight-normal:        400;
    --weight-semi:          600;
    --weight-bold:          700;
 
    /* Line heights */
    --leading-tight:        1.2;
    --leading-snug:         1.4;
    --leading-normal:       1.6;
    --leading-relaxed:      1.8;
 
    /* ── 2c. Spacing ────────────────────────────────────────
       Base-4 / base-8 scale. Use these consistently.        */
 
    --space-1:              4px;
    --space-2:              8px;
    --space-3:              12px;
    --space-4:              16px;
    --space-5:              20px;
    --space-6:              24px;
    --space-8:              32px;
    --space-10:             40px;
    --space-12:             48px;
    --space-16:             64px;
    --space-20:             80px;
    --space-24:             96px;
 
    /* ── 2d. Borders & Shadows ──────────────────────────────*/
 
    --radius-sm:            4px;
    --radius-md:            8px;
    --radius-lg:            12px;
    --radius-xl:            20px;
    --radius-full:          9999px;
 
    --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.10);
    --shadow-lg:            0 8px 24px rgba(0, 0, 0, 0.12);
 
    /* ── 2e. Layout ─────────────────────────────────────────*/
 
    --max-width:            1200px;
    --wrapper-padding:      40px;
}
 
 
/* ============================================================
   3. RESET & NORMALIZE
   ============================================================ */
 
*,
*::before,
*::after {
    box-sizing: border-box;
}
 
html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, code,
em, img, strong, sub, sup, var, b, u, i, center, ol, ul, li,
fieldset, form, label, legend, article, aside, canvas,
figure, figcaption, footer, header, nav, section, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}
 
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}
 
body {
    line-height: 1;
}
 
table {
    border-collapse: collapse;
    border-spacing: 0;
}
 
img {
    max-width: 100%;
    height: auto;
    display: block;
}
 
 
/* ============================================================
   4. BASE TYPOGRAPHY
   ============================================================ */
 
/* ── 4a. Body ───────────────────────────────────────────────*/
 
body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-normal);
    line-height: var(--leading-normal);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
 
/* Form elements inherit the body font */
input,
select,
textarea,
button {
    font-family: var(--font-body);
    font-size: var(--text-base);
}
 
/* ── 4b. Headings ───────────────────────────────────────────*/
 
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    color: var(--color-primary);
    margin: var(--space-8) 0 var(--space-4) 0;
}
 
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); text-transform: uppercase; letter-spacing: 0.05em; }
 
/* ── 4c. Paragraphs ─────────────────────────────────────────*/
 
p {
    margin: 0 0 var(--space-5) 0;
    line-height: var(--leading-relaxed);
    color: var(--color-text);
    font-size: var(--text-base);
}
 
/* ── 4d. Links ──────────────────────────────────────────────*/
 
a {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: var(--weight-semi);
    transition: color 0.3s ease;
}
 
a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}
 
/* ── 4e. Lists ──────────────────────────────────────────────*/
 
ul, ol {
    margin: var(--space-5) 0 var(--space-5) var(--space-8);
    padding-left: var(--space-5);
}
 
ul { list-style-type: disc; }
ol { list-style-type: decimal; }
 
ul li,
ol li {
    margin-bottom: var(--space-3);
    color: var(--color-text);
    line-height: var(--leading-relaxed);
}
 
/* ── 4f. Blockquote ─────────────────────────────────────────*/
 
blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-5);
    margin: var(--space-5) 0;
    color: var(--color-text-muted);
    font-style: italic;
    font-size: var(--text-md);
}
 
/* ── 4g. Code & Pre ─────────────────────────────────────────*/
 
code {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    background-color: var(--color-bg-alt);
    color: var(--color-primary);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}
 
pre {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    background-color: var(--color-bg-dark);
    color: var(--color-text-inverse);
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin: var(--space-5) 0;
    border-left: 4px solid var(--color-accent);
}
 
 
/* ============================================================
   5. LAYOUT
   ============================================================ */
 
/* ── 5a. Wrapper / Container ────────────────────────────────
   Single definition. No duplicates.                          */
 
.wrapper,
.container {
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--wrapper-padding);
}
 
/* ── 5b. Main ───────────────────────────────────────────────
   Unconstrained. Each block owns its containment via .wrapper.
   Vertical margin creates breathing room above and below main.
   Templates that need content containment use .wrapper inside
   <main> directly (page.php, single.php, home.php, etc.).
   Full-width block templates (front-page.php) let blocks render
   directly in main — each block's inner .wrapper handles it.
   ────────────────────────────────────────────────────────── */

main {
    margin: var(--space-16) 0;
}

#content {
    min-height: 400px;
}
 
/* ── 5c. Article ────────────────────────────────────────────*/
 
/* Blog post cards (.post-card) have their own card design in the
   blog templates; :where() keeps this rule's specificity unchanged (CODE-019). */
article:not(:where(.post-card)) {
    background-color: var(--color-bg);
    padding: var(--space-10);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

article:has(.hero_style_full-width),
article:has(.cta_style_full-width) {
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}
 
 
/* ============================================================
   6. COMPONENTS
   ============================================================ */
 
/* ── 6a. Header & Navigation ────────────────────────────────
   Boilerplate structural defaults only — layout, spacing,
   and token-driven color. These ship with every project and
   are not rewritten per client.
   Project-specific header brand styles go in §10g.
   Responsive nav system styles live in:
   ~common_features/ada_responsive_nav/style.css            */
 
/* The site header only: a <header> inside <main> (for example a blog
   post's own header) is left alone. :where() keeps the specificity
   of a bare `header` selector (CODE-014). */
header:not(:where(main header)) {
    background-color: var(--color-bg-dark);
    padding: var(--space-5) 0;
}

/* .header_inner lays out the logo, nav, and hamburger button in
   one row. This lives here (not in the ADA nav file) so header
   layout has exactly one owner — no specificity tie to lose.
   To change it per project, edit this rule directly or override
   it in §10g further down; either way there's only one file to
   check. */
.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The active V3 navigation system (dropdowns, hamburger, mobile
   breakpoint) is handled by ~common_features/ada_responsive_nav/
   style.css. Keep nav-specific overrides there; header layout
   overrides go in §10g. */

/* Header & Footer settings (Theme Settings → Header & Footer,
   BATCH_8_PLAN.md §49). Every rule below needs a class the header
   only gets when a setting is chosen, so the default header is
   unchanged.

   Logo above a centred menu (computers only; phones use the usual
   phone header). */
@media (min-width: 901px) {
    header.site_header_stacked .header_inner {
        flex-wrap: wrap;
        justify-content: center;
        column-gap: var(--space-4);
    }

    header.site_header_stacked #logo,
    header.site_header_stacked .custom-logo-link {
        flex: 0 0 100%;
        justify-content: center;
    }

    header.site_header_stacked nav {
        margin-top: var(--space-4);
    }

    /* Logo left, menu right + header button: the menu moves right,
       next to the button. */
    header.has_header_button:not(.site_header_stacked) #main-nav {
        margin-left: auto;
    }

    header.has_header_button .header_button_wrap {
        margin: var(--space-8) 0 0 var(--space-4);
    }

    header.site_header_stacked .header_button_wrap {
        margin: var(--space-4) 0 0 0;
    }
}

/* Phones and small tablets (≤900px, the phone-menu width): the row may
   wrap, so the opened menu (flex: 1 0 100% in the nav stylesheet) takes
   its own full-width row under the logo instead of squeezing in beside
   it (§49 fix). Both layouts use the same phone header. */
@media (max-width: 900px) {
    .header_inner {
        flex-wrap: wrap;
    }

    header.site_header_stacked #logo,
    header.site_header_stacked .custom-logo-link {
        justify-content: flex-start;
    }

    /* Menu button, then the header button, at the right of the top row —
       the same order as the HTML, so Tab follows what is on screen. */
    header.has_header_button #mnavbutton {
        margin-left: auto;
    }

    .header_button_wrap {
        order: 2;
        margin-left: var(--space-3);
    }
}

/* Very small phones: the header button gets its own full-width row
   under the logo and menu button. */
@media (max-width: 480px) {
    .header_button_wrap {
        flex: 1 0 100%;
        margin: var(--space-3) 0 0;
    }

    .header_button {
        display: block;
        width: 100%;
        text-align: center;
    }
}

/* Header button (optional). A contact-form button with no backup link
   stays hidden until the pop-out script shows it; hide its holder too. */
.header_button_wrap:has(> [hidden]) {
    display: none;
}

.header_button {
    white-space: nowrap;
}

/* Header and footer colours — the shared six background choices.
   They only change the header or footer they are chosen for. */
.hf_surface_background     { background-color: var(--color-bg); }
.hf_surface_alt_background { background-color: var(--color-bg-alt); }
.hf_surface_dark           { background-color: var(--color-bg-dark); }
.hf_surface_accent         { background-color: var(--color-accent); }
.hf_surface_custom         { background-color: var(--hf-surface, var(--color-bg-dark)); }

.hf_text_light {
    --hf-text: var(--color-text-inverse);
    --hf-text-soft: var(--color-text-inverse-soft);
    --hf-hover: var(--color-accent);
    --hf-line: var(--color-text-inverse-muted);
}

.hf_text_dark {
    --hf-text: var(--color-text);
    --hf-text-soft: var(--color-text);
    --hf-hover: var(--color-accent);
    --hf-line: var(--color-border);
    /* Desktop drop-down menus become a light panel with dark words. */
    --hf-sub-bg: var(--color-bg);
    --hf-sub-text: var(--color-text);
    --hf-sub-shadow: var(--shadow-md);
}

/* On the brand colour or your own colour, hover keeps the text colour
   and underlines, because the brand colour may not show on them. */
.hf_surface_accent,
.hf_surface_custom {
    --hf-hover: var(--hf-text);
    /* Softer see-through text can fall below 4.5:1 on these, so
       supporting text uses the full text colour. */
    --hf-text-soft: var(--hf-text);
}

header.hf_surface_accent nav .nav_item_holder > a:hover,
header.hf_surface_custom nav .nav_item_holder > a:hover,
.hf_surface_accent #logo:hover,
.hf_surface_custom #logo:hover {
    text-decoration: underline;
}

/* Buttons on a brand-colour header swap to the page colour so they
   stay visible. */
header.hf_surface_accent .header_button,
header.hf_surface_accent nav .nav_item_holder.nav_button > a {
    background-color: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-accent);
}

header.hf_surface_accent .header_button:hover,
header.hf_surface_accent nav .nav_item_holder.nav_button > a:hover {
    background-color: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
    color: var(--color-accent);
}

/* Focus outlines follow the chosen text colour so they show on the
   chosen background. */
.hf_surface a:focus-visible,
.hf_surface button:focus-visible {
    outline: 2px solid var(--hf-text);
    outline-offset: 3px;
}

/* ── 6b. Buttons ────────────────────────────────────────────*/
 
.btn,
button,
input[type="submit"],
input[type="button"] {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    color: var(--color-white);
    background-color: var(--color-accent);
    border: 2px solid var(--color-accent);
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    cursor: pointer;
    text-decoration: none;
    line-height: 1;
    transition: all 0.3s ease;
}
 
.btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}
 
.btn-outline {
    background-color: transparent;
    color: var(--color-accent);
}
 
.btn-outline:hover {
    background-color: var(--color-accent);
    color: var(--color-white);
}
 
/* ── 6c. Forms ──────────────────────────────────────────────*/
 
form {
    width: 100%;
}
 
label {
    display: block;
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-text);
    margin-bottom: var(--space-2);
}
 
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
textarea,
select {
    display: block;
    width: 100%;
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--color-text);
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    outline: none;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
 
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(0, 85, 204, 0.12);
}
 
textarea {
    min-height: 120px;
    resize: vertical;
}
 
/* ── 6d. Tables ─────────────────────────────────────────────*/
 
table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-5) 0;
    font-size: var(--text-base);
}
 
th, td {
    padding: var(--space-3) var(--space-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border);
}
 
th {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    background-color: var(--color-bg-alt);
}
 
tr:hover {
    background-color: var(--color-bg-alt);
}
 
/* ── 6e. Footer ─────────────────────────────────────────────
   Boilerplate structural defaults only — layout, spacing,
   and token-driven color. These ship with every project and
   are not rewritten per client.
   Project-specific footer brand styles go in §10h.          */
 
footer {
    background-color: var(--color-bg-dark);
    color: var(--hf-text, var(--color-text-inverse));
    padding: var(--space-12) 0 var(--space-5) 0;
    margin-top: var(--space-20);
}
 
.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-8);
}
 
footer p {
    color: var(--hf-text, var(--color-text-inverse));
    margin: 0;
    font-size: var(--text-sm);
}
 
footer a {
    color: var(--hf-text, var(--color-text-inverse));
    text-decoration: underline;
}
 
footer a:hover {
    /* Keep the link's own colour (the global a:hover recoloured it, CODE-064). */
    color: var(--hf-text, var(--color-text-inverse));
    opacity: 0.75;
}
 
/* Header & Footer settings (§49). Each rule below only matches
   markup that a setting adds, so the default footer is unchanged. */
.footer_brand {
    max-width: 32rem;
}

.footer_logo .custom-logo,
.footer_logo img {
    max-height: 60px;
    width: auto;
}

.footer_site_name {
    font-weight: var(--weight-bold);
    font-size: var(--text-lg);
    text-decoration: none;
}

.footer_text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--hf-text-soft, var(--color-text-inverse-soft));
}

.footer_text p,
.footer_text li {
    color: inherit;
}

.footer_text p + p {
    margin-top: var(--space-2);
}

.footer_contact p + p {
    margin-top: var(--space-1);
}

.footer_social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
}

.footer_social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

.footer_social_icon {
    width: 1.25rem;
    height: 1.25rem;
    fill: currentColor;
}

.footer_heading {
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--hf-text, var(--color-text-inverse));
    margin: 0 0 var(--space-3);
}

.footer_menu_list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer_menu_list li + li {
    margin-top: var(--space-2);
}

/* Simple footer with optional content or the Legal Menu (§52): the footer
   menu prints bare list items, so remove their bullets and space them
   evenly. The untouched Simple footer doesn't get this class. */
.site_footer_simple_extended .footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: 0;
    padding: 0;
}

.site_footer_simple_extended .footer-nav li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Legal links sit with the copyright in the bottom legal row (Columns,
   and Simple once optional content or the Legal Menu is used). */
.footer_legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-6);
}

.footer_legal_nav .footer_menu_list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.footer_legal_nav .footer_menu_list li + li {
    margin-top: 0;
}

.footer_legal_nav a {
    font-size: var(--text-sm);
}

/* Columns layout: up to four columns, then two, then one. */
.footer_columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: start;
    gap: var(--space-8);
}

.footer_legal_row {
    justify-content: space-between;
    border-top: 1px solid var(--hf-line, var(--color-text-inverse-muted));
    margin-top: var(--space-10);
    padding-top: var(--space-5);
}

.footer_legal_row:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 900px) {
    .footer_columns {
        grid-auto-flow: row;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .footer_columns {
        grid-template-columns: minmax(0, 1fr);
    }

    .footer_legal_row {
        flex-direction: column;
        align-items: flex-start;
    }
}

footer .copyright {
    width: 100%;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: var(--space-5);
    margin-top: var(--space-5);
    color: rgba(255, 255, 255, 0.55);
    font-size: var(--text-sm);
}
 
 
/* ============================================================
   7. WORDPRESS SPECIFICS
   ============================================================ */
 
/* ── 7a. Block Editor — heading blocks ──────────────────────*/
 
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-heading h5,
.wp-block-heading h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-bold);
}
 
/* WordPress button block */
.wp-block-button__link {
    background-color: var(--color-accent) !important;
    color: var(--color-white) !important;
    padding: var(--space-3) var(--space-6) !important;
    font-family: var(--font-body) !important;
    font-weight: var(--weight-semi) !important;
    border-radius: var(--radius-md) !important;
    transition: all 0.3s ease !important;
}
 
.wp-block-button__link:hover {
    background-color: var(--color-accent-hover) !important;
    color: var(--color-white) !important;
}
 
/* ── 7b. Alignment Helpers ──────────────────────────────────*/
 
.alignleft   { float: left;  margin-right: var(--space-5); }
.alignright  { float: right; margin-left: var(--space-5); }
.aligncenter { display: block; margin: 0 auto; }
.alignwide   { max-width: 100%; }
.alignfull   { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
 
/* ── 7c. Captions ───────────────────────────────────────────*/
 
.wp-caption-text,
figcaption {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-align: center;
    margin-top: var(--space-2);
    font-style: italic;
}

/* ── 7d. Responsive Embeds ──────────────────────────────────
   Wraps iframes in a 16:9 responsive container.
   Handles Loom, YouTube, Vimeo and any oEmbed provider.    */

.embed-responsive {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.embed-responsive iframe,
.embed-responsive video,
.embed-responsive object,
.embed-responsive embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
 
 
/* ── 7e. Legacy colour preset names ─────────────────────────
   theme.json's colour presets "text" and "border" were renamed
   "body-text" and "border-line" (BATCH_8_PLAN.md §55–§56): their
   generated .has-text-color / .has-border-color rules collided with
   the generic classes WordPress adds to every block with a text or
   border colour. Saved content is not rewritten, so the old names
   keep working here:
   - the old preset variables point at the new ones (link/element
     colours and inline styles saved as var(--wp--preset--color--text));
   - old background and border preset classes are mapped.
   Old *text* colour selections get the new preset's class when the
   block is shown (functions.php, boilerplate_legacy_preset_class) and
   a marker class in the editor (js/preset-compat-editor.js, rules
   below).
   NEVER add a rule for .has-text-color or .has-border-color — those
   are core's generic classes and must stay unstyled.            */

:root {
    --wp--preset--color--text: var(--wp--preset--color--body-text);
    --wp--preset--color--border: var(--wp--preset--color--border-line);
}

.has-text-background-color {
    background-color: var(--wp--preset--color--body-text) !important;
}

.has-border-background-color {
    background-color: var(--wp--preset--color--border-line) !important;
}

.has-text-border-color {
    border-color: var(--wp--preset--color--body-text) !important;
}

.has-border-border-color {
    border-color: var(--wp--preset--color--border-line) !important;
}

/* Old text-colour selections in the block editor (the website adds
   the new preset's own class instead). The editor marks the block's
   wrapper; the colour applies to the wrapper or to its direct child
   that carries the colour classes (buttons). !important matches
   WordPress's preset classes; :where() keeps the specificity at zero
   so anything that beats a new preset (e.g. the theme's core-button
   rule in §7a) beats the old one too.                          */
:where(.bp-legacy-text-color):where(.has-text-color),
:where(.bp-legacy-text-color) > :where(.has-text-color) {
    color: var(--wp--preset--color--body-text) !important;
}

:where(.bp-legacy-border-line-color):where(.has-text-color),
:where(.bp-legacy-border-line-color) > :where(.has-text-color) {
    color: var(--wp--preset--color--border-line) !important;
}

/* ============================================================
   8. UTILITIES
   ============================================================ */
 
/* ── 8a. Skip to Main Content — accessibility ───────────────*/
 
.main_content {
    height: 0;
    overflow: hidden;
    display: block;
    font-size: 0;
    text-transform: uppercase;
    line-height: 0;
    background: var(--color-bg-dark);
    color: var(--color-text-inverse);
    font-weight: var(--weight-bold);
    letter-spacing: 1px;
}
 
.main_content:focus {
    font-size: var(--text-sm);
    line-height: 16px;
    height: 36px;
    padding: 10px 15px;
}
 
/* Inline UI icons (skip link, scroll-to-top, contact drawer buttons).
   boilerplate_icon() SVGs sized like the Font Awesome glyphs they
   replaced, so these buttons no longer need the Font Awesome kit. */
.bp_ui_icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    overflow: visible;
}

/* ── 8b. Scroll To Top ──────────────────────────────────────*/
 
#top {
    position: fixed;
    bottom: 0px;
    right: 20px;
    width: 45px;
    height: 45px;
    opacity: 0;
    border-radius: var(--radius-xl) 0 var(--radius-xl) var(--radius-xl);
    background: var(--color-bg-alt);
    color: var(--color-accent);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: var(--text-sm);
    line-height: 1em;
    user-select: none;
    transition: all 500ms ease;
    border: 1px solid var(--color-border);
    z-index: 10000;
    pointer-events: none;
    cursor: pointer;
    /* A native <button> since §49 — reset the global button look. */
    padding: 0;
    margin: 0;
    font-family: inherit;
    font-weight: inherit;
    appearance: none;
}
 
#top.on {
    pointer-events: initial;
    bottom: 20px;
    opacity: 1;
}
 
#top:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-accent);
    box-shadow: var(--shadow-md);
}
 
/* ── 8c. Font Testing Classes ───────────────────────────────
   ──────────────────────────────────────────────────────────
   ⚠️  TEMPORARY — used on the Font Test page only.
   Remove these classes once the client selects their fonts.
   Also remove the matching @import block in §1d above.
   ────────────────────────────────────────────────────────── */
.font-inter         { font-family: 'Inter', sans-serif !important; }
.font-outfit        { font-family: 'Outfit', sans-serif !important; }
.font-poppins       { font-family: 'Poppins', sans-serif !important; }
.font-sora          { font-family: 'Sora', sans-serif !important; }
.font-manrope       { font-family: 'Manrope', sans-serif !important; }
.font-space-grotesk { font-family: 'Space Grotesk', sans-serif !important; }
.font-barlow        { font-family: 'Barlow', sans-serif !important; }
.font-rajdhani      { font-family: 'Rajdhani', sans-serif !important; }
.font-jetbrains     { font-family: 'JetBrains Mono', monospace !important; }
 
/* ── 8d. General Helpers ────────────────────────────────────*/
 
/* Screen-reader only — hide visually, keep accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}
 
.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }
 
.mt-0  { margin-top: 0 !important; }
.mb-0  { margin-bottom: 0 !important; }
.pt-0  { padding-top: 0 !important; }
.pb-0  { padding-bottom: 0 !important; }
 
.hidden { display: none !important; }
 
 
/* ============================================================
   9. RESPONSIVE
   ============================================================ */
 
/* ── 9a. Tablet — max-width: 768px ─────────────────────────*/
 
@media (max-width: 768px) {
 
    :root {
        --wrapper-padding: 24px;
    }
 
    h1 { font-size: var(--text-3xl); }
    h2 { font-size: var(--text-2xl); }
    h3 { font-size: var(--text-xl); }
 
    header nav ul {
        gap: var(--space-5);
    }
 
    header nav a {
        font-size: var(--text-xs);
    }
 
    article:not(:where(.post-card)) {
        padding: var(--space-5);
    }
 
    main {
        padding: 0 var(--space-6);
        margin: var(--space-10) auto;
    }
 
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    /* Header & Footer settings (§49): Simple centres its content on
       tablets, so its bottom legal row centres too; Columns stay left. */
    .site_footer_simple_extended .footer-nav {
        justify-content: center;
    }

    footer:not(.site_footer_columns) .footer_legal_row {
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .footer-content.footer_columns {
        text-align: left;
    }
}
 
/* ── 9b. Mobile — max-width: 480px ─────────────────────────*/
 
@media (max-width: 480px) {
 
    :root {
        --wrapper-padding: 16px;
    }
 
    h1 { font-size: var(--text-2xl); }
    h2 { font-size: var(--text-xl); }
    h3 { font-size: var(--text-lg); }
 
    header nav ul {
        gap: var(--space-4);
        flex-wrap: wrap;
    }
 
    header nav a {
        font-size: var(--text-xs);
    }
 
    article:not(:where(.post-card)) {
        padding: var(--space-4);
    }
 
    main {
        padding: 0 var(--space-4);
        margin: var(--space-8) auto;
    }
 
    ul, ol {
        margin: var(--space-4) 0 var(--space-4) var(--space-5);
    }
}
 
 
/* ============================================================
   10. [CLIENT NAME] SHARED PATTERNS
   ──────────────────────────────────────────────────────────
   Add project-specific styles below, organized by the
   sub-sections that apply to your project. Delete or leave
   empty any sub-sections you do not need.

   The right order when starting a new project:
     1. Update :root tokens in §2
     2. Swap font @imports in §1
     3. Add shared patterns and brand styles here

   WHAT BELONGS HERE:
   Shared visual patterns used across multiple blocks —
   buttons, pills, eyebrows, title plates, cards, gradient
   underlines. Header and footer brand styles. Contact drawer
   or global UI overlays. Page-scoped block overrides using
   body.page-{slug}. Any project-specific style not covered
   by tokens or block CSS files.

   WHAT DOES NOT BELONG HERE:
   Block-specific layout or structure → block's own .css file
   New design tokens            → :root in §2
   Site-wide resets or base typography → §3 and §4

   SHARED PATTERN RULE:
   If the same visual treatment appears in more than one block,
   promote it here instead of duplicating it in block CSS.
   Examples:
     repeated pill buttons    → .btn-pill-primary / -secondary
     repeated eyebrow labels  → shared eyebrow class
     repeated title plates    → shared title pattern class
     repeated gradient lines  → shared accent-line class
     repeated glass panels    → shared panel/card class

   GLOBAL ELEMENT RULE:
   Global element rules (§4) should stay foundational:
   font-family, font-size, line-height, color, margin.
   Decorative global heading underlines, display overrides on
   bare elements, or complex pseudo-elements on bare selectors
   belong as opt-in classes here in §10 — not global rules.
   If a project intentionally applies stronger global styling,
   document that choice with a comment.

   BLOCK WRAPPER RULE:
   Every block uses an outer section and an inner .wrapper:
     <section class="block_name block_name_variant_[v] block_name_style_[s]">
         <div class="wrapper block_name_wrapper">...</div>
     </section>
   Outer section:       background, full-width, vertical spacing.
                        Variant and style classes belong here.
   .wrapper:            max-width, margin auto, horizontal padding.
   Block wrapper class: block-specific layout only.
   Do not redefine max-width or horizontal padding per block.
   Variants change layout/styling/behavior — not wrapper geometry.
   See STYLESHEET_GUIDE.md for the full wrapper pattern.

   This section replaces a separate branding.css file.
   Keep it organized with clear sub-section comments.
   ──────────────────────────────────────────────────────────

   EXAMPLE — project token override (paste into §2 or here):

   :root {
       --color-primary:        #YOUR_COLOR;
       --color-secondary:      #YOUR_COLOR;
       --color-accent:         #YOUR_COLOR;
       --color-accent-hover:   #YOUR_COLOR;
       --color-bg:             #YOUR_COLOR;
       --color-bg-dark:        #YOUR_COLOR;
       --font-body:            'Your Font', sans-serif;
       --font-heading:         'Your Font', sans-serif;
   }

   ──────────────────────────────────────────────────────────
   Add your project styles below:
   ──────────────────────────────────────────────────────────
*/

/* ── 10a. Wrapper / Section Layout ──────────────────────────
   Block outer sections own background, full-width behavior,
   and vertical spacing. Variant and style classes go on the
   outer section element. .wrapper (§5a) owns max-width,
   margin auto, and horizontal page padding. Block-specific
   wrapper classes own only block-specific layout — not
   max-width or padding redeclarations. Always use both
   wrapper classes together: class="wrapper block_name_wrapper"
   Variants change layout/styling/behavior — not wrapper
   geometry — unless documented as an exception.              */

/* ── 10b. Shared Buttons ────────────────────────────────────
   Primary / secondary CTA button pair used by Hero and CTA Banner.
   Both blocks use identical styling — defined once here.
   Responsive width overrides (full-width on mobile) stay in
   each block's own CSS file since they depend on block layout. */

.hero_cta_primary,
.cta_btn_primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_primary:hover,
.cta_btn_primary:hover {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-white);
    text-decoration: none;
}

/* Secondary — outline style on dark background */
.hero_cta_secondary,
.cta_btn_secondary {
    background-color: transparent;
    border: 2px solid var(--color-white);
    color: var(--color-white);
    padding: var(--space-4) var(--space-8);
    font-size: var(--text-base);
}

.hero_cta_secondary:hover,
.cta_btn_secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    text-decoration: none;
}

/* ── 10c. Shared Eyebrow / Pill Labels ─────────────────────
   Structural eyebrow pattern used by Hero, CTA Banner, and FCS.
   All structural properties are shared: font-family, size,
   weight, case, letter-spacing, and margin.
   Color differs by background context — overridden per block:
   - Dark background (Hero, CTA Banner): color-text-inverse + opacity
   - Light background (FCS): color-accent, no opacity
   Color overrides live in each block's own CSS file.         */

.hero_subheading,
.cta_eyebrow,
.fcs_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin-bottom: var(--space-3);
}

/* Label look: Rounded tag (Batch 8H, BATCH_8_PLAN.md §28).
   Optional pill treatment for a block's small label, added only when the
   editor picks Label look → Rounded tag (Plain text, the default, adds no
   class). Built from the label's own color (currentColor) and tokens, so it
   reads on light and dark backgrounds with no per-site colors. The first
   border line is the fallback for browsers without color-mix().
   Each block below ships the same rule in its own CSS (BOILERPLATE NOTE) so
   it works when copied alone (Timeline also uses it for its Date look,
   §29). Contact / Form, Services Core and Zone Band already have their
   own rounded tags and do not use this rule. */
.hero_subheading.hero_label_pill,
.fcs_eyebrow.fcs_label_pill,
.ba_eyebrow.ba_label_pill,
.sv_header_label.sv_label_pill,
.ig_header_label.ig_label_pill,
.lg_label.lg_label_pill,
.timeline_eyebrow.timeline_label_pill,
.timeline_period.timeline_date_pill,
.custom_accordion_label.custom_accordion_label_pill,
.special_callout_label.special_callout_label_pill,
.cta_eyebrow.cta_label_pill,
.event_block_label.event_block_label_pill,
.gallery_label.gallery_label_pill,
.options_list_label.options_list_label_pill,
.custom_profiles_label.custom_profiles_label_pill,
.program_block_label.program_block_label_pill,
.testimonials_label.testimonials_label_pill,
.video_label.video_label_pill,
.visit_label.visit_label_pill {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid currentColor;
    border: 1px solid color-mix(in srgb, currentColor 35%, transparent);
    border-radius: var(--radius-full);
    background-color: color-mix(in srgb, currentColor 8%, transparent);
    line-height: var(--leading-tight);
}

/* ── 10d. Shared Title Plate Patterns ──────────────────────
   Repeated headline treatment or title plate structure used
   across multiple sections. Define once here.               */

/* ── 10e. Shared Gradient / Accent Lines ───────────────────
   Repeated gradient underlines, accent borders, or decorative
   heading lines. Define once here as opt-in classes.        */

/* ── 10f. Shared Glass / Card Panels ───────────────────────
   (The corner triangle decoration that used to live here — on Event,
   Page Cards and Document & Details cards — was removed by Matt's
   decision, BATCH_8_PLAN.md §40. Its shared selectors also wrongly
   targeted the Event and Document sections, drawing a stray triangle.)
   Card panel styles (background, radius, shadow) differ per block and
   live in each block's own CSS file.                        */

/* ── 10g. Header ────────────────────────────────────────────
   Project-specific header brand styles. Base nav styles live
   in ~common_features/ada_responsive_nav/style.css.         */

/* ── 10h. Footer ────────────────────────────────────────────
   Project-specific footer brand styles.                     */

/* ── 10i. Contact Drawer / Global Overlays ─────────────────
   Full drawer system. JS only toggles .is_open and hidden —
   all positioning, animation, and layout is CSS.

   data-position values on .contact_drawer:
     right  — slides in from the right (default)
     left   — slides in from the left
     bottom — slides up from the bottom, 70vh max
     modal  — centered overlay, scale-in animation

   To change position on a project: update data-position="..."
   in footer-html.php. No JS or CSS changes needed.         */

/* Hidden guard — prevents display override on success/error states */
.contact_drawer_panel [hidden] {
    display: none !important;
}

/* ── Overlay (all positions) */
.contact_drawer {
    position: fixed;
    inset: 0;
    z-index: 9000;
    pointer-events: none;
}

.contact_drawer.is_open {
    pointer-events: auto;
}

.contact_drawer_overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact_drawer.is_open .contact_drawer_overlay {
    opacity: 1;
}

/* ── Panel base */
.contact_drawer_panel {
    position: absolute;
    background: var(--color-bg);
    overflow-y: auto;
    transition: transform 0.3s ease, opacity 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding: var(--space-8);
    box-shadow: var(--shadow-lg);
}

/* ── Position: right (default) */
.contact_drawer[data-position="right"] .contact_drawer_panel {
    top: 0;
    right: 0;
    bottom: 0;
    left: auto;
    width: 420px;
    max-width: 90vw;
    border-radius: var(--radius-xl) 0 0 var(--radius-xl);
    transform: translateX(100%);
}

.contact_drawer[data-position="right"].is_open .contact_drawer_panel {
    transform: translateX(0);
}

/* ── Position: left */
.contact_drawer[data-position="left"] .contact_drawer_panel {
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 420px;
    max-width: 90vw;
    border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
    transform: translateX(-100%);
}

.contact_drawer[data-position="left"].is_open .contact_drawer_panel {
    transform: translateX(0);
}

/* ── Position: bottom */
.contact_drawer[data-position="bottom"] .contact_drawer_panel {
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    width: 100%;
    max-height: 70vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(100%);
}

.contact_drawer[data-position="bottom"].is_open .contact_drawer_panel {
    transform: translateY(0);
}

/* ── Position: modal */
.contact_drawer[data-position="modal"] .contact_drawer_panel {
    top: 50%;
    left: 50%;
    right: auto;
    bottom: auto;
    width: 540px;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: var(--radius-xl);
    transform: translate(-50%, -50%) scale(0.95);
    opacity: 0;
}

.contact_drawer[data-position="modal"].is_open .contact_drawer_panel {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* ── Close button */
.contact_drawer_close {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    background: var(--color-bg-alt);
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    font-size: var(--text-sm);
    flex-shrink: 0;
}

.contact_drawer_close:hover {
    background: var(--color-border);
    color: var(--color-primary);
}

/* ── Header */
.contact_drawer_header {
    padding-right: var(--space-8);
}

.contact_drawer_eyebrow {
    font-family: var(--font-accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-accent);
    margin: 0 0 var(--space-2) 0;
}

.contact_drawer_title {
    font-size: var(--text-2xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-2) 0;
    line-height: var(--leading-tight);
}

.contact_drawer_intro {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: 0;
}

/* ── Drawer form fields */
.contact_drawer_form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.drawer_form_hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.drawer_form_field {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.drawer_form_field label {
    font-size: var(--text-sm);
    font-weight: var(--weight-semi);
    color: var(--color-secondary);
}

.drawer_form_required {
    color: var(--color-accent);
    margin-left: 2px;
}

.contact_drawer_form input[type="text"],
.contact_drawer_form input[type="email"],
.contact_drawer_form textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.contact_drawer_form input:focus,
.contact_drawer_form textarea:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.contact_drawer_form textarea {
    resize: vertical;
    min-height: 100px;
}

.drawer_field_error_msg {
    font-size: var(--text-xs);
    color: var(--color-error);
    min-height: 1rem;
}

.drawer_form_error {
    padding: var(--space-3) var(--space-4);
    border: 1px solid currentColor;
    border-radius: var(--radius-md);
    color: var(--color-error);
    font-size: var(--text-sm);
    background: color-mix(in srgb, var(--color-error) 8%, transparent);
}

.contact_drawer_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3) var(--space-8);
    background: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-white, #fff);
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: var(--weight-semi);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
    width: 100%;
}

.contact_drawer_submit:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.contact_drawer_submit:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Success state */
.drawer_form_success {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    min-height: 160px;
}

.drawer_form_success_heading {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-primary);
    margin: 0;
}

.drawer_form_success p {
    color: var(--color-text-muted);
    margin: 0;
}

/* ── Trigger button — floats near scroll-to-top, restyle per project */
.contact_drawer_trigger {
    position: fixed;
    bottom: calc(var(--space-6) + 3rem + var(--space-3));
    right: var(--space-6);
    z-index: 8999;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
    border: none;
    color: var(--color-white, #fff);
    font-size: var(--text-lg);
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: background 0.2s ease, transform 0.2s ease;
}

.contact_drawer_trigger:hover {
    background: var(--color-accent-hover);
    transform: scale(1.05);
}

/* Prevent body scroll when drawer is open */
body.contact_drawer_open {
    overflow: hidden;
}

/* ── 10j. Small Utilities ───────────────────────────────────
   Project-level utility classes not covered by §8.          */

/* ── 10k. Footer Bookend CTA — main bottom margin ──────────
   Use when a full-bleed CTA block variant is designed to sit
   flush against the footer (no gap between block and footer).
   Two issues cause unwanted gaps:
     1. main has margin-bottom: var(--space-16) by default
     2. WordPress may inject an empty <p> after the final block

   Copy this template into your project's §10 and replace
   [your-variant-name] with your actual variant name
   (e.g. footer-bookend).

   main:has(.cta_banner_variant_[your-variant-name]) {
       margin-bottom: 0;
   }

   .cta_banner_variant_[your-variant-name] + p:empty,
   .cta_banner_variant_[your-variant-name] + .wp-block-paragraph:empty,
   main > p.wp-block-paragraph:empty {
       display: none;
       margin: 0;
   }

   The main > p.wp-block-paragraph:empty rule is safe to
   include permanently — it only hides genuinely empty
   editor paragraphs regardless of which block precedes them.

   This pattern applies to any block used as a footer bookend
   — not just CTA Banner. Adjust the selector to match.       */


/* ==========================================================
   §12. ACCESSIBILITY / ADA ENHANCEMENTS
   ==========================================================
   Global :focus-visible rules and prefers-reduced-motion.

   NOT in this section:
   - Nav focus styles      → ~common_features/ada_responsive_nav/style.css
   - Form input :focus     → §6c (buttons + forms)
   This section covers all other interactive elements.
   ========================================================== */

/* ── 12a. Focus Visible ─────────────────────────────────────
   Uses var(--color-accent) so the outline automatically
   inherits the project token — no per-project override needed.
   ─────────────────────────────────────────────────────────── */
.btn:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
[role="button"]:focus-visible,
#top:focus-visible,
.footer-nav a:focus-visible,
.contact_drawer_trigger:focus-visible,
.contact_drawer_close:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

/* Site header and footer (CODE-065): the outline is drawn on the
   header/footer background, so it follows their text colour (white on the
   default dark header/footer, 17.4:1) instead of the brand colour (2.63:1).
   With a colour saved, --hf-text is that colour's text (as .hf_surface does).
   Sub-menu panels have their own background, so their links use
   --hf-sub-text. The Landing Page template's own header/footer keep §12a. */
body > header:not(.landing-header) :is(a, button):focus-visible,
body > footer:not(.landing-footer) :is(a, button):focus-visible {
    outline: 2px solid var(--hf-text, var(--color-text-inverse));
    outline-offset: 3px;
}

body > header:not(.landing-header) .sub_nav a:focus-visible {
    outline-color: var(--hf-sub-text, var(--color-text-inverse));
}

/* Floating buttons (back-to-top, contact pop-out) sit over whatever section
   scrolls behind them, so their ring has two colours: dark against the
   white inner gap and white outside it, visible on light, dark and brand
   backgrounds alike (CODE-065). */
#top:focus-visible,
body > footer .contact_drawer_trigger:focus-visible {
    outline: 3px solid var(--color-bg-dark);
    outline-offset: 2px;
    box-shadow: 0 0 0 7px var(--color-white);
}

/* ── 12b. Prefers Reduced Motion ────────────────────────────
   Collapses all CSS animation/transition durations to
   near-instant. JavaScript also reads
   window.matchMedia('prefers-reduced-motion: reduce') to
   skip setTimeout delays — see js/scripts.js.
   ─────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}