/* ============================================
 * service-page-subnav.css — desktop-only hover-reveal sub-nav
 *
 * Sits as a fixed bar directly under the main navbar (top: 128px).
 * Hidden by default — slides down when the user hovers the main
 * navbar OR the sub-nav itself. Slides back up on mouse-out.
 *
 * Active-section highlighting handled by an inline script in
 * preview-website.html using IntersectionObserver — adds
 * .is-active to whichever link's section is in view. Active
 * state is reflected immediately when the bar is revealed.
 *
 * Mobile + tablet: hidden entirely (display: none).
 * ============================================ */

.tlm-service-page-subnav {
  display: none;                          /* mobile + tablet: hidden */
}

@media (min-width: 1024px) {
  .tlm-service-page-subnav {
    display: block;
    position: fixed;
    top: 97px;                            /* docks flush under the COMPACT navbar
                                             (97px when scrolled — the only state
                                             the sub-nav is shown in) */
    left: 0;
    right: 0;
    z-index: 40;                          /* below the main navbar (which is ~100) */
    /* Match the page-wide section padding so the sub-nav's content
       edges line up with the navbar items above and the section
       content below. The navy background still goes edge-to-edge
       because the padding sits INSIDE the fixed bar. */
    padding-inline: var(--space-4xl);     /* 80 — matches .tlm-section desktop */
    background-color: var(--color-navy);
    /* Hidden by default — tucked behind/under the navbar.
       Slides into view when .is-open lands (toggled in JS on
       navbar hover). */
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition:
      transform 250ms ease,
      opacity 200ms ease;
  }

  .tlm-service-page-subnav.is-open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .tlm-service-page-subnav__inner {
    display: flex;
    justify-content: space-between;       /* links left, close right */
    align-items: center;
  }

  .tlm-service-page-subnav__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: var(--space-xl);                 /* 48 between links */
  }

  .tlm-service-page-subnav__link {
    display: inline-block;
    padding: var(--space-md) 0;           /* 24 top + bottom */
    font-family: var(--font-sans);
    font-size: var(--text-sm);            /* 14 — tracked caps read smaller */
    font-weight: var(--weight-bold);
    line-height: var(--leading-normal);
    letter-spacing: var(--tracking-button);
    text-transform: uppercase;
    color: var(--color-text-on-dark);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: opacity 200ms ease, border-color 200ms ease;
  }

  .tlm-service-page-subnav__link:hover {
    opacity: 0.7;
  }

  .tlm-service-page-subnav__link.is-active {
    border-bottom-color: var(--color-text-on-dark);
  }

  .tlm-service-page-subnav__link:focus-visible {
    outline: 2px solid var(--color-text-on-dark);
    outline-offset: 2px;
  }

  /* Close button — dismisses the sub-nav for the rest of the page load. */
  .tlm-service-page-subnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--color-text-on-dark);
    cursor: pointer;
    border-radius: var(--radius-pill);
    transition: background-color 200ms ease, opacity 200ms ease;
  }

  .tlm-service-page-subnav__close:hover {
    background-color: rgba(255, 255, 255, 0.12);
  }

  .tlm-service-page-subnav__close:focus-visible {
    outline: 2px solid var(--color-text-on-dark);
    outline-offset: 2px;
  }

  /* Dismissed: hide for the rest of the page load regardless of scroll
     position. JS adds .is-dismissed on close click. */
  .tlm-service-page-subnav.is-dismissed,
  .tlm-service-page-subnav.is-dismissed.is-open {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }

  /* Give anchored sections enough room at the top so the section
     heading doesn't hide behind the navbar after a click.
     Sub-nav is hover-reveal so it's not always taking space — just
     clear the compact 97px scrolled navbar + 24px breathing. */
  #why,
  #inclusions,
  #process,
  #packages,
  #engagements,
  #portfolio,
  #faq {
    scroll-margin-top: 121px;
  }
}