/* ============================================================
   GCFL Design System — 2. LAYOUT
   Dark-mode layout overrides. Does NOT override flex/grid structure.
   Only colors, backgrounds, borders. NO !important on layout props.
   Load order: AFTER style.css
   ============================================================ */

/* ── Base body ─────────────────────────────────────────────── */
body {
  background-color: var(--ds-bg);
  color: var(--ds-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* ── Countdown banner ────────────────────────────────────────── */
.suneung-top-banner {
  background-color: #18181b;
  color: #ffffff;
}

.suneung-top-banner:hover {
  background-color: #27272a;
}

.suneung-banner-title { color: rgba(255,255,255,0.9); }
.suneung-banner-timer { color: #ffffff; }

/* Light mode banner stays dark (intentional brand choice) */

/* ── Topbar navigation ───────────────────────────────────────── */
nav.topbar {
  background: rgba(18, 22, 33, 0.95);
  border-bottom: 1px solid var(--ds-border);
  backdrop-filter: blur(16px) saturate(160%);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) nav.topbar {
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--ds-border);
  }
}
[data-theme="light"] nav.topbar { background: rgba(255,255,255,0.92); border-bottom-color: var(--ds-border); }
[data-theme="dark"]  nav.topbar { background: rgba(18,22,33,0.95);    border-bottom-color: var(--ds-border); }

/* Mobile topbar override (single-row flex when hamburger button exists) */
nav.topbar:has(.nav-hamburger-btn) {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  padding: 8px 16px !important;
}

nav.topbar:has(.nav-hamburger-btn) .logo {
  grid-column: unset !important;
  grid-row: unset !important;
  height: 36px !important;
}

nav.topbar:has(.nav-hamburger-btn) .verification-status {
  margin-left: auto !important;
  grid-column: unset !important;
  grid-row: unset !important;
}

nav.topbar a {
  color: var(--ds-text);
  border-radius: var(--ds-r-sm, 6px);
  transition: all 0.18s cubic-bezier(0.4,0,0.2,1);
}

nav.topbar a:hover {
  color: var(--ds-accent);
  background: var(--ds-accent-glow);
}

nav.topbar a.active {
  background: var(--ds-accent);
  color: #ffffff;
  border-color: var(--ds-accent);
  border-radius: var(--ds-r-sm, 6px);
}

/* ── Page header ─────────────────────────────────────────────── */
header {
  /* preserve style.css padding; only fix color */
}

header h1 { color: var(--ds-text); }
header p   { color: var(--ds-muted); }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.breadcrumb { color: var(--ds-muted); }
.breadcrumb a { color: var(--ds-cyan); }

/* ── Home page hero background ──────────────────────────────── */
body.home-page {
  background:
    linear-gradient(rgba(7,9,14,0.90), rgba(7,9,14,0.90)),
    url('./gcfl.jpg') center/cover no-repeat fixed;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) body.home-page {
    background:
      linear-gradient(rgba(248,250,252,0.92), rgba(248,250,252,0.92)),
      url('./gcfl.jpg') center/cover no-repeat fixed;
  }
}
[data-theme="light"] body.home-page {
  background:
    linear-gradient(rgba(248,250,252,0.92),rgba(248,250,252,0.92)),
    url('./gcfl.jpg') center/cover no-repeat fixed;
}

/* ── Cards ───────────────────────────────────────────────────── */
/* Only override color/border; flex/grid/padding come from style.css */
.card {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  color: var(--ds-text);
}

.card h2  { color: var(--ds-text); }
.card p   { color: var(--ds-muted); }

.index-card {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.index-card:hover {
  border-color: var(--ds-accent);
  box-shadow: 0 8px 24px var(--ds-accent-glow);
}

.index-card h2 { color: var(--ds-text); }
.index-card p  { color: var(--ds-muted); }
.index-card a  { color: var(--ds-text); border-color: var(--ds-border); }
.index-card a:hover { color: var(--ds-accent); background: var(--ds-accent-glow); border-color: var(--ds-accent); }

/* ── doc/exam cards ──────────────────────────────────────────── */
.doc-card, .exam-card {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.doc-card:active { background: var(--ds-surface-raised); }
.exam-card:hover { border-color: rgba(139,92,246,0.35); }

/* ── Modal ───────────────────────────────────────────────────── */
.modal-card {
  background: var(--ds-surface);
  border-color: var(--ds-border);
}

.modal-card h3 { color: var(--ds-text); }

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  color: var(--ds-muted);
  border-top-color: var(--ds-border);
}

/* ── Scrollbar dark ─────────────────────────────────────────── */
::-webkit-scrollbar-track { background: rgba(255,255,255,0.03); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.14); }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.25); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) ::-webkit-scrollbar-track { background: rgba(0,0,0,0.03); }
  :root:not([data-theme="dark"]) ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); }
}

/* ── Verification status container (transparent wrapper) ─────── */
.verification-status {
  background: transparent !important;
  border: none !important;
  color: var(--ds-text);
}

/* ── Copy toast ──────────────────────────────────────────────── */
#copyToast {
  background: var(--ds-surface-raised);
  color: var(--ds-text);
  border-color: var(--ds-border);
}