/* ═══════════════════════════════════════════════════════════════
   styles-shared.css  —  routersandrepeaters.net
   Loaded by ALL pages. Do not put page-specific styles here.
   Page-specific styles stay in a <style> block inside that page.
   BRP-specific styles live in styles-brp.css.
   ═══════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   1. DESIGN TOKENS  (CSS custom properties)
      These are the site's colour palette and
      font names. Change one value here and it
      updates everywhere automatically.
═══════════════════════════════════════════ */
:root {
  /* Backgrounds — darkest to lightest */
  --bg:       #06090f;
  --bg2:      #0a1018;
  --surface:  #0e1822;
  --surface2: #14202e;

  /* Borders */
  --border:   #182840;
  --border2:  #1e3450;

  /* Brand colours */
  --accent:   #00d4f0;   /* cyan  — primary highlight */
  --accent2:  #ff7040;   /* orange — secondary highlight */
  --green:    #2ecc7a;
  --yellow:   #f0c040;
  --purple:   #a070f0;

  /* Text */
  --text:     #ccdde8;
  --muted:    #4a6a88;

  /* Fonts — loaded from Google Fonts in each HTML <head> */
  --font-mono: 'Share Tech Mono', monospace;
  --font-hd:   'Oxanium', sans-serif;
  --font-body: 'Mulish', sans-serif;
}


/* ═══════════════════════════════════════════
   2. NIGHT MODE OVERRIDES
      Applied when JavaScript adds the class
      "night-mode" to <body>.
      Replaces the colour tokens above with
      warm amber tones for low-light use.
═══════════════════════════════════════════ */
body.night-mode {
  --bg:      #0a0500;
  --bg2:     #120800;
  --surface: #1a0c00;
  --surface2:#221200;
  --border:  #3a1500;
  --border2: #4a2000;
  --accent:  #ff6020;
  --accent2: #ff9040;
  --green:   #cc5500;
  --yellow:  #ff8020;
  --text:    #ffe0c0;
  --muted:   #cc8860;
}


/* ═══════════════════════════════════════════
   3. RESET & BASE
      Clears browser default margin/padding.
      Sets the default font size (15px).
      Smooth scrolling for anchor links.
═══════════════════════════════════════════ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;       /* Large Print JS raises this to 19px */
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background 0.8s, color 0.8s;
}

a {
  color: inherit;
  text-decoration: none;
}


/* ═══════════════════════════════════════════
   4. ANIMATED GRID BACKGROUND
      The subtle blue grid behind every page.
      Night mode version swaps blue for amber.
      pointer-events:none means it never
      accidentally blocks clicks.
═══════════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% -10%, rgba(0,100,160,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 80% 60%,  rgba(255,80,30,0.06) 0%, transparent 60%),
    repeating-linear-gradient(0deg,  transparent, transparent 47px, rgba(20,40,70,0.12) 48px),
    repeating-linear-gradient(90deg, transparent, transparent 47px, rgba(20,40,70,0.06) 48px);
  transition: background 0.8s;
}

body.night-mode::before {
  background:
    radial-gradient(ellipse 70% 35% at 50% 0%, rgba(80,20,0,0.25) 0%, transparent 70%),
    repeating-linear-gradient(0deg, transparent, transparent 47px, rgba(60,20,0,0.15) 48px);
}

/* Keeps all page content above the background */
.page {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════
   5. HEADER / NAV
      .main-header  — used on inner pages
      nav           — used on the home page
      Both share identical styling via the
      comma-separated selector below.
═══════════════════════════════════════════ */
nav,
.main-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1.5rem;
  background: rgba(6,9,15,0.88);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  gap: 1rem;
  flex-wrap: wrap;
  transition: background 0.8s, border-color 0.8s;
}

body.night-mode nav,
body.night-mode .main-header {
  background: rgba(20,5,0,0.92);
}

/* Site name in the top-left corner */
.nav-logo,
.header-logo {
  font-family: var(--font-hd);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  white-space: nowrap;
}

.nav-logo em,
.header-logo em  { color: var(--accent);  font-style: normal; }
.nav-logo span,
.header-logo span { color: var(--accent2); }

/* Navigation link buttons */
.nav-links,
.header-links {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  align-items: center;
}

.nav-link,
.hdr-link {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.22rem 0.65rem;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.nav-link:hover,
.hdr-link:hover {
  color: var(--accent);
  border-color: rgba(0,212,240,0.3);
  text-decoration: none;
}

/* "Home" link — always highlighted cyan */
.nav-link.rr,
.hdr-link.rr {
  color: var(--accent);
  border-color: rgba(0,212,240,0.3);
}

/* Call-to-action link (Blue Ridge Parkway in main nav) */
.nav-link.cta,
.hdr-link.cta {
  color: var(--accent);
  border-color: rgba(0,212,240,0.35);
  background: rgba(0,212,240,0.05);
}

.nav-link.cta:hover,
.hdr-link.cta:hover {
  background: rgba(0,212,240,0.12);
}

/* Active page indicator (used on inner pages) */
.hdr-link.active {
  color: var(--accent2);
  border-color: rgba(255,112,64,0.4);
  background: rgba(255,112,64,0.06);
}


/* ═══════════════════════════════════════════
   6. UTC CLOCK
      The live time display in the header.
      JavaScript in site.js updates it every
      second.
═══════════════════════════════════════════ */
.utc-clock {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent);
  opacity: 0.7;
  white-space: nowrap;
  border: 1px solid rgba(0,212,240,0.2);
  padding: 0.18rem 0.5rem;
  border-radius: 3px;
  background: rgba(0,212,240,0.04);
}

.utc-clock span {
  font-size: 0.52rem;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-left: 0.2rem;
}


/* ═══════════════════════════════════════════
   7. NIGHT MODE & LARGE PRINT BUTTONS
      .night-btn  — the toggle buttons in
      the header on inner pages.
      index.html uses .nav-link for these
      with inline colour overrides; that
      still works alongside this rule.
═══════════════════════════════════════════ */
.night-btn {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.55rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Night Mode button — orange tint */
.night-btn.night-toggle {
  border: 1px solid rgba(255,96,32,0.35);
  color: #ff6020;
  background: rgba(255,96,32,0.06);
}
.night-btn.night-toggle:hover {
  border-color: #ff6020;
  background: rgba(255,96,32,0.12);
}

/* Large Print button — purple tint */
.night-btn.large-toggle {
  border: 1px solid rgba(160,112,240,0.35);
  color: #b088ff;
  background: rgba(160,112,240,0.06);
}
.night-btn.large-toggle:hover {
  border-color: #b088ff;
  background: rgba(160,112,240,0.12);
}


/* ═══════════════════════════════════════════
   8. AD ZONES
      Placeholder containers for banner ads.
      When a real ad is placed, the content
      inside .ad-placeholder is replaced with
      the sponsor's image tag. The outer
      .ad-zone container stays exactly as-is.
═══════════════════════════════════════════ */
.ad-zone {
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: rgba(10,18,30,0.4);
  min-height: 100px;
}

.ad-placeholder {
  width: 728px;
  max-width: 100%;
  height: 90px;
  border: 1px dashed var(--border2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(14,24,40,0.5);
}

.ad-placeholder-text {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--border2);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}


/* ═══════════════════════════════════════════
   9. FOOTER
      Shared footer bar at the bottom of
      every page.
      .footer-humor  — the rotating tagline
      line (home page only, but defined here
      so the class is available anywhere).
      .footer-version — the subtle version
      number shown at the far right.
═══════════════════════════════════════════ */
footer {
  border-top: 1px solid var(--border);
  padding: 1.2rem 2rem;
  background: var(--bg2);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  align-items: center;
}

.footer-left {
  font-family: var(--font-hd);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text);
}
.footer-left em { color: var(--accent); font-style: normal; }

.footer-links {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.footer-link {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.15s;
  text-decoration: none;
}
.footer-link:hover { color: var(--accent); }

/* Rotating ham-humor line (home page) */
.footer-humor {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  color: var(--border2);
  letter-spacing: 0.05em;
  width: 100%;
  text-align: center;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

/* Version stamp — subtle, bottom-right area */
.footer-version {
  font-family: var(--font-mono);
  font-size: 0.52rem;
  color: var(--border2);        /* very dim — intentionally hard to spot */
  letter-spacing: 0.12em;
  opacity: 0.6;
  white-space: nowrap;
}

/* Secondary footer text line (operator credit, policy date, etc.) */
.footer-date,
.footer-note {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--muted);
  width: 100%;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  line-height: 1.6;
}


/* ═══════════════════════════════════════════
   10. DISCLAIMER STRIP
       The "always verify frequencies" bar
       used on route and BRP pages.
═══════════════════════════════════════════ */
.disclaimer {
  padding: 0.8rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--border2);
  letter-spacing: 0.06em;
  line-height: 1.7;
  border-top: 1px solid var(--border);
  background: var(--bg2);
}
.disclaimer strong { color: var(--muted); }


/* ═══════════════════════════════════════════
   11. TAGLINE TICKER
       The rotating humor strip on the home
       page. .ticker-treasure is the yellow
       "treasure hunt" hint line.
       Defined here so footer tickers on
       other pages can reuse the same classes.
═══════════════════════════════════════════ */
.ticker-wrap {
  background: rgba(0,212,240,0.04);
  border-top: 1px solid rgba(0,212,240,0.15);
  border-bottom: 1px solid rgba(0,212,240,0.15);
  padding: 0.7rem 2rem;
  min-height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.ticker-line {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--accent);
  letter-spacing: 0.1em;
  opacity: 0;
  text-align: center;
  transition: opacity 1.4s ease;
  position: absolute;
}
.ticker-line.visible { opacity: 0.85; }
.ticker-line.snap    { transition: opacity 0.15s ease; }

.ticker-treasure {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  color: var(--yellow);
  letter-spacing: 0.08em;
  opacity: 0;
  text-align: center;
  transition: opacity 1.4s ease;
  position: absolute;
}
.ticker-treasure.visible { opacity: 0.75; }


/* ═══════════════════════════════════════════
   12. RESPONSIVE — MOBILE
       At 640px and below, reduce padding
       on all the shared elements above.
═══════════════════════════════════════════ */
@media (max-width: 640px) {
  nav,
  .main-header,
  .ad-zone,
  .disclaimer,
  footer {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  footer {
    flex-direction: column;
    gap: 1rem;
  }
}
