/* Youth Forum for Health and Wellbeing: shared brand system.
   Loaded after each page's own styles. */

/* ---------- Tokens ---------- */
:root{
  /* Core */
  --navy:#00205C; --navy-2:#0B2D6B; --navy-3:#163A7E; --navy-line:#2C4E8E;
  --white:#FFFFFF; --paper:#F3F5F9; --line:#D5DCE8;
  --text:#00205C; --text-2:#3E4C6B;          /* on white/paper: 14:1 and 8:1 */
  --text-inv:#FFFFFF; --text-inv-2:#C6D3EA;  /* on navy: 16:1 and 10:1 */

  /* Status */
  --correct:#80BC00; --correct-ink:#00205C;  /* navy on green 7:1 */
  --wrong:#EF3842; --wrong-ink:#FFFFFF;      /* large text only on red */
  --wrong-text:#C4141F;                      /* red text on white 5.9:1 */
  --highlight:#F4A81D; --highlight-ink:#00205C;

  /* Zone accent (set per page with html[data-zone]) */
  --accent:#00205C; --accent-ink:#FFFFFF; --accent-text:#00205C; --accent-on-navy:#FFFFFF; --accent-soft:#E6EAF2;

  /* Type */
  --font:"Source Sans 3","Noto Sans Arabic",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --font-ar:"Noto Sans Arabic","Source Sans 3",system-ui,Tahoma,sans-serif;
  --fs-min:16px; --fs-body:20px; --fs-btn:22px; --fs-h3:28px; --fs-h2:36px; --fs-h1:48px;

  /* Shape and space (8px grid) */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:40px; --s6:48px;
  --r-card:12px; --r-pill:999px;
  --tap:64px;
  --t:200ms;

  /* Legacy page variables mapped onto the brand */
  --display:var(--font) !important; --body:var(--font) !important; --mono:var(--font) !important;
}
html[lang="ar"]{ --font:var(--font-ar); }

html[data-zone="1"]{ --accent:#5B2C86; --accent-ink:#FFFFFF; --accent-text:#5B2C86; --accent-on-navy:#D9C6F0; --accent-soft:#EFE8F6; }
html[data-zone="2"]{ --accent:#F26829; --accent-ink:#00205C; --accent-text:#B3440D; --accent-on-navy:#F89A6B; --accent-soft:#FDECE3; }
html[data-zone="3"]{ --accent:#009ADE; --accent-ink:#00205C; --accent-text:#006C9E; --accent-on-navy:#5CC6F2; --accent-soft:#E3F3FB; }
html[data-zone="4"]{ --accent:#80BC00; --accent-ink:#00205C; --accent-text:#4F7A00; --accent-on-navy:#A5D43F; --accent-soft:#EEF6DC; }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:clip}
body{font-family:var(--font);font-weight:400;font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
b,strong,th{font-weight:700}
h1,h2,h3,h4{font-weight:700;letter-spacing:0}
button,input,select,textarea{font-family:inherit}
:focus-visible{outline:4px solid var(--highlight) !important;outline-offset:3px !important}
img{max-width:100%}
[hidden]{display:none !important}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:1ms !important;animation-iteration-count:1 !important;transition-duration:1ms !important;scroll-behavior:auto !important}
}

/* Shared form controls (used by every page's name/city fields) */
.ui-input,select.ui-input{min-height:var(--tap);border:2px solid var(--line);border-radius:var(--r-card);background:var(--white);color:var(--text);
  font-size:var(--fs-body);padding:0 var(--s2);width:100%}
.ui-input:focus{border-color:var(--navy);outline:none}

/* ---------- Top bar ---------- */
.brandbar{width:100%;display:flex;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap;background:var(--white);color:var(--text);
  border-radius:var(--r-card);padding:var(--s1) var(--s3);margin:var(--s2) auto 0;max-width:1880px;border:1px solid var(--line);
  font-family:var(--font)}
.brandbar .forum{display:block;height:64px;width:auto;flex:none}
.brandbar .zonetag{display:flex;align-items:center;gap:var(--s2);min-width:0;padding-inline-start:var(--s2);border-inline-start:6px solid var(--accent)}
.brandbar .zonetag .zn{font-size:var(--fs-min);font-weight:600;color:var(--text-2);white-space:nowrap}
.brandbar .zonetag b{font-size:22px;font-weight:700;color:var(--accent-text);line-height:1.15}
.brandbar .bb-actions{display:flex;align-items:center;gap:var(--s1) var(--s2);margin-inline-start:auto;flex-wrap:wrap}
.brandbar .bb-btn{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 var(--s3);border-radius:var(--r-pill);
  font:700 20px/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--t),color var(--t),transform 150ms}
.brandbar .bb-btn:active{transform:scale(.97)}
.brandbar .bb-lang{background:var(--white);color:var(--navy);border:2px solid var(--navy)}
.brandbar .bb-lang:hover{background:var(--paper)}
.brandbar .bb-home{background:var(--navy);color:var(--white);border:2px solid var(--navy)}
.brandbar .bb-home:hover{background:var(--navy-3);border-color:var(--navy-3)}
.brandbar .who{display:block;height:64px;width:auto;flex:none}
.brandbar .who[hidden]{display:none}
/* The top bar owns language switching; the page's own button stays in the DOM (logic) but is not shown. */
#lang,#langBtn,[data-act="lang"]{display:none !important}
@media (max-width:760px){
  .brandbar{padding:var(--s1) var(--s2);gap:var(--s1) var(--s2)}
  .brandbar .forum,.brandbar .who{height:48px}
  .brandbar .zonetag{order:3;flex-basis:100%;border-inline-start-width:4px}
  .brandbar .zonetag b{font-size:20px}
  .brandbar .bb-btn{min-height:48px;padding:0 var(--s2);font-size:18px}
}
@media (min-width:1600px){
  .brandbar .forum,.brandbar .who{height:80px}
  .brandbar .zonetag b{font-size:28px}
  .brandbar .zonetag .zn{font-size:20px}
}