/* Al Jenaan — design system. Loaded last on every page.
   Stitch exported each page with its own colour config, so surfaces and
   accents drifted between pages. Everything below is locked here. */
:root{
  --aj-cream:#FFF8F0;            /* page */
  --aj-cream-low:#FCF3E2;
  --aj-cream-mid:#F6EDDC;
  --aj-cream-high:#F0E7D6;
  --aj-card:#FFFFFF;             /* cards and containers */
  --aj-ink:#1F1B11;              /* primary text */
  --aj-ink-2:#4D4637;            /* secondary text */
  --aj-outline:#7F7665;
  --aj-outline-2:#D0C5B2;
  --aj-gold:#755B00;             /* primary action */
  --aj-gold-soft:#C8A64B;
  --aj-gold-hover:#5E4900;
  --aj-gold-active:#453600;
  --aj-on-gold:#FFFFFF;
  --aj-green:#546345;
  --aj-serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --aj-sans:"Plus Jakarta Sans","IBM Plex Sans Arabic",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --aj-wrap:1180px;
}

/* ---------- surfaces ---------- */
html,body{background:var(--aj-cream)!important;color:var(--aj-ink)!important;font-family:var(--aj-sans)!important}
.bg-surface,.bg-background,.bg-surface-bright{background-color:var(--aj-cream)!important}
.bg-surface-container-low{background-color:var(--aj-cream-low)!important}
.bg-surface-container{background-color:var(--aj-cream-mid)!important}
.bg-surface-container-high,.bg-surface-container-highest{background-color:var(--aj-cream-high)!important}
.bg-surface-container-lowest{background-color:var(--aj-card)!important}

/* ---------- text ---------- */
.text-on-surface{color:var(--aj-ink)!important}
.text-on-surface-variant{color:var(--aj-ink-2)!important}
.text-outline{color:var(--aj-outline)!important}
.text-outline-variant{color:var(--aj-outline-2)!important}
.text-primary{color:var(--aj-gold)!important}
.text-secondary{color:var(--aj-green)!important}

/* ---------- type scale ---------- */
h1,h2,h3,h4,h5,h6{font-family:var(--aj-serif)!important;color:var(--aj-ink);line-height:1.15;letter-spacing:-.01em}
h1{font-size:clamp(32px,5.4vw,56px)}
h2{font-size:clamp(26px,3.8vw,40px)}
h3{font-size:clamp(19px,2.2vw,24px)}
h4{font-size:18px} h5{font-size:16px} h6{font-size:15px}
p,li,dd,label,input,textarea,select,button,a{font-family:var(--aj-sans)}
p,li,dd{line-height:1.62}
[dir=rtl] h1,[dir=rtl] h2,[dir=rtl] h3{font-family:"IBM Plex Sans Arabic",var(--aj-sans)!important;letter-spacing:0;line-height:1.35}

/* ---------- containers ---------- */
.wrap,.max-w-\[1180px\]{max-width:var(--aj-wrap);margin-inline:auto}

/* ---------- actions ---------- */
.bg-primary{background-color:var(--aj-gold)!important}
.text-on-primary{color:var(--aj-on-gold)!important}
.bg-primary-container{background-color:var(--aj-gold-soft)!important}
.text-on-primary-container{color:#241A00!important}
a.bg-primary:hover,button.bg-primary:hover,[data-add]:hover{background-color:var(--aj-gold-hover)!important}
a.bg-primary:active,button.bg-primary:active,[data-add]:active{background-color:var(--aj-gold-active)!important}
a,button{transition:background-color .18s ease,color .18s ease,border-color .18s ease}
:is(a,button,input,textarea,select):focus-visible{outline:3px solid var(--aj-gold-soft);outline-offset:2px}

/* ---------- navigation ---------- */
header nav a[aria-current="page"]{color:var(--aj-gold)!important;font-weight:700}
header nav a:hover{color:var(--aj-gold)!important}

/* mobile drawer */
.aj-burger{display:none}
#aj-drawer{position:fixed;inset:0;z-index:95;background:var(--aj-cream);
  transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);overflow:auto;
  padding:calc(22px + env(safe-area-inset-top,0px)) 22px 30px}
[dir=rtl] #aj-drawer{transform:translateX(-100%)}
#aj-drawer.open{transform:none!important}
#aj-drawer a{display:block;padding:15px 4px;font-size:19px;font-family:var(--aj-serif);
  color:var(--aj-ink);text-decoration:none;border-bottom:1px solid var(--aj-outline-2)}
#aj-drawer .aj-close{border:0;background:none;font-size:15px;color:var(--aj-ink-2);cursor:pointer;margin-bottom:10px}
@media (max-width:900px){
  .aj-burger{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:50%;border:0;background:var(--aj-cream-mid);cursor:pointer}
  header nav{display:none!important}
  h1{font-size:clamp(28px,8vw,40px)}
}

/* ---------- footer ---------- */
footer img{height:auto}
footer .aj-logo{width:44px;height:44px;object-fit:contain}

/* ---------- maps ---------- */
.aj-map{width:100%;border:0;border-radius:14px;min-height:320px;display:block;
  box-shadow:0 10px 30px -18px rgba(31,27,17,.45)}
.aj-map-wrap{margin-top:22px}

/* ---------- dark mode ---------- */
:root[data-theme="dark"]{
  --aj-cream:#14120F;
  --aj-cream-low:#1A1712;
  --aj-cream-mid:#221E18;
  --aj-cream-high:#2A251D;
  --aj-card:#1C1914;
  --aj-ink:#F6F1E8;
  --aj-ink-2:#CFC7B8;
  --aj-outline:#8C8271;
  --aj-outline-2:#4A4237;
  --aj-gold:#E3C169;
  --aj-gold-soft:#C8A64B;
  --aj-gold-hover:#F0D98A;
  --aj-gold-active:#C8A64B;
  --aj-on-gold:#14120F;
  --aj-green:#A8BE90;
}
:root[data-theme="dark"] body{background:var(--aj-cream)!important;color:var(--aj-ink)!important}
:root[data-theme="dark"] h1,:root[data-theme="dark"] h2,:root[data-theme="dark"] h3,
:root[data-theme="dark"] h4,:root[data-theme="dark"] h5,:root[data-theme="dark"] h6{color:var(--aj-ink)!important}
:root[data-theme="dark"] p,:root[data-theme="dark"] li,:root[data-theme="dark"] dd,
:root[data-theme="dark"] span,:root[data-theme="dark"] label,:root[data-theme="dark"] output,
:root[data-theme="dark"] dt,:root[data-theme="dark"] small,:root[data-theme="dark"] td,
:root[data-theme="dark"] th,:root[data-theme="dark"] figcaption{color:inherit}
:root[data-theme="dark"] .text-on-surface{color:var(--aj-ink)!important}
:root[data-theme="dark"] .text-on-surface-variant{color:var(--aj-ink-2)!important}
:root[data-theme="dark"] .text-outline,:root[data-theme="dark"] .text-outline-variant{color:var(--aj-outline)!important}
:root[data-theme="dark"] .text-primary{color:var(--aj-gold)!important}
:root[data-theme="dark"] .text-secondary{color:var(--aj-green)!important}
:root[data-theme="dark"] header,:root[data-theme="dark"] footer,
:root[data-theme="dark"] section,:root[data-theme="dark"] main,
:root[data-theme="dark"] .bg-surface,:root[data-theme="dark"] .bg-background,
:root[data-theme="dark"] .bg-surface-bright{background-color:var(--aj-cream)!important}
:root[data-theme="dark"] .bg-surface-container-lowest,
:root[data-theme="dark"] .bg-surface-container-low{background-color:var(--aj-card)!important}
:root[data-theme="dark"] .bg-surface-container,
:root[data-theme="dark"] .bg-surface-container-high,
:root[data-theme="dark"] .bg-surface-container-highest{background-color:var(--aj-cream-mid)!important}
:root[data-theme="dark"] input,:root[data-theme="dark"] textarea,:root[data-theme="dark"] select{
  background-color:var(--aj-cream-mid)!important;color:var(--aj-ink)!important;border-color:var(--aj-outline-2)!important}
:root[data-theme="dark"] input::placeholder,:root[data-theme="dark"] textarea::placeholder{color:var(--aj-outline)!important}
:root[data-theme="dark"] #aj-drawer{background:var(--aj-cream)!important}
:root[data-theme="dark"] #cartPanel{background:var(--aj-card)!important;color:var(--aj-ink)!important}
:root[data-theme="dark"] hr,:root[data-theme="dark"] [class*="border-"]{border-color:var(--aj-outline-2)!important}

/* nothing see-through, in either theme */
header,footer,#aj-drawer,#cartPanel,.bg-surface,.bg-surface-container,
.bg-surface-container-low,.bg-surface-container-lowest,.bg-surface-container-high{
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;opacity:1!important}
header{background-color:var(--aj-cream)!important;border-bottom:1px solid var(--aj-outline-2)}
[class*="bg-white/"],[class*="bg-black/"],[class*="/80"],[class*="/70"],[class*="/60"],[class*="/50"]{
  backdrop-filter:none!important}

/* the theme switch itself */
.aj-theme{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:50%;border:0;background:var(--aj-cream-mid);color:var(--aj-ink);cursor:pointer}
.aj-theme:hover{background:var(--aj-cream-high)}


/* ---------- header: one row, never overlapping ---------- */
header > div{flex-wrap:nowrap!important;gap:12px}
header nav{flex:0 1 auto;min-width:0}
header .aj-theme,header .aj-burger,header [data-open-cart]{flex:0 0 auto}
header a[aria-label*="Jenaan"]{flex:0 0 auto;text-decoration:none}
header svg{display:block}

/* ---------- hero: text over a photo is always light, in both themes ---------- */
.hero2 h1,.hero2 h2,.hero2 p,.hero2 .ar,.aj-banner h1,.aj-banner p{color:#fff!important}
.hero2 h1 em,.aj-banner .font-label-md{color:#E3C169!important}
section.relative > .absolute.inset-0.z-0 ~ * h1,
section.relative > .absolute.inset-0.z-0 ~ * h2{color:#fff!important}
/* a readable scrim under any hero that sits on a photograph */
section.relative:has(> .absolute.inset-0.z-0)::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(20,18,15,.28) 0%,rgba(20,18,15,.55) 55%,rgba(20,18,15,.85) 100%)}
section.relative:has(> .absolute.inset-0.z-0) > *:not(.absolute){position:relative;z-index:2}

/* ---------- dark mode: anything still inheriting a light colour ---------- */
:root[data-theme="dark"] details,:root[data-theme="dark"] summary{color:var(--aj-ink)!important}
:root[data-theme="dark"] .aj-map-wrap{filter:brightness(.92)}
:root[data-theme="dark"] [style*="color:#1A1A1A"],
:root[data-theme="dark"] [style*="color: #1A1A1A"]{color:var(--aj-ink)!important}
:root[data-theme="dark"] .bg-inverse-surface{background-color:var(--aj-cream-mid)!important}
:root[data-theme="dark"] .text-inverse-on-surface{color:var(--aj-ink)!important}

/* ---------- reviews and FAQ ---------- */
#reviews .font-headline-2xl{line-height:1.1}
details summary::-webkit-details-marker{display:none}
details summary{list-style:none;position:relative;padding-inline-end:26px}
details summary::after{content:"+";position:absolute;inset-inline-end:0;top:0;color:var(--aj-gold);font-weight:700}
details[open] summary::after{content:"\2212"}