/* Hajj guide (hajj.py). Uses the colour tokens from style.css. */
body.hj{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Amiri','Noto Naskh Arabic',sans-serif}
.hj{--hj-read:72ch;--hj-ar:#063d2c}
[data-theme="dark"] .hj{--hj-ar:#bfead6}
.hj-navlink{font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hj .nav-tools{margin-inline-start:auto}
.hj .lang{max-width:9.5rem}
.hj-wrap{padding-top:18px;padding-bottom:48px}
.hj-crumbs ol{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:0 0 18px;padding:0;font-size:.85rem;color:var(--muted)}
.hj-crumbs li+li::before{content:"›";margin-inline-end:6px;color:var(--muted)}

/* hero (contents page) */
.hj-hero{position:relative;min-height:420px;display:flex;align-items:flex-end;color:#fff;overflow:hidden;background:#06281d}
.hj-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.hj-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,30,22,.15),rgba(4,30,22,.85))}
.hj-hero-in{position:relative;z-index:1;padding-top:64px;padding-bottom:36px}
.hj-hero h1{font-size:clamp(2rem,5vw,3.2rem);font-weight:800;max-width:20ch}
.hj-kicker{font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.8rem;opacity:.9;margin:0 0 8px}
.hj-hero .hj-lead{color:#e6f3ee;max-width:62ch}
.hj-stats{font-size:.88rem;opacity:.85;margin:10px 0 0}
.hj-actions{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.hj .btn{display:inline-flex;align-items:center;gap:6px;padding:11px 18px;border-radius:999px;font-weight:700;border:1px solid transparent;cursor:pointer}
.hj .btn-primary{background:var(--gold);color:#1b1300}
.hj .btn-ghost{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.45)}
.hj-book .btn-primary{background:var(--brand);color:#fff}
.hj .btn:hover{text-decoration:none;filter:brightness(1.06)}

/* chapter cards */
.hj-toc-h{margin:26px 0 14px;font-size:1.4rem}
.hj-cards{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.hj-card{display:flex;flex-direction:column;height:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;color:var(--text);box-shadow:var(--shadow-sm);transition:transform .15s,box-shadow .15s}
.hj-card:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow)}
.hj-card img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover}
.hj-card div{padding:14px 16px 16px}
.hj-card h3{font-size:1.06rem;margin:4px 0 6px}
.hj-card p{margin:0;color:var(--muted);font-size:.9rem}
.hj-num{font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text);margin:0}
.hj-badge{display:inline-block;font-size:.68rem;font-weight:700;padding:2px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);vertical-align:middle}

/* chapter layout */
.hj-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;align-items:start}
.hj-article{max-width:var(--hj-read);min-width:0}
.hj-head h1{font-size:clamp(1.7rem,4vw,2.4rem);font-weight:800;margin:4px 0 10px}
.hj-lead{font-size:1.1rem;color:var(--muted);margin:0 0 18px}
.hj-article h2{font-size:1.45rem;margin:38px 0 12px;padding-top:12px;border-top:1px solid var(--border);scroll-margin-top:80px}
.hj-article h3{font-size:1.12rem;margin:24px 0 8px}
.hj-article p,.hj-article li{font-size:1.02rem;line-height:1.75}
.hj-article ul{padding-inline-start:1.3em}
.hj-article li{margin:4px 0}
.hj-steps{list-style:none;counter-reset:st;padding:0;margin:14px 0}
.hj-steps>li{counter-increment:st;position:relative;padding:12px 14px 12px 56px;margin:10px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm)}
[dir="rtl"] .hj-steps>li{padding:12px 56px 12px 14px}
.hj-steps>li::before{content:counter(st);position:absolute;inset-inline-start:12px;top:11px;width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-weight:800;display:grid;place-items:center;font-size:.95rem}
.hj-fig{margin:20px 0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden}
.hj-fig img{width:100%;height:auto;max-height:560px;object-fit:cover;background:var(--surface-2)}
.hj-fig figcaption{padding:10px 14px 12px;font-size:.9rem;color:var(--text)}
.hj-credit{display:block;margin-top:4px;font-size:.74rem;color:var(--muted)}
.hj-credit a{color:var(--muted);text-decoration:underline}
.hj-diagram svg{display:block;width:100%;height:auto;background:var(--surface)}
.hj-diagram svg text{font-family:'Inter',system-ui,sans-serif;fill:var(--text)}
.hj-diagram .dg-muted{fill:var(--muted)}
.hj-diagram .dg-line{stroke:var(--border)}
.hj-diagram .dg-brand{fill:var(--brand)}
.hj-diagram .dg-brand-s{stroke:var(--brand)}
.hj-diagram .dg-gold{fill:var(--gold)}
.hj-diagram .dg-gold-s{stroke:var(--gold)}
.hj-diagram .dg-soft{fill:var(--surface-2)}
.hj-diagram .dg-ink{fill:#111}
.hj-diagram .dg-white{fill:#fff}
.hj-diagram text.dg-on{fill:#fff}
.hj-note{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--r-sm);margin:18px 0;border:1px solid}
.hj-note>span{font-size:1.2rem;line-height:1.5}
.hj-note div{min-width:0}
.hj-warn{background:var(--warn-bg);border-color:color-mix(in srgb,var(--warn) 30%,transparent)}
.hj-tip{background:var(--ok-bg);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.hj-dua{margin:18px 0;padding:16px 18px;border-radius:var(--r);background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 7%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--brand) 25%,var(--border))}
.hj-dua-t{font-weight:700;color:var(--brand-ink);margin-bottom:6px}
[data-theme="dark"] .hj-dua-t{color:var(--brand-2)}
.hj-ar{font-family:'Amiri','Traditional Arabic','Scheherazade New',serif;font-size:1.65rem;line-height:2.1;color:var(--hj-ar);margin:4px 0 10px;text-align:right}
.hj-tr,.hj-mean{margin:6px 0;font-size:.98rem}
.hj-tr{font-style:italic}
.hj-tr span,.hj-mean span{font-style:normal;font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-inline-end:6px}
.hj-src{margin:6px 0 0;font-size:.8rem;color:var(--muted)}
.hj-table{overflow-x:auto;margin:16px 0;border:1px solid var(--border);border-radius:var(--r-sm)}
.hj-table table{border-collapse:collapse;width:100%;font-size:.94rem}
.hj-table th,.hj-table td{padding:9px 12px;text-align:start;vertical-align:top;border-bottom:1px solid var(--border)}
.hj-table th{background:var(--surface-2);font-weight:700}
.hj-table tr:last-child td{border-bottom:0}
.hj-pager{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:40px 0 0}
.hj-pager a{display:block;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);color:var(--text);font-weight:700}
.hj-pager a:hover{text-decoration:none;border-color:var(--brand-2)}
.hj-pager span{display:block;font-size:.78rem;color:var(--muted);font-weight:600;margin-bottom:2px}
.hj-next{text-align:end;grid-column:2}

/* side column */
.hj-sticky{position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto;padding-bottom:12px}
.hj-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);padding:10px 14px;margin-bottom:12px}
.hj-toc summary{font-weight:700;cursor:pointer}
.hj-toc ol{margin:8px 0 0;padding-inline-start:1.2em;font-size:.88rem}
.hj-toc li{margin:5px 0}
.hj-toc a{color:var(--text)}
.hj-all ol{list-style:none;padding:0}
.hj-all li[aria-current] a{color:var(--brand-2);font-weight:700}
.hj-side-links{font-size:.9rem;font-weight:600}

/* whole book */
.hj-cover{padding:20px 0 10px}
.hj-cover h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
.hj-book .hj-kicker{color:var(--gold-text)}
.hj-book-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:16px 22px;margin:18px 0 10px}
.hj-book-toc ol{columns:2;column-gap:32px;margin:10px 0 0}
.hj-book .hj-article{max-width:80ch;margin:0 auto}
.hj-book-ch{padding-top:30px;margin-top:30px;border-top:3px solid var(--brand)}
.hj-footer{border-top:1px solid var(--border);background:var(--surface);padding:22px 0 30px;color:var(--muted);font-size:.9rem}
.hj-footer p{max-width:90ch}

@media (max-width:960px){
  .hj-layout{grid-template-columns:1fr;gap:0}
  .hj-side{order:-1}
  .hj-sticky{position:static;max-height:none}
  .hj-book-toc ol{columns:1}
  .hj-hero{min-height:360px}
}
@media (max-width:560px){
  .container.hj-wrap,.hj .container{padding-left:16px;padding-right:16px}
  .hj-navlink{font-size:.9rem}
  .hj .logo span{display:none}
  .hj-pager{grid-template-columns:1fr}
  .hj-next{grid-column:1}
  .hj-ar{font-size:1.45rem}
  .hj-steps>li{padding-inline-start:50px}
}
@media print{
  .nav,.hj-side,.hj-pager,.hj-footer,.noprint,.hj-crumbs,.skip-link{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .hj-book-ch{break-before:page;border-top:0}
  .hj-fig,.hj-dua,.hj-note,.hj-steps>li,.hj-table{break-inside:avoid}
  .hj-fig img{max-height:9cm}
  .hj-article{max-width:none}
  a{color:#000}
}