/* Shared public-site fixes. Edit this file for header and responsive test layout.
 * No page-wide overflow hiding: grids/controls shrink to the available space.
 */
:root { --header-height: 64px; }
.header-inner { min-width: 0; }
.header-tools { flex-shrink: 0; }
.icon-button { padding: 0; line-height: 1; flex: 0 0 39px; }
[data-theme-toggle] svg { display: block; margin: 0; }
.main-nav { min-width: 0; }
.main-nav > a, .main-nav summary { white-space: nowrap; }
.main-nav > .nav-drop:last-child .drop-menu { left: auto; right: 0; }
.breadcrumbs, .footer-bottom, .hero-note { flex-wrap: wrap; }
.container, main, .panel, .practice-card, .course-content,
.two-col > *, .home-hero > *, .feature-grid > *, .stats > *,
.page-heading > *, .section-head > *, .lesson-card > *,
.test-language-grid > *, .game-cards > *, .exam-grid > * { min-width: 0; }
h1, h2, h3, .lesson-card, .footer-links, .notice { overflow-wrap: anywhere; }
select, input, textarea { max-width: 100%; }
img, video { max-width: 100%; }
.library-tools input { min-width: 0; }
.lesson-ad { max-width: 100%; }
.ad-slot, .ad-slot img, .lesson-google-unit { max-width: 100%; }

/* The content column owns every test state; the right ad stays mounted. */
.test-page { max-width: 1440px; }
.test-page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 26px;
  align-items: start;
}
.test-content, .test-content > *, .test-layout > *, .test-heading > *,
.test-selectors > *, .test-options, .test-run, .exam-setup-grid > *,
.exam-title-row > *, .exam-run-top > * { min-width: 0; }
.test-ad { position: sticky; top: calc(var(--header-height) + 20px); }
.test-page-layout .test-layout,
.test-page-layout .exam-setup-grid { grid-template-columns: minmax(0, 1fr); }
.test-page-layout .test-side-card { display: none; }
.test-page-layout .exam-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.test-heading:has(.test-timer) {
  position: static;
  margin-top: 0;
  padding: 0;
  gap: 18px;
  align-items: center;
  background: var(--page);
}
.test-timer, .exam-timer { flex-shrink: 0; }
.test-timer { padding: 10px 16px; }
.test-timer b { line-height: 1.3; }
.test-reference p, .test-preview > p { scrollbar-gutter: stable; }
.test-preview-caption { flex-wrap: wrap; }
.test-result-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.test-review { min-width: 0; overflow-x: auto; }
.test-review td { overflow-wrap: anywhere; }

/* Government practice: reference above, typing field below on all devices. */
.exam-copy-grid { grid-template-columns: minmax(0, 1fr); }
.exam-source-panel { border-right: 0; border-bottom: 1px solid var(--line); }
.exam-reference { height: 210px; overflow-wrap: anywhere; scrollbar-gutter: stable; }
.exam-input-wrap { height: 190px; }
.exam-box-caption { flex-wrap: wrap; gap: 5px 15px; }
.exam-run-footer, .exam-sound-controls { flex-wrap: wrap; }
.exam-run-top h2 { overflow-wrap: anywhere; }
.exam-run-panel:fullscreen { padding: 0; }
.exam-run-panel:fullscreen .exam-copy-grid { flex: none; }
.exam-run-panel:fullscreen .exam-reference { height: clamp(140px, 25vh, 260px); }
.exam-run-panel:fullscreen .exam-input-wrap { height: clamp(140px, 26vh, 280px); }

/* Switch the whole navigation to its drawer before menu labels get cramped.
 * site.js uses the same 1100px breakpoint for backdrop, inert and Escape. */
@media (max-width: 1100px) {
  .mobile-toggle { display: grid; }
  .mobile-open { overflow: hidden; }
  .main-nav { display: none; }
  .main-nav.open {
    display: flex; position: fixed; inset: 0 auto 0 0;
    width: min(330px, 85vw); background: var(--panel);
    padding: 76px 22px 25px; flex-direction: column;
    align-items: stretch; gap: 8px; overflow-y: auto; z-index: 31;
    font-size: 14px;
  }
  .main-nav .nav-extra { display: block; }
  .main-nav.open > a, .main-nav.open summary { padding: 11px; white-space: normal; }
  .main-nav .drop-menu, .main-nav > .nav-drop:last-child .drop-menu {
    position: static; box-shadow: none; min-width: 0; max-width: 100%;
    margin: 3px 0 7px; background: var(--soft);
  }
  .menu-backdrop:not([hidden]) {
    display: block; position: fixed; inset: 0; background: #1d17285c;
    z-index: 30; border: 0; padding: 0;
  }
}
@media (max-width: 1023px) {
  .test-page-layout { grid-template-columns: minmax(0, 1fr); }
  .test-ad { position: static; margin: 22px auto 0; }
}
@media (max-width: 760px) {
  .panel, .test-options, .test-result { padding: 20px; }
  .test-run { padding: 0; }
  .test-heading, .exam-title-row { flex-wrap: wrap; gap: 14px; }
  .test-heading > a, .exam-title-row > a { white-space: normal; }
  .test-heading:has(.test-timer) { align-items: flex-start; }
  .test-heading:has(.test-timer) > div:first-child { flex: 1 1 160px; }
  .test-timer { padding: 9px 12px; }
  .test-timer b { font-size: 27px; }
  .test-selectors, .test-page-layout .exam-form-grid { grid-template-columns: minmax(0, 1fr); }
  .paragraph-select, .test-selectors label:last-child { grid-column: auto; }
  .test-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .exam-reference { height: 180px; }
  .exam-input-wrap { height: 180px; }
  .exam-run-top { align-items: flex-start; flex-wrap: wrap; }
  .exam-sound-controls { gap: 12px; justify-content: flex-start; }
  .exam-sound-controls select { max-width: 120px; }
  .exam-sound-controls input { width: 70px; }
  .exam-run-footer > .button-row { justify-content: flex-start; }
  .exam-search-row select { width: 100%; min-width: 0; }
  .hero-visual { padding: 24px 14px; }
  .mini-keyboard { padding-left: 8px; padding-right: 8px; }
  .mini-row kbd { min-width: 0; flex-shrink: 1; }
  .floating-note { max-width: 100%; }
  .language-tabs, .practice-tools label { min-width: 0; }
  .practice-tools select { min-width: 0; }
  .week { gap: 3px; }
  .week i { width: 28px; height: 28px; }
}
@media (max-width: 359px) {
  .brand { font-size: 18px; gap: 7px; }
  .header-tools { gap: 6px; }
  .lesson-ad, .ad-slot, .lesson-google-unit { width: 250px; }
  .test-heading:has(.test-timer) > div:first-child { flex-basis: 100%; }
}

/* Lesson badges have a fixed flex basis: the text column may shrink, never
   the digits. Explicit nowrap also overrides the card's wrapping rules. */
.lesson-card .lesson-number {
  display: grid; place-items: center;
  flex: 0 0 46px; width: 46px; min-width: 46px; max-width: 46px;
  height: 46px; min-height: 46px; aspect-ratio: 1;
  padding: 0; border-radius: 50%;
  font-size: 15px; font-weight: 750; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: 0;
  white-space: nowrap; overflow-wrap: normal; word-break: normal;
  background: var(--mint); color: var(--theme-ink);
}
.lesson-card > div { flex: 1; min-width: 0; }
.lesson-card.completed .lesson-number { background: var(--mint); color: var(--theme-ink); box-shadow: inset 0 0 0 2px var(--theme-bar); }
.seo-content { margin: 48px 0 12px; padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); }
.seo-content p, .seo-content li { color: var(--muted); max-width: 85ch; }
.seo-content h2 { font-size: clamp(23px,3vw,30px); }
.seo-content h3 { font-size: 20px; margin-top: 28px; }
.seo-content a:not(.primary):not(.secondary), .seo-guide a:not(.primary):not(.secondary) { color: var(--theme-ink); text-decoration: underline; text-underline-offset: 3px; }
.seo-link-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin: 24px 0; }
.seo-link-grid a { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); text-decoration: none!important; }
.seo-link-grid span { color: var(--muted); font-size: 13px; }
.seo-guide { max-width: 800px; margin: auto; }
.seo-guide h1 { max-width: 24ch; }
.seo-guide h2 { margin: 36px 0 16px; font-size: 26px; }
.seo-guide p, .seo-guide li { line-height: 1.85; color: var(--muted); }
.seo-guide .lead { font-size: 19px; }
.seo-guide[lang=hi], .seo-content [lang=hi] { font-family: Hindi,'Nirmala UI',sans-serif; line-height: 1.9; }
.seo-breadcrumbs { overflow-wrap: anywhere; }
@media(max-width:760px){
 .lesson-card .lesson-number { flex-basis: 42px; width:42px; min-width:42px; max-width:42px; height:42px; min-height:42px; font-size:14px; }
 .seo-content { margin-top:32px; padding:20px; }
 .seo-link-grid { grid-template-columns:minmax(0,1fr); }
}