/* ═══════════════════════════════════════════════════════════════════
 * EEINA · Shared Chrome CSS · component-system owned
 * Holds chrome rules that were previously inline-only (home.html) or
 * scattered into content stylesheets (content/_category.css), so that
 * base.njk delivers identical, working chrome on EVERY page.
 * Loaded by _includes/partials/head.njk alongside:
 *   /_landing.css      (nav bar, footer, sticky-cta, container, btn, tokens)
 *   /content/_nav.css  (mobile nav drawer)
 * Source: home.html inline <style> (verbatim) — لا اختراع.
 * ═══════════════════════════════════════════════════════════════════ */

/* ═══ EEINA Recipes Nav Dropdown ═══ */
.navdrop-wrap { position: relative; display: inline-flex; align-items: center; }
.navdrop-trigger { background: transparent; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; display: inline-flex; align-items: center; gap: 5px; }
.navdrop-trigger svg { width: 9px; height: 9px; opacity: 0.6; transition: transform 200ms; }
.navdrop-trigger[aria-expanded="true"] svg { transform: rotate(180deg); opacity: 1; }
.navdrop-trigger:hover { color: var(--olive-dark, #3D7A1F); }
.navdrop-menu { position: absolute; inset-block-start: calc(100% + 18px); inset-inline-end: 0; background: #FFFFFF; border: 1px solid var(--border, #E8E8E6); border-radius: 8px; box-shadow: 0 24px 56px rgba(28,28,30,0.10); padding: 22px 24px; display: grid; grid-template-columns: repeat(3, minmax(150px, 1fr)); gap: 24px 32px; min-width: 600px; z-index: 100; font-family: 'IBM Plex Sans Arabic', sans-serif; }
.navdrop-menu[hidden] { display: none; }
.navdrop-menu::before { content: ''; position: absolute; inset-block-start: -7px; inset-inline-end: 38px; width: 12px; height: 12px; background: #FFFFFF; border-block-start: 1px solid var(--border, #E8E8E6); border-inline-start: 1px solid var(--border, #E8E8E6); transform: rotate(45deg); }
.navdrop-col-label { font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em; color: var(--olive-dark, #3D7A1F); margin-block-end: 10px; padding-block-end: 8px; border-block-end: 1px solid var(--border, #E8E8E6); }
.navdrop-col a { display: block; padding: 7px 8px; margin-inline: -8px; border-radius: 5px; font-size: 13px; color: var(--text, #1C1C1E); transition: all 160ms; text-decoration: none; }
.navdrop-col a:hover { background: var(--olive-tint, #F0F7EA); color: var(--olive-darker, #2E5A18); padding-inline-start: 14px; }
@media (max-width: 920px) {
  .navdrop-menu { position: fixed; inset-inline: 12px; inset-block-start: calc(var(--nav-h, 64px) + 4px); min-width: 0; grid-template-columns: 1fr; max-height: calc(100vh - var(--nav-h, 64px) - 20px); overflow-y: auto; }
  .navdrop-menu::before { display: none; }
}

/* ============================================================
   Interlink components (single-source) — breadcrumb + explore
   Added 2026-05-29 to make the site one connected official whole.
   Tokens only (resolved from _landing.css). No hardcoded HEX.
   ============================================================ */
.eeina-breadcrumb { max-width: 1180px; margin: 0 auto; padding: 16px var(--gutter) 0; display: flex; gap: 6px; align-items: center; font-size: 12px; color: var(--text-soft); flex-wrap: wrap; line-height: 1.6; }
.eeina-breadcrumb a { color: var(--text-soft); text-decoration: none; }
.eeina-breadcrumb a:hover { color: var(--olive-dark); }
.eeina-breadcrumb span { color: var(--text); font-weight: 500; }
.eeina-breadcrumb svg { width: 10px; height: 10px; opacity: 0.5; flex: none; }

.eeina-explore { max-width: 1180px; margin: clamp(44px, 6vw, 72px) auto 0; padding: 28px var(--gutter) 4px; border-block-start: 1px solid var(--border); }
.eeina-explore-label { font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--olive-dark); margin-block-end: 14px; }
.eeina-explore-links { display: flex; flex-wrap: wrap; gap: 10px; }
.eeina-explore-links a { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; background: var(--white); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--text); text-decoration: none; transition: border-color 160ms ease-out, background 160ms ease-out, color 160ms ease-out; }
.eeina-explore-links a:hover { border-color: var(--olive); background: var(--olive-tint); color: var(--olive-dark); }
.eeina-explore-links svg { width: 13px; height: 13px; opacity: 0.7; flex: none; }

/* ============================================================
   MOBILE chrome (single-source) — touch targets + safe-area.
   Bottom nav removed 2026-06-07: this is a landing site, so the
   header menu is the single navigation entry point. Desktop
   untouched. Tokens only (resolved from _landing.css). No HEX.
   ============================================================ */

/* Below the desktop breakpoint the header collapses to a single
   menu button (the drawer trigger). The language switch already
   lives inside the drawer, so we hide the inline one to keep the
   bar uncluttered: logo · menu. */
@media (max-width: 919.98px) {
  .nav-lang { display: none; }
  .nav-header-cta { display: none; }
}

@media (max-width: 768px) {
  /* comfortable touch targets (WCAG 2.5.5) */
  .nav-menu-btn, .nav-drawer-close { min-width: 48px; min-height: 48px; }
  .nav-drawer-nav a,
  .nav-drawer-recipes summary,
  .nav-drawer-recipes ul a { min-height: 48px; display: flex; align-items: center; }
}

/* ============================================================
   English (LTR) landing components — namespaced .en-* (no AR impact)
   Used by /en/* core pages. Tokens only. 2026-05-30
   ============================================================ */
.en-wrap { font-family: var(--font-en); color: var(--text); }
.en-hero { background: var(--cream); padding: clamp(48px,8vw,104px) 0; }
.en-hero .container { max-width: 1180px; }
.en-eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:var(--olive-dark); background:var(--olive-tint); padding:7px 14px; border-radius:999px; margin-block-end:20px; }
.en-h1 { font-size: clamp(34px,6vw,64px); font-weight:700; line-height:1.1; letter-spacing:-0.02em; margin-block-end:18px; max-width:16ch; }
.en-h1 .accent { color: var(--olive-dark); }
.en-lede { font-size: clamp(16px,1.6vw,20px); color:var(--text-soft); line-height:1.7; max-width:56ch; margin-block-end:30px; }
.en-actions { display:flex; gap:12px; flex-wrap:wrap; }
.en-trust { display:flex; flex-wrap:wrap; gap:14px 28px; margin-block-start:34px; }
.en-trust span { display:inline-flex; align-items:center; gap:8px; font-size:13.5px; color:var(--text-soft); }
.en-trust svg { width:16px; height:16px; color:var(--olive-dark); flex:none; }
.en-section { padding: clamp(44px,7vw,88px) 0; }
.en-section.alt { background: var(--bg-section); }
.en-kicker { font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--olive-dark); margin-block-end:12px; }
.en-h2 { font-size: clamp(26px,3.4vw,40px); font-weight:700; letter-spacing:-0.015em; margin-block-end:14px; }
.en-sub { font-size:16px; color:var(--text-soft); line-height:1.7; max-width:62ch; margin-block-end:36px; }
.en-grid { display:grid; grid-template-columns:1fr; gap:18px; }
@media (min-width:680px){ .en-grid.cols-3 { grid-template-columns:repeat(3,1fr);} .en-grid.cols-2 { grid-template-columns:repeat(2,1fr);} .en-grid.cols-4 { grid-template-columns:repeat(4,1fr);} }
.en-card { background:var(--white); border:1px solid var(--border); border-radius:16px; padding:26px; transition:border-color 160ms, transform 160ms; }
.en-card:hover { border-color:var(--olive); transform:translateY(-2px); }
.en-card .ic { width:44px; height:44px; border-radius:50%; background:var(--olive-tint); display:flex; align-items:center; justify-content:center; margin-block-end:16px; }
.en-card .ic svg { width:22px; height:22px; color:var(--olive-dark); }
.en-card h3 { font-size:18px; font-weight:600; margin-block-end:8px; }
.en-card p { font-size:14.5px; color:var(--text-soft); line-height:1.7; }
.en-card a.more { display:inline-block; margin-block-start:14px; font-size:14px; font-weight:600; color:var(--olive-dark); text-decoration:none; }
.en-step { display:flex; gap:16px; align-items:flex-start; }
.en-step .n { width:38px; height:38px; border-radius:50%; background:var(--olive); color:var(--white); font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.en-step h3 { font-size:17px; font-weight:600; margin-block-end:6px; }
.en-step p { font-size:14.5px; color:var(--text-soft); line-height:1.7; }
.en-cta-band { background:var(--olive-darker); color:var(--white); text-align:center; padding: clamp(48px,7vw,88px) 0; }
.en-cta-band h2 { font-size:clamp(26px,3.4vw,40px); font-weight:700; margin-block-end:14px; }
.en-cta-band p { color:rgba(255,255,255,.85); font-size:16px; margin-block-end:28px; }
.en-cta-band .btn-primary { background:var(--white); color:var(--olive-darker); }
.en-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.en-list li { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text-soft); line-height:1.7; }
.en-list svg { width:20px; height:20px; color:var(--olive-dark); flex:none; margin-block-start:2px; }

/* ============================================================
   Language switcher — brand-styled (no default purple/underline)
   ============================================================ */
.nav-lang { display:inline-flex; align-items:center; gap:6px; color:var(--text-soft); text-decoration:none; font-size:13.5px; font-weight:500; padding:6px 9px; border-radius:9px; transition:color 160ms ease-out, background 160ms ease-out; }
.nav-lang svg { width:18px; height:18px; }
.nav-lang:hover, .nav-lang:focus-visible { color:var(--olive-dark); background:var(--olive-tint); }
.nav-drawer-lang { color:var(--olive-dark); text-decoration:none; font-weight:600; }
.nav-drawer-lang:hover { color:var(--olive-darker); }

.navdrop-wrap .navdrop-menu { display: none; }
/* Bridge the 18px gap so hover doesn't break when moving into the menu */
.navdrop-wrap::after { content: ''; position: absolute; inset-block-start: 100%; inset-inline-start: -24px; inset-inline-end: -24px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .navdrop-wrap:hover .navdrop-menu { display: grid; }
}
/* Click-open state (set by JS) */
.navdrop-wrap.is-open .navdrop-menu { display: grid; }
.navdrop-trigger { cursor: pointer; }