/* orf-theme.css — unified ORF brand layer
   Covers: dashboard, index, questions, about, embed
   Non-destructive: only overrides visuals (no JS/chart logic touched)
*/

/* ===== Brand tokens ===== */
:root{
  --orf-blue:  #1572A5;   /* Primary */
  --orf-navy:  #0D2239;   /* Support */
  --ink:       #1E293B;   /* Body text */
  --muted:     #6B7280;   /* Secondary text */

  --bg:        #F6F8FB;
  --surface:   #FFFFFF;
  --line:      #E7EDF3;

  --text:      var(--ink);
  --primary:   var(--orf-blue);
  --accent:    linear-gradient(135deg,#1572A5 0%,#0D2239 100%);

  --tint-a:    #EAF4FA;
  --tint-b:    #F0FAF7;

  /* Optional chart palette if JS reads from CSS */
  --p1:#1572A5; --p2:#159E97; --p3:#FF6B6B; --p4:#84E1BC; --p5:#F7C680;
  --p6:#BFA8F2; --p7:#F2B38B; --p8:#A5C7FF; --p9:#F5A3C7;
}

/* ===== Base ===== */
html,body{ background:var(--bg); color:var(--text); }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* ===== Site header (top nav) ===== */
.site-header{ background:#fff; border-bottom:1px solid var(--line); }
.site-header .brand span#navTitle{ color:#1572A5; font-weight:800; }
.site-header .nav a.active{ background:#EAF4FA; color:#1572A5; }

/* ===== Page header (dashboard header uses .header) ===== */
.header{
  background: var(--accent);
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.header .header-left h1, .header #siteTitle{ color:#fff; }
.header #siteSubtitle{ color:#dbeafe; }
.header .desc{ color:#e2e8f0; }
.header-actions .btn{ background:rgba(255,255,255,.08); color:#fff;text-decoration:none; }
.header-actions .btn.primary{ background:#fff; color:#1572A5;text-decoration:none; }
.header-actions .btn:hover{ background:rgba(255,255,255,.16);text-decoration:none; }

/* ===== Cards & KPIs ===== */
.card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 2px 10px rgba(21,114,165,.08);
}
.kpi .kpi-label{ color:var(--muted); }
.kpi .kpi-value{ color:#0D2239; font-weight:800; }

/* ===== Buttons & inputs ===== */
.btn{
  background:#fff; color:var(--text);
  border:1px solid var(--line);
  border-radius:12px; padding:8px 12px;
  text-decoration:none;
}
.btn.primary{ background:var(--primary); color:#fff; border-color:var(--primary);text-decoration:none; }
.btn.ghost{ background:#fff; color:var(--primary);text-decoration:none; }
.btn:hover{ box-shadow:0 2px 12px rgba(21,114,165,.15);text-decoration:none; }
.questions-block .search,
.questions-block select,
.filter select,
.date-row input[type="date"]{
  background:#fff; border:1px solid var(--line); border-radius:12px;
}
.label.big{ color:#0D2239; }

/* ===== Dashboard chart cards ===== */
.chart-card{
  background:#fff; border:1px solid var(--line); border-radius:14px;
  box-shadow:0 2px 12px rgba(21,114,165,.10);
}
.chart-title{ color:#1572A5; font-weight:800; }

/* ===== Index (home) ===== */
.hero h1#homeHeading{ color:#0D2239; font-weight:900; }
.hero p#homeIntro{ color:var(--muted); }
.home-sections .section-card{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px;
  box-shadow:0 2px 10px rgba(21,114,165,.08);
}
.home-sections .section-icon{ font-size:20px; }
.home-sections .section-body h3{ margin:0 0 4px 0; color:#0D2239; }

/* ===== Questions list ===== */
.list-questions .q-item{
  display:block; padding:10px 12px; border-bottom:1px solid var(--line);
  color:#0D2239; text-decoration:none; border-radius:8px;
}
.list-questions .q-item:hover{ background:#F5FAFF; }

/* ===== Embed preview ===== */
.embed-frame{
  width:100%; height:640px; border:0; border-radius:12px;
  box-shadow:0 2px 10px rgba(21,114,165,.10); background:#fff;
}
.credit{ color:var(--muted); }

/* ===== Footer ===== */
.site-footer .muted{ color:var(--muted); }

/* ===== Mobile ===== */
@media(max-width:600px){
  .header-actions .btn{ border-radius:12px; }
}