/* ===============================================================
   NAV + MENU ENHANCEMENTS
   Additive only — the original nav.css and menu.css are untouched.
   Contains: the necessary interaction fixes, the mobile clock,
   and the styled service subsections inside the menu panel.
   =============================================================== */

/* ---------------------------------------------------------------
   FIX 1 — menu interactivity
   menu.css sets pointer-events:none on .menu-items so the closed
   panel cannot be clicked through. That also makes the OPEN panel
   dead. Tie it to the .open state instead.
   --------------------------------------------------------------- */
.menu-container {
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-10px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              visibility 0.35s;
  z-index: 50;
}

.menu-container.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.menu-container.open .menu-items,
.menu-container.open .menu-item,
.menu-container.open .menu-sublink,
.menu-container.open .menu-group {
  pointer-events: auto;
}

/* ---------------------------------------------------------------
   FIX 2 — the panel holds more links now, so let it scroll itself
   --------------------------------------------------------------- */
.menu-items {
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  max-height: calc(100vh - 120px);
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.25) transparent;
  padding: 0.35em;
}

.menu-items::-webkit-scrollbar { width: 6px; }
.menu-items::-webkit-scrollbar-track { background: transparent; }
.menu-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.22);
  border-radius: 3px;
}

body.menu-open { overflow: hidden; }

/* ---------------------------------------------------------------
   FIX 3 — keep the clock readable at every width
   --------------------------------------------------------------- */
nav .clock { white-space: nowrap; }

@media (max-width: 900px) {
  nav .clock { font-size: 11px; }
}
@media (max-width: 600px) {
  nav .clock { font-size: 10px; }
  nav .clock p { margin: 0; }
}
@media (max-width: 380px) {
  nav .clock { font-size: 9px; }
}

nav .logo img {
  width: 72px;
  height: auto;
}

@media (max-width: 900px) {
  nav .logo img { width: 56px; }
}
@media (max-width: 480px) {
  nav .logo img { width: 48px; }
}

/* ===============================================================
   MENU ITEMS — matching the site's gradient language
   =============================================================== */
.menu-item {
  overflow: hidden;
  transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* gradient sweep on hover, same red -> orange used site-wide */
.menu-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fc002d, #ff6b00);
  transform: translateX(-101%);
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 0;
}

.menu-item:hover::before { transform: translateX(0); }

.menu-item span {
  position: relative;
  z-index: 1;
  transition: color 0.3s ease;
}

.menu-item:hover span { color: #fff; }

/* the leading 01 / 02 number */
.menu-item span:first-child {
  font-family: var(--font-secondary);
  font-size: 11px;
  opacity: 0.45;
  letter-spacing: 0.08em;
}

.menu-item:hover span:first-child { opacity: 0.85; }

.menu-item span:last-child {
  font-family: var(--font-secondary);
  letter-spacing: 0.02em;
}

/* ===============================================================
   SERVICE SUBSECTIONS inside the panel
   =============================================================== */
.menu-group {
  position: relative;
  margin: 0.35em 0;
  padding: 0.9em 1.1em 1em;
  background: rgba(0, 0, 0, 0.035);
  border-radius: 5px;
  border-left: 2px solid transparent;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.menu-group:hover {
  background: rgba(0, 0, 0, 0.055);
  border-left-color: #ff6b00;
}

.menu-group-title {
  display: flex;
  align-items: center;
  gap: 0.7em;
  font-family: var(--font-secondary);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #8d8d8d;
  margin-bottom: 0.85em;
}

/* small gradient dash before each subsection heading */
.menu-group-title::before {
  content: "";
  width: 18px;
  height: 2px;
  flex-shrink: 0;
  background: linear-gradient(to right, #fc002d, #ff6b00);
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-group:hover .menu-group-title::before { width: 32px; }

.menu-sublinks {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.15em 1em;
}

.menu-sublink {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.5em 0.7em;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: #3a3a3a;
  text-decoration: none;
  border-radius: 4px;
  transition: color 0.25s ease, background 0.25s ease,
              transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* arrow that slides in on hover */
.menu-sublink::before {
  content: "";
  width: 0;
  height: 1px;
  background: linear-gradient(to right, #fc002d, #ff6b00);
  transition: width 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-sublink:hover {
  color: #0d0d0d;
  background: rgba(255, 255, 255, 0.75);
  transform: translateX(3px);
}

.menu-sublink:hover::before { width: 12px; }

/* ---------------------------------------------------------------
   Small screens: one column, tighter spacing
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .menu-items {
    max-height: 72vh;
    padding-bottom: 90px;
  }

  .menu-item { padding: 0.85em 1em; }

  .menu-sublinks { grid-template-columns: 1fr; }

  .menu-group { padding: 0.8em 0.9em 0.85em; }

  .menu-sublink {
    padding: 0.55em 0.6em;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .menu-items { max-height: 68vh; }
}

/* ---------------------------------------------------------------
   Menu item label sizing — compact enough for the fuller panel
   --------------------------------------------------------------- */
.menu-item span:last-child {
  font-size: 15px;
}

@media (max-width: 900px) {
  .menu-item {
    padding: 0.8em 1em;
  }
  .menu-item span:last-child {
    font-size: 15px;
  }
}