/**
 * Theme fixes — site-wide, loaded after styles.css.
 *
 * Small corrections to the main stylesheet that cannot be made in it, because
 * styles.css (4,791 lines) is not version-controlled in this repo and a deploy
 * would overwrite whatever is on the server. Each fix names the source rule so
 * it can be corrected properly there and deleted from here.
 */

/* ------------------------------------------- layout shift as Objektiv loads -
 *
 * The header jumped on every page load: measured CLS 0.0137, both shifts at
 * 181ms and 193ms, which is when the webfont arrives. The nav went from 380px
 * wide to 426 and slid 23px left as the text re-measured.
 *
 * The cause is that `body` in styles.css:21 is `font-family: Objectiv` with no
 * fallback at all. Until the font loads, every word on the site is set in the
 * browser's default serif, which is nothing like Objektiv — so the swap
 * relaid out the page.
 *
 * The fix is a fallback whose metrics match Objektiv, so the text occupies the
 * same box before and after the swap and there is nothing to shift.
 *
 * One face per weight, because a single size-adjust does not fit: measured
 * against this site's own nav, heading and body text, Objektiv is 10.1% wider
 * than Arial at 400 but only 4.2% wider at 700, since Arial Bold is much wider
 * than Arial while Objektiv's weights are closer together. One compromise
 * figure left the nav 5.5px out; per weight it is under a pixel.
 *
 * Objektiv's ascent and descent are 110% and 33.9% of its em, and its line gap
 * is zero — read from ObjektivMk1_W_*.woff2, where all four weights are
 * identical. Each override below is that figure divided by its own
 * size-adjust, because size-adjust rescales the em they are measured against.
 *
 * The 700 face names Arial Bold explicitly. `local()` matches a full font
 * name, so `local("Arial")` on a face declared `font-weight: 700` would hand
 * the browser Arial's regular outlines and tell it they are the bold ones.
 *
 * This is a rendering fix, not a design change: the fallback is only on screen
 * for the moment before Objektiv arrives, and it was already being used for
 * that moment — just at the wrong size.
 *
 * The source fix is to give styles.css:21 a real fallback stack.
 */
@font-face {
  font-family: "Objectiv Fallback";
  font-weight: 300;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 107.7%;
  ascent-override: 102.1%;
  descent-override: 31.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Objectiv Fallback";
  font-weight: 400;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 110.2%;
  ascent-override: 99.8%;
  descent-override: 30.8%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Objectiv Fallback";
  font-weight: 500 600;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 111.0%;
  ascent-override: 99.1%;
  descent-override: 30.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Objectiv Fallback";
  font-weight: 700 900;
  src: local("Arial Bold"), local("Helvetica Bold"), local("Liberation Sans Bold");
  size-adjust: 104.1%;
  ascent-override: 105.6%;
  descent-override: 32.6%;
  line-gap-override: 0%;
}

/* styles.css:21 — `body { font-family: Objectiv }`, no fallback. Everything
   else on the page inherits from here. */
body {
  font-family: Objectiv, "Objectiv Fallback", Arial, Helvetica, sans-serif;
}

/* ------------------------------------------------ header nav at exactly 768 -
 *
 * The theme switches to the desktop nav with `min-width: 768px` but styles the
 * mobile menu with `max-width: 768px`. Both match at exactly 768, so at that
 * one width the burger is hidden, the desktop nav is shown, and it is wearing
 * the mobile menu's clothes: 22px links instead of 12px. Five items at nearly
 * double size do not fit beside the logo, so they wrap to three lines and the
 * header grows from 86px to 138px.
 *
 * Measured: 767 burger, correct. 768 broken. 769 correct (12px, 86px header).
 * A one-pixel-wide bug — but 768 is iPad portrait, so it is a real device
 * width on every page of the site.
 *
 * The source fix is to change those `max-width: 768px` blocks in styles.css to
 * `max-width: 767.98px` (they are at lines 641, 666, 1568 and 1633). Until
 * then this restores, at 768 only, what 769 already does. The query is bounded
 * on both sides deliberately: it cannot affect any other width.
 */
@media (min-width: 768px) and (max-width: 768px) {
  /* styles.css:1587 — the mobile menu's link size, not scoped to `.active`. */
  .header__nav ul li a {
    font-size: 12px;
    font-weight: bold;
  }

  /* styles.css:1596 — `.submenu-icon` is only ever styled inside the mobile
     block, so above 768 it is an unstyled empty inline. At 768 it became a
     25x30 arrow tile, the stray chevron under "Lines of Business". */
  .submenu-icon {
    display: inline;
    width: auto;
    height: auto;
    margin: 0;
    background: none;
  }

  /* styles.css:1571-1574 — the mobile block puts submenus in flow and disables
     the hover dropdown, which at 768 leaves the desktop nav with no working
     submenu at all. */
  .header__nav ul.sub-menu {
    position: absolute;
  }

  .header__nav li:hover > ul.sub-menu {
    display: block;
  }
}