/* ============================================================================
   Katalyst — Responsive Override Layer  (netlify-p0b)
   ----------------------------------------------------------------------------
   PURPOSE
   A single, additive override stylesheet loaded AFTER each page's own styles so
   it can safely repair mobile/tablet layout on the client-rendered marketing
   pages WITHOUT rewriting page structure. The .dc.html pages and index.html use
   heavy INLINE styles (grid-template-columns, font-size, flex) with zero media
   queries, so overrides here use attribute selectors + scoped !important to win
   against inline declarations. Every !important below is required for exactly
   that reason (inline-style specificity) and is scoped to a breakpoint.

   SCOPE: public marketing site (katalystconsulting.io) only.
   Does NOT touch app.katalystconsulting.io or any authenticated route.

   BREAKPOINTS (as required by the task):
     (max-width:374px)                         ultra-small phones (320/360)
     (min-width:375px) and (max-width:430px)   standard phones (375/390/412/430)
     (min-width:431px) and (max-width:767px)   large phones / phablets
     (min-width:768px) and (max-width:1024px)  tablets (768/1024)
     (min-width:1025px) and (max-width:1279px) small laptops
     (min-width:1280px)                         large desktop (1366/1440/1920)

   ROLLBACK: delete this file and remove the injector block appended to
   support.js (and the <link> added to the plain static pages). See
   reports/netlify_p0b_static_html_performance_responsive_repair_2026-07-08.md
   ============================================================================ */

/* ---- 0. Global safety: box-sizing, media fluidity, overflow guard --------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;               /* stop decorative blobs / wide grids from scrolling */
}

img, svg, video, canvas, picture { max-width: 100%; }
img { height: auto; }
/* Keep small fixed-size chrome icons (logo, social, glyphs) crisp — they set
   explicit width/height inline; height:auto would distort them. */
img[style*="width:32px"], img[style*="width:34px"], img[style*="width:26px"], img[width] { height: revert; }
iframe { max-width: 100%; }

/* Respect reduced-motion: the ambient blobs animate infinitely. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Hamburger button base (shown only inside phone breakpoints below) ----- */
.k-nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px; height: 42px; padding: 0;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  color: #F4F4F7; cursor: pointer; flex: 0 0 auto;
}
.k-nav-burger svg { width: 22px; height: 22px; display: block; }

/* ============================================================================
   SHARED PHONE RULES  (applies to every phone: <= 767px)
   Broken into the three required sub-ranges afterward for finer type control.
   ============================================================================ */
@media (max-width: 767px) {

  /* --- mobile nav: reveal hamburger, collapse the hydrated nav clusters --- */
  .k-nav-burger { display: inline-flex; }
  nav .k-nav-links,
  nav .k-nav-cta { display: none !important; }
  nav .k-nav-row { padding-left: 20px !important; padding-right: 20px !important; }
  nav.k-nav-open .k-nav-row { flex-wrap: wrap !important; row-gap: 6px !important; }
  nav.k-nav-open .k-nav-links,
  nav.k-nav-open .k-nav-cta {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    width: 100% !important;
    flex-basis: 100% !important;
    padding: 8px 0 4px !important;
  }
  nav.k-nav-open .k-nav-links a,
  nav.k-nav-open .k-nav-cta a {
    padding: 12px 6px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
    text-align: left !important;
  }
  nav.k-nav-open .k-nav-cta a:last-child { text-align: center !important; margin-top: 4px; }

  /* static-page nav (.knav-links was display:none <760px → dead-end). Let it wrap. */
  .knav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px 16px !important;
    font-size: 13px !important;
    order: 3; flex-basis: 100% !important;
    padding-top: 8px;
  }
  .knav-in { flex-wrap: wrap !important; row-gap: 6px; }

  /* --- every inline grid collapses to a single column --- */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* --- flex rows (stat/button/pill rows) may wrap; leave nav & column flex alone --- */
  [style*="display:flex"][style*="gap"]:not(.k-nav-row):not(.knav-in):not([style*="flex-direction:column"]) {
    flex-wrap: wrap;
  }

  /* --- section padding trim so content isn't crushed against the edges --- */
  [style*="padding:84px 32px"],
  [style*="padding:64px 32px"],
  [style*="padding:56px"] { padding-left: 20px !important; padding-right: 20px !important; }
  [style*="padding:62px 48px"] { padding: 40px 20px !important; }
  [style*="padding:44px 42px"] { padding: 28px 22px !important; }
  header[style] { padding-top: 40px !important; }
  [style*="min-height:260px"] { min-height: 150px !important; }

  /* --- wide max-width containers must not exceed the viewport --- */
  [style*="max-width:1180px"], [style*="max-width:1080px"],
  [style*="max-width:980px"],  [style*="max-width:920px"],
  [style*="max-width:900px"]  { width: 100%; }

  /* --- forms: full-width, tappable --- */
  input[style], textarea[style], select[style] { max-width: 100% !important; }
  button[style] { max-width: 100%; }

  /* --- decorative pull-quote numerals shouldn't overflow --- */
  [style*="font-size:120px"] { font-size: 56px !important; }
}

/* ---- ultra-small phones: 320 / 360 ---------------------------------------- */
@media (max-width: 374px) {
  h1[style] { font-size: clamp(24px, 8vw, 30px) !important; line-height: 1.12 !important; }
  h2[style] { font-size: clamp(20px, 6.5vw, 26px) !important; line-height: 1.18 !important; }
  h3[style] { font-size: 17px !important; }
  [style*="font-size:52px"], [style*="font-size:56px"], [style*="font-size:54px"],
  [style*="font-size:50px"], [style*="font-size:48px"], [style*="font-size:40px"],
  [style*="font-size:42px"] { font-size: clamp(24px, 8vw, 30px) !important; }
  p[style*="font-size:18"], p[style*="font-size:19"], p[style*="font-size:17"] { font-size: 15px !important; }
  .k-nav-row, [style*="padding-left:32px"] { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---- standard phones: 375 / 390 / 412 / 430 ------------------------------- */
@media (min-width: 375px) and (max-width: 430px) {
  h1[style] { font-size: clamp(28px, 8.5vw, 34px) !important; line-height: 1.1 !important; }
  h2[style] { font-size: clamp(23px, 6.5vw, 28px) !important; line-height: 1.15 !important; }
  h3[style] { font-size: 18px !important; }
  [style*="font-size:52px"], [style*="font-size:56px"], [style*="font-size:54px"],
  [style*="font-size:50px"], [style*="font-size:48px"], [style*="font-size:40px"],
  [style*="font-size:42px"] { font-size: clamp(28px, 8.5vw, 36px) !important; }
  p[style*="font-size:18"], p[style*="font-size:19"], p[style*="font-size:17"] { font-size: 16px !important; }
}

/* ---- large phones / phablets: 431 – 767 ----------------------------------- */
@media (min-width: 431px) and (max-width: 767px) {
  h1[style] { font-size: clamp(30px, 7vw, 40px) !important; line-height: 1.08 !important; }
  h2[style] { font-size: clamp(24px, 5.5vw, 32px) !important; }
  [style*="font-size:52px"], [style*="font-size:56px"], [style*="font-size:54px"],
  [style*="font-size:50px"] { font-size: clamp(30px, 7vw, 42px) !important; }
}

/* ============================================================================
   TABLETS: 768 – 1024
   Desktop nav still shows (fits), but allow it to wrap rather than overflow.
   Dense card grids → 2 columns; split hero grids stack.
   ============================================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  nav .k-nav-row, .knav-in { flex-wrap: wrap; row-gap: 8px; }

  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns:repeat(6,1fr)"],
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:1.1fr 1.3fr 1.6fr"] {
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
  [style*="grid-template-columns:1.02fr 1.05fr"],
  [style*="grid-template-columns:0.85fr 1.4fr"],
  [style*="grid-template-columns:0.85fr 1.15fr"],
  [style*="grid-template-columns:0.82fr 1.18fr"],
  [style*="grid-template-columns:1.15fr 0.85fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"],
  [style*="grid-template-columns:1.1fr 0.9fr"] {
    grid-template-columns: 1fr !important;
  }
  h1[style] { font-size: clamp(34px, 6vw, 50px) !important; }
}

/* ============================================================================
   SMALL LAPTOPS: 1025 – 1279  (mostly native; gently cap the largest heroes)
   ============================================================================ */
@media (min-width: 1025px) and (max-width: 1279px) {
  h1[style*="font-size:56px"], h1[style*="font-size:54px"] { font-size: 48px !important; }
}

/* ============================================================================
   LARGE DESKTOP: 1280+  (native design is correct; no structural overrides)
   ============================================================================ */
@media (min-width: 1280px) {
  /* intentionally minimal — the native inline layout is designed for this range */
  img, svg { max-width: 100%; }
}

/* ============================================================================
   COOKIE / CONSENT BANNER (defensive — applies only if a banner is present)
   Keeps any consent UI usable on mobile and never permanently covering CTAs.
   ============================================================================ */
@media (max-width: 767px) {
  [class*="cookie"], [id*="cookie"], [class*="consent"], [id*="consent"] { max-width: 100% !important; }
  [class*="cookie"] [style*="display:flex"],
  [class*="consent"] [style*="display:flex"] { flex-wrap: wrap; }
}