/* ==========================================================================
   BSA UNTOLD — base: fonts, design tokens, bilingual typography, forms, buttons
   Colours (--background, --text-primary, --accent …) are injected from
   Admin → Appearance as an inline <style>, so nothing here hardcodes a colour.
   ========================================================================== */

/* ---- Fonts (self-hosted: fast, private, no third-party requests) ---------- */
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Inter";font-style:italic;font-weight:100 900;font-display:swap;
  src:url(../fonts/inter-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Somar = the supplied BS ACTION Arabic brand font (Arabic script only; Latin falls through to Inter) */
@font-face{font-family:"Somar";font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/somar-Light.woff2) format("woff2"),url(../fonts/original/Somar-Light.otf) format("opentype");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0660-0669}
@font-face{font-family:"Somar";font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/somar-Regular.woff2) format("woff2"),url(../fonts/original/Somar-Regular.otf) format("opentype");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0660-0669}
@font-face{font-family:"Somar";font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/original/Somar-RegularItalic.otf) format("opentype");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0660-0669}
@font-face{font-family:"Somar";font-style:normal;font-weight:600 700;font-display:swap;
  src:url(../fonts/somar-SemiBold.woff2) format("woff2"),url(../fonts/original/Somar-SemiBold.otf) format("opentype");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0660-0669}
@font-face{font-family:"Somar";font-style:normal;font-weight:800 900;font-display:swap;
  src:url(../fonts/somar-Black.woff2) format("woff2"),url(../fonts/original/Somar-Black.otf) format("opentype");
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200F,U+0660-0669}

/* ---- Structural tokens ---------------------------------------------------- */
:root{
  --font-latin:"Inter","Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-ar:"Somar","Inter",system-ui,"Segoe UI",Tahoma,"Noto Sans Arabic",Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --max:1320px; --gutter:clamp(1rem,4.2vw,3rem); --read:42rem; --header-h:68px;
  --ease:cubic-bezier(.2,.7,.2,1); --radius:2px;
  --border-strong:color-mix(in srgb,var(--text-primary) 38%,var(--border));
  --shadow-1:0 1px 0 color-mix(in srgb,var(--text-primary) 6%,transparent);
  --focus:var(--accent);
}

/* ---- Bilingual typography: every value is tuned per script ---------------- */
:root:lang(en),[lang="en"]{
  font-family:var(--font-latin);
  --fs-body:1.0625rem; --lh-body:1.65; --fs-prose:1.1875rem; --lh-prose:1.78;
  --lh-display:.98; --ls-display:-.035em; --ls-title:-.022em; --fw-display:800; --fw-title:700;
  --fs-eyebrow:.72rem; --ls-eyebrow:.16em; --tt-eyebrow:uppercase; --fw-eyebrow:700;
  --display-scale:1; --lh-title:1.12; --word-space:normal; --para-gap:1.45em;
}
:root:lang(ar),[lang="ar"]{
  font-family:var(--font-ar);
  --fs-body:1.06rem; --lh-body:1.95; --fs-prose:1.22rem; --lh-prose:2.1;
  --lh-display:1.32; --ls-display:0; --ls-title:0; --fw-display:900; --fw-title:800;
  --fs-eyebrow:.92rem; --ls-eyebrow:0; --tt-eyebrow:none; --fw-eyebrow:600;
  --display-scale:.92; --lh-title:1.5; --word-space:.04em; --para-gap:1.6em;
}

*,*::before,*::after{box-sizing:border-box}
html:lang(ar){font-size:106.25%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--background);color:var(--text-primary);
  font-size:var(--fs-body);line-height:var(--lh-body);word-spacing:var(--word-space);
  font-feature-settings:"cv05" 1,"cv08" 1;font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
html:lang(ar) body,[lang="ar"]{font-feature-settings:normal}
main{flex:1 0 auto}
img,picture,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:1px}
::selection{background:var(--accent);color:var(--on-accent,#fff)}
.mono{font-family:var(--font-mono);font-size:.92em;letter-spacing:.02em}
.small{font-size:.85em}
.muted{color:var(--text-secondary)}

.sr-only{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;inset-inline-start:1rem;top:-4rem;z-index:100;background:var(--button);color:var(--button-text);padding:.75rem 1.1rem;font-weight:700;text-decoration:none;transition:top .2s}
.skip-link:focus{top:1rem}

/* logos swap with the theme (dark artwork in light mode, light artwork in dark mode) */
.logo--for-dark{display:none}
:root[data-theme="dark"] .logo--for-light{display:none}
:root[data-theme="dark"] .logo--for-dark{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .logo--for-light{display:none}
  :root:not([data-theme]) .logo--for-dark{display:block}
}

.eyebrow{font-size:var(--fs-eyebrow);font-weight:var(--fw-eyebrow);letter-spacing:var(--ls-eyebrow);text-transform:var(--tt-eyebrow);color:var(--text-secondary)}

/* ---- Buttons --------------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;padding:.85rem 1.35rem;min-height:2.75rem;border:1.5px solid var(--button);
  background:var(--button);color:var(--button-text);font-weight:700;font-size:.95rem;line-height:1.1;text-decoration:none;cursor:pointer;border-radius:var(--radius);
  transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease)}
.btn:hover{background:transparent;color:var(--button)}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn.is-disabled{opacity:.5;pointer-events:none}
.btn--ghost{background:transparent;color:var(--text-primary);border-color:var(--border-strong)}
.btn--ghost:hover{background:var(--text-primary);color:var(--background);border-color:var(--text-primary)}
.btn--small{padding:.55rem .9rem;min-height:2.25rem;font-size:.85rem}
.btn--lg{padding:1.05rem 1.8rem;font-size:1.02rem}
.btn--block{display:flex;width:100%}
.btn--danger{background:transparent;color:#c4260f;border-color:#c4260f}
:root[data-theme="dark"] .btn--danger{color:#ff8a76;border-color:#ff8a76}
.btn--danger:hover{background:#c4260f;color:#fff;border-color:#c4260f}
.btn--light{background:#fff;color:#0a0a0a;border-color:#fff}
.btn--light:hover{background:transparent;color:#fff}
.icon{width:1.1em;height:1.1em;flex:none}
[dir="rtl"] .icon--dir,:lang(ar) .icon--dir{transform:scaleX(-1)}
.icon--flip{transform:scaleX(-1)}
[dir="rtl"] .icon--flip,:lang(ar) .icon--flip{transform:none}
.icon--up{transform:rotate(-90deg)}
.link-arrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;text-decoration:none;border-bottom:1.5px solid var(--accent);padding-bottom:.15rem}
.link-arrow:hover{border-color:var(--text-primary)}
.link-plain{color:var(--link);text-decoration:underline;text-underline-offset:.2em}
.icon-btn{display:inline-grid;place-items:center;width:2.6rem;height:2.6rem;background:transparent;border:0;color:var(--text-primary);cursor:pointer;border-radius:var(--radius)}
.icon-btn:hover{background:var(--background-2)}

/* ---- Forms (shared by the public form and the admin) ------------------------ */
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.15rem;min-width:0}
.field>label,.field .label,.field-label{font-weight:700;font-size:.92rem}
.req{color:var(--accent)}
.input,.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=url],.field input[type=password],.field input[type=number],
.field input[type=date],.field input[type=month],.field input[type=datetime-local],.field input[type=search],.field select,.field textarea,input.input,select.input,textarea.input{
  width:100%;padding:.8rem .9rem;background:var(--surface);color:var(--text-primary);border:1.5px solid var(--border-strong);border-radius:var(--radius);
  font-size:1rem;line-height:1.4;transition:border-color .2s,box-shadow .2s}
textarea.input,.field textarea{min-height:7rem;resize:vertical;line-height:1.6}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 30%,transparent)}
.input[aria-invalid=true],.field input[aria-invalid=true],.field select[aria-invalid=true],.field textarea[aria-invalid=true]{border-color:#c4260f}
.field__help,.help{font-size:.84rem;color:var(--text-secondary)}
.field__error{font-size:.88rem;font-weight:600;color:#c4260f}
:root[data-theme="dark"] .field__error{color:#ff8a76}
.field-row{display:grid;gap:0 1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.check{display:flex;gap:.7rem;align-items:flex-start;cursor:pointer;line-height:1.5;margin-bottom:.8rem}
.check input{inline-size:1.15rem;block-size:1.15rem;margin-top:.2rem;flex:none;accent-color:var(--accent)}
fieldset{border:0;margin:0;padding:0;min-width:0}
legend{padding:0;font-weight:800}
.hp{position:absolute;inset-inline-start:-9999px;block-size:1px;overflow:hidden}
input[type=file]{width:100%;padding:.7rem;border:1.5px dashed var(--border-strong);background:var(--background-2);border-radius:var(--radius)}

/* ---- Flash / notices --------------------------------------------------------- */
.flash{padding:.9rem 1.1rem;margin:0 0 1rem;border:1.5px solid var(--border-strong);border-inline-start-width:5px;background:var(--surface);font-weight:600}
.flash--success{border-color:#1a7f4b;color:inherit}
.flash--error{border-color:#c4260f}
.flash--info{border-color:#2f6bff}
.notice{padding:.9rem 1.1rem;border:1.5px solid var(--border-strong);border-inline-start:5px solid var(--accent);background:var(--background-2);font-size:.95rem;margin-block:1rem}
.notice--soft{border:0;background:transparent;padding:0;margin-block:.9rem 0;font-size:.92rem;color:var(--text-secondary)}
.notice a{color:var(--link)}
.notice a[lang="ar"]{font-size:1.15em}
.badge{display:inline-block;padding:.2rem .5rem;font-size:.66rem;font-weight:800;letter-spacing:.12em;border:1.5px solid currentColor;text-transform:uppercase;line-height:1.2}
:lang(ar) .badge{letter-spacing:0;font-size:.78rem}
.badge--original{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}