/* ============================================================
   Action Group Holdings Co. — SECTION-LEVEL LIGHT OVERRIDES
   Navy (css/style.css :root) is the page default. These rules apply
   only inside sections tagged data-bg="white" or data-bg="ivory",
   for the alternating navy/white/ivory section layout.
   Palette source: AGH brand blue #17479E + grey #939598.
   All tints derived via color-mix() from these two values only.
   ============================================================ */

[data-bg="white"] {
  --bg: #ffffff;
  --bg-2: #f4f5f7;
  --panel: #ffffff;
  --ivory: #14213a;
  --muted: #4b4f57;
  --faint: #939598;
  --hair: rgba(20, 33, 58, .10);
  --gold: #17479E;
  --gold-2: color-mix(in srgb, #17479E 70%, white);
  background: var(--bg);
  color: var(--muted);
}

[data-bg="ivory"] {
  --bg: #f6f5f1;
  --bg-2: #ece9e2;
  --panel: #f6f5f1;
  --ivory: #14213a;
  --muted: #4b4f57;
  --faint: #939598;
  --hair: rgba(20, 33, 58, .10);
  --gold: #17479E;
  --gold-2: color-mix(in srgb, #17479E 70%, white);
  background: var(--bg);
  color: var(--muted);
}

[data-bg="white"] ::selection,
[data-bg="ivory"] ::selection { background: var(--gold); color: #fff; }

/* buttons */
[data-bg="white"] .btn,
[data-bg="ivory"] .btn { color: var(--ivory); border-color: rgba(20,33,58,.22); }
[data-bg="white"] .btn:hover,
[data-bg="ivory"] .btn:hover { color: #fff; border-color: var(--gold); }
[data-bg="white"] .btn--gold,
[data-bg="ivory"] .btn--gold { color: #fff; }

/* imagery reads fine on light without dark desaturation */
[data-bg="white"] .d-panel .pic img,
[data-bg="white"] .csr-tile .pic img,
[data-bg="ivory"] .d-panel .pic img,
[data-bg="ivory"] .csr-tile .pic img { filter: saturate(.85) brightness(1); }
[data-bg="white"] .d-panel:hover .pic img,
[data-bg="white"] .csr-tile:hover .pic img,
[data-bg="ivory"] .d-panel:hover .pic img,
[data-bg="ivory"] .csr-tile:hover .pic img { filter: saturate(1) brightness(1.02); }

/* partner + subsidiary logos — full brand color, these PNGs are designed for a light background already */
[data-bg="white"] .sub-feature .logo-chip,
[data-bg="ivory"] .sub-feature .logo-chip { background: var(--bg-2); border-color: var(--hair); }
[data-bg="white"] .sub-feature .logo-chip img,
[data-bg="ivory"] .sub-feature .logo-chip img { filter: none; }
[data-bg="white"] .sub-feature .body ul li::before,
[data-bg="ivory"] .sub-feature .body ul li::before { color: var(--gold); }

/* map iframe — no more grayscale/invert hack needed on a light base */
[data-bg="white"] .map-frame,
[data-bg="ivory"] .map-frame { filter: none; border-color: var(--hair); }

/* csr/media tiles — resting state is already a light card (--bg-4/--text-dark);
   only the hover inversion (built for a dark page) needs a light-safe swap */
[data-bg="white"] .csr-tile:hover,
[data-bg="ivory"] .csr-tile:hover { background: var(--panel); }
[data-bg="white"] .csr-tile:hover h3,
[data-bg="ivory"] .csr-tile:hover h3 { color: var(--ivory); }
[data-bg="white"] .csr-tile:hover p,
[data-bg="ivory"] .csr-tile:hover p { color: var(--muted); }
[data-bg="white"] .csr-tile:hover .link-line,
[data-bg="ivory"] .csr-tile:hover .link-line { color: var(--navy-blue); border-bottom-color: rgba(23, 71, 158, .35); }
[data-bg="white"] .csr-tile:hover .link-line:hover,
[data-bg="ivory"] .csr-tile:hover .link-line:hover { border-color: var(--navy-blue); }

/* forms */
[data-bg="white"] .field label,
[data-bg="ivory"] .field label { color: var(--ivory); }
[data-bg="white"] .field input,
[data-bg="white"] .field textarea,
[data-bg="white"] .field select,
[data-bg="ivory"] .field input,
[data-bg="ivory"] .field textarea,
[data-bg="ivory"] .field select { color: var(--ivory); border-bottom-color: rgba(20,33,58,.2); }
[data-bg="white"] .field select,
[data-bg="ivory"] .field select { background: var(--bg-2); }
[data-bg="white"] .field select option,
[data-bg="ivory"] .field select option { background: var(--bg); color: var(--ivory); }
[data-bg="white"] .field input::placeholder,
[data-bg="white"] .field textarea::placeholder,
[data-bg="ivory"] .field input::placeholder,
[data-bg="ivory"] .field textarea::placeholder { color: var(--faint); }
[data-bg="white"] .form-card,
[data-bg="ivory"] .form-card { background: var(--bg-2); }

/* final CTA glow — soften blue glow instead of gold glow */
[data-bg="white"] .cta-final .glow,
[data-bg="ivory"] .cta-final .glow {
  background: radial-gradient(circle, color-mix(in srgb, #17479E 14%, transparent), transparent 62%);
}