/* =========================================================================
   topbuilderai.com — ONE responsive ladder for every page.

   ⛔ WHY THIS FILE EXISTS.
   Every page on this site carries its own inline <style> block. There was no
   shared stylesheet, so the breakpoints drifted: eighteen different max-width
   values across the site (780, 760, 680, 880, 620, 560, 430, 420, 640, 1140,
   820, 720, 580, 520, 800, 740, 600, 920), and coverage ranging from 23 media
   queries on index.html down to 2 on privacy, terms, security and faq. Nothing
   anywhere above 1140px, so large laptops got no treatment at all.

   This file does NOT restyle the site. It is a corrective layer that lands
   AFTER each page's own <style>, and it only fixes the things that were
   measured to be wrong at a real viewport size:

     1. phones  — tap targets under 40px (15 of them on faq.html alone)
     2. phones  — wide tables forced a sideways scroll or squeezed to nothing
     3. desktop — body text reached 1092px per line at 1905px wide, roughly
                  150 characters, well past a readable measure
     4. all     — media with no max-width can push a page sideways

   THE LADDER, and the devices each rung is actually for:

     <= 430px    phones            iPhone 13/14/15/16, Galaxy S/A portrait
     <= 640px    large phones      Pro Max / Ultra, small phone landscape
     <= 768px    small tablets     iPad mini, iPad portrait, Galaxy Tab
     <= 1024px   large tablets     iPad Pro 11/12.9 landscape, Surface
     <= 1280px   small laptops     MacBook Air 13, most 1366x768 PC laptops
     >= 1536px   large laptops     MacBook Pro 16, 1080p and 1440p desktops

   Use these six numbers for any new breakpoint on this site. A seventh value
   is how the drift started.
   ========================================================================= */

/* ── 0. nothing may push the page sideways ───────────────────────────────
   A single overflowing element gives the whole page a horizontal scrollbar,
   which on a phone reads as "this site is broken". Not using overflow-x on
   html/body on purpose: it silently kills position:sticky, and this site's
   nav is sticky. Constraining the things that actually overflow is safer. */
img, svg, video, canvas, iframe, embed, object {
  max-width: 100%;
  height: auto;
}
pre, code, kbd, samp {
  overflow-x: auto;
  max-width: 100%;
}
table {
  max-width: 100%;
}
/* Long unbroken strings (URLs, account ids, hashes) are the other classic
   phone-breaker. */
p, li, dd, td, th, blockquote, figcaption {
  overflow-wrap: break-word;
}

/* ── 1. touch targets ────────────────────────────────────────────────────
   WCAG 2.2 AA (2.5.8) sets a 24x24 minimum; Apple and Google both recommend
   44x44. Scoped to coarse pointers so mouse-driven desktop density is left
   exactly as designed. A contractor taps this with a work glove on. */
@media (pointer: coarse) {
  a.btn,
  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  summary,
  nav a,
  .nav a,
  .navlinks a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Inline links inside a paragraph must NOT become 44px blocks; that would
     wreck the line rhythm of the body copy. */
  p a,
  li a,
  td a,
  th a,
  figcaption a,
  .muted a,
  small a {
    min-height: 0;
    display: inline;
  }
  input, select, textarea {
    min-height: 44px;
    font-size: 16px; /* under 16px, iOS Safari zooms the whole page on focus */
  }
}

/* ── 2. phones: 430px and below ──────────────────────────────────────────
   iPhone 15/16 is 393pt, Galaxy S24 is 360pt. This rung is the floor. */
@media (max-width: 430px) {
  /* Hero and section headings set for desktop overflow their line box on a
     360px screen. clamp() keeps them proportional instead of capping them. */
  h1 { font-size: clamp(28px, 8.5vw, 40px); line-height: 1.15; }
  h2 { font-size: clamp(23px, 6.4vw, 30px); line-height: 1.2; }
  h3 { font-size: clamp(18px, 5vw, 22px); }

  /* Side-by-side CTAs stack rather than shrinking to unreadable slivers. */
  .hero-cta,
  .btn-row,
  .cta-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .hero-cta .btn,
  .btn-row .btn,
  .cta-row .btn {
    width: 100%;
  }

  /* Any grid that is still multi-column at this width is unreadable. */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. TABLES BECOME CARDS ON PHONES ────────────────────────────────────
   A three-column pricing table at 375px either scrolls sideways (nobody
   scrolls, so they never see our price next to theirs, which is the entire
   point of the table) or crushes each column to about 100px.

   Cards fix it: every row becomes a small stack, and each value is labelled
   by the header it belongs to via data-label. Opt-in through .price-table
   and .rt so a decorative table elsewhere is not restructured. */
@media (max-width: 560px) {
  .price-table,
  .rt {
    display: block;
    width: 100%;
  }
  .price-table thead,
  .rt thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .price-table tbody,
  .price-table tr,
  .rt tbody,
  .rt tr {
    display: block;
    width: 100%;
  }
  .price-table tr,
  .rt tr {
    border: 1px solid var(--line, rgba(255, 255, 255, .12));
    border-radius: 12px;
    padding: 6px 4px;
    margin-bottom: 10px;
  }
  .price-table td,
  .rt td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    text-align: right !important;
    border-bottom: 0 !important;
    padding: 7px 10px !important;
  }
  /* The row's first cell is its title, so it reads as a heading.
     ⛔ justify-content, NOT text-align. The cell is a flex container, and
     `space-between` with an empty ::before still counts that ::before as a
     flex item, so the title gets shoved to the right edge and text-align
     does nothing about it. Measured on a 375px viewport: every row title
     rendered right-aligned until the ::before was removed from the flow. */
  .price-table td:first-child,
  .rt td:first-child {
    font-weight: 600;
    justify-content: flex-start !important;
    text-align: left !important;
    border-bottom: 1px solid var(--line, rgba(255, 255, 255, .12)) !important;
    margin-bottom: 2px;
  }
  .price-table td:first-child::before,
  .rt td:first-child::before {
    display: none;
  }
  .price-table td::before,
  .rt td::before {
    content: attr(data-label);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink3, #8b8f9e);
    text-align: left;
    flex: 0 0 auto;
  }
  .price-table-wrap {
    overflow-x: visible; /* the cards no longer need a scroll container */
  }
}

/* ── 4. large phones and small tablets: 640px / 768px ────────────────────
   The awkward middle. Two-column grids fit but three do not, and a nav built
   for a laptop starts colliding with itself. */
@media (max-width: 768px) {
  .wrap,
  .container,
  main > section > div {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  nav,
  .nav {
    flex-wrap: wrap;
    row-gap: 8px;
  }
  /* Tables that are NOT converted to cards still must not clip. */
  .price-table-wrap,
  .table-wrap,
  .scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── 5. large tablets: 1024px ────────────────────────────────────────────
   iPad Pro landscape is a real reading device for this audience (the office
   person doing the books). Give it a comfortable measure rather than the
   full-bleed desktop layout. */
@media (min-width: 769px) and (max-width: 1024px) {
  .wrap,
  .container {
    padding-left: 28px;
    padding-right: 28px;
  }
}

/* ── 5b. ⛔ THE TABLET-LANDSCAPE NAV GAP, MEASURED ───────────────────────
   The nav carries nine items (logo, six links, Log in, Book a call). Below
   about 880px a compact nav takes over, and above about 1100px everything
   fits. In BETWEEN, the full desktop nav renders and does not fit: measured
   at a 1024px window, "Book a call" ended at 1045px against a 1009px client
   width, pushing the whole document 36px sideways. iPad Pro landscape and
   a half-screen laptop window both land squarely in that gap.

   Wrapping is the fix rather than hiding links, because every one of those
   links is a page we want found. The tightened gap usually means it never
   has to wrap at all. */
nav,
.nav,
.nav-links {
  flex-wrap: wrap;
}

@media (min-width: 769px) and (max-width: 1180px) {
  .nav-links,
  nav.nav-links,
  header nav {
    gap: 10px !important;
    column-gap: 10px !important;
    row-gap: 8px !important;
  }
  .nav-links a,
  header nav a {
    font-size: 13.5px;
  }
  .nav-links .btn,
  header nav .btn {
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* ── 6. small laptops: 1280px ────────────────────────────────────────────
   1366x768 is still the most common PC laptop resolution. Nothing to fix
   structurally; this rung exists so the ladder is complete and so future
   work has a documented place to hang. */
@media (min-width: 1025px) and (max-width: 1280px) {
  .wrap,
  .container {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ── 7. large laptops and desktops: 1536px and up ────────────────────────
   ⛔ THE MEASURED PROBLEM. At 1905px wide, a body paragraph on this site
   reached 1092px, about 150 characters per line. Comfortable reading is
   45-75 characters. The container was already capped at 1140px, so the fix
   is not a narrower container, it is a cap on the TEXT itself.

   Headings and any element the page explicitly laid out (grids, flex rows,
   tables) are deliberately excluded, or a two-column section would collapse
   into a narrow ribbon floating in the middle of a wide screen. */
/* The measure rules now start at 1000px, not 1536px: when the container
   went site-wide to 1400px (motion.css, Cory's edge-to-edge pass), every
   width from 1049px up could show >100-char lines. Cards, tables and grids
   still fill — only running TEXT is capped. */
@media (min-width: 1000px) {
  p,
  li,
  blockquote,
  dd {
    max-width: 78ch;
  }
  /* Centred blocks keep their own centring; left-aligned copy stays put. */
  [style*="text-align:center"] p,
  .center p,
  .centered p {
    margin-left: auto;
    margin-right: auto;
  }
  /* Do not narrow copy that is already inside a laid-out cell. */
  td p, th p, .card p, .tile p, [class*="grid"] p, [style*="grid"] p {
    max-width: none;
  }
}
@media (min-width: 1536px) {
  body {
    font-size: 17px; /* one step up so a 27in monitor is not squinting */
  }
}

/* ── 8. accessibility that rides along ───────────────────────────────────
   The site already respects reduced motion in places; this makes it global,
   because a new animation added later would otherwise sail straight past a
   hand-maintained selector list. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* Screen-reader-only, used by the pricing table's caption. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}