/* Navbar and subnav styles migrated from views/partials/navbar.ejs */

/* Grid button */
.grid-cta .action-link { color: #fff; display:inline-flex; align-items:center; padding:6px; }
.grid-cta svg { display:block; width:36px; height:36px; }

/* Language toggle: show short locale codes (EN/NL) in Stolzl Display */
.lang-switch .action-link {
  font-family: 'Stolzl Display', "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Place subnav inside header and position relative to it */
.site-header { position: relative; }


/* top-of-viewport fog (overlay) */
.site-header::before {
  content: ""; 
  left: 0;
  right: 0;
  pointer-events: none; 
  position: fixed;
  top: 0;
  height: var(--fog-height, clamp(56px, 8vh, 120px));
  background: linear-gradient(
    to bottom,
    var(--bg, #212529) 0%,
    transparent 100%
  );
  z-index: 10; /* sit behind header elements (header sticky z-index: 1030) */
  transform: translateZ(0);
}

/* hide header overlay fog while subnav/menu is open to avoid covering the panel */
body.subnav-open .site-header::before { display: none; }

.site-header { pointer-events: none; }
.header-inner a,
.header-inner button { pointer-events: auto; }

.header-inner { margin-left: 1.5rem; margin-right: 1.5rem; }

/* Ensure sticky-top works if Bootstrap is present; keep header above content
  Use fixed position so the header overlays page content instead of pushing it down. */
.site-header.sticky-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1030; }

/* Ensure fragment targets (anchors) are visible below the sticky header.
  Uses a CSS variable --site-header-offset set by JS to match header height. */
[id] { scroll-margin-top: var(--site-header-offset, 80px); }

/* Full-screen overlay that slides down from the top */
.subnav-container { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--bg); z-index: 50; overflow-y: auto; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity 320ms ease, transform 320ms ease; }
.subnav-container.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.subnav-container .container { padding-top: 70px; max-width: 1600px; margin: 0 auto; }

/* default panels */
.subnav-panel { display: none; gap: 48px; justify-content: center; padding: 18px 0; }
.subnav-panel[data-name="master"]:not(.master-grid) { flex-wrap: wrap; }
.subnav-panel[data-name="master"]:not(.master-grid) .subnav-item { width: 200px; height: 140px; margin: 12px; }
.subnav-panel.active { display: flex; }

.subnav-item { display: inline-flex; background: #000; align-items: center; justify-content: center; text-decoration: none; font-weight:700; text-transform:none; box-shadow: var(--shadow-1); transition: box-shadow 180ms ease, transform 180ms ease; }

@media (max-width: 768px) {
  .header-inner { margin-left: 0.25rem; margin-right: 0.25rem; }
  .subnav-panel { flex-direction: column; align-items: stretch; gap: 12px; }
  .subnav-item { width: 100%; height: 88px; }
}

/* Master 3x3 grid for subnav master panel */
.subnav-panel.master-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 160px);
  /* let rows size from content / aspect-ratio instead of a fixed height */
  grid-auto-rows: auto;
  /* projection distance used by the black underlayer; adjust to taste */
  --proj: 40px;
  /* ensure the horizontal and vertical gaps are identical */
  column-gap: calc(var(--proj) * 1);
  row-gap: calc(var(--proj) * 1);
  padding: 18px 0;
  /* 3 × 165px tiles + 2 × 40px gaps */
  max-width: 575px;
  margin: 0 auto;
  position: relative;
  overflow: visible; /* allow underlayers to extend outside each tile */
  z-index: 2;
}
/* tiles styling */
.subnav-panel.master-grid .subnav-tile,
.subnav-panel.master-grid .subnav-item {
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  border-radius: var(--border-radius);
  box-sizing: border-box;
  padding: 0;
  font-weight:600;
  font-size:16px;
  /* make each tile keep a square aspect ratio (width determined by column width) */
  aspect-ratio: 1 / 1;
  height: auto;
  position: relative;
  z-index: 2;
  overflow: visible; /* ensure pseudo-element can be seen outside tile */
}


/* Square shadow — same size as tile; top-right corner anchored at tile center (shadow extends left & down) */
.subnav-panel.master-grid .subnav-item::before {
  content: "";
  position: absolute;
  top: 25%;   /* top edge at vertical center of tile */
  right: 25%; /* right edge at horizontal center of tile */
  width: 100%;
  height: 100%;
  /* subtle dark shadow by default; becomes a configurable primary-tinted coat on hover */
  background: rgba(0,0,0,0.35);
  pointer-events: none;
  z-index: -1;
  border-radius: var(--border-radius);
  transition: background 160ms ease;
}

/* subtle primary-tinted overlay on the shadow when hovering the tile */
.subnav-panel.master-grid .subnav-item:hover::before {
  background: rgba(var(--primary-rgb), var(--tile-overlay-alpha, 0.12));
}

/* Force tile color to primary by default; can be overridden with --tile-color */
.subnav-panel.master-grid {
  --tile-overlay-alpha: 0.12;
}

/* the visible colored tile face sits above the black polygon */
.subnav-panel.master-grid .subnav-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--muted);
  z-index: 2;
  pointer-events: none;
  border-radius: var(--border-radius);
  transition: background 160ms ease;
}

/* When hovering the tile, change its face to primary */
.subnav-panel.master-grid .subnav-item:hover::after {
  background: var(--primary);
}

/* subtle lift on hover for master-grid tiles */
.subnav-panel.master-grid .subnav-item:hover {
  box-shadow: var(--shadow-3);
  transform: translateY(-6px);
}

/* label explicitly on top */
.subnav-panel.master-grid .subnav-item .tile-label {
  position: relative;
  z-index: 3;
  display: inline-block;
  font-family: 'Stolzl Display', "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  user-select: none;
}

/* Filtered views: show only relevant tiles when a filter class is applied */
/* Removed filter-about/filter-info rules (about/info removed from navbar) */




/* responsive fallback for smaller screens */
@media (max-width: 768px) {
  .subnav-panel.master-grid { 
    grid-template-columns: repeat(2, 1fr); 
    grid-auto-rows: 80px;
    max-width: 400px;
  }
}

@media (max-width: 480px) {
  .subnav-panel.master-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    /* allow the grid to expand to most of the viewport so tiles get wider */
    width: min(280px, 40vw);
    max-width: none;
    box-sizing: border-box;
  }

  /* give tiles internal padding and ensure labels wrap/read comfortably */
  .subnav-panel.master-grid .subnav-item {
    padding: 10px 8px;
    box-sizing: border-box;
    /* keep square appearance on wider phones but allow breathing room */
    aspect-ratio: 1 / 1;
    min-height: 120px;
  }

  .subnav-panel.master-grid .subnav-item .tile-label {
    display: block;
    padding: 0 6px;
    text-align: center;
    white-space: normal;
    word-break: break-word;
    font-size: clamp(14px, 4vw, 18px);
    line-height: 1.15;
  }
}

/* ── Grid icon → X morph ──────────────────────────────────────────── */
/* All 9 tiles get a shared smooth transition */
.grid-toggle svg rect {
  transition: transform 250ms ease, opacity 220ms ease;
  transform-box: fill-box;
  transform-origin: center;
}

/* Off-diagonal tiles (positions 2, 4, 6, 8) slide toward the centre tile
   and shrink away. 140% ≈ 7/5 of each tile's own size, which is exactly
   the SVG-unit distance from edge-centre to grid-centre. */
.grid-toggle.is-open svg rect:nth-child(2) { /* top-center  → slides down  */
  transform: translateY(140%) scale(0.2);
  opacity: 0;
}
.grid-toggle.is-open svg rect:nth-child(4) { /* left-center → slides right */
  transform: translateX(140%) scale(0.2);
  opacity: 0;
  transition-delay: 30ms;
}
.grid-toggle.is-open svg rect:nth-child(6) { /* right-center → slides left */
  transform: translateX(-140%) scale(0.2);
  opacity: 0;
  transition-delay: 30ms;
}
.grid-toggle.is-open svg rect:nth-child(8) { /* bottom-center → slides up  */
  transform: translateY(-140%) scale(0.2);
  opacity: 0;
  transition-delay: 60ms;
}

/* X-arm tiles (corners + centre): morph into diagonal bars.
   scaleX controls arm length; scaleY controls thickness.
   Transforms are applied right-to-left: first scaleX → scaleY → rotate. */
.grid-toggle.is-open svg rect:nth-child(1) { /* top-left    → \ arm */
  transform: rotate(45deg) scaleY(0.30) scaleX(1.8);
}
.grid-toggle.is-open svg rect:nth-child(3) { /* top-right   → / arm */
  transform: rotate(-45deg) scaleY(0.30) scaleX(1.8);
}
.grid-toggle.is-open svg rect:nth-child(5) { /* centre      → crosspoint */
  transform: rotate(45deg) scaleY(0.30) scaleX(1.2);
}
.grid-toggle.is-open svg rect:nth-child(7) { /* bottom-left → / arm */
  transform: rotate(-45deg) scaleY(0.30) scaleX(1.8);
}
.grid-toggle.is-open svg rect:nth-child(9) { /* bottom-right → \ arm */
  transform: rotate(45deg) scaleY(0.30) scaleX(1.8);
}

/* Hide contact widget while subnav overlay is open */
body.subnav-open .cw-root {
  display: none !important;
  pointer-events: none !important;
}