:root{
  /* Dynamic --status-color is injected inline by header.php (per-page) */
  --right-pane: 640px;
  --status-color: #3a3a3a; /* fallback if page doesn't set it */
  --pane-bg: rgba(0,0,0,0.52);
  --pane-radius: 12px;
  --pane-pad: 14px 16px;
  --radar-url: url("https://radar.weather.gov/ridge/standard/KRTX_loop.gif");
  --radar-darken: 0.08;

  /* Nav theming */
  --nav-bg: #141414;
  --nav-fg: #f2f2f2;
  --nav-accent: #2aa198;
  --nav-border: #272727;
  --nav-hover: #1f1f1f;
  --sidebar-width: 250px;
}
* { box-sizing: border-box; }
body{ margin:0; font-family: Arial, Helvetica, sans-serif; background:#0e0e0f; color:#fff; }

/* ====== Top NAV + Mobile Sidebar ====== */
.top-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; background: var(--nav-bg); color: var(--nav-fg);
  border-bottom: 1px solid var(--nav-border); position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: .3px; }
.brand img { width: 28px; height: 28px; border-radius: 4px; }
.nav-links { display: flex; gap: 14px; }
.nav-links a { color: var(--nav-fg); text-decoration: none; font-weight: 600; padding: 8px 10px; border-radius: 6px; }
.nav-links a:hover, .nav-links a:focus { background: var(--nav-hover); outline: none; }
.hamburger { display: none; border: 1px solid var(--nav-border); background: transparent; color: var(--nav-fg); padding: 8px 10px; border-radius: 6px; cursor: pointer; }

/* Sidebar sheet (mobile) */
.sidebar { position: fixed; inset: 0 0 0 auto; width: var(--sidebar-width); max-width: 85vw; background: #101010; color: #fafafa; border-left: 1px solid var(--nav-border); transform: translateX(100%); transition: transform .2s ease; z-index: 60; display: flex; flex-direction: column; }
.sidebar.open { transform: translateX(0); }
.sidebar header { padding: 14px; font-weight: 700; border-bottom: 1px solid var(--nav-border); }
.sidebar a { color: #eaeaea; text-decoration: none; padding: 12px 14px; display: block; border-bottom: 1px solid #161616; }
.sidebar a:hover { background: #181818; }

@media (max-width: 900px) { .nav-links { display: none; } .hamburger { display: inline-flex; } }

/* ===== Top Title ===== */
.top-airfield-title {
  text-align: center; font-size: 28px; font-weight: 700; padding: 18px 10px;
  background: #1a1a1a; color: #f2f2f2; text-shadow: 1px 1px 3px black; border-bottom: 3px solid #444; letter-spacing: 0.5px;
}
@media (max-width: 700px) { .top-airfield-title { font-size: 20px; padding: 14px 8px; } }

/* ====== Split Layout ====== */
.wx-split{ display:grid; grid-template-columns: minmax(360px, 1fr) var(--right-pane); min-height: 380px; border-top: 4px solid var(--status-color); }
.radar-pane{ position:relative; background: #000 center/cover no-repeat; background-image: var(--radar-url); min-height: 380px; }
.radar-pane::after{ content:""; position:absolute; inset:0; background: linear-gradient(to right, rgba(0,0,0,var(--radar-darken)), rgba(0,0,0,0) 35%); pointer-events:none; }
.weather-pane{ padding: var(--pane-pad); background: var(--pane-bg); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-left: 3px solid var(--status-color); display: flex; flex-direction: column; gap: 10px; }
.bigtitle{ font-size: 22px; font-weight: 700; margin: 2px 0 4px; line-height: 1.25; }
.status-pill{ display:inline-flex; align-items:center; gap: 6px; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #fff; color:#000; margin-left: 6px; }
.meta-line{ font-size: 13px; opacity: 0.9; }
.wx-section strong{ display:block; margin: 10px 0 4px; letter-spacing: .3px; }
pre{ white-space: pre-wrap; background: rgba(0,0,0,0.35); padding: 8px 10px; border-radius: 8px; margin: 0; line-height: 1.35; font-size: 14px; }

/* ====== Footer / advisory area ====== */
.advisory{ margin-top: 10px; font-weight: bold; font-size: 24px; text-align: center; color: #ff4d4d; text-shadow: 1px 1px 2px gold; padding: 8px 10px 2px; }
.content{ padding: 20px; text-align: center; }
.content img{ max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }

/* ====== Media Tabs ====== */
.media-tabs { --accent: #2aa198; --bg: #131313; --tab-bg: #1c1c1c; --tab-border: #2a2a2a; --text: #f5f5f5; --panel-bg: #202020; color: var(--text); background: var(--bg); border-bottom: 1px solid #262626; padding: 10px 10px 14px; }
.media-tabs .tabs-container{ max-width: 1100px; margin: 0 auto; }
.media-tabs .tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding-bottom: 6px; }
.media-tabs .tabs button[role="tab"] { appearance: none; background: var(--tab-bg); color: var(--text); border: 1px solid var(--tab-border); border-bottom: 3px solid transparent; padding: 9px 14px; font-weight: 600; border-radius: 8px 8px 0 0; cursor: pointer; white-space: nowrap; transition: border-color .15s, background .15s, color .15s, transform .1s; }
.media-tabs .tabs button[aria-selected="true"] { border-color: var(--tab-border); border-bottom-color: var(--accent); color: #fff; background: #202020; }
.media-tabs .tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-tabs .panels { background: var(--panel-bg); border: 1px solid var(--tab-border); border-radius: 10px; padding: 12px; max-width: 1100px; margin: 0 auto; text-align: left; }
.media-tabs .video-wrap { width: 100%; max-width: 1000px; margin: 0 auto; }
.media-tabs .video-wrap iframe, .media-tabs .video-wrap video { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; border: 0; background: #000; border-radius: 8px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); }

.resource-list { list-style: none; padding-left: 0; margin: 8px 0 0; }
.resource-list li { margin: 8px 0; line-height: 1.45; }
.resource-list a { color: #9bd3ff; text-decoration: none; }
.resource-list a:hover { text-decoration: underline; }

/* ====== Responsive Wx pane stacking ====== */
@media (max-width: 900px){ .wx-split{ grid-template-columns: 1fr; } .weather-pane{ border-left: none; border-top: 3px solid var(--status-color); } .bigtitle{ font-size: 18px; } pre{ font-size: 13px; } }

@supports not (aspect-ratio: 16 / 9) {
  .media-tabs .video-wrap { position: relative; padding-top: 56.25%; }
  .media-tabs .video-wrap iframe, .media-tabs .video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; }
}