/*
 * global.css — Base resets, animated background, typography scale
 * ─────────────────────────────────────────────────────────────────
 * Applies site-wide. Add section-specific styles to sections.css.
 */

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* ── @property for animatable CSS vars (background gradient) ── */
@property --g1x { syntax: '<percentage>'; initial-value: 20%; inherits: false; }
@property --g1y { syntax: '<percentage>'; initial-value: 15%; inherits: false; }
@property --g2x { syntax: '<percentage>'; initial-value: 80%; inherits: false; }
@property --g2y { syntax: '<percentage>'; initial-value: 30%; inherits: false; }
@property --g3x { syntax: '<percentage>'; initial-value: 70%; inherits: false; }
@property --g3y { syntax: '<percentage>'; initial-value: 85%; inherits: false; }
@property --g4x { syntax: '<percentage>'; initial-value: 15%; inherits: false; }
@property --g4y { syntax: '<percentage>'; initial-value: 75%; inherits: false; }

/* ── Body + animated gradient background ────────────────── */
body {
  font-family: var(--font-base);
  font-size: 12px;
  color: var(--clr-charcoal);
  background-color: var(--clr-white);
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(ellipse 60% 50% at var(--g1x) var(--g1y), rgba(218,241,249,0.60), rgba(218,241,249,0) 60%),
    radial-gradient(ellipse 55% 50% at var(--g2x) var(--g2y), rgba(218,241,249,0.45), rgba(218,241,249,0) 60%),
    radial-gradient(ellipse 65% 55% at var(--g3x) var(--g3y), rgba(218,241,249,0.55), rgba(218,241,249,0) 60%),
    radial-gradient(ellipse 50% 45% at var(--g4x) var(--g4y), rgba(218,241,249,0.40), rgba(218,241,249,0) 60%);
  background-attachment: fixed;
  animation: dhsBg 28s ease-in-out infinite alternate;
}

@keyframes dhsBg {
  0%   { --g1x:20%;--g1y:15%;--g2x:80%;--g2y:30%;--g3x:70%;--g3y:85%;--g4x:15%;--g4y:75%; }
  50%  { --g1x:35%;--g1y:28%;--g2x:65%;--g2y:18%;--g3x:82%;--g3y:70%;--g4x:25%;--g4y:88%; }
  100% { --g1x:28%;--g1y:10%;--g2x:88%;--g2y:42%;--g3x:60%;--g3y:92%;--g4x:8%; --g4y:65%; }
}

@media (prefers-reduced-motion: reduce) {
  body { animation: none; }
  html { scroll-behavior: auto; }
}

/* ── Typography ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-base);
  color: var(--clr-cobalt);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h1 { font-size: 52px; font-weight: 900; }
h2 { font-size: 38px; font-weight: 800; }
h3 { font-size: 24px; font-weight: 800; }

p {
  font-size: var(--text-md);
  color: var(--clr-steel);
  line-height: 1.7;
}

a {
  color: var(--clr-ocean);
  text-decoration: none;
}

/* ── Gradient text utility ──────────────────────────────── */
.dhs-gradient-text,
.dhs-gradient-text > span {
  background: var(--grad-primary);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ── Eyebrow label (small ALL-CAPS section labels) ──────── */
.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-aqua);
  display: block;
  margin-bottom: var(--sp-3);
}

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  font-family: var(--font-base);
  font-size: var(--text-base);
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: background 0.15s, filter 0.15s, color 0.15s, border-color 0.15s;
  text-decoration: none;
  line-height: 1.4;
}

.btn-primary {
  background: var(--grad-primary);
  color: var(--clr-white);
}

.btn-primary:hover {
  background: var(--grad-primary-hover);
  color: var(--clr-white);
}

.btn-outline {
  background: transparent;
  color: var(--clr-cobalt);
  border: 1.5px solid var(--clr-cobalt);
}

.btn-outline:hover {
  background: var(--clr-cobalt);
  color: var(--clr-white);
}

/* ── Layout helpers ──────────────────────────────────────── */
.container {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-10);
  padding-right: var(--sp-10);
}

.container--text {
  max-width: var(--max-width-text);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--sp-10);
  padding-right: var(--sp-10);
}

/* Page wrapper — compensates for fixed nav */
.page-body {
  padding-top: var(--nav-height);
}

/* ── Card base ───────────────────────────────────────────── */
.card {
  background: var(--clr-white);
  border: 1px solid var(--clr-silver);
  border-radius: var(--radius-lg);
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}

.card:hover {
  box-shadow: var(--shadow-card);
  transform: translateY(-2px);
  border-color: var(--clr-aqua);
}

/* ── Photo utility (case-study desaturate) ───────────────── */
.casestudy-photo {
  filter: saturate(0.65) contrast(1.03);
}

/* ── Client logos bar ──────────────────────────────────────
   Layout now lives in sections.css (.client-logos-marquee).
   Kept here only as a no-JS/no-CSS-order safety net.          */
.client-logos {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
}

/* ── Stat / BAN numbers ──────────────────────────────────── */
.stat-ban {
  font-size: 44px;
  font-weight: 900;
  color: var(--clr-aqua);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ── Wide gradient bands ─────────────────────────────────── */
.wide-band {
  padding-left: var(--sp-10);
  padding-right: var(--sp-10);
}

/* ── WordPress core alignment classes ────────────────────── */
.alignleft  { float: left; margin-right: var(--sp-6); }
.alignright { float: right; margin-left: var(--sp-6); }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.wp-caption { max-width: 100%; }

/* ── Screen-reader helpers ───────────────────────────────── */
.screen-reader-text {
  clip: rect(1px,1px,1px,1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════ */

/* Tablet (≤1280px) — wide-band side margin */
@media (max-width: 1280px) {
  .wide-band {
    padding-left: max(40px, 5vw);
    padding-right: max(40px, 5vw);
  }
}

/* Tablet (≤1024px) */
@media (max-width: 1024px) {
  .hero-grid         { grid-template-columns: 1.25fr 0.75fr !important; gap: 40px !important; }
  .hero-image img    { max-width: 360px !important; margin-left: auto !important; }
  .use-cases-grid    { grid-template-columns: repeat(2, 1fr) !important; }
  .stat-ban          { font-size: 36px !important; }
  .wide-band         { padding-left: 32px !important; padding-right: 32px !important; }
}

/* Tablet (≤860px) */
@media (max-width: 860px) {
  .nav-links         { display: none !important; }
  .nav-hamburger     { display: inline-flex !important; }
  /* Panel stays collapsed until the hamburger sets .is-open (see main.js).
     Previously this rule forced display:block, so the menu was always
     expanded on small screens and covered page content. */
  .nav-mobile-panel          { display: none !important; padding-left: 16px !important; padding-right: 16px !important; }
  .nav-mobile-panel.is-open  { display: block !important; }

  .hero-grid         { padding: 48px 20px 40px !important; gap: 32px !important; }
  .hero-stats        { gap: 24px 20px !important; }
  .hero-image        { max-width: 420px !important; margin: 0 auto !important; }

  .stat-grid         { gap: 16px !important; }
  .stat-ban          { font-size: 30px !important; }

  .wide-band         { padding-left: 20px !important; padding-right: 20px !important; }

  .container, .container--text { padding-left: 20px; padding-right: 20px; }

  h1 { font-size: 32px !important; line-height: 1.15 !important; }
  h2 { font-size: 26px !important; line-height: 1.2  !important; }
  h3 { font-size: 20px !important; line-height: 1.3  !important; }

  .photo-col { order: -1; margin-bottom: 8px; }

  /* ── Stack multi-column grids ───────────────────────────────
     FIXED 08/12. The previous rule used [class*="grid-"], which looks
     for the string "grid-" WITH a trailing hyphen. Every grid class in
     this theme ends in "-grid" (services-grid, team-grid, why-us-grid,
     resources-grid, insights-grid, benchmarking-grid), so none of them
     matched and none of them ever stacked — four-across team cards on a
     380px phone, side-by-side hero columns, and so on.

     Replaced with explicit rules per class. Add new grid classes here
     when you add new sections; a wildcard is too easy to get wrong.
     ───────────────────────────────────────────────────────── */
  .services-grid,
  .why-us-grid,
  .results-grid,
  .resources-grid,
  .insights-grid,
  .benchmarking-grid,
  .dhs-reports-grid,
  [class*="grid-"]:not(.hero-stats):not(.stat-grid):not(.use-cases-grid):not(.keep-grid) {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  /* Hero drops to a single column — it previously stayed two-up at every
     width, which squeezed the copy into a narrow ribbon on phones. */
  .hero-grid {
    grid-template-columns: 1fr !important;
  }

  /* .keep-grid is deliberately excluded above so it holds its shape on
     tablets, but at phone widths a two-column split is unreadable. */
  .keep-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* Team cards: four across never fitted. Two on tablet, one on phone
     (see the 640px block below). */
  .team-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }

  /* Full-width CTA bands that use side margins for their rounded card
     look need smaller insets once the viewport is narrow. */
  .section-cta {
    margin-left: 20px !important;
    margin-right: 20px !important;
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}

/* Mobile (≤640px) */
@media (max-width: 640px) {
  .use-cases-grid    { grid-template-columns: 1fr !important; }
  .stat-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .stat-ban          { font-size: 28px !important; }
  .team-grid         { grid-template-columns: 1fr !important; }
  .footer-inner      { grid-template-columns: 1fr !important; gap: 32px !important; }
  .footer-bottom     { flex-direction: column; gap: 10px; text-align: center; }

  /* Section padding was fixed at 40px, eating a fifth of a 360px screen */
  .section-services,
  .section-why-us,
  .section-testimonial,
  .section-resources { padding-left: 20px !important; padding-right: 20px !important; }

  /* Quote + headshot stack rather than sitting side by side */
  .testimonial-inner { flex-direction: column; gap: 24px; align-items: center; text-align: center; }
  .testimonial-photo { width: 88px; height: 88px; }
  .testimonial-quote { font-size: 17px !important; }
}

/* Mobile (≤480px) */
@media (max-width: 480px) {
  h1 { font-size: 28px !important; }
  h2 { font-size: 22px !important; }
}

/* ══════════════════════════════════════════════════════════
   OVERFLOW GUARD
   Nothing should be able to push the page wider than the
   viewport and create a sideways scroll on a phone. Added
   08/12 alongside the grid stacking fixes.

   ── 08/14 FIX: STICKY NAVS ────────────────────────────────
   This guard used to read `html, body { overflow-x: hidden }`.
   Setting overflow on html/body turns the page itself into a
   scroll container, and that silently disables EVERY
   `position: sticky` element on the site — which is why the
   progress navs on Service Line Growth and Philanthropy
   scrolled away instead of pinning.

   The guard now lives on `.site-shell`, a wrapper that opens
   in header.php and closes in footer.php, and uses
   `overflow-x: clip` instead of `hidden`. `clip` contains the
   full-bleed sections exactly like `hidden` did, but does NOT
   create a scroll container, so sticky keeps working.

   The fixed site nav sits OUTSIDE .site-shell on purpose, so
   nothing here can affect it.
   ══════════════════════════════════════════════════════════ */
html, body { max-width: 100%; }

.site-shell {
  overflow-x: clip;
}

/* Safari 15 and older don't support `overflow: clip`. They fall back to
   the old behaviour: no sideways scroll, but no sticky sub-nav either. */
@supports not (overflow: clip) {
  .site-shell { overflow-x: hidden; }
}

img, svg, video, canvas, iframe, table { max-width: 100%; }

/* Long unbroken strings (URLs, email addresses) wrap instead of
   stretching their container. */
p, li, h1, h2, h3, h4, blockquote, .testimonial-quote { overflow-wrap: break-word; }