/* Awqōt Help Center — shared stylesheet for every article under /help/.
   Extracted verbatim from the template Armen provided
   (awqot-help-signup-trial-verification.html's own <style> block) — same
   reuse pattern as css/khutbah-overlay.css being shared across kiosk/
   present/admin-review: one file, every page links it, zero per-page
   restyling. Tokens/components below are unchanged from the template;
   the only additions are the .cat-group/.article-item rules near the end,
   needed because the template's own sidebar only ever showed a flat list
   of categories with no worked-out multi-article-per-category pattern —
   this site has several articles per category, the template didn't. */
:root{
  --teal: #0B4A44;
  --teal-deep: #073430;
  --gold: #C89B3C;
  --gold-soft: #E4C87A;
  --cream: #FAF7F0;
  --ink: #1C2422;
  --ink-soft: #52605C;
  --line: #E4DFD2;
  --radius: 10px;
}
*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: var(--cream);
  color: var(--ink);
  font-family: 'Inter', -apple-system, sans-serif;
  line-height: 1.6;
}
a{ color: var(--teal); }

/* Not in the template (that article never needed inline code) — added for
   the [TAG]-style slide-type/citation markers referenced in the Khutbah &
   Live Session articles, styled to match this design's existing "small
   inset detail" language (.pill's own rounded/tinted treatment) rather
   than left at the browser's bare monospace default. */
code{
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(11,74,68,0.07);
  color: var(--teal-deep);
  padding: 1px 5px;
  border-radius: 4px;
}

/* ---------- Top bar ---------- */
.topbar{
  background: var(--teal-deep);
  color: #F4EFE2;
  padding: 0 28px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  height: 64px;
  border-bottom: 3px solid var(--gold);
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:#F4EFE2;
}
.brand-mark{
  width:30px; height:30px;
  flex-shrink:0;
}
.brand-word{
  font-family:'Lora', serif;
  font-weight:600;
  font-size:1.28rem;
  letter-spacing:0.01em;
  position:relative;
}
.brand-word .q-flourish{
  color: var(--gold-soft);
}
.brand-sub{
  font-size:0.72rem;
  color: rgba(244,239,226,0.65);
  letter-spacing:0.08em;
  text-transform:uppercase;
  margin-top:1px;
  display:block;
}
.topbar-right{
  font-size:0.85rem;
  color: rgba(244,239,226,0.75);
}
.topbar-right a{ color:#F4EFE2; text-decoration:none; border-bottom:1px solid rgba(244,239,226,0.35); }

/* ---------- Layout ---------- */
.shell{
  max-width: 1080px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 48px;
  padding: 40px 28px 80px;
}
@media (max-width: 800px){
  .shell{ grid-template-columns: 1fr; }
  .sidebar{ order:2; }
}

/* ---------- Sidebar ---------- */
.sidebar-title{
  font-size:0.72rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--ink-soft);
  margin: 0 0 12px;
}
.cat-list{ list-style:none; margin:0 0 32px; padding:0; }
.cat-item{
  padding:9px 12px;
  border-radius:8px;
  font-size:0.92rem;
  margin-bottom:2px;
}
.cat-item.active{
  background: rgba(11,74,68,0.08);
  color: var(--teal);
  font-weight:600;
  border-left:3px solid var(--gold);
  padding-left:9px;
}
.cat-item.soon{
  color: #9AA39F;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.pill{
  font-size:0.62rem;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:#EFE9D8;
  color:#93825A;
  padding:2px 6px;
  border-radius:20px;
}

/* A category heading (reuses .cat-item's own look, just as a <div> instead
   of a clickable single-destination <li> now that a category can hold
   several articles) plus its indented article links. .cat-item.active
   still means "this page's own category" exactly as the template used it;
   .article-item.active marks the one open article within it. Kept as
   separate rules rather than folding into .cat-item so that class's
   original template meaning doesn't shift under it. */
.cat-group{ margin-bottom: 4px; }
.article-list{ list-style:none; margin:2px 0 12px; padding:0 0 0 12px; }
.article-item a{
  display:block;
  padding:6px 12px;
  border-radius:6px;
  font-size:0.86rem;
  color: var(--ink-soft);
  text-decoration:none;
}
.article-item a:hover{ background: rgba(11,74,68,0.05); color: var(--teal); }
.article-item.active a{
  color: var(--teal);
  font-weight:600;
  background: rgba(11,74,68,0.08);
}

/* ---------- Article ---------- */
.breadcrumb{
  font-size:0.82rem;
  color: var(--ink-soft);
  margin-bottom:14px;
}
.breadcrumb a{ text-decoration:none; }
article h1{
  font-family:'Lora', serif;
  font-size:2rem;
  line-height:1.25;
  margin:0 0 10px;
  color: var(--teal-deep);
}
.dek{
  color: var(--ink-soft);
  font-size:1.03rem;
  margin: 0 0 28px;
  max-width: 60ch;
}

.callout{
  background: #FFFFFF;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 34px;
}
.callout-label{
  font-size:0.7rem;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color: var(--gold);
  font-weight:700;
  margin-bottom:6px;
}
.callout p{ margin:0; }
.callout ul{ margin:8px 0 0; padding-left:20px; }

.step{
  display:grid;
  grid-template-columns: 40px 1fr;
  gap: 16px;
  margin-bottom: 30px;
}
.step-num{
  width:40px; height:40px;
  border-radius:50%;
  background: var(--teal);
  color: var(--gold-soft);
  font-family:'Lora', serif;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem;
}
.step h2{
  font-size:1.15rem;
  margin: 6px 0 8px;
  color: var(--ink);
}
.step p{ margin: 0 0 8px; color: var(--ink); }
.step .note{
  font-size:0.88rem;
  color: var(--ink-soft);
  background:#F1EEE2;
  border-radius:8px;
  padding:10px 12px;
  margin-top:8px;
}
.doc-list{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding: 14px 18px;
  margin: 10px 0;
}
.doc-list li{ margin-bottom:8px; }
.doc-list li:last-child{ margin-bottom:0; }

.divider{
  border:none;
  border-top:1px solid var(--line);
  margin: 40px 0;
}

details{
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 10px;
}
summary{
  cursor:pointer;
  font-weight:600;
  color: var(--teal-deep);
  list-style:none;
}
summary::-webkit-details-marker{ display:none; }
summary::before{
  content: "＋";
  color: var(--gold);
  margin-right:10px;
  font-weight:700;
}
details[open] summary::before{ content: "－"; }
details p{ margin: 10px 0 0; color: var(--ink-soft); }

.support-box{
  margin-top: 44px;
  background: var(--teal-deep);
  color: #F4EFE2;
  border-radius: var(--radius);
  padding: 24px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.support-box h3{ margin:0 0 4px; font-family:'Lora', serif; font-weight:600; }
.support-box p{ margin:0; color: rgba(244,239,226,0.75); font-size:0.92rem; }
.support-box a{
  background: var(--gold);
  color: var(--teal-deep);
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration:none;
  font-weight:700;
  font-size:0.9rem;
  white-space:nowrap;
}

/* Same visual language as the legal pages' .legal-todo (see css/styles.css)
   for exactly the same reason: a piece of copy that's deliberately not
   finished/confirmed yet, flagged loudly rather than silently guessed at.
   Used here for the one paragraph (document retention) the build brief
   explicitly said not to write until confirmed against code AND signed
   off — see STEP 0 findings. Whoever finishes this replaces the whole
   element with real prose and removes this class, same as the legal
   pages' own convention. */
.help-todo{
  display: block;
  background: color-mix(in srgb, var(--gold) 15%, transparent);
  border: 1px solid var(--gold);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 16px 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
}
.help-todo::before{
  content: "TODO — Armen to confirm: ";
  color: var(--gold);
}

/* ---------- Category index (/help/) ---------- */
/* Not part of the template (that file was a single article) — the
   category browse/landing page needed its own light layout, built to
   match the same tokens/typography rather than introducing new ones. */
.index-hero{
  margin-bottom: 40px;
}
.index-hero h1{
  font-family:'Lora', serif;
  font-size:2.1rem;
  line-height:1.2;
  margin: 0 0 10px;
  color: var(--teal-deep);
}
.index-hero p{
  color: var(--ink-soft);
  font-size:1.03rem;
  max-width: 60ch;
  margin: 0;
}
.index-category{
  margin-bottom: 32px;
}
.index-category h2{
  font-family:'Lora', serif;
  font-size:1.2rem;
  color: var(--teal-deep);
  margin: 0 0 12px;
}
.index-article-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.index-article-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  text-decoration:none;
  color: var(--ink);
}
.index-article-card:hover{ border-color: var(--gold); }
.index-article-card h3{
  font-size:0.98rem;
  margin: 0 0 6px;
  color: var(--teal-deep);
}
.index-article-card p{
  font-size:0.85rem;
  color: var(--ink-soft);
  margin:0;
}