/* Megamenu — shared across all pages
   Triggered on hover/focus of <a class="mega-trigger" data-megamenu> in nav.
   Panel is injected into the DOM by megamenu.js and lives at body level. */

.mega-trigger { position: relative; }
.mega-trigger::after {
  content: '⌄';
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: 0;
  opacity: 0.6;
  display: inline-block;
  transform: translateY(-2px);
}

/* ── Over dropdown (injected by megamenu.js) ── */
.nav-hidden-desktop { display: none !important; }
.over-wrap { position: relative; display: inline-block; }
.over-wrap .over-trigger { display: inline-flex; align-items: baseline; }
.over-caret {
  margin-left: 4px;
  font-size: 11px;
  letter-spacing: 0;
  opacity: 0.6;
  display: inline-block;
  transform: translateY(-2px);
}
.over-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 240px;
  background: #1f1416;
  border: 1px solid rgba(245,235,230,0.12);
  border-top: 0;
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.22s cubic-bezier(.2,.7,.3,1), visibility 0.2s;
  pointer-events: none;
  z-index: 48;
  margin-top: 8px;
}
/* Invisible bridge so the mouse can travel through the visual gap
   between trigger and panel without the parent losing :hover. */
.over-wrap::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  height: 12px;
  pointer-events: auto;
}
.over-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.over-dropdown a {
  display: block;
  padding: 14px 22px;
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: #f5ebe6;
  text-decoration: none;
  border-bottom: 1px solid rgba(245,235,230,0.08);
  transition: padding-left 0.2s ease, color 0.2s ease;
  text-transform: none;
}
.over-dropdown a:last-child { border-bottom: 0; }
.over-dropdown a:hover { padding-left: 30px; color: #d97a86; }

/* On mobile drawer, the dropdown is replaced by 2 flat items, so the hidden Studio rule should NOT apply  */
@media (max-width: 1200px) {
  .nav-hidden-desktop { display: none !important; }
  /* The Over dropdown is desktop-only; in the drawer we inject 2 flat items */
  .over-wrap .over-dropdown { display: none !important; }
  .over-caret { display: none; }
}

/* ── Cart link in nav (injected by cart.js) ── */
header.nav nav .cart-link {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  position: relative;
}
header.nav nav .cart-link .cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  background: #d97a86;
  color: #1f1416;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
}
header.nav nav .cart-link .cart-count[hidden] { display: none; }
.mm-mobile-nav .cart-link { display: flex !important; align-items: baseline; gap: 10px; }
.mm-mobile-nav .cart-link .cart-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px;
  background: #d97a86; color: #1f1416;
  font-family: ui-monospace, monospace; font-size: 12px;
  letter-spacing: 0; text-transform: none; line-height: 1;
}
.mm-mobile-nav .cart-link .cart-count[hidden] { display: none; }

/* ── Desktop nav tightening — keep 5 items + brand mark on one line ── */
@media (min-width: 1201px) {
  header.nav nav { gap: 20px; flex-wrap: nowrap; }
  header.nav nav a { white-space: nowrap; letter-spacing: 0.14em; }
  .nav .mark { letter-spacing: 0.22em; }
}
/* Tight desktop (1201–1400px): drop the left tagline next to the rose mark,
   shrink the brand mark slightly so the right-side nav fits without wrap. */
@media (min-width: 1201px) and (max-width: 1400px) {
  header.nav { padding-left: 32px !important; padding-right: 32px !important; }
  .nav .left span { display: none; }
  .nav .left { gap: 0; }
  .nav .mark { font-size: 10px; letter-spacing: 0.2em; }
  header.nav nav { gap: 16px; }
  header.nav nav a { letter-spacing: 0.12em; }
}

.megamenu {
  position: fixed;
  top: 76px; /* nav height; overridden in JS for precise alignment */
  left: 0; right: 0;
  background: #1f1416;
  color: #f5ebe6;
  border-top: 1px solid rgba(245,235,230,0.12);
  border-bottom: 1px solid rgba(245,235,230,0.12);
  z-index: 49;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  pointer-events: none;
}
.megamenu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.megamenu-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  padding: 56px 56px 64px;
}

.mm-col h4 {
  font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; opacity: 0.55;
  margin: 0 0 28px; font-weight: 500;
  font-family: Inter, system-ui, sans-serif;
}

/* Left column: formats */
.mm-formats { display: flex; flex-direction: column; }
.mm-formats .mm-item {
  display: block;
  padding: 20px 0;
  border-bottom: 1px solid rgba(245,235,230,0.1);
  transition: padding-left 0.2s ease;
}
.mm-formats .mm-item:last-child { border-bottom: 0; }
.mm-formats .mm-item:hover { padding-left: 8px; }
.mm-formats .mm-item:hover .mm-title { color: #d97a86; }
.mm-formats .mm-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 28px;
  letter-spacing: -0.01em;
  line-height: 1.1;
  transition: color 0.2s ease;
}
.mm-formats .mm-kicker {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.7;
  margin-top: 6px;
  color: #d97a86;
}

/* Right column: upcoming */
.mm-upcoming { display: flex; flex-direction: column; }
.mm-list { flex: 1; }
.mm-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(245,235,230,0.1);
  transition: padding-left 0.2s ease;
}
.mm-row:last-child { border-bottom: 0; }
.mm-row:hover { padding-left: 8px; }
.mm-row:hover .mm-row-title { color: #d97a86; }
.mm-row-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 20px;
  letter-spacing: -0.005em;
  line-height: 1.2;
  transition: color 0.2s ease;
}
.mm-row-sub {
  display: block;
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  font-size: 13px;
  opacity: 0.65;
  margin-top: 2px;
  color: #d97a86;
}
.mm-row-date {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  opacity: 0.65;
  letter-spacing: 0.08em;
}

.mm-cta {
  display: inline-block;
  margin-top: 28px;
  align-self: flex-start;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #d97a86;
  border-bottom: 1px solid #d97a86;
  padding-bottom: 4px;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.mm-cta:hover { color: #f5ebe6; border-bottom-color: #f5ebe6; }

.mm-empty, .mm-loading {
  font-family: 'DM Serif Display', Georgia, serif;
  font-style: italic;
  opacity: 0.65;
  font-size: 16px;
  padding: 12px 0;
}

/* ── Hamburger button (mobile only) ── */
.mm-hamburger {
  display: none;
  position: relative;
  width: 32px; height: 22px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
  margin-left: auto;
}
.mm-hamburger span {
  display: block;
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: #f5ebe6;
  transition: transform 0.32s cubic-bezier(.2,.7,.3,1), top 0.32s cubic-bezier(.2,.7,.3,1), opacity 0.18s ease;
}
.mm-hamburger span:nth-child(1) { top: 3px; }
.mm-hamburger span:nth-child(2) { top: 10px; }
.mm-hamburger span:nth-child(3) { top: 17px; }
.mm-hamburger.active span:nth-child(1) { top: 10px; transform: rotate(45deg); }
.mm-hamburger.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mm-hamburger.active span:nth-child(3) { top: 10px; transform: rotate(-45deg); }

/* Mobile-only block injected at top of megamenu panel */
.mm-mobile-nav { display: none; }

/* ── Mobile: hamburger + drawer (breakpoint matches per-page nav stacking) ── */
@media (max-width: 1200px) {
  /* Override per-page nav: 2-col [logo] [hamburger], no stacking */
  header.nav {
    grid-template-columns: 1fr auto !important;
    gap: 14px !important;
    text-align: left !important;
    padding: 18px 24px !important;
  }
  header.nav nav { display: none; }
  .mm-hamburger { display: block; }
  .nav .left {
    /* On mobile the logo is the brand mark; hide the rose-icon tagline.
       !important beats the per-page inline <style> that loads after this file. */
    display: none !important;
  }
  .nav .mark {
    display: block !important;
    grid-column: 1;
    text-align: left;
  }
  .nav .mark img { margin: 0 !important; height: 26px !important; }

  /* Drawer: subtle slide-down from top of viewport */
  .megamenu {
    top: 0; bottom: auto;
    max-height: 100vh; height: auto;
    overflow-y: auto;
    transform: translateY(-12px);
    transition: opacity 0.28s ease, transform 0.32s cubic-bezier(.2,.7,.3,1), visibility 0.28s;
    padding-top: 64px; /* room for sticky header above */
  }
  .megamenu.open { transform: translateY(0); }

  .megamenu-inner { grid-template-columns: 1fr; gap: 32px; padding: 20px 24px 48px; }
  /* Mobile drawer shows only the Navigeer list; hide the Formats + Komende workshops columns */
  .megamenu-inner .mm-formats,
  .megamenu-inner .mm-upcoming { display: none !important; }
  .mm-formats .mm-title { font-size: 22px; }
  .mm-row-title { font-size: 18px; }

  /* Mobile nav list at top of drawer (cloned from header) */
  .mm-mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 32px;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(245,235,230,0.16);
  }
  .mm-mobile-nav h4 {
    font-size: 10px; letter-spacing: 0.28em;
    text-transform: uppercase; opacity: 0.55;
    margin: 0 0 16px; font-weight: 500;
    font-family: Inter, system-ui, sans-serif;
  }
  .mm-mobile-nav a {
    display: block;
    padding: 14px 0;
    border-bottom: 1px solid rgba(245,235,230,0.08);
    color: #f5ebe6;
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: 22px;
    line-height: 1.15;
    letter-spacing: -0.005em;
    transition: color 0.2s ease, padding-left 0.2s ease;
    text-decoration: none;
  }
  .mm-mobile-nav a:last-child { border-bottom: 0; }
  .mm-mobile-nav a:hover, .mm-mobile-nav a.current { color: #d97a86; padding-left: 6px; }

  /* Contact CTA button pinned to the bottom of the drawer nav */
  .mm-mobile-nav a.mm-mobile-cta {
    margin-top: 28px;
    padding: 18px 24px;
    background: #d97a86;
    color: #1f1416;
    font-family: Inter, system-ui, sans-serif;
    font-size: 12px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 0;
    border-radius: 2px;
    transition: background 0.2s ease;
  }
  .mm-mobile-nav a.mm-mobile-cta:hover,
  .mm-mobile-nav a.mm-mobile-cta.current {
    background: #f5ebe6;
    color: #1f1416;
    padding-left: 24px;
  }
}

/* Tiny screens — tighten the drawer + logo line */
@media (max-width: 540px) {
  header.nav { padding: 14px 18px !important; }
  .nav .left span { font-size: 10px; letter-spacing: 0.16em; }
  .mm-formats .mm-title { font-size: 20px; }
  .mm-row-title { font-size: 17px; }
}

/* ── Audit fixes (2026-07-28) ─────────────────────────────────── */
/* 11. Rose italics fail contrast on light paper (2.48:1). Darker rose on light,
   original rose restored on dark sections. !important needed: per-page inline
   <style> loads after this file and would win otherwise. */
.em { color: #b4535f !important; }
.hero .em, .offers .em, .invite .em, .svc.dark .em,
footer .em, header.nav .em { color: #d97a86 !important; }

/* 12. Skip-link + visible keyboard focus */
.skip-link { position: absolute; left: -9999px; z-index: 10001; background: #1f1416;
  color: #f5ebe6; padding: 12px 20px; font: 500 12px/1 Inter, system-ui, sans-serif;
  letter-spacing: 0.12em; text-transform: uppercase; }
.skip-link:focus { left: 12px; top: 12px; }
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid #d97a86 !important; outline-offset: 3px !important;
}