/**
 * The contact group: the Find-us split, the fixed mobile action bar, the
 * floating scroll-to-top control and the footer.
 *
 * Most of the paint is already shared — `.dk-split`, `.dk-split__media`,
 * `.dk-split__panel`, `.dk-head__title`, `.dk-rule`, `.dk-placeholder`,
 * `.dk-hexicon`, `.dk-btn*`, `.dk-social`, `.dk-grid--footer`, `.dk-container`
 * — so what is left here is what these four blocks alone paint: the map panel's
 * shorter height, the address column's rhythm, the two-up bar, the round
 * floating button and the whole footer.
 *
 * Values are transcribed from the design source (Find us 691-729, mobile
 * actions 731-736 with the `[data-actionbar]` rules at 108-109 and 130, the
 * floating action 738-740, footer 742-817). No media query lives here: the
 * responsive sheet owns every breakpoint, including the one that reveals the
 * action bar.
 */

/* ================================================================ find us */

/** The seam the section carries instead of a `.dk-section` wrapper. */
.dk-findus {
  border-top: 1px solid var(--dk-border-soft);
}

/**
 * The map panel is shorter than the design's other split media (520px), because
 * the column beside it is shorter too.
 */
.dk-findus__map {
  --dk-split-media-height: 420px;
}

/* The caption's brighter tone is shared by both split panels and lives with
   `.dk-split__media` in layout.css. */

/** Centres the pin over the whole panel, independent of the caption. */
.dk-findus__pinwrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/** A 104px solid brand hexagon carrying a 32px white location pin. */
.dk-findus__pin {
  --dk-hexicon-glyph: 32px;
  --dk-hexicon-color: var(--dk-on-dark);
}

/** Eight pixels tighter than the shared `.dk-split__panel`. */
.dk-findus__panel {
  padding: 72px 24px;
  background: var(--dk-white);
}

.dk-findus__body {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

/** A notch smaller than `.dk-head__lede`, and not width-limited: the column is. */
.dk-findus__lede {
  margin: 0 0 32px;
  font: 400 17px/1.75 var(--dk-font-body);
  color: var(--dk-muted);
  text-wrap: pretty;
}

/* --- address, phones, hours ------------------------------------------- */

.dk-findus__facts {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 0 0 34px;
  list-style: none;
  border-bottom: 1px solid var(--dk-border-soft);
}

.dk-findus__fact {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/**
 * A fixed 30px column so the three labels line up whatever the glyph's own
 * width is. The 3px nudge sits the icon on the first line of its text.
 */
.dk-findus__facticon {
  flex: none;
  width: 30px;
  margin-top: 3px;
  font-size: 19px;
  color: var(--dk-blue);
  text-align: center;
}

/** The pin is drawn a point larger than the phone and clock glyphs. */
.dk-findus__facticon--address {
  font-size: 20px;
}

.dk-findus__facttext {
  font: 400 17px/1.6 var(--dk-font-body);
  color: var(--dk-text);
}

/** The numbers read as body copy until pointed at, then take the action colour. */
.dk-findus__phone {
  color: var(--dk-text);
}

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

/* --- the two calls to action ------------------------------------------- */

.dk-findus__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 32px;
}

/** The directions glyph is a point larger than the label beside it. */
.dk-findus__actions .dk-btn i {
  font-size: 15px;
}

/* ============================================================= action bar */

/**
 * Hidden at every width this file knows about; the responsive sheet turns it
 * into a fixed two-up grid under 900px and paints its ground and shadow there.
 * The rounded top corners and the clipping belong to the bar at every width, so
 * they live here — as they do in the design's own stylesheet.
 */
.dk-actionbar {
  display: none;
  border-radius: var(--dk-radius-xl) var(--dk-radius-xl) 0 0;
  overflow: hidden;
}

/**
 * The bar's radius is clipped by `overflow`, so the two links stay square and
 * the one-pixel `gap` between them shows the ground through as a hairline.
 */
.dk-actionbar__link {
  border-radius: 0;
  font: 600 14px/1 var(--dk-font-display);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.dk-actionbar__link--call,
.dk-actionbar__link--call:hover {
  background: var(--dk-blue);
  color: var(--dk-on-dark);
}

.dk-actionbar__link--request,
.dk-actionbar__link--request:hover {
  background: var(--dk-white);
  color: var(--dk-navy);
}

.dk-actionbar__icon {
  font-size: 14px;
}

.dk-actionbar__link--request .dk-actionbar__icon {
  color: var(--dk-blue);
}

/* ======================================================== floating action */

/**
 * A column with a gap, though it holds one control today — that is how the
 * design leaves room for a second floating action. The responsive sheet lifts
 * it above the action bar and tucks it in on the narrowest screens.
 */
.dk-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 70;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.dk-fab__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--dk-border-strong);
  border-radius: 50%;
  background: var(--dk-white);
  color: var(--dk-muted-warm);
  font-size: 14px;
  box-shadow: var(--dk-shadow-fab);
}

.dk-fab__btn:hover {
  border-color: var(--dk-blue);
  color: var(--dk-blue);
  transform: translateY(-2px);
}

/* ================================================================= footer */

/**
 * Flat navy: deliberately not `.dk-dark`, which carries the hero's radial glow.
 * `base.css` already switches the focus ring to white for `footer`.
 */
.dk-footer {
  background: var(--dk-navy);
  color: var(--dk-on-dark);
}

/**
 * `.dk-container` supplies the width and the side gutters — and, through the
 * responsive sheet, their narrow-screen values. Only the vertical rhythm is
 * particular to the footer.
 */
.dk-footer__inner {
  padding-top: 72px;
  padding-bottom: 0;
}

/** Every column clamps its own overflow so a long word cannot widen the grid. */
.dk-footer__col {
  min-width: 0;
}

/* --- the mark and the wordmark ----------------------------------------- */

.dk-footer__logo {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 24px;
}

.dk-footer__logomark {
  flex: none;
}

/**
 * The "D" inside the outline mark. Painted here rather than through inline
 * attributes so the letter follows the palette; the size is in the hexagon's
 * own user units, so it scales with the mark.
 */
.dk-footer__logomark text {
  font: 800 46px var(--dk-font-display);
  fill: var(--dk-on-dark);
  text-anchor: middle;
  dominant-baseline: central;
}

.dk-footer__wordmark {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.dk-footer__name {
  font: 700 20px/1 var(--dk-font-display);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--dk-on-dark);
}

.dk-footer__tag {
  font: 500 9px/1 var(--dk-font-display);
  letter-spacing: var(--dk-track-footer-tag);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

.dk-footer__blurb {
  margin: 0 0 22px;
  max-width: 280px;
  font: 400 15px/1.75 var(--dk-font-body);
  color: var(--dk-on-dark-muted);
  text-wrap: pretty;
}

.dk-footer__socials {
  display: flex;
  gap: 10px;
}

/* --- column headings ---------------------------------------------------- */

/**
 * `<h2>` elements wearing the design's `<h4>` treatment: small, heavily
 * tracked, uppercase. The tag is the outline, the type is the design.
 */
.dk-footer__title {
  margin: 0 0 22px;
  font: 600 14px/1.2 var(--dk-font-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dk-on-dark);
}

/* --- contacts ----------------------------------------------------------- */

.dk-footer__contacts {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dk-footer__contact {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}

.dk-footer__contacticon {
  flex: none;
  width: 16px;
  margin-top: 4px;
  font-size: 14px;
  color: var(--dk-blue-pale);
  text-align: center;
}

.dk-footer__contacttext {
  font: 400 15px/1.6 var(--dk-font-body);
  color: var(--dk-on-dark-soft);
}

/** The two numbers stack under one icon, larger and brighter than the address. */
.dk-footer__phones {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dk-footer__phone {
  font: 500 16px/1.3 var(--dk-font-body);
  color: var(--dk-on-dark);
}

.dk-footer__mail {
  font: 400 15px/1.6 var(--dk-font-body);
  color: var(--dk-on-dark-soft);
}

.dk-footer__phone:hover,
.dk-footer__mail:hover {
  color: var(--dk-blue-pale);
}

/* --- services ----------------------------------------------------------- */

.dk-footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dk-footer__link {
  font: 400 15px/1.5 var(--dk-font-body);
  color: var(--dk-on-dark-muted);
}

.dk-footer__link:hover {
  color: var(--dk-on-dark);
}

/* --- opening hours ------------------------------------------------------ */

/**
 * The list and the call to action share the column's 14px rhythm; the button
 * adds six pixels of its own, exactly as the design does.
 */
.dk-footer__hourscol {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.dk-footer__hours {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.dk-footer__hoursrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dk-on-dark-line);
}

.dk-footer__day {
  margin: 0;
  font: 400 15px/1.4 var(--dk-font-body);
  color: var(--dk-on-dark-muted);
}

.dk-footer__time {
  margin: 0;
  font: 500 15px/1.4 var(--dk-font-body);
  color: var(--dk-on-dark);
  white-space: nowrap;
}

.dk-footer__hourscta {
  margin-top: 6px;
}

/* --- the copyright bar --------------------------------------------------- */

.dk-footer__bottom {
  border-top: 1px solid var(--dk-on-dark-line);
}

.dk-footer__bottominner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding-top: 24px;
  padding-bottom: 24px;
}

.dk-footer__copy,
.dk-footer__handle {
  font: 400 14px/1.5 var(--dk-font-body);
  color: var(--dk-on-dark-faint);
}

.dk-footer__handle:hover {
  color: var(--dk-on-dark);
}

/* ─────────────────────────────────────────────────────────── rounded theme */

/**
 * The design's rounded-theme rules are a list of explicit selectors rather than
 * a blanket radius, so two elements here fall either side of it.
 *
 * The map panel IS in that list (`section a[href^="https://maps.google"]`), so
 * it takes the 10px corner every other button-shaped link has.
 */
.dk-findus__map {
  border-radius: var(--dk-radius-sm);
}

/**
 * The footer's opening-hours button is NOT: every selector that grants a radius
 * is scoped to `header`, `[data-hero]`, `[data-drawer-cta]` or `section`, and
 * this link's only ancestors are `<footer>` and a plain `<div>`. It stays
 * square, which is what the design paints — so the shared `.dk-btn` radius has
 * to be taken back off it.
 */
.dk-footer__hourscta {
  border-radius: 0;
}