/* ==========================================================================
   Squran — School of Qur'anic Studies
   Design tokens and base system.

   Tokens are the contract between design and engineering (Brand Guideline §17).
   A colour that is not defined here does not exist in the product.

   Theming follows platform specification §16: bare :root defines the complete
   light palette; the media query redefines ONLY tokens, guarded so an explicit
   light choice beats a dark OS; the [data-theme] block wins the other way.
   Never declare a colour solely inside a media or attribute block.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Amiri:wght@400;700&display=swap');

:root{
  /* --- brand ------------------------------------------------------------ */
  --brand-teal:#0E4B45;
  --brand-teal-deep:#072E2A;
  --brand-teal-light:#2E7268;
  --brand-brass:#B8912A;
  --brand-brass-light:#D9BA6A;

  /* --- surfaces & ink --------------------------------------------------- */
  --paper:#F4F1E8;
  --paper-2:#EAE5D8;
  --surface:#FBFAF5;
  --surface-2:#E7E3D8;
  --ink:#171C1B;
  --ink-2:#4C5654;
  --ink-3:#7F8A87;
  --rule:#D6D1C4;
  --rule-2:#BAB4A4;

  /* --- semantic (interface only, never brand) --------------------------- */
  --ok:#1D6647;
  --warn:#9A5B12;
  --err:#96302F;
  --ok-bg:#E3EFE9;
  --warn-bg:#F6EDDF;
  --err-bg:#F6E6E5;

  /* --- type ------------------------------------------------------------- */
  --font-display:Spectral,Georgia,'Times New Roman',serif;
  --font-sans:'IBM Plex Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'Cascadia Code',monospace;
  --font-arabic:Amiri,'Traditional Arabic','Segoe UI',serif;

  /* --- space: one scale, no arbitrary values ---------------------------- */
  --s1:4px;  --s2:8px;  --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;

  --radius:4px;
  --radius-lg:8px;
  --shadow-1:0 1px 2px rgba(23,28,27,.06);
  --shadow-2:0 10px 28px -16px rgba(23,28,27,.22);
  --motion:180ms cubic-bezier(.2,.6,.2,1);

  --measure:66ch;
  --header-h:64px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0A0D0C;      --paper-2:#101514;
    --surface:#141918;    --surface-2:#1D2422;
    --ink:#E9EBE7;        --ink-2:#A5AFAC;   --ink-3:#78827F;
    --rule:#242C2A;       --rule-2:#38423F;
    --brand-teal:#5FBFB0; --brand-teal-light:#8AD4C7; --brand-teal-deep:#0A1A18;
    --brand-brass:#D9BA6A;
    --ok:#5FC79B; --warn:#D9A55C; --err:#E58C8A;
    --ok-bg:#0F2721; --warn-bg:#2A2113; --err-bg:#2B1616;
    --shadow-1:0 1px 2px rgba(0,0,0,.45);
    --shadow-2:0 12px 30px -16px rgba(0,0,0,.85);
  }
}
:root[data-theme="dark"]{
  --paper:#0A0D0C;      --paper-2:#101514;
  --surface:#141918;    --surface-2:#1D2422;
  --ink:#E9EBE7;        --ink-2:#A5AFAC;   --ink-3:#78827F;
  --rule:#242C2A;       --rule-2:#38423F;
  --brand-teal:#5FBFB0; --brand-teal-light:#8AD4C7; --brand-teal-deep:#0A1A18;
  --brand-brass:#D9BA6A;
  --ok:#5FC79B; --warn:#D9A55C; --err:#E58C8A;
  --ok-bg:#0F2721; --warn-bg:#2A2113; --err-bg:#2B1616;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 12px 30px -16px rgba(0,0,0,.85);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  /* §16.6 HARD REQUIREMENT — the document never scrolls sideways */
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--brand-teal);text-underline-offset:3px}
a:hover{color:var(--brand-teal-light)}

/* Visible focus everywhere — §16.9 */
:focus-visible{outline:2px solid var(--brand-teal);outline-offset:3px;border-radius:var(--radius)}

h1,h2,h3{font-family:var(--font-display);font-weight:600;line-height:1.16;letter-spacing:-.015em;text-wrap:balance;margin:0}
h1{font-size:clamp(30px,5vw,44px)}
h2{font-size:clamp(22px,3.4vw,28px)}
h3{font-size:19px}
p{margin:0 0 var(--s4);max-width:var(--measure)}

.ar{font-family:var(--font-arabic);direction:rtl;unicode-bidi:isolate;line-height:1.9}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow{
  font-family:var(--font-mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--brand-teal);font-weight:500;margin:0 0 var(--s3);
}

/* Wide content scrolls inside its own container, never the page — §16.6 */
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

.wrap{max-width:1140px;margin:0 auto;padding:0 clamp(16px,4vw,40px)}
.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{width:auto;height:auto;overflow:visible;clip:auto;inset-inline-start:var(--s4);top:var(--s4);z-index:100;background:var(--brand-teal);color:var(--paper);padding:var(--s3) var(--s4);border-radius:var(--radius)}

/* ==========================================================================
   Brand lockup
   ========================================================================== */
.lockup{display:flex;align-items:center;gap:var(--s3);text-decoration:none;color:inherit}
.lockup .mark{width:38px;height:38px;flex:none}
.lockup .words{display:flex;flex-direction:column;gap:2px;line-height:1}
.lockup .nm{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink)}
.lockup .ds{font-size:8.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-3)}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.site-header .bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:var(--header-h)}
.nav{display:none;gap:var(--s5);align-items:center}
@media(min-width:900px){.nav{display:flex}}
.nav a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

/* Urdu in the navigation (§16).
   Nastaliq sits on a steep diagonal baseline and descends far below it, so
   at the Latin nav size it renders as an illegible smear and its tails get
   clipped by the row. It needs a larger optical size, real line-height, and
   vertical room — the family is loaded site-wide in the layout head. */
.nav a.ur{
  font-family:'Noto Nastaliq Urdu','Jameel Noori Nastaleeq',serif;
  font-size:17.5px;
  line-height:2.1;
  padding-block:2px;
  display:inline-flex;align-items:center;
}
.nav a.ur:hover{color:var(--ink)}

/* ==========================================================================
   Buttons — §12
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font-family:var(--font-sans);font-size:15px;font-weight:600;line-height:1;
  padding:0 20px;height:40px;min-width:44px;
  border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;
  transition:background var(--motion),border-color var(--motion),color var(--motion);
}
.btn-primary{background:var(--brand-teal);color:var(--paper);border-color:var(--brand-teal)}
.btn-primary:hover{background:var(--brand-teal-light);border-color:var(--brand-teal-light);color:var(--paper)}
.btn-secondary{background:transparent;color:var(--brand-teal);border-color:var(--brand-teal)}
.btn-secondary:hover{background:var(--surface-2)}
.btn-ghost{background:none;border:none;color:var(--brand-teal);padding:0 var(--s2)}
.btn-ghost:hover{text-decoration:underline}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}

/* §16.5 — three form factors, not one stretched layout */
@media(max-width:1179px){.btn{height:48px;padding:0 24px;font-size:16px}}
@media(max-width:767px){.btn{height:52px;font-size:16px}}

/* ==========================================================================
   Cards, pills, tables
   ========================================================================== */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:var(--radius-lg);padding:var(--s5);box-shadow:var(--shadow-1)}
.grid{display:grid;gap:var(--s4)}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

.pill{
  display:inline-block;font-family:var(--font-mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;padding:3px 8px;border-radius:3px;font-weight:500;white-space:nowrap;
}
.pill-ok{background:var(--ok-bg);color:var(--ok)}
.pill-warn{background:var(--warn-bg);color:var(--warn)}
.pill-err{background:var(--err-bg);color:var(--err)}
.pill-neutral{background:var(--surface-2);color:var(--ink-2)}

table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);font-weight:500;background:var(--surface-2);white-space:nowrap;
}
tbody tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   Forms — 16px minimum prevents iOS auto-zoom (§16.6)
   ========================================================================== */
label{display:block;font-size:13.5px;font-weight:600;margin:0 0 var(--s2);color:var(--ink)}
input,select,textarea{
  width:100%;font-family:var(--font-sans);font-size:16px;
  padding:11px var(--s3);color:var(--ink);background:var(--surface);
  border:1px solid var(--rule-2);border-radius:var(--radius);
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brand-teal);outline-offset:1px;border-color:var(--brand-teal)}
.field{margin:0 0 var(--s4)}
.field-error input{border-color:var(--err)}
.field-msg{font-size:13px;color:var(--err);margin:var(--s2) 0 0}

/* ==========================================================================
   Messages — §16.10. Four semantic variants, never a generic grey box.
   ========================================================================== */
.msg{border:1px solid var(--rule);border-left:3px solid;border-radius:var(--radius);padding:var(--s4) var(--s5);margin:0 0 var(--s4)}
.msg h4{margin:0 0 var(--s2);font-size:14px;font-weight:600}
.msg p{margin:0;font-size:14.5px;color:var(--ink-2)}
.msg-ok{border-left-color:var(--ok);background:var(--ok-bg)}
.msg-info{border-left-color:var(--brand-teal);background:var(--surface)}
.msg-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.msg-err{border-left-color:var(--err);background:var(--err-bg)}

/* ==========================================================================
   Breadcrumbs — §16.7. Derived from the route, never hand-maintained.
   ========================================================================== */
.crumbs{display:flex;flex-wrap:nowrap;align-items:center;gap:var(--s2);font-size:13px;
        color:var(--ink-3);padding:var(--s4) 0;overflow-x:auto;scrollbar-width:none}
.crumbs::-webkit-scrollbar{display:none}
.crumbs a{color:var(--ink-2);text-decoration:none;white-space:nowrap}
.crumbs a:hover{color:var(--brand-teal);text-decoration:underline}
.crumbs .sep{color:var(--rule-2);user-select:none}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500;white-space:nowrap}

/* ==========================================================================
   Partial-swap loading state — §14.6
   ========================================================================== */
#page{min-height:50vh}
.is-swapping{opacity:.55;transition:opacity var(--motion)}
.route-progress{
  position:fixed;top:0;left:0;height:2px;width:0;background:var(--brand-brass);
  z-index:60;transition:width 220ms ease-out,opacity 200ms;
}

footer.site-footer{border-top:1px solid var(--rule);margin-top:var(--s9);padding:var(--s5) 0 var(--s8);
                   font-size:13px;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Password reveal (§16.4). The button sits inside the field's box, so the
   input keeps its full width and the control never reflows the form. It is
   mirrored automatically in RTL because it is positioned with inset-inline. */
.pw-wrap{position:relative;display:block;direction:ltr}
.pw-wrap input{width:100%;padding-inline-end:46px}
.pw-eye{
  position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:8px;cursor:pointer;
  color:var(--ink-3);padding:0;
}
.pw-eye:hover{color:var(--ink-2);background:var(--paper-2,rgba(0,0,0,.04))}
.pw-eye:focus-visible{outline:2px solid var(--brand-brass);outline-offset:1px}
.pw-eye[aria-pressed="true"]{color:var(--brand-teal)}

/* Honeypot (§18.4). Bots fill it; people never see it.
   NOT positioned off-screen: a large negative inline offset overflows
   OUTWARD in an RTL document rather than being clipped, and it stretched
   /teach to eleven thousand pixels wide, taking the no-horizontal-scroll
   rule (§16.6) with it. Clipping to a 1px box is direction-agnostic and
   still looks like an ordinary field to a form-filling bot. */
.hp{
  position:absolute !important;width:1px !important;height:1px !important;
  padding:0 !important;margin:-1px !important;border:0 !important;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0;
}