/* ---- Card headlines --------------------------------------- */

.small-card-heading,
.horizontal-card .small-card-heading {
  font: var(--t-headline-lg);
}

/* ---- Section heading -------------------------------------- */

.uh-section-heading {
  font: var(--t-display-md);
  /* Clears any section's padding, so the block runs off the left edge. */
  --uh-marker-lead: 100vw;
  margin-bottom: clamp(16px, 1.6vw, 28px);
  text-transform: uppercase;
}

.uh-section-heading > span {
  display: inline-block;
  margin-left: calc(-1 * var(--uh-marker-lead));
  padding: 0.16em 0.95em 0.16em var(--uh-marker-lead);
  background-color: var(--text-color);
  color: var(--background-color);
}

/* ---- Sticky navigation ------------------------------------ */

/* .is-pinned, .is-hidden, .has-menu-open and --uh-header-offset: uh-header.js. */

@media (min-width: 992px) {
  /* navbar.css loads later and sets .header{position:relative}. */
  body .header {
    position: sticky;
    top: calc(-1 * var(--uh-header-offset, 0px));
    transition: top 0.2s ease;
  }

  body .header.is-pinned {
    top: 0;
  }

  .post-sidebar {
    transition: top 0.2s ease;
  }

  /* Tocbot scrolls itself and is offset in article.hbs instead. */
  .gh-content h2[id],
  .gh-content h3[id],
  .gh-content h4[id] {
    scroll-margin-top: 96px;
  }
}

@media (max-width: 991px) {
  body .header {
    position: sticky;
    top: 0;
    transition: transform 0.25s ease;
  }

  body .header.is-hidden {
    transform: translateY(-100%);
  }

  /* The open menu locks body scroll; WebKit clips both axes on overflow-x. */
  body .header.has-menu-open {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    overflow: visible;
  }
}

/* ---- Pull quotes ------------------------------------------ */

.post-content blockquote {
  font: var(--t-quote);
}

/* ---- Form fields ------------------------------------------ */

input,
textarea,
select {
  color: var(--text-color);
  caret-color: var(--text-color);
}

/* Chrome paints its own colours over autofilled fields. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-color);
  -webkit-box-shadow: 0 0 0 1000px var(--background-color) inset;
}

.submit-button {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ---- FAQ accordion ---------------------------------------- */

.toggle-card-section .kg-toggle-content a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.toggle-card-section .kg-toggle-content ul {
  list-style: none;
  padding-left: 0;
}

.toggle-card-section .kg-toggle-content li {
  position: relative;
  padding-left: 24px;
}

.toggle-card-section .kg-toggle-content li + li {
  margin-top: 10px;
}

.toggle-card-section .kg-toggle-content li::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0.45;
}

/* ---- Lazy images in uh-* components ----------------------- */

/* global.js flags a wrapping <figure> as loaded; uh-* have none. */

body .hover-image-opacity > img[loading="lazy"] {
  opacity: 1;
}

/* ---- Header social icons ---------------------------------- */

.header .social-inner {
  width: 18px;
  min-width: 18px;
}

@media (min-width: 1439px) {
  .header .social-inner {
    width: calc(1.25vw * var(--scale));
    min-width: calc(1.25vw * var(--scale));
  }
}

/* ---- Nav link optical centring ---------------------------- */

/* custom-elements.js forces display:block here, so no flex. */

@media (min-width: 992px) {
  .header .navbar-links-outer {
    min-height: 0;
    position: relative;
    border-top: none;
    border-bottom: none;
  }

  /* Drawn rather than bordered: the rules bleed past .wide-container. */
  .header .navbar-links-outer::before,
  .header .navbar-links-outer::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 100vw;
    height: 1px;
    background-color: var(--text-color);
    transform: translateX(-50%);
  }

  .header .navbar-links-outer::before {
    top: 0;
  }

  .header .navbar-links-outer::after {
    bottom: 0;
  }
}

@media (min-width: 1439px) {
  .header .navbar-links-outer {
    padding-top: calc(1.04vw * var(--scale));
    padding-bottom: calc(1.04vw * var(--scale));
  }
}

.header .nav {
  position: relative;
  top: 0.05em;
}

/* ---- Fade below the nav ----------------------------------- */

@media (min-width: 992px) {
  /* body .header beats navbar.css; the negative margin is what puts the
     fade over the page rather than the body. */
  body .header {
    --uh-nav-fade: 16px;
    padding-bottom: var(--uh-nav-fade);
    margin-bottom: calc(-1 * var(--uh-nav-fade));
    background-color: transparent;
    background-image: linear-gradient(
      to bottom,
      var(--background-color) calc(100% - var(--uh-nav-fade)),
      transparent
    );
  }
}

/* ---- Series part label ------------------------------------- */

/* --uh-part and --uh-part-word are set in uh-post-part.hbs; the counter is
   only there to render the number as roman. */
.uh-post-part {
  font: var(--t-kicker);
  display: block;
  counter-reset: uh-part var(--uh-part, 0);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: var(--t-track-label-wide);
  opacity: var(--t-emph-faint);
}

/* A post in two series renders a label for each; the first tag wins. */
.uh-post-part ~ .uh-post-part {
  display: none;
}

.uh-post-part::before {
  content: var(--uh-part-word, "Part") " " counter(uh-part, upper-roman);
}

/* ---- Reading mode ---- */

.uh-reading-light .hero,
.uh-reading-light .post-content-and-sidebar,
.uh-reading-light .uh-toc {
  --text-color: #000000;
  --background-color: #ffffff;
}

.uh-reading-light .hero,
.uh-reading-light .post-content-and-sidebar {
  background-color: var(--background-color);
  color: var(--text-color);
}

.uh-reading-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: flex-start;
  margin-left: auto;
  padding: 6px;
  border: 0;
  background: none;
  color: var(--text-color);
  cursor: pointer;
  opacity: var(--t-emph-soft);
  transition: opacity 0.2s ease;
}

.uh-reading-toggle:hover,
.uh-reading-toggle[aria-pressed="true"] {
  opacity: var(--t-emph-strong);
}

.uh-reading-toggle svg {
  width: clamp(39px, 3vw, 48px);
  height: auto;
}

.uh-reading-toggle:focus-visible {
  outline: 2px solid var(--text-color);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .uh-reading-toggle {
    transition: none;
  }
}