/* ============================================================
HABIB EDUCATION — shared site components
Header · footer · sections · cards · modal · tabs · forms
============================================================ */
/* ---------------- Base reset ----------------
Browsers apply a default margin (usually 8px) to out of the box.
Without resetting it, every full-bleed section (like the homepage hero)
ends up inset from the edges of the screen instead of touching them —
invisible on white/matching-background sections, but visible as a gap
on colored sections. Fixed-position elements (WA button, quiz icon) are
NOT affected by this margin since they're positioned relative to the
viewport, not to body — which is why only the hero/stats bar showed it. */
html,body{margin:0; padding:0;}
/* ---------------- Layout shell ---------------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
.section{padding:96px 0;}
section[id]{scroll-margin-top:84px;}
.section.tight{padding:64px 0;}
.section-soft{background:var(--bg-soft);}
.section-tint{background:var(--bg-tint);}
.section-head{max-width:660px; margin:0 auto 52px; text-align:center;}
.section-head.left{margin-left:0; text-align:left;}
.section-head h2{font-size:42px; margin-top:12px;}
.section-head p{color:var(--slate); font-size:19px; margin-top:14px;}
.eyebrow.center{display:block;}
/* ---------------- Header ---------------- */
.site-header{
position:sticky;
top:0;
z-index:200;
background:rgba(255,255,255,.86);
backdrop-filter:saturate(150%) blur(12px);
border-bottom:1px solid var(--line);
transition:box-shadow .25s;
}
.site-header.scrolled{box-shadow:var(--sh-sm);}
.nav{display:flex; align-items:center; justify-content:space-between; height:74px;}
.brand{display:flex; align-items:center; gap:11px; font-family:var(--font-head); font-weight:800; font-size:21px; letter-spacing:-.01em; color:var(--ink);}
.brand .mark{width:38px;height:38px;border-radius:11px;background:var(--gradient-teal); display:grid;place-items:center;color:#fff; box-shadow:var(--sh-teal);}
.brand .mark svg{width:21px;height:21px;}
.brand .sub{font-weight:500;color:var(--slate);}
/* Prevent the header logo from being squeezed narrower than its natural
width by the flexbox layout on narrow (mobile) screens — without this, the
image's fixed height stays the same while flexbox shrinks its width, which
distorts/flattens the logo. flex-shrink:0 keeps it at its intrinsic ratio. */
.brand img{flex-shrink:0; max-width:none;}
.nav-menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0;}
.nav-menu a{
font-family:var(--font-head);
font-weight:100;
font-size:15px;
color:var(--ink-2);
padding:9px 14px;
border-radius:var(--r-pill);
transition:.18s;
display:block;
}
.nav-menu a:hover{color:var(--brand); background:var(--teal-50);}
.nav-menu a.active{color:var(--brand); font-weight:600;}
/* min-width:0 is the actual fix for the mobile overflow bug: a flex item
(.nav-actions is a flex item of .nav) defaults to a hidden "minimum
width" equal to the natural size of its content, which blocks it from
ever shrinking smaller than that — even when a child further inside
(.nav-utility) is explicitly set up to shrink/scroll. Without this line,
that inner shrink-and-scroll behaviour never had a chance to kick in,
because the outer box refused to get smaller in the first place, and
that's what was forcing the whole page wider than the phone screen. */
.nav-actions{display:flex; align-items:center; gap:14px; min-width:0;}
/* .nav-utility groups the lower-priority header controls (search, language
toggle, currency toggle) together so they can be tightened/scrolled as one
unit on narrow screens without ever pushing the Apply button or hamburger
(the two controls that must always stay reachable) out of the row. See the
max-width:480px rule further down for the overflow-safety behaviour. */
.nav-utility{display:flex; align-items:center; gap:14px;}
.langtog{display:flex; border:1.5px solid var(--line); border-radius:var(--r-pill); overflow:hidden; font-family:var(--font-head); font-weight:600; font-size:13px; background:#fff; flex-shrink:0;}
.langtog button{padding:5px 11px; color:var(--slate); transition:.15s; font-size:17px; line-height:1;}
.langtog button.on{background:var(--brand); color:#fff;}
.hamburger{display:none; width:44px;height:44px; border-radius:11px; border:1.5px solid var(--line); background:#fff; align-items:center; justify-content:center; flex-direction:column; gap:4px; flex-shrink:0;}
.hamburger span{width:20px;height:2px;background:var(--ink); border-radius:2px; transition:.25s;}
.hamburger.open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}
/* mobile drawer */
.mobile-nav{
position:fixed;
inset:74px 0 auto 0;
background:#fff;
border-bottom:1px solid var(--line);
box-shadow:var(--sh-lg);
padding:14px 28px 26px;
z-index:199;
transform:translateY(-12px);
opacity:0;
pointer-events:none;
transition:.25s;
display:none;
}
.mobile-nav.open{transform:none; opacity:1; pointer-events:auto;}
.mobile-nav a{display:block; padding:14px 6px; font-family:var(--font-head); font-weight:500; font-size:17px; border-bottom:1px solid var(--line-2); color:var(--ink-2);}
.mobile-nav .btn{margin-top:18px; width:100%;}
.mobile-nav a.btn{color:#fff; border-bottom:0; text-align:center;}
/* ---------------- Cards ---------------- */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.25s; box-shadow:var(--sh-sm);}
.card:hover{box-shadow:var(--sh-lg); transform:translateY(-4px); border-color:var(--teal-100);}
/* Reset native