/* How the mediakit's own pages fit together (was css/site-header-fit.css).
   The mediakit is standalone (Dr Kirstey, relayed by Jan, 5 Nov 2026): no website header, no website menu, nothing pinned above the page.
   From 16 Oct to 5 Nov 2026 every page opened with the main website's header; that is gone, and what this file did to make room for it
   went with it. What stays are the mediakit's own needs, which do not depend on any header. */

/* The pages set overflow-x: hidden on <html> and <body>, which turns <body> into a scroll container and stops anything inside it from sticking to the top of the screen
   (the Interview Question Bank strip, the Signature Conversations heading column). clip hides the same overflow without that. */
html, body { overflow-x: clip !important; }

/* Scrolling to a section is done by js/anchor-scroll.js (eased), so the browser's own smoothing is off: the two together would lag. */
html { scroll-behavior: auto !important; }

/* in-page links land with a little air above the section */
[id] { scroll-margin-top: 16px; }

/* The subpages' own header box takes no room and does not pin (css/editorial.css keeps only the hamburger and the Book button in it, both fixed). */
body > div > header, body > div > div > header { position: relative !important; top: auto !important; z-index: auto !important; }

/* Phones: the hamburger sits top right, transparent, and stays there as the page scrolls; it opens the menu as a full-screen panel. */
@media (max-width: 767px) {
  .mp-menu-btn { top: 10px !important; right: 12px !important; background: transparent !important; }
  body header > nav#mp-nav.is-open { inset: 0 !important; padding-top: 88px !important; }

  /* the landing hero's header keeps the row the hamburger and the Book button sit in */
  section#top { padding-top: 10px !important; }
  section#top > header { padding-top: 0 !important; min-height: 66px; }

  /* A subpage's own header box keeps the same row (10px, the 56px buttons, 10px), so neither button sits on the page's first block or on
     the Interview Question Bank's topic strip; it scrolls away with the page. Until 5 Nov 2026 the website header held this space. */
  body > div > header, body > div > div > header { height: 76px !important; }
}

/* Tablets and small laptops: the cards that open the subpages start 30 to 60px down, under the fixed buttons (18px, 56px tall), so the header box
   keeps a row for them there too (18px, 56px, 18px). From 1280px the cards start below the buttons and the page runs to the top as designed. */
@media (min-width: 768px) and (max-width: 1279px) {
  body > div > header, body > div > div > header { height: 92px !important; }
}

/* Interview Question Bank: its (empty) header and topic strip share a wrapper; the wrapper steps aside so the strip's pinning is measured against the whole
   page, and on tablets and wider the strip sticks to the top of the screen. The section headings stick just under it (css/editorial.css, from the
   strip's measured bottom edge). On phones the strip scrolls away as it always did. */
body > div > div[style*="z-index:60"] { display: contents !important; }
@media (min-width: 768px) {
  body > div > div[style*="z-index:60"] > nav { position: sticky; top: 0; z-index: 40; }
}