/* QDoc Light Theme — brand-aligned, accessible, drop-in */
/* Font: Montserrat Regular first (fallbacks included) */
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/* ===== Design Tokens ===== */
:root{
  /* Brand base */
  --bg:#EFF5F9;          /* page background */
  --surface:#FAFAFA;     /* cards/panels */
  --text:#18354E;        /* primary text */
  --text-strong:#000000; /* headings / strong text */
  --muted:#5A738A;       /* secondary text */
  --border:#CFD9E3;      /* subtle borders */

  /* Brand accent & UI */
  --accent:#116CB6;      /* primary buttons/links */
  --focus:#0F5FA1;       /* high-contrast focus ring */

  /* Brand accessory colours (icons/graphics) */
  --brand-lime:#93C94F;
  --brand-blue:#4F92C9;
  --brand-lime-soft:#AAD576;
  --brand-blue-soft:#A2C5E2;

  /* Metrics */
  --radius:16px;
  --radius-sm:12px;
  --shadow:0 6px 24px rgba(0,0,0,0.06);
}

/* ===== Base ===== */
html { color-scheme: light; }
* { box-sizing: border-box; }
body{
  margin:0;
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(17,108,182,0.06), transparent 60%),
    var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
::selection{ background: rgba(17,108,182,0.18); }

/* ===== Layout ===== */
.container{ max-width:1100px; margin:0 auto; padding:20px; }
@media (max-width: 640px){ .container{ padding:16px; } }

/* ===== Header & Footer ===== */
.site-header{
  border-bottom:1px solid var(--border);
  background: rgba(255,255,255,0.55);
  backdrop-filter: saturate(150%) blur(4px);
}
.site-header h1{ margin:0; padding-top:10px; color:var(--text-strong); }
.subtitle{ color:var(--muted); margin-top:6px; }
.site-footer{ border-top:1px solid var(--border); padding:20px 0; color:var(--muted); }

/* ===== Search/Input ===== */
.search-box{ margin:24px 0 10px; }
.search-box input[type="search"]{
  width:100%;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-size:18px;
  outline:none;
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.02);
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.search-box input[type="search"]::placeholder{ color:#70889C; }
.search-box input[type="search"]:focus-visible{
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(17,108,182,0.18);
  background:#FFFFFF;
}

/* Meta text */
.hints{ color:var(--muted); font-size:14px; margin-top:8px; }
.stats{ color:var(--muted); margin:8px 0 16px; }

/* ===== Cards & Grid ===== */
.results{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:14px;
}
@media (max-width:380px){ .results{ grid-template-columns:1fr; } }

.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  box-shadow:var(--shadow);
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  will-change:transform;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 28px rgba(0,0,0,0.08);
  border-color:#B8C7D6;
}
.card h3{ margin:0 0 6px; font-size:18px; color:var(--text-strong); }

/* ===== Key–Value Lists ===== */
.kv{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:6px 8px;
  font-size:14px;
  color:var(--muted);
}
.kv .k{ color:var(--muted); }
.kv .v{ color:var(--text); }
@media (max-width:520px){ .kv{ grid-template-columns:120px 1fr; } }

/* ===== Details/Summary (long notes) ===== */
details{
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 10px;
  background:#FFFFFF;
  transition:background .15s ease, border-color .15s ease;
}
details:hover{ border-color:#B8C7D6; }
summary{
  cursor:pointer;
  list-style:none;
  color:var(--text);
  display:flex; align-items:center; gap:.35rem;
}
summary::-webkit-details-marker{ display:none; }
summary::after{ content:" Show more"; color:var(--accent); font-size:12px; margin-left:6px; }
details[open] summary::after{ content:" Show less"; }
.note-full{ margin-top:8px; color:var(--text); }

/* ===== Links & Buttons ===== */
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ text-decoration:underline; }

.button, .btn, button, [role="button"]{
  appearance:none;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:10px 16px;
  border-radius:12px; border:1px solid transparent;
  background:var(--accent); color:#FFFFFF; font-weight:600;
  transition:transform .05s ease, box-shadow .15s ease, background .15s ease;
  box-shadow:0 2px 0 rgba(0,0,0,0.08);
}
.button:hover, .btn:hover, button:hover{ background:#0F5FA1; }
.button:active, .btn:active, button:active{ transform:translateY(1px); }
.button:disabled, .btn:disabled, button:disabled{ background:#9BBFDC; cursor:not-allowed; }

.btn-outline{
  background:#FFFFFF; color:var(--accent); border-color:var(--accent);
}
.btn-outline:hover{ background:#E6F1FB; }

/* ===== Icon/Badge helpers (brand accessory colours) ===== */
.icon-success{ color:var(--brand-lime); }
.icon-info{ color:var(--brand-blue); }
.badge-soft-success{ background:#F2FAEA; color:#2B5A16; border:1px solid #DCEFD0; }
.badge-soft-info{ background:#ECF5FB; color:#153E5A; border:1px solid #D8E8F4; }

/* ===== Focus & Accessibility ===== */
:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:2px;
}
a, button, summary, input, textarea{ -webkit-tap-highlight-color: transparent; }

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; }
  .card:hover{ transform:none; }
}