/* Clean Amsterdam — the service-area map. Brand colours only. */

.csa-map {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  background: #F5FBFB;
}

/* Layer 0. Everything the page puts over the map states its own, above this. */
.csa-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.csa-map svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  /* A finger on the map pans the map. Without this the browser claims a
     vertical drag as a scroll before the pointer handler sees it, and the
     page moves under a gesture meant for the map. Only the drawing takes it:
     the panel over it, and everything below the hero, scroll as they are. */
  touch-action: none;
}

.csa-map.csa-dragging svg { cursor: grabbing; }

/* An area is told apart by its border, never by a fill of its own. */
.csa-map .borders path {
  fill: none;
  stroke: #0F5F78;
  stroke-width: 1.6;
  stroke-linejoin: round;
  pointer-events: none;
}

.csa-map .land path {
  transition: fill 120ms ease-out;
}

/* Hovering lights the whole area, not the buurt the cursor happens to be on.
   A few steps toward the teal it is already made of, rather than a colour
   that announces itself. */
.csa-map .land path.csa-lit { fill: #9BC3D1; }
.csa-map .land path.csa-open { fill: #0F5F78; }

/* Not sold here: still drawn, never lit. */
.csa-map .land path.csa-quiet { fill: #EDF3F3; pointer-events: none; }

.csa-credit {
  position: absolute;
  right: 10px;
  bottom: 8px;
  z-index: 4;
  font-size: 10px;
  color: #9FC4C6;
}

/* ---- what the homepage's script adds ------------------------------------
 *
 * On the page rather than the map, but set by script at runtime and in no
 * rendered markup — so here, not in site.css, which refuses a rule no page
 * ships. */

.shell .hint.gone { opacity: 0; }


/* Off the map. ODbL wants the attribution findable, not in the way — it is in
 * the footer, where the other legal lines already live. */
.shell .stage .csa-credit { display: none; }

/* ---- the vacancy page's minimap ---------------------------------------- */

/* `is-office` is added by vacatures.js after mount, so it lives here for the
 * same reason the homepage's rules do: no page ships it in markup, and
 * site.css refuses a rule it cannot find rendered. */

/* Everything that is not an office district is scenery — inert rather than
 * merely unlit. Without pointer events the module never sees a residential
 * area under the cursor, so hovering one cannot do anything at all. */
.shell .prose__map .land path { fill: #EDF3F3; pointer-events: none; }

/* Darker by default, because these five are what the page is about. */
.shell .prose__map .land path.is-office { fill: #6FA6BA; pointer-events: auto; }
.shell .prose__map .land path.is-office.csa-lit { fill: #9BC3D1; }
.shell .prose__map .land path.is-office.csa-open { fill: #0F5F78; }

.shell .prose__map .csa-credit { display: none; }


/* Where the map opens, written by qntx/crier/builder.
   --csa-frame is x y zoom in the map's own coordinates: x and y are the point
   put at the centre of the box, zoom 1 means the whole extent fits. Set it by
   dragging the map itself.

   The same arrangement sitegen/photo-frames.css has, for the same reasons —
   one file, regenerated whole, `git diff` is the record, and a media query
   bands it without the map having to know a viewport exists.

   A band is written only once someone has framed it. No mobile block means
   the phone opens where the desktop does, which is true rather than copied. */
.csa-map { --csa-frame: 0.4143 0.3837 2.18; --csa-height: 60vh; }
@media (max-width: 640px) {
  .csa-map { --csa-frame: 0.4539 0.4572 3.271; --csa-height: 100svh; }
}