/* Easy Zaban — shared layout + neutral platform theme.
   Every colour is a token. A language course overrides the tokens in its own
   theme file (assets/theme-es.css …) so the chrome never has to be re-written. */
@font-face { font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Regular.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Medium.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Vazirmatn'; src:url('fonts/Vazirmatn-Bold.ttf'); font-weight:700 900; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Bold.woff2') format('woff2'); font-weight:700; font-display:swap; }
@font-face { font-family:'Inter'; src:url('fonts/Inter-Black.woff2') format('woff2'); font-weight:900; font-display:swap; }

:root{
  /* --- Easy Zaban platform: warm charcoal + the logo's clay orange. Not a flag. --- */
  --brand:#2B2320; --brandDeep:#191310; --accent:#D97757; --accentInk:#A8512F; --onAccent:#2B1810;
  --cream:#FBF7F2; --sand:#F2E6DA; --ink:#2B2320; --line:#E7DACD; --muted:#6E6259;
  --ov1:rgba(25,19,16,.66); --ov2:rgba(25,19,16,.80);
  --masc:#0F6B5C; --fem:#8A3A7A;          /* grammar-gender code, course-agnostic */
  --tint:#F7EFE7;                          /* row hover / soft fill */
}
*{ margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html{ scroll-behavior:smooth; }
body{ font-family:'Vazirmatn',system-ui,sans-serif; direction:rtl; background:var(--cream);
  color:var(--ink); line-height:1.75; }
.es{ font-family:'Inter',sans-serif; direction:ltr; unicode-bidi:isolate; display:inline-block; }
a{ color:inherit; text-decoration:none; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 22px; }

/* header */
header{ position:sticky; top:0; z-index:50; background:var(--brand); backdrop-filter:blur(8px);
  box-shadow:0 2px 20px rgba(0,0,0,0.18); }
header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.hleft{ display:flex; align-items:center; gap:14px; min-width:0; }
.home{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.home img{ display:block; border-radius:9px; }
.home .wm{ font-family:'Inter'; direction:ltr; color:#fff; font-weight:900; font-size:16px; letter-spacing:1.4px; }
.home:hover .wm{ color:var(--accent); }
/* course name sits beside the platform mark, so home is always one tap away */
.ctag{ font-family:'Inter'; direction:ltr; font-weight:900; font-size:17px; color:#fff;
  border-right:1px solid rgba(255,255,255,.26); padding-right:14px; white-space:nowrap; }
.ctag .acc{ color:var(--accent); }
nav a.back{ color:var(--accent); font-weight:800; }
.brand{ font-family:'Inter'; direction:ltr; color:#fff; font-weight:900; font-size:18px; letter-spacing:1.4px; }
.brand .acc{ color:var(--accent); }
nav{ display:flex; gap:22px; font-weight:600; font-size:16px; }
nav a{ color:rgba(255,255,255,.86); padding:6px 2px; border-bottom:2px solid transparent; }
nav a:hover, nav a.on{ color:#fff; border-bottom-color:var(--accent); }
.burger{ display:none; background:none; border:0; color:#fff; font-size:26px; cursor:pointer; }

/* hero */
.hero{ position:relative; color:#fff; padding:96px 0 84px; text-align:center;
  background-image:linear-gradient(var(--ov1),var(--ov2)), var(--ubg,none);
  background-size:cover; background-position:center; background-color:var(--brandDeep); }
.hero h1{ font-size:54px; font-weight:900; line-height:1.25; }
.hero h1 .es{ color:var(--accent); }
.hero p{ margin-top:16px; font-size:21px; color:rgba(255,255,255,.9); }
.cta{ margin-top:30px; display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.btn{ background:var(--accent); color:var(--onAccent); font-weight:800; padding:15px 34px; border-radius:999px;
  font-size:18px; border:0; cursor:pointer; transition:transform .15s, box-shadow .15s; display:inline-block; }
.btn:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(0,0,0,.28); }
.btn.ghost{ background:transparent; color:#fff; box-shadow:inset 0 0 0 2px rgba(255,255,255,.5); }

/* sections */
section{ padding:64px 0; }
.eyebrow{ color:var(--accentInk); font-weight:800; font-size:15px; letter-spacing:.5px; }
h2{ font-size:34px; font-weight:900; color:var(--brand); margin:6px 0 26px; }
h2 .es{ color:var(--accentInk); }
.lead{ font-size:18px; color:var(--muted); max-width:760px; }

.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px; }
.card{ background:#fff; border:1px solid var(--line); border-radius:18px; padding:26px; }
.card h3{ font-size:21px; color:var(--brand); margin-bottom:8px; }
.card p{ color:var(--muted); font-size:16px; }
.card .ic{ font-size:30px; margin-bottom:10px; }

/* ---- Easy Zaban landing: language shelf ---- */
/* auto-fit so 2, 3 or 4 languages all fill the row without an orphan card */
.langgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:20px; margin-top:28px; }
.langcard{ position:relative; border-radius:20px; overflow:hidden; min-height:210px; display:flex;
  flex-direction:column; justify-content:flex-end; padding:24px; color:#fff;
  background-image:linear-gradient(rgba(0,0,0,.10),rgba(0,0,0,.62)), var(--cbg,none);
  background-size:cover; background-position:center; background-color:var(--brandDeep);
  border:1px solid var(--line); transition:transform .15s, box-shadow .15s; }
.langcard:hover{ transform:translateY(-3px); box-shadow:0 16px 40px rgba(0,0,0,.20); }
.langcard .flag{ position:absolute; top:16px; right:16px; display:flex; border-radius:6px; overflow:hidden;
  width:42px; height:28px; box-shadow:0 2px 8px rgba(0,0,0,.35); }
.langcard .flag i{ flex:1; }
.langcard .flag.horiz{ flex-direction:column; }
.langcard .flag.us{ background:repeating-linear-gradient(180deg,#B22234 0 2.15px,#fff 2.15px 4.3px); }
.langcard .flag.us b{ position:absolute; top:0; left:0; width:44%; height:53.8%; background:#3C3B6E; }
.langcard h3{ font-size:23px; font-weight:900; line-height:1.35; }
.langcard .sub{ font-size:15px; color:rgba(255,255,255,.86); margin-top:2px; }
.langcard .st{ margin-top:12px; align-self:flex-start; font-size:13px; font-weight:800; border-radius:999px;
  padding:5px 14px; background:rgba(255,255,255,.18); backdrop-filter:blur(3px); }
.langcard.live .st{ background:var(--accent); color:var(--onAccent); }
.langcard.soon{ filter:grayscale(.55); opacity:.72; pointer-events:none; }

/* lesson list / curriculum */
.unit{ background:#fff; border:1px solid var(--line); border-radius:18px; margin-bottom:14px; overflow:hidden; }
.unit summary{ cursor:pointer; padding:26px; font-weight:800; font-size:19px; color:#fff;
  display:flex; align-items:center; gap:12px; list-style:none; position:relative; min-height:104px;
  background-image:linear-gradient(270deg, var(--ov2) 12%, var(--ov1) 62%, rgba(0,0,0,.28) 100%), var(--ubg,none);
  background-size:cover; background-position:center; background-color:var(--brandDeep);
  text-shadow:0 1px 12px rgba(0,0,0,.45); }
.unit summary::-webkit-details-marker{ display:none; }
.unit summary:before{ content:"▸"; color:var(--accent); font-size:18px; transition:transform .2s; text-shadow:none; }
.unit[open] summary:before{ transform:rotate(-90deg); }
.unit summary .n{ background:var(--accent); color:var(--onAccent); border-radius:8px; padding:3px 13px;
  font-size:15px; text-shadow:none; flex-shrink:0; }
.rows{ border-top:1px solid var(--line); }
.row{ display:flex; align-items:center; gap:16px; padding:14px 26px; border-bottom:1px solid var(--line); }
.row:last-child{ border-bottom:0; }
.row .num{ width:38px; height:38px; border-radius:50%; background:var(--sand); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-weight:800; flex-shrink:0; font-size:15px; }
.row.done .num{ background:var(--brand); color:#fff; }
.row .ti{ flex:1; }
.row .ti .es{ font-weight:700; color:var(--brand); font-size:17px; }
.row .ti small{ display:block; color:var(--muted); font-size:14px; }
.row .st{ font-size:14px; font-weight:700; color:#A79C93; }
.row.done .st{ color:var(--brand); }
.row.done:hover{ background:var(--tint); }

/* lesson page */
.lhead{ background-image:linear-gradient(var(--ov1),var(--ov2)), var(--ubg,none);
  background-size:cover; background-position:center; background-color:var(--brandDeep);
  color:#fff; padding:52px 0 44px; }
.lhead .eb{ color:var(--accent); font-weight:800; }
.lhead h1{ font-size:42px; font-weight:900; margin-top:6px; }
.lhead h1 .es{ color:#fff; }
.lhead p{ margin-top:10px; font-size:19px; color:rgba(255,255,255,.88); }
video{ width:100%; border-radius:18px; background:#000; display:block; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.dl{ display:flex; gap:14px; flex-wrap:wrap; margin-top:20px; }
.dl a{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 22px;
  font-weight:700; color:var(--brand); display:flex; align-items:center; gap:10px; }
.dl a:hover{ border-color:var(--accent); }
audio{ width:100%; margin-top:8px; }

/* the video is landscape; on a portrait phone it reads as a thumbnail unless we help */
.vbox{ position:relative; }
.rothint{ display:none; }
@media (max-width:860px){
  .vbox{ margin:0 -22px; }                    /* full-bleed: bigger before anyone taps */
  .vbox video{ border-radius:0; }
  .rothint{ display:block; text-align:center; margin:10px 22px 0; font-size:14px; color:var(--muted); }
}
@media (max-width:860px) and (orientation:landscape){
  .rothint{ display:none; }            /* already turned — say nothing */
}

.pm{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.pmc{ background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; text-align:center; cursor:pointer; }
.pmc:hover{ border-color:var(--accent); }
.pmc .tr{ font-size:26px; font-weight:900; color:var(--brand); font-family:'Inter'; direction:ltr; unicode-bidi:isolate; display:block; }
.pmc.m .tr{ color:var(--masc); } .pmc.f .tr{ color:var(--fem); }
.pmc .hint{ font-size:15px; color:var(--muted); margin-top:4px; }
.pmc .hint b{ color:var(--accentInk); }
.pmc .mean{ font-size:16px; font-weight:700; margin-top:2px; }
.pmc .play{ font-size:13px; color:var(--accentInk); font-weight:700; margin-top:6px; }

table.scene{ width:100%; border-collapse:collapse; border-radius:16px; overflow:hidden;
  box-shadow:0 2px 0 var(--line); }
table.scene th{ background:var(--brandDeep); color:#fff; text-align:right; padding:12px 18px; font-size:14px; }
table.scene td{ background:#fff; padding:12px 18px; border-bottom:1px solid var(--line); font-size:16px; }
table.scene tr:nth-child(odd) td{ background:var(--tint); }
td.who{ color:var(--accentInk); font-weight:800; width:110px; }
td.sp .es{ color:var(--brand); font-weight:700; font-size:17px; }

.note{ background:var(--sand); border-right:5px solid var(--accent); border-radius:12px; padding:18px 22px; font-size:16px; }
.lnav{ display:flex; justify-content:space-between; align-items:center; gap:14px; margin:44px 0 0; }
.lnav a{ background:var(--cream); border:1px solid var(--line); border-radius:14px; padding:14px 24px; font-weight:700; color:var(--brand); }
.lnav a.dis{ opacity:.35; pointer-events:none; }
.lnav .cnt{ font-weight:700; color:var(--muted); }

/* practice */
#game{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:30px; text-align:center; min-height:330px; }
#q{ font-size:34px; font-weight:900; color:var(--brand); margin:18px 0 24px; }
#q .es{ font-size:38px; }
.opts{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:620px; margin:0 auto; }
.opt{ background:var(--cream); border:2px solid var(--line); border-radius:14px; padding:16px; font-size:19px;
  font-weight:700; cursor:pointer; transition:.15s; }
.opt:hover{ border-color:var(--accent); }
.opt.ok{ background:var(--sand); border-color:var(--accent); color:var(--brand); }
.opt.no{ background:#EFE7DA; border-color:#B9A88C; color:#6B5E52; }
.score{ color:var(--muted); font-weight:700; }

footer{ background:var(--brandDeep); color:rgba(255,255,255,.72); padding:40px 0; margin-top:40px; font-size:15px; }
footer .wrap{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:18px; }
.fbrand{ display:flex; align-items:center; gap:14px; }
.fbrand img{ border-radius:11px; display:block; }
.fbrand .fa{ font-size:14px; color:rgba(255,255,255,.62); }
.fnav a{ color:var(--accent); font-weight:700; }

@media (max-width:860px){
  nav{ display:none; } .burger{ display:block; }
  .home .wm{ display:none; } .ctag{ font-size:16px; }
  nav.open{ display:flex; position:absolute; top:64px; right:0; left:0; background:var(--brand);
    flex-direction:column; padding:14px 22px; gap:12px; }
  .hero h1{ font-size:34px; } .hero p{ font-size:18px; }
  .grid3, .pm, .langgrid{ grid-template-columns:1fr; } .opts{ grid-template-columns:1fr; }
  h2{ font-size:26px; } .lhead h1{ font-size:29px; }
}