/*
 * ╔══════════════════════════════════════════════════════════════════╗
 * ║  METRIQ.ONE — GLOBAL DESIGN SYSTEM                              ║
 * ║  Version: 2.0 — Emerald Scale (refactoring prompt spec)         ║
 * ║  Prepend this block to style.css (before all other rules).      ║
 * ║  DO NOT modify colour values here. Changes go via the           ║
 * ║  refactoring prompt and must be applied in full.                ║
 * ╚══════════════════════════════════════════════════════════════════╝
 *
 * PALETTE LEGEND (emerald 32-shade scale, locked)
 * ──────────────────────────────────────────────
 * Page background      : #0a0f0a           (em-bg-3)
 * Nav bar surface      : #124040–#007056   (em-5–em-6)
 * Body text            : #3ED2B8–#50C878   (em-20–em-22) — bright teal-emerald
 * Headings / titles    : #82FBC4–#96FFD2   (em-27–em-29)
 * Links / hover        : #8AFEC8–#96FFD2   (em-28–em-29)
 * Primary CTA bg       : #FFBF00           (amber)
 * Primary CTA text     : #0a0f0a           (on amber)
 * Secondary button     : #C0C0C0           (silver)
 * Borders / dividers   : #124020–#1a6130   (em-5–em-9)
 * Icons / micro-UI     : #C0C0C0           (silver)
 * Alert / warning      : #FF4C4C           (red)
 * Metric / dashboard   : #82FBC4–#96FFD2   (em-27–em-29)
 *
 * TYPOGRAPHY (locked)
 * ──────────────────
 * H1  32px 700 #96FFD2   H2  24px 600 #96FFD2   H3  20px 500 #96FFD2
 * Body  16px 400 #50C878  Links  16px 500 #8AFEC8
 * Node metric  36–48px 700 #82FBC4
 * CTA text  16px 700 #0a0f0a on #FFBF00
 * Secondary btn  14px 500 #C0C0C0
 * Micro-label  12px 400 #C0C0C0
 *
 * SEMANTIC ROLES — LOGGED ADDITIONS
 * ─────────────────────────────────
 * 2026-06-19  --mq-text-bright (em-32, #E0FFF0)
 *             Prose-in-card emphasis: author notes, citation boxes,
 *             callouts. Existing locked palette value, no new colour.
 *             Pending entry in Logic Library.
 *
 * REFUSAL RULE
 * ────────────
 * Any colour, role, font, or UI element not present in this map
 * must NOT be added without updating this file first and logging
 * the change in the Logic Library. Default to the nearest compliant value.
 */

/* ════════════════════════════════════════════════════════════════
   ANTI-FLASH — applied by mq_anti_flash_script() via wp_body_open
   Prevents white flash when dark mode is the stored preference.
   ════════════════════════════════════════════════════════════════ */
/*
  The PHP hook in functions.php outputs this inline before first paint:
  <script>
    (function(){
      try {
        if (localStorage.getItem('mq-theme') === 'light')
          document.body.classList.add('mq-light');
      } catch(e){}
    })();
  </script>
*/

/* ════════════════════════════════════════════════════════════════
   DARK MODE — DEFAULT (all variables)
   ════════════════════════════════════════════════════════════════ */
:root {

  /* ── Emerald background scale ──────────────────────────────── */
  --mq-bg-0:       #000000;
  --mq-bg-1:       #050805;
  --mq-bg-2:       #090e09;
  --mq-bg-3:       #0a0f0a;   /* PAGE BACKGROUND — locked */
  --mq-bg-4:       #0d130d;
  --mq-bg-5:       #101610;
  --mq-bg-6:       #131a13;   /* card surface */
  --mq-bg-7:       #161e16;   /* elevated surface */

  /* ── Emerald colour scale (1–32) ───────────────────────────── */
  --mq-em-1:       #0a2010;
  --mq-em-2:       #0d2a15;
  --mq-em-3:       #0f3218;
  --mq-em-4:       #113a1c;
  --mq-em-5:       #124020;   /* nav bar low / border dark */
  --mq-em-6:       #124c24;   /* nav bar / logo primary */
  --mq-em-7:       #155228;
  --mq-em-8:       #175a2c;
  --mq-em-9:       #1a6130;   /* border light */
  --mq-em-10:      #1d6934;
  --mq-em-11:      #1d592c;   /* logo mid */
  --mq-em-12:      #22703a;
  --mq-em-13:      #267a40;
  --mq-em-14:      #2d8a4a;
  --mq-em-15:      #339955;
  --mq-em-16:      #3aaa60;
  --mq-em-17:      #42b86a;
  --mq-em-18:      #52c070;
  --mq-em-19:      #5ec472;
  --mq-em-20:      #3ED2B8;   /* BODY TEXT low */
  --mq-em-21:      #44D4BC;   /* BODY TEXT mid */
  --mq-em-22:      #50C878;   /* BODY TEXT high */
  --mq-em-23:      #55CA7A;
  --mq-em-24:      #60CE80;
  --mq-em-25:      #6CD488;
  --mq-em-26:      #76DA90;
  --mq-em-27:      #82FBC4;   /* HEADING / METRIC low */
  --mq-em-28:      #8AFEC8;   /* LINK colour */
  --mq-em-29:      #96FFD2;   /* HEADING high / LINK hover */
  --mq-em-30:      #AAFFD8;
  --mq-em-31:      #C0FFE0;
  --mq-em-32:      #E0FFF0;   /* near-white accent */

  /* ── Accent colours ────────────────────────────────────────── */
  --mq-amber:      #FFBF00;   /* PRIMARY CTA background */
  --mq-amber-dark: #CC9900;   /* CTA hover */
  --mq-silver:     #C0C0C0;   /* secondary buttons, icons, micro-UI */
  --mq-red:        #FF4C4C;   /* alerts / warnings — max 5% of elements */

  /* ── Semantic role assignments (locked) ────────────────────── */
  --mq-bg:                 var(--mq-bg-3);          /* page background */
  --mq-surface:            var(--mq-bg-6);           /* card / panel */
  --mq-surface-alt:        var(--mq-bg-7);           /* elevated card */
  --mq-nav-bg:             var(--mq-em-5);           /* navigation bar */
  --mq-nav-bg-hover:       var(--mq-em-6);
  --mq-border:             var(--mq-em-5);           /* default border */
  --mq-border-light:       var(--mq-em-9);           /* lighter divider */

  --mq-text:               var(--mq-em-21);          /* body text */
  --mq-text-muted:         var(--mq-em-20);          /* secondary / muted */
  --mq-text-dim:           #4a6a4a;                  /* dimmed / placeholder */
  --mq-text-bright:        var(--mq-em-32);          /* LOGGED 2026-06-19: prose-in-card emphasis (author notes, citation boxes). Existing locked palette value (em-32, "near-white accent") — no new colour introduced, semantic role only. Pending Logic Library entry. */

  --mq-heading:            var(--mq-em-29);          /* h1, h2, h3 */
  --mq-heading-mid:        var(--mq-em-27);          /* node metrics / kpi */

  --mq-link:               var(--mq-em-28);          /* link default */
  --mq-link-hover:         var(--mq-em-29);          /* link hover */

  --mq-btn-primary-bg:     var(--mq-amber);
  --mq-btn-primary-text:   #0a0f0a;        /* always dark on amber/green — never flips */
  --mq-btn-primary-hover:  var(--mq-amber-dark);
  --mq-btn-secondary-bg:   transparent;
  --mq-btn-secondary-text: var(--mq-silver);
  --mq-btn-secondary-border: var(--mq-silver);

  --mq-alert:              var(--mq-red);

  /* ── Compass decoration (header.php) ───────────────────────── */
  --mq-compass-stroke:     var(--mq-em-9);           /* #1a6130 */
  --mq-compass-opacity:    0.07;

  /* ── Noise overlay ─────────────────────────────────────────── */
  --mq-noise-opacity:      0.35;

  /* ── Typography scale ──────────────────────────────────────── */
  --mq-font-sans:    'DM Sans', 'Inter', 'Segoe UI', system-ui, sans-serif;
  --mq-font-serif:   'Cormorant Garamond', 'Merriweather', Georgia, serif;
  --mq-font-mono:    'DM Mono', 'JetBrains Mono', 'Fira Code', monospace;

  /* Locked type sizes */
  --mq-h1-size:    2rem;        /* 32px */
  --mq-h2-size:    1.5rem;      /* 24px */
  --mq-h3-size:    1.25rem;     /* 20px */
  --mq-body-size:  1rem;        /* 16px */
  --mq-small-size: 0.875rem;    /* 14px */
  --mq-micro-size: 0.75rem;     /* 12px */
  --mq-metric-min: 2.25rem;     /* 36px */
  --mq-metric-max: 3rem;        /* 48px */

  /* ── Layout ────────────────────────────────────────────────── */
  --mq-container-max: 1200px;
  --mq-radius:        4px;
  --mq-header-height: 64px;

  /* ── Transition ────────────────────────────────────────────── */
  --mq-transition: 0.2s ease;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — class 'mq-light' on <body>
   Semantic role variables only — no new colour roles created.
   Surface treatment inverted; all role assignments preserved.
   ════════════════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════════════════
   BASE RESET + GLOBAL
   ════════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
}

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

body {
  background-color: var(--mq-bg);
  color:            var(--mq-text);
  font-family:      var(--mq-font-sans);
  font-size:        var(--mq-body-size);
  font-weight:      400;
  line-height:      1.6;
  overflow-x:       hidden;
  transition:       background-color var(--mq-transition), color var(--mq-transition);
}

/* Noise overlay — fixed, decorative */
body::before {
  content:          '';
  position:         fixed;
  inset:            0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:   none;
  z-index:          0;
  opacity:          var(--mq-noise-opacity);
}

/* ════════════════════════════════════════════════════════════════
   COMPASS BACKGROUND DECORATION
   SVGs are output by header.php PHP block.
   ════════════════════════════════════════════════════════════════ */
.mq-bg-compass {
  position:       fixed;
  pointer-events: none;
  z-index:        0;
  opacity:        var(--mq-compass-opacity);
  transition:     opacity var(--mq-transition);
}
.mq-bg-compass--tr {
  top:    -80px;
  right:  -80px;
  width:  320px;
  height: 320px;
}
.mq-bg-compass--bl {
  bottom:    -80px;
  left:      -80px;
  width:     260px;
  height:    260px;
  transform: rotate(180deg);
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAPHY — locked to spec
   ════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  color:       var(--mq-heading);
  font-family: var(--mq-font-sans);
  line-height: 1.2;
  margin:      0 0 0.75em !important;
  transition:  color var(--mq-transition);
}
h1 { font-size: var(--mq-h1-size); font-weight: 700; }
h2 { font-size: var(--mq-h2-size); font-weight: 600; }
h3 { font-size: var(--mq-h3-size); font-weight: 500; }
h4 { font-size: 1.05rem;           font-weight: 600; }
h5 { font-size: 0.95rem;           font-weight: 600; }
h6 { font-size: 0.875rem;          font-weight: 600; }

p {
  margin:       0 0 1em;
  color:        var(--mq-text);
  transition:   color var(--mq-transition);
}

a {
  color:           var(--mq-link);
  font-weight:     500;
  text-decoration: none;
  transition:      color var(--mq-transition);
}
a:hover, a:focus {
  color:           var(--mq-link-hover);
  text-decoration: underline;
}

/* Node metrics / KPI numbers */
.mq-metric {
  font-size:   clamp(var(--mq-metric-min), 5vw, var(--mq-metric-max));
  font-weight: 700;
  color:       var(--mq-heading-mid);
  font-family: var(--mq-font-mono);
  line-height: 1;
}

/* Micro-UI labels */
.mq-label {
  font-size:      var(--mq-micro-size);
  font-weight:    400;
  color:          var(--mq-silver);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ════════════════════════════════════════════════════════════════
   BUTTONS — locked to spec
   ════════════════════════════════════════════════════════════════ */

/* PRIMARY — Amber bg, dark text */
.mq-btn,
.mq-btn-primary {
  display:         inline-block;
  font-family:     var(--mq-font-mono);
  font-size:       var(--mq-body-size);
  font-weight:     700;
  color:           var(--mq-btn-primary-text);
  background:      var(--mq-btn-primary-bg);
  border:          none;
  border-radius:   var(--mq-radius);
  padding:         0.75em 1.5em;
  text-decoration: none;
  cursor:          pointer;
  transition:      background var(--mq-transition), transform var(--mq-transition);
  letter-spacing:  0.03em;
}
.mq-btn:hover,
.mq-btn-primary:hover {
  background:  var(--mq-btn-primary-hover);
  transform:   translateY(-1px);
  color:       var(--mq-btn-primary-text);
}

/* SECONDARY — Silver text, transparent bg, silver border */
.mq-btn-secondary {
  display:         inline-block;
  font-family:     var(--mq-font-mono);
  font-size:       var(--mq-small-size);
  font-weight:     500;
  color:           var(--mq-btn-secondary-text);
  background:      var(--mq-btn-secondary-bg);
  border:          1px solid var(--mq-btn-secondary-border);
  border-radius:   var(--mq-radius);
  padding:         0.65em 1.25em;
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color var(--mq-transition), color var(--mq-transition),
                   transform var(--mq-transition);
}
.mq-btn-secondary:hover {
  border-color: var(--mq-link);
  color:        var(--mq-link);
  transform:    translateY(-1px);
}

/* GHOST — outline, emerald border */
.mq-btn-ghost {
  display:         inline-block;
  font-family:     var(--mq-font-mono);
  font-size:       var(--mq-small-size);
  font-weight:     500;
  color:           var(--mq-link);
  background:      transparent;
  border:          1px solid var(--mq-border-light);
  border-radius:   var(--mq-radius);
  padding:         0.65em 1.25em;
  text-decoration: none;
  cursor:          pointer;
  transition:      border-color var(--mq-transition), color var(--mq-transition),
                   transform var(--mq-transition);
}
.mq-btn-ghost:hover {
  border-color: var(--mq-link-hover);
  color:        var(--mq-link-hover);
  transform:    translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT UTILITIES
   ════════════════════════════════════════════════════════════════ */
.mq-container {
  max-width:   var(--mq-container-max);
  margin:      0 auto;
  padding:     0 clamp(1rem, 5vw, 3rem);
}

.mq-site {
  position:   relative;
  min-height: 100vh;
}

.mq-site-main {
  position: relative;
  z-index:  1;
}

/* ════════════════════════════════════════════════════════════════
   HEADER
   ════════════════════════════════════════════════════════════════ */
.mq-site-header {
  position:   sticky;
  top:        0;
  z-index:    1000;
  height:     var(--mq-header-height);
  background: var(--mq-nav-bg);
  border-bottom: 1px solid var(--mq-border);
  transition: background var(--mq-transition), border-color var(--mq-transition);
}

.mq-header-inner {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  height:      100%;
  max-width:   var(--mq-container-max);
  margin:      0 auto;
  padding:     0 clamp(1rem, 4vw, 2.5rem);
}

/* Logo */
.mq-site-logo {
  flex-shrink:     0;
  text-decoration: none;
}
.mq-logo-text {
  font-family:    var(--mq-font-serif);
  font-size:      1.25rem;
  font-weight:    600;
  color:          var(--mq-heading);
  letter-spacing: -0.01em;
}
.mq-logo-text em {
  font-style: normal;
  color:      var(--mq-amber);
}

/* Primary nav */
.mq-primary-nav {
  display:     flex;
  align-items: center;
  gap:         0.25rem;
  list-style:  none;
  margin:      0;
  padding:     0;
  flex:        1;
}
.mq-primary-nav li a {
  display:        block;
  padding:        0.4em 0.75em;
  font-size:      var(--mq-small-size);
  font-weight:    500;
  color:          var(--mq-text);
  border-radius:  var(--mq-radius);
  white-space:    nowrap;
  transition:     background var(--mq-transition), color var(--mq-transition);
}
.mq-primary-nav li a:hover,
.mq-primary-nav li a[aria-current="page"] {
  background: var(--mq-nav-bg-hover);
  color:      var(--mq-heading);
  text-decoration: none;
}

/* Right-side controls group */
.mq-header-controls {
  display:     flex;
  align-items: center;
  gap:         0.75rem;
  margin-left: auto;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT / DARK TOGGLE BUTTON
   Fixed bottom-right — matches home.php model exactly.
   ════════════════════════════════════════════════════════════════ */
.mq-theme-toggle {
  position:       fixed;
  bottom:         20px;
  right:          20px;
  z-index:        9999;
  width:          42px;
  height:         42px;
  border-radius:  50%;
  border:         1px solid var(--mq-border-light);
  background:     var(--mq-surface);
  color:          var(--mq-amber);
  font-size:      1.125rem;
  cursor:         pointer;
  display:        flex;
  align-items:    center;
  justify-content:center;
  transition:     background var(--mq-transition), border-color var(--mq-transition),
                  color var(--mq-transition);
  box-shadow:     0 2px 8px rgba(0,0,0,0.4);
  -webkit-tap-highlight-color: transparent;
}
.mq-theme-toggle:hover {
  border-color: var(--mq-link);
  color:        var(--mq-link);
}

/* Show/hide sun vs moon icon based on mode */
.mq-toggle-icon--light { display: none; }
.mq-toggle-icon--dark  { display: block; }
body.mq-light .mq-toggle-icon--light { display: block; }
body.mq-light .mq-toggle-icon--dark  { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE HAMBURGER
   ════════════════════════════════════════════════════════════════ */
.mq-menu-toggle {
  display:      none;
  background:   transparent;
  border:       1px solid var(--mq-border-light);
  border-radius:var(--mq-radius);
  color:        var(--mq-text);
  cursor:       pointer;
  padding:      0.4em 0.6em;
  font-size:    1.125rem;
  line-height:  1;
  transition:   border-color var(--mq-transition), color var(--mq-transition);
}
.mq-hamburger::before { content: '☰'; }
.mq-menu-toggle--open .mq-hamburger::before { content: '✕'; }

@media (max-width: 768px) {
  .mq-menu-toggle { display: flex; align-items: center; }

  .mq-primary-nav {
    display:    none;
    position:   absolute;
    top:        var(--mq-header-height);
    left:       0; right: 0;
    flex-direction: column;
    align-items:    stretch;
    background: var(--mq-nav-bg);
    border-bottom: 1px solid var(--mq-border);
    padding:    0.5rem 1rem 1rem;
    gap:        0.25rem;
  }
  .mq-primary-nav.mq-nav--open { display: flex; }
  .mq-primary-nav li a { padding: 0.6em 1em; }
}

/* ════════════════════════════════════════════════════════════════
   LANGUAGE SELECTOR
   Renders via mq_render_language_selector() in functions.php.
   Position: nav-right (default) or footer (Customizer).
   ════════════════════════════════════════════════════════════════ */
.mq-lang-selector {
  position:   relative;
  font-family: var(--mq-font-mono);
  font-size:  var(--mq-micro-size);
}
.mq-lang-selector select {
  appearance:       none;
  -webkit-appearance: none;
  background:       var(--mq-surface);
  color:            var(--mq-silver);
  border:           1px solid var(--mq-border-light);
  border-radius:    var(--mq-radius);
  padding:          0.35em 1.8em 0.35em 0.6em;
  font-family:      inherit;
  font-size:        inherit;
  cursor:           pointer;
  transition:       border-color var(--mq-transition), color var(--mq-transition);
}
.mq-lang-selector select:hover,
.mq-lang-selector select:focus {
  border-color: var(--mq-link);
  color:        var(--mq-link);
  outline:      none;
}
/* Chevron */
.mq-lang-selector::after {
  content:        '▾';
  position:       absolute;
  right:          0.5em;
  top:            50%;
  transform:      translateY(-50%);
  pointer-events: none;
  color:          var(--mq-silver);
  font-size:      0.7em;
}
/* Footer variant — slightly larger */
.mq-lang-selector--footer {
  margin-top: 0.75rem;
}
.mq-lang-selector--footer select {
  padding: 0.45em 2em 0.45em 0.75em;
}

/* ════════════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════════════ */
.mq-site-footer {
  background:    var(--mq-surface);
  border-top:    1px solid var(--mq-border);
  padding:       3rem 0 1.5rem;
  margin-top:    4rem;
  position:      relative;
  z-index:       1;
  transition:    background var(--mq-transition), border-color var(--mq-transition);
}

.mq-footer-grid {
  display:               grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:                   2rem;
  margin-bottom:         2.5rem;
}

@media (max-width: 768px) {
  .mq-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .mq-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .mq-footer-grid { grid-template-columns: 1fr; }
}

.mq-footer-brand p {
  font-size:  var(--mq-small-size);
  color:      var(--mq-text-muted);
  margin-top: 0.75rem;
  max-width:  320px;
}

.mq-footer-col h4 {
  font-size:      var(--mq-small-size);
  font-weight:    600;
  color:          var(--mq-heading);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom:  0.75rem;
}

.mq-footer-col ul {
  list-style: none;
  margin:     0;
  padding:    0;
}
.mq-footer-col ul li {
  margin-bottom: 0.4rem;
}
.mq-footer-col ul li a {
  font-size:  var(--mq-small-size);
  color:      var(--mq-text-muted);
  transition: color var(--mq-transition);
}
.mq-footer-col ul li a:hover {
  color:           var(--mq-link-hover);
  text-decoration: none;
}

.mq-footer-bottom {
  border-top:    1px solid var(--mq-border);
  padding-top:   1.25rem;
  display:       flex;
  justify-content: space-between;
  align-items:   center;
  flex-wrap:     wrap;
  gap:           0.5rem;
}
.mq-footer-bottom p {
  font-size:  var(--mq-micro-size);
  color:      var(--mq-text-dim);
  margin:     0;
  font-family: var(--mq-font-mono);
  letter-spacing: 0.03em;
}

/* ════════════════════════════════════════════════════════════════
   CARD — shared surface component
   ════════════════════════════════════════════════════════════════ */
.mq-card {
  background:  var(--mq-surface);
  border:      1px solid var(--mq-border);
  border-radius: var(--mq-radius);
  padding:     1.75rem;
  transition:  background var(--mq-transition), border-color var(--mq-transition);
}
.mq-card:hover {
  border-color: var(--mq-border-light);
}

/* ════════════════════════════════════════════════════════════════
   ALERT / WARNING BAND
   Use ONLY for system alerts. Red < 5% visible elements.
   ════════════════════════════════════════════════════════════════ */
.mq-alert {
  background:    rgba(255, 76, 76, 0.1);
  border:        1px solid var(--mq-alert);
  border-radius: var(--mq-radius);
  color:         var(--mq-alert);
  padding:       0.75rem 1rem;
  font-size:     var(--mq-small-size);
  font-weight:   500;
}

/* ════════════════════════════════════════════════════════════════
   SKIP LINK (accessibility)
   ════════════════════════════════════════════════════════════════ */
.skip-link.screen-reader-text {
  position:   absolute;
  top:        -9999px;
  left:       -9999px;
  z-index:    9999;
  padding:    0.5em 1em;
  background: var(--mq-btn-primary-bg);
  color:      var(--mq-btn-primary-text);
}
.skip-link.screen-reader-text:focus {
  top:  0;
  left: 0;
}

/* ════════════════════════════════════════════════════════════════
   SCROLL BEHAVIOUR
   ════════════════════════════════════════════════════════════════ */
html { scroll-padding-top: calc(var(--mq-header-height) + 1rem); }


/* ════════════════════════════════════════════════════════════════
   HEADER / NAV / TOGGLE / COMPASS — moved from header.php inline style
   Single source of truth per Ohm's Law: one place, CSS only.
   ════════════════════════════════════════════════════════════════ */
body { background: #0a0f0a; color: #44D4BC; }
  body.mq-light { background: #f2f7f2 !important; color: #1a3a1a !important; }

  /* ── Compass — fixed, decorative, self-contained ────────────── */
  .mq-bg-compass {
    position: fixed;
    pointer-events: none;
    z-index: 0;
    opacity: 0.07;
    fill: none;
  }
  .mq-bg-compass--tr {
    top: -80px; right: -80px;
    width: 320px; height: 320px;
  }
  .mq-bg-compass--bl {
    bottom: -80px; left: -80px;
    width: 260px; height: 260px;
    transform: rotate(180deg);
  }
  body.mq-light .mq-bg-compass { opacity: 0.12; }

  /* ── Header ─────────────────────────────────────────────────── */
  .mq-site-header {
    position: sticky; top: 0; z-index: 1000;
    height: 64px;
    background: #124020;
    border-bottom: 1px solid #112010;
    display: flex; align-items: center;
  }
  body.mq-light .mq-site-header { background: #e0ebe0; border-color: #b0c8b0; }

  .mq-header-inner {
    display: flex; align-items: center; gap: 1.5rem;
    height: 100%; width: 100%; max-width: 1200px;
    margin: 0 auto; padding: 0 clamp(1rem,4vw,2.5rem);
  }

  /* Logo */
  .mq-site-logo { text-decoration: none; flex-shrink: 0; }
  .mq-logo-text {
    font-size: 1.25rem; font-weight: 600;
    color: #96FFD2; letter-spacing: -0.01em;
    font-family: Georgia, serif;
  }
  .mq-logo-text em { font-style: normal; color: #FFBF00; }

  /* Nav */
  .mq-primary-nav {
    display: flex; align-items: center; gap: 0.25rem;
    list-style: none; margin: 0; padding: 0; flex: 1;
  }
  .mq-primary-nav li a {
    display: block; padding: 0.4em 0.75em;
    font-size: 0.875rem; font-weight: 500;
    color: #44D4BC; border-radius: 4px;
    white-space: nowrap; text-decoration: none;
    transition: background 0.2s, color 0.2s;
  }
  .mq-primary-nav li a:hover,
  .mq-primary-nav li a[aria-current="page"] {
    background: #1a6130; color: #96FFD2;
  }
  body.mq-light .mq-primary-nav li a { color: #1a3a1a; }
  body.mq-light .mq-primary-nav li a:hover { background: #c8dac8; color: #006248; }

  /* Controls group */
  .mq-header-controls {
    display: flex; align-items: center; gap: 0.75rem;
    margin-left: auto; flex-shrink: 0;
  }

  /* Theme toggle — fixed bottom-right */
  .mq-theme-toggle {
    position: fixed; bottom: 20px; right: 20px; z-index: 9999;
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid #1a6130; background: #131a13;
    color: #FFBF00; font-size: 1.125rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.4);
    -webkit-tap-highlight-color: transparent;
  }
  .mq-theme-toggle:hover { border-color: #8AFEC8; color: #8AFEC8; }
  body.mq-light .mq-theme-toggle {
    background: #fff; border-color: #c8d8c8; color: #CC9900;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  }
  .mq-toggle-icon--light { display: none; }
  .mq-toggle-icon--dark  { display: block; }
  body.mq-light .mq-toggle-icon--light { display: block; }
  body.mq-light .mq-toggle-icon--dark  { display: none; }

/* Mobile nav handled by Max Mega Menu plugin */

  /* Lang selector */
  .mq-lang-selector { position: relative; font-size: 0.75rem; }
  .mq-lang-selector select {
    appearance: none; -webkit-appearance: none;
    background: #131a13; color: #C0C0C0;
    border: 1px solid #1a6130; border-radius: 4px;
    padding: 0.35em 1.8em 0.35em 0.6em;
    font-size: inherit; cursor: pointer;
  }
  .mq-lang-selector::after {
    content: '▾'; position: absolute; right: 0.5em; top: 50%;
    transform: translateY(-50%); pointer-events: none;
    color: #C0C0C0; font-size: 0.7em;
  }
  body.mq-light .mq-lang-selector select { background: #fff; color: #2a5a2a; border-color: #b0c8b0; }

  /* Site wrapper */
  .mq-site { position: relative; min-height: 100vh; }
  .mq-site-main { position: relative; z-index: 1; }

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE — page content surface overrides
   Ensures all templates using var(--mq-*) respond to toggle.
   ════════════════════════════════════════════════════════════════ */
body.mq-light {
  --mq-bg:           #f2f7f2;
  --mq-surface:      #ffffff;
  --mq-surface-alt:  #e8f0e8;
  --mq-nav-bg:       #e0ebe0;
  --mq-nav-bg-hover: #c8dac8;
  --mq-border:       #b0c8b0;
  --mq-border-light: #c8d8c8;
  --mq-text:         #1a3a1a;
  --mq-text-muted:   #2a5a2a;
  --mq-text-dim:     #4a6a4a;
  --mq-text-bright:  #1a3a1a;        /* LOGGED 2026-06-19: no light-mode equivalent of "near-white accent" exists against a white surface; aliased to --mq-text so the role remains defined and legible. */
  --mq-heading:      #006248;
  --mq-heading-mid:  #007a5a;
  --mq-link:         #006248;
  --mq-link-hover:   #004a38;
  --mq-amber:        #CC9900;
  --mq-alert:        #cc2200;
  --mq-silver:       #4a6a4a;
}

/* ── Logo image sizing ── */
.mq-site-logo img,
.site-logo img,
#mq-logo-fixed img {
  height: 48px;
  width: auto;
  max-height: none;
  max-width: none;
  display: block;
}