:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f4f7ff;
  --text:#0b1220;
  --muted:#465468;
  --border:rgba(11,18,32,.10);
  --shadow:0 14px 28px rgba(11,18,32,.08);
  --shadowSm:0 10px 18px rgba(11,18,32,.06);
  --accent:#E11D48;            /* Royal Blue */
  --accent2:#FB7185;
  --accentSoft:rgba(225,29,72,.12);
  --accentDeep:#0B0F14;
  --focusBg:rgba(225,29,72,.16);
  --header: #0B0F14;            /* dark to fit white logo */
  --headerText:#ffffff;
  --headerBg:#0B0F14;
  --footerBg:#E11D48;
  --footerText:#ffffff;
  --ring:rgba(225,29,72,.22);
  --chipBg:#eef3ff;
  --chipText:#1E3A8A;
  --danger:#b42318;
  --ok:#067647;

  --radius:22px;
  --radiusSm:14px;
  --container:1120px;

  --font:"Tajawal", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --scale: 1; /* accessibility font scale */
  --lh: 1.7;  /* accessibility line height */
}

html[data-theme="dark"]{
  --bg:#070b14;
  --surface:#0b1220;
  --surface2:#0f1a33;
  --text:#eef3ff;
  --muted:#aab6d3;
  --border:rgba(255,255,255,.12);
  --shadow:0 16px 34px rgba(0,0,0,.55);
  --shadowSm:0 12px 22px rgba(0,0,0,.45);
  --accent:#E11D48;
  --accent2:#FB7185;
  --header:#060a12;
  --headerText:#ffffff;
  --headerBg:#0B0F14;
  --footerBg:#E11D48;
  --footerText:#ffffff;
  --ring:rgba(225,29,72,.35);
  --chipBg:rgba(122,162,255,.12);
  --chipText:#cfe0ff;
}


/* Color palettes (A11y) */
html[data-palette="cb"]{
  --accent:#0B63CE;
  --accent2:#FF7A00;
  --ring:rgba(11,99,206,.38);
  --chipBg:rgba(11,99,206,.10);
  --chipText:#0B63CE;
}
html[data-theme="dark"][data-palette="cb"]{
  --accent:#7db3ff;
  --accent2:#ffb25e;
  --ring:rgba(125,179,255,.35);
  --chipBg:rgba(125,179,255,.10);
  --chipText:#d8e8ff;
}

/* Visual filters */
html.a11y-gray body{filter:grayscale(1);}
html.a11y-invert body{filter:invert(1) hue-rotate(180deg);}
html.a11y-invert img,
html.a11y-invert video,
html.a11y-invert iframe{filter:invert(1) hue-rotate(180deg);}

/* Reduce motion (manual toggle) */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after{
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

html, body{overflow-x:hidden}

html.a11y-contrast{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface2:#f5f7ff;
  --text:#0b1220;
  --muted:#111827;
  --border:rgba(11,18,32,.45);
  --shadow:0 10px 26px rgba(0,0,0,.10);
  --ring:rgba(11,99,206,.55);
  --chipBg:rgba(11,99,206,.14);
  --chipText:#0B63CE;
}
html[data-theme="dark"].a11y-contrast{
  --bg:#000000;
  --surface:#050505;
  --surface2:#0b0b0b;
  --text:#ffffff;
  --muted:#f3f4f6;
  --border:rgba(255,255,255,.55);
  --shadow:0 14px 34px rgba(0,0,0,.55);
  --ring:rgba(125,179,255,.55);
  --chipBg:rgba(125,179,255,.18);
  --chipText:#e6f0ff;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:var(--lh);
  text-rendering:optimizeLegibility;
  font-size: calc(16px * var(--scale));
}
img{max-width:100%; display:block}
a{color:inherit}
a.link{color:var(--accent); text-decoration:none}
a.link:hover{text-decoration:underline}
small{color:var(--muted)}
.container{max-width:var(--container); margin-inline:auto; padding:0 16px}

/* A11y */
.skip-link{
  position:absolute;
  inset-inline-start:12px;
  top:10px;
  padding:10px 12px;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  transform:translateY(-200%);
  transition:transform .2s ease;
  z-index:100000;
}
.skip-link:focus{transform:translateY(0)}
:focus-visible{outline:3px solid var(--ring); outline-offset:3px; border-radius:12px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:60;
  background: var(--headerBg); color:var(--headerText);
  border-bottom:1px solid rgba(255,255,255,.08);

  /* header red line */
  border-bottom: 1px solid rgba(225,29,72,.22);
}

.site-header a{color:var(--headerText)}
.site-header .nav a{color:var(--headerText)}
.site-header .tools .icon-btn{color:var(--headerText)}
.site-header .tools .icon-btn svg{stroke:currentColor}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--headerText); min-width:0}
.brand img{width:clamp(130px, 44vw, 220px)} /* phone: bigger centered logo */
/* Modal */
.modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.55);
  backdrop-filter: blur(10px);
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:1100;
}

.modal.open{display:flex}
.modal-card{width:min(440px,100%);background:var(--surface);border:1px solid var(--border);border-radius:22px;box-shadow:0 18px 60px rgba(0,0,0,.25);overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid var(--border)}
.modal-head strong{font-size:16px}
.modal-body{padding:14px}
.qr-wrap{display:grid;place-items:center;gap:10px}
.qr-wrap img{width:260px;max-width:100%;height:auto;border-radius:16px;border:1px solid var(--border);background:var(--surface2)}
.modal-note{color:var(--muted);font-weight:700;font-size:13px;text-align:center}

/* Footer social icons */
.social-icons{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.social-icons a{width:40px;height:40px;border-radius:14px;border:1px solid var(--border);display:grid;place-items:center;background:rgba(255,255,255,.04)}
.social-icons a:hover{transform:translateY(-1px)}
.social-icons svg{width:18px;height:18px}
.brand .title{display:flex; flex-direction:column; gap:2px; font-weight:800}
.brand .title strong{font-size:14px}
.brand .title span{font-size:12px; opacity:.9; font-weight:600}

/* Desktop nav */
.nav{display:none; align-items:center; gap:10px; flex-wrap:wrap}
.nav a{
  text-decoration:none;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  font-weight:900;
  font-size:14px;
  transition:background .2s ease, transform .08s ease, border-color .2s ease;
}
.nav a:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.18); transform:translateY(-1px)}
.nav a[aria-current="page"]{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.22)}

.tools{display:flex; align-items:center; gap:10px}
.icon-btn{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:var(--headerText);
  border-radius:999px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:900;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.icon-btn:hover{background:rgba(255,255,255,.12)}
.icon{width:16px; height:16px; display:inline-block}
.badge{font-size:11px; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.14)}
.mobile-toggle{display:inline-flex}

/* Drawer */
.drawer{
  position:fixed; inset:0;
  background:rgba(0,0,0,.55);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
  z-index:80;
}
.drawer.open{opacity:1; pointer-events:auto}
.drawer-panel{
  position:absolute;
  top:0; bottom:0;
  inset-inline-end:0;
  width:min(340px, 92vw);
  height: 100dvh;
  max-height: 100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--surface);
  color:var(--text);
  border-inline-start:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  transform:translateX(12px);
  transition:transform .2s ease;
}
.drawer.open .drawer-panel{transform:translateX(0)}
.drawer-top{flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-bottom:10px; border-bottom:1px solid var(--border)}
.drawer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px 0;
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.drawer-links a{
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface2);
  font-weight:900;
}
.drawer-links a:hover{filter:brightness(.98)}
.drawer-links a[aria-current="page"]{border-color:rgba(225,29,72,.35); box-shadow:0 0 0 3px var(--ring)}

/* Page */
.page{padding:18px 0 44px}
.page-title{font-size:26px; line-height:1.25; margin:0 0 10px}
.page-sub{margin:0 0 18px; color:var(--muted)}

/* Hero */
.hero{
  margin-top:14px;
  border-radius:calc(var(--radius) + 6px);
  overflow:hidden;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(30,58,138,.12), rgba(225,29,72,.08)), var(--surface);
  box-shadow:var(--shadow);
}
.hero-inner{display:grid; grid-template-columns:1fr}
.hero-main{padding:16px; display:grid; gap:10px}
.hero-kicker{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.chip{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:var(--chipBg);
  color:var(--chipText);
  border:1px solid rgba(30,58,138,.18);
  font-weight:900;
  font-size:12px;
}
.hero-title{font-size:22px; margin:0; line-height:1.25}
.hero-excerpt{margin:0; color:var(--muted)}
.btn{
  border:1px solid rgba(30,58,138,.22);
  background:var(--accent);
  color:#fff;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  font-weight:900;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn:hover{filter:brightness(1.04)}
.btn.secondary{background:transparent; color:var(--accent)}
.hero-actions{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.hero-aside{padding:12px; border-top:1px solid var(--border); background:rgba(255,255,255,.04)}
.hero-list{display:grid; gap:10px}
.mini{
  display:grid; grid-template-columns:96px 1fr; gap:10px; align-items:center;
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:var(--surface2);
  text-decoration:none;
}
.mini .thumb{height:72px; background:var(--surface)}
.mini img{width:100%; height:100%; object-fit:cover}
.mini h4{margin:0; font-size:14px; line-height:1.25}
.mini p{margin:4px 0 0; font-size:12px; color:var(--muted)}



/* Hero Slider */
.hero-slider .hero-slider-wrap{position:relative; min-height:clamp(360px, 56vh, 520px);}
.hero-slider .hero-slider-wrap{border-radius:calc(var(--radius) + 6px); overflow:hidden; box-shadow:0 24px 60px rgba(11,18,32,.14);}
.hero-slider .hero-slides{position:relative; height:100%; min-height:clamp(360px, 56vh, 520px);}
.hero-slider .hero-slide{position:absolute; inset:0; opacity:0; transform:translateX(-42px); transition:transform .75s cubic-bezier(.2,.8,.2,1), opacity .75s ease;}
.hero-slider .hero-slide.is-active{opacity:1; transform:translateX(0);}
.hero-slider .hero-media{position:absolute; inset:0; display:block;}
.hero-slider .hero-media img{width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.02) contrast(1.02);}
.hero-slider .hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(2,6,23,.05) 0%, rgba(2,6,23,.18) 40%, rgba(2,6,23,.65) 100%);}

 .hero-slider .hero-overlay{position:absolute; inset:auto 0 0 0; padding:16px; display:grid; gap:10px; color:#fff; max-width: 980px;}
.hero-slider .hero-overlay .chip{background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.22)}
.hero-slider .hero-title{color:#fff; text-shadow:0 10px 30px rgba(0,0,0,.35)}
.hero-slider .hero-details{max-height:0; overflow:hidden; transition:max-height .45s ease;}
.hero-slider .hero-slide.details-open .hero-details{max-height:220px;}
.hero-slider .hero-excerpt{color:rgba(255,255,255,.9)}
.hero-slider .tags .tag{background:rgba(255,255,255,.14); border-color: var(--accent); color:#fff}
.hero-slider .btn{backdrop-filter: blur(10px)}
.hero-slider .btn.secondary{border-color:rgba(255,255,255,.35); color:#fff}
.hero-slider .btn.secondary:hover{background:rgba(255,255,255,.12)}

.hero-slider .hero-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:999px; border:1px solid rgba(255,255,255,.28); background:rgba(2,6,23,.35); color:#fff; display:grid; place-items:center; cursor:pointer; z-index:5; box-shadow:0 12px 30px rgba(2,6,23,.35)}
.hero-slider .hero-nav:hover{background:rgba(2,6,23,.5)}
.hero-slider .hero-nav.prev{left:12px}
.hero-slider .hero-nav.next{right:12px}

.hero-slider .hero-dots{position:absolute; bottom:12px; inset-inline:0; display:flex; gap:8px; justify-content:center; z-index:6;}
.hero-slider .hero-dot{width:10px; height:10px; border-radius:999px; border:1px solid rgba(255,255,255,.55); background:rgba(255,255,255,.22); cursor:pointer}
.hero-slider .hero-dot.is-active{width:24px; background:rgba(255,255,255,.9)}

@media(min-width:900px){
  .hero-slider .hero-slider-wrap{min-height:clamp(420px, 48vh, 580px)}
  .hero-slider .hero-slides{min-height:clamp(420px, 48vh, 580px)}
  .hero-slider .hero-overlay{padding:24px 26px; max-width:920px}
  .hero-slider .hero-title{font-size:38px}
}

@media(max-width:520px){
  .hero-slider .hero-nav{display:none}
  /* Mobile: leave room for dots so CTA buttons don't collide */
  .hero-slider .hero-overlay{padding:14px 14px 64px}
  .hero-slider .hero-actions{gap:8px; margin-bottom:6px}
  .hero-slider .hero-dots{bottom:16px}
  .hero-slider .hero-dot{width:9px; height:9px}
  .hero-slider .hero-dot.is-active{width:22px}
  .hero-slider .hero-title{font-size:22px}
}

@media (prefers-reduced-motion: reduce){
  .hero-slider .hero-slide{transition: opacity .35s ease; transform:none !important}
}
/* Sections */
.section{margin-top:22px}
.section-head{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-bottom:12px}
.section-head h2{margin:0; font-size:18px}
.section-head a{font-weight:900; color:var(--accent); text-decoration:none}
.section-head a:hover{text-decoration:underline}

/* Cards */
.grid{display:grid; grid-template-columns:1fr; gap:12px}
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
  box-shadow:0 10px 20px rgba(11,18,32,.06);
  display:flex; flex-direction:column;
}
.card-media{background:var(--surface2); aspect-ratio:16/9; overflow:hidden; position:relative}
.card-media img{width:100%; height:100%; object-fit:cover}
.thumb-badge{
  position:absolute;
  bottom:10px;
  inset-inline-start:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--border);
  font-weight:900;
  font-size:12px;
  color:var(--accent);
}
html[data-theme="dark"] .thumb-badge{
  background:rgba(11,18,32,.78);
  border-color:rgba(255,255,255,.12);
  color:var(--accent);
}
.card-body{padding:12px 12px 14px; display:grid; gap:8px}
.card-title{margin:0; font-size:16px; line-height:1.25}
.meta{display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:12px; align-items:center}
.tags{display:flex; flex-wrap:wrap; gap:6px}
.tag{padding:4px 9px; border-radius:999px; border:1px solid var(--border); background:var(--surface2); font-weight:900; font-size:11px; color:var(--muted)}
.card-actions{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:4px}
.card-actions a{font-weight:900; color:var(--accent); text-decoration:none}
.card-actions a:hover{text-decoration:underline}

/* Filters - updated: dropdown tags */
.filters{display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0 16px}


/* Sub navigation (Investigations split) */
.subnav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 6px;
}
.subnav-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
  box-shadow: var(--shadowSm);
}
.subnav-pill:hover{transform:translateY(-1px)}
.subnav-pill.is-active{
  background: rgba(225,29,72,.14);
  border-color: rgba(225,29,72,.35);
  color: var(--accent);
}
html[data-theme="dark"] .subnav-pill{
  background: rgba(255,255,255,.06);
}
@media (max-width:520px){
  .subnav{gap:8px;margin-top:10px}
  .subnav-pill{flex:1; padding:10px 12px; font-size:12.5px}
}

.input,.select,textarea.input{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
}
.filter-row{display:grid; gap:10px}
.pills{display:none}

/* Post */
.breadcrumb{display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:13px; margin-bottom:10px}
.breadcrumb a{color:var(--accent); text-decoration:none; font-weight:900}
.breadcrumb a:hover{text-decoration:underline}
.post{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.post-cover{aspect-ratio:21/9; background:var(--surface2)}
.post-cover img{width:100%; height:100%; object-fit:cover}
.post-body{padding:16px}
.post-body h1{margin:0 0 10px; font-size:26px; line-height:1.2}
.lead{margin:0 0 14px; color:var(--muted)}
.prose{font-size:16px}
.prose h2{margin:18px 0 10px; font-size:18px}
.prose p{margin:10px 0}
.prose blockquote{
  margin:14px 0;
  padding:12px 14px;
  border-inline-start:4px solid var(--accent);
  background:linear-gradient(90deg, rgba(30,58,138,.10), transparent);
  border-radius:12px;
}
.prose ul{margin:10px 0 10px 18px}

/* Share + QR */
.share{
  margin-top:14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.share .btn{padding:9px 12px; font-size:13px}
.qr{
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  background:var(--surface2);
  display:grid;
  grid-template-columns:1fr;
}
.qr img{width:100%; max-width:260px; margin:0 auto; padding:12px}
.qr .meta{padding:0 14px 14px}

/* Authors */
.authors{margin-top:14px; display:grid; gap:10px}
.author-card{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface2);
  padding:12px;
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.avatar{
  width:56px; height:56px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid var(--border);
  background:var(--surface);
  flex:0 0 auto;
}
.avatar img{width:100%; height:100%; object-fit:cover}
.author-meta{display:grid; gap:4px}
.author-name{margin:0; font-weight:900}
.author-bio{margin:0; color:var(--muted); font-size:13px}
.social{display:flex; gap:8px; margin-top:6px; flex-wrap:wrap}
.social a{
  text-decoration:none;
  border:1px solid var(--border);
  background:var(--surface);
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
}

/* Journalist */
.profile{display:grid; grid-template-columns:1fr; gap:14px}
.profile-card{
  border:1px solid var(--border);
  border-radius:calc(var(--radius) + 6px);
  background:var(--surface);
  box-shadow:var(--shadow);
  padding:16px;
}
.profile-top{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.profile-top .avatar{width:92px; height:92px; border-radius:26px}
.profile-top h1{margin:0; font-size:22px}
.profile-top p{margin:4px 0 0; color:var(--muted)}
hr.sep{border:0; border-top:1px solid var(--border); margin:14px 0}

/* Footer */
.site-footer{
  margin-top:40px;
  background: var(--footerBg);
  color: var(--footerText);
  border-top:1px solid rgba(255,255,255,.08);
}
.footer-inner{padding:22px 0; display:grid; gap:18px}
.footer-grid{display:grid; grid-template-columns:1fr; gap:16px}
.footer-box{
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18);
  border-radius:18px;
  padding:14px;
}

.footer-box h3{margin:0 0 10px; font-size:14px}
.footer-box a{color:#fff; text-decoration:none; font-weight:900}
.footer-box a:hover{text-decoration:underline}
.footer-brand{display:flex; gap:12px; align-items:center}
.footer-brand img{width:76px} /* bigger */
.footer-small{opacity:.85; font-size:12px; margin:0}

/* Loader */
.loader{
  position:fixed; inset:0;
  background:radial-gradient(1200px 600px at 50% -10%, rgba(225,29,72,.45), transparent 60%),
             linear-gradient(180deg, rgba(6,10,18,.95), rgba(6,10,18,.98));
  display:flex; align-items:center; justify-content:center;
  z-index:9999;
  opacity:1;
  transition:opacity .35s ease;
}
.loader.hide{opacity:0; pointer-events:none}
.loader-card{
  display:grid; place-items:center; gap:12px; text-align:center;
  padding:18px 22px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.loader-card img{width:120px}
.spinner{
  width:46px; height:46px; border-radius:50%;
  border:3px solid rgba(255,255,255,.18);
  border-top-color:rgba(255,255,255,.78);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Floating A11y button + panel */
html[dir="ltr"] .a11y-fab{right:18px; left:auto;}
html[dir="rtl"] .a11y-fab{left:18px; right:auto;}
html[dir="ltr"] .a11y-panel{right:18px; left:auto;}
html[dir="rtl"] .a11y-panel{left:18px; right:auto;}
.a11y-fab,.a11y-panel{z-index:999;}

.a11y-fab{
  position:fixed;
  bottom:18px;
  inset-inline-end:18px;
  z-index:90;
  width:54px; height:54px;
  border-radius:18px;
  border:1px solid var(--border);
  background:var(--accent);
  color:#fff;
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  cursor:pointer;
}
.a11y-fab:hover{filter:brightness(1.04)}
.a11y-panel{
  position:fixed;
  bottom:84px;
  inset-inline-end:18px;
  z-index:90;
  width:min(320px, 90vw);
  border-radius:22px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadow);
  overflow:hidden;
  transform:translateY(10px);
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}
.a11y-panel.open{opacity:1; pointer-events:auto; transform:translateY(0)}
.a11y-panel header{
  background:linear-gradient(135deg, rgba(30,58,138,.12), transparent), var(--surface2);
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.a11y-panel header strong{font-size:14px}
.a11y-panel .body{padding:12px 14px; display:grid; gap:10px}
.a11y-row{display:flex; align-items:center; justify-content:space-between; gap:10px}
.a11y-row .mini-btn{
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:12px;
  padding:9px 10px;
  font-weight:900;
  cursor:pointer;
}
.a11y-row .mini-btn:hover{filter:brightness(.98)}
.a11y-row .mini-btn.primary{
  background:var(--chipBg);
  color:var(--chipText);
  border-color:rgba(30,58,138,.22);
}
.a11y-note{color:var(--muted); font-size:12px; margin:0}

/* Responsive */
@media (min-width: 720px){
  .nav{display:flex}
  .mobile-toggle{display:none}
  .hero-inner{grid-template-columns: 1.4fr .9fr}
  .hero-aside{border-top:0; border-inline-start:1px solid var(--border)}
  .grid{grid-template-columns:repeat(2, 1fr)}
  .filters{grid-template-columns:1.1fr .9fr}
  .filter-row{grid-template-columns:1fr 200px}
  .footer-grid{grid-template-columns:1.2fr 1fr 1fr}
  .profile{grid-template-columns:360px 1fr}
}
@media (min-width: 1040px){
  .grid{grid-template-columns:repeat(3, 1fr)}
}
@media (prefers-reduced-motion: reduce){
  *{scroll-behavior:auto !important}
  .loader,.drawer,.drawer-panel,.nav a,.a11y-panel{transition:none !important}
  .spinner{animation:none !important}
}

/* Mobile-first header tweaks */
@media (max-width: 719px){
  .header-inner{flex-wrap:wrap; gap:10px}
  .brand{flex:1 1 auto}
  .brand .title span{display:none}
  .tools{width:100%; justify-content:flex-end}
  .nav{display:none}
}

/* A11y panel button readability (light + dark) */
.a11y-panel .icon-btn{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
}
.a11y-panel .icon-btn:hover{filter:brightness(.98)}
.a11y-panel .a11y-row .mini-btn{color:var(--text)}
.a11y-panel .a11y-row .mini-btn.primary{color:var(--chipText)}


/* Mobile header centered brand + bigger logo */
@media (max-width: 719px){
  .header-inner{flex-direction:column; align-items:center; justify-content:center; gap:10px}
  .brand{justify-content:center; width:100%; min-width:0}
  .tools{width:100%; justify-content:space-between}
  .mobile-toggle{margin-inline-start:auto}
}

/* Map sizing */
.map-embed{border:1px solid var(--border); border-radius:18px; overflow:hidden; background:var(--surface2)}
.map-embed .frame{width:100%; height:230px; border:0; display:block}
@media (min-width: 720px){ .map-embed .frame{height:280px} }

html[data-spacing="wide"] body{letter-spacing: .4px}


/* Contact action cards */
.action-grid{display:grid; gap:12px; margin-top:12px}
@media (min-width: 720px){ .action-grid{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.action-card{
  display:flex; gap:12px; align-items:center;
  padding:14px; border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadowSm);
  text-decoration:none;
  color:var(--text);
}
.action-card:hover{transform:translateY(-1px)}
.action-ico{
  width:52px; height:52px; border-radius:18px;
  display:grid; place-items:center;
  background:rgba(30,58,138,.12);
}
.action-ico svg{width:26px; height:26px}
@keyframes floaty{0%{transform:translateY(0)}50%{transform:translateY(-4px)}100%{transform:translateY(0)}}
.action-card:hover .action-ico{animation:floaty 1.8s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){
  .action-card:hover{transform:none}
  .action-card:hover .action-ico{animation:none}
}

/* Mobile header: logo centered + more space, controls compact */
@media (max-width: 719px){
  .header-inner{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    gap:10px;
    padding:10px 0;
  }
  .brand{
    grid-column:2;
    justify-content:center;
    width:auto !important;
  }
  .nav{display:none !important}
  .tools{
    grid-column:3;
    justify-content:flex-end;
    width:auto !important;
    gap:6px;
    flex-wrap:nowrap;
  }
  .tools .icon-btn{
    padding:10px 10px;
    border-radius:14px;
  }
  /* Hide button labels on phone to give logo more room */
  .tools .icon-btn > span:not(.badge){display:none}
  #langSwitch .badge{display:inline-flex}
}

  /* Mobile header on blue background */
  .tools .icon-btn:hover{
    background: rgba(255,255,255,.14) !important;
    transform: translateY(-1px);
  }
  #globalSearchBtn.search-pill:hover{
    background: rgba(255,255,255,.14) !important;
  }



@media (max-width: 719px){
  .site-header{padding:10px 0}
  .header-inner{padding:4px 0}
}


@media (max-width: 719px){
  .tools .icon-btn{padding:9px 9px; border-radius:13px}
  .tools{gap:5px}
}

/* Forms v9: clearer structure + attachments */
.forms-wrap{max-width:980px; margin-inline:auto}
.form-card{border:1px solid var(--border); background:var(--surface); border-radius:22px; box-shadow:var(--shadowSm); overflow:hidden}
.form-card .form-head{padding:16px 18px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; gap:12px}
.form-card .form-body{padding:18px}
.form-grid{display:grid; gap:14px}
@media (min-width: 860px){ .form-grid{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px} }
.field{display:grid; gap:8px}
.label{font-weight:900; color:var(--text); font-size:13px}
.help{font-size:12px; color:var(--muted); line-height:1.6}
.input, .select{min-height:46px}
.textarea{min-height:140px}
.span-2{grid-column:1 / -1}

.dropzone{
  border:1px dashed rgba(30,58,138,.35);
  background:linear-gradient(180deg, rgba(30,58,138,.06), rgba(30,58,138,.02));
  border-radius:18px;
  padding:14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.dropzone strong{font-weight:900}
.dropzone .dz-left{display:flex; gap:12px; align-items:center}
.dropzone .dz-ico{width:44px;height:44px;border-radius:16px;display:grid;place-items:center;background:rgba(30,58,138,.12)}
.dropzone .dz-ico svg{width:22px;height:22px}
.dropzone.is-over{border-color:rgba(30,58,138,.7); filter:brightness(1.02)}
.dropzone input[type="file"]{display:none}
.file-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.small-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
  font-weight:900;
  cursor:pointer;
}
.small-btn.primary{background:var(--chipBg); color:var(--chipText); border-color:rgba(30,58,138,.25)}
.small-btn svg{width:18px;height:18px}
.file-list{margin-top:10px; display:grid; gap:10px}
.file-item{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface2);
}
.file-item .meta{display:grid; gap:2px}
.file-item .meta b{font-weight:900; font-size:13px}
.file-item .meta span{font-size:12px; color:var(--muted)}
.file-item .rm{padding:8px 10px; border-radius:12px}
.progress{
  height:10px; border-radius:999px; overflow:hidden;
  background:rgba(30,58,138,.12);
  border:1px solid rgba(30,58,138,.18);
}
.progress > i{display:block; height:100%; width:0%; background:rgba(30,58,138,.55); transition:width .35s ease}


/* A11y grid actions */
.a11y-panel[hidden]{display:none !important;}
.a11y-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:10px;
}
.a11y-action{
  border:1px solid var(--border);
  background:var(--surface2);
  border-radius:14px;
  padding:10px 8px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:74px;
  cursor:pointer;
  color:var(--text);
  box-shadow:var(--shadowSm);
}
.a11y-action{transition:transform .12s ease, filter .12s ease, background .12s ease}
.a11y-action:hover{transform:translateY(-1px)}
.a11y-action.active{background:var(--chipBg); color:var(--chipText); border-color:rgba(30,58,138,.25)}
html[data-theme="dark"] .a11y-action.active{background:rgba(122,162,255,.12); border-color:rgba(255,255,255,.18); color:var(--text)}
.a11y-action:focus-visible{outline:3px solid var(--ring); outline-offset:2px}
.a11y-action .ico{width:22px;height:22px;display:grid;place-items:center;color:var(--accent)}
.a11y-action .ico svg{width:22px;height:22px}
.a11y-action .lbl{font-size:12px;line-height:1.1;font-weight:900;color:var(--text)}
html[data-theme="dark"] .a11y-action{background:rgba(255,255,255,.06)}

/* Contact info cards */
.info-grid{display:grid; gap:12px; margin-top:12px}
@media (min-width: 540px){ .info-grid{grid-template-columns:repeat(2, minmax(0, 1fr))} }
.info-card{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:18px;
  border:1px solid var(--border);
  background:var(--surface);
  box-shadow:var(--shadowSm);
  text-decoration:none;
  color:var(--text);
}
.info-card:hover{transform:translateY(-1px)}
.info-ico{
  width:46px; height:46px; border-radius:16px;
  display:grid; place-items:center;
  background:rgba(30,58,138,.12);
  flex:0 0 auto;
}
.info-ico svg{width:24px; height:24px}
.info-card small{display:block; color:var(--muted); margin-top:4px}
.social-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px}
.social-links a{
  width:40px; height:40px; border-radius:14px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  text-decoration:none;
}
.social-links a:hover{transform:translateY(-1px)}
.social-links svg{width:18px; height:18px}

/* Panel/modal icon button readability */
.a11y-panel .icon-btn,
.modal .icon-btn{
  border:1px solid var(--border);
  background:var(--surface2);
  color:var(--text);
}
.a11y-fab .a11y-ico svg{width:24px;height:24px}

/* High contrast helpers */
html.a11y-contrast a.link,
html.a11y-contrast .post-body a,
html.a11y-contrast .card a{
  text-decoration: underline;
  text-underline-offset: 3px;
}
html.a11y-contrast :focus-visible{
  outline: 3px solid var(--accent2);
  outline-offset: 3px;
}
/* Enhanced color + typography tuning */
a{color:var(--accent2)}
a:hover{color:var(--accent)}
::selection{background:var(--focusBg); color:var(--text)}
.nav a{opacity:.92}
.nav a:hover{opacity:1}
.nav a[aria-current="page"]{opacity:1}

/* Hero prominence + softer overlay */
.hero-slider .hero-slider-wrap{min-height:clamp(340px, 52vh, 560px);}
.hero-slider .hero-slides{min-height:clamp(340px, 52vh, 560px);}
.hero-overlay{
  background:linear-gradient(0deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%);
  backdrop-filter: blur(6px);
}
.hero-slider .hero-title{font-size:clamp(22px, 4.2vw, 44px); line-height:1.15}
.hero-slider .hero-excerpt{font-size:clamp(13px, 2.6vw, 16px); max-width: 64ch}
.hero-slider .hero-actions{display:flex; gap:10px; flex-wrap:wrap}
.hero-slider .hero-nav{backdrop-filter: blur(12px)}
.hero-slider .hero-dot{backdrop-filter: blur(10px)}

/* Search modal */

/* Search modal polish */
.search-modal .modal-card{
  border: 1px solid var(--border);
}
.search-modal .modal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  background: var(--surface2);
  border-bottom:1px solid var(--border);
}
.search-modal .modal-body{padding:16px 18px 18px}
.search-modal .modal-brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}
.search-modal .modal-brand strong{
  font-size:1.05rem;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
html[dir="rtl"] .search-modal .modal-brand{flex-direction:row-reverse}
.search-modal .modal-brand img{
  width:72px;
  height:auto;
  flex:0 0 auto;
  filter:none;
}
.search-modal #searchInput{
  height:52px;
  border-radius:16px;
  border:1px solid var(--border);
  background: var(--surface);
  box-shadow: var(--shadowSm);
  padding-inline-start:52px;
  padding-inline-end:14px;
}
html[dir="rtl"] .search-modal #searchInput{
  padding-inline-start:14px;
  padding-inline-end:52px;
}
.search-modal #searchInput{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 21l-4.3-4.3m1.3-5.2a7.5 7.5 0 11-15 0 7.5 7.5 0 0115 0z' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:16px center;
}
html[dir="rtl"] .search-modal #searchInput{background-position: calc(100% - 16px) center}
.search-modal #searchInput:focus{
  outline: none;
  border-color: rgba(225,29,72,.55);
  box-shadow: 0 0 0 4px rgba(225,29,72,.18), var(--shadowSm);
}
.search-modal .search-results{
  max-height: 46vh;
  overflow:auto;
  padding-right:2px;
}
html[dir="rtl"] .search-modal .search-results{padding-right:0; padding-left:2px}
.search-modal .search-footer{
  justify-content:space-between;
  align-items:center;
}
.search-modal .search-hint{
  margin-top:10px;
  line-height:1.45;
}
@media (max-width:520px){
  .search-modal .modal-card{width:min(96vw, 720px); border-radius:22px}
  .search-modal .modal-top{padding:14px 14px}
  .search-modal .modal-body{padding:14px 14px 16px}
  .search-modal .modal-brand img{width:64px}
  .search-modal #searchInput{height:50px}
}
.search-modal .modal-card{max-width:720px; width:min(720px, 96vw)}
.modal-brand{display:flex; align-items:center; gap:10px}
.modal-brand img{width:84px; height:auto}
.search-hint{color:var(--muted); font-size:.92rem; margin-top:8px}
.search-results{display:grid; gap:10px; margin-top:12px}
.search-item{
  display:grid; grid-template-columns:74px 1fr; gap:12px;
  padding:12px; border:1px solid var(--border);
  border-radius:var(--radiusSm);
  background:var(--surface);
  text-decoration:none; color:inherit;
  box-shadow:var(--shadowSm);
}
.search-item:hover{transform:translateY(-1px)}
.search-thumb{width:74px; height:74px; border-radius:14px; object-fit:cover; border:1px solid var(--border); background:var(--surface2)}
.search-kicker{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:6px}
.search-title{font-weight:900; font-size:1.02rem; line-height:1.25}
.search-ex{color:var(--muted); font-size:.92rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}
.search-footer{display:flex; justify-content:flex-end; margin-top:12px}

/* Contact page polish */
.info-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:720px){
  .info-grid{grid-template-columns:1fr}
  .hero-slider .hero-slider-wrap{min-height:clamp(360px, 58vh, 600px);}
  .hero-slider .hero-slides{min-height:clamp(360px, 58vh, 600px);}
}
.prose{max-width: 78ch}
.prose p{color:var(--muted)}
.prose ul{padding-inline-start:18px; color:var(--muted)}
.prose li{margin:6px 0}
/* Typography scale */
.page-title{font-size:clamp(24px, 4vw, 44px)}
.section-head h2{font-size:clamp(18px, 2.7vw, 26px)}
.card h3{font-size:1.05rem}
.meta{font-size:.95rem}
/* Card + button polish */
.card, .post, .filters{border-color:rgba(11,18,32,.10)}
html[data-theme="dark"] .card, html[data-theme="dark"] .post, html[data-theme="dark"] .filters{border-color:rgba(255,255,255,.12)}
.btn{box-shadow:0 10px 22px rgba(11,18,32,.10)}
.btn.secondary{box-shadow:none}
.tag{background:var(--accentSoft); color:var(--accent); border-color:rgba(225,29,72,.20)}
html[data-theme="dark"] .tag{background:rgba(225,29,72,.18); color:#e6eeff; border-color:rgba(225,29,72,.22)}
.input:focus, .select:focus{outline:none; box-shadow:0 0 0 4px var(--ring)}

/* Mobile header: clean light bar with centered search + blue logo block (logo is white) */
@media (max-width: 820px){
  .site-header{
    background: var(--footerBg);
    --headerText:#ffffff;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .header-inner{gap:10px; padding:10px 0}
  .nav{display:none}
  .tools{order:1; gap:8px}
  .site-header .brand{
    order:3;
    background: transparent !important;
    border:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
  }
  .site-header .brand img{
    width:160px;
    max-width:70vw;
    height:auto;
  }
  /* Make tool buttons compact on mobile */
  .tools .icon-btn{
    padding:10px 12px;
    border-radius:999px;
    background: rgba(255,255,255,.12);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    box-shadow:none;
  }
  .tools .icon-btn svg{stroke:#fff}
  /* Search pill in header */
  #globalSearchBtn.search-pill{
    order:2;
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    padding:12px 14px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.12);
    color:#fff;
    box-shadow:none;
  }
  #globalSearchBtn.search-pill span{opacity:.9; font-weight:900; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  #globalSearchBtn.search-pill svg{stroke:var(--accentDeep)}
  /* Hide long labels to save space */
  .tools .icon-btn span{display:none}
  .tools #langSwitch .badge{display:inline-flex}
}
/* Grid radius polish */
.grid{gap:14px}
.card{border-radius:var(--radius)}
.card-media img{transform:scale(1.02); transition:transform .5s ease}
.card:hover .card-media img{transform:scale(1.06)}
/* Notify prompt */
.notify-hero{display:flex; gap:12px; align-items:center}
.notify-ic{
  width:54px;
  height:54px;
  border-radius:18px;
  display:grid;
  place-items:center;
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, rgba(225,29,72,.28), rgba(225,29,72,.10));
  border:1px solid rgba(225,29,72,.26);
  box-shadow:0 12px 26px rgba(11,18,32,.12);
}
.notify-ic::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:22px;
  border:2px solid rgba(225,29,72,.26);
  opacity:0;
  transform:scale(.86);
  animation:lifijPulse 1.9s ease-out infinite;
}
.notify-ic svg{width:26px; height:26px; stroke:var(--accentDeep); animation:lifijBell 2.4s ease-in-out infinite; transform-origin:50% 18%}
.notify-actions{display:flex; gap:10px; margin-top:12px}
.notify-actions .btn{flex:1}
.notify-note{margin-top:10px; color:var(--muted); font-size:13px}

@keyframes lifijBell{
  0%, 40%, 100%{transform:rotate(0deg)}
  4%{transform:rotate(14deg)}
  8%{transform:rotate(-14deg)}
  12%{transform:rotate(12deg)}
  16%{transform:rotate(-12deg)}
  20%{transform:rotate(8deg)}
  24%{transform:rotate(-8deg)}
  28%{transform:rotate(5deg)}
  32%{transform:rotate(-5deg)}
}
@keyframes lifijPulse{
  0%{opacity:0; transform:scale(.86)}
  18%{opacity:.55}
  70%{opacity:0}
  100%{opacity:0; transform:scale(1.18)}
}

html.a11y-reduce-motion .notify-ic::before,
html.a11y-reduce-motion .notify-ic svg{animation:none !important}


/* MOBILE HEADER V20 */

@media (max-width: 820px){
  /* Phone-first: keep header in ONE ROW (no wrap/stack) */
  .site-header{
    background: var(--header);
border-bottom: 1px solid rgba(11,18,32,.10);
    box-shadow: 0 12px 26px rgba(0,0,0,.28);
}
  html[data-theme="dark"] .site-header{
    background: linear-gradient(180deg, #0b1630 0%, #081122 100%);
    border-bottom: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 28px rgba(0,0,0,.35);
  }

  .header-inner{
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding-block: 10px !important;
  }

  /* Hide desktop nav on phone */
  .nav{display:none !important; order: 2 !important;}

  /* Keep the logo on the SIDE (RTL: right side) and make it bigger */
  .brand{
    order: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 12px;
    border-radius: 16px;
    background: var(--header);
    box-shadow: none;
  }
  html[data-theme="dark"] .brand{
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 12px 24px rgba(0,0,0,.35);
  }
  .brand img{
    width: clamp(170px, 52vw, 240px) !important;
    height: auto;
    display: block;
  }

  /* Tools cluster (left side) */
  .tools{
    order: 3 !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }
  .tools .icon-btn{
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color: #ffffff !important;
}
  .tools .icon-btn svg{stroke: currentColor}
  .tools .icon-btn:hover{transform: translateY(-1px)}
  .tools .icon-btn span{display:none !important;}
  #langSwitch .badge{display:none !important;}

  html[data-theme="dark"] .tools .icon-btn{
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    color: #ffffff !important;
  }

  /* Ensure the injected mobile search button behaves like an icon button */
  #globalSearchBtn{min-width: 44px; justify-content:center;}
  #globalSearchBtn.search-pill{
    width: 44px !important;
    padding: 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.10) !important;
border: 1px solid rgba(255,255,255,.18) !important;
}
  #globalSearchBtn.search-pill span{display:none !important;}

  html[data-theme="dark"] #globalSearchBtn.search-pill{
    background: rgba(255,255,255,.07) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
  }

  /* Search modal: phone-friendly spacing */
  .search-modal .modal-card{width: min(720px, 94vw) !important;}
  .search-modal .modal-body{padding: 14px !important;}
  .search-modal .input{padding: 14px 14px !important; font-size: 1rem !important;}
}

@media (max-width: 420px){
  .brand{padding: 7px 10px; border-radius: 14px;}
  .brand img{width: clamp(160px, 58vw, 220px) !important;}
  .tools{gap: 6px !important;}
  .tools .icon-btn{padding: 9px !important; border-radius: 13px !important;}
}

/* MOBILE HEADER BLUE V21 (light theme): header background matches logo bar */
@media (max-width: 820px){
  html[data-theme="light"] .site-header{
    background: var(--header) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.28) !important;
    --headerText: #ffffff;
  }
  html[data-theme="light"] .site-header .icon-btn,
  html[data-theme="light"] #globalSearchBtn.search-pill{
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;
  }
  html[data-theme="light"] .site-header .icon-btn:hover,
  html[data-theme="light"] #globalSearchBtn.search-pill:hover{
    background: rgba(255,255,255,.14) !important;
  }
  html[data-theme="light"] .site-header .brand{
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }
}

/* MOBILE HEADER V22 (phone-first): logo centered on top, tools row below. Fix drawer contrast + remove logo stroke */
@media (max-width: 820px){
  .site-header{
    background: var(--header) !important;
    --headerText:#ffffff !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: 0 12px 26px rgba(0,0,0,.28) !important;
  }

  /* Stack header */
  .header-inner{
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding-block: 12px !important;
  }
  .nav{display:none !important;}

  /* Logo row */
  .brand{
    order: 1 !important;
    width: 100% !important;
    justify-content: center !important;
    padding: 2px 0 !important;
    background: transparent !important;
    border: none !important; /* remove stroke */
    box-shadow: none !important;
  }
  .brand img{
    width: clamp(210px, 66vw, 290px) !important;
    max-width: 86vw !important;
  }

  /* Tools row */
  .tools{
    order: 2 !important;
    width: 100% !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .tools .icon-btn,
  #globalSearchBtn.search-pill{
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
    padding: 10px !important;
    box-shadow: none !important;
  }
  .tools .icon-btn:hover,
  #globalSearchBtn.search-pill:hover{background: rgba(255,255,255,.16) !important;}

  /* Hide long labels but keep EN badge */
  .tools .icon-btn span:not(.badge){display:none !important;}
  #langSwitch .badge{display:inline-flex !important;}

  /* Ensure search button is icon-only on phone */
  #globalSearchBtn.search-pill{width:44px !important; min-width:44px !important; justify-content:center !important;}
  #globalSearchBtn.search-pill span{display:none !important;}
  #globalSearchBtn.search-pill svg{stroke: currentColor !important;}

  /* Drawer: fix "white on white" by forcing readable colors */
  .drawer-panel{background: var(--surface) !important; color: var(--text) !important;}
  .drawer-top strong{color: var(--text) !important;}
  .drawer-links a{color: var(--text) !important; background: var(--surface2) !important;}
  .drawer-top .icon-btn{background: rgba(11,18,32,.06) !important; border:1px solid rgba(11,18,32,.10) !important; color: var(--text) !important;}

  html[data-theme="dark"] .drawer-panel{background:#0b1220 !important; color:#eef3ff !important;}
  html[data-theme="dark"] .drawer-links a{color:#eef3ff !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important;}
  html[data-theme="dark"] .drawer-top strong{color:#eef3ff !important;}
  html[data-theme="dark"] .drawer-top .icon-btn{background: rgba(255,255,255,.08) !important; border:1px solid rgba(255,255,255,.14) !important; color:#eef3ff !important;}
}

/* ===============================
   MOBILE HEADER FINAL V23
   - Logo centered on its own row
   - Controls row below (menu/search/theme/lang)
   - Solid royal blue background for good contrast
   =============================== */
@media (max-width: 820px){
  .site-header{
    background: var(--header) !important;
    padding: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,.10) !important;
  }
  .site-header .container.header-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap: 10px !important;
    padding: calc(8px + env(safe-area-inset-top, 0px)) 12px 8px !important;
  }
  .site-header .brand{
    width: 100% !important;
    justify-content:center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
  }
  /* Slightly smaller logo on phones for better balance */
  .site-header .brand img{
    width: min(200px, 66vw) !important;
    height: auto !important;
  }

  /* Ensure logo has no pill/stroke */
  .site-header .brand{
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }
  .site-header .brand img{
    display:block !important;
    border:0 !important;
    outline:0 !important;
    box-shadow:none !important;
    filter:none !important;
  }
  .site-header .nav{display:none !important;}
  .site-header .tools{
    width: 100% !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    gap: 10px !important;
    flex-wrap:wrap !important;
    margin: 0 !important;
  }
  .site-header .tools .icon-btn,
  .site-header #globalSearchBtn.search-pill{
    background: rgba(255,255,255,.12) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
  .site-header .tools .icon-btn:hover,
  .site-header #globalSearchBtn.search-pill:hover{
    background: rgba(255,255,255,.16) !important;
    transform: translateY(-1px);
  }
  /* Make controls compact, icon-first */
  .site-header .tools .icon-btn > span:not(.badge){display:none !important;}
  #langSwitch .badge{display:inline-flex !important;}
  #globalSearchBtn.search-pill{
    width: 44px !important;
    min-width: 44px !important;
    justify-content:center !important;
  }
  #globalSearchBtn.search-pill span{display:none !important;}
}

/* Drawer readability (force readable colors in both themes) */
.drawer-panel{background: var(--surface) !important; color: var(--text) !important;}
.drawer-panel *{color: inherit;}
.drawer-links a{color: var(--text) !important; background: var(--surface2) !important;}
.drawer-top strong{color: var(--text) !important;}

html[data-theme="dark"] .drawer-panel{background:#0b1220 !important; color:#eef3ff !important;}
html[data-theme="dark"] .drawer-links a{color:#eef3ff !important; background: rgba(255,255,255,.04) !important; border-color: rgba(255,255,255,.12) !important;}
html[data-theme="dark"] .drawer-top strong{color:#eef3ff !important;}


/* Logo integration: remove any accidental stroke/pill */
.site-header .brand,
.site-header .brand:before,
.site-header .brand:after{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
}



/* Footer link polish */
.site-footer a{color:rgba(255,255,255,.92)}
.site-footer a:hover{color:#fff; text-decoration:underline}
.site-footer .social a{
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.22);
}
.site-footer .social a:hover{
  background: rgba(0,0,0,.26);
  transform: translateY(-1px);
}



/* --- Story blocks + BI + embeds (preview) --- */
.story-block{margin-top:18px}
.story-block h2{margin:18px 0 10px; font-size:20px}
.muted{color:var(--muted)}
.callout{
  margin:14px 0;
  padding:14px 14px;
  border:1px solid var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(220,38,38,.08), rgba(0,0,0,0));
}
.grid-2{display:grid; grid-template-columns:1fr; gap:12px; margin:12px 0}
@media(min-width:760px){ .grid-2{grid-template-columns:1fr 1fr;} }
.stat{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadowSm);
}
.stat-k{font-size:26px; font-weight:1000; color:var(--accent2)}
.stat-l{margin-top:6px; color:var(--muted); font-weight:800}

.table-wrap{overflow:auto; border:1px solid var(--border); border-radius:14px; background:var(--surface)}
.table-wrap table{width:100%; border-collapse:separate; border-spacing:0}
.table-wrap th, .table-wrap td{padding:10px 12px; border-bottom:1px solid var(--border); text-align:start; white-space:nowrap}
.table-wrap th{background:var(--surface2); font-weight:1000}
.table-wrap tr:last-child td{border-bottom:none}

/* BI panel */
.bi-panel{
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:linear-gradient(180deg, rgba(220,38,38,.06), rgba(0,0,0,0));
}
.bi-head h2{margin:0 0 6px}
.bi-controls{
  display:flex; gap:10px; flex-wrap:wrap; align-items:end;
  margin:10px 0 12px;
}
.bi-label{display:grid; gap:6px; font-weight:900; color:var(--muted)}
.bi-label span{font-size:12px}
.bi-label select{
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:var(--surface);
  color:var(--text);
  min-width:140px;
}
.bi-wrap{display:grid; gap:12px; grid-template-columns:1fr}
@media(min-width:900px){ .bi-wrap{grid-template-columns:1.2fr .8fr;} }
.bi-chart{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:12px;
  box-shadow:var(--shadowSm);
}
.bi-side{display:grid; gap:12px}
.bi-mini{
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
  padding:12px;
  box-shadow:var(--shadowSm);
}
.bi-mini h3{margin:0 0 10px; font-size:15px}
.bi-kpis{display:grid; grid-template-columns:1fr; gap:10px}
@media(min-width:520px){ .bi-kpis{grid-template-columns:1fr 1fr 1fr;} }
.kpi{border:1px dashed var(--border); border-radius:14px; padding:10px}
.kpi-v{font-weight:1000; font-size:14px}
.kpi-l{color:var(--muted); font-weight:900; margin-top:4px; font-size:12px}

.bi-bars{display:grid; gap:10px}
.bi-row{display:grid; grid-template-columns:110px 1fr 74px; gap:10px; align-items:center}
@media(max-width:420px){ .bi-row{grid-template-columns:88px 1fr 66px;} }
.bi-name{font-weight:900; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.bi-val{font-weight:1000; color:var(--muted); text-align:end}
.bi-bar{
  height:12px; border-radius:999px;
  border:1px solid var(--border);
  background:var(--surface2);
  overflow:hidden;
}
.bi-bar span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--accent2), rgba(220,38,38,.55));
  border-radius:999px;
}
.bi-line svg{display:block}
.bi-line-path{fill:none; stroke:var(--accent2); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; opacity:.9}
.bi-line-dot{fill:var(--surface); stroke:var(--accent2); stroke-width:4}
.bi-axis text{font-size:14px; fill:var(--muted); font-weight:900}

.bi-note{font-size:12px}

/* Flourish embeds */
.embed-grid{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:900px){ .embed-grid{grid-template-columns:1fr 1fr;} }
.embed-card{
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadowSm);
}
.embed-title{padding:12px 14px; font-weight:1000; border-bottom:1px solid var(--border); background:var(--surface2)}
.embed-frame{padding:10px}
.embed-credit{padding:0 14px 14px; font-size:12px}

/* Ensure figure fits */
.prose figure, .prose img{max-width:100%}