/* ==========================================================================
   English Access — shared site stylesheet
   Loaded by every page in the practice suite (hub + all product apps) so
   the whole site shares one set of brand tokens and one navigation /
   footer component. Edit here once; it updates everywhere.
   ========================================================================== */

:root{
  --plum-950:#1E1030;
  --purple-800:#2E1A47;
  --purple-700:#4A2C6F;
  --purple-100:#EFEBF6;
  --gold-600:#8A6D12;
  --gold-300:#FBF4DA;
  --lavender-400:#B4A8C6;
  --gray-500:#6E7C7D;
  --gray-200:#E3E6E6;
  --gold-xp:#F3D03E;
  --paper:#F8F7FA;
  --paper-raised:#FFFFFF;
  --ink:#2E1A47;
  --ink-soft:#4A4750;
  --radius-sm:6px;
  --radius-md:12px;
  --radius-lg:20px;
  --shadow-1:0 1px 2px rgba(46,26,71,.06),0 2px 8px rgba(46,26,71,.06);
  --shadow-2:0 10px 30px rgba(46,26,71,.14);
  --serif:'Poppins','Frutiger','Segoe UI',Helvetica,Arial,sans-serif;
  --sans:'Frutiger','Inter','Segoe UI',Helvetica,Arial,sans-serif;

  /* Shared top navigation bar height — used by product apps below to
     offset their own sticky/fixed elements so nothing overlaps. */
  --ea-nav-height:64px;
}

/* ---------- shared top navigation ---------- */

.ea-topnav{
  position:sticky;
  top:0;
  z-index:40;
  height:var(--ea-nav-height);
  display:flex;
  align-items:center;
  background:var(--purple-800);
  border-bottom:1px solid rgba(255,255,255,.08);
  box-shadow:0 2px 10px rgba(30,16,48,.18);
}
.ea-topnav__inner{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  gap:20px;
}
.ea-topnav__brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}
.ea-topnav__logo{
  height:44px;
  width:auto;
  display:block;
}
.ea-topnav__links{
  display:flex;
  align-items:center;
  gap:4px;
  flex:1;
  overflow-x:auto;
  scrollbar-width:none;
}
.ea-topnav__links::-webkit-scrollbar{display:none;}
.ea-topnav__links a{
  font-family:var(--serif);
  font-weight:600;
  font-size:.86rem;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  white-space:nowrap;
  padding:8px 12px;
  border-radius:var(--radius-sm);
  transition:background .15s ease, color .15s ease;
}
.ea-topnav__links a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.ea-topnav__links a.is-current{
  color:var(--plum-950);
  background:var(--gold-xp);
}
.ea-topnav__external{
  flex-shrink:0;
  font-family:var(--serif);
  font-weight:600;
  font-size:.78rem;
  color:rgba(255,255,255,.6);
  text-decoration:none;
  white-space:nowrap;
  padding:8px 10px;
  border-radius:var(--radius-sm);
  transition:background .15s ease, color .15s ease;
}
.ea-topnav__external:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}

@media (max-width:760px){
  .ea-topnav__inner{gap:12px;padding:0 12px;}
  .ea-topnav__logo{height:36px;}
  .ea-topnav__links a{font-size:.8rem;padding:7px 9px;}
  .ea-topnav__external{display:none;}
}

/* Seven suite links: keep them all visible on tablet widths. The external
   englishaccess.net link also lives in the footer, so it yields space first. */
@media (max-width:1000px){ .ea-topnav__external{display:none;} }
@media (max-width:900px){
  .ea-topnav__inner{gap:12px;}
  .ea-topnav__links a{padding:7px 8px;font-size:.8rem;}
}

/* ---------- shared footer ---------- */

.ea-sitefooter{
  background:var(--purple-800);
  color:rgba(255,255,255,.72);
  margin-top:56px;
}
.ea-sitefooter__inner{
  max-width:1180px;
  margin:0 auto;
  padding:40px 20px 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.ea-sitefooter__logo{
  height:38px;
  width:auto;
  opacity:.95;
}
.ea-sitefooter__links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px 4px;
}
.ea-sitefooter__links a{
  font-family:var(--serif);
  font-weight:600;
  font-size:.84rem;
  color:rgba(255,255,255,.78);
  text-decoration:none;
  padding:6px 10px;
  border-radius:var(--radius-sm);
  transition:background .15s ease, color .15s ease;
}
.ea-sitefooter__links a:hover{
  color:#fff;
  background:rgba(255,255,255,.08);
}
.ea-sitefooter__links a.is-current{
  color:var(--plum-950);
  background:var(--gold-xp);
}
.ea-sitefooter p{
  margin:0;
  font-size:.8rem;
  color:rgba(255,255,255,.55);
}
.ea-sitefooter a.ea-sitefooter__brandlink{
  color:rgba(255,255,255,.8);
  font-weight:600;
  text-decoration:none;
}
.ea-sitefooter a.ea-sitefooter__brandlink:hover{
  color:#fff;
}

@media (max-width:760px){
  .ea-sitefooter__inner{padding:32px 16px 26px;}
}