/**
 * Nav behaviour the original design handled with inline styles.
 *
 * The static page shipped each submenu as style="display:none"; WordPress
 * menus have no such attribute, so init.js needs them hidden from CSS instead
 * before it can slideToggle them.
 */

.menu-wrap .sub-menu {
  display: none;
}

/* WordPress wraps menu output in its own list; keep the design's markup
   expectations intact when a menu is assigned. */
.menu-wrap ul.menu {
  list-style: none;
}

/**
 * Type-set wordmark, used when no logo image is uploaded.
 *
 * The artwork it replaces was a 225x36 SVG drawn at 146/184/226px wide, so the
 * cap height it needs to match is roughly 23/29/36px. Zuume's caps sit at about
 * 0.72em, which is where these sizes come from.
 */
.logo-wordmark {
  display: block;
  width: auto;
  color: #fff;
  font-family: zuume, sans-serif;
  font-weight: 700;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1;
  font-size: 32px;
  white-space: nowrap;
}

@media (min-width: 768px) {
  .logo-wordmark {
    font-size: 41px;
  }
}

@media (min-width: 992px) {
  .logo-wordmark {
    font-size: 50px;
  }
}

.header a:hover .logo-wordmark {
  color: var(--sv-accent, #D9A441);
}

/**
 * The brand lockup is 2.18:1 — far squarer than the 6.25:1 wordmark this slot
 * was built for — so it is sized by height and left to find its own width.
 * Header heights are 100/120/130px with the mark offset 21/21/30px from the
 * top, which is what caps these values.
 */
.header .logo:not(.logo-wordmark) {
  width: auto;
  height: 40px;
}

@media (min-width: 768px) {
  .header .logo:not(.logo-wordmark) {
    height: 50px;
  }
}

@media (min-width: 992px) {
  .header .logo:not(.logo-wordmark) {
    height: 58px;
  }
}

/**
 * Inner pages open straight into content rather than a full-bleed hero, so
 * they need room for the fixed header (100/120/130px tall).
 */
.doac-page-body {
  padding-top: 100px;
}

@media (min-width: 768px) {
  .doac-page-body {
    padding-top: 120px;
  }
}

@media (min-width: 992px) {
  .doac-page-body {
    padding-top: 130px;
  }
}

/**
 * Footer social labels.
 *
 * The design hides them with text-indent: -500px, but the same rule sets
 * text-align: center — and centring re-centres the line against the negative
 * indent rather than honouring it. That is invisible at six icons, where each
 * anchor is ~240px and 500px clears it comfortably. Once the count is editable
 * the anchors get wider (two icons is ~480px each) and the tail of the word
 * reappears past the left edge.
 *
 * Collapsing the type removes the glyphs outright at any width, and leaves the
 * text in place for screen readers.
 */
.footer-social ul li a {
  font-size: 0;
}