/* ETHANNA shared header and footer for every page on learn.ethanna.com (v2, 29 Oct 2026).
   Same look as the landing page nav and footer. Own tokens, so it renders the same on every
   page whatever that page's CSS does. Logical properties only: works RTL and LTR. */
:root{
  --ec-red:#EF233C; --ec-red-deep:#D90429; --ec-navy:#2B2D42; --ec-deep:#1E2432;
  --ec-fg:#2B2D42; --ec-bg:rgba(237,242,244,.88); --ec-card:#FFFFFF;
  --ec-line:rgba(43,45,66,.10); --ec-line-hi:rgba(43,45,66,.20); --ec-chip:rgba(43,45,66,.06);
  --ec-glass:rgba(255,255,255,.72);
  --ec-shadow:0 8px 22px rgba(43,45,66,.07); --ec-shadow-lg:0 24px 60px rgba(43,45,66,.14);
}
html[data-theme="dark"]{
  --ec-fg:#F2F5F7; --ec-bg:rgba(22,27,38,.88); --ec-card:#1E2534;
  --ec-line:rgba(255,255,255,.10); --ec-line-hi:rgba(255,255,255,.22); --ec-chip:rgba(255,255,255,.07);
  --ec-glass:rgba(255,255,255,.055);
  --ec-shadow:0 8px 22px rgba(0,0,0,.35); --ec-shadow-lg:0 20px 48px rgba(0,0,0,.5);
}
.ec-header,.ec-footer{font-family:'Tajawal',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
html[lang="fr"] .ec-header,html[lang="fr"] .ec-footer,html[lang="en"] .ec-header,html[lang="en"] .ec-footer{font-family:'Poppins','Tajawal',system-ui,sans-serif}
.ec-header *,.ec-footer *{box-sizing:border-box}
.ec-wrap{max-width:1180px;margin-inline:auto;padding-inline:24px}
@media(max-width:600px){.ec-wrap{padding-inline:20px}}
.ec-en{font-family:'Poppins','Tajawal',sans-serif;direction:ltr;unicode-bidi:isolate}

/* ---------- header ---------- */
.ec-header{position:fixed;inset:0 0 auto 0;z-index:100;background:transparent;border-bottom:1px solid transparent;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.ec-header.ec-stuck,.ec-header.ec-solid{background:var(--ec-bg);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:var(--ec-line);box-shadow:var(--ec-shadow)}
.ec-header .ec-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:74px}
.ec-logo{display:block;flex:0 0 auto;line-height:0}
.ec-logo img{height:34px;width:auto;display:block}
.ec-logo .ec-dark,.ec-flogo .ec-dark{display:none}
html[data-theme="dark"] .ec-logo .ec-light{display:none}
html[data-theme="dark"] .ec-logo .ec-dark{display:block}
.ec-menu{display:flex;align-items:center;gap:2px}
.ec-menu a{padding:9px 13px;border-radius:9px;font-weight:700;font-size:15px;line-height:1;color:var(--ec-fg);opacity:.78;text-decoration:none;transition:opacity .18s,background .18s;white-space:nowrap}
.ec-menu a:hover,.ec-menu a[aria-current="page"]{opacity:1;background:var(--ec-chip)}
.ec-menu a.ec-cta{background:var(--ec-red);color:#fff;opacity:1;padding:12px 20px;box-shadow:0 6px 18px rgba(239,35,60,.3);margin-inline-start:6px}
.ec-menu a.ec-cta:hover{background:var(--ec-red-deep)}
.ec-tools{display:flex;align-items:center;gap:8px;order:2}
.ec-iconbtn{width:44px;height:44px;border-radius:14px;border:1px solid var(--ec-line);background:var(--ec-glass);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);color:var(--ec-fg);display:grid;place-items:center;cursor:pointer;box-shadow:var(--ec-shadow);transition:transform .2s,border-color .2s;padding:0}
.ec-iconbtn:hover{transform:scale(1.06);border-color:var(--ec-line-hi)}
.ec-iconbtn:active{transform:scale(.94)}
.ec-iconbtn svg{width:20px;height:20px}
.ec-iconbtn .ec-moon{display:none}
html[data-theme="dark"] .ec-iconbtn .ec-moon{display:block}
html[data-theme="dark"] .ec-iconbtn .ec-sun{display:none}
.ec-burger{display:none}
.ec-lang{display:flex;align-items:center;height:44px;border-radius:14px;border:1px solid var(--ec-line);background:var(--ec-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);box-shadow:var(--ec-shadow);padding:4px}
.ec-lang a{min-width:36px;height:34px;display:grid;place-items:center;border-radius:10px;font:700 13px/1 'Poppins','Tajawal',sans-serif;color:var(--ec-fg);opacity:.62;text-decoration:none;padding:0 8px}
.ec-lang a[lang="ar"]{font-family:'Tajawal',sans-serif;font-size:15px}
.ec-lang a:hover{opacity:1}
.ec-lang a[aria-current="true"]{opacity:1;background:var(--ec-navy);color:#fff}
html[data-theme="dark"] .ec-lang a[aria-current="true"]{background:#F2F5F7;color:#1E2432}
:focus-visible.ec-iconbtn,.ec-header a:focus-visible,.ec-footer a:focus-visible{outline:3px solid var(--ec-red);outline-offset:2px}
@media(max-width:1060px){
  .ec-burger{display:grid}
  .ec-menu{position:absolute;top:74px;inset-inline:14px;flex-direction:column;align-items:stretch;background:var(--ec-card);border-radius:16px;padding:12px;gap:4px;box-shadow:var(--ec-shadow-lg);border:1px solid var(--ec-line);display:none}
  .ec-menu.ec-open{display:flex}
  .ec-menu a{padding:14px 16px;text-align:center}
  .ec-menu a.ec-cta{margin:6px 0 0}
}
/* small phones: the language switch moves into the menu (it is also in the footer) */
.ec-menu .ec-menu-lang{display:none}
@media(max-width:560px){
  .ec-tools .ec-lang{display:none}
  .ec-menu .ec-menu-lang{display:flex;justify-content:center;gap:6px;margin-top:8px;box-shadow:none;align-self:center}
  .ec-menu .ec-menu-lang a{padding:0 14px;opacity:.7;text-align:center}
}
@media(max-width:420px){.ec-logo img{height:28px}.ec-tools{gap:6px}}
body.ec-pad{padding-top:74px}

/* ---------- footer ---------- */
.ec-footer{background:var(--ec-deep);color:rgba(255,255,255,.66);padding:56px 0 calc(34px + env(safe-area-inset-bottom));margin:0;position:relative;z-index:1}
.ec-fgrid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:36px;margin-bottom:34px}
.ec-flogo{height:36px;width:auto;margin-bottom:16px;display:block}
.ec-footer p{font-weight:500;font-size:15px;line-height:1.75;max-width:340px;margin:0;color:rgba(255,255,255,.66)}
.ec-footer h5{color:#fff;font-weight:800;font-size:16px;line-height:1.2;margin:0 0 16px}
.ec-footer ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin:0;padding:0}
.ec-footer ul a{font-weight:500;font-size:15px;line-height:1.4;color:rgba(255,255,255,.66);text-decoration:none;transition:color .18s}
.ec-footer ul a:hover{color:#fff}
.ec-footer .ec-ext::after{content:"\2197";font-size:12px;margin-inline-start:6px;opacity:.6;display:inline-block}
html[dir="rtl"] .ec-footer .ec-ext::after{content:"\2196"}
.ec-social{display:flex;flex-wrap:wrap;gap:9px;margin-top:20px}
.ec-social a{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);color:rgba(255,255,255,.72);transition:.2s}
.ec-social a:hover{background:var(--ec-red);border-color:var(--ec-red);color:#fff;transform:translateY(-2px)}
.ec-social svg{width:18px;height:18px;display:block}
.ec-pay{padding-top:22px;border-top:1px solid rgba(255,255,255,.10);margin-bottom:22px}
.ec-paylab{font-weight:600;font-size:13px;color:rgba(255,255,255,.5);margin-bottom:13px;display:flex;align-items:center;gap:8px}
.ec-paylab svg{width:15px;height:15px}
.ec-pay ul{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px}
.ec-pay li{background:#fff;border-radius:8px;padding:7px 11px;display:flex;align-items:center;height:38px;box-shadow:0 2px 8px rgba(0,0,0,.18)}
.ec-pay img{height:24px;width:auto;display:block}
.ec-legal{display:flex;flex-wrap:wrap;gap:8px 18px;margin-bottom:16px;padding-top:20px;border-top:1px solid rgba(255,255,255,.10)}
.ec-legal a{font-weight:500;font-size:14px;color:rgba(255,255,255,.55);text-decoration:none}
.ec-legal a:hover{color:#fff}
.ec-fbot{border-top:1px solid rgba(255,255,255,.10);padding-top:22px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;font-weight:500;font-size:14px}
.ec-flang{display:flex;gap:14px}
.ec-flang a{color:rgba(255,255,255,.55);text-decoration:none}
.ec-flang a[aria-current="true"]{color:#fff;font-weight:700}
@media(max-width:980px){.ec-fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ec-fgrid{grid-template-columns:1fr}.ec-pay li{height:34px;padding:6px 9px}.ec-pay img{height:20px}}
@media(prefers-reduced-motion:reduce){.ec-header,.ec-iconbtn,.ec-social a{transition:none}}