/* ==========================================================================
   Custom overrides — hand-maintained, NOT generated by Webflow.
   Loaded after marina-port-vell.webflow.css so these rules win.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Nav: collapse to burger earlier (1300px instead of Webflow's 991px).

   Webflow's nav JS decides "collapsed" purely from the burger button's
   computed display (r.collapsed = "none" !== r.button.css("display")), and
   re-checks it on resize — so showing the button via CSS at a wider width is
   all that's needed for the toggle/overlay to work. We mirror the toggles
   from webflow.css and the open-menu overlay styling from
   marina-port-vell.webflow.css (originally gated at max-width: 991px) up to
   1300px — including the .dropdown--items--wrapper / .dropdown--item reflow so
   the mega-menu lays out 3-up in the accordion. The <=991 range overlaps the
   originals harmlessly (identical values); the real work happens in the
   992–1300 gap.
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1300px) {
  /* Webflow collapse toggles (from webflow.css @ 991) */
  .w-nav[data-collapse='medium'] .w-nav-menu {
    display: none;
  }
  .w-nav[data-collapse='medium'] .w-nav-button {
    display: block;
  }

  /* Project overlay styling (from marina-port-vell.webflow.css @ 991) */
  .navbar {
    padding-top: 0;
    padding-bottom: 0;
  }

  .nav-menu {
    width: 100vw;
    padding-top: var(--page-sizes--page-padding);
    padding-right: var(--page-sizes--page-padding);
    padding-left: var(--page-sizes--page-padding);
    background-color: var(--colours--navy-tint-heavy);
    height: calc(100vh - var(--nav--nav-height));
    min-height: calc(100vh - var(--nav--nav-height));
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    position: absolute;
    overflow: auto;
  }

  .navbar--divider {
    display: none;
  }

  .brand {
    justify-content: center;
    align-items: center;
    display: flex;
  }

  .menu-button {
    height: 100%;
    margin-right: -20px;
    padding: 0 20px;
  }

  .menu-button.w--open {
    background-color: var(--transparent);
  }

  .burger {
    height: 100%;
  }

  .burger--line {
    background-color: var(--colours--white);
    height: 1px;
  }

  .dropdown-list {
    display: none;
  }

  .dropdown-list.w--open {
    width: auto;
    margin-top: 0;
    position: relative;
    top: 0%;
  }

  .nav-link {
    border-top: 1px solid var(--colours--white-lines);
    letter-spacing: 0;
    text-transform: capitalize;
    border-bottom: 1px #ffffff4d;
    height: auto;
    margin-bottom: 10px;
    padding: 10px 0;
    font-size: 25px;
    line-height: 27px;
    position: static;
  }

  .nav-link:hover {
    color: #fff;
    border-bottom-style: none;
  }

  .nav-link.w--open {
    color: #fff;
  }

  .nav-dropdown {
    width: 100%;
    height: auto;
    min-height: auto;
    margin-top: 0;
    margin-bottom: 0;
    position: relative;
  }

  .dropdown-list-blur {
    background-color: #fff0;
    border-top-style: none;
    margin-top: 0;
    display: flex;
  }

  .dropdown--wrapper {
    padding-top: var(--spacers--tiny);
    grid-column-gap: var(--spacers--small);
    grid-row-gap: var(--spacers--small);
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .dropdown--header--wrapper {
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    display: flex;
  }

  .dropdown--items--wrapper {
    grid-column-gap: 2%;
    grid-row-gap: 2%;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .dropdown--item {
    width: 32%;
    max-width: none;
  }

  .dropdown--whole--wrapper {
    background-color: #00254200;
    width: 100%;
  }

  .nav-text {
    margin-bottom: 0;
  }

  .dropdown--about--link {
    grid-column-gap: var(--spacers--x-small);
    grid-row-gap: var(--spacers--x-small);
    min-width: 110px;
    font-family: Reserves Vanitas, Arial, sans-serif;
    font-size: var(--font-sizes--h5);
    letter-spacing: 0;
    text-transform: none;
    border-top-style: none;
    margin-top: 0;
    padding-top: 0;
    font-weight: 400;
  }

  .dropdown--about--link:hover {
    border-top-style: none;
  }

  .nav-dropdown--container {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }

  .dropdown--header {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Nav mega-menu: cross-fade panels to kill the open/close flash (desktop).

   Each nav item is an independent Webflow w-dropdown that toggles its panel
   with display:none <-> flex (instant) on .w--open. The dark overlay you see
   is the per-panel navy bg (.dropdown--whole--wrapper). Sweeping from one item
   to the next leaves a 1-frame gap where the old panel is already gone and the
   new one hasn't opened — so the navy tint vanishes and the bright page flashes
   through.

   Fix without JS or markup: keep every panel rendered and drive visibility with
   opacity + a transition instead of display. The outgoing panel is still mostly
   opaque when the incoming one fades in, so the navy never fully clears — no
   flash. Positional props (margin-top/position) live on the base rule, not just
   .w--open, so losing .w--open mid-fade-out doesn't shift the panel upward.

   Scoped to >=1301px so the <=1300px burger accordion (which legitimately uses
   display:none) is untouched — this must stay one pixel above the burger
   block's max-width:1300px, or display:flex !important leaks into the burger
   range and breaks the accordion.
   -------------------------------------------------------------------------- */
@media screen and (min-width: 1301px) {
  .dropdown-list {
    display: flex !important;
    margin-top: var(--nav--nav-height);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
  }

  .dropdown-list.w--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .25s ease;
  }
}

/* --------------------------------------------------------------------------
   Header load: kill the 1-frame full-white flash mid-animation.

   On page load the IX3 header animation scales/translates the cover image
   (._100vh--header-bg--image / .cover-image.parallax-*). The blurred layers
   sitting OVER the header — .navbar, .nav-bg--blur (both backdrop-filter:
   blur(20px)) and the side .sticky--icon — re-snapshot their backdrop every
   frame as that image moves. Chrome has a known bug where a backdrop-filter
   layer composites against an empty (white) buffer for one frame while the
   element behind it is being transformed — so the whole header blinks white.

   Fix: pin each backdrop-filtered layer onto its own persistent GPU layer
   (translateZ(0) + hidden backface) so its backdrop snapshot stays valid and
   never tears to white. Promoting the animating cover image too keeps the two
   on stable, independent layers. No markup/JS change; purely compositing hints.

   Note: translateZ on .navbar makes it the containing block for any
   position:fixed descendants — there are none here (dropdown panels are
   absolute), so nav/dropdown positioning is unaffected.
   -------------------------------------------------------------------------- */
.navbar,
.nav-bg--blur,
.sticky--icon {
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

._100vh--header-bg--image,
.cover-image.header {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* --------------------------------------------------------------------------
   Active nav dropdown — highlights the parent dropdown when the current page
   is that parent or one of its child_pages (see partials/_navigation).
   -------------------------------------------------------------------------- */
.nav-dropdown.current .nav-link {
  border-bottom-color: #ffffff4d;
}

/* --------------------------------------------------------------------------
   Interactive map: pins/hotspots + info-panel transition.

   Pins are appended into #panzoom-element (see _map.antlers.html script) so
   they pan/zoom with the map. The layer mirrors .map--image's scale(1.15) and
   centre origin so pin %-coords align with the artwork. The .map--pin--marker
   is counter-scaled in JS (transform: scale(1/zoom)) to stay a constant
   on-screen size — so its transform is owned by JS; styling lives on the pin.
   -------------------------------------------------------------------------- */
.map--pin--layer {
  position: absolute;
  inset: 0%;
  z-index: 4;
  transform: scale(1.15);
  transform-origin: center;
  pointer-events: none; /* layer is inert; only the pins capture clicks */
}

.map--pin {
  position: absolute;
  transform: translate(-50%, -50%); /* left/top = marker centre */
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  pointer-events: auto;
}

.map--pin--marker {
  display: block;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px; /* centre the dot on the pin's anchor point */
  border-radius: 50%;
  background-color: var(--colours--highlight);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--colours--highlight) 35%, transparent),
              0 2px 6px rgba(0, 0, 0, .35);
  transition: box-shadow .2s ease;
}

.map--pin:hover .map--pin--marker,
.map--pin:focus-visible .map--pin--marker {
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--colours--highlight) 30%, transparent),
              0 2px 8px rgba(0, 0, 0, .4);
}

/* Pulsing halo to draw the eye to clickable points. */
.map--pin--marker::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 55%, transparent);
  animation: map-pin-pulse 2.2s ease-out infinite;
}

@keyframes map-pin-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 55%, transparent); }
  70%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--colours--highlight) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--colours--highlight) 0%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  .map--pin--marker::after { animation: none; }
}

/* Info panel is opened/closed by setting its inline transform in JS; give it a
   smooth slide. (We drive the info panel ourselves rather than via Webflow IX3
   so per-pin content can be populated on open.) */
.map--information--panel {
  transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}