/* IslamicOpenFinance: project layer over the kit theme (loaded after it on the landing and the static pages).
   1. Left-to-right fixes where the kit theme still assumes right-to-left (kit gaps, see docs/ARCHITECTURE.md).
   2. Gold, used only in small highlights (never behind text).
   3. Type scale for Alexandria, a wider Latin face than the Persian one the theme was tuned for. */
:root{--gold:#D6A631}

/* 1. LTR. The kit's arrow icon points left (the reading direction of Persian and Arabic): point it right in English. */
html[dir="ltr"] .ico:has(use[href="#i-arrow"]){transform:scaleX(-1)}
/* same specificity as the rule above plus one class, so the calendar's previous and back arrows point left */
html[dir="ltr"] .ical__btn--prev .ico:has(use[href="#i-arrow"]){transform:none}
html[dir="ltr"] .ical__btn--next .ico:has(use[href="#i-arrow"]){transform:scaleX(-1)}
html[dir="ltr"] .s-back .ico:has(use[href="#i-arrow"]){transform:none}
html[dir="ltr"] .toggle input:checked+.toggle__ui::after{transform:translateX(20px)}
/* the calendar legend's dots share the .lg class with the terminal's logo badges (terminal.css loads later) */
.ical__legend .lg{width:14px;height:14px;border-radius:50%;border:0;background:none;display:inline-block;overflow:visible}
.ical__legend .lg--today{background:var(--black)}
.ical__legend .lg--hol{background:var(--orange)}
.ical__legend .lg--pred{border:1.5px dashed var(--orange)}
.ical__legend .lg--wk{background:var(--sink);border:1px solid var(--line-2);border-radius:4px}

/* 2. Gold highlights: the hero's circular rail nodes and the eyebrow dot */
.hero .eyebrow .dot,.eyebrow .dot{background:var(--gold)}

/* 3. Alexandria sets wider than Vazirmatn: one step down for the largest headings so they keep IOF's line breaks */
.hero__title{font-size:clamp(32px,4.6vw,56px);line-height:1.12;letter-spacing:-.01em}
.sec-head h2,.section h2{letter-spacing:-.005em}

/* the landing's blog, podcasts and events boxes before the Worker publishes: the message spans the grid */
[data-lblog]>.cempty,[data-lpod]>.cempty,[data-levents]>.cempty{grid-column:1/-1;text-align:center;margin-inline:auto;max-width:640px}

/* the calendar's market picker keeps inside its card at phone width (the longest English market name is wider than the Persian one) */
.ical__ctl{min-width:0;max-width:100%}
.ical__prof{min-width:0;max-width:100%}
.ical__prof select{flex:1 1 auto;min-width:0;max-width:100%}
/* /calendar/#subscribe: one holiday feed per market (scripts/lib/discovery.mjs) */
.feeds h2{margin:6px 0 8px}
.feeds__card{margin:20px 0 4px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--surface);display:grid;gap:14px;max-width:760px}
.feeds__row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 20px}
.feeds__pick{display:grid;gap:6px;flex:1 1 260px;min-width:0;font-size:13px;color:var(--muted)}
.feeds__pick select{font:inherit;font-size:16px;color:var(--black);min-height:44px;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);width:100%}
.feeds__opts{display:flex;flex-wrap:wrap;gap:8px 16px}
.feeds__opt{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px;cursor:pointer}
.feeds__opt input{width:18px;height:18px;accent-color:var(--orange)}
.feeds__act{display:flex;flex-wrap:wrap;gap:8px}
.feeds__act .btn{flex:1 1 auto}
.feeds__url{display:block;font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}