/* Content pages of https://shihab.co.uk (infra/scripts/build-site.py): the shared nav, prose, cards, steps,
   FAQ, link tiles and footer. style.css carries the tokens, the night-sky background and the home page's
   hero; this file adds everything the other pages need, so an inner page loads no JavaScript at all.
   Logical properties only (one stylesheet serves RTL and LTR). */
.skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:5;padding:10px 16px;background:#0b1430;color:var(--ink);border:1px solid var(--gold);border-radius:0 0 10px 10px}
.skip:focus{inset-inline-start:16px}

/* ---- top bar: brand, page nav, language ---- */
.top{flex-wrap:wrap;gap:8px 16px}
.brand{min-height:44px}
.menu{order:3;flex:1 0 100%;margin-top:2px}
.menu ul{display:flex;flex-wrap:wrap;align-items:center;gap:2px 4px;list-style:none;padding:0;margin:0 -10px}
.menu a{display:inline-flex;align-items:center;justify-content:center;padding:9px 10px;min-width:44px;min-height:44px;color:var(--mut);text-decoration:none;font-size:14.5px;border-radius:10px;transition:color .2s,background .2s}
.menu a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.menu a[aria-current=page]{color:var(--gold)}
html[lang=en] .menu a{font-family:var(--lat);font-size:14px}
a.lang{display:inline-flex;align-items:center;justify-content:center;min-height:44px;text-decoration:none;order:2}
@media(min-width:880px){.menu{order:2;flex:1 1 auto;margin-top:0}.menu ul{justify-content:center}a.lang{order:3}}

/* ---- page lead (inner pages) ---- */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--mut);margin-bottom:14px}
.crumb a{display:inline-flex;align-items:center;min-width:44px;min-height:44px;color:var(--mut);text-decoration:none}
.crumb a:hover{color:var(--gold)}
html[lang=en] .crumb{font-family:var(--lat)}
.lead{padding:clamp(14px,4vw,34px) 0 10px;max-width:46rem}
.lead h1,.h-title{font:700 clamp(27px,6.4vw,46px)/1.3 var(--kufi);letter-spacing:-.01em;background:linear-gradient(180deg,#fff 30%,#ffeccb);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang=en] .lead h1,html[lang=en] .h-title{font:600 clamp(26px,5.6vw,42px)/1.22 var(--lat)}
.h-title{margin-top:10px;max-width:22em}
.lead .lede{margin-top:14px}

/* ---- hero call to action ---- */
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:20px}
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:99px;font-weight:600;font-size:15.5px;text-decoration:none;transition:background .2s,border-color .2s,color .2s}
.btn{color:#140d02;background:linear-gradient(135deg,#ffe3a6,var(--amber));border:1px solid rgba(255,210,122,.6)}
.btn:hover{background:linear-gradient(135deg,#fff0cf,#ffab58)}
.btn-ghost{color:var(--gold);background:rgba(255,255,255,.05);border:1px solid var(--line);font-family:var(--lat);font-size:15px}
.btn-ghost:hover{border-color:rgba(255,210,122,.5);background:rgba(255,255,255,.1)}

/* ---- sections and prose ---- */
.sec{padding:clamp(22px,5vw,40px) 0;border-top:1px solid var(--line);max-width:72rem}
main>.sec:first-child{border-top:0}
.sec h2{font:700 clamp(21px,4.4vw,29px)/1.35 var(--kufi);margin-bottom:12px;color:var(--ink)}
html[lang=en] .sec h2{font:600 clamp(20px,4vw,27px)/1.3 var(--lat)}
.sec>p{max-width:44rem;color:#d9dcf0;font-size:clamp(15.5px,3.9vw,17.5px);line-height:1.85}
.sec>p+p{margin-top:12px}
.sec h3{font:700 16.5px/1.45 var(--kufi);color:var(--ink)}
html[lang=en] .sec h3{font:600 16px/1.4 var(--lat)}

/* ---- ticked list ---- */
.ticks{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:9px;max-width:50rem}
.ticks li{position:relative;padding-inline-start:28px;color:#d4d8ee;font-size:15.5px;line-height:1.75}
.ticks li::before{content:"";position:absolute;inset-inline-start:2px;top:.62em;width:9px;height:9px;border-radius:50%;border:2px solid var(--gold);opacity:.8}

/* ---- cards ---- */
.cards{display:grid;gap:12px;margin-top:18px}
.cards article{padding:20px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.04);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.cards svg{width:38px;height:38px;padding:8px;border-radius:12px;background:rgba(255,210,122,.1);border:1px solid rgba(255,210,122,.25);fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.cards h3{margin-bottom:6px}
.cards p{color:var(--mut);font-size:14.5px;line-height:1.7}
@media(min-width:680px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}
@media(min-width:1000px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---- numbered steps ---- */
.steps{list-style:none;counter-reset:s;padding:0;margin:18px 0 0;display:grid;gap:14px;max-width:52rem}
.steps li{counter-increment:s;position:relative;padding-inline-start:52px;min-height:38px}
.steps li::before{content:counter(s);position:absolute;inset-inline-start:0;top:0;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid rgba(255,210,122,.4);background:rgba(255,210,122,.1);color:var(--gold);font:600 15px var(--lat)}
.steps p{margin-top:4px;color:var(--mut);font-size:14.8px;line-height:1.7}

/* ---- questions and answers ---- */
.faq{margin-top:18px;display:grid;gap:4px;max-width:50rem}
.qa{padding:16px 0;border-bottom:1px solid var(--line)}
.qa:last-child{border-bottom:0}
.qa h3{font-size:16.5px}
.qa p{margin-top:6px;color:var(--mut);font-size:15px;line-height:1.75}

/* ---- link tiles (the internal links) ---- */
.tiles{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.tiles a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.03);text-decoration:none;transition:border-color .2s,background .2s}
.tiles a:hover{border-color:rgba(255,210,122,.45);background:rgba(255,255,255,.07)}
.tiles strong{display:block;color:var(--gold);font:700 16px/1.45 var(--kufi)}
html[lang=en] .tiles strong{font:600 15.5px/1.4 var(--lat)}
.tiles span{display:block;margin-top:4px;color:var(--mut);font-size:14.3px;line-height:1.65}
@media(min-width:680px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}

.cta{margin-top:4px}

/* ---- footer ---- */
footer{display:grid;gap:18px 40px;align-items:start;padding-top:26px;margin-top:clamp(18px,5vw,40px)}
.fnav h2{font:600 12.5px/1.4 var(--lat);letter-spacing:.09em;text-transform:uppercase;color:var(--mut);margin-bottom:6px}
.fnav ul{list-style:none;padding:0;margin:0;display:grid;gap:1px}
.fnav a{display:inline-flex;align-items:center;min-inline-size:44px;min-height:44px;color:#cdd2e8;text-decoration:none;font-size:14.3px}
.fnav a:hover{color:var(--gold)}
html[lang=en] .fnav a{font-family:var(--lat);font-size:14px}
.fend{display:grid;gap:8px}
@media(min-width:760px){footer{grid-template-columns:1fr 1fr minmax(0,1.4fr)}}

@media(prefers-reduced-motion:reduce){.btn,.btn-ghost,.tiles a,.menu a{transition:none}}

/* The footer's e-mail link and the legal nav are tap targets: 44 px, as everywhere else on the page. */
.contact a{display:inline-flex;align-items:center;min-height:44px}