/* ==========================================================================
   AWASA — UNIVERSAL STYLESHEET
   Antique Wireless Association of Southern Africa
   This file holds every token, reset rule and shared component used across
   the whole site. Link it on EVERY page, before the page-specific stylesheet:

   <link rel="stylesheet" href="css/main.css">
   <link rel="stylesheet" href="css/home.css">   <!-- page-specific -->
   ========================================================================== */

/* -------------------------------------------------------------------------
   1. FONTS
   ------------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Work+Sans:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* -------------------------------------------------------------------------
   2. DESIGN TOKENS
   ------------------------------------------------------------------------- */
:root{
  /* -- Retro-modern palette -------------------------------------------- */
  --walnut-950:#1c130d;      /* near-black cabinet wood, backgrounds/dark mode */
  --walnut-900:#241a13;
  --walnut-800:#382718;
  --walnut-700:#4a331f;      /* rich walnut wood */
  --walnut-600:#6b4a2c;

  --amber-700:#b5651d;
  --amber-600:#c97a2b;       /* deep amber — primary accent */
  --amber-500:#dd9a3d;
  --amber-glow:#f2b24d;      /* glowing dial */

  --copper-700:#3f5c4c;      /* oxidized copper green */
  --copper-600:#4e6b58;
  --copper-500:#6f8d78;

  --parchment-100:#faf6ec;   /* lightest parchment */
  --parchment-200:#f2e9d8;   /* textured parchment cream — page background */
  --parchment-300:#e7d9bd;
  --parchment-400:#d8c49e;

  --ink-900:#20160f;         /* body copy on light */
  --ink-700:#3a2c20;
  --ink-500:#6b5b48;

  --white:#ffffff;

  /* -- Semantic tokens (flip in [data-theme="dark"]) -------------------- */
  --bg:            var(--parchment-200);
  --bg-elevated:   var(--parchment-100);
  --bg-sunken:     var(--parchment-300);
  --text:          var(--ink-900);
  --text-muted:    var(--ink-500);
  --border:        rgba(32,22,15,0.14);
  --accent:        var(--amber-600);
  --accent-strong: var(--amber-700);
  --accent-glow:   var(--amber-glow);
  --panel-dark:    var(--walnut-900);
  --panel-dark-text: var(--parchment-200);

  /* -- Type scale --------------------------------------------------------*/
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Work Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'Space Mono', 'Courier New', monospace;

  --step--1: clamp(0.8rem, 0.77rem + 0.15vw, 0.9rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-1:  clamp(1.25rem, 1.18rem + 0.35vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.45rem + 0.75vw, 2.1rem);
  --step-3:  clamp(2.1rem, 1.8rem + 1.5vw, 3rem);
  --step-4:  clamp(2.75rem, 2.2rem + 2.75vw, 4.5rem);

  /* -- Layout --------------------------------------------------------- */
  --page-max: 1280px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius-s: 4px;
  --radius-m: 8px;
  --radius-l: 16px;
  --shadow-card: 0 1px 2px rgba(28,19,13,0.08), 0 10px 24px -12px rgba(28,19,13,0.28);
  --shadow-lift: 0 4px 10px rgba(28,19,13,0.10), 0 20px 40px -16px rgba(28,19,13,0.35);

  --dur: 220ms;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* -- Dark mode: "valve glow" theme -------------------------------------- */
[data-theme="dark"]{
  --bg:            var(--walnut-950);
  --bg-elevated:   var(--walnut-900);
  --bg-sunken:     #140d08;
  --text:          var(--parchment-200);
  --text-muted:    #b8a184;
  --border:        rgba(242,233,216,0.14);
  --accent:        var(--amber-glow);
  --accent-strong: var(--amber-500);
  --accent-glow:   var(--amber-glow);
  --panel-dark:    #0f0a06;
  --panel-dark-text: var(--parchment-200);
  --shadow-card: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -10px rgba(0,0,0,0.6);
  --shadow-lift: 0 4px 14px rgba(0,0,0,0.5), 0 24px 48px -16px rgba(0,0,0,0.7);
}

/* -------------------------------------------------------------------------
   3. RESET
   ------------------------------------------------------------------------- */
*, *::before, *::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
img, svg, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button, input, textarea, select{ font:inherit; color:inherit; }
button{ cursor:pointer; background:none; border:none; }
ul, ol{ list-style:none; }
h1,h2,h3,h4,h5,h6{ font-weight:600; line-height:1.15; }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:1.6;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease);
}

:focus-visible{
  outline:2.5px solid var(--accent-strong);
  outline-offset:3px;
  border-radius:2px;
}

/* subtle paper-grain texture applied behind all light-mode pages */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1;
  pointer-events:none;
  opacity:0.5;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(107,74,44,0.05), transparent 45%),
    radial-gradient(circle at 80% 60%, rgba(78,107,88,0.05), transparent 40%);
}

/* -------------------------------------------------------------------------
   4. TYPOGRAPHY
   ------------------------------------------------------------------------- */
h1, .h1{ font-family:var(--font-display); font-size:var(--step-4); letter-spacing:-0.01em; }
h2, .h2{ font-family:var(--font-display); font-size:var(--step-3); letter-spacing:-0.01em; }
h3, .h3{ font-family:var(--font-display); font-size:var(--step-2); }
h4, .h4{ font-family:var(--font-display); font-size:var(--step-1); }

p{ max-width:65ch; }
p.lede{ font-size:var(--step-1); color:var(--text-muted); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-mono); font-size:var(--step--1);
  text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent-strong);
}
.eyebrow::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--accent-glow);
  box-shadow:0 0 8px var(--accent-glow);
}

.text-muted{ color:var(--text-muted); }
.mono{ font-family:var(--font-mono); }

/* -------------------------------------------------------------------------
   5. LAYOUT HELPERS
   ------------------------------------------------------------------------- */
.wrap{ max-width:var(--page-max); margin-inline:auto; padding-inline:var(--gutter); }
section{ padding-block:clamp(3rem, 8vw, 6.5rem); }
.section-tight{ padding-block:clamp(2rem, 5vw, 3.5rem); }

.grid{ display:grid; gap:var(--gutter); }
.grid-2{ grid-template-columns:repeat(2, 1fr); }
.grid-3{ grid-template-columns:repeat(3, 1fr); }
.grid-4{ grid-template-columns:repeat(4, 1fr); }
@media (max-width:920px){
  .grid-3, .grid-4{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:640px){
  .grid-2, .grid-3, .grid-4{ grid-template-columns:1fr; }
}

.stack{ display:flex; flex-direction:column; }
.cluster{ display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; }

.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* -------------------------------------------------------------------------
   6. BUTTONS
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.6em;
  font-family:var(--font-body); font-weight:600; font-size:var(--step--1);
  letter-spacing:.02em; text-transform:uppercase;
  border-radius:var(--radius-s);
  border:1.5px solid transparent;
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }

.btn-primary{
  background:var(--accent);
  color:var(--walnut-950);
  box-shadow:0 0 0 rgba(242,178,77,0);
}
.btn-primary:hover{
  background:var(--accent-strong);
  box-shadow:0 0 22px -4px var(--accent-glow);
}

.btn-outline{
  border-color:currentColor;
  color:var(--text);
}
.btn-outline:hover{ background:var(--text); color:var(--bg); }

.btn-ghost{
  color:var(--accent-strong);
  padding-inline:.25em;
  text-transform:none;
  letter-spacing:0;
  font-weight:600;
}
.btn-ghost::after{ content:"→"; margin-left:.4em; transition:margin var(--dur) var(--ease); }
.btn-ghost:hover::after{ margin-left:.7em; }

.btn-sm{ padding:.55em 1.1em; font-size:0.78rem; }

/* -------------------------------------------------------------------------
   7. SITE HEADER
   ------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg-elevated) 92%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}

.utility-bar{
  border-bottom:1px solid var(--border);
  font-size:var(--step--1);
}
.utility-bar .wrap{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding-block:.55rem;
}

.search-field{
  display:flex; align-items:center; gap:.5rem;
  background:var(--bg-sunken);
  border:1px solid var(--border);
  border-radius:999px;
  padding:.35rem .9rem;
  min-width:0;
  flex:1; max-width:320px;
}
.search-field input{
  background:none; border:none; width:100%; outline:none;
  font-family:var(--font-mono); font-size:0.82rem; color:var(--text);
}
.search-field input::placeholder{ color:var(--text-muted); }
.search-field svg{ flex-shrink:0; opacity:.6; width:15px; height:15px; }

.utility-actions{ display:flex; align-items:center; gap:1rem; }
.utility-actions a{ font-weight:600; }

.theme-toggle{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  border:1px solid var(--border);
  background:var(--bg-sunken);
  transition:box-shadow var(--dur) var(--ease), background var(--dur) var(--ease);
}
.theme-toggle:hover{ box-shadow:0 0 14px -2px var(--accent-glow); }
.theme-toggle svg{ width:17px; height:17px; }
.theme-toggle .glow{ fill:var(--accent-glow); opacity:0; transition:opacity var(--dur) var(--ease); }
[data-theme="dark"] .theme-toggle .glow{ opacity:1; }
[data-theme="dark"] .theme-toggle .filament{ stroke:var(--accent-glow); }

.main-nav{ padding-block:.9rem; }
.main-nav .wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.logo{ display:flex; align-items:center; gap:.65rem; }
.logo-mark{ width:42px; height:42px; flex-shrink:0; }
.logo-word{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; line-height:1; }
.logo-word span{ display:block; font-family:var(--font-mono); font-weight:400; font-size:.6rem; letter-spacing:.16em; color:var(--text-muted); text-transform:uppercase; margin-top:.25rem; }

.nav-links{ display:flex; align-items:center; gap:clamp(1.1rem, 2vw, 2rem); }
.nav-links a{
  position:relative; font-weight:600; font-size:.92rem;
  padding-block:.3rem;
}
.nav-links a::after{
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur) var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after{ transform:scaleX(1); }
.nav-links a[aria-current="page"]{ color:var(--accent-strong); }

.nav-toggle{ display:none; }

@media (max-width:900px){
  .search-field{ display:none; }
  .nav-toggle{
    display:inline-flex; width:38px; height:38px; align-items:center; justify-content:center;
    border:1px solid var(--border); border-radius:var(--radius-s);
  }
  .nav-links{
    position:fixed; inset:0 0 0 auto; width:min(320px,85vw); height:100vh;
    background:var(--bg-elevated); flex-direction:column; align-items:flex-start;
    padding:5.5rem var(--gutter) 2rem; gap:1.5rem;
    transform:translateX(100%); transition:transform var(--dur) var(--ease);
    border-left:1px solid var(--border);
  }
  .nav-links.is-open{ transform:translateX(0); }
  .nav-links a{ font-size:1.1rem; }
}

/* -------------------------------------------------------------------------
   8. PAGE HERO BANNER (interior pages)
   ------------------------------------------------------------------------- */
.page-banner{
  position:relative;
  background:var(--panel-dark); color:var(--panel-dark-text);
  overflow:hidden;
  padding-block:clamp(3rem,8vw,5.5rem);
}
.page-banner::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(600px 300px at 85% 0%, rgba(242,178,77,0.16), transparent 70%),
    repeating-linear-gradient(115deg, rgba(242,233,216,0.035) 0 2px, transparent 2px 34px);
  pointer-events:none;
}
.page-banner .wrap{ position:relative; }
.page-banner .eyebrow{ color:var(--accent-glow); }
.page-banner h1{ margin-top:.5rem; max-width:16ch; }
.page-banner p.lede{ margin-top:1rem; color:var(--parchment-300); max-width:56ch; }
.breadcrumb{ font-family:var(--font-mono); font-size:.78rem; color:var(--parchment-400); margin-bottom:1rem; }
.breadcrumb a:hover{ color:var(--accent-glow); }

/* -------------------------------------------------------------------------
   9. CARDS
   ------------------------------------------------------------------------- */
.card{
  background:var(--bg-elevated);
  border:1px solid var(--border);
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
  transition:transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lift); border-color:var(--accent); }

.card-pad{ padding:1.75rem; }

.icon-badge{
  width:48px; height:48px; border-radius:var(--radius-m);
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--accent) 16%, var(--bg-elevated));
  color:var(--accent-strong);
  margin-bottom:1.1rem;
}
.icon-badge svg{ width:24px; height:24px; }

/* -------------------------------------------------------------------------
   10. TAGS / BADGES
   ------------------------------------------------------------------------- */
.tag{
  display:inline-flex; align-items:center;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.04em;
  padding:.3em .7em; border-radius:999px;
  background:var(--bg-sunken); border:1px solid var(--border); color:var(--text-muted);
}
.tag-amber{ background:color-mix(in srgb, var(--amber-600) 18%, transparent); color:var(--amber-700); border-color:transparent; }
[data-theme="dark"] .tag-amber{ color:var(--amber-glow); }
.tag-copper{ background:color-mix(in srgb, var(--copper-600) 20%, transparent); color:var(--copper-700); border-color:transparent; }
[data-theme="dark"] .tag-copper{ color:var(--copper-500); }

/* -------------------------------------------------------------------------
   11. FORMS
   ------------------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.25rem; }
.field label{ font-size:.85rem; font-weight:600; }
.field .hint{ font-size:.78rem; color:var(--text-muted); }
.field input, .field select, .field textarea{
  background:var(--bg-elevated);
  border:1.5px solid var(--border);
  border-radius:var(--radius-s);
  padding:.75em .9em;
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.field textarea{ resize:vertical; min-height:120px; }

/* -------------------------------------------------------------------------
   12. SITE FOOTER
   ------------------------------------------------------------------------- */
.site-footer{
  background:var(--panel-dark); color:var(--panel-dark-text);
  padding-block:clamp(3rem,6vw,4.5rem) 1.5rem;
}
.site-footer a{ color:var(--parchment-300); }
.site-footer a:hover{ color:var(--accent-glow); }
.footer-grid{
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem;
  padding-bottom:2.5rem; border-bottom:1px solid rgba(242,233,216,0.14);
}
.footer-grid h4{ font-family:var(--font-mono); text-transform:uppercase; font-size:.78rem; letter-spacing:.1em; color:var(--parchment-400); margin-bottom:1rem; }
.footer-grid ul{ display:flex; flex-direction:column; gap:.6rem; font-size:.9rem; }
.footer-brand .logo-word{ color:var(--parchment-100); }
.footer-brand p{ color:var(--parchment-400); font-size:.88rem; margin-top:1rem; max-width:32ch; }
.footer-social{ display:flex; gap:.75rem; margin-top:1.25rem; }
.footer-social a{
  width:34px; height:34px; border-radius:50%; border:1px solid rgba(242,233,216,0.25);
  display:flex; align-items:center; justify-content:center;
}
.footer-social svg{ width:15px; height:15px; }
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.75rem;
  padding-top:1.5rem; font-size:.78rem; color:var(--parchment-400); font-family:var(--font-mono);
}
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
}

/* -------------------------------------------------------------------------
   13. MISC SHARED COMPONENTS
   ------------------------------------------------------------------------- */
.divider-dial{
  display:flex; align-items:center; gap:1rem; margin-block:2.5rem; color:var(--text-muted);
}
.divider-dial::before, .divider-dial::after{ content:""; flex:1; height:1px; background:var(--border); }

.section-head{ max-width:56ch; margin-bottom:2.5rem; }
.section-head .eyebrow{ margin-bottom:.75rem; }

.skip-link{
  position:absolute; left:-999px; top:auto;
  background:var(--accent); color:var(--walnut-950); padding:.75em 1.2em; z-index:1000;
  border-radius:0 0 var(--radius-s) 0;
}
.skip-link:focus{ left:0; top:0; }