/* Static-site enhancements: menu, dropdown, FAQ and modal work without JavaScript. */

/* ---------------------------------------------------------------------------
   Mobile menu
   A checkbox (#nav-toggle) drives it, so it opens and closes with CSS alone.
   The checkbox and the panel are siblings of <header>, NOT children of it: the
   header uses backdrop-filter at the top of the page, and backdrop-filter turns
   an element into the containing block for position:fixed descendants, which
   collapsed the old in-header panel to the header's own 64px box.
   --------------------------------------------------------------------------- */
.nav-toggle-cb,
.mobile-menu { display: none; }

@media (max-width: 1023.98px) {
  /* Focusable but invisible; the hamburger <label> is its visible face. */
  .nav-toggle-cb {
    display: block; position: fixed; top: 0; right: 0; width: 1px; height: 1px;
    margin: 0; opacity: 0; pointer-events: none; appearance: none; -webkit-appearance: none;
  }

  /* Hamburger: 44px target, icons cross-fade and rotate */
  .mm-toggle {
    position: relative; display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; padding: 0; margin-right: -10px; border-radius: 10px;
    -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
  }
  .mm-toggle svg { position: absolute; display: block; transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1); }
  .mm-toggle .ch-icon-x { opacity: 0; transform: rotate(-90deg) scale(.7); }
  #nav-toggle:checked ~ header .ch-icon-menu { opacity: 0; transform: rotate(90deg) scale(.7); }
  #nav-toggle:checked ~ header .ch-icon-x { opacity: 1; transform: none; }
  #nav-toggle:focus-visible ~ header .mm-toggle { outline: 2px solid #EC1F7C; outline-offset: 2px; }

  /* Header goes solid the moment the menu opens, wherever the page is scrolled */
  #nav-toggle:checked ~ header {
    background-color: #0A0A0A !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
  }

  /* Panel */
  .mobile-menu {
    display: flex; flex-direction: column;
    position: fixed; top: 4rem; right: 0; bottom: 0; left: 0; z-index: 45;
    background: radial-gradient(90% 55% at 100% 0%, rgba(236, 31, 124, .16), rgba(236, 31, 124, 0) 70%), #0A0A0A;
    color: #fff;
    visibility: hidden; opacity: 0; transform: translateY(-10px);
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s linear .3s;
  }
  #nav-toggle:checked ~ .mobile-menu {
    visibility: visible; opacity: 1; transform: none;
    transition: opacity .25s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s;
  }
  body:has(#nav-toggle:checked), html.mm-open body { overflow: hidden; }

  .mm-nav { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .mm-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mm-inner { width: 100%; max-width: 44rem; margin: 0 auto; padding: .5rem 1.25rem 1.25rem; }

  /* Items rise in one after another on open; they reset instantly on close */
  .mm-anim { opacity: 0; transform: translateY(12px); }
  #nav-toggle:checked ~ .mobile-menu .mm-anim {
    opacity: 1; transform: none;
    transition: opacity .4s ease, transform .45s cubic-bezier(.2, .7, .2, 1), background-color .15s ease, border-color .15s ease, color .15s ease;
    transition-delay: calc(var(--i, 0) * 28ms + 60ms), calc(var(--i, 0) * 28ms + 60ms), 0s, 0s, 0s;
  }

  /* Primary links */
  .mm-link {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 3.5rem; padding: .5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-family: Manrope, Inter, system-ui, sans-serif; font-weight: 800; font-size: 1.625rem; line-height: 1.1;
    letter-spacing: -.015em; color: #fff; text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-arrow { width: 1.25rem; height: 1.25rem; flex: none; color: rgba(255, 255, 255, .35); transition: transform .2s ease, color .2s ease; }
  .mm-link:hover .mm-arrow, .mm-link:active .mm-arrow { transform: translateX(4px); color: #EC1F7C; }
  .mm-link.is-active { color: #EC1F7C; }
  .mm-link.is-active .mm-arrow { color: #EC1F7C; }

  /* Equipment */
  .mm-group { padding: 1.125rem 0 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, .08); }
  .mm-label {
    margin: 0 0 .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #EC1F7C;
  }
  .mm-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
  .mm-tile {
    display: flex; align-items: center; gap: .625rem; min-height: 3.5rem; padding: .5rem .625rem;
    border: 1px solid rgba(255, 255, 255, .09); border-radius: 14px; background-color: rgba(255, 255, 255, .04);
    color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  .mm-tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .mm-ico {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 2.25rem; height: 2.25rem; border-radius: 10px; background-color: rgba(236, 31, 124, .14); color: #EC1F7C;
  }
  .mm-ico-svg { width: 1.25rem; height: 1.25rem; }
  .mm-tile-label { min-width: 0; font-size: .875rem; font-weight: 600; line-height: 1.2; }
  .mm-tile:hover, .mm-tile:active { background-color: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .18); }
  .mm-tile.is-active { border-color: #EC1F7C; background-color: rgba(236, 31, 124, .12); }
  .mm-tile.is-active .mm-ico { background-color: #EC1F7C; color: #fff; }

  /* Hours / address / email */
  .mm-meta { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0; }
  .mm-meta li { display: flex; align-items: center; gap: .75rem; min-height: 2.25rem; font-size: .875rem; line-height: 1.35; color: rgba(255, 255, 255, .62); }
  .mm-meta a { display: inline-flex; align-items: center; min-height: 2.75rem; color: inherit; text-decoration: none; }
  .mm-meta a:hover, .mm-meta a:active { color: #fff; }
  .mm-meta-ico { width: 1.125rem; height: 1.125rem; flex: none; color: rgba(255, 255, 255, .4); }
  .mm-dot { color: rgba(255, 255, 255, .3); padding: 0 .125rem; }

  /* Pinned actions */
  .mm-actions {
    position: relative; flex: none; background-color: #0A0A0A; border-top: 1px solid rgba(255, 255, 255, .1);
    padding: .875rem 1.25rem calc(.875rem + env(safe-area-inset-bottom, 0px));
  }
  /* soft fade so content scrolling under the buttons doesn't look cut off */
  .mm-actions::before {
    content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 1.75rem; pointer-events: none;
    background: linear-gradient(to bottom, rgba(10, 10, 10, 0), #0A0A0A);
  }
  .mm-actions-inner { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; max-width: 44rem; margin: 0 auto; }
  .mm-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 3.25rem; padding: 0 .75rem; border-radius: 12px;
    font-size: .9375rem; font-weight: 700; white-space: nowrap; text-decoration: none;
    -webkit-tap-highlight-color: transparent; transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
  }
  .mm-btn:active { transform: scale(.98); }
  .mm-btn-ico { width: 1.125rem; height: 1.125rem; flex: none; }
  .mm-btn-call { color: #fff; border: 1px solid rgba(255, 255, 255, .22); background-color: rgba(255, 255, 255, .04); }
  .mm-btn-call:hover, .mm-btn-call:active { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
  .mm-btn-quote { color: #fff; background-color: #EC1F7C; text-transform: uppercase; letter-spacing: .04em; font-size: .875rem; }
  .mm-btn-quote:hover, .mm-btn-quote:active { background-color: #d01a6d; }

  .mobile-menu a:focus-visible { outline: 2px solid #EC1F7C; outline-offset: 2px; border-radius: 6px; }
}

/* Very small phones: stack the two actions, tighten the type */
@media (max-width: 359.98px) {
  .mm-inner { padding-left: 1rem; padding-right: 1rem; }
  .mm-actions { padding-left: 1rem; padding-right: 1rem; }
  .mm-actions-inner { grid-template-columns: 1fr; gap: .5rem; }
  .mm-link { font-size: 1.4375rem; }
  .mm-grid { grid-template-columns: 1fr; gap: .5rem; }
  .mm-tile { min-height: 3rem; }
}

/* Large phones / tablets: roomier, equipment in four columns */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .mm-inner { padding: 1.5rem 1.5rem 2.5rem; }
  .mm-link { font-size: 2rem; min-height: 4.5rem; }
  .mm-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
  .mm-tile { flex-direction: column; align-items: flex-start; gap: .875rem; min-height: 6.5rem; padding: 1rem; }
  .mm-tile-label { font-size: .9375rem; }
  .mm-meta li { font-size: .9375rem; }
  .mm-tile:last-child:nth-child(odd) { grid-column: span 2; }
  .mm-actions { padding-left: 1.5rem; padding-right: 1.5rem; }
}

/* Short landscape phones: keep everything reachable */
@media (max-width: 1023.98px) and (max-height: 480px) {
  .mm-link { min-height: 3rem; font-size: 1.375rem; }
  .mm-actions { padding-top: .5rem; padding-bottom: calc(.5rem + env(safe-area-inset-bottom, 0px)); }
  .mm-btn { min-height: 2.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu, .mm-anim, .mm-toggle svg, .mm-arrow, .mm-btn { transition: none !important; transform: none !important; }
  #nav-toggle:checked ~ .mobile-menu .mm-anim { transition: none !important; }
}

/* Desktop equipment dropdown (hover / keyboard focus) */
.nav-dd-panel { display: none; }
.nav-dd:hover .nav-dd-panel,
.nav-dd:focus-within .nav-dd-panel { display: block; }
.nav-dd:hover > button .lucide-chevron-down,
.nav-dd:focus-within > button .lucide-chevron-down { transform: rotate(180deg); }
/* invisible hover bridge across the mt-3 gap */
.nav-dd-panel::before { content: ""; position: absolute; top: -0.75rem; left: 0; right: 0; height: 0.75rem; }

/* FAQ accordions */
details.ch-faq summary { list-style: none; cursor: pointer; }
details.ch-faq summary::-webkit-details-marker { display: none; }
details.ch-faq[open] summary .lucide-chevron-down { transform: rotate(180deg); }

/* Enquiry modal (CSS :target fallback; .open used by JS) */
.ch-modal { display: none; }
.ch-modal:target, .ch-modal.open { display: block; }
body:has(.ch-modal:target), body.ch-modal-open { overflow: hidden; }