/* ===============================
   LAYOUT
   - App shell (body/main/background)
   - Header & Nav (desktop + mobile drawer)
   - Generic sections & footer
================================== */

/* App shell */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
  background:transparent; /* bg via pseudo */
}
main{ flex:1; }

/* Full-viewport background */
/* Full-viewport background */
body::before {
  content:"";
  position:fixed; inset:0;
  z-index:-1;
  background-color: #ffffff; /* solid white background */
}

/* Header: full-bleed blue bar (no 100vw rounding issues) */
body > header{
  background-color: var(--brand);
  color: #fff;
  width: 100%;
  position: relative;
  z-index: 5; /* overlays content (dropdowns) */
}

/* Nav container */
body > header > nav{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap;
  width:100%; max-width:none; margin:0;
  padding:1rem clamp(16px, 3vw, 40px);
  box-sizing:border-box;

  /* iOS safe areas */
  padding-left:max(16px, env(safe-area-inset-left));
   padding-right: max(0px, env(safe-area-inset-right)) !important;

}

/* Left chunk */
.nav-left{ display:flex; align-items:center; gap:1rem; min-width:0; }
.header-logo{ width:100px; height:auto; }

/* Right chunk */
.nav-right{
  display:flex; align-items:center; gap:clamp(1rem, 2.5vw, 2rem); flex-wrap:wrap;
  margin-left:auto; position:relative;
}
.nav-right ul{
  display:flex; gap:clamp(.75rem, 2vw, 1.5rem);
  list-style:none; margin:0; padding:0; align-items:center;
}

/* Links */
.nav-right a{
  color:#fff; text-decoration:none; font-weight:500;
  transition:color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
  display:inline-flex; align-items:center; line-height:1; padding-block:6px;
}
.nav-right a:hover{ color:var(--gold); }
.nav-right a:not(.nav-cta).active,
.nav-right a:not(.nav-cta)[aria-current="page"]{
  color:var(--gold); border-bottom:2px solid var(--gold);
}

/* CTA buttons that live in the nav */
.nav-cta{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 12px; border-radius:8px; font-weight:600; line-height:1; text-decoration:none;
}
.nav-right a.portal-btn{ border:2px solid #fff; color:#fff; background:transparent; }
.nav-right a.portal-btn:hover,
.nav-right a.portal-btn:focus-visible{ background:rgba(255,255,255,.12); box-shadow:0 0 0 3px rgba(255,255,255,.22); }

.nav-right a.signup-btn{ border:2px solid var(--brand); background:#fff; color:var(--brand); }
.nav-right a.signup-btn:visited{ color:var(--brand); }
.nav-right a.signup-btn:hover,
.nav-right a.signup-btn:focus-visible{
  background:#fff; color:var(--brand-600); border-color:var(--brand-600);
  box-shadow:0 0 0 3px rgba(41,128,185,.25);
}
.nav-right a.signup-btn:active{ transform:translateY(1px); }

/* Dropdown (details/summary) */
.has-dropdown{ position:relative; }
.nav-dd{ position:relative; }
.nav-dd > summary{
  list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  padding:4px 0; color:#fff; font-weight:500;
}
.nav-dd > summary::-webkit-details-marker{ display:none; }
.nav-dd > summary::marker{ content:""; }

.nav-dd .caret{
  display:inline-block; width:0; height:0; margin-left:6px;
  border-left:4px solid transparent; border-right:4px solid transparent; border-top:6px solid currentColor;
  transform-origin:center; transition:transform .18s ease;
}
.nav-dd[open] .caret{ transform:rotate(180deg); }

/* Dropdown panel */
.submenu{
  position:absolute; top:calc(100% + 10px); left:0; min-width:220px;
  background:#fff; color:#222; border-radius:12px; padding:8px;
  box-shadow:0 10px 28px rgba(0,0,0,.18); border:1px solid rgba(0,0,0,.06);
  display:none;
}
@media (hover:hover) and (pointer:fine){ .has-dropdown:hover .submenu{ display:block; } }
.nav-dd[open] .submenu{ display:block; }
.submenu li{ list-style:none; }
.submenu a{
  display:block; padding:10px 12px; border-radius:8px; color:#1e293b; text-decoration:none; font-weight:600;
}
.submenu a:hover{ background:#eef6ff; color:#0b63c9; }

/* Social & language (desktop header) */
.social-footer{ display:flex; gap:.75rem; align-items:center; }
.social-footer a{ font-size:22px; color:#fff; transition:color .3s ease; }
.social-footer a:hover{ color:var(--gold); }

.language-switcher {
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-left: auto;
  white-space: nowrap;
  padding-right: max(16px, env(safe-area-inset-right));
}


.language-switcher .lang-btn{ color:#fff; text-decoration:none; font-weight:500; }
.language-switcher .lang-btn:hover{ color:var(--gold); }

/* ---------- Mobile drawer (hamburger) ---------- */
.nav-toggle{
  display:none; background:none; border:0; color:#fff; font-size:28px; padding:.25rem .5rem; line-height:1; cursor:pointer;
}
.mobile-drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(86vw,420px);
  background:#fff; color:#222; transform:translateX(100%); transition:transform .28s ease;
  z-index:1000; box-shadow:-2px 0 24px rgba(0,0,0,.2); display:flex; flex-direction:column;
}
.mobile-drawer.open{ transform:translateX(0); }
.drawer-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(1px); z-index:999;
}
.drawer-backdrop[hidden]{ display:none; }
.drawer-header{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px; border-bottom:1px solid #eee; }
.drawer-logo{ width:40px; height:auto; }
.nav-close{ background:none; border:0; font-size:28px; color:#333; padding:.25rem .5rem; cursor:pointer; }
.drawer-body{ padding:16px; display:flex; flex-direction:column; gap:14px; overflow:auto; }
.drawer-links{ list-style:none; padding:0; margin:8px 0; display:flex; flex-direction:column; gap:12px; }
.drawer-links a{ text-decoration:none; color:#222; font-weight:600; font-size:1.05rem; }
.drawer-links a:hover{ color:var(--brand); }
.mobile-drawer .nav-cta{ align-self:flex-start; }
.mobile-drawer .signup-btn{ background:var(--brand); color:#fff; border:2px solid var(--brand); }
.mobile-drawer .signup-btn:hover{ background:var(--brand-600); border-color:var(--brand-600); }
.mobile-drawer .portal-btn{ background:transparent; color:var(--brand); border:2px solid var(--brand); }
.mobile-drawer .portal-btn:hover{ background:#eef6ff; }
.drawer-sub{
  margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-top:1px solid #eee; padding-top:12px;
}
/* Drawer language switcher colors */
.mobile-drawer .language-switcher{ color:var(--brand); }
.mobile-drawer .language-switcher .lang-btn{ color:var(--brand); }
.mobile-drawer .language-switcher .lang-btn:hover{ color:#0b63c9; }
.mobile-drawer .language-switcher .lang-btn[aria-current="page"]{ color:#0b63c9; border-bottom:2px solid #0b63c9; }
/* Lock page scroll when open */
body.no-scroll{ overflow:hidden; }

/* ---------- Generic sections & footer ---------- */
section{ padding:2rem 1rem; max-width:800px; margin:0 auto; }
footer{ text-align:center; padding:1rem; background:rgba(240,240,240,.85); }

/* ---------- Mobile ≤600px: nav layout ---------- */
@media (max-width: 600px){
  html, body{ overflow-x:hidden; }

  body > header > nav{
    display:flex; flex-direction:column; align-items:stretch;
    padding:10px 14px; gap:8px;
  }
  .nav-left{
    order:0; display:grid; place-items:center; min-height:120px; padding:0; width:100%;
  }
  .header-logo{ width:100px; height:auto; display:block; }
  .nav-left h1{ display:none; }

  .nav-toggle{ display:inline-flex; margin-left:auto; }
  .nav-right{ display:none !important; }
}

/* ===== Mobile drawer fixes for “Courses” dropdown ===== */
.mobile-drawer .nav-dd > summary {
  color: #222;                  /* dark text on white background */
  font-weight: 600;
  font-size: 1.05rem;            /* match other drawer links */
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.mobile-drawer .nav-dd > summary::-webkit-details-marker { display: none; }

.mobile-drawer .nav-dd > summary .caret { transition: transform .2s; }
.mobile-drawer .nav-dd[open] > summary .caret { transform: rotate(180deg); }

.mobile-drawer .submenu {
  position: static;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0 0 0 18px;           /* indent under “Courses” */
  margin-top: 4px;
}

.mobile-drawer .submenu a {
  color: #222;
  font-weight: 500;
  font-size: 1.05rem;            /* match other drawer links */
  padding: 6px 0 6px 6px;        /* extra left padding for nesting */
  display: block;
}

html, body { overflow-x: clip; }