/* Fluid layout overrides — make the site fill the viewport on every screen.
   The original site caps every page section at 1280px (max-w-7xl) and centers
   it, which looks like a small fixed container on wider monitors.
   These rules widen the section shells to the full viewport width while
   leaving inner text blocks (max-w-3xl and smaller) at a readable width. */

.mx-auto.max-w-7xl,
.mx-auto.max-w-5xl {
  width: 100%;
  max-width: 100% !important;
}

/* Guard against any horizontal overflow on small screens */
html,
body {
  overflow-x: hidden;
  overflow-x: clip;
}

/* A little extra breathing room on very wide monitors */
@media (min-width: 1920px) {
  .mx-auto.max-w-7xl,
  .mx-auto.max-w-5xl {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

/* Comfortable padding on narrow phones */
@media (max-width: 480px) {
  .mx-auto.max-w-7xl,
  .mx-auto.max-w-5xl {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ── Header: the desktop bar needs more room than lg gives it ────────────────
   The site's header switches from its drawer to the inline bar at the lg
   breakpoint (1024px). With the nine nav items this site now has, that bar no
   longer fits: measured at 1024px it wraps "Our Work", "Case Studies" and the
   CTA onto two lines inside a 64px-tall row, and at 1024-1279 adding the ninth
   item overflows the row outright (the CTA is pushed past the header edge and
   clipped by the `overflow-x: clip` above).

   Nine items plus the logo need roughly 1120px of the ~1230px the row has at
   xl, so the bar only fits from xl up. Below that the drawer covers the range,
   which is the same control the site already uses on phones - so the nav stays
   complete and reachable rather than squeezed.

   This file is loaded by the app (index.html) and by every generated static
   page, and both headers are structurally identical, so one rule keeps them in
   step. The selectors are the ones the two headers actually use:
     - `header nav`                    the inline bar, in both
     - `header button.lg:hidden`       the app's drawer toggle
     - `header details.tn-mnav`        the static pages' drawer toggle
     - `header div.lg:hidden.border-t` the app's drawer panel, rendered only
                                       while the menu is open
   work.css hides .tn-mnav at min-width:1024 with a non-important rule, so the
   !important here is what reasserts it in this range. */
@media (min-width: 1024px) and (max-width: 1279.98px) {
  header nav {
    display: none !important;
  }

  header button.lg\:hidden {
    display: block !important;
  }

  header details.tn-mnav {
    display: block !important;
  }

  header div.lg\:hidden.border-t {
    display: block !important;
  }
}