/* ═══════════════════════════════════════════════════════════════════
   yadon.ltd — Shared Stylesheet
   style.css
   ═══════════════════════════════════════════════════════════════════
   Contains:
     • CSS custom property tokens (:root)
     • Global reset
     • Navigation (hamburger trigger + menu panel + submenus)
     • Footer bar
     • Shared keyframe animations

   Page-specific styles remain inline in each PHP file.

   Colour changes from accessibility audit (2025-03):
     --text-dim    0.45 → 0.68  (was ~3.6:1 contrast; now ~5.5:1)
     --text-dimmer 0.22 → 0.45  (was ~1.9:1; now matches old text-dim)
     .submenu-heading  rgba(255,255,255, 0.25 → 0.52)
     .submenu a        rgba(255,255,255, 0.52 → 0.72)
     .submenu a.l2     rgba(255,255,255, 0.36 → 0.60)
     .footer-copy      rgba(200,216,224, 0.20 → 0.48)
     .info-item        rgba(200,216,224, 0.25 → 0.55)
     .info-item .label rgba(200,216,224, 0.12 → 0.42)
     .info-item .value rgba(200,216,224, 0.32 → 0.62)
   ═══════════════════════════════════════════════════════════════════ */


/* ── CSS Custom Properties (Design Tokens) ──────────────────────── */
/*
  All colour, border, and typography values used across the tool
  pages live here.  Change a token once; it updates everywhere.
*/
:root {
  /* Background layers — dark, blue-tinted */
  --bg:          #080c0f;
  --bg2:         #0d1318;
  --bg3:         #111920;

  /* Borders */
  --border:      rgba(0, 210, 255, 0.12);
  --border-hi:   rgba(0, 210, 255, 0.35);

  /* Accent (cyan) */
  --accent:      #00d2ff;
  --accent-dim:  rgba(0, 210, 255, 0.55);
  --accent-glow: rgba(0, 210, 255, 0.08);

  /* Text — cool off-white base */
  --text:        #c8d8e0;
  --text-dim:    rgba(200, 216, 224, 0.68);   /* raised from 0.45 for readability */
  --text-dimmer: rgba(200, 216, 224, 0.45);   /* raised from 0.22 for readability */

  /* Status / zone colours */
  --ok:          #44dd88;
  --warn:        #ffaa33;
  --bad:         #ff5555;

  /* Typography — system font stacks, no external dependencies */
  --mono:        ui-monospace, Menlo, Consolas, 'Courier New', monospace;
  --sans:        system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}


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

html {
  scroll-behavior: smooth;
}


/* ── Shared Header ──────────────────────────────────────────────── */
/*
  Sticky so it stays at viewport top on tool pages.
  Three-column grid: [trigger] [title — centered] [balance spacer]
  The spacer column mirrors the trigger width so the title is truly
  centred relative to the full header, not just the remaining space.
  z-index 500 keeps the bar below the nav menu panel (999).

  Note: #nav-menu is position:fixed so it is out of flow and does
  not occupy a grid cell even though it is a DOM child of <header>.
*/
header {
  position: sticky;
  top: 0;
  z-index: 500;
  display: grid;
  grid-template-columns: 3rem 1fr auto;  /* col 3: search form — replaces empty 3rem spacer */
  align-items: center;
  background: #080c0f;
  /* individual pages set padding / height / border / animation */
}


/* ── Navigation — Hamburger Trigger ────────────────────────────── */
/*
  Lives inside <header> on tool pages — inline, not fixed.
  The trigger sits in grid column 1 (left); the page title in
  column 2 (centre).

  index.php has no <header>, so it overrides this block back to
  position:fixed with its own inline <style>.
*/
#menu-trigger {
  position: relative;   /* inline in the header grid */
  z-index: 1001;        /* above the sticky header (500) so it's always clickable */
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 3px;
  padding: 0.45rem 0.55rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color 0.2s ease;
  justify-self: start;  /* left-align within grid cell */
  margin-left: 0.5rem;  /* small breathing room from edge */
}

#menu-trigger:hover,
#menu-trigger.open {
  border-color: rgba(255, 255, 255, 0.5);
}

/* The three hamburger lines */
#menu-trigger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255, 255, 255, 0.55);
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
  transform-origin: center;
}

/* Animate hamburger → X when menu is open */
#menu-trigger.open span:nth-child(1) { transform: translateY(5.5px)  rotate(45deg);  background: rgba(255, 255, 255, 0.85); }
#menu-trigger.open span:nth-child(2) { opacity: 0; }
#menu-trigger.open span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); background: rgba(255, 255, 255, 0.85); }


/* ── Navigation — Menu Panel ────────────────────────────────────── */
/*
  Hidden by default (opacity 0, pointer-events none).
  JavaScript adds .visible to show it.
*/
#nav-menu {
  position: fixed;
  top: 3.5rem;          /* aligns with bottom of the 3.5rem sticky header */
  left: 0.75rem;
  z-index: 999;
  background: rgba(8, 8, 8, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.11);
  border-radius: 4px;
  min-width: 210px;
  padding: 0.4rem 0;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  /* hidden state */
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}

/* WebKit scrollbar (Chrome, Safari, Edge) */
#nav-menu::-webkit-scrollbar               { width: 4px; }
#nav-menu::-webkit-scrollbar-track         { background: transparent; }
#nav-menu::-webkit-scrollbar-thumb         { background: rgba(255, 255, 255, 0.18); border-radius: 2px; }
#nav-menu::-webkit-scrollbar-thumb:hover   { background: rgba(255, 255, 255, 0.35); }

#nav-menu.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}


/* ── Navigation — Menu Items ────────────────────────────────────── */
.menu-item {
  position: relative;
}

.menu-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}

.menu-label:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.05);
}

/* Chevron — rotates 90° when submenu is open */
.menu-label .arrow {
  font-size: 0.5rem;
  margin-left: 1.4rem;
  opacity: 0.45;
  transition: transform 0.2s ease, opacity 0.2s ease;
  display: inline-block;
}

.menu-item.open > .menu-label .arrow {
  transform: rotate(90deg);
  opacity: 0.9;
}


/* ── Navigation — Submenus (accordion) ──────────────────────────── */
.submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.28s ease;
}

.submenu.open {
  max-height: 1400px;   /* large enough for any realistic submenu */
}

/* Section headings inside submenus — raised from 0.25 → 0.52 */
.submenu-heading {
  padding: 0.55rem 1rem 0.2rem 1.5rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(255, 255, 255, 0.52);
}

/* Nav links — raised from 0.52 → 0.72 */
.submenu a {
  display: block;
  padding: 0.28rem 1rem 0.28rem 1.6rem;
  font-size: 0.71rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.12s ease, padding-left 0.12s ease;
}

.submenu a:hover {
  color: #fff;
  padding-left: 1.9rem;
}

/* Second-level indented links — raised from 0.36 → 0.60 */
.submenu a.l2 {
  padding-left: 2.2rem;
  font-size: 0.66rem;
  color: rgba(255, 255, 255, 0.60);
}

.submenu a.l2:hover {
  padding-left: 2.5rem;
  color: rgba(255, 255, 255, 0.72);
}

/* Horizontal rule between submenu sections */
.submenu-divider {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  margin: 0.35rem 0.9rem;
}


/* ── Navigation — Subsection accordions (AI Resources) ──────────── */
/*
  Each category inside AI Resources collapses independently.
  Only one can be open at a time — mutual exclusion is enforced in JS.
*/

/* Clickable subsection heading — inherits submenu-heading look + adds affordances */
.subsection-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem 0.3rem 1.2rem;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-style: italic;
  color: rgba(255, 255, 255, 0.52);
  cursor: pointer;
  user-select: none;
  transition: color 0.15s ease, background 0.15s ease;
}

.subsection-label:hover {
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.04);
}

/* Small arrow — rotates 90° when open */
.subsection-label .sub-arrow {
  font-size: 0.45rem;
  opacity: 0.4;
  margin-left: 0.8rem;
  display: inline-block;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.subsection.open > .subsection-label .sub-arrow {
  transform: rotate(90deg);
  opacity: 0.8;
}

/* Collapsible body */
.subsection-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.subsection.open > .subsection-body {
  max-height: 600px;   /* tall enough for any single subsection */
}


/* ── Page Title (header, column 2) ─────────────────────────────── */
.page-title {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-dim);
  padding-left: 5px;   /* breathing room from the hamburger trigger */
}


/* ── Header Search ──────────────────────────────────────────────── */
/*
  Sits in header grid col 3 (right side). Defined in header.php,
  so it appears on all tool pages automatically.
  Toggle button switches between site:yadon.ltd scoped search
  (default, .active) and open DuckDuckGo.
*/
#header-search {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: end;
  margin-right: 0.75rem;
}

/* Scope toggle — "site" / "web" */
#search-scope {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.45rem;
  background: transparent;
  border: 1px solid rgba(0, 210, 255, 0.18);
  border-radius: 3px;
  color: rgba(0, 210, 255, 0.4);
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

#search-scope:hover {
  border-color: rgba(0, 210, 255, 0.5);
  color: var(--accent);
}

/* .active = site-scoped mode is on (default) */
#search-scope.active {
  background: rgba(0, 210, 255, 0.08);
  border-color: rgba(0, 210, 255, 0.45);
  color: var(--accent);
}

/* Text input */
#search-input {
  font-family: var(--mono);
  font-size: 0.63rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  color: var(--text);
  padding: 0.22rem 0.5rem;
  width: 11rem;
  outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, width 0.2s ease;
}

#search-input::placeholder {
  color: var(--text-dimmer);
}

#search-input:focus {
  border-color: var(--border-hi);
  background: rgba(0, 210, 255, 0.04);
  width: 14rem;
}

/* Submit — inline magnifier SVG, no external dependency */
#search-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 3px;
  color: var(--text-dim);
  padding: 0.22rem 0.45rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.15s ease, border-color 0.15s ease;
}

#search-submit:hover {
  color: var(--accent);
  border-color: rgba(0, 210, 255, 0.45);
}

/* Narrow screens: shrink input */
@media (max-width: 600px) {
  #search-input       { width: 6rem; }
  #search-input:focus { width: 9rem; }
}


/* ── Footer Bar ─────────────────────────────────────────────────── */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.55rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  background: rgba(8, 12, 15, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* Left: logo — links to home page */
.footer-logo a {
  display: block;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.footer-logo a:hover { opacity: 1; }

.footer-logo img {
  height: 24px;
  width: auto;
  display: block;
}

/* Centre: copyright line — raised from 0.20 → 0.48 */
.footer-copy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(200, 216, 224, 0.48);
  text-align: center;
  flex: 1;
}

/* Disclaimer link — matches site-standard accent link convention */
.footer-disclaimer {
  color: var(--accent-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.footer-disclaimer:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Right: visitor info */
.visitor-info {
  display: flex;
  gap: 1.5rem;
  flex-shrink: 0;
}

/* Each key/value pair (e.g. "ip  192.168.1.1") */
.info-item {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.08em;
  color: rgba(200, 216, 224, 0.55);   /* raised from 0.25 */
  white-space: nowrap;
}

/* The key (e.g. "ip", "via") — raised from 0.12 → 0.42 */
.info-item .label {
  color: rgba(200, 216, 224, 0.42);
  margin-right: 0.3em;
}

/* The value (e.g. "1.2.3.4", "Chrome 124") — raised from 0.32 → 0.62 */
.info-item .value {
  color: rgba(200, 216, 224, 0.62);
}


/* ── Citation link ──────────────────────────────────────────────── */
/*
  Matches the site-standard accent link convention (.footer-disclaimer).
  Used at the bottom of tool pages to link to the Citations page.
*/
.cite-link {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dim);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 210, 255, 0.2);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.cite-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}


/* ── Shared Animations ──────────────────────────────────────────── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fadeDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }