/* ============================================================
   SUB-NAV.CSS – Reusable page sub-navigation component
   Shared by About, Services, Itinerary, and any inner page
   with a sticky section nav.

   Structure:
     <nav class="page-subnav" id="page-subnav">
       <div class="container">
         <a class="page-subnav-item" data-target="section-id">Label</a>
       </div>
     </nav>

   Uses .container for horizontal alignment that matches all
   other page sections at every responsive breakpoint.
   ============================================================ */

/* ── NAV WRAPPER ────────────────────────────────────────────── */
.page-subnav {
  height: 6rem;              /* 60px */
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 8rem;                    /* below 80px fixed header */
  z-index: 90;
  background: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.page-subnav::-webkit-scrollbar {
  display: none;
}

/* ── INNER CONTAINER — provides aligned padding ─────────────── */
.page-subnav .container {
  display: flex;
  align-items: stretch;
  height: 100%;
  /* Allow wider-than-viewport layout for horizontal scroll */
 
  min-width: -webkit-max-content;
  min-width: max-content;
}

/* ── NAV ITEM ───────────────────────────────────────────────── */
.page-subnav-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3.4rem;          /* 34px */
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 0.2rem solid transparent;
  margin-bottom: -1px;          /* overlap nav border-bottom */
  transition: color 0.25s ease, border-color 0.25s ease;
  cursor: pointer;
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: inherit;
  line-height: 1;
}

.page-subnav-item:hover {
  color: #e60e19;
}

.page-subnav-item.active {
  color: #e60e19;
  border-bottom-color: #e60e19;
}

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

@media (max-width: 1024px) {
  .page-subnav {
    top: 7rem;              /* 70px — compact header height */
  }
}

@media (max-width: 768px) {
  .page-subnav {
    top: 7rem;
  }

  .page-subnav-item {
    padding: 0 1.6rem;
    font-size: 1.4rem;
  }
}

@media (max-width: 480px) {
  .page-subnav-item {
    padding: 0 1.2rem;
    font-size: 1.3rem;
  }
}