/* ============================================================
   CBRC — Chesapeake Bay Radio Control Club
   style.css
   Default theme: DARK.  Light mode applied via [data-theme="light"].
   To retheme: edit the CSS variables in :root (dark) and
   [data-theme="light"] (light) below.
   ============================================================ */

/* ── Theme Variables ──────────────────────────────────────── */
:root {
  /* Brand — same in both themes */
  --cbrc-navy:       #1a2744;
  --cbrc-gold:       #d4a843;
  --nav-height:      64px;

  /* Dark mode (default) */
  --cbrc-red:        #e05252;
  --cbrc-light:      #0a0e1a;   /* page background */
  --cbrc-white:      #111827;   /* card / surface */
  --cbrc-surface-2:  #1a2035;   /* striped rows, hover */
  --cbrc-dark:       #e2e8f0;   /* primary text */
  --cbrc-gray:       #8896a7;   /* muted text */
  --cbrc-border:     #2d3748;
  --heading-color:   var(--cbrc-gold);
  --footer-bg:       #07090f;
  --footer-text:     #8896a7;

  /* Bootstrap overrides for dark */
  --bs-body-color:        #e2e8f0;
  --bs-body-bg:           #0a0e1a;
  --bs-secondary-color:   #8896a7;
  --bs-border-color:      #2d3748;
  --bs-link-color:        #e05252;
  --bs-link-hover-color:  #d4a843;
  color-scheme: dark;
}

[data-theme="light"] {
  --cbrc-red:        #c0392b;
  --cbrc-light:      #f4f6f9;
  --cbrc-white:      #ffffff;
  --cbrc-surface-2:  #f8f9fa;
  --cbrc-dark:       #212529;
  --cbrc-gray:       #6c757d;
  --cbrc-border:     #dee2e6;
  --heading-color:   var(--cbrc-navy);
  --footer-bg:       var(--cbrc-navy);
  --footer-text:     #adb5bd;

  --bs-body-color:        #212529;
  --bs-body-bg:           #f4f6f9;
  --bs-secondary-color:   #6c757d;
  --bs-border-color:      #dee2e6;
  --bs-link-color:        #c0392b;
  --bs-link-hover-color:  #1a2744;
  color-scheme: light;
}

/* ── Reset / Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--cbrc-dark);
  background: var(--cbrc-light);
  margin: 0;
  padding-top: var(--nav-height);
  transition: background 0.25s, color 0.25s;
}

a { color: var(--cbrc-red); }
a:hover { color: var(--cbrc-gold); }

h1, h2, h3, h4 { color: var(--heading-color); font-weight: 700; }

/* ── Navbar ───────────────────────────────────────────────── */
.cbrc-navbar {
  background: var(--cbrc-navy);
  height: var(--nav-height);
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1030;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45);
}

.cbrc-navbar .navbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.cbrc-navbar .navbar-brand img {
  height: 48px;
  width: 48px;
  object-fit: contain;
  border-radius: 50%;
  background: #fff;
  padding: 2px;
}

.cbrc-navbar .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-weight: 500;
  padding: 0.5rem 0.75rem !important;
  transition: color 0.2s;
}

.cbrc-navbar .nav-link:hover,
.cbrc-navbar .nav-link.active { color: var(--cbrc-gold) !important; }

.cbrc-navbar .dropdown-menu {
  background: var(--cbrc-navy);
  border: 1px solid rgba(255,255,255,0.15);
  border-top: 2px solid var(--cbrc-gold);
  border-radius: 0 0 6px 6px;
  min-width: 180px;
}

.cbrc-navbar .dropdown-item {
  color: rgba(255,255,255,0.85);
  font-size: 0.9rem;
  padding: 0.5rem 1.25rem;
}

.cbrc-navbar .dropdown-item:hover {
  background: rgba(255,255,255,0.1);
  color: var(--cbrc-gold);
}

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

/* Theme toggle button */
#theme-toggle {
  background: none;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 20px;
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.3rem 0.7rem;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  line-height: 1;
}
#theme-toggle:hover {
  background: rgba(255,255,255,0.15);
  border-color: var(--cbrc-gold);
  color: var(--cbrc-gold);
}

/* ── Page Header Banner ───────────────────────────────────── */
.page-header {
  background: linear-gradient(135deg, var(--cbrc-navy) 0%, #2c3e6b 100%);
  color: #fff;
  padding: 2.5rem 0 2rem;
  margin-bottom: 2rem;
}
.page-header h1   { color: #fff; margin: 0; }
.page-header .subtitle { color: var(--cbrc-gold); margin: 0.25rem 0 0; font-size: 1rem; }

/* ── Cards ────────────────────────────────────────────────── */
.cbrc-card {
  background: var(--cbrc-white);
  border: 1px solid var(--cbrc-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.2s, box-shadow 0.2s, background 0.25s;
}
.cbrc-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.28);
}
.cbrc-card .card-header {
  background: var(--cbrc-navy);
  color: #fff;
  border-radius: 7px 7px 0 0;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
}
.cbrc-card .card-body { background: var(--cbrc-white); }

/* ── Buttons ──────────────────────────────────────────────── */
.btn-cbrc-primary {
  background: var(--cbrc-red);
  border-color: var(--cbrc-red);
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  transition: background 0.2s, transform 0.1s;
}
.btn-cbrc-primary:hover {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
  transform: translateY(-1px);
}

.btn-cbrc-outline {
  border: 2px solid var(--cbrc-navy);
  color: var(--cbrc-navy);
  font-weight: 600;
  padding: 0.5rem 1.5rem;
  border-radius: 6px;
  background: transparent;
  transition: all 0.2s;
}
[data-theme="light"] .btn-cbrc-outline:hover {
  background: var(--cbrc-navy);
  color: #fff;
}
[data-theme="dark"] .btn-cbrc-outline,
:root .btn-cbrc-outline {
  border-color: var(--cbrc-gold);
  color: var(--cbrc-gold);
}
:root:not([data-theme="light"]) .btn-cbrc-outline:hover {
  background: var(--cbrc-gold);
  color: #111;
}

/* ── Section Titles ───────────────────────────────────────── */
.section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--heading-color);
  padding-bottom: 0.5rem;
  border-bottom: 3px solid var(--cbrc-red);
  margin-bottom: 1.5rem;
  display: inline-block;
}

/* ── Weather Badges ───────────────────────────────────────── */
.condition-badge {
  display: inline-block;
  padding: 0.35em 0.85em;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
}
.condition-excellent { background: rgba(82,180,100,0.18);  color: #52c46e; border: 1px solid rgba(82,180,100,0.35); }
.condition-good      { background: rgba(52,152,219,0.18);  color: #4ab0e0; border: 1px solid rgba(52,152,219,0.35); }
.condition-marginal  { background: rgba(212,168,67,0.18);  color: #d4a843; border: 1px solid rgba(212,168,67,0.35); }
.condition-poor      { background: rgba(224,82,82,0.18);   color: #e05252; border: 1px solid rgba(224,82,82,0.35); }

[data-theme="light"] .condition-excellent { background:#d4edda; color:#155724; border-color:#c3e6cb; }
[data-theme="light"] .condition-good      { background:#d1ecf1; color:#0c5460; border-color:#bee5eb; }
[data-theme="light"] .condition-marginal  { background:#fff3cd; color:#856404; border-color:#ffeeba; }
[data-theme="light"] .condition-poor      { background:#f8d7da; color:#721c24; border-color:#f5c6cb; }

/* METAR raw display */
.metar-raw {
  font-family: 'Courier New', Courier, monospace;
  font-size: 1rem;
  background: #0d1117;
  color: #a6e3a1;
  padding: 1rem 1.5rem;
  border-radius: 8px;
  letter-spacing: 0.05em;
  word-break: break-all;
  line-height: 1.7;
}
.metar-timestamp { font-size: 0.8rem; color: var(--cbrc-gray); margin-top: 0.4rem; }

/* ── Steps (Membership) ───────────────────────────────────── */
.step-item { display:flex; gap:1.25rem; align-items:flex-start; margin-bottom:1.75rem; }
.step-number {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cbrc-navy);
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Gallery Grid ─────────────────────────────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.gallery-grid img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid var(--cbrc-border);
}
.gallery-grid img:hover { transform:scale(1.03); box-shadow:0 6px 20px rgba(0,0,0,0.35); }

/* ── Footer ───────────────────────────────────────────────── */
.cbrc-footer {
  background: var(--footer-bg);
  color: var(--footer-text);
  padding: 2.5rem 0 1.5rem;
  margin-top: 3rem;
}
.cbrc-footer h6 {
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  margin-bottom: 0.75rem;
}
.cbrc-footer a {
  color: var(--footer-text);
  text-decoration: none;
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.9rem;
  transition: color 0.2s;
}
.cbrc-footer a:hover { color: var(--cbrc-gold); }
.cbrc-footer .social-icons a {
  display: inline-block;
  margin-right: 0.75rem;
  font-size: 1.4rem;
  color: var(--footer-text);
  transition: color 0.2s;
}
.cbrc-footer .social-icons a:hover { color: var(--cbrc-gold); }
.cbrc-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.35);
  text-align: center;
}

/* ── Utility ──────────────────────────────────────────────── */
.text-navy     { color: var(--heading-color) !important; }
.text-cbrc-red { color: var(--cbrc-red) !important; }
.bg-navy       { background: var(--cbrc-navy) !important; }
.bg-cbrc-light { background: var(--cbrc-light) !important; }

/* ── Bootstrap component overrides — dark mode ────────────── */

/* Tables */
:root:not([data-theme="light"]) .table {
  color: var(--cbrc-dark);
  border-color: var(--cbrc-border);
  --bs-table-bg: var(--cbrc-white);
  --bs-table-striped-bg: var(--cbrc-surface-2);
  --bs-table-hover-bg: var(--cbrc-surface-2);
  --bs-table-border-color: var(--cbrc-border);
  --bs-table-color: var(--cbrc-dark);
  --bs-table-striped-color: var(--cbrc-dark);
}
:root:not([data-theme="light"]) .table-dark {
  --bs-table-bg: var(--cbrc-navy);
  --bs-table-color: #fff;
  --bs-table-border-color: rgba(255,255,255,0.15);
}
:root:not([data-theme="light"]) .table-sm td,
:root:not([data-theme="light"]) .table-sm th,
:root:not([data-theme="light"]) .table td,
:root:not([data-theme="light"]) .table th {
  border-color: var(--cbrc-border);
}

/* Form controls */
:root:not([data-theme="light"]) .form-control,
:root:not([data-theme="light"]) .form-select {
  background-color: var(--cbrc-surface-2);
  border-color: var(--cbrc-border);
  color: var(--cbrc-dark);
}
:root:not([data-theme="light"]) .form-control:focus,
:root:not([data-theme="light"]) .form-select:focus {
  background-color: var(--cbrc-surface-2);
  border-color: var(--cbrc-gold);
  color: var(--cbrc-dark);
  box-shadow: 0 0 0 0.2rem rgba(212,168,67,0.25);
}
:root:not([data-theme="light"]) .form-control::placeholder { color: var(--cbrc-gray); }
:root:not([data-theme="light"]) .form-select option {
  background: var(--cbrc-surface-2);
  color: var(--cbrc-dark);
}

/* Accordion */
:root:not([data-theme="light"]) .accordion-item {
  background: var(--cbrc-white);
  border-color: var(--cbrc-border);
}
:root:not([data-theme="light"]) .accordion-button {
  background: var(--cbrc-surface-2);
  color: var(--cbrc-dark);
  box-shadow: none;
}
:root:not([data-theme="light"]) .accordion-button:not(.collapsed) {
  background: var(--cbrc-navy);
  color: #fff;
}
:root:not([data-theme="light"]) .accordion-button::after {
  filter: invert(0.8);
}
:root:not([data-theme="light"]) .accordion-body {
  background: var(--cbrc-white);
  color: var(--cbrc-dark);
}

/* Alerts */
:root:not([data-theme="light"]) .alert-warning {
  background: rgba(212,168,67,0.12);
  border-color: rgba(212,168,67,0.35);
  color: #e8bc50;
}
:root:not([data-theme="light"]) .alert-danger {
  background: rgba(224,82,82,0.12);
  border-color: rgba(224,82,82,0.35);
  color: #e87070;
}
:root:not([data-theme="light"]) .alert-success {
  background: rgba(82,196,110,0.12);
  border-color: rgba(82,196,110,0.35);
  color: #5ed17a;
}
:root:not([data-theme="light"]) .alert-info {
  background: rgba(74,176,224,0.12);
  border-color: rgba(74,176,224,0.35);
  color: #6cc5e8;
}
:root:not([data-theme="light"]) .alert-link { color: inherit; font-weight:700; }

/* Outline buttons */
:root:not([data-theme="light"]) .btn-outline-primary {
  color: #79b0ff; border-color: #79b0ff;
}
:root:not([data-theme="light"]) .btn-outline-primary:hover {
  background: #79b0ff; color: #111;
}
:root:not([data-theme="light"]) .btn-outline-danger {
  color: #e05252; border-color: #e05252;
}
:root:not([data-theme="light"]) .btn-outline-danger:hover {
  background: #e05252; color: #fff;
}
:root:not([data-theme="light"]) .btn-outline-secondary {
  color: var(--cbrc-gray); border-color: var(--cbrc-gray);
}
:root:not([data-theme="light"]) .btn-outline-secondary:hover {
  background: var(--cbrc-gray); color: #111;
}
:root:not([data-theme="light"]) .btn-outline-light {
  color: #e2e8f0; border-color: rgba(255,255,255,0.4);
}
:root:not([data-theme="light"]) .btn-outline-light:hover {
  background: rgba(255,255,255,0.15); color: #fff;
}

/* Bootstrap badges / pills */
:root:not([data-theme="light"]) .badge.bg-light { background: var(--cbrc-surface-2) !important; color: var(--cbrc-dark); }

/* List groups */
:root:not([data-theme="light"]) .list-group-item {
  background: var(--cbrc-white);
  border-color: var(--cbrc-border);
  color: var(--cbrc-dark);
}

/* ── Quick-link cards (index.html) ────────────────────────── */
.quicklink-card {
  background: var(--cbrc-white);
  border-radius: 10px;
  padding: 1.5rem 1rem;
  text-align: center;
  text-decoration: none;
  color: var(--cbrc-dark);
  border: 1px solid var(--cbrc-border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s, background 0.25s;
  display: block;
  height: 100%;
}
.quicklink-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  border-color: var(--cbrc-red);
  color: var(--cbrc-dark);
}
.quicklink-card .ql-icon  { font-size:2.4rem; color:var(--cbrc-red); margin-bottom:0.6rem; display:block; }
.quicklink-card .ql-title { font-weight:700; font-size:1rem; color:var(--heading-color); }
.quicklink-card .ql-desc  { font-size:0.82rem; color:var(--cbrc-gray); margin-top:0.25rem; }

/* ── Links page items ─────────────────────────────────────── */
.link-name { font-weight:600; color:var(--heading-color); font-size:0.95rem; }
.link-desc  { font-size:0.82rem; color:var(--cbrc-gray); margin-top:0.1rem; }
.link-icon  { color:var(--cbrc-gold); font-size:1.3rem; flex-shrink:0; margin-top:0.1rem; }

/* ── Video cards ──────────────────────────────────────────── */
.video-card { background:var(--cbrc-white); border:1px solid var(--cbrc-border); border-radius:8px; overflow:hidden; }
.video-card .video-info { padding:0.85rem 1rem; }
.video-card .video-title { font-weight:600; color:var(--heading-color); font-size:0.95rem; margin-bottom:0.25rem; }
.video-card .video-desc  { font-size:0.82rem; color:var(--cbrc-gray); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .page-header { padding:1.5rem 0 1rem; }
  .page-header h1 { font-size:1.6rem; }
  .metar-raw { font-size:0.82rem; }
}