/* AdLoops marketing site — base resets + utilities.
   All design tokens come from colors_and_type.css. This file is intentionally
   tiny: the JSX components do their own styling inline. */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: var(--font-sans);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html { scroll-behavior: smooth; }

button { font-family: inherit; }

a { color: inherit; text-decoration: none; }

.focus-ring:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
}

img, svg { max-width: 100%; height: auto; }

::selection {
  background: rgba(99, 102, 241, 0.22);
  color: var(--fg);
}

/* Skip-link for keyboard users; visually hidden until focused. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink-900);
  color: var(--ink-0);
  padding: 10px 16px;
  border-radius: 0 0 8px 0;
  font-size: 13px;
  font-weight: 500;
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Responsive — mobile + tablet overrides.
   Component styling lives inline in the JSX, so these media-query
   rules carry !important to win over the inline `style` attribute.
   This block is the one place the site's breakpoint behavior lives.
   Classes are applied in Nav.jsx and Sections.jsx.
   ============================================================ */

/* Tablet and below */
@media (max-width: 768px) {
  /* Nav — drop the secondary link row and tighten the bar.
     Logo + primary CTA remain (no JS, so no hamburger menu). */
  .nav-inner { gap: 16px !important; }
  .nav-links { display: none !important; }

  /* Multi-column content grids collapse to a single column. */
  .r-grid-2,
  .r-grid-3,
  .grid-trust { grid-template-columns: 1fr !important; }

  /* Audit-mock stat strip: 4-up → 2-up. */
  .r-grid-4 { grid-template-columns: repeat(2, 1fr) !important; }

  /* Footer: 5-up → 2-up. */
  .footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }

  /* 96px section rhythm is too tall on a phone. */
  .r-section { padding-top: 56px !important; padding-bottom: 56px !important; }
}

/* Phones */
@media (max-width: 480px) {
  .nav-inner  { padding: 12px 16px !important; gap: 12px !important; }
  .nav-github { display: none !important; }

  .r-grid-4    { grid-template-columns: 1fr !important; }
  .audit-kpi   { grid-template-columns: 1fr !important; }
  .footer-grid { grid-template-columns: 1fr !important; }
  .integrations { gap: 14px !important; }

  .r-section { padding-top: 44px !important; padding-bottom: 44px !important; }
}