/* Sidrah Help Centre - shared stylesheet for the hub and every article page.

   Traced from apps/launch/index.html and apps/launch/register.html - the reset,
   body, .wrap, nav and footer blocks below are ports of those pages, kept
   faithful on purpose so the Help Centre reads as the same site. If the launch
   page's shell ever changes, change it here too.

   Sections:
     1. shell      - reset, body, .wrap, nav, head band, footer
     2. hub        - filter box, topic groups, article cards, empty state
     3. article    - breadcrumb, article hero, steps, figures, callouts, related
     4. responsive - one breakpoint at 1000px, matching the rest of the site

   House style: no em dashes and no en dashes anywhere - use " - ". The middot
   "·" is fine, the site already uses it. British English. "salaah", "masjid",
   "masaajid". */

/* ============================ 1. shell ============================ */

* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: #FFFDF8;
  color: #1A2B4A;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1280px; margin: 0 auto; padding-left: 64px; padding-right: 64px; }

/* nav - same as the launch page */
.nav { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; padding-bottom: 22px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 36px; height: 36px; object-fit: contain; }
.brand span { font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 600; color: #5A6A85; }
.pill-navy { background: #16274B; color: #F8F1E4; border-radius: 999px; padding: 10px 22px; font-weight: 800; white-space: nowrap; }

/* header band - same gradient treatment as register.html's .head */
.head { background: linear-gradient(165deg, #EAF2F8 0%, #F8F1E4 55%, #F6E7D2 100%); }
.head .wrap { padding-top: 52px; padding-bottom: 40px; text-align: center; }
.head-ar { font-family: 'Noto Naskh Arabic', serif; font-size: 26px; font-weight: 700; color: #C08A4E; }
.head h1 { font-size: clamp(30px, 3.6vw, 46px); font-weight: 800; letter-spacing: -1.6px; line-height: 1.14; margin-top: 8px; }
.head p { font-size: 17px; color: #5A6A85; line-height: 1.6; margin-top: 14px; max-width: 620px; margin-left: auto; margin-right: auto; }

/* eyebrow-caps section label */
.eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: #C08A4E; }

/* footer - same as the launch page */
.footer { background: linear-gradient(180deg, #F8F1E4, #F6E7D2); }
.footer .wrap { padding-top: 40px; padding-bottom: 40px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img { width: 30px; height: 30px; object-fit: contain; }
.footer-brand div { font-size: 13px; color: #5A6A85; }
.footer-links { display: flex; gap: 22px; font-size: 13px; font-weight: 700; color: #5A6A85; flex-wrap: wrap; }

/* ============================= 2. hub ============================= */

.hub .wrap { padding-top: 36px; padding-bottom: 56px; }

/* filter box - the site's input language (12px radius, coral focus border) */
.filter { max-width: 560px; margin: 0 auto; position: relative; }
.filter input {
  width: 100%; border: 1.5px solid rgba(26,43,74,0.15); border-radius: 12px;
  padding: 13px 16px 13px 44px; font-size: 15px; font-family: inherit; color: #1A2B4A;
  background: #FFFDF8; outline: none;
}
.filter input:focus { border-color: #E8836B; }
.filter input::placeholder { color: #8895AB; }
.filter svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.filter-note { font-size: 12.5px; color: #8895AB; margin-top: 8px; text-align: center; }

/* topic groups. Each group carries its own accent colour in --accent. */
.topic { margin-top: 44px; }
.topic[hidden] { display: none; }
.topic-head { display: flex; align-items: center; gap: 10px; color: var(--accent, #C08A4E); }
.topic-head::after { content: ""; flex: 1; height: 1px; background: rgba(26,43,74,0.08); }
.t-gold  { --accent: #C08A4E; }
.t-coral { --accent: #E8836B; }
.t-red   { --accent: #C94F38; }
.t-navy  { --accent: #16274B; }
.t-teal  { --accent: #2C8C7D; }

/* article cards - 22px radius, same card language as the tier/bento cards */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.hcard {
  display: block; background: #FFFDF8; border: 1px solid rgba(26,43,74,0.08);
  border-radius: 22px; padding: 24px; box-shadow: 0 2px 10px rgba(26,43,74,0.05);
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.hcard:hover { box-shadow: 0 10px 30px rgba(26,43,74,0.10); border-color: rgba(26,43,74,0.16); transform: translateY(-2px); }
.hcard[hidden] { display: none; }
.hcard-accent { display: block; width: 34px; height: 4px; border-radius: 999px; background: var(--accent, #C08A4E); }
.hcard-title { display: block; font-size: 16.5px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.35; margin-top: 14px; }
.hcard-desc { display: block; font-size: 13.5px; color: #5A6A85; line-height: 1.6; margin-top: 8px; }

/* empty state for the filter */
.empty { display: none; text-align: center; background: #F8F1E4; border-radius: 22px; padding: 40px 26px; margin-top: 44px; }
.empty.on { display: block; }
.empty h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.5px; }
.empty p { font-size: 14px; color: #5A6A85; line-height: 1.65; margin-top: 8px; }

/* "Still stuck?" band */
.stuck { background: linear-gradient(180deg, #F8F1E4, #F6E7D2); }
.stuck .wrap { padding-top: 40px; padding-bottom: 40px; text-align: center; }
.stuck h2 { font-size: clamp(22px, 2.4vw, 28px); font-weight: 800; letter-spacing: -0.8px; margin-top: 10px; }
.stuck p { font-size: 15.5px; color: #5A6A85; line-height: 1.65; margin-top: 10px; max-width: 540px; margin-left: auto; margin-right: auto; }
.stuck .cta-btn { display: inline-block; margin-top: 20px; background: #16274B; color: #F8F1E4; border-radius: 999px; padding: 13px 30px; font-size: 15px; font-weight: 800; }

/* =========================== 3. article =========================== */

/* breadcrumb - sits on the tinted head band, above the title */
.crumb { font-size: 13px; font-weight: 700; color: #8895AB; text-align: center; }
.crumb a { color: #5A6A85; }
.crumb a:hover { color: #1A2B4A; }
.crumb .sep { padding: 0 8px; color: #C0AE95; }

.head .head-eyebrow { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--accent, #C08A4E); margin-top: 18px; }
/* version chip - styled like the launch page's .tier-badge pills */
.chip { display: inline-block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.6px; color: #22705F; background: rgba(44,140,125,0.12); border-radius: 999px; padding: 6px 14px; margin-top: 18px; }

/* readable body column - 720px, the same width as register.html's form column */
.article .wrap { max-width: 720px; padding-top: 40px; padding-bottom: 56px; }
.article p { font-size: 15.5px; color: #3C4B68; line-height: 1.75; margin-top: 14px; }
.article ul, .article ol { font-size: 15.5px; color: #3C4B68; line-height: 1.75; margin-top: 14px; padding-left: 22px; }
.article li { margin-top: 6px; }
.article strong { font-weight: 800; color: #1A2B4A; }
.article a.inline { color: #C08A4E; font-weight: 700; text-decoration: underline; }
/* Safety net: a prose link without class="inline" must still look like a link,
   never like body text. Scoped to running copy so cards and chrome stay unstyled. */
.article p a, .article li a { color: #C08A4E; font-weight: 700; text-decoration: underline; }
.article .lede { font-size: 16.5px; color: #5A6A85; }

/* numbered steps. Linkable: give each <section> an id of step-1, step-2 ... */
.step { margin-top: 40px; scroll-margin-top: 24px; }
.step-head { display: flex; align-items: flex-start; gap: 14px; }
.step-num {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; font-size: 15px; font-weight: 800; color: #fff;
  background: linear-gradient(90deg, #F5A574, #E8836B); font-variant-numeric: tabular-nums;
}
.step-title { font-size: 21px; font-weight: 800; letter-spacing: -0.6px; line-height: 1.3; padding-top: 4px; }
.step-title a.anchor { color: #C0AE95; font-weight: 700; opacity: 0; padding-left: 8px; }
.step:hover .step-title a.anchor, .step-title a.anchor:focus { opacity: 1; }
/* the body of a step lines up under the heading text, not under the bubble */
.step-body { padding-left: 48px; }

/* navy variant of the bubble, for steps that are notes rather than actions */
.step-num.navy { background: #16274B; }

/* screenshot figure */
.article figure { margin-top: 22px; }
.article figure img {
  display: block; width: 100%; max-width: 100%; height: auto;
  border-radius: 16px; border: 1px solid rgba(26,43,74,0.1);
  box-shadow: 0 10px 34px rgba(26,43,74,0.07); background: #F8F1E4;
}
.article figcaption { font-size: 12.5px; color: #8895AB; line-height: 1.55; margin-top: 10px; }

/* callouts - "note" is the cream band with a gold accent, "tip" is teal */
.callout { border-radius: 16px; padding: 18px 20px; margin-top: 22px; border-left: 4px solid #C08A4E; background: #F8F1E4; }
.callout .callout-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #C08A4E; }
.callout p { font-size: 14.5px; color: #3C4B68; line-height: 1.7; margin-top: 6px; }
.callout p:first-child { margin-top: 0; }
.callout.tip { border-left-color: #2C8C7D; background: rgba(44,140,125,0.07); }
.callout.tip .callout-label { color: #22705F; }

/* related articles strip */
.related { border-top: 1px solid rgba(26,43,74,0.08); margin-top: 48px; padding-top: 32px; }
.related .cards { grid-template-columns: repeat(2, 1fr); margin-top: 16px; }
.related .hcard { padding: 20px; border-radius: 18px; }
.related .hcard-title { font-size: 15px; margin-top: 12px; }
.related .hcard-desc { font-size: 12.75px; margin-top: 6px; }

/* ========================== 4. responsive ========================= */

@media (max-width: 1000px) {
  .wrap { padding-left: 24px; padding-right: 24px; }
  .nav-links > a:not(.pill-navy) { display: none; }
  /* drop the CTA to a second row (brand on top) only when it stops fitting -
     no overlap, no label wrapping at any width */
  .nav { flex-wrap: wrap; row-gap: 14px; }
  .nav-links { flex-wrap: wrap; gap: 12px; }
  .head h1 { letter-spacing: -1px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 680px) {
  .cards, .related .cards { grid-template-columns: 1fr; }
  .topic { margin-top: 34px; }
  .step-body { padding-left: 0; }
  .step-title { font-size: 19px; }
  .footer .wrap { justify-content: flex-start; }
}