/* ================================================================
   TaskInSync — Responsive Base  (marketing / public pages)
   ================================================================

   WHY THIS FILE EXISTS
   --------------------
   The public pages each carry their own self-contained inline <style>
   block, and the nav CSS in particular is copy-pasted across ~34 of
   them. That duplication is how a single layout assumption became a
   site-wide rendering bug:

     the desktop nav needed ~1108 CSS px of horizontal room, but it
     only collapsed to the burger at 900px (index) / 768–820px (the
     rest). Between the collapse threshold and the true requirement
     sat a 200–340px DEAD ZONE where the nav overflowed its own box,
     flex-shrink crushed "Pricing" and "Sign up" to 0px wide, and the
     document grew a horizontal scrollbar.

   That dead zone is why the same laptop model rendered differently on
   different machines. Windows display scaling divides the CSS
   viewport, and the common configurations land right inside it:

     1366x768 @125% -> 1093 css px    (broken)
     1440x900 @150% ->  960 css px    (broken, 121px overflow)
     1536x864 @150% -> 1024 css px    (broken)
     1600x900 @150% -> 1067 css px    (broken)
     1920x1080@175% -> 1097 css px    (broken)
     1536x864 @125% -> 1229 css px    (fine)

   Nothing here is tuned to a resolution. The strategy is:

     1. Make each component's INTRINSIC width requirement fluid, so it
        shrinks smoothly instead of hitting a cliff.
     2. Put the remaining breakpoint safely ABOVE that requirement, so
        no dead zone can exist between the two.
     3. Prefer intrinsic layout (auto-fit / minmax / min()) over
        breakpoints wherever a breakpoint was only guessing at content
        width.

   LOAD ORDER
   ----------
   Linked as the LAST element in <head>. The pages' inline <style>
   blocks are in <head> too, so equal-specificity rules here must come
   after them to win. This is deliberate: correcting the shared layer
   in one file is far safer than hand-editing 34 near-identical copies,
   and it keeps the fix from drifting apart again.
   ================================================================ */


/* ── 1. Global overflow guard ──────────────────────────────────────
   A guard already existed but only inside a phone-width media query
   in mobile.css, so every desktop dead-zone overflow was unguarded.
   This is the safety net, not the fix — the real fixes are below.
   `overflow-x: clip` doesn't create a scroll container (so it can't
   break position:sticky on the nav) and is what we want here;
   `hidden` is the fallback for older engines. */
html { overflow-x: hidden; }
@supports (overflow-x: clip) { html { overflow-x: clip; } }
body { overflow-x: clip; max-width: 100%; }


/* ── 2. Media never exceeds its box ────────────────────────────────
   Deliberately ONLY max-width. The usual `img { height: auto }` half
   of the classic reset is omitted on purpose: an attribute selector
   like `img[width][height]` (0,2,1) outranks component rules such as
   `.nav-logo img` (0,1,1), so a blanket height rule silently overrides
   any component that sizes an image by height — it collapsed the nav
   logo to 0x0 here. Components own their own height.

   Nothing is lost by omitting it: browsers already derive
   `aspect-ratio` from the width/height attributes, so an image whose
   height is auto still keeps its ratio when max-width constrains it. */
img, svg, video, canvas {
  max-width: 100%;
}


/* ── 3. Grid/flex children may shrink below their content ──────────
   Grid and flex items default to min-width:auto, which means they
   refuse to shrink past their content and punch out of the layout.
   This is the single most common cause of the overflow seen above. */
.hero > *,
.hero-ctas > *,
.features-grid > *,
.features-lead > *,
.features-more > *,
.pricing-grid > *,
.trust-inner > *,
.secb-grid > *,
.preview-body > *,
.preview-grid > *,
.preview-stats > * {
  min-width: 0;
}


/* ================================================================
   4. NAVIGATION — the dead-zone fix
   ================================================================ */

/* 4a. Shrink the nav's intrinsic requirement.

   The logo was the biggest single offender: the markup declares
   150x34, but the CSS forced height:68px, which at that aspect ratio
   renders 309px wide — a 68px logo inside a 72px nav bar, eating 28%
   of the row. Clamping it recovers ~110px on small viewports while
   staying identical to today's design on wide ones.

   Every value below is fluid, so the nav degrades continuously
   instead of falling off a cliff. */
nav {
  padding-left:  clamp(1rem, 0.35rem + 1.8vw, 2.75rem);
  padding-right: clamp(1rem, 0.35rem + 1.8vw, 2.75rem);
  height: auto;
  min-height: clamp(3.5rem, 3.1rem + 1vw, 4.5rem);
  gap: clamp(0.5rem, 0.2rem + 1vw, 1.5rem);
}

/* The interpolations below are solved so each value reaches its MINIMUM
   exactly at the 1100px collapse point and its current design maximum at
   1920px. Bottoming out at the breakpoint (rather than somewhere below it)
   is what buys headroom in the narrowest band where the nav is still shown.

   Headroom matters more than it looks: the widest the nav ever gets is
   commercial mode (Pricing + Sign up visible), and the brief asks the layout
   to survive font-fallback differences. A fallback face a few percent wider
   than Segoe UI must not be able to reintroduce the overflow, so we target
   ~10% slack at the boundary rather than the ~3% a naive clamp gave. */
.nav-logo img {
  height: clamp(2.5rem, 0.1rem + 3.46vw, 4.25rem);   /* 40px @1100 → 68px @1920 */
  width: auto;
}

.nav-links {
  gap: clamp(1rem, -0.37rem + 1.98vw, 2rem);         /* 16px @1100 → 32px @1920 */
  font-size: clamp(0.875rem, 0.66rem + 0.7vw, 1rem); /* 14px @1100 → 16px @1920 */
  min-width: 0;
}

/* The nav's three groups must not be squeezed into each other. Flex items
   default to flex-shrink:1, so under pressure all three gave way at once and
   the text inside them spilled across the neighbouring group — the jammed,
   overlapping bar in the bug report. Only the links group may now give up
   space; the logo and the buttons hold their size.

   (Note for anyone reading a local screenshot: "Pricing" and "Sign up"
   measuring 0px wide is NOT this. That is js/config.js hiding them with
   display:none when pricing-mode is non-commercial, which it fails closed to
   whenever /api/pricing-mode is unreachable.) */
.nav-logo,
.nav-actions { flex-shrink: 0; }
.nav-links   { flex-shrink: 1; }
.nav-actions { gap: clamp(0.4rem, 0.15rem + 0.6vw, 0.625rem); }

.nav-actions .btn-ghost,
.nav-actions .btn-primary {
  padding-left:  clamp(0.7rem, 0.35rem + 0.9vw, 1.5rem);
  padding-right: clamp(0.7rem, 0.35rem + 0.9vw, 1.5rem);
  font-size: clamp(0.875rem, 0.82rem + 0.18vw, 1rem);
  white-space: nowrap;
}

/* 4b. Collapse to the burger BEFORE the nav runs out of room.

   With 4a applied the desktop nav needs roughly 870px. Collapsing at
   1100px leaves ~230px of headroom, so there is no width at which the
   nav is displayed but does not fit — which is precisely the dead
   zone that this whole file exists to remove.

   Every rule the pages previously scoped to their own (too small)
   breakpoint has to be repeated here, or the 900–1100 band would show
   a burger that opens nothing. */
@media (max-width: 1100px) {
  .nav-links   { display: none; }
  .nav-actions { display: none; }
  .nav-burger  { display: inline-flex; align-items: center; }
  .mobile-menu.open { display: flex; }
}


/* ================================================================
   5. FLUID TYPE + SPACING
   Sizes are expressed in rem so they also respect the user's browser
   font-size, and interpolate on vw so they never depend on hitting a
   particular breakpoint.
   ================================================================ */

.hero h1        { font-size: clamp(2rem, 1.15rem + 3.4vw, 3.125rem); }
.hero p         { font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1rem); max-width: 46ch; }
.section-title  { font-size: clamp(1.5rem, 1.05rem + 1.7vw, 2.125rem); }
.secb-h2        { font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); }

/* Long unbroken words (URLs, product names) must not force a scrollbar. */
h1, h2, h3, p, li, a { overflow-wrap: break-word; }


/* ── 6. Fluid section padding ──────────────────────────────────────
   These were hardcoded at 72px/48px, which is a lot of a 960px-wide
   viewport. Interpolating keeps the wide-screen design untouched. */
.hero {
  padding: clamp(2.5rem, 1.6rem + 2.6vw, 4.5rem) clamp(1.25rem, 0.5rem + 1.9vw, 2.5rem);
  gap: clamp(2rem, 0.9rem + 3vw, 3.5rem);
}
.features,
.pricing,
.trust {
  padding-left:  clamp(1.25rem, 0.4rem + 2.2vw, 3rem);
  padding-right: clamp(1.25rem, 0.4rem + 2.2vw, 3rem);
}


/* ================================================================
   7. INTRINSIC GRIDS  (replaces breakpoint guesswork)
   auto-fit + minmax lets the browser choose the column count from the
   space actually available. `min(100%, X)` keeps the track from ever
   being wider than its container — the standard guard that makes
   minmax() safe on narrow viewports.
   ================================================================ */

/* The hero was 1fr 1fr until 900px, so in the 900–1100 band it packed
   two columns into a narrow viewport. Now it drops to one column
   exactly when the columns stop fitting. */
.hero {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr));
  align-items: center;
}

.features-grid  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); }
.features-lead  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem),   1fr)); }
.features-more  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem),   1fr)); }
.secb-grid      { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem),   1fr)); }
.preview-stats  { grid-template-columns: repeat(auto-fit, minmax(min(100%, 6.5rem),  1fr)); }

/* The app-preview mock is decorative; its 140px sidebar + fixed
   320px body made it the widest rigid thing in the hero. */
.preview-body {
  grid-template-columns: clamp(6.5rem, 5rem + 4vw, 8.75rem) 1fr;
  min-height: 0;
}
.app-preview { max-width: 100%; }

/* Hero CTAs wrap instead of overflowing when the copy is long. */
.hero-ctas  { flex-wrap: wrap; }
.hero-trust { flex-wrap: wrap; row-gap: 0.5rem; }


/* ── 8. Containers ─────────────────────────────────────────────────
   Width is a maximum, never a fixed size. */
.hero,
.features-grid,
.price-trust,
.trust-inner { width: 100%; }


/* ── 9. Viewport-height guards ─────────────────────────────────────
   100vh is wrong on any browser whose toolbars overlay the viewport
   and it ignores browser chrome height differences — one of the
   reported symptoms. `dvh` tracks the *visible* viewport. min-height
   rather than height so content taller than the screen still flows. */
@supports (height: 100dvh) {
  .auth-shell,
  .center-viewport,
  .full-height { min-height: 100dvh; }
}
