/* seo.css — shared styles for the static content pages.
   These pages don't load the app's styles.css (they carry their own inline
   critical CSS), so anything added for them must live here. */

/* ── Byline ───────────────────────────────────────────────────── */
.byline{
  font-size:.82rem; color:#8b93a7; margin:-.2rem 0 1.5rem;
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; line-height:1.5;
}
.byline a{ color:#FFB020; text-decoration:none; }
.byline a:hover{ text-decoration:underline; }

/* ── Sample questions ─────────────────────────────────────────── */
.q-sample{
  margin:1.25rem 0; padding:1.15rem 1.3rem;
  border:1px solid #242a38; border-radius:14px;
  background:rgba(255,255,255,.02);
  overflow-wrap:anywhere;
}
.q-num{
  font-size:.72rem; letter-spacing:.09em; text-transform:uppercase;
  color:#FFB020; margin:0 0 .5rem; font-weight:700;
}
.q-text{ font-weight:600; margin:0 0 .85rem; line-height:1.55; font-size:1.02rem; color:#e8ecf5; }
.q-opts{ margin:0 0 .85rem; padding-left:1.4rem; }
.q-opts li{ margin:.45rem 0; line-height:1.6; color:#8b93a7; overflow-wrap:anywhere; }
.q-opts li.q-correct{ color:#e8ecf5; font-weight:600; }
.q-tick{
  display:inline-block; margin-left:.45rem; padding:.08rem .45rem;
  font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  color:#0d1117; background:#FFB020; border-radius:999px;
  vertical-align:middle; white-space:nowrap;
}
.q-exp{ border-top:1px solid #242a38; padding-top:.7rem; }
.q-exp summary{
  cursor:pointer; font-size:.84rem; font-weight:600; color:#FFB020;
  list-style:none; user-select:none;
}
.q-exp summary::-webkit-details-marker{ display:none; }
.q-exp summary::before{ content:'\25B8  '; }
.q-exp[open] summary::before{ content:'\25BE  '; }
.q-exp p{ font-size:.9rem; line-height:1.65; color:#8b93a7; margin:.6rem 0 0; }
.q-ref{ font-style:italic; opacity:.85; }

/* ── Module cross-links ───────────────────────────────────────── */
.cta-line{ margin:1.6rem 0 2rem; }
.mod-links{ columns:2; column-gap:2rem; margin:.8rem 0 0; padding-left:1.15rem; }
.mod-links li{ margin:.42rem 0; break-inside:avoid; }
.mod-links a{ color:#e8ecf5; text-decoration:none; border-bottom:1px solid #FFB020; }
.mod-links a:hover{ color:#FFB020; }

/* ── Sources block ────────────────────────────────────────────── */
.sources{
  margin:3rem 0 1rem; padding:1.35rem 1.5rem;
  border:1px solid #242a38; border-radius:14px;
  background:rgba(255,255,255,.02);
}
.sources h2{ font-size:1.02rem; margin:0 0 .5rem; }
.sources ul{ margin:.7rem 0 .9rem; padding-left:1.15rem; }
.sources li{ margin:.55rem 0; font-size:.9rem; line-height:1.6; color:#8b93a7; overflow-wrap:anywhere; }
.sources li a{ color:#e8ecf5; text-decoration:none; border-bottom:1px solid #FFB020; }
.sources li a:hover{ color:#FFB020; }
.src-note{ font-size:.82rem; color:#8b93a7; margin:.4rem 0 0; line-height:1.6; }

/* ── Mobile ───────────────────────────────────────────────────── */
@media (max-width:640px){
  .mod-links{ columns:1; }
  .q-sample{ padding:1rem 1.05rem; border-radius:12px; }
  .q-text{ font-size:.98rem; }
  .q-opts{ padding-left:1.25rem; }
  .sources{ padding:1.1rem 1.15rem; border-radius:12px; }
  .byline{ font-size:.78rem; }
  table{ display:block; overflow-x:auto; }
}

/* Long module names can push the inline CTA past the viewport on small
   screens. Let it wrap and never exceed the container. */
.cta-line .cta{
  display:inline-block; max-width:100%; box-sizing:border-box;
  white-space:normal; text-align:center; line-height:1.35;
}
@media (max-width:420px){
  .cta-line .cta{ display:block; width:100%; }
}

/* ── Glossary definition list ─────────────────────────────────── */
.gloss{ margin:1rem 0 2rem; }
.gloss dt{
  font-weight:700; color:#e8ecf5; margin:1.15rem 0 .3rem;
  font-size:1rem; letter-spacing:.005em;
}
.gloss dt:first-child{ margin-top:.4rem; }
.gloss dd{
  margin:0 0 0 0; padding:0 0 0 .95rem;
  border-left:2px solid #242a38;
  color:#8b93a7; line-height:1.65; font-size:.94rem;
}
.gloss dt + dd{ margin-top:.15rem; }
@media (max-width:640px){
  .gloss dd{ padding-left:.8rem; font-size:.9rem; }
  .gloss dt{ font-size:.96rem; }
}