/* ==========================================================================
   AERO PANEL — shared styles for index.php (METAR/TAF) and mos.php (MOS)
   Extends the site's existing type (B612 / B612fixed / Futura, already
   @font-face'd in aero.css) and color language (#036 blue, #4f496b purple,
   #aaa borders) rather than introducing a new one, so these pages still
   look like the rest of the site. Load this AFTER aero.css.
   ========================================================================== */

:root {
  --brand-blue: #003366;
  --brand-blue-soft: #e7edf5;
  --brand-purple: #4f496b;
  --brand-purple-dark: #38334a;
  --border-gray: #aaa;
  --bg-gray: #f3f3f3;
  --text-dark: #222;
  --text-muted: #888;

  --wind-calm: #2e7d32;
  --wind-calm-bg: rgba(46, 125, 50, 0.12);
  --wind-caution: #b06500;
  --wind-caution-bg: rgba(224, 123, 0, 0.16);
  --wind-warning: #b71c1c;
  --wind-warning-bg: rgba(198, 40, 40, 0.16);
  --wind-extreme: #7b1fa2;
  --wind-extreme-bg: rgba(142, 36, 170, 0.16);

  --radius: 8px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Futura', 'Helvetica', Arial, sans-serif;
  color: var(--text-dark);
  margin: 0;
}

.wx-page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 16px 14px 40px;
}

/* ---------- Ident form ---------- */

.ident-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.ident-label {
  font-family: 'B612', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.ident-input-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.ident-input {
  font-family: 'B612fixed', monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-blue);
  background: #fff;
  border: 2px solid var(--brand-purple);
  border-radius: var(--radius);
  padding: 7px 12px;
  width: 120px;
  outline: none;
}

.ident-input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px var(--brand-blue-soft);
}

.btn-nearest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-purple);
  background: #fff;
  border: 1.5px solid var(--border-gray);
  border-radius: var(--radius);
  padding: 8px 13px;
  cursor: pointer;
}

.btn-nearest:hover { border-color: var(--brand-purple); background: var(--brand-blue-soft); }

/* ---------- Airport header ---------- */

.apt-header {
  background: var(--brand-purple);
  color: #fff;
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}

.apt-header-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }

.apt-header .format_name,
.apt-header .format_id {
  color: #fff; /* override aero.css's #036 — this sits on a dark bar */
}

.apt-header-sub {
  font-size: 0.85rem;
  color: #d8d5e2;
  margin-top: 4px;
}

.apt-badges {
  margin-top: 10px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.badge-pill {
  display: inline-block;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-purple);
  background: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  text-decoration: none;
}
.badge-pill:hover { background: var(--brand-blue-soft); color: var(--brand-blue); }

/* ---------- Layout grid ---------- */

.wx-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 860px) {
  .wx-grid {
    grid-template-columns: 1.3fr 1fr;
    grid-template-areas:
      "metar taf"
      "runways runways";
  }
  .aero-box-metar   { grid-area: metar; }
  .aero-box-taf     { grid-area: taf; }
  .aero-box-runways { grid-area: runways; }
}

/* These override the absolute-positioned floating-label .aero-box from
   aero.css with a cleaner boxed-header version, scoped to this page only
   via the extra classes below — aero.css's own .aero-box is untouched,
   so other pages that rely on it keep their current look. */

.wx-grid .aero-box {
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.wx-grid .aero-box-title {
  position: static;
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 9px 14px;
}

.wx-grid .aero-content { padding: 14px; }
.text-break { overflow-wrap: break-word; word-break: break-word; }

/* ---------- Alerts ---------- */

.wx-alert {
  background: var(--wind-warning-bg);
  color: var(--wind-warning);
  border-left: 3px solid var(--wind-warning);
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.86rem;
  padding: 7px 11px;
  margin-bottom: 10px;
}

.wx-alert-sub { background: var(--brand-blue-soft); color: var(--brand-blue); border-left-color: var(--brand-blue); }

/* ---------- METAR ---------- */

.metar-raw {
  font-family: 'B612fixed', monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--bg-gray);
  border: 1px solid var(--border-gray);
  color: var(--text-dark);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 0 0 12px;
}

.metar-body {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.metar-decoded { flex: 1 1 220px; min-width: 200px; }

.metar-age {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.metar-age a { color: var(--brand-purple); font-weight: 600; }

.metar-diagram { flex: 0 0 auto; max-width: 100%; }
.diagram-svg { width: 100%; max-width: 300px; height: auto; display: block; }

.metar-density-alt-na { font-size: 0.85rem; color: var(--text-muted); }

.meteogram-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-purple);
}

/* ==========================================================================
   WIND / RUNWAY TABLE
   Data shape is one row per metric (headwind/crosswind), one column per
   runway end — so the responsive treatment is a horizontally-scrolling
   table with a sticky first column, not stacked cards.
   ========================================================================== */

.wind-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
}

.wind-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'B612fixed', monospace;
  font-size: 0.82rem;
}

.wind-table th,
.wind-table td {
  padding: 8px 12px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid #e4e4e4;
}

.wind-table thead th {
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  vertical-align: top;
  border-bottom: none;
}

.wind-table thead th small {
  display: block;
  font-family: 'B612fixed', monospace;
  font-weight: 400;
  font-size: 0.68rem;
  color: #d8d5e2;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 2px;
}

.wind-table tbody th[scope="row"] {
  text-align: left;
  font-family: 'B612', Arial, sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-gray);
}

/* Sticky first column so wide runway sets stay orientable while scrolling */
.wind-table .wind-corner,
.wind-table tbody th[scope="row"] {
  position: sticky;
  left: 0;
  z-index: 1;
}
.wind-table .wind-corner { background: var(--brand-purple); z-index: 2; }

.wind-cell { font-weight: 600; }
.wind-glyph { margin-right: 3px; }
.wind-unit { font-size: 0.7rem; color: var(--text-muted); font-family: 'Futura', Arial, sans-serif; margin-left: 2px; }

.wind-calm    { background: var(--wind-calm-bg);    color: var(--wind-calm); }
.wind-caution { background: var(--wind-caution-bg); color: var(--wind-caution); }
.wind-warning { background: var(--wind-warning-bg); color: var(--wind-warning); }
.wind-extreme { background: var(--wind-extreme-bg); color: var(--wind-extreme); }

.wind-tail .wind-glyph { color: var(--wind-warning); }

/* Best runway end — subtle column callout, not a full repaint over
   whatever severity color is already doing the important work */
.wind-table .wind-best { box-shadow: inset 0 0 0 2px var(--brand-blue); }
.wind-best-tag {
  display: block;
  font-size: 0.6rem;
  color: #fff;
  background: var(--brand-blue);
  border-radius: 3px;
  padding: 1px 5px;
  margin-top: 3px;
  font-weight: 700;
}

.wind-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.72rem;
}
.wind-legend-item {
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
  .wx-page { padding: 12px 8px 28px; }
  .ident-input { width: 100px; font-size: 1.1rem; }
  .wx-grid .aero-content { padding: 10px; }
  .wind-table th, .wind-table td { padding: 7px 9px; font-size: 0.76rem; }
}

/* ---------- Focus visibility ---------- */

a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ==========================================================================
   MOS / LAMP TEXT PRODUCTS (mos.php)
   These bulletins are fixed-width text, often 150–250+ characters wide —
   no font-size trick makes that fit a phone screen and stay legible.
   Horizontal scroll at one consistent, readable size (matching the wind
   table's pattern) beats shrinking text down to 10px.
   ========================================================================== */

.mos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 900px) {
  .mos-grid { grid-template-columns: 1fr 1fr; }
}

.mos-grid .aero-box {
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.mos-grid .aero-box-title {
  position: static;
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 9px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.mos-grid .aero-box-title small { text-transform: none; letter-spacing: 0; font-weight: 400; }
.mos-grid .aero-box-title a { color: #d8d5e2; }
.mos-grid .aero-box-title a:hover { color: #fff; }

.mos-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* fade the right edge slightly so it reads as "more content" rather
     than a hard, ambiguous cutoff on mobile */
  background:
    linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
    linear-gradient(to right, rgba(255,255,255,0), #fff 70%) 100% 0,
    linear-gradient(to right, rgba(0,0,0,0.08), rgba(0,0,0,0)),
    linear-gradient(to left, rgba(0,0,0,0.08), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 24px 100%, 24px 100%, 8px 100%, 8px 100%;
  background-attachment: local, local, scroll, scroll;
}

.mos-pre {
  font-family: 'B612fixed', ui-monospace, monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: nowrap;
  padding: 12px 14px;
  margin: 0;
  color: var(--text-dark);
}

.mos-empty {
  padding: 14px;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ==========================================================================
   AIRFIELD INFO (afd.php)
   Mostly prose/lists that already wrap fine — the two genuinely
   non-responsive parts are the wide navaids/distances tables and the
   runway-info + diagram side-by-side layout.
   ========================================================================== */

.afd-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.afd-stack .aero-box {
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.afd-stack .aero-box-title {
  position: static;
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 9px 14px;
}

.afd-stack .aero-content-fixed {
  padding: 14px;
  overflow-wrap: break-word;
}

/* Generic horizontal-scroll wrapper for any data table that can outgrow
   a phone screen — used around the navaids and runway-distance tables. */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table { min-width: 100%; }

ul.no-bullets {
  list-style-type: none;
  padding-left: 20px;
  margin: 0;
}

.afd-rwy-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: flex-start;
}
.afd-rwy-text { flex: 1 1 320px; min-width: 240px; }
.afd-rwy-diagram { flex: 0 0 auto; max-width: 100%; }

.afd-footer-data {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 4px;
  display: block;
}

/* ==========================================================================
   ILS APPROACH DETAIL (ils.php)
   ========================================================================== */

.ils-status-ok { color: var(--wind-calm, #2e7d32); font-weight: 600; }
.ils-status-bad { color: var(--wind-warning, #b71c1c); font-weight: 600; }

.ils-component-title {
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--brand-purple);
  border-bottom: 1px solid var(--border-gray);
  padding-bottom: 4px;
  margin: 14px 0 6px;
}
.ils-component-title:first-child { margin-top: 0; }

.fix-use-badge {
  display: inline-block;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--brand-purple);
  background: var(--brand-blue-soft);
  border-radius: 4px;
  padding: 2px 7px;
  margin-left: 6px;
}

/* ==========================================================================
   PROCEDURE NAV ROW (afd.php) — links to star.php, plus SID/IAP
   placeholders until those exist.
   ========================================================================== */

.proc-nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.proc-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #fff;
  background: var(--brand-purple);
  border-radius: 6px;
  padding: 6px 13px;
  text-decoration: none;
}
.proc-link:hover { background: var(--brand-purple-dark); color: #fff; }
.proc-link-disabled {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-gray);
  border: 1px dashed var(--border-gray);
  border-radius: 6px;
  padding: 6px 13px;
  cursor: not-allowed;
}
.proc-link-disabled .proc-soon {
  font-weight: 400;
  text-transform: none;
  font-size: 0.68rem;
}

/* ==========================================================================
   STAR MAP (star.php)
   ========================================================================== */

.star-layout {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.star-list {
  flex: 0 0 220px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
}
.star-list-item {
  display: block;
  width: 100%;
  text-align: left;
  background: #fff;
  border: none;
  border-bottom: 1px solid var(--border-gray);
  padding: 9px 12px;
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--text-dark);
  cursor: pointer;
}
.star-list-item:last-child { border-bottom: none; }
.star-list-item:hover { background: var(--brand-blue-soft); }
.star-list-item.active { background: var(--brand-purple); color: #fff; }
.star-list-item .rnav-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  background: rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 5px;
}
.star-list-item:not(.active) .rnav-tag {
  background: var(--brand-blue-soft);
  color: var(--brand-purple);
}

.star-map {
  flex: 1 1 380px;
  min-width: 280px;
  height: 420px;
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
}

.star-detail { margin-top: 16px; }
.star-detail-empty { color: var(--text-muted); font-size: 0.88rem; padding: 8px 0; }

.star-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.74rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.star-legend span { display: inline-flex; align-items: center; gap: 5px; }
.star-legend .swatch-line {
  width: 16px;
  height: 0;
  border-top: 3px solid;
  display: inline-block;
}
.star-legend .swatch-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.star-fix-icon .fix-tri {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #555;
  font-size: 11px;
  line-height: 1;
}

/* Overrides Leaflet's default tooltip "balloon" (background, border,
   box-shadow, pointer arrow) — text floats directly over the map with a
   white outline standing in for legibility instead of an opaque box. */
.star-label-tooltip.leaflet-tooltip {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  color: #000;
  font-family: 'B612', Arial, sans-serif;
  font-weight: 700;
  font-size: 11px;
  /* Primary technique: a true equidistant outline, same thickness on
     every side of each letter. */
  -webkit-text-stroke: 3px #fff;
  paint-order: stroke fill;
  /* Fallback for browsers without text-stroke support — eight small
     offsets around the text approximate the same even outline. */
  text-shadow:
    -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff,
    0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff, 1px 0 0 #fff;
}
.star-label-tooltip.leaflet-tooltip::before {
  display: none;
}

.star-controls {
  margin-bottom: 10px;
}
.star-radar-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--text-dark);
  cursor: pointer;
  margin: 0;
}
.star-radar-toggle input { cursor: pointer; }

@media (max-width: 640px) {
  .star-layout { flex-direction: column; }
  .star-list { flex: 0 0 auto; max-height: 180px; }
  .star-map { height: 320px; }
}

/* The ILS_TYPE reference already shown per runway end in afd.php's
   runway list — now a link through to this page instead of plain text. */
a.rwy-ils-link { color: #aaf; text-decoration: underline; }
a.rwy-ils-link:hover { color: #fff; }

/* ==========================================================================
   AIRFIELD FREQUENCIES (freq.php)
   Mostly short 2-column tables (freq / usage) — a responsive multi-column
   grid uses the space far better than one long single-file stack, since
   most boxes here are much shorter than the page is wide.
   ========================================================================== */

.freq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}

.freq-grid .aero-box {
  border: 1px solid var(--border-gray);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
}

.freq-grid .aero-box-title {
  position: static;
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  padding: 9px 14px;
}

.freq-grid .aero-content-fixed {
  padding: 10px 14px;
  overflow-wrap: break-word;
}

.freq-grid table { width: 100%; border-collapse: collapse; }
.freq-grid td, .freq-grid th { padding: 3px 4px; text-align: left; }

/* ==========================================================================
   PILOT REPORTS (pirep.php)
   Each PIREP is one independently-filed report — presenting them as
   distinct cards (rather than one <br>-separated blob) makes it possible
   to actually tell where one ends and the next begins.
   ========================================================================== */

.pirep-list { display: flex; flex-direction: column; gap: 10px; }

.pirep-entry {
  font-family: 'B612fixed', ui-monospace, monospace;
  font-size: 0.85rem;
  line-height: 1.5;
  background: var(--bg-gray);
  border-left: 3px solid var(--brand-purple);
  border-radius: 0 6px 6px 0;
  padding: 8px 12px;
  overflow-wrap: break-word;
}

.pirep-empty {
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 4px 0;
}

.ident-note {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}

/* ==========================================================================
   NAVAID INFORMATION (nav.php)
   A search can return more than one station (e.g. a frequency shared by
   several facilities), so entries need a clear divider between them, and
   each entry's two-column parameter table needs to actually wrap instead
   of being forced into a fixed-width <table><td><td> layout.
   ========================================================================== */

.nav-entry {
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-gray);
}
.nav-entry:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.nav-detail-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}
.nav-detail-flex > div { flex: 1 1 260px; min-width: 220px; }
.nav-detail-flex table { width: 100%; }

.nav-audio-buttons .btn-outline-primary {
  color: var(--brand-purple);
  border-color: var(--brand-purple);
}
.nav-audio-buttons .btn-outline-primary:hover {
  color: #fff;
  background: var(--brand-purple);
  border-color: var(--brand-purple);
}

.nav-search-form .ident-input-row { align-items: flex-end; }
.btn-submit {
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  background: var(--brand-purple);
  border: 1.5px solid var(--brand-purple);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
}
.btn-submit:hover { background: var(--brand-purple-dark); border-color: var(--brand-purple-dark); }

.apt-badges-standalone {
  margin-top: 0;
  margin-bottom: 18px;
}
.apt-badges-standalone .badge-pill {
  background: var(--brand-blue-soft);
  color: var(--brand-purple);
  border: 1px solid var(--border-gray);
}
.apt-badges-standalone .badge-pill:hover {
  background: var(--brand-purple);
  color: #fff;
  border-color: var(--brand-purple);
}

/* ==========================================================================
   SEARCH (search.php)
   Restyles the tablesorter results table to match the site instead of
   raw Bootstrap defaults. Class names referenced dynamically by the page's
   own JS (navaid-blue-button, navaid-magenta-button, sitetable) are kept
   exactly as-is — only their appearance moved out of an inline <style>
   block and into this shared stylesheet.
   ========================================================================== */

.search-input { width: 100%; max-width: 420px; }

#resulttable table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

#resulttable thead th {
  background: var(--brand-purple);
  color: #fff;
  font-family: 'B612', Arial, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: left;
  padding: 8px 10px;
  border: none;
}

#resulttable tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border-gray);
  vertical-align: middle;
}

#resulttable tbody tr:nth-child(even) { background: var(--bg-gray); }
#resulttable tbody tr:hover { background: var(--brand-blue-soft); }

#resulttable .btn {
  font-family: 'B612fixed', monospace;
  font-weight: 700;
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.82rem;
}

#resulttable .btn-outline-secondary {
  color: var(--brand-purple);
  border-color: var(--border-gray);
  background: #fff;
}
#resulttable .btn-outline-secondary:hover {
  color: #fff;
  background: var(--brand-purple);
  border-color: var(--brand-purple);
}

/* NAVAID Blue (VOR, VORTAC, DME, etc.) — matches sectional chart convention.
   Unchanged from the original values. */
.navaid-blue-button {
  background-color: #007bff;
  color: #fff;
  border-color: #007bff;
}
.navaid-blue-button:hover {
  background-color: #0056b3;
  border-color: #004085;
}

/* NAVAID Magenta (NDB, LF/MF, etc.) — matches sectional chart convention.
   Darkened from the original pure #ff00ff: white text on #ff00ff sits
   right around a 2.5:1 contrast ratio, below the 3:1 minimum for button
   text — #d6006e keeps the same hue but is legible. */
.navaid-magenta-button {
  background-color: #d6006e;
  color: #fff;
  border-color: #d6006e;
}
.navaid-magenta-button:hover {
  background-color: #b3005c;
  border-color: #8f004a;
}

/* Airport identifiers in search results — previously plain gray
   (btn-outline-secondary) while navaids got color; now uses the same
   purple the rest of the site already treats as "this is an airport"
   (every apt-header bar), so the three-way legend across the site reads:
   blue = VHF+ navaid, magenta = LF/MF navaid, purple = airport. */
.airfield-button {
  color: var(--brand-purple);
  border-color: var(--brand-purple);
  background: #fff;
}
.airfield-button:hover {
  color: #fff;
  background: var(--brand-purple);
  border-color: var(--brand-purple);
}

/* Same blue/magenta legend applied to the identifier text itself on
   nav.php (rather than a button background), for the same VHF+ / LF-MF
   distinction. Same hex values as the search.php buttons above so the
   color means the same thing everywhere it appears on the site. */
.navid-vhf { color: #007bff; }
.navid-lfmf { color: #d6006e; }

.type-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 0.76rem;
  color: var(--text-muted);
  margin: 10px 0 0;
}
.type-legend span { display: inline-flex; align-items: center; gap: 5px; }
.type-legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ==========================================================================
   SITE NAVIGATION (navbar.php)
   Scoped under .site-navbar rather than overriding Bootstrap's .navbar
   globally, in case anything else on the site uses a plain Bootstrap
   navbar elsewhere.
   ========================================================================== */

.site-navbar {
  background: var(--brand-purple) !important;
  padding: 10px 20px;
}

.site-navbar .navbar-brand {
  font-family: 'B612', Arial, sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  color: #fff !important;
  line-height: 1.15;
}
.site-navbar .navbar-brand .brand-tag {
  display: block;
  font-family: 'Futura', Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: #7ed99a; /* kept close to the original green accent */
}

.site-navbar .navbar-toggler {
  border-color: rgba(255,255,255,0.4);
}
.site-navbar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.site-navbar .navbar-nav .nav-link {
  color: rgba(255,255,255,0.82) !important;
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 8px 12px !important;
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.site-navbar .navbar-nav .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.1);
}
.site-navbar .navbar-nav .nav-item.active .nav-link {
  color: #fff !important;
  background: rgba(255,255,255,0.16);
}

.site-navbar .navbar-notice {
  font-size: 0.76rem;
  color: rgba(255,255,255,0.65);
  margin-top: 10px;
}
.site-navbar .navbar-notice a { color: #fff; text-decoration: underline; }

@media (min-width: 992px) {
  .site-navbar .navbar-notice {
    margin-top: 0;
    margin-left: auto;
    align-self: center;
  }
}

/* ==========================================================================
   SITE FOOTER (footer.inc)
   ========================================================================== */

.site-footer {
  background: var(--brand-purple) !important;
  color: rgba(255,255,255,0.72);
  margin-top: 28px;
  border-top: 3px solid var(--brand-blue);
}
.site-footer small {
  font-family: 'Futura', Arial, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  line-height: 1.7;
}