/* ==========================================================================
   Standalone header + footer components.
   The sticky nav is the one deliberate exception to "no fixed/absolute
   positioning" — the build rules explicitly allow it.
   ========================================================================== */

:root {
  --header-padding-block: clamp(0.75rem, 0.9vw, 1.0625rem);
  --header-logo-height: clamp(2.375rem, 3.3vw, 4.5rem);
  /* A fifth larger than the fluid floor above: on a phone the mark is the
     only thing in the bar besides two icons, and at 38px it read as a crumb. */
  --header-logo-height-mobile: 2.85rem;
  --header-search-size: clamp(2.5rem, 3.1vw, 4rem);
  --header-nav-gap: clamp(0.625rem, 1.3vw, 1.9rem);
}

.skip-link:focus {
  position: static;
  width: auto;
  height: auto;
  clip: auto;
  margin: 0;
  padding: 0.75rem 1.25rem;
  background: var(--color-heading);
  color: var(--color-white);
}

/* Hello Elementor's theme.css caps `.site-header:not(.dynamic-header)` at a
   Bootstrap-style max-width and adds its own gutter. This theme renders its own
   header and footer, so that cap is undone here at matching specificity —
   preferable to dropping the parent stylesheet, which also carries Elementor
   page defaults we do want. */
.site-header:not(.dynamic-header),
.site-footer:not(.dynamic-footer) {
  max-width: none;
  padding-inline: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-divider);
}

.site-header__inner {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: var(--header-padding-block);
}

/* ---- Logo ---- */
.site-logo {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-shrink: 0;
}

.site-logo__image {
  width: auto;
  height: var(--header-logo-height);
}

/* ---- Nav ---- */
.site-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.site-nav__list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--header-nav-gap);
}

.site-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
  padding-block: 0.25rem;
}

.site-nav__tag {
  font-family: var(--font-body);
  font-size: var(--text-tag-size);
  line-height: var(--text-tag-lh);
  letter-spacing: var(--text-tag-ls);
  font-weight: var(--text-tag-weight);
  text-transform: uppercase;
  color: var(--color-eyebrow);
  white-space: nowrap;
}

.site-nav__label {
  font-family: var(--font-body);
  font-size: var(--text-nav-size);
  line-height: var(--text-nav-lh);
  font-weight: var(--text-nav-weight);
  color: var(--color-heading);
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-nav__link:hover .site-nav__label,
.site-nav__link.is-current .site-nav__label {
  color: var(--color-accent);
}

/* ---- Header actions ---- */
.site-header__actions {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.site-search-toggle,
.site-menu-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--header-search-size);
  height: var(--header-search-size);
  padding: 0;
  border: 0;
  border-radius: var(--radius-circle);
  background: var(--gradient-soft-card);
  color: var(--color-accent);
  flex-shrink: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.site-search-toggle:hover,
.site-menu-toggle:hover { opacity: 0.82; }

/* The burger only exists once the chapter row is too wide to sit inline. */
.site-menu-toggle { display: none; }

/* Measured, not guessed: the six chapter names still sit on one line at
   1265px — a 1280px window less its scrollbar — and wrap at 1240px. Below the
   crossover they move into the burger panel rather than pushing the header
   into a second row. */
@media (max-width: 1264px) {
  .site-nav { display: none; }
  .site-menu-toggle { display: flex; }
}

@media (max-width: 767px) {
  :root { --header-logo-height: var(--header-logo-height-mobile); }
}

@media (max-width: 640px) {
  .site-header__inner { gap: 0.75rem; }
}

/* ---- Footer (placeholder) ----
   Background gradient is applied directly to the section — no absolute-
   positioned overlay layer needed. */
.site-footer--placeholder {
  padding-block: 4rem;
  background: var(--gradient-soft-card);
}

.site-footer__inner {
  display: flex;
  justify-content: center;
}

.site-footer__note {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  color: var(--color-body-muted);
}

/* ==========================================================================
   FULL-SCREEN OVERLAYS — search and the chapter menu

   Fixed positioning here is the navigation exception the build rules allow.
   An overlay that only covered part of the viewport would leave the page
   scrolling behind it, which is worse than the rule it would be keeping.
   ========================================================================== */

:root {
  --overlay-z: 120;
  --overlay-pad-block: clamp(1rem, 1.6vw, 1.75rem);
}

/* Hold the page still while an overlay is open. */
.has-overlay body { overflow: hidden; }

.site-search,
.site-mobile-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--overlay-z);
  flex-direction: column;
  background: var(--color-white);
  overflow-y: auto;
}

.site-search.is-open,
.site-mobile-nav.is-open { display: flex; }

/* ---- Shared overlay top bar ---- */
.site-search__top,
.site-mobile-nav__top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-shrink: 0;
  padding-block: var(--overlay-pad-block);
  border-bottom: 1px solid var(--color-divider);
}

.site-search__close,
.site-mobile-nav__close {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 0;
  border-radius: var(--radius-nav-link);
  background: none;
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  font-weight: var(--text-small-weight);
  color: var(--color-body-muted);
  transition: color var(--duration-fast) var(--ease-standard),
              background-color var(--duration-fast) var(--ease-standard);
}

/* Hello Elementor's reset paints every button #c36 on hover and focus with
   `button:hover` / `[type=button]:hover`. Colouring only the text left mauve
   words on that pink — so the hover takes over the background too, in the
   site's own mauve, with the words and the × in white. Scoped under the
   overlay so it outranks the reset at any load order. */
.site-search .site-search__close:hover,
.site-search .site-search__close:focus-visible,
.site-mobile-nav .site-mobile-nav__close:hover,
.site-mobile-nav .site-mobile-nav__close:focus-visible {
  background-color: var(--color-accent);
  color: var(--color-white);
}

/* A mouse click leaves the button focused, and the reset's `:focus` rule
   would otherwise hold it pink after the pointer has moved away. */
.site-search .site-search__close:focus:not(:focus-visible):not(:hover),
.site-mobile-nav .site-mobile-nav__close:focus:not(:focus-visible):not(:hover) {
  background-color: transparent;
  color: var(--color-body-muted);
}

/* ---- Search ---- */
.site-search__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-block: clamp(2rem, 4vw, 4rem) 2rem;
}

.site-search__form {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1.25rem;
}

.site-search__glass {
  flex-shrink: 0;
  color: var(--color-gray-3);
}

/* Same reset problem as the opt-in field:  outranks a
   lone class, and was drawing a bordered box around the search line. */
.site-search .site-search__input {
  width: 100%;
  min-width: 0;
  border: 0;
  padding: 0;
  background: none;
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 3rem);
  line-height: 1.3;
  color: var(--color-heading);
}

.site-search .site-search__input::placeholder { color: var(--color-gray-3); }
.site-search .site-search__input:focus { outline: none; }

.site-search__results {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;
}

.site-search__result {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-block: 1.125rem;
  border-bottom: 1px solid var(--color-divider);
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.site-search__result:hover { opacity: 0.78; }

.site-search__result-title {
  font-family: var(--font-heading);
  font-size: clamp(1.125rem, 1.6vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-heading);
}

.site-search__result-text,
.site-search__empty {
  font-family: var(--font-body);
  font-size: var(--text-small-size);
  line-height: 1.6;
  color: var(--color-body-muted);
}

.site-search__empty { padding-block: 1.5rem; }

/* ---- Chapter menu ----
   The chapter names take the display serif here, not the body sans: at this
   size they are headings on a page of their own rather than a row of labels. */
.site-mobile-nav__list {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding-block: clamp(1rem, 3vw, 2.5rem);
}

.site-mobile-nav__link {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  padding-block: clamp(0.875rem, 2vw, 1.375rem);
  border-bottom: 1px solid var(--color-divider);
}

.site-mobile-nav__label {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 5.5vw, 2.25rem);
  line-height: 1.2;
  font-weight: 400;
  color: var(--color-heading);
  transition: color var(--duration-fast) var(--ease-standard);
}

.site-mobile-nav__link:hover .site-mobile-nav__label { color: var(--color-accent); }