.esl-topbar { --esl-accent:#F77205; --esl-accent2:#F78B33; --esl-accent-soft:#F8BA7D; --esl-cream:#FFF8EE; --esl-deep:#1A1A1A; --esl-card:#FFFFFF; --esl-muted:rgba(26,26,26,.62); --esl-display:'Bricolage Grotesque',sans-serif; --esl-sans:'Plus Jakarta Sans',sans-serif; --esl-mono:'JetBrains Mono',monospace;
    position: sticky; top: 0; z-index: 1000; background: var(--esl-cream); border-bottom: 2px solid var(--esl-deep);
    font-family: var(--esl-sans); color: var(--esl-deep); font-size: 15px; line-height: 1.5;
  }
  .esl-topbar *, .esl-topbar *::before, .esl-topbar *::after { box-sizing: border-box; }
  .esl-topbar a { color: inherit; text-decoration: none; }
  .esl-topbar__inner { max-width: 1320px; margin: 0 auto; height: 72px; display: flex; align-items: center; gap: 24px; padding: 0 32px; position: relative; }
  .esl-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
  .esl-logo__glyph { position: relative; width: 42px; height: 42px; border-radius: 12px; background: var(--esl-accent); border: 2px solid var(--esl-deep); box-shadow: 3px 3px 0 var(--esl-deep); }
  .esl-logo__eye { position: absolute; top: 11px; width: 5px; height: 8px; border-radius: 3px; background: var(--esl-cream); }
  .esl-logo__eye--l { left: 9px; }
  .esl-logo__eye--r { right: 9px; }
  .esl-logo__smile { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); width: 18px; height: 8px; border-bottom: 2.5px solid var(--esl-cream); border-radius: 0 0 9px 9px; }
  .esl-logo__word { font-family: var(--esl-display); font-weight: 800; font-size: 28px; letter-spacing: -1px; line-height: 1; }
  .esl-logo__word span { color: var(--esl-accent); }
  .esl-nav { display: flex; align-items: center; gap: 6px; margin-left: 12px; }
  .esl-nav__item { padding: 8px 14px; border-radius: 12px; background: transparent; border: 2px solid transparent; font-weight: 700; font-size: 14.5px; cursor: default; display: flex; align-items: center; gap: 5px; transition: transform .12s ease, background .12s ease, border-color .12s ease; user-select: none; outline: none; }
  .esl-nav__item:hover, .esl-nav__item.is-open, .esl-nav__item:focus { background: var(--esl-accent-soft); border-color: var(--esl-deep); transform: translate(-1px,-1px); }
  .esl-nav__chev { width: 11px; height: 11px; stroke: currentColor; stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .esl-grow { flex: 1; }
  .esl-streak { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; background: var(--esl-accent-soft); border: 2px solid var(--esl-deep); font-weight: 700; font-size: 13px; }
  .esl-signin { font-size: 14px; font-weight: 700; cursor: pointer; }
  .esl-cta { background: var(--esl-accent); color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--esl-deep); box-shadow: 4px 4px 0 var(--esl-deep); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .esl-mega-wrap { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; pointer-events: none; padding: 0 32px; }
  .esl-mega { width: 100%; max-width: 1100px; background: var(--esl-card); border: 2px solid var(--esl-deep); border-radius: 20px; box-shadow: 6px 6px 0 var(--esl-deep); padding: 28px 32px; display: none; grid-template-columns: 320px 1fr 1fr 1fr; gap: 32px; pointer-events: auto; }
  /* Test Prep variant: intro + 2 wider content columns. Each content
     column wraps two stacked sub-sections (IELTS+TOEFL / Duolingo+CELPIP). */
  .esl-mega--2col { grid-template-columns: 320px 1fr 1fr; max-width: 900px; }
  /* Stack two col-head+list+soon-tag groups vertically inside one column. */
  .esl-mega__col-stack { display: flex; flex-direction: column; gap: 22px; }
  .esl-mega.is-open { display: grid; }
  .esl-mega__intro { background: var(--esl-accent-soft); border-radius: 14px; padding: 20px 22px; border: 2px solid var(--esl-deep); display: flex; flex-direction: column; }
  .esl-mega__section { font-family: var(--esl-mono); font-size: 11px; color: var(--esl-accent); letter-spacing: 1.4px; margin-bottom: 10px; font-weight: 700; }
  .esl-mega__title { font-family: var(--esl-display); font-weight: 700; font-size: 26px; line-height: 1.05; letter-spacing: -0.6px; margin-bottom: 10px; }
  .esl-mega__blurb { font-size: 13.5px; line-height: 1.5; margin: 0 0 20px; }
  .esl-mega__cta { margin-top: auto; align-self: flex-start; background: var(--esl-accent); color: #fff; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; border: 2px solid var(--esl-deep); box-shadow: 4px 4px 0 var(--esl-deep); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
  .esl-mega__col-head { font-family: var(--esl-mono); font-size: 11px; color: var(--esl-accent); letter-spacing: 1.4px; margin-bottom: 14px; font-weight: 700; display: block; text-decoration: none; }
  /* When the col-head is an <a> (linking to a test landing page),
     give it a subtle hover so it reads as clickable. */
  a.esl-mega__col-head:hover { text-decoration: underline; text-underline-offset: 3px; }
  .esl-mega__list { display: flex; flex-direction: column; gap: 6px; }
  .esl-mega__link { font-size: 14px; font-weight: 600; padding: 7px 10px; border-radius: 8px; display: flex; align-items: center; gap: 8px; cursor: pointer; transition: background .12s ease; color: var(--esl-deep); }
  .esl-mega__link:hover { background: var(--esl-cream); }
  .esl-mega__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--esl-accent); flex-shrink: 0; }

  /* Grayed-out subcategory links — non-clickable, awaiting content. */
  .esl-mega__link--soon {
      cursor: default;
      opacity: .42;
      color: var(--esl-deep);
      pointer-events: none;
  }
  .esl-mega__link--soon:hover { background: transparent; }

  /* "Coming soon" footer per dropdown column. */
  .esl-mega__soon-tag {
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px dashed rgba(26,26,26,.18);
      font-family: var(--esl-mono);
      font-size: 10.5px;
      letter-spacing: .12em;
      color: var(--esl-accent);
      text-transform: uppercase;
      font-weight: 700;
      text-align: center;
  }

/* ════════════════════════════════════════════════════════════
   Suppress the theme's old header stack so the plugin's
   .esl-topbar is the only banner on the page.
   Targets three specific theme elements by their stable IDs/
   aria-label — won't affect anything else.
   ════════════════════════════════════════════════════════════ */
#tv-topbar,
#tv-site-header,
nav[aria-label="Primary Menu"] {
    display: none !important;
}


/* ════════════════════════════════════════════════════════════
   MOBILE — hamburger button + slide-in drawer
   Below 900px the desktop nav / Sign in / CTA collapse and the
   hamburger button takes over. The drawer is built up by
   topbar.js from the existing mega-menu markup so the menu
   content stays single-source.
   ════════════════════════════════════════════════════════════ */

/* Hamburger button — invisible on desktop, replaces the nav on mobile. */
.esl-hamburger {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--esl-card);
    border: 2.5px solid var(--esl-deep);
    box-shadow: 3px 3px 0 var(--esl-deep);
    padding: 0;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-shrink: 0;
    transition: transform .12s ease, box-shadow .12s ease;
}
.esl-hamburger:hover { transform: translate(-1.5px,-1.5px); box-shadow: 4.5px 4.5px 0 var(--esl-deep); }
.esl-hamburger__bar {
    display: block;
    width: 20px;
    height: 2.5px;
    background: var(--esl-deep);
    border-radius: 2px;
}

/* Backdrop — sits behind the drawer on mobile when open. */
.esl-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26,26,26,0.42);
    z-index: 998;
    opacity: 0;
    transition: opacity .2s ease;
}
.esl-drawer-backdrop.is-open { opacity: 1; }

/* The drawer itself — slides in from the LEFT (matches the hamburger
   position, so on phones the drawer opens right where you tapped). */
.esl-drawer {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(360px, 92vw);
    background: var(--esl-cream);
    border-right: 2.5px solid var(--esl-deep);
    box-shadow: 8px 0 0 var(--esl-deep);
    z-index: 999;
    transform: translateX(-100%);
    transition: transform .25s cubic-bezier(.2,.7,.2,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.esl-drawer.is-open { transform: translateX(0); }
.esl-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 2px solid var(--esl-deep);
    background: var(--esl-cream);
    flex-shrink: 0;
}
.esl-drawer__title {
    font-family: var(--esl-display);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.6px;
}
.esl-drawer__close {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--esl-card);
    border: 2px solid var(--esl-deep);
    box-shadow: 2.5px 2.5px 0 var(--esl-deep);
    color: var(--esl-deep);
    cursor: pointer;
    display: grid;
    place-items: center;
}

/* Nav scroll region. */
.esl-drawer__nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 8px 16px 16px;
    -webkit-overflow-scrolling: touch;
}

/* Each top-level category becomes a chunky accordion section. */
.esl-drawer__section { margin-top: 10px; }
.esl-drawer__section-head {
    width: 100%;
    background: var(--esl-card);
    border: 2px solid var(--esl-deep);
    border-radius: 12px;
    box-shadow: 3px 3px 0 var(--esl-deep);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: var(--esl-display);
    font-weight: 800;
    font-size: 17px;
    letter-spacing: -0.3px;
    color: var(--esl-deep);
    cursor: pointer;
    text-align: left;
}
.esl-drawer__section-head .esl-drawer__chev {
    transition: transform .2s ease;
}
.esl-drawer__section[aria-expanded="true"] > .esl-drawer__section-head .esl-drawer__chev {
    transform: rotate(180deg);
}
.esl-drawer__section-body {
    display: none;
    padding: 14px 6px 4px;
}
.esl-drawer__section[aria-expanded="true"] > .esl-drawer__section-body { display: block; }
.esl-drawer__primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--esl-accent);
    color: var(--esl-cream);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 13.5px;
    border: 2px solid var(--esl-deep);
    box-shadow: 3px 3px 0 var(--esl-deep);
    text-decoration: none;
    margin-bottom: 14px;
}
.esl-drawer__col { margin-top: 12px; }
.esl-drawer__col:first-child { margin-top: 0; }
.esl-drawer__col-head {
    font-family: var(--esl-mono);
    font-size: 10.5px;
    color: var(--esl-accent);
    letter-spacing: 1.3px;
    font-weight: 800;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.esl-drawer__link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 8px;
    color: var(--esl-deep);
    text-decoration: none;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 8px;
}
.esl-drawer__link:active { background: var(--esl-cream-warm); }
.esl-drawer__link--soon { opacity: 0.42; }
.esl-drawer__dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--esl-accent);
    flex-shrink: 0;
}

/* Drawer footer — Sign in + Start for free, mirrored from the topbar
   right-side actions. topbar.php rewrites these when logged in. */
.esl-drawer__foot {
    flex-shrink: 0;
    padding: 16px 20px;
    border-top: 2px solid var(--esl-deep);
    display: flex;
    gap: 10px;
    align-items: center;
    background: var(--esl-cream);
}
.esl-drawer__signin {
    flex: 0 0 auto;
    color: var(--esl-deep);
    font-weight: 800;
    font-size: 14.5px;
    text-decoration: none;
    padding: 9px 14px;
    border-radius: 999px;
    border: 2px solid var(--esl-deep);
    background: var(--esl-card);
    box-shadow: 2.5px 2.5px 0 var(--esl-deep);
}
.esl-drawer__cta {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
    background: var(--esl-accent);
    color: var(--esl-cream);
    padding: 11px 16px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 14.5px;
    border: 2.5px solid var(--esl-deep);
    box-shadow: 3px 3px 0 var(--esl-deep);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

/* ════════════════════════════════════════════════════════════
   Breakpoint: ≤900px → desktop nav hides, hamburger shows.
   Inverse rule for the rest of the topbar (logo + actions) is
   handled by their existing rules — they stay flex-aligned at
   any width. We only hide the nav row and the right-side
   streak/sign-in/CTA since those don't fit on a phone.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .esl-topbar__inner { padding: 0 16px; gap: 10px; }
    .esl-nav { display: none; }
    .esl-streak { display: none; }
    .esl-actions, .esl-signin, .esl-cta { display: none; }
    .esl-hamburger { display: inline-flex; }

    /* Desktop mega menus are never rendered on mobile — the drawer
       replaces them. */
    .esl-mega-wrap { display: none !important; }

    /* Logo shrinks slightly on phones so the wordmark fits next to
       the hamburger. */
    .esl-logo__word { font-size: 22px; }
    .esl-logo__glyph { width: 36px; height: 36px; }
}

/* Allow body scroll to lock when the drawer is open (set by JS). */
body.esl-drawer-open { overflow: hidden; }

/* Touch devices (no hover, coarse pointer) — used for tablets where
   the desktop layout is still showing. Convert the mega-menu to tap-
   to-toggle without breaking desktop click-to-navigate. */
@media (hover: none) and (pointer: coarse) {
    /* Only relevant above the mobile breakpoint where the desktop
       mega menus are still on screen. Below 900px the drawer is
       used instead and this block is harmless. */
    .esl-nav__item.is-open + .esl-mega-wrap .esl-mega.is-open,
    .esl-mega.is-open { display: grid; }
}


/* ════════════════════════════════════════════════════════════
   MERGED AUTH BUTTON — replaces the separate Sign in + Start for
   free links for logged-out visitors. Hover or focus reveals a
   chunky dropdown with an inline log-in form posting to
   wp-login.php; click on the button itself navigates to the
   register page. Logged-in users still see Dashboard + Log out.
   ════════════════════════════════════════════════════════════ */
.esl-auth {
    position: relative;
    flex-shrink: 0;
}
.esl-auth__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--esl-accent);
    color: #fff;
    padding: 11px 18px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 14px;
    border: 2px solid var(--esl-deep);
    box-shadow: 4px 4px 0 var(--esl-deep);
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease;
}
.esl-auth__btn:hover,
.esl-auth.is-open .esl-auth__btn {
    transform: translate(-1.5px, -1.5px);
    box-shadow: 6px 6px 0 var(--esl-deep);
    color: #fff;
}
.esl-auth__chev { transition: transform .15s ease; }
.esl-auth.is-open .esl-auth__chev { transform: rotate(180deg); }

/* Hover-revealed dropdown (also opens on keyboard focus inside). */
.esl-auth__menu {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 320px;
    background: var(--esl-card);
    border: 2.5px solid var(--esl-deep);
    border-radius: 18px;
    box-shadow: 6px 6px 0 var(--esl-deep);
    padding: 18px 20px 16px;
    z-index: 1100;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .12s ease, transform .15s ease;
}
/* Invisible hover bridge filling the 12px gap between button and
   menu. Without it the cursor crosses empty space en route to the
   menu and :hover briefly drops to false, closing the menu before
   the cursor arrives. The ::before is part of .esl-auth__menu, so
   hovering it keeps .esl-auth:hover true via the descendant rule. */
.esl-auth__menu::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
    background: transparent;
}
.esl-auth:hover .esl-auth__menu,
.esl-auth:focus-within .esl-auth__menu,
.esl-auth.is-open .esl-auth__menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.esl-auth__head {
    font-family: var(--esl-mono);
    font-size: 11px;
    color: var(--esl-accent);
    letter-spacing: 1.3px;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.esl-auth__form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.esl-auth__field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.esl-auth__label {
    font-size: 12px;
    font-weight: 700;
    color: var(--esl-muted);
}
.esl-auth__field input[type="text"],
.esl-auth__field input[type="password"] {
    width: 100%;
    padding: 9px 12px;
    border: 2px solid var(--esl-deep);
    border-radius: 10px;
    background: var(--esl-cream);
    color: var(--esl-deep);
    font-family: inherit;
    font-size: 14px;
    box-shadow: 2px 2px 0 var(--esl-deep);
    box-sizing: border-box;
    transition: border-color .12s ease, box-shadow .12s ease;
}
.esl-auth__field input:focus {
    outline: none;
    border-color: var(--esl-accent);
    box-shadow: 2.5px 2.5px 0 var(--esl-accent);
}
.esl-auth__remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--esl-deep);
    cursor: pointer;
    user-select: none;
    margin-top: 2px;
}
.esl-auth__remember input[type="checkbox"] {
    width: 18px; height: 18px;
    border: 2px solid var(--esl-deep);
    accent-color: var(--esl-accent);
    cursor: pointer;
}
.esl-auth__submit {
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--esl-accent);
    color: #fff;
    padding: 10px 16px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 800;
    font-size: 14px;
    border: 2.5px solid var(--esl-deep);
    box-shadow: 3px 3px 0 var(--esl-deep);
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease;
}
.esl-auth__submit:hover {
    transform: translate(-1.5px,-1.5px);
    box-shadow: 5px 5px 0 var(--esl-deep);
}

/* Divider with the word "or" in the middle. */
.esl-auth__sep {
    display: flex;
    align-items: center;
    margin: 14px 0 12px;
    color: var(--esl-muted);
    font-size: 11.5px;
    font-family: var(--esl-mono);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.esl-auth__sep::before,
.esl-auth__sep::after {
    content: "";
    flex: 1;
    border-top: 1.5px dashed rgba(26,26,26,0.18);
}
.esl-auth__sep span { padding: 0 10px; }

.esl-auth__signup {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--esl-card);
    color: var(--esl-deep);
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13.5px;
    border: 2px solid var(--esl-deep);
    box-shadow: 2.5px 2.5px 0 var(--esl-deep);
    text-decoration: none;
    width: 100%;
    box-sizing: border-box;
    transition: transform .12s ease, box-shadow .12s ease;
}
.esl-auth__signup:hover {
    transform: translate(-1.5px,-1.5px);
    box-shadow: 4px 4px 0 var(--esl-deep);
    background: var(--esl-cream-warm, #FFEAD3);
    color: var(--esl-deep);
}

/* Mobile: the desktop auth widget hides at ≤900px (the existing
   .esl-actions/.esl-signin/.esl-cta hide-rules don't catch it
   because it's a new container — add it here). */
@media (max-width: 900px) {
    .esl-auth { display: none; }
}