/* ==========================================================================================
   Al Hayat Solutions: static header and footer of the retained legacy pages and the Worker pages
   (rendered by src/site/chrome.js). It looks like the header and footer the 13 new pages build in the
   browser (assets/site/site.css: pale sky top bar, emblem logo, pill menu, beige footer) but is a
   separate, namespaced copy so it can sit on pages that still load the old Oasis CSS (ui.css resets
   margins and styles bare details/summary): every class is .ah-*, every value is a scoped --ah-* token
   defined here, every margin and padding is explicit. Logical properties only (RTL safe). No text under
   13px. Menu, links and facts come from src/site/chrome.js; the strings are the ones of site-i18n.js.
   ========================================================================================== */
.ah-header,.ah-footer,.ah-skip{
  --ah-ink:#2E2822; --ah-ink-2:#4A4238; --ah-muted:#6E6253; --ah-line:#EBE2D1; --ah-white:#FFFFFF; --ah-sky:#EAF3FD;
  --ah-bar:rgba(240,247,254,.92); --ah-bar-line:#D8E6F5; --ah-btn-line:#D4E1F0; --ah-card-2:#FBF7EF;
  --ah-primary:#2457D6; --ah-primary-ink:#1F4FCC; --ah-gold-ink:#8A5E10;
  --ah-wa:#15754A; --ah-wa-bg:#E6F4EC; --ah-wa-line:#BFE0CC;
  --ah-canvas:#F6FAFE; --ah-scrim:rgba(15,25,45,.45); --ah-beige:#F7F0E4; --ah-beige-line:#EEE4D2; --ah-beige-rule:#E6DAC4; --ah-hover:rgba(255,255,255,.75);
  --ah-serif:"Source Serif 4","Iowan Old Style",Georgia,serif;
  --ah-sans:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --navy:#10203A; --gold:#C9A96E; --r-pill:999px; /* names the signed-in account menu (css/account.css) reads */
}
.ah-header:lang(ar),.ah-footer:lang(ar){--ah-sans:"Noto Kufi Arabic","Source Sans 3","Segoe UI",system-ui,sans-serif;--ah-serif:"Noto Kufi Arabic","Source Serif 4",serif}
.ah-header:lang(bn),.ah-footer:lang(bn){--ah-sans:"Noto Sans Bengali","Source Sans 3","Segoe UI",system-ui,sans-serif}

.ah-header *,.ah-footer *,.ah-header *::before,.ah-footer *::before,.ah-header *::after,.ah-footer *::after{box-sizing:border-box}
.ah-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ah-wrap{max-width:1200px;margin-inline:auto;padding-inline:16px}
@media (min-width:720px){.ah-wrap{padding-inline:32px}}

/* skip link: first focusable thing on every page */
.ah-skip{position:absolute;inset-inline-start:12px;inset-block-start:-70px;z-index:100;background:var(--ah-primary);color:#fff;padding:12px 18px;border-radius:999px;font:600 1rem/1.2 var(--ah-sans);text-decoration:none}
.ah-skip:focus{inset-block-start:12px}

/* ---------- header ---------- */
.ah-header{position:sticky;inset-block-start:0;z-index:60;border-block-end:1px solid var(--ah-bar-line);color:var(--ah-ink);font:400 1rem/1.3 var(--ah-sans);margin:0;padding:0}
.ah-header::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ah-bar);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.ah-header a{color:var(--ah-ink);text-decoration:none}
.ah-header :focus-visible,.ah-footer :focus-visible{outline:3px solid var(--ah-primary);outline-offset:3px;border-radius:8px}
.ah-bar{display:flex;align-items:center;gap:16px;min-height:68px}
.ah-brand{display:inline-flex;align-items:center;gap:10px;margin:0;margin-inline-start:-6px;padding:4px 6px;border-radius:12px;flex:none;line-height:1;text-decoration:none}
.ah-brand:hover{text-decoration:none}
.ah-emblem{display:block;width:30px;height:42px;flex:none;filter:drop-shadow(0 2px 3px rgba(74,56,32,.14))}
.ah-wordmark{display:flex;flex-direction:column;line-height:1}
.ah-wordmark-name{font:600 19px/1 var(--ah-serif);letter-spacing:.09em;text-transform:uppercase;color:var(--ah-ink)}
.ah-wordmark-sub{margin-block-start:4px;font:600 13px/1 var(--ah-sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ah-gold-ink)}
.ah-header:lang(ar) .ah-wordmark-sub,.ah-footer:lang(ar) .ah-wordmark-sub{letter-spacing:.06em}
.ah-nav{display:none;gap:2px;align-items:center;margin:0;margin-inline-start:16px;padding:0}
.ah-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 13px;border-radius:999px;font-weight:500;font-size:15px;color:var(--ah-ink-2);white-space:nowrap}
.ah-nav a:hover{background:var(--ah-hover);color:var(--ah-ink)}
.ah-nav a[aria-current]{background:var(--ah-white);color:var(--ah-primary-ink);box-shadow:0 1px 2px rgba(74,56,32,.06);font-weight:600}
/* .nav-right is also a hook of the old Oasis ui.css (column layout below 960px, link padding): the extra .ah-header wins */
.ah-header .nav-right{display:flex;flex-direction:row;align-items:center;gap:8px;margin:0;margin-inline-start:auto;padding:0;font-size:inherit;white-space:nowrap}
.ah-header .nav-right > a.ah-wa{padding:0 11px;font-weight:600}
.ah-wa{display:inline-flex;align-items:center;gap:7px;min-height:44px;min-width:44px;justify-content:center;padding:0 11px;border-radius:999px;background:var(--ah-white);border:1px solid var(--ah-wa-line);color:var(--ah-wa);font-weight:600;font-size:14px;white-space:nowrap;flex:none;text-decoration:none}
.ah-header .ah-wa,.ah-footer .ah-wa{color:var(--ah-wa)}
.ah-wa:hover{background:var(--ah-wa-bg);text-decoration:none}
.ah-wa svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;flex:none}
.ah-wa .t{display:none}
.ah-header .nav-right > a.ah-signin{display:none;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--ah-primary);color:#fff;font-weight:600;font-size:14px;white-space:nowrap;text-decoration:none;flex:none}
.ah-header .nav-right > a.ah-signin:hover{background:var(--ah-primary-ink);color:#fff;text-decoration:none}
@media (min-width:640px){.ah-header .nav-right > a.ah-signin{display:inline-flex}}
.ah-menu-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;border-radius:999px;border:1px solid var(--ah-btn-line);background:var(--ah-white);color:var(--ah-ink-2);font:600 14px/1.2 var(--ah-sans);cursor:pointer;flex:none}
.ah-menu-btn:hover{background:var(--ah-sky)}
.ah-menu-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ah-sheet{display:none;position:fixed;inset-block:0;inset-inline-end:0;inline-size:min(360px,92vw);max-block-size:none;overflow-y:auto;flex-direction:column;gap:16px;padding:16px 20px 24px;background:var(--ah-canvas);z-index:90;box-shadow:0 18px 50px -10px rgba(3,12,24,.35);animation:ah-drawer-in .25s ease}
@keyframes ah-drawer-in{from{transform:translateX(12%);opacity:0}to{transform:none;opacity:1}}
:root[dir="rtl"] .ah-sheet{animation-name:ah-drawer-in-rtl}
@keyframes ah-drawer-in-rtl{from{transform:translateX(-12%);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.ah-sheet{animation:none}}
.ah-sheet:target,.ah-sheet.open{display:flex}
.ah-backdrop{display:none;position:fixed;inset:0;z-index:80;background:var(--ah-scrim);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.ah-sheet:target ~ .ah-backdrop,.ah-sheet.open ~ .ah-backdrop{display:block}
.ah-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:68px}
.ah-sheet-head .ah-brand{margin:0}
.ah-header .ah-close{display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:999px;background:var(--ah-card-2);color:var(--ah-ink-2)}
.ah-close svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ah-header .ah-cta{display:flex;align-items:center;justify-content:center;min-height:48px;padding:0 18px;border-radius:999px;background:var(--ah-primary);color:#fff;font-weight:600;font-size:16px;text-align:center;text-decoration:none}
.ah-header .ah-cta:hover{background:var(--ah-primary-ink);color:#fff}
.ah-sheet nav{display:flex;flex-direction:column;gap:2px}
.ah-sheet .lnk{display:flex;align-items:center;min-height:48px;padding:0 12px;border-radius:12px;font-size:18px;color:var(--ah-ink-2)}
.ah-sheet .lnk[aria-current]{background:var(--ah-sky);color:var(--ah-primary-ink);font-weight:600}
.ah-dlabel{margin:8px 0 0;font:600 14px/1.3 var(--ah-sans);color:var(--ah-muted)}
.ah-dlangs{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.ah-dlangs li{margin:0;padding:0}
.ah-header .ah-dlangs a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--ah-btn-line);border-radius:999px;background:var(--ah-white);font-size:15px;font-weight:500;color:var(--ah-ink-2)}
.ah-header .ah-dlangs a[aria-current]{background:var(--ah-sky);border-color:var(--ah-primary);color:var(--ah-primary-ink);font-weight:600}
.ah-sheet-foot{display:flex;flex-direction:column;gap:12px;margin-block-start:auto;padding-block-start:16px;border-block-start:1px solid var(--ah-line)}
.ah-sheet-foot .ah-wa{justify-content:center}
.ah-sheet .lnk.quiet{justify-content:center;margin:0;min-height:44px;font-size:15px;color:var(--ah-muted);border:0;border-radius:12px}
html.ah-drawer-open{overflow:hidden}

/* the theme menu in the top bar (phone and wide), drawn only on dark-capable pages (body.dk); it is in the HTML, nav.js makes it work */
.ah-theme-top{display:none;position:relative;margin:0;padding:0}
.dk .ah-theme-top:not([hidden]){display:block}
/* on the smallest phones the bar has no room for it: the same choice is in the menu sheet (.ah-theme) */
@media (max-width:359px){.dk .ah-theme-top:not([hidden]){display:none}}
.ah-theme-top summary{display:flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0;border:1px solid var(--ah-btn-line);border-radius:999px;background:var(--ah-white);color:var(--ah-ink-2);cursor:pointer;list-style:none}
.ah-theme-top summary::-webkit-details-marker{display:none}
.ah-theme-top summary:hover,.ah-theme-top[open] summary{background:var(--ah-sky)}
.ah-theme-top summary svg{width:22px;height:22px}
.ah-theme-top ul{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);z-index:70;min-width:150px;margin:0;padding:6px;list-style:none;background:var(--ah-white);border:1px solid var(--ah-line);border-radius:16px;box-shadow:0 10px 30px -10px rgba(74,56,32,.28),0 30px 60px -30px rgba(74,56,32,.3)}
.ah-theme-top li{margin:0;padding:0;list-style:none}
.ah-theme-item{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:44px;padding:0 12px;border:0;border-radius:12px;background:transparent;color:var(--ah-ink);font:500 15px/1.2 var(--ah-sans);text-align:start;cursor:pointer}
.ah-theme-item:hover{background:var(--ah-card-2)}
.ah-theme-item[aria-pressed="true"]{background:var(--ah-sky);color:var(--ah-primary-ink);font-weight:600}

/* theme control (System / Light / Dark): only on the pages that have a dark theme (body.dk), and only once nav.js made it work */
.ah-theme{display:none;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.dk .ah-theme:not([hidden]){display:flex}
.ah-theme-label{font:600 14px/1.3 var(--ah-sans);color:var(--ah-muted)}
.ah-theme-seg{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--ah-btn-line);border-radius:999px;background:var(--ah-white)}
.ah-theme-btn{min-height:40px;padding:0 14px;border:0;border-radius:999px;background:transparent;color:var(--ah-ink-2);font:500 14px/1.2 var(--ah-sans);cursor:pointer}
.ah-theme-btn:hover{background:var(--ah-hover)}
.ah-theme-btn[aria-pressed="true"]{background:var(--ah-primary);color:#fff;font-weight:600}
.ah-sheet .ah-theme{flex-direction:column;align-items:stretch}
.ah-sheet .ah-theme-seg{display:grid;grid-template-columns:repeat(3,1fr)}

/* language switcher: link-based <details>, lives in .nav-right */
.ah-header .lang-switch{position:relative;display:block;margin:0;padding:0;border:0}
.ah-header .lang-switch summary{display:flex;align-items:center;justify-content:flex-start;gap:6px;min-height:44px;padding:0 12px;border:1px solid var(--ah-btn-line);border-radius:999px;background:var(--ah-white);color:var(--ah-ink-2);font:600 14px/1.2 var(--ah-sans);cursor:pointer;list-style:none}
.ah-header .lang-switch summary:hover,.ah-header .lang-switch[open] summary{background:var(--ah-sky)}
.ah-header .lang-switch summary::-webkit-details-marker{display:none}
.ah-header .lang-switch summary svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;flex:none}
.ah-header .lang-switch summary::after{content:"";width:7px;height:7px;margin-inline-start:2px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px)}
.ah-header .lang-switch[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.ah-lang-code{display:inline;letter-spacing:.04em}
.ah-lang-name{display:none}
.ah-header .lang-switch ul{position:absolute;inset-inline-end:0;inset-block-start:calc(100% + 8px);z-index:70;min-width:200px;margin:0;padding:6px;list-style:none;background:var(--ah-white);border:1px solid var(--ah-line);border-radius:16px;box-shadow:0 10px 30px -10px rgba(74,56,32,.28),0 30px 60px -30px rgba(74,56,32,.3)}
.ah-header .lang-switch li{margin:0;padding:0;list-style:none}
.ah-header .lang-switch li a{display:flex;align-items:center;min-height:42px;padding:0 12px;border-radius:12px;font-size:15px;font-weight:500;white-space:nowrap}
.ah-header .lang-switch li a:hover{background:var(--ah-card-2)}
.ah-header .lang-switch li a[aria-current]{background:var(--ah-sky);color:var(--ah-primary-ink);font-weight:600}

/* signed-in account menu (css/account.css is built for the old drawer): keep it a compact popover in the bar */
.ah-header .acct{flex:none}
.ah-header .acct-btn{width:auto;min-height:42px;padding-block:4px}
.ah-header .acct-menu{position:absolute;margin-top:0;min-width:220px;box-shadow:0 18px 50px rgba(3,12,24,.28)}
@media (max-width:639px){.ah-header .acct-hi{display:none}}

/* ---------- header breakpoints (same as the new pages: the menu row from 1000px, the phone sheet below) ---------- */
@media (min-width:1000px){
  .ah-nav{display:flex}
  .ah-menu-btn{display:none}
  .ah-sheet,.ah-sheet.open,.ah-sheet:target{display:none}
  .ah-backdrop,.ah-sheet.open ~ .ah-backdrop,.ah-sheet:target ~ .ah-backdrop{display:none}
  .ah-wa .t{display:inline}
  .ah-header .nav-right > a.ah-wa{padding:0 14px}
  .ah-lang-code{display:none}
  .ah-lang-name{display:inline}
}
@media (min-width:1000px) and (max-width:1120px){.ah-nav a{padding:0 10px;font-size:14px}}
/* nav.js adds .compact when the row would still overflow (long translations, any width) */
.ah-header.compact .ah-nav{display:none}
.ah-header.compact .ah-menu-btn{display:inline-flex}
.ah-header.compact .ah-sheet.open,.ah-header.compact .ah-sheet:target{display:flex}
.ah-header.compact .ah-sheet.open ~ .ah-backdrop,.ah-header.compact .ah-sheet:target ~ .ah-backdrop{display:block}
.ah-header.compact .ah-lang-code{display:inline}
.ah-header.compact .ah-lang-name{display:none}
@media (max-width:639px){.ah-bar{gap:8px}}
/* phone: brand, theme, language, WhatsApp and menu fit one row at 375px (same rule as the new pages' header) */
@media (max-width:479px){
  .ah-header .nav-right{gap:6px}
  .ah-header .lang-switch summary{padding:0 10px;gap:4px}
  .ah-header .lang-switch summary>svg{display:none}
  .ah-header .nav-right > a.ah-wa{padding:0}
}
@media (max-width:400px){
  .ah-wordmark-name{font-size:16px;letter-spacing:.08em}
  .ah-wordmark-sub{font-size:13px;letter-spacing:.1em}
  .ah-brand{gap:6px}
}
/* /verify/ keeps the same page width and side space as the pages that build their own header */
body[data-page="verify"] .wrap{max-width:1200px;padding-inline:16px}
@media (min-width:720px){body[data-page="verify"] .wrap{padding-inline:32px}}

/* ---------- footer ---------- */
.ah-footer{background:var(--ah-beige);border-block-start:1px solid var(--ah-beige-line);color:var(--ah-ink-2);padding-block:clamp(36px,5vw,64px) 40px;font:400 15px/1.55 var(--ah-sans);margin:0}
.ah-footer a{color:var(--ah-ink);text-decoration:none}
.ah-footer a:hover{text-decoration:underline;text-underline-offset:3px}
.ah-footer p{margin:0}
.ah-ftop{display:grid;gap:32px}
@media (min-width:900px){.ah-ftop{grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr)}}
.ah-fbrand{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.ah-footer .ah-brand{margin:0}
.ah-footer .ah-promise{max-width:34ch;color:var(--ah-ink-2)}
.ah-wa-foot .t{display:inline}
.ah-wa-foot{padding:0 14px}
.ah-fcols{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr))}
.ah-footer .ah-fh{margin:0 0 12px;font:600 14px/1.2 var(--ah-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ah-muted)}
.ah-footer:lang(ar) .ah-fh,.ah-footer:lang(bn) .ah-fh{letter-spacing:0;text-transform:none}
.ah-fcols ul{display:flex;flex-direction:column;gap:8px;list-style:none;margin:0;padding:0}
.ah-fcols li{margin:0;padding:0}
.ah-fcols a,.ah-footer .ah-fbottom a{display:inline-flex;align-items:center;min-block-size:28px}
.ah-footer:lang(bn) .ah-fcols a{min-block-size:44px;min-inline-size:44px}
.ah-facts{display:grid;gap:6px;margin:0;padding:0;min-width:0;font-size:14px}
.ah-facts dt{margin:0;font-weight:600;color:var(--ah-muted)}
.ah-facts dd{margin:0 0 6px;padding:0;min-width:0;overflow-wrap:anywhere;color:var(--ah-ink)}
.ah-footer .ah-notlaw{margin:32px 0 0;padding-block-start:20px;border-block-start:1px solid var(--ah-beige-rule);max-width:90ch;font-size:14px;color:var(--ah-muted)}
.ah-footer .ah-fbottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-block-start:20px}
.ah-footer .ah-copy{margin:0;font-size:14px;color:var(--ah-muted)}
.ah-footer .ah-social{display:flex;gap:16px;flex-wrap:wrap;margin:0;padding:0;list-style:none;font-size:14px}
.ah-footer .ah-social a{display:inline-flex;align-items:center;min-block-size:44px;color:var(--ah-muted);text-decoration:none}
.ah-footer .ah-social a:hover,.ah-footer .ah-social a:focus-visible{color:inherit;text-decoration:underline}
.ah-footer .translated-note{margin:14px 0 0;font-size:14px;color:var(--ah-muted)}

@media print{.ah-header{position:static}.ah-menu-btn,.ah-sheet,.ah-backdrop,.ah-signin,.ah-wa,.lang-switch,.ah-theme{display:none!important}}

/* ---------- dark theme for the pages that opt in with <body class="dk"> (the 404, consultation, privacy, terms, verify, samples): same tokens as assets/site/kit/tokens.css; the other legacy pages stay light ---------- */
:root[data-theme="dark"] .dk .ah-header,:root[data-theme="dark"] .dk .ah-footer,:root[data-theme="dark"] .dk .ah-skip{--ah-ink:#EEF2FA; --ah-ink-2:#D2D9E8; --ah-muted:#AEB8CC; --ah-line:#2C3853; --ah-white:#1A2336; --ah-sky:#18243D; --ah-canvas:#0F1522; --ah-scrim:rgba(0,0,0,.6); --ah-bar:rgba(15,21,34,.92); --ah-bar-line:#2A3550; --ah-btn-line:#2A3550; --ah-card-2:#202B41; --ah-primary:#3C66DE; --ah-primary-ink:#9DB8FF; --ah-gold-ink:#E8BE68; --ah-wa:#5FD08F; --ah-wa-bg:#143024; --ah-wa-line:#2C5A3C; --ah-beige:#151D2D; --ah-beige-line:#2C3853; --ah-beige-rule:#2C3853; --ah-hover:rgba(255,255,255,.08);color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dk .ah-header,:root:not([data-theme="light"]) .dk .ah-footer,:root:not([data-theme="light"]) .dk .ah-skip{--ah-ink:#EEF2FA; --ah-ink-2:#D2D9E8; --ah-muted:#AEB8CC; --ah-line:#2C3853; --ah-white:#1A2336; --ah-sky:#18243D; --ah-canvas:#0F1522; --ah-scrim:rgba(0,0,0,.6); --ah-bar:rgba(15,21,34,.92); --ah-bar-line:#2A3550; --ah-btn-line:#2A3550; --ah-card-2:#202B41; --ah-primary:#3C66DE; --ah-primary-ink:#9DB8FF; --ah-gold-ink:#E8BE68; --ah-wa:#5FD08F; --ah-wa-bg:#143024; --ah-wa-line:#2C5A3C; --ah-beige:#151D2D; --ah-beige-line:#2C3853; --ah-beige-rule:#2C3853; --ah-hover:rgba(255,255,255,.08);color-scheme:dark}}
/* the blue emblem sits on a pale pill in the dark theme (no second asset in this static chrome) */
:root[data-theme="dark"] .dk .ah-emblem{box-sizing:content-box;padding:4px 5px;border-radius:12px;background:#EAF3FD}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dk .ah-emblem{box-sizing:content-box;padding:4px 5px;border-radius:12px;background:#EAF3FD}}