/*
 Theme Name:  MunicipalGIS Dark
 Theme URI:   https://github.com/TrueNorthSolutions/MunicipalGIS
 Description: Dark theme for the MunicipalGIS marketing site. Mirrors the visual
              identity of the GIS web application — deep navy backgrounds,
              blue-gradient accents, and muted light text — while keeping all
              typography settings from the standard MunicipalGIS theme.
 Version:     1.1.0
 Author:      TrueNorth Solutions
 Author URI:  https://truenorthsolutions.ca
 License:     GNU General Public License v2 or later
 License URI: https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain: municipalgis
 Tags:        municipal, government, gis, dark, accessibility, responsive
*/

/* ── CSS Custom Properties (Design Tokens) ─────────────────────────────────── */
:root {
    /* ── Brand colours — mapped from GIS frontend theme.ts palette ─── */
    --clr-primary:        #2e86c1;   /* GIS gradEnd    — primary interactive blue  */
    --clr-primary-dark:   #1a5276;   /* GIS gradStart  — darker blue / gradients   */
    --clr-primary-light:  #0f2033;   /* GIS bgHover    — hover / selected surfaces */
    --clr-accent:         #4fc3f7;   /* GIS textBlue   — highlight / link accent   */
    --clr-accent-dark:    #2e86c1;
    --clr-accent-light:   #1e3a4a;   /* GIS borderMid  — accent-tinted dividers    */

    /* ── Dark background system — matches GIS app layers ─────────────── */
    --clr-bg:             #0a1520;   /* GIS bgDeep  — page / base background       */
    --clr-surface:        #0d1b2a;   /* GIS bgRow   — card / panel surfaces        */
    --clr-border:         #1e3a4a;   /* GIS borderMid                               */
    --clr-border-dark:    #131f2b;   /* GIS borderDark — subtle nested dividers    */
    --clr-text:           #e0e0e0;   /* GIS textPrimary                             */
    --clr-text-muted:     #c8dce8;   /* GIS textMuted                               */
    --clr-white:          #ffffff;

    /* ── Typography — unchanged from standard theme ───────────────────── */
    --font-sans:   "Inter", system-ui, -apple-system, sans-serif;
    --font-mono:   "Ubuntu Mono", monospace;
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   1.875rem;
    --text-4xl:   2.25rem;
    --text-5xl:   3rem;

    /* ── Spacing — unchanged ──────────────────────────────────────────── */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-6:  1.5rem;
    --space-8:  2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --space-24: 6rem;

    /* ── Layout — unchanged ──────────────────────────────────────────── */
    --container-max: 1200px;
    --radius-sm:  0.25rem;
    --radius-md:  0.5rem;
    --radius-lg:  1rem;

    /* ── Shadows — deepened for dark backgrounds ─────────────────────── */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.4);
    --shadow-md:  0 4px 8px rgba(0,0,0,.5), 0 2px 4px rgba(0,0,0,.4);
    --shadow-lg:  0 10px 20px rgba(0,0,0,.5), 0 4px 8px rgba(0,0,0,.35);

    /* ── Transitions — unchanged ─────────────────────────────────────── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;

    /* ── GIS app gradient (used across title bars + hero) ────────────── */
    --gis-gradient: linear-gradient(90deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
    --gis-gradient-diag: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 100%);
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    line-height: 1.7;
    color:       var(--clr-text);
    background:  var(--clr-bg);
    -webkit-font-smoothing: antialiased;
}

/* Global scrollbar — mirrors GIS app */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--clr-bg); }
::-webkit-scrollbar-thumb { background: var(--clr-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--clr-accent); }
* { scrollbar-width: thin; scrollbar-color: var(--clr-primary) var(--clr-bg); }

/* Selection highlight */
::selection { background: rgba(46,134,193,.35); color: var(--clr-white); }

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

a {
    color:           var(--clr-accent);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition:      color var(--transition-fast);
}
a:hover { color: var(--clr-white); text-decoration-color: var(--clr-primary); }

/* ── Skip Link (accessibility) ─────────────────────────────────────────────── */
.skip-link {
    position:   absolute;
    top:        -3rem;
    left:       var(--space-4);
    padding:    var(--space-2) var(--space-4);
    background: var(--gis-gradient);
    color:      var(--clr-white);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight:   700;
    z-index:    9999;
    transition: top var(--transition-fast);
}
.skip-link:focus { top: 0; }

/* ── Layout containers ─────────────────────────────────────────────────────── */
.container {
    width:     100%;
    max-width: var(--container-max);
    margin:    0 auto;
    padding:   0 var(--space-6);
}

/* ── Site Header ───────────────────────────────────────────────────────────── */
.site-header {
    position:   sticky;
    top:        0;
    z-index:    100;
    background: rgba(10, 21, 32, 0.96);  /* bgDeep with slight transparency */
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 2px 8px rgba(0,0,0,.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.site-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    height:          4rem;
    gap:             var(--space-6);
}

.site-logo {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    text-decoration: none;
}
.site-logo__mark {
    width:  2.5rem;
    height: 2.5rem;
    background: var(--gis-gradient);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-weight: 800;
    font-size: var(--text-sm);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}
.site-logo__text {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--clr-text);
    line-height: 1.2;
}
.site-logo__text span { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--clr-text-muted); }

/* ── Primary Navigation ─────────────────────────────────────────────────────── */
.primary-nav { display: flex; }
.primary-nav ul {
    list-style: none;
    display:    flex;
    gap:        var(--space-1);
}
.primary-nav a {
    display:     block;
    padding:     var(--space-2) var(--space-3);
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--clr-text-muted);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition:  background var(--transition-fast), color var(--transition-fast);
    border: 1px solid transparent;
}
.primary-nav a:hover,
.primary-nav .current-menu-item > a {
    background: var(--clr-primary-light);
    color:      var(--clr-accent);
    border-color: var(--clr-border);
    text-decoration: none;
}

.nav-cta {
    background:   var(--gis-gradient) !important;
    color:        var(--clr-white)    !important;
    border-radius: var(--radius-md)   !important;
    border-color: transparent         !important;
}
.nav-cta:hover {
    background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%) !important;
    color: var(--clr-white) !important;
}

/* Hamburger (mobile) */
.nav-toggle {
    display:    none;
    background: none;
    border:     1px solid var(--clr-border);
    cursor:     pointer;
    padding:    var(--space-2);
    color:      var(--clr-text-muted);
    border-radius: var(--radius-sm);
    transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}
.nav-toggle:hover { color: var(--clr-white); background: var(--clr-primary-light); border-color: var(--clr-primary); }

/* ── Header Right Group ─────────────────────────────────────────────────────── */
.header-right {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
}

.header-login-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-2);
    padding:         var(--space-2) var(--space-4);
    background:      var(--gis-gradient);
    color:           var(--clr-white);
    font-size:       var(--text-sm);
    font-weight:     600;
    border-radius:   var(--radius-md);
    text-decoration: none;
    white-space:     nowrap;
    flex-shrink:     0;
    transition:      opacity var(--transition-fast);
}
.header-login-btn:hover { opacity: 0.85; color: var(--clr-white); }

/* ── Hero Section ───────────────────────────────────────────────────────────── */
.hero {
    padding:    var(--space-24) 0;
    background: linear-gradient(135deg, #060e18 0%, var(--clr-primary-dark) 55%, var(--clr-primary) 100%);
    color:      var(--clr-white);
    position:   relative;
    overflow:   hidden;
}
.hero::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
/* Subtle bottom-edge gradient dissolve into page bg */
.hero::after {
    content:  "";
    position: absolute;
    bottom:   0;
    left:     0;
    right:    0;
    height:   80px;
    background: linear-gradient(to bottom, transparent, var(--clr-bg));
    pointer-events: none;
}

.hero__inner {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: center;
    position:    relative;
    z-index:     1;
}
.hero__badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-1) var(--space-3);
    background:    rgba(79,195,247,.15);
    border:        1px solid rgba(79,195,247,.3);
    border-radius: var(--radius-lg);
    font-size:     var(--text-xs);
    font-weight:   600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-4);
}
.hero__title {
    font-size:   var(--text-5xl);
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: var(--space-6);
    color:       var(--clr-white);
}
.hero__title span { color: var(--clr-accent); }
.hero__lead {
    font-size:    var(--text-lg);
    line-height:  1.8;
    opacity:      0.85;
    color:        rgba(255,255,255,.85);
    margin-bottom: var(--space-8);
}
.hero__actions { display: flex; gap: var(--space-4); flex-wrap: wrap; }

.hero__visual {
    background:   rgba(79,195,247,.05);
    border:       1px solid rgba(79,195,247,.2);
    border-radius: var(--radius-lg);
    aspect-ratio: 4/3;
    display:      flex;
    flex-direction: column;
    align-items:  center;
    justify-content: center;
    gap:          var(--space-3);
    color:        rgba(79,195,247,.5);
    font-size:    var(--text-sm);
    box-shadow:   0 0 40px rgba(46,134,193,.15) inset;
}
.hero__visual svg { opacity: 0.5; }

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-2);
    padding:       var(--space-3) var(--space-6);
    border-radius: var(--radius-md);
    font-size:     var(--text-base);
    font-weight:   600;
    text-decoration: none;
    border:        2px solid transparent;
    cursor:        pointer;
    transition:    all var(--transition-fast);
    white-space:   nowrap;
}
/* Primary — white / very light on dark hero gradient */
.btn-primary {
    background: var(--clr-white);
    color:      var(--clr-primary-dark);
}
.btn-primary:hover { background: #cce4f7; color: var(--clr-primary-dark); text-decoration: none; }

/* Outline — used on hero dark background */
.btn-outline {
    background:   transparent;
    color:        var(--clr-white);
    border-color: rgba(255,255,255,.45);
}
.btn-outline:hover { background: rgba(255,255,255,.1); border-color: var(--clr-white); text-decoration: none; }

/* Solid — used inline in content areas */
.btn-solid {
    background: var(--gis-gradient);
    color:      var(--clr-white);
    border:     none;
}
.btn-solid:hover { background: linear-gradient(90deg, var(--clr-primary) 0%, var(--clr-accent) 100%); text-decoration: none; }

/* ── Feature / Stats strip ─────────────────────────────────────────────────── */
.stats-strip {
    background:    var(--clr-surface);
    border-top:    1px solid var(--clr-border);
    border-bottom: 1px solid var(--clr-border);
    padding:       var(--space-8) 0;
}
.stats-strip__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-8);
    text-align:            center;
    max-width:             760px;
    margin-inline:         auto;
}
.stat__number {
    font-size:   var(--text-4xl);
    font-weight: 800;
    color:       var(--clr-accent);
    line-height: 1;
    margin-bottom: var(--space-1);
    letter-spacing: -0.02em;
}
.stat__label {
    font-size:  var(--text-sm);
    color:      var(--clr-text-muted);
    font-weight: 500;
}

/* ── Section generic ───────────────────────────────────────────────────────── */
.section {
    padding: var(--space-20) 0;
}
.section--alt { background: var(--clr-surface); }

.section__header {
    text-align:    center;
    max-width:     640px;
    margin:        0 auto var(--space-12);
}
.section__eyebrow {
    display:       inline-block;
    font-size:     var(--text-xs);
    font-weight:   700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:         var(--clr-accent);
    margin-bottom: var(--space-3);
}
.section__title {
    font-size:     var(--text-3xl);
    font-weight:   800;
    line-height:   1.2;
    color:         var(--clr-text);
    margin-bottom: var(--space-4);
}
.section__lead {
    font-size:  var(--text-lg);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── Feature cards ─────────────────────────────────────────────────────────── */
.features-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-6);
}
.feature-card {
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-8);
    transition:    box-shadow var(--transition-normal), transform var(--transition-normal), border-color var(--transition-normal);
}
.feature-card:hover {
    box-shadow:   0 0 0 1px var(--clr-primary), var(--shadow-lg);
    transform:    translateY(-2px);
    border-color: var(--clr-primary);
}
.feature-card__icon {
    width:         3rem;
    height:        3rem;
    background:    rgba(46,134,193,.15);
    border:        1px solid rgba(46,134,193,.2);
    border-radius: var(--radius-md);
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--space-4);
    color:         var(--clr-accent);
}
.feature-card__title {
    font-size:     var(--text-xl);
    font-weight:   700;
    color:         var(--clr-text);
    margin-bottom: var(--space-2);
}
.feature-card__body {
    font-size:  var(--text-base);
    color:      var(--clr-text-muted);
    line-height: 1.7;
}

/* ── CTA Band — blue gradient matching GIS hero ──────────────────────────────── */
.cta-band {
    background: var(--gis-gradient-diag);
    color:      var(--clr-white);
    padding:    var(--space-20) 0;
    text-align: center;
    position:   relative;
    overflow:   hidden;
}
.cta-band::before {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.cta-band__title {
    font-size:     var(--text-4xl);
    font-weight:   800;
    margin-bottom: var(--space-4);
    position:      relative;
    z-index:       1;
}
.cta-band__body {
    font-size:     var(--text-lg);
    opacity:       .9;
    max-width:     600px;
    margin:        0 auto var(--space-8);
    position:      relative;
    z-index:       1;
}
.cta-band .btn-primary {
    position: relative;
    z-index:  1;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
    background:   #060e18;   /* deeper than bgDeep for visual separation */
    color:        rgba(200,220,232,.7);
    padding:      var(--space-16) 0 var(--space-8);
    border-top:   1px solid var(--clr-border);
}
.site-footer__grid {
    display:               grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap:                   var(--space-12);
    margin-bottom:         var(--space-12);
}
.footer-brand__desc {
    font-size:     var(--text-sm);
    line-height:   1.8;
    margin-top:    var(--space-4);
    margin-bottom: var(--space-6);
    color:         rgba(200,220,232,.6);
}
.footer-widget__title {
    font-size:      var(--text-sm);
    font-weight:    700;
    color:          var(--clr-white);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom:  var(--space-4);
}
.footer-widget ul { list-style: none; }
.footer-widget li { margin-bottom: var(--space-2); }
.footer-widget a {
    font-size:       var(--text-sm);
    color:           rgba(200,220,232,.55);
    text-decoration: none;
    transition:      color var(--transition-fast);
}
.footer-widget a:hover { color: var(--clr-accent); }

.site-footer__bottom {
    border-top:  1px solid rgba(79,195,247,.1);
    padding-top: var(--space-8);
    display:     flex;
    align-items: center;
    justify-content: space-between;
    font-size:   var(--text-sm);
    color:       rgba(200,220,232,.4);
    flex-wrap:   wrap;
    gap:         var(--space-4);
}
.footer-legal { display: flex; gap: var(--space-4); }
.footer-legal a { color: rgba(200,220,232,.4); text-decoration: none; }
.footer-legal a:hover { color: var(--clr-accent); }

/* ── Page / Post content ──────────────────────────────────────────────────── */
.page-header {
    background: var(--gis-gradient-diag);
    color:      var(--clr-white);
    padding:    var(--space-16) 0;
    position:   relative;
    overflow:   hidden;
}
.page-header::after {
    content:  "";
    position: absolute;
    inset:    0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%234fc3f7' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}
.page-header__title {
    font-size:   var(--text-4xl);
    font-weight: 800;
    position:    relative;
    z-index:     1;
    color:       var(--clr-white);
}

.content-area {
    padding: var(--space-16) 0;
}
.entry-content { max-width: 720px; }
.entry-content h1, .entry-content h2, .entry-content h3,
.entry-content h4, .entry-content h5, .entry-content h6 {
    font-weight: 700;
    line-height: 1.3;
    margin-top:  var(--space-8);
    margin-bottom: var(--space-3);
    color: var(--clr-text);
}
.entry-content h2 { color: var(--clr-accent); }
.entry-content p { margin-bottom: var(--space-4); color: var(--clr-text-muted); }
.entry-content ul, .entry-content ol { margin-bottom: var(--space-4); padding-left: var(--space-6); color: var(--clr-text-muted); }
.entry-content li { margin-bottom: var(--space-2); }
.entry-content a { color: var(--clr-accent); }
.entry-content a:hover { color: var(--clr-white); }
.entry-content blockquote {
    border-left:   3px solid var(--clr-primary);
    padding-left:  var(--space-6);
    margin:        var(--space-6) 0;
    color:         var(--clr-text-muted);
    font-style:    italic;
    background:    var(--clr-surface);
    padding-top:   var(--space-3);
    padding-bottom: var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.entry-content code {
    font-family:  var(--font-mono);
    font-size:    var(--text-sm);
    background:   var(--clr-surface);
    border:       1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    padding:      0.1em 0.4em;
    color:        var(--clr-accent);
}
.entry-content pre {
    background:    #060e18;
    color:         var(--clr-text);
    border:        1px solid var(--clr-border);
    border-radius: var(--radius-md);
    padding:       var(--space-6);
    overflow-x:    auto;
    margin-bottom: var(--space-4);
}
.entry-content pre code { background: none; border: none; padding: 0; color: var(--clr-text-muted); }

/* Post meta / entry header */
.entry-header { margin-bottom: var(--space-4); }
.entry-title, .entry-title a { color: var(--clr-text); text-decoration: none; }
.entry-title a:hover { color: var(--clr-accent); }

/* Pagination */
.entry-pagination .page-numbers {
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-4);
}
.page-numbers a, .page-numbers span {
    padding:       var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size:     var(--text-sm);
    font-weight:   500;
    color:         var(--clr-text-muted);
    background:    var(--clr-surface);
    border:        1px solid var(--clr-border);
    text-decoration: none;
    transition:    all var(--transition-fast);
}
.page-numbers a:hover  { background: var(--clr-primary-light); color: var(--clr-accent); border-color: var(--clr-primary); }
.page-numbers .current { background: var(--gis-gradient); color: var(--clr-white); border-color: transparent; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__visual { display: none; }
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .hero        { padding: var(--space-16) 0; }
    .hero__title { font-size: var(--text-3xl); }
    .features-grid     { grid-template-columns: 1fr; }
    .stats-strip__grid { grid-template-columns: repeat(2, 1fr); }
    .site-footer__grid { grid-template-columns: 1fr; }
    .site-footer__bottom { flex-direction: column; text-align: center; }

    /* Mobile nav */
    .primary-nav {
        display:        none;
        position:       fixed;
        inset:          4rem 0 0;
        background:     rgba(10, 21, 32, 0.98);
        flex-direction: column;
        padding:        var(--space-6);
        border-top:     1px solid var(--clr-border);
        overflow-y:     auto;
        z-index:        99;
        backdrop-filter: blur(8px);
    }
    .primary-nav.is-open { display: flex; }
    .primary-nav ul { flex-direction: column; gap: var(--space-1); }
    .primary-nav a { font-size: var(--text-base); padding: var(--space-3); }
    .nav-toggle { display: block; }
}

/* ── WordPress native blocks compatibility ───────────────────────────────── */
.wp-block-image { margin: var(--space-6) 0; }
.wp-block-image img { border-radius: var(--radius-md); }
.wp-block-quote {
    border-left: 3px solid var(--clr-primary);
    padding-left: var(--space-6);
    padding-top: var(--space-3);
    padding-bottom: var(--space-3);
    margin: var(--space-6) 0;
    font-style: italic;
    color: var(--clr-text-muted);
    background: var(--clr-surface);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.wp-block-separator { border-color: var(--clr-border); margin: var(--space-8) 0; }
.wp-block-code {
    background: #060e18;
    border:     1px solid var(--clr-border);
    border-radius: var(--radius-md);
    color: var(--clr-text-muted);
}
.wp-block-table   { color: var(--clr-text); }
.wp-block-table td, .wp-block-table th {
    border-color: var(--clr-border);
    padding: var(--space-2) var(--space-3);
}
.wp-block-table th { background: var(--clr-surface); color: var(--clr-accent); font-weight: 700; }
.wp-block-table tr:nth-child(even) td { background: rgba(13,27,42,.5); }

/* Block editor styles */
.wp-block-button__link {
    background: var(--gis-gradient);
    color: var(--clr-white) !important;
    border-radius: var(--radius-md) !important;
}
.wp-block-button__link:hover { opacity: 0.9; }
.is-style-outline .wp-block-button__link {
    background: transparent;
    border: 2px solid var(--clr-primary) !important;
    color: var(--clr-accent) !important;
}

/* Forms */
input[type="text"], input[type="email"], input[type="search"],
input[type="url"], input[type="tel"], textarea, select {
    background:  var(--clr-surface);
    border:      1px solid var(--clr-border);
    border-radius: var(--radius-sm);
    color:       var(--clr-text);
    padding:     var(--space-2) var(--space-3);
    font-family: var(--font-sans);
    font-size:   var(--text-base);
    width:       100%;
    transition:  border-color var(--transition-fast), box-shadow var(--transition-fast);
    outline:     none;
}
input:focus, textarea:focus, select:focus {
    border-color: var(--clr-primary);
    box-shadow:   0 0 0 3px rgba(46,134,193,.2);
}

/* ── Accessibility ──────────────────────────────────────────────────────────── */
:focus-visible {
    outline:        2px solid var(--clr-accent);
    outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
    html { scroll-behavior: auto; }
}