/**
 * The contact group: the Find-us split, 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-photo__img`,
 * `.dk-hexicon`, `.dk-btn*`, `.dk-social`, `.dk-grid--footer`, `.dk-container`
 * — so what is left here is what these three blocks alone paint: the map
 * panel's shorter height, its tone, its pin, its still and what its live
 * controls borrow from the theme, the address column's rhythm, the round
 * floating button and the whole footer.
 *
 * Values are transcribed from the design source (Find us 691-729, the
 * floating action 738-740, footer 742-817). The design's fixed mobile action
 * bar (731-736) was removed at the workshop's request. No media query lives
 * here: the responsive sheet owns every breakpoint.
 */

/* ================================================================ 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.
 *
 * It leaves the shared slate ground for the site's beige: the map is light
 * now — pale land, white streets, a yellow main road — and a light picture
 * lazily arriving in a dark card would flash. Beige is a shade under the
 * map's own ground, so the still fades up from near enough its own colour.
 *
 * `--dk-findus-tone` is the map's colour treatment: the reference's bright
 * style at half its saturation, so its sage land, yellow road and blue
 * water settle into the site's grey and beige without turning into the
 * flat grey of a "positron" map, which drops the road's colour, the water's
 * and the place markers with it. Declared once here and applied to the
 * still and to the live canvas alike — never to the panel, whose pin and
 * buttons keep their full colour — so the swap between them moves nothing.
 *
 * `isolation` gives the panel its own stacking context, so the z-indexes
 * MapLibre uses inside it — 2 for the controls, 99999 for the "hold Ctrl to
 * zoom" screen — rank against each other and not against the page: without
 * it that screen painted over the sticky header whenever the two overlapped.
 */
.dk-findus__map {
  --dk-split-media-height: 420px;
  --dk-findus-tone: saturate(0.5);
  background: var(--dk-beige);
  isolation: isolate;
}

/**
 * The still, inside its link to Google Maps, filling the panel until the live
 * map has painted and takes its place.
 */
.dk-findus__preview {
  position: absolute;
  inset: 0;
  display: block;
}

/** The still and the live canvas wear the same tone; see `--dk-findus-tone`. */
.dk-findus__still,
.dk-findus__map .maplibregl-canvas {
  filter: var(--dk-findus-tone);
}

/**
 * The still at the size it was rendered, the panel a window onto its
 * centre. The shared `cover` scaled it to the panel — on a phone to half
 * its size, so the map stood at half the live map's zoom with labels too
 * small to read, and the live map arrived as a jump. Unscaled, its centre
 * on the panel's centre, the still is the live map's first frame; it is
 * rendered larger than any panel the layout makes, so there is never a
 * gap at an edge.
 */
.dk-findus__still {
  object-fit: none;
}

/**
 * The live map's host. Every rule for the live map carries the panel's class
 * as well as its own, because MapLibre's stylesheet is appended to the head
 * after this one and its single-class rules would otherwise win on order —
 * this host, for one, it sets `position: relative`.
 *
 * Invisible until the first frame is painted: laid out at full size so the
 * canvas is measured right, but neither drawn nor in the way of the link
 * underneath, whose clicks it would otherwise swallow while the tiles are
 * still coming. The typeface reaches the cooperative-gesture message and the
 * credit; the map's own labels are drawn on the canvas from its own fonts.
 */
.dk-findus__map .dk-findus__live {
  position: absolute;
  inset: 0;
  visibility: hidden;
  font-family: var(--dk-font-body);
}

.dk-findus__map .dk-findus__live--ready {
  visibility: visible;
}

/**
 * The provider's credit, in the same pill on the still and on the live map,
 * so nothing shifts when one replaces the other. MapLibre's stylesheet draws
 * its own controls; overridden here is only what clashed with the theme —
 * the flat translucent strip its non-collapsing attribution wears, which
 * becomes the design's white pill in the body face, and the buttons' shadow.
 */
.dk-findus__credit,
.dk-findus__map .maplibregl-ctrl.maplibregl-ctrl-attrib {
  margin: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  background: var(--dk-white);
  font: 400 12px/20px var(--dk-font-body);
  color: var(--dk-text);
}

.dk-findus__credit {
  position: absolute;
  right: 0;
  bottom: 0;
}

.dk-findus__map .maplibregl-ctrl-attrib a {
  color: var(--dk-text);
}

/** The zoom pair and the return button take the site's floating-button shadow. */
.dk-findus__map .maplibregl-ctrl-group:not(:empty) {
  box-shadow: var(--dk-shadow-fab);
}

/**
 * The return button's glyph, drawn to the 29px cell MapLibre gives every
 * control button, in the same near-black ink as the zoom glyphs beside it.
 * The button itself is styled by MapLibre's stylesheet like its neighbours;
 * only the glyph is ours, since theirs are background images.
 */
.dk-findus__map .maplibregl-ctrl button.dk-findus__return {
  display: grid;
  place-items: center;
  font-size: 15px;
  color: var(--dk-text);
}

/**
 * Sets the pin's tip on the panel's centre — the workshop — as the live
 * map's bottom-anchored marker does, so the swap between them moves nothing.
 */
.dk-findus__pinwrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
}

/**
 * The teardrop: 30px wide, 40 tall, the brick red of the reference. The rim
 * is a quarter-black outline over the body, the dot is white — the classic
 * marker's own construction — and a drop shadow lifts it off the map.
 */
.dk-findus__pin {
  width: 30px;
  height: 40px;
  filter: drop-shadow(0 2px 3px rgba(15, 26, 43, 0.3));
}

.dk-findus__pinbody {
  fill: var(--dk-map-pin);
}

.dk-findus__pinedge {
  fill: rgba(0, 0, 0, 0.25);
}

.dk-findus__pindot {
  fill: var(--dk-white);
}

/** 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;
}

/* ======================================================== 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 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 ------------------------------------------------------ */

.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;
}

/* --- 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"]` —
 * the design's panel was the link; ours holds it), so it takes the 10px
 * corner every other button-shaped link has — and clips the map to it, since
 * the still and the canvas both fill the panel edge to edge.
 */
.dk-findus__map {
  border-radius: var(--dk-radius-sm);
  overflow: hidden;
}

/**
 * That clip would swallow the focus ring too. The link around the still and
 * the live map's canvas both fill the panel edge to edge, and the site's ring
 * (`base.css`) sits three pixels outside its element — wholly in the clipped
 * margin, so a keyboard visitor landing on either saw nothing. For these two
 * the ring is drawn just inside the edge instead, where the clip cannot
 * reach it. The smoke suite focuses whichever of them the browser shows and
 * asserts the ring lies inside the panel.
 */
.dk-findus__preview:focus-visible,
.dk-findus__map .maplibregl-canvas:focus-visible {
  outline-offset: -4px;
}