/* ============================================================
   DATACRAFT — Shared responsive layer
   ------------------------------------------------------------
   The site is built with inline styles (static pages + React
   components). This stylesheet adds a responsive layer on top
   without rewriting those inline styles: author !important
   rules in media queries override non-important inline styles.

   Targets:
   - Header / nav    → .dc-navbar / .dc-navlinks (React) and
                       `header > nav` (static pages & posts)
   - Footer          → `footer` / `footer > div`
   - Content layout  → attribute selectors that match the inline
                       style signatures used across pages
   Breakpoints: 900px (tablet) · 640px (phone)
   ============================================================ */

/* ── Universal guards (all viewports) ── */
/* overflow-x: clip (not hidden) prevents sideways scroll WITHOUT turning the
   body into a scroll container, which would break the sticky header. */
html, body { max-width: 100%; overflow-x: clip; }
img, svg, video, canvas { max-width: 100%; }

/* ============================================================
   TABLET  (≤ 900px)
   ============================================================ */
@media (max-width: 900px) {

  /* Multi-column content rows → stack vertically.
     Matches the large-gap flex rows used for page layouts. */
  [style*="display: flex"][style*="gap: 80px"],
  [style*="display: flex"][style*="gap: 72px"],
  [style*="display: flex"][style*="gap: 64px"],
  [style*="display: flex"][style*="gap: 56px"],
  [style*="display: flex"][style*="gap: 52px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* CSS grids → single column */
  [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Fixed-width side columns / cards → full width */
  [style*="width: 460px"],
  [style*="width: 420px"],
  [style*="width: 380px"],
  [style*="width: 360px"],
  [style*="width: 340px"],
  [style*="width: 320px"],
  [style*="width: 300px"],
  [style*="width: 256px"],
  [style*="width: 220px"] {
    width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Images that declared a fixed pixel width should scale */
  img[style*="width: 340px"],
  img[style*="width: 320px"],
  img[style*="width: 300px"],
  img[style*="width: 220px"] {
    width: 100% !important;
    height: auto !important;
    max-width: 420px;
  }

  /* Trim oversized horizontal section padding */
  [style*="padding: 80px 32px"] { padding-left: 24px !important; padding-right: 24px !important; }
  [style*="padding: 88px 32px"] { padding-left: 24px !important; padding-right: 24px !important; }
}

/* ============================================================
   PHONE  (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {

  /* ---- Header / nav: collapse into a centered stack ---- */
  /* React pages use .dc-navbar; static pages/posts use header>nav */
  .dc-navbar,
  header > nav {
    flex-direction: column !important;
    align-items: center !important;
    height: auto !important;
    padding: 14px 18px !important;
    gap: 12px !important;
  }
  .dc-navbar > a img,
  header > nav > a img { height: 46px !important; }

  /* The links cluster wraps and centers under the logo */
  .dc-navlinks,
  header > nav > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px 18px !important;
    width: 100%;
  }

  /* ---- Footer: stack logo, links, copyright ---- */
  footer > div {
    flex-direction: column !important;
    text-align: center !important;
    gap: 18px !important;
  }
  footer > div > div {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 14px 22px !important;
  }

  /* ---- Stack remaining medium-gap flex rows ---- */
  [style*="display: flex"][style*="gap: 48px"],
  [style*="display: flex"][style*="gap: 44px"],
  [style*="display: flex"][style*="gap: 40px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* ---- Fluid typography for oversized inline headings ---- */
  [style*="font-size: 72px"],
  [style*="font-size: 70px"] { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -0.5px !important; }
  [style*="font-size: 64px"],
  [style*="font-size: 54px"],
  [style*="font-size: 52px"] { font-size: 34px !important; line-height: 1.12 !important; }
  [style*="font-size: 48px"],
  [style*="font-size: 42px"],
  [style*="font-size: 40px"],
  [style*="font-size: 38px"],
  [style*="font-size: 36px"] { font-size: 29px !important; line-height: 1.18 !important; }
  [style*="font-size: 34px"] { font-size: 25px !important; line-height: 1.22 !important; }
  [style*="font-size: 30px"] { font-size: 23px !important; }

  /* ---- Reduce heavy section padding on phones (tighten vertical whitespace
          between content blocks, e.g. GTM Blueprints) ---- */
  [style*="padding: 80px 32px"],
  [style*="padding: 88px 32px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  /* Tighten oversized bottom margins under section headings */
  [style*="margin-bottom: 52px"],
  [style*="margin-bottom: 48px"],
  [style*="margin-bottom: 44px"] { margin-bottom: 28px !important; }
  [style*="padding-left: 32px"] { padding-left: 18px !important; }
  [style*="padding-right: 32px"] { padding-right: 18px !important; }

  /* Post hero / article container padding (static posts) */
  main[style*="padding: 56px 48px"] { padding: 36px 20px 64px !important; }
  [style*="padding: 56px 32px"] { padding-left: 20px !important; padding-right: 20px !important; }

  /* Contact form: single-column fields on small screens */
  .dc-form { grid-template-columns: 1fr !important; }

  /* ---- Homepage (index.html) ---- */
  /* Hero "What brings you here?" tabs stack full-width */
  .dc-hero-paths { flex-direction: column !important; }
  .dc-hero-paths .path-btn { width: 100% !important; text-align: center; }
  /* Hide the SIGNAL teaser graphic card on phones */
  .dc-hero-card { display: none !important; }
  /* "Beyond services" product cards stack vertically */
  .dc-products { flex-direction: column !important; }
  /* Expanded tab content (service cards) stack vertically */
  .dc-service-cards { flex-direction: column !important; }

  /* ---- About (about.html) ---- */
  /* "Platforms I work with" — heading above badges, badges stacked */
  .dc-tools-head { flex-direction: column !important; align-items: stretch !important; }
  .dc-cert-badges { flex-direction: column !important; align-items: stretch !important; }
  .dc-cert-badges > div { justify-content: flex-start !important; }
}