/**
 * Page chrome: the contact strip and the sticky header.
 *
 * Two rules of thumb hold this file together.
 *
 * Selectors stay at single-class specificity wherever `responsive.css` also
 * has an opinion. The responsive sheet reaches the cells through
 * `.dk-topbar__info > a` (0,1,1) and the nav links through `.dk-nav > a`, so
 * the resting rules here are written as `.dk-topbar__cell` / `.dk-nav__link`
 * (0,1,0) and lose to them cleanly — no `!important` anywhere.
 *
 * The exception is `:hover`, which has to out-specify `base.css`'s blanket
 * `a:hover` (0,1,1); those rules are qualified with the element name to reach
 * (0,2,1). That is the whole reason `a.dk-topbar__cell:hover` is not simply
 * `.dk-topbar__cell:hover`.
 */

/* ══════════════════════════════════════════════════════════════════ topbar */

.dk-topbar {
  background: var(--dk-beige);
  border-bottom: 1px solid var(--dk-border);
}

.dk-topbar__inner {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 8px;
}

/* --- contact cells ------------------------------------------------------ */

.dk-topbar__info {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  min-width: 0;
}

/**
 * Each cell closes itself with a right-hand hairline; the first one opens the
 * run with a left-hand one, so the group reads as a divided strip rather than
 * as three floating links.
 */
.dk-topbar__cell {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 16px 26px;
  border-right: 1px solid var(--dk-border);
  font: 400 14px/1.4 var(--dk-font-body);
  color: var(--dk-muted);
  white-space: nowrap;
}

.dk-topbar__phone {
  border-left: 1px solid var(--dk-border);
}

a.dk-topbar__cell:hover {
  color: var(--dk-blue);
}

.dk-topbar__info i {
  font-size: 13px;
  color: var(--dk-muted-cool);
}

/* --- messaging channels ------------------------------------------------- */

.dk-topbar__social {
  display: flex;
  align-items: stretch;
}

.dk-topbar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  padding: 16px 0;
  border-left: 1px solid var(--dk-border);
  color: var(--dk-muted-cool);
  font-size: 15px;
}

/* The last channel closes the run; the language group opens its own. */
.dk-topbar__social > a:last-of-type {
  border-right: 1px solid var(--dk-border);
}

a.dk-topbar__link:hover {
  color: var(--dk-blue);
}

/* --- language switcher -------------------------------------------------- */

.dk-lang-group {
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-right: 1px solid var(--dk-border);
}

.dk-lang {
  padding: 16px 10px;
  border: 0;
  border-radius: var(--dk-radius-xs);
  background: none;
  font: 600 13px/1 var(--dk-font-display);
  letter-spacing: 0.06em;
  color: var(--dk-muted-cool);
  cursor: pointer;
}

/**
 * The active locale is the only thing in the strip painted in the action
 * colour, which is what makes the pair read as a choice rather than as two
 * more links. `responsive.css` re-styles both states for the navy topbar off
 * this same attribute.
 */
.dk-lang[aria-pressed='true'] {
  color: var(--dk-blue);
}

/* ══════════════════════════════════════════════════════════════════ header */

.dk-header {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Keeps the drawer's stacking context inside the header, so the nav can sit
     above the page without competing with the hero. */
  isolation: isolate;
  background: var(--dk-white);
  box-shadow: var(--dk-shadow-header);
  transition: box-shadow var(--dk-speed) ease;
}

/* `main.js` stamps `data-scrolled` past 90px: the header lifts off the page. */
html[data-scrolled='1'] .dk-header {
  box-shadow: var(--dk-shadow-header-scrolled);
}

/** Scroll progress. `main.js` writes `--dk-progress`; this only reads it. */
.dk-progress {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  width: var(--dk-progress, 0%);
  height: 3px;
  background: var(--dk-blue);
}

.dk-header__inner {
  max-width: var(--dk-container);
  margin: 0 auto;
  padding: 18px var(--dk-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}

html[data-scrolled='1'] .dk-header__inner {
  padding-top: 10px;
  padding-bottom: 10px;
}

/**
 * Everything the condensed state animates, in one place. The mark and the
 * wordmark only shrink at desktop width (see `responsive.css`), but the
 * transition is declared here because it belongs to the elements, not to the
 * breakpoint.
 */
.dk-header__inner,
.dk-logo > svg,
.dk-logo span {
  transition:
    padding var(--dk-speed) ease,
    width var(--dk-speed) ease,
    height var(--dk-speed) ease,
    font-size var(--dk-speed) ease,
    opacity var(--dk-speed-fast) ease;
}

/* --- logo --------------------------------------------------------------- */

.dk-logo {
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--dk-blue);
}

.dk-logo > svg {
  flex: none;
}

.dk-logo__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.dk-logo__word {
  font: 700 27px/1 var(--dk-font-display);
  letter-spacing: var(--dk-track-snug);
  text-transform: uppercase;
  color: var(--dk-ink-strong);
  white-space: nowrap;
}

/** The 2px bar between the wordmark and its tagline. */
.dk-logo__rule {
  display: block;
  height: 2px;
  background: var(--dk-blue);
}

.dk-logo__tag {
  font: 500 10px/1 var(--dk-font-display);
  letter-spacing: var(--dk-track-logo);
  text-transform: uppercase;
  color: var(--dk-muted);
  white-space: nowrap;
}

/* --- burger ------------------------------------------------------------- */

/* Hidden until the drawer breakpoint, where `responsive.css` reveals it. */
.dk-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--dk-border-strong);
  border-radius: var(--dk-radius-sm);
  background: var(--dk-white);
  color: var(--dk-navy);
  font-size: 17px;
  cursor: pointer;
}

.dk-burger:hover {
  border-color: var(--dk-blue);
  color: var(--dk-blue);
}

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

.dk-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 28px;
  font: 500 16px/1 var(--dk-font-display);
}

.dk-nav__link {
  position: relative;
  padding: 8px 0;
  color: var(--dk-nav-idle);
}

/** The link for the section the visitor is standing in. */
.dk-nav__link--current {
  color: var(--dk-blue);
}

/**
 * The underline wipes in from the left rather than fading, so the affordance
 * has a direction. It is a pointer affordance only — the drawer drops it.
 */
.dk-nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--dk-blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dk-speed) ease;
}

.dk-nav__link:hover::after {
  transform: scaleX(1);
}

/* Also holds the current link at the action colour, which `a:hover` would
   otherwise darken. */
a.dk-nav__link:hover {
  color: var(--dk-blue);
}

/* --- drawer call to action ---------------------------------------------- */

/* Part of the nav at every width, painted only inside the drawer. */
.dk-drawer-cta {
  display: none;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 8px;
}

.dk-drawer-cta__icon {
  font-size: 14px;
}