/* ==========================================================================
   icg-polish.css — motion + consistency layer (checklist C1, 2026-08-20)
   Sole owner: worker-C. Loaded sitewide via A5 injection.
   Motion-guard map:
     - All transitions below are neutralized under reduced motion by the
       global prefers-reduced-motion:reduce kill-switch (section 5).
     - Hover-motion rules (card lift, image zoom) sit inside @media (hover:hover).
     - .reveal hidden state + smooth scroll exist ONLY inside
       @media (prefers-reduced-motion: no-preference).
     - Carousel rules (section 11) carry the .icg-carousel ancestor prefix to
       out-specify the homepage's LATER inline #icg-credibility-css block, so
       this file is the single effective owner of the carousel's computed
       visuals (fix 2026-08-20).
   ========================================================================== */

/* (9) MPA cross-fade — self-gating, no-op where unsupported */
@view-transition {
  navigation: auto;
}

/* (1) Card transitions (.ow-card / .ow-card__media / .ow-ph confirmed in
   dist/our-work markup by C3; parents already ship overflow:hidden in the
   page inline CSS — restated here as a guard for the img zoom) */
.ow-card {
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.ow-card__media img,
.ow-ph img {
  transition: transform .4s ease;
}
.ow-card__media,
.ow-ph {
  overflow: hidden;
}

/* (2) Buttons — kills the off-brand Bootstrap #286090 hover flash */
.btn {
  transition: background-color .2s ease, box-shadow .2s ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: #0a457b;
}

/* (3) Nav / footer / top-row link color transitions */
#top-row a,
nav a,
footer a {
  transition: color .2s ease;
}

/* (7) Hover-motion rules — only on devices that truly hover */
@media (hover: hover) {
  .ow-card:hover {
    box-shadow: 0 8px 24px rgba(27, 58, 95, .12);
    transform: translateY(-3px);
  }
  .ow-card:hover .ow-card__media img {
    transform: scale(1.04);
  }
  .ow-ph:hover img {
    transform: scale(1.04);
  }
}

/* (4) Visible focus ring */
a:focus-visible,
.btn:focus-visible,
.ow-card:focus-visible,
.ow-chip:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid #1B3A5F;
  outline-offset: 2px;
}
/* Override the outline-stripping chip rule shipped in the our-work inline CSS
   (.ow-filter:focus-visible+.ow-chips .ow-chip{outline:none}) — same
   specificity, this sheet loads later in the cascade */
.ow-filter:focus-visible + .ow-chips .ow-chip {
  outline: 2px solid #1B3A5F;
  outline-offset: 2px;
}

/* (5) Global reduced-motion kill-switch */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* (6)+(8) Motion opt-in — smooth scroll and the .reveal hidden state exist
   ONLY for no-preference users, so content is never hidden under reduced
   motion (and never hidden at all without JS: only JS adds .reveal) */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
  }
  .reveal.in {
    opacity: 1;
    transform: none;
  }
  /* cascade guard: .reveal.in{transform:none} ties specificity with the
     .ow-card:hover lift and would win by file order — re-assert the lift for
     revealed cards (D3 loop-back fix, live-verified 2026-08-20) */
  @media (hover: hover) {
    .ow-card.reveal.in:hover {
      transform: translateY(-3px);
    }
  }
}

/* (10) Interior-page header fix — spacing gets ONE owner.
   Derived from dist/wp-content/themes/custom/css/style.css (read 2026-08-20):
     line 3:   body.page-template-default, body.single-community { padding-top: 150px; }
     line 57:  #top-row { position: fixed; top: 0; ... }
     line 122: .navbar-fixed-top { background: #fff; top: 40px; }
   All children of <header> are position:fixed on interior pages, so header
   offsetHeight collapses to 0 and the body padding magic number owns the
   space. Override: header itself owns an explicit 150px (40px top-row band
   per the navbar's top:40px + 110px fixed navbar band, totalling the theme's
   own 150px reservation) and the body padding is zeroed.
   Per-breakpoint: style.css's responsive blocks (@media 1200/992/767/450px,
   lines 622-687) contain NO override of the interior 150px reservation
   (the only padding-top override there, 138px @767px, targets
   body.page-template-front-page — the homepage), so 150px is the derived
   explicit height at every breakpoint; nothing is invented.
   Homepage is untouched: its body classes are
   "home page-template page-template-front-page ..." — never
   page-template-default — so neither rule can match a page with #logo. */
body.page-template-default {
  padding-top: 0;
}
body.page-template-default header {
  height: 150px;
}

/* (11) Testimonials carousel visuals — retargeted 2026-08-20 to the REAL
   B3-shipped homepage markup (dist/index.html lines 273-339):
     .icg-carousel [role=region][aria-roledescription=carousel]
       > .icg-car-track (scroller) > 8x .icg-car-slide[role=group] (cards)
       > .icg-car-controls > .icg-car-prev / .icg-car-dots / .icg-car-next
   (no bare .icg-car class exists anywhere in dist — the earlier .icg-car
   selectors were dead).
   CASCADE OWNERSHIP: the homepage's inline #icg-credibility-css block
   (dist/index.html line 207) loads AFTER this sheet and styles the same
   elements at (0,1,0) specificity, so every rule below carries the
   .icg-carousel ancestor prefix (>= (0,2,0)) and covers EVERY declaration
   that block sets on the track / slides / controls / buttons / dots —
   this file is therefore the single effective owner of the carousel's
   computed visuals regardless of load order.
   Tokens: Poppins / navy #1B3A5F / gold #C8A44D (from build-homepage-credibility.py) */
.icg-carousel .icg-car-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 18px; /* shorthand also overrides the inline padding-bottom:8px */
  scrollbar-width: thin;
}
.icg-carousel .icg-car-track [role=group] {
  flex: 0 0 auto; /* beats the inline flex:0 0 88% AND its @768/@1100 flex-basis overrides */
  min-width: clamp(280px, 85vw, 340px);
  max-width: 340px;
  scroll-snap-align: start;
  box-sizing: border-box;
}
.icg-carousel .icg-car-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}
.icg-carousel .icg-car-prev,
.icg-carousel .icg-car-next {
  min-width: 24px;
  min-height: 24px;
  width: 44px;
  height: 44px;
  border: 0;
  background: #1B3A5F; /* white glyph on #1B3A5F = 11.5:1, over the 3:1 bar */
  color: #fff;
  font-family: 'Poppins', sans-serif;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
.icg-carousel .icg-car-prev:hover,
.icg-carousel .icg-car-next:hover {
  background: #0a457b;
}
.icg-carousel .icg-car-dots {
  display: flex;
  align-items: center;
  gap: 4px;
}
.icg-carousel .icg-car-dots button {
  min-width: 24px;
  min-height: 24px; /* >=24x24 hit area */
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icg-carousel .icg-car-dots button::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c3cedb;
  transition: background-color .2s ease;
}
.icg-carousel .icg-car-dots button[aria-current="true"]::before {
  width: 12px;
  height: 12px;
  background: #C8A44D; /* gold active vs gray inactive — distinct state */
}
.icg-carousel .icg-car-prev:focus-visible,
.icg-carousel .icg-car-next:focus-visible,
.icg-carousel .icg-car-dots button:focus-visible {
  outline: 2px solid #1B3A5F;
  outline-offset: 2px;
}