/* The main menu (B2 First ▾, C1 Advanced ▾, Daily challenge, Plans) on every page, the same as on the home page
   (the home page has these styles inline). Above 800px it sits in the header; below, the ☰ button opens it as a
   panel with its own scroll. The link back to the section ("← Use of English") goes on its own line under the header. */
.top{position:relative;gap:16px}
.top .brand{flex:none}
#main-nav{display:flex;align-items:center;gap:24px;margin:0 auto 0 26px;color:var(--muted);font-weight:700;font-size:15px}
#main-nav a{color:inherit;text-decoration:none}
.nav-item{position:relative}
.nav-btn{background:none;border:0;padding:8px 2px;color:inherit;font:inherit;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap}
.nav-btn:hover,.nav-item.open .nav-btn,.nav-item.here .nav-btn{color:var(--brand)}
.nav-caret{font-style:normal;font-size:11px;transition:transform .15s}
.nav-item.open .nav-caret{transform:rotate(180deg)}
.nav-menu{display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);z-index:30;min-width:190px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:6px;box-shadow:0 18px 40px #20274b1f}
.nav-item.open .nav-menu{display:block}
.nav-item:first-child .nav-menu{left:-10px;transform:none}   /* the first menu opens to the right, so it never leaves the screen */
.nav-menu a{display:block;padding:10px 12px;border-radius:11px;color:var(--ink)}
#main-nav .nav-menu a{color:var(--ink)}
.nav-menu a:hover,.nav-menu a:focus,.nav-menu a.here{background:#f3f0ff;color:var(--brand);outline:none}
#main-nav .nav-menu a.here{color:var(--brand)}
.nav-menu b{display:block;font-size:15px}
.nav-menu small{display:block;color:var(--muted);font-weight:600;font-size:12px;margin-top:2px}
.nav-menu .pgo{display:none}
.nav-mega{min-width:440px;grid-template-columns:1fr 1fr;gap:2px}
.nav-item.open .nav-mega{display:grid}
.nav-mega .nav-all{grid-column:1/-1;border-top:1px solid var(--line);border-radius:0 0 11px 11px;margin-top:4px}
#main-nav .nav-mega .nav-all{color:var(--brand)}
.nav-link{padding:8px 2px;font-weight:700;white-space:nowrap}
.nav-link:hover,#main-nav .nav-link.here{color:var(--brand)}
.menu-btn{display:none;flex:none;width:46px;height:46px;border:1px solid var(--line);border-radius:14px;background:#fff;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:0}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--ink);transition:transform .2s,opacity .2s}
.top.menu-open .menu-btn span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.menu-open .menu-btn span:nth-child(2){opacity:0}
.top.menu-open .menu-btn span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.crumb{margin:-12px 0 14px;font-size:15px}
.crumb .back{display:inline-flex;align-items:center;min-height:32px}
@media(hover:hover) and (pointer:fine){.crumb .back:hover{color:var(--brand)}}
.focus .crumb{display:none}
/* scroll lock while a menu is open on phones and tablets (see assets/nav.js) */
:root{--sab:env(safe-area-inset-bottom,0px)}
html.menu-lock{overflow:hidden}
@media(min-width:801px){.nav-menu{max-height:calc(100vh - 110px);max-height:calc(100dvh - 110px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}}
@media(max-width:800px){
#main-nav{display:none}
.menu-btn{display:flex}
.top.menu-open #main-nav{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0;position:absolute;top:72px;left:0;right:0;z-index:40;background:#fff;border:1px solid var(--line);border-radius:20px;padding:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 24px 50px #20274b26;font-size:16px;max-height:calc(100vh - 96px);max-height:calc(100dvh - 96px - env(safe-area-inset-bottom,0px));overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.top.menu-open #main-nav>*{flex-shrink:0}
/* B1, B2, C1 and Games fold: tap one to see its sections (one open at a time) */
.top.menu-open .nav-item+.nav-item,.top.menu-open .nav-link+.nav-item{border-top:1px solid var(--line)}
.top.menu-open .nav-btn{width:100%;min-height:48px;justify-content:space-between;padding:10px 8px;color:var(--ink);font-weight:800;-webkit-tap-highlight-color:transparent}
.top.menu-open .nav-item.open .nav-btn{color:var(--brand)}
.top.menu-open .nav-caret{display:inline-block;font-size:13px}
.top.menu-open .nav-menu{display:none}
.top.menu-open .nav-item.open .nav-menu{display:grid;grid-template-columns:1fr 1fr;gap:6px;position:static;transform:none;min-width:0;max-height:none;overflow:visible;border:0;box-shadow:none;padding:0 4px 8px}
.top.menu-open .nav-menu a{background:#f6f4ff;border:1px solid #ebe7fd}
.top.menu-open .nav-menu a.here{border-color:var(--brand)}
.top.menu-open #main-nav .nav-link:not(.here){color:var(--ink)}
.top.menu-open .nav-link{display:flex;align-items:center;min-height:48px;padding:10px 8px;font-weight:800;color:var(--ink);border-top:1px solid var(--line)}
}
@media(max-width:400px){.menu-btn{width:42px;height:42px}}
/* Medium screens (801–1100px): with B1 Preliminary in the menu, keep everything on one line */
@media(min-width:801px) and (max-width:1100px){#main-nav{gap:14px;margin-left:16px;font-size:14px}}
/* 801–900px (an iPad held upright): logged in, "My account" is longer than "Log in", so the menu tightens and drops its little arrows */
@media(min-width:801px) and (max-width:900px){.top .logo{height:42px;width:auto}#main-nav{gap:8px;margin-left:8px;font-size:13px}.nav-caret{display:none}.acct-link{padding:7px 10px;font-size:13px}.top-links{gap:8px}}
/* Games: on narrow desktops there is no room for it (the games are still in each level menu) */
@media(min-width:801px) and (max-width:1000px){#main-nav .nav-games{display:none}}