body {
  font-size: 16px;
  line-height: 1.65;
}

h1 {
  font-size: clamp(38px, 4.15vw, 58px);
  line-height: 1.08;
}

h2 {
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1.16;
}

h3 {
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.25;
}

p {
  line-height: 1.68;
}

.section-padding {
  padding: 88px 0;
}

.theme-btn {
  padding: 14px 18px 14px 24px;
  font-size: 15px;
}

.theme-btn i {
  width: 38px;
  height: 38px;
  line-height: 38px;
}

.header-top-section {
  padding: 7px 0 !important;
}

.header-top-section .header-top-wrapper ul {
  gap: 14px;
}

.header-top-section .header-top-wrapper ul li {
  font-size: 13.5px;
  line-height: 1.25;
}

.header-top-section .header-top-wrapper ul li:not(:last-child) {
  padding-right: 14px;
}

.header-top-section .header-top-wrapper ul li i {
  margin-right: 7px;
  font-size: 12px;
}

.header-top-section .header-top-wrapper .social-icon {
  gap: 7px;
}

.header-top-section .header-top-wrapper .social-icon a {
  width: 26px;
  height: 26px;
  line-height: 24px;
  font-size: 12px;
}

.header-top-section .header-top-right select {
  min-width: 112px !important;
  padding: 2px 10px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
}

.header-main {
  padding: 9px 0;
}

.header-1 .logo-shape {
  overflow: hidden;
  pointer-events: none;
}

.header-1 .logo-shape img {
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
}

.header-1.sticky .logo-shape {
  /* Keep the sticky header identical to the plain top-of-page look —
     no dark decorative shape appearing behind the logo once scrolled. */
  display: none;
}

.header-main .main-menu ul li {
  margin-inline-end: 34px;
}

.header-main .main-menu ul li a {
  padding: 15px 0;
  font-size: 14px;
}

.header-main .main-menu ul li a i {
  font-size: 12px;
}

.header-main .header-right {
  gap: 18px;
}

.header-1 .header-right .search-toggler {
  width: 46px;
  height: 46px;
  line-height: 44px;
  font-size: 15px;
}

.header-1 .header-right .theme-btn {
  min-height: 0;
  padding: 9px 20px;
  gap: 0;
  font-size: 14px;
  line-height: 1.1;
  border-radius: 3px;
}

.header-1 .header-right .theme-btn i {
  display: none;
}

.breadcrumb-wrapper .page-heading {
  padding: 86px 0;
}

.breadcrumb-wrapper .page-heading h1 {
  font-size: clamp(36px, 4vw, 58px);
}

@media (max-width: 1199px) {
  .section-padding {
    padding: 76px 0;
  }
}

@media (max-width: 767px) {
  body {
    font-size: 15px;
  }

  /* The theme keeps a 50px gap between the search icon and the login/hamburger
     group all the way down to phone widths, which pushes the header row ~27px
     wider than its container — the hamburger ends up half off the screen. */
  .header-1 .header-right-items,
  .header-2 .header-right-items {
    gap: 14px;
  }

  /* The signed-in CTA ("Admin Dashboard" / "Login") is the widest thing in
     the header, and on a phone it alone pushed the hamburger clean off the
     screen. The off-canvas menu carries the same button, so dropping it here
     costs nothing. */
  .header-1 .header-right .theme-btn,
  .header-2 .header-right .theme-btn {
    display: none !important;
  }

  .section-padding {
    padding: 60px 0;
  }

  .theme-btn {
    padding: 12px 16px 12px 20px;
  }
}

/* ---------- one page width, for the whole site ---------- */

/*
 * Every page reads to the same margins, and the figure is written once.
 *
 * There were four page widths in this project, none of them aware of the
 * others: Bootstrap's container topped out at 1420px, the theme widened its
 * hero to 1720px, the home page was rebuilt on a .defence-container of 1350px,
 * and the hero band on a .site-hero-container of 1320px. Every one of them was
 * somebody's reasonable decision at the time, and together they meant the
 * content edge moved as you walked around the site.
 *
 * --site-width is now the only figure. Change it here and the home page, the
 * blog, the dashboards and the hero all move together. The home page's own
 * blocks read it too, with their old numbers left as the fallback so nothing
 * collapses if this file ever fails to load.
 */
:root {
    --site-width: 1250px;
}

/* Applied above 1400px only, where Bootstrap would otherwise jump to 1420.
   Below that its own steps are all narrower than this and are left alone, so
   nothing on a laptop or a tablet changes.

   This file is loaded after bootstrap.min.css and main.css, so equal
   specificity wins on order and nothing here needs !important. */
@media (min-width: 1400px) {
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    /* The theme's hero override, brought back into line — a 1720px hero over a
       1250px page is the misalignment this rule exists to end. */
    .mhq-hero-2 .container {
        max-width: var(--site-width);
    }
}

/* ------------------------------------------------------------------
   A question's drawings, wherever a question is shown

   The crop is stored at about 900px so it stays sharp when a student
   zooms in on a phone; at its own size on the page it is enormous. The
   cap lives here, once, rather than on each screen that happens to show
   a question — the exam, the solutions, the result review, a printed
   preview. Sized on each separately, one gets missed.

   The exam screen sets its own, larger, cap over this one: there the
   drawing IS the question and it is the only thing on the screen.

   Only caps, never a width or a height, so nothing is stretched — a wide
   four-panel strip and a small square option come down to one height and
   each keeps its own shape.
   ------------------------------------------------------------------ */
.q-figure { margin: 8px 0; }

.q-figure img {
    max-height: 96px;
    max-width: 100%;
    width: auto;
    height: auto;
}