/* ============================================
 * layout.css — page-level layout primitives
 *
 * Owns: section padding, container width cap,
 * page-header (navbar overlaying hero) glue.
 *
 * Every full-width module's outer element gets
 * `.tlm-section` (horizontal padding + bg surface).
 * Every full-width module's `__inner` element gets
 * `.tlm-container` (max-width cap + centring).
 * Modules then only own their unique inner structure.
 *
 * Does NOT own: vertical padding (per-module — kept in
 * the module's CSS so each section can dictate its own
 * top/bottom rhythm).
 * ============================================ */

/* ----- Section: horizontal padding + full-bleed surface ----- */

.tlm-section {
  width: 100%;
  padding-inline: var(--space-section-x-mobile);
}

@media (min-width: 768px) {
  .tlm-section {
    padding-inline: var(--space-4xl);
  }
}

/* ----- Container: max-width cap + centring ----- */

.tlm-container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
}

/* ----- Page header: navbar overlays hero ----- */

/* The navbar sits absolutely above the hero so both share the navy
   background with no cream/white seam between them. The hero
   compensates with extra top padding so its content clears the
   overlaid navbar at every breakpoint.

   Mobile navbar ~131px (32 top + 66 logo + 32 bottom + 1 border).
   Desktop navbar ~129px (32 top + 64 logo + 32 bottom + 1 border). */

.tlm-page-header {
  position: relative;
}

/* Navbar is fixed (not absolute) so it stays at the top of the
   viewport on scroll. Initial state is transparent over the hero;
   a JS-applied `--solid` class swaps it to a cream surface once the
   hero scrolls past. See preview.html for the IntersectionObserver. */
.tlm-page-header > .tlm-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* z-index 50 — must be above the service-page sub-nav (z 40) so the
     mega menu (positioned inside the navbar's stacking context) renders
     on top of the sub-nav when both are visible. Mobile drawer (z 100)
     still sits above this. */
  z-index: 50;
}

.tlm-page-header > .tlm-hero {
  padding-top: 180px;
}

@media (min-width: 1024px) {
  .tlm-page-header > .tlm-hero {
    padding-top: 220px;
  }
}