/* styles.css — high-contrast dark theme, flattened subpanels, full-width media */

/* ─ Palette (WCAG-friendly contrast) ─ */
:root{
  --bg: #0d1117;          /* page background */
  --panel: #161b22;       /* section background */
  --elev: #0f1a2a;        /* subtle elevated background */
  --border: #2f3b4a;      /* borders/dividers */
  --text: #e6edf3;        /* primary text */
  --muted: #b7c1cc;       /* secondary text */

  --accent: #ffb02e;      /* warm accent for icons/emphasis */
  --accent-2: #ffd38c;    /* lighter accent */
  --link: #58a6ff;        /* link color */
  --link-hover:#79c0ff;

  --radius: 14px;
  --radius-sm: 10px;
  --tr: .3s cubic-bezier(.4,0,.2,1);
  --maxw: 1280px;         /* wider so images aren't cramped */
}

/* Reset */
*{box-sizing:border-box;margin:0}
html,body{height:100%}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--text);
  font: 400 16px/1.65 Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Layout */
.container{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding: 2rem clamp(1rem, 4vw, 2rem);
}
.site-header,
.site-footer{
  width:min(100%, var(--maxw));
  margin-inline:auto;
  padding: 1.25rem clamp(1rem, 4vw, 2rem);
}
.site-header h1{
  font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.2rem);
}
.tagline{ color:var(--muted); margin-top:.25rem; }
.site-footer{ color:var(--muted); }

/* Top-level sections (keep only this accordion level) */
.section{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--panel);
  margin:1rem 0 1.25rem;
  overflow:hidden;
}
.section > summary{
  display:flex; align-items:center; gap:.6rem;
  cursor:pointer; user-select:none;
  padding:1rem 1.25rem;
  font-weight:700; letter-spacing:.2px;
}
.section > summary svg{
  fill:var(--accent-2);
  transition: transform var(--tr), fill var(--tr);
}
.section[open] > summary svg{ transform: rotate(90deg); }
.section > summary:hover svg{ fill: var(--link); }
.section .content{
  padding: .75rem 1.25rem 1.25rem;
  border-top:1px solid var(--border);
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 10%),
    var(--panel);
}

/* Blocks inside a section (no nested accordions) */
.block{
  background: var(--elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem 1.15rem;
  margin: 1rem 0 1.1rem;
}
.block h2{
  font-size: 1.2rem;
  margin-bottom: .6rem;
}
.block h3{ margin: 1.1rem 0 .4rem; }
.block h4{ margin: .9rem 0 .35rem; }
.subhead{ margin: 1rem 0 .5rem; }
.lead{ color: var(--text); opacity:.95; }

/* Links */
a{ color: var(--link); text-underline-offset: 3px; }
a:hover{ color: var(--link-hover); }

/* Media — full width inside container */
.media{
  width: 100%;
  height: auto;
  display:block;
  border-radius: var(--radius-sm);
  background: #0a0f18;
  border: 1px solid #182335;
  margin: .5rem 0 1rem;
}

/* Video — full width, 16:9 */
.video-container{
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  overflow: hidden;
  width: 100%;
  border-radius: var(--radius);
  margin: 1rem 0 1.25rem;
  background: #0a0f18;
  border: 1px solid #182335;
}
.video-container iframe{
  position:absolute; inset:0;
  width:100%; height:100%; border:0;
}

/* Steps (clearer instruction layout) */
.steps{
  list-style: none;
  padding: 0;
  margin: .4rem 0 .2rem;
}
.steps li{
  display:flex; align-items:flex-start; gap:.7rem;
  padding:.5rem 0;
  border-top:1px dashed rgba(255,255,255,.14);
}
.steps li:first-child{ border-top:0; }
.step-num{
  flex: 0 0 auto;
  min-width: 28px;
  height: 28px;
  border-radius: 8px;
  display:grid; place-items:center;
  font-weight: 700;
  background: linear-gradient(180deg, var(--accent), #ffcf66);
  color:#1c1c1c;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 1px 6px rgba(0,0,0,.35);
}

/* Bullet lists for settings/features */
.bullets{ padding-left: 1.1rem; }

/* Code / kbd */
code, pre{
  background:#0a111c;
  color:#f0f6ff;
  border:1px solid #1b2a41;
  padding:.22rem .5rem;
  border-radius:6px;
  font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
kbd{
  font-family:inherit;
  background:#0f1626;
  color:#e6f0ff;
  border:1px solid #1a2540;
  padding:.08rem .35rem;
  border-radius:6px;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.08);
}

/* Placeholder */
.placeholder{
  color:var(--muted);
  background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 30%), var(--elev);
  border:1px dashed var(--border);
  padding:1rem;
  border-radius:var(--radius-sm);
}

/* FAQ layout for Decals */
.qa-list{ margin:.25rem 0 0; }
.qa{
  padding:.6rem 0;
  border-top:1px dashed rgba(255,255,255,.14);
}
.qa:first-child{ border-top:0; }
.qa .q{ margin:0 0 .25rem; font-weight:700; }
.qa .a{ margin:0; color:var(--muted); }

/* Focus */
:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
}

/* Mobile */
@media (max-width: 700px){
  .container{ padding: 1.25rem 1rem; }
}