/* Full-viewport, fixed in place behind everything else on the page
   (z-index: 0, see .page-contact__info's z-index: 10 below) — taken
   out of flow rather than sized to content, so it stays put and keeps
   filling the whole viewport as .page-contact__info (sitting right at
   the top, in normal flow) scrolls up and away, revealing more of it.
   .page-contact reserves scroll room (below) so the footer still
   scrolls in underneath instead of overlapping it.
   .page-contact__map-canvas is Mapbox GL's mount point (see
   assets/js/contact-map.js) — until the map (or its access token, see
   GREHAMER_MAPBOX_TOKEN) is there, the plain brand-dark background
   shows. */
.page-contact__map {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-color: var(--brand-color-dark);
}

/* 200svh (not just 100svh) reserves real scroll room for a big,
   unobstructed stretch of just the fixed map after .page-contact__info
   (in normal flow, sitting right at the top) scrolls out of view —
   "the larger space to view map below it". */
.page-contact {
  position: relative;
  min-height: 200svh;

  /* Blocks margin collapsing — .page-contact__info's own margin-bottom
     would otherwise collapse straight through this element (no
     border/padding of its own to stop it) and push .page-contact
     itself down instead of growing to contain it, leaving this
     element's own height stuck at min-height regardless of how tall
     its child actually renders — a stray gap below the info block,
     before the footer. */
  display: flow-root;
}

/* Mapbox's wordmark has no JS-level toggle (attributionControl: false
   in contact-map.js already drops the "i" attribution control and the
   zoom +/- controls were never added) — hide it here instead. */
.page-contact__map .mapboxgl-ctrl-logo {
  display: none;
}

/* Specificity bump (descendant selector, not just .page-contact__map-canvas)
   is deliberate: mapbox-gl.js adds its own "mapboxgl-map" class to this
   same element at init, and mapbox-gl.css's ".mapboxgl-map { position:
   relative }" ties on specificity — whichever stylesheet's <link> lands
   later in the cascade wins the tie. That order isn't ours to pin down
   (mapbox-gl.css loads from a CDN via functions.php), so this rule wins
   on specificity instead, regardless of load order. */
.page-contact__map .page-contact__map-canvas {
  position: absolute;
  inset: 0;

  background-color: rgba(48, 54, 76, 0.8);
}

.page-contact__map .page-contact__map-canvas canvas {
  opacity: 1;
  transition: opacity 1.5s 1s var(--theme-ease-signature);
  mix-blend-mode: soft-light;

  @starting-style {
    opacity: 0;
  }
}

/* Every marker on this map (office pill, city name, highway labels)
   fades in on insertion instead of just appearing — a keyframe
   animation, not a transition: see map-marker-in in reset.css. */
.page-contact__map-marker,
.page-contact__map-place-label,
.page-contact__map-highway-label {
  animation: map-marker-in 1s var(--theme-ease-signature) both;
}

/* Custom Mapbox marker — the GH&Co wordmark on a dark pill, with a
   small pointer tail so it reads as a pin, not a floating badge. */
.page-contact__map-marker {
  /* Above the city/highway labels (map-labels.js) — also Mapbox markers,
     added later, so they'd paint on top. */
  z-index: 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page-contact__map-marker img {
  display: block;

  /* content-box, not the global border-box reset — height is the
     logo's own visible height; padding sits outside it instead of
     eating into it (1.25rem height minus .75rem top+bottom padding
     left ~zero content box under border-box, collapsing the image
     and breaking its aspect-ratio width calc). */
  box-sizing: content-box;
  height: 1.25rem;
  width: auto;
  padding: .75rem 1rem;
  background: var(--brand-color-dark);
  box-shadow: 0 4px 16px rgb(0 0 0 / 30%);
}

.page-contact__map-marker::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--brand-color-dark);
  margin-top: -1px;
}

/* Apeldoorn's name and the major highways' route numbers — added as
   plain DOM markers (contact-map.js) rather than Mapbox GL style
   layers so mix-blend-mode: soft-light on the canvas above doesn't
   wash them out the way it does the rest of the (deliberately subtle)
   line-art map. pointer-events: none so they never block map drag. */
.page-contact__map-place-label {
  pointer-events: none;
  color: var(--brand-color-light);
  font-size: .9375rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  text-shadow: 0 1px 3px rgb(48 54 76 / 90%), 0 0 8px rgb(48 54 76 / 70%);
  white-space: nowrap;
}

.page-contact__map-highway-label {
  pointer-events: none;
  color: var(--brand-color-light);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px 3px rgb(48 54 76 / 90%), 0 0 6px rgb(48 54 76 / 70%);
  white-space: nowrap;
}

/* Contactgegevens-style info block, replacing the old mailto/tel CTA
   bar — text + office photo side by side on the same 6-col grid and
   lattice-border convention as the rest of the site (header/CTA inner,
   sticky-cta.css etc). Sits right at the top of the page (plain
   in-flow, ordinary top margin) — .page-contact__map is position:
   fixed behind it regardless of where this scrolls to, so as this
   scrolls away the map just keeps filling the viewport on its own
   (see contact-map.js: the map's flyTo zoom-out is itself triggered by
   this element's top reaching the viewport top, not a fixed delay).
   z-index: 10 puts it above the fixed map (z-index: 0).
   Bottom margin isn't just the side gap — .site-footer's own
   min-height (footer.css) is deliberately less than 100svh by
   (.5 * shrunk-header-height) + section-padding, room for the fixed
   header floating above it. That shortfall is exactly how much of a
   gap would otherwise sit between this element and the footer at the
   very bottom of the page — and since that gap is just empty margin
   (no background of its own), the fixed map (still position: fixed,
   still painted there) would show through it in that last, permanently
   pinned scroll frame. Matching the margin to that same shortfall
   means the footer's own box exactly picks up where this one's margin
   starts, right at the 100svh mark from the bottom — no exposed gap
   left over. */
.page-contact__info {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);

  /* Top margin clears the fixed header — its top offset
     (var(--theme-section-padding), see header.css) + its own height —
     plus a gap below it equal to the side margins. */
  margin: calc(var(--theme-section-padding) * 2 + var(--theme-header-height)) var(--theme-section-padding) calc((.5 * (var(--theme-header-height) * 0.6)) + var(--theme-section-padding));
  border: var(--theme-line-width) solid var(--theme-line-color);
  background-color: var(--brand-color-light);
}

.page-contact__info-text {
  grid-column: span 2;

  /* --theme-space-md, not --theme-section-padding — that token is the
     structural page-edge gutter (deliberately shrunk on mobile, see
     tokens.css), not meant for inner content padding; using it here
     made this box's own inner padding go nearly to nothing on small
     screens (same anti-pattern already fixed once in hero-intro.css). */
  padding: var(--theme-space-lg) var(--theme-space-md);

  /* flex column so .page-contact__info-footer's margin-top: auto can
     push the buttons/legal row down to the bottom of the box. */
  display: flex;
  flex-direction: column;

  /* text-align: center; */
}

.page-contact__info-heading {
  margin: 0;
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 700;
}

.page-contact__info-address {
  margin: var(--theme-space-sm) 0 0;
  font-size: 2rem;
  font-style: normal;
  line-height: 1.4;
}

/* Inline within .page-contact__info-note now (next to the parking
   text, not its own line) — only the color/italic/underline carry
   over, font-size inherits the note's own 1rem. */
.page-contact__info-directions {
  color: var(--theme-color-primary);
  /* font-style: italic; */
  text-decoration: none;

  /* Actual underline mechanism here is reset.css's "p a" box-shadow
     (an inset line, not text-decoration) — this link sits inside
     .page-contact__info-note's <p>, so it inherits that rule too. */
  /* box-shadow: none; */
}

.page-contact__info-note {
  margin: var(--theme-space-xs) 0 0;
  font-size: 1rem;
  color: var(--theme-color-text-muted, var(--brand-color-dark));
}

/* Buttons + BTW/KVK share one row, pinned to the bottom of the box
   (see .page-contact__info-text's margin-top: auto trick) — legal
   text left, buttons flex-end right. */
.page-contact__info-footer {
  margin-top: auto;
  padding-top: var(--theme-space-sm);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* justify-content: center; */
  gap: var(--theme-space-sm);
}

.page-contact__info-details {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;

  /* Right-aligns the buttons within this row — this box itself
     already spans the full available width of .page-contact__info-footer
     (a wrapping flex container's "natural" width still fills available
     space once its own content can't fit on one line unwrapped, even
     with width: fit-content), so pushing this box itself rightward
     with margin doesn't do anything; justify-content works regardless. */
  /* justify-content: center; */
}

.page-contact__info-legal {
  margin: 0 auto;
  color: var(--theme-color-text-muted, var(--brand-color-dark));
  font-size: .8125rem;
  white-space: nowrap;
}

.page-contact__info-image {
  grid-column: span 4;
  margin: 0;
  border-left: var(--theme-line-width) solid var(--theme-line-color);
}

.page-contact__info-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Between this and 768px (where it stacks fully), the image column
   (span 4 of 6 by default) shrinks first instead of holding its ratio
   all the way down — at these in-between widths the text column was
   left too narrow to hold its own content without awkward wraps
   ("Contact & Adres" breaking mid-phrase, etc). */
@media (width <= 1024px) {
  .page-contact__info-text {
    grid-column: span 3;
  }

  .page-contact__info-image {
    grid-column: span 3;
  }
}

@media (width <= 768px) {
  .page-contact__info {
    grid-template-columns: 1fr;
  }

  .page-contact__info-text,
  .page-contact__info-image {
    grid-column: span 1;
  }

  .page-contact__info-image {
    order: -1;
    border-left-width: 0;
    border-bottom: var(--theme-line-width) solid var(--theme-line-color);
    aspect-ratio: 4 / 3;
  }
}