/*
  Corporate theme — scoped overrides applied only under `.beta-corporate-theme`.
  Maps the base site's `primary` (deep indigo) and `accent` (bright orange),
  plus stray blue/yellow gradient stops, to the ASI Corporate brand palette:
    Navy   #003085
    Orange #F1A900
    Blue   #2F7EE3
    Yellow #FFE163
  Typography: Libre Baskerville for headings, Montserrat for body.
*/

.beta-corporate-theme {
  --c-navy: #003085;
  --c-navy-700: #002567;
  --c-navy-800: #001a4d;
  --c-navy-50: #e8eef9;
  --c-navy-100: #d1dcef;
  --c-navy-200: #b8d0ee;
  --c-navy-300: #8fb0df;
  --c-orange: #f1a900;
  --c-orange-600: #c88a00;
  --c-orange-700: #9e6e00;
  --c-orange-50: #fff6e0;
  --c-orange-100: #fde9b3;
  --c-orange-200: #fad27a;
  --c-blue: #2f7ee3;
  --c-yellow: #ffe163;

  /* Brand gradient background palette */
  --c-bg-blue-1: #b8d0ee;
  --c-bg-blue-2: #c2d2eb;
  --c-bg-neutral: #e8e8ec;
  --c-bg-orange: #f1a900;

  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a1a1a;
}

/* =====================================================================
   Site-wide hero background — light corporate vertical gradient.
   Top-to-bottom wash from a near-white blue down to a deeper cool blue,
   softened by a translucent white overlay. A subtle orange orb is kept
   in the top-right for brand warmth without overpowering the airy feel.
   Fixed so the background holds steady while scrolling. Falls back to
   scroll on small viewports where iOS mishandles fixed attachments.
   ===================================================================== */
.beta-corporate-theme.beta-corporate-bg {
  background-color: #F0F4FA;
  background-image: linear-gradient(
    180deg,
    #F0F4FA 0%,
    #E0E9F5 45%,
    #D0E0F0 100%
  );
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  overflow-x: hidden;
}

@media (max-width: 768px) {
  .beta-corporate-theme.beta-corporate-bg {
    background-attachment: scroll;
  }
}

/* Light white overlay for extra softness and depth. */
.beta-corporate-theme.beta-corporate-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.35);
  pointer-events: none;
  z-index: 0;
}

/* Subtle brand-orange accent orb top-right to keep the ASI warmth. */
.beta-corporate-theme.beta-corporate-bg::after {
  content: '';
  position: fixed;
  top: -12%;
  right: -10%;
  width: 520px;
  height: 520px;
  border-radius: 9999px;
  filter: blur(90px);
  background: radial-gradient(circle, rgba(241, 169, 0, 0.18) 0%, rgba(241, 169, 0, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

/* App content sits above the fixed decorative orbs.
   Only target flow-layout children (main, footer); leave fixed elements
   like the preview banner and <header> alone so they stay pinned. */
.beta-corporate-theme.beta-corporate-bg > main,
.beta-corporate-theme.beta-corporate-bg > footer {
  position: relative;
  z-index: 1;
}

/* Root wrapper must not paint opaque white over the brand background. */
.beta-corporate-theme.beta-corporate-bg.bg-white {
  background-color: transparent !important;
}

.beta-corporate-theme h1,
.beta-corporate-theme h2,
.beta-corporate-theme h3,
.beta-corporate-theme h4,
.beta-corporate-theme h5,
.beta-corporate-theme h6 {
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.beta-corporate-theme button,
.beta-corporate-theme input,
.beta-corporate-theme textarea,
.beta-corporate-theme select,
.beta-corporate-theme label {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif;
}

/* Primary (navy) remaps */
.beta-corporate-theme .bg-primary,
.beta-corporate-theme .bg-primary-500 { background-color: var(--c-navy) !important; }
.beta-corporate-theme .bg-primary-600 { background-color: var(--c-navy-700) !important; }
.beta-corporate-theme .bg-primary-700 { background-color: var(--c-navy-800) !important; }
.beta-corporate-theme .bg-primary-50 { background-color: var(--c-navy-50) !important; }
.beta-corporate-theme .bg-primary-100 { background-color: var(--c-navy-100) !important; }
.beta-corporate-theme .bg-primary-200\/20,
.beta-corporate-theme .bg-primary-100\/30 { background-color: rgba(0, 48, 133, 0.18) !important; }
.beta-corporate-theme .bg-primary-200\/50 { background-color: rgba(0, 48, 133, 0.35) !important; }

.beta-corporate-theme .text-primary,
.beta-corporate-theme .text-primary-500 { color: var(--c-navy) !important; }
.beta-corporate-theme .text-primary-100 { color: var(--c-navy-200) !important; }
.beta-corporate-theme .text-primary-700 { color: var(--c-navy-800) !important; }

.beta-corporate-theme .border-primary-200 { border-color: var(--c-navy-200) !important; }
.beta-corporate-theme .border-primary-300 { border-color: var(--c-navy-300) !important; }

.beta-corporate-theme .hover\:bg-primary:hover,
.beta-corporate-theme .hover\:bg-primary-500:hover { background-color: var(--c-navy) !important; }
.beta-corporate-theme .hover\:bg-primary-600:hover { background-color: var(--c-navy-700) !important; }
.beta-corporate-theme .hover\:bg-primary-700:hover { background-color: var(--c-navy-800) !important; }
.beta-corporate-theme .hover\:text-primary:hover,
.beta-corporate-theme .hover\:text-primary-700:hover { color: var(--c-navy-800) !important; }
.beta-corporate-theme .hover\:border-primary-300:hover { border-color: var(--c-navy-300) !important; }
.beta-corporate-theme .group:hover .group-hover\:bg-primary { background-color: var(--c-navy) !important; }

/* Gradient stops using primary */
.beta-corporate-theme .from-primary { --tw-gradient-from: var(--c-navy) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(0,48,133,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme .to-primary-700 { --tw-gradient-to: var(--c-navy-800) var(--tw-gradient-to-position) !important; }
.beta-corporate-theme .from-primary-50 { --tw-gradient-from: var(--c-navy-50) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(232,238,249,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme .to-primary-50 { --tw-gradient-to: var(--c-navy-50) var(--tw-gradient-to-position) !important; }
.beta-corporate-theme .via-white { --tw-gradient-to: rgba(255,255,255,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), #ffffff var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* Accent (orange) remaps */
.beta-corporate-theme .bg-accent,
.beta-corporate-theme .bg-accent-500 { background-color: var(--c-orange) !important; }
.beta-corporate-theme .bg-accent-50 { background-color: var(--c-orange-50) !important; }
.beta-corporate-theme .bg-accent-200\/25 { background-color: rgba(241, 169, 0, 0.22) !important; }

.beta-corporate-theme .text-accent,
.beta-corporate-theme .text-accent-400 { color: var(--c-orange) !important; }
.beta-corporate-theme .text-accent-600 { color: var(--c-orange-600) !important; }
.beta-corporate-theme .text-accent-700 { color: var(--c-orange-700) !important; }

.beta-corporate-theme .border-accent,
.beta-corporate-theme .border-accent-200 { border-color: var(--c-orange) !important; }

.beta-corporate-theme .hover\:bg-accent:hover,
.beta-corporate-theme .hover\:bg-accent-500:hover { background-color: var(--c-orange) !important; }
.beta-corporate-theme .hover\:bg-accent-600:hover { background-color: var(--c-orange-600) !important; }

.beta-corporate-theme .from-accent-50 { --tw-gradient-from: var(--c-orange-50) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(255,246,224,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme .to-accent-50 { --tw-gradient-to: var(--c-orange-50) var(--tw-gradient-to-position) !important; }

/* Stray blue / yellow used in section gradients → remapped to the brand
   gradient palette (#B8D0EE → #C2D2EB → #E8E8EC accented with #F1A900)
   so every section feels like it sits on the same canvas. */
.beta-corporate-theme .from-blue-50 { --tw-gradient-from: rgba(184, 208, 238, 0.45) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(184, 208, 238, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme .from-blue-100 { --tw-gradient-from: #b8d0ee var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(184, 208, 238, 0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme .via-yellow-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 169, 0, 0.12) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-corporate-theme .via-yellow-100 { --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 169, 0, 0.2) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-corporate-theme .to-yellow-50 { --tw-gradient-to: rgba(241, 169, 0, 0.14) var(--tw-gradient-to-position) !important; }
.beta-corporate-theme .to-blue-50 { --tw-gradient-to: rgba(194, 210, 235, 0.55) var(--tw-gradient-to-position) !important; }

.beta-corporate-theme .bg-blue-200\/20,
.beta-corporate-theme .bg-blue-300\/20,
.beta-corporate-theme .bg-blue-300\/30 { background-color: rgba(47, 126, 227, 0.18) !important; }

.beta-corporate-theme .bg-yellow-200\/20,
.beta-corporate-theme .bg-yellow-300\/20,
.beta-corporate-theme .bg-yellow-300\/30 { background-color: rgba(255, 225, 99, 0.22) !important; }

/* Star ratings → brand yellow per spec (warm highlight role) */
.beta-corporate-theme .fill-yellow-400 { fill: var(--c-yellow) !important; }
.beta-corporate-theme .text-yellow-400 { color: var(--c-yellow) !important; }

/* Subheader utility — Montserrat Bold 18–24px per brand guide. Applied to
   card h3/h4 so only h1/h2 keep Libre Baskerville. */
.beta-corporate-theme .subheader,
.beta-corporate-theme h3.subheader,
.beta-corporate-theme h4.subheader {
  font-family: 'Montserrat', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  line-height: 1.25 !important;
}

/* Focus-visible navy ring on interactive elements (WCAG 2.1 AA). */
.beta-corporate-theme a:focus-visible,
.beta-corporate-theme button:focus-visible {
  outline: 2px solid var(--c-navy);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Official Light Mode brand gradient band — used as a section divider. */
.beta-corporate-theme .brand-gradient-band {
  background: linear-gradient(90deg, #B8D0EE 0%, #C2D2EB 50%, #E8E8EC 100%);
}

/* Phone-icon chip for header contact link. */
.beta-corporate-theme .phone-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9999px;
  background-color: var(--c-navy);
  color: #ffffff;
}

/* CTA with light-blue hover per brand rule. */
.beta-corporate-theme .cta-blue-hover:hover {
  background-color: #6FA8E8 !important;
  border-color: #6FA8E8 !important;
  box-shadow: 0 6px 20px rgba(111, 168, 232, 0.4) !important;
  color: #ffffff !important;
}

/* Slightly desaturated, cool-neutral photo treatment per imagery guide. */
.beta-corporate-theme .brand-photo-tone {
  filter: saturate(0.92) hue-rotate(-2deg);
}

/* Nav links and anchors default to navy */
.beta-corporate-theme a {
  color: inherit;
}
.beta-corporate-theme a.text-primary,
.beta-corporate-theme a.text-primary-700 {
  color: var(--c-navy) !important;
}

/* Rounded buttons + banners per spec */
.beta-corporate-theme button,
.beta-corporate-theme .rounded-lg,
.beta-corporate-theme a[class*="rounded-lg"] {
  letter-spacing: 0.01em;
}

/* Softer, rounder surfaces — match the warm beta's generous radii */
.beta-corporate-theme .rounded { border-radius: 0.625rem !important; }
.beta-corporate-theme .rounded-md { border-radius: 0.75rem !important; }
.beta-corporate-theme .rounded-lg { border-radius: 1rem !important; }
.beta-corporate-theme .rounded-xl { border-radius: 1.25rem !important; }
.beta-corporate-theme .rounded-2xl { border-radius: 1.75rem !important; }
.beta-corporate-theme .rounded-3xl { border-radius: 2.25rem !important; }

/* Buttons and pill-shaped CTAs go fully rounded */
.beta-corporate-theme button:not([class*="rounded-full"]):not([class*="rounded-none"]),
.beta-corporate-theme a[class*="rounded-lg"],
.beta-corporate-theme a[class*="rounded-md"] {
  border-radius: 9999px !important;
}

/* Headline sizing tuned to spec scale (hero 48-72, titles 36-48, sections 24-36) */
.beta-corporate-theme .text-5xl { font-size: 3rem !important; }       /* 48px */
.beta-corporate-theme .text-6xl { font-size: 3.75rem !important; }    /* 60px */
.beta-corporate-theme .text-7xl { font-size: 4.5rem !important; }     /* 72px */

/* Contrast safety — any dark-navy surface forces white text on itself and
   its descendants. Light navy tints (primary-50 / primary-100) are excluded
   because they're paired with dark text on purpose. Orange accent buttons
   also lock to white for consistency with the spec. */
.beta-corporate-theme .bg-primary,
.beta-corporate-theme .bg-primary-500,
.beta-corporate-theme .bg-primary-600,
.beta-corporate-theme .bg-primary-700,
.beta-corporate-theme .hover\:bg-primary:hover,
.beta-corporate-theme .hover\:bg-primary-500:hover,
.beta-corporate-theme .hover\:bg-primary-600:hover,
.beta-corporate-theme .hover\:bg-primary-700:hover,
.beta-corporate-theme .group:hover .group-hover\:bg-primary,
.beta-corporate-theme .bg-accent,
.beta-corporate-theme .bg-accent-500,
.beta-corporate-theme .hover\:bg-accent:hover,
.beta-corporate-theme .hover\:bg-accent-500:hover,
.beta-corporate-theme .hover\:bg-accent-600:hover {
  color: #ffffff !important;
}

.beta-corporate-theme .bg-primary > *:not(svg):not(path),
.beta-corporate-theme .bg-primary-500 > *:not(svg):not(path),
.beta-corporate-theme .bg-primary-600 > *:not(svg):not(path),
.beta-corporate-theme .bg-primary-700 > *:not(svg):not(path),
.beta-corporate-theme .bg-accent > *:not(svg):not(path),
.beta-corporate-theme .bg-accent-500 > *:not(svg):not(path) {
  color: #ffffff !important;
}

.beta-corporate-theme .group:hover .group-hover\:bg-primary > *:not(svg):not(path),
.beta-corporate-theme .group:hover .group-hover\:text-white {
  color: #ffffff !important;
}

/* Subtle professional shadow on primary CTAs */
.beta-corporate-theme .bg-accent,
.beta-corporate-theme .bg-accent-500 {
  box-shadow: 0 4px 14px rgba(241, 169, 0, 0.28);
}
.beta-corporate-theme .bg-accent:hover,
.beta-corporate-theme .hover\:bg-accent-600:hover {
  box-shadow: 0 6px 20px rgba(241, 169, 0, 0.38);
}

/* =====================================================================
   Dark mode — `.beta-corporate-theme.dark`
   Cool navy-black palette that preserves the corporate navy DNA instead
   of collapsing to pure black. Light-mode rules above still cascade,
   so only color/surface utilities get overridden here.
   ===================================================================== */
.beta-corporate-theme.dark {
  --c-surface-page: #0b1220;
  --c-surface-section: #111a2b;
  --c-surface-card: #17223a;
  --c-surface-elevated: #1e2b47;
  --c-text-primary: #e6ecf5;
  --c-text-secondary: #b6c2d4;
  --c-text-muted: #8a99b0;
  --c-border: rgba(255, 255, 255, 0.1);
  --c-border-strong: rgba(255, 255, 255, 0.18);

  background-color: var(--c-surface-page);
  color: var(--c-text-primary);
  color-scheme: dark;
}

/* Dark-mode background: solid navy page, mirroring the light mode's
   approach where one base color dominates and the rest of the brand
   palette appears as soft decorative orbs. */
html.dark .beta-corporate-theme.beta-corporate-bg,
.beta-corporate-theme.dark.beta-corporate-bg {
  background-color: #1A2456 !important;
  background-image: linear-gradient(180deg, #1A2456 0%, #1e2a60 50%, #172049 100%) !important;
}
html.dark .beta-corporate-theme.beta-corporate-bg::before,
.beta-corporate-theme.dark.beta-corporate-bg::before {
  background:
    radial-gradient(620px circle at 10% 14%, rgba(148, 170, 220, 0.38) 0%, rgba(148, 170, 220, 0) 70%),
    radial-gradient(700px circle at 92% 30%, rgba(90, 130, 200, 0.34) 0%, rgba(90, 130, 200, 0) 70%),
    radial-gradient(560px circle at 78% 82%, rgba(241, 169, 0, 0.14) 0%, rgba(241, 169, 0, 0) 70%),
    radial-gradient(720px circle at 24% 90%, rgba(120, 150, 210, 0.28) 0%, rgba(120, 150, 210, 0) 70%) !important;
}
html.dark .beta-corporate-theme.beta-corporate-bg::after,
.beta-corporate-theme.dark.beta-corporate-bg::after {
  background: none !important;
}

/* Hide the hero's light-mode orange/cream gradient and accent orb in dark mode. */
.beta-corporate-theme.dark #home > .absolute.inset-0,
.beta-corporate-theme.dark #home .bg-accent-200\/25,
.beta-corporate-theme.dark #home .bg-primary-200\/20 {
  background: transparent !important;
  background-image: none !important;
}

/* Page base surfaces */
.beta-corporate-theme.dark,
.beta-corporate-theme.dark .bg-white {
  background-color: var(--c-surface-page) !important;
}

/* In dark mode the root wrapper paints over the brand gradient unless we
   keep it transparent (the layered background above handles the page). */
.beta-corporate-theme.dark.beta-corporate-bg,
.beta-corporate-theme.dark.beta-corporate-bg.bg-white {
  background-color: #1A2456 !important;
  background-image: none !important;
}
.beta-corporate-theme.dark .bg-gray-50 { background-color: var(--c-surface-section) !important; }
.beta-corporate-theme.dark .bg-gray-100 { background-color: var(--c-surface-card) !important; }
.beta-corporate-theme.dark .bg-gray-200 { background-color: var(--c-surface-elevated) !important; }

/* Navy brand surfaces stay navy, but lifted slightly so they don't merge
   with the page background. Keep primary-600/700 as true deep navy. */
.beta-corporate-theme.dark .bg-primary,
.beta-corporate-theme.dark .bg-primary-500 { background-color: #1c3a72 !important; }
.beta-corporate-theme.dark .bg-primary-600 { background-color: #14306a !important; }
.beta-corporate-theme.dark .bg-primary-700 { background-color: #0e2558 !important; }
.beta-corporate-theme.dark .bg-primary-50 { background-color: rgba(47, 126, 227, 0.12) !important; }
.beta-corporate-theme.dark .bg-primary-100 { background-color: rgba(47, 126, 227, 0.18) !important; }

/* Text utilities: invert grays to light tiers. */
.beta-corporate-theme.dark .text-gray-900 { color: var(--c-text-primary) !important; }
.beta-corporate-theme.dark .text-gray-800 { color: var(--c-text-primary) !important; }
.beta-corporate-theme.dark .text-gray-700 { color: var(--c-text-secondary) !important; }
.beta-corporate-theme.dark .text-gray-600 { color: var(--c-text-secondary) !important; }
.beta-corporate-theme.dark .text-gray-500 { color: var(--c-text-muted) !important; }
.beta-corporate-theme.dark .text-gray-400 { color: var(--c-text-muted) !important; }
.beta-corporate-theme.dark .text-black { color: var(--c-text-primary) !important; }

/* Primary text: brighten navy so it stays readable on the dark background. */
.beta-corporate-theme.dark .text-primary,
.beta-corporate-theme.dark .text-primary-500 { color: #6aa0e8 !important; }
.beta-corporate-theme.dark .text-primary-700 { color: #8ab8ef !important; }
.beta-corporate-theme.dark .text-primary-100 { color: #c9d9ee !important; }

/* Borders */
.beta-corporate-theme.dark .border-gray-200 { border-color: var(--c-border) !important; }
.beta-corporate-theme.dark .border-gray-100 { border-color: var(--c-border) !important; }
.beta-corporate-theme.dark .border-gray-300 { border-color: var(--c-border-strong) !important; }
.beta-corporate-theme.dark .border-primary-200 { border-color: rgba(47, 126, 227, 0.35) !important; }
.beta-corporate-theme.dark .border-primary-300 { border-color: rgba(47, 126, 227, 0.5) !important; }

/* Hero / CTA gradients — keep navy feel but darker. */
.beta-corporate-theme.dark .from-primary { --tw-gradient-from: #15305e var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(21,48,94,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .to-primary-700 { --tw-gradient-to: #081630 var(--tw-gradient-to-position) !important; }
.beta-corporate-theme.dark .from-primary-50 { --tw-gradient-from: var(--c-surface-section) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(17,26,43,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .to-primary-50 { --tw-gradient-to: var(--c-surface-section) var(--tw-gradient-to-position) !important; }
.beta-corporate-theme.dark .via-white { --tw-gradient-to: rgba(11,18,32,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--c-surface-page) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .from-blue-50 { --tw-gradient-from: var(--c-surface-section) var(--tw-gradient-from-position) !important; --tw-gradient-to: rgba(17,26,43,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .to-blue-50 { --tw-gradient-to: var(--c-surface-section) var(--tw-gradient-to-position) !important; }
.beta-corporate-theme.dark .via-yellow-50 { --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 169, 0, 0.08) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .via-yellow-100 { --tw-gradient-stops: var(--tw-gradient-from), rgba(241, 169, 0, 0.14) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.beta-corporate-theme.dark .to-yellow-50 { --tw-gradient-to: rgba(241, 169, 0, 0.1) var(--tw-gradient-to-position) !important; }

/* Light tinted surfaces (blue/yellow washes) */
.beta-corporate-theme.dark .bg-blue-50 { background-color: rgba(47, 126, 227, 0.1) !important; }
.beta-corporate-theme.dark .bg-yellow-50 { background-color: rgba(255, 225, 99, 0.08) !important; }
.beta-corporate-theme.dark .bg-yellow-100 { background-color: rgba(255, 225, 99, 0.14) !important; color: #f6e8b8 !important; }
.beta-corporate-theme.dark .bg-red-50 { background-color: rgba(239, 68, 68, 0.1) !important; }
.beta-corporate-theme.dark .bg-green-50 { background-color: rgba(34, 197, 94, 0.1) !important; }

/* Small eyebrow/label text that defaults to navy on light surfaces */
.corp-eyebrow-text {
  color: #003085;
}
.beta-corporate-theme.dark .corp-eyebrow-text {
  color: #FFE163;
}

/* Icon badge — warm yellow accent, readable in both light and dark */
.corp-icon-badge {
  background-color: rgba(241, 169, 0, 0.18);
  color: #9e6e00;
}
.beta-corporate-theme.dark .corp-icon-badge {
  background-color: rgba(255, 225, 99, 0.15);
  color: #FFE163;
}

.corp-eyebrow-gold { color: #9e6e00; }
.beta-corporate-theme.dark .corp-eyebrow-gold { color: #FFE163; }

/* Accent orange stays orange — already passes AA on dark. */
.beta-corporate-theme.dark .text-accent,
.beta-corporate-theme.dark .text-accent-600 { color: #ffc247 !important; }
.beta-corporate-theme.dark .text-accent-700 { color: #e0a533 !important; }

/* Form controls */
.beta-corporate-theme.dark input,
.beta-corporate-theme.dark textarea,
.beta-corporate-theme.dark select {
  background-color: var(--c-surface-card) !important;
  color: var(--c-text-primary) !important;
  border-color: var(--c-border-strong) !important;
}
.beta-corporate-theme.dark input::placeholder,
.beta-corporate-theme.dark textarea::placeholder {
  color: var(--c-text-muted) !important;
}
.beta-corporate-theme.dark input:focus,
.beta-corporate-theme.dark textarea:focus,
.beta-corporate-theme.dark select:focus {
  border-color: #6aa0e8 !important;
  outline-color: #6aa0e8 !important;
}

/* Shadows: cards on dark need a crisper outline than a drop shadow */
.beta-corporate-theme.dark .shadow,
.beta-corporate-theme.dark .shadow-sm,
.beta-corporate-theme.dark .shadow-md,
.beta-corporate-theme.dark .shadow-lg,
.beta-corporate-theme.dark .shadow-xl,
.beta-corporate-theme.dark .shadow-2xl {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 10px 30px rgba(0, 0, 0, 0.45) !important;
}

/* Disabled buttons */
.beta-corporate-theme.dark .disabled\:bg-gray-300:disabled,
.beta-corporate-theme.dark [disabled].bg-gray-300 {
  background-color: #2a334a !important;
  color: var(--c-text-muted) !important;
}

/* Images: slight brightness drop reduces glare on dark pages */
.beta-corporate-theme.dark img:not([src*=".svg"]) {
  filter: brightness(0.92) contrast(1.02);
}

/* Scrollbar styling for WebKit */
.beta-corporate-theme.dark ::-webkit-scrollbar { width: 12px; height: 12px; }
.beta-corporate-theme.dark ::-webkit-scrollbar-track { background: var(--c-surface-page); }
.beta-corporate-theme.dark ::-webkit-scrollbar-thumb {
  background: var(--c-surface-elevated);
  border-radius: 6px;
  border: 3px solid var(--c-surface-page);
}
.beta-corporate-theme.dark ::-webkit-scrollbar-thumb:hover { background: #2a3a5e; }

/* Hero bottom fade — blends hero gradient into the shared post-hero wash. */
.beta-corporate-theme .hero-bottom-fade {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(232, 238, 249, 0.55) 55%,
    rgba(255, 246, 224, 0.45) 100%
  );
}
.beta-corporate-theme.dark .hero-bottom-fade {
  background: none;
}

/* =====================================================================
   Corporate home — single continuous page-level wash.
   Provides a seamless vertical gradient that runs beneath the hero and
   every section below it, so there are no hard edges between sections.
   Ambient radial orbs float over the wash to add warmth and depth.
   ===================================================================== */
.beta-corporate-theme .corp-home-wash {
  position: relative;
  background:
    linear-gradient(
      180deg,
      #dbe6f5 0%,
      #e5ecf6 14%,
      #f0eadf 30%,
      #fbf2de 46%,
      #ebe9e8 60%,
      #d9e4f3 76%,
      #cfdef2 90%,
      #d5e2f2 100%
    );
}
.beta-corporate-theme .corp-home-wash::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(65rem 42rem at 88% 4%, rgba(47, 126, 227, 0.28), transparent 60%),
    radial-gradient(55rem 40rem at 8% 22%, rgba(47, 126, 227, 0.18), transparent 60%),
    radial-gradient(55rem 38rem at 10% 44%, rgba(241, 169, 0, 0.12), transparent 60%),
    radial-gradient(50rem 36rem at 92% 58%, rgba(47, 126, 227, 0.22), transparent 60%),
    radial-gradient(60rem 42rem at 14% 76%, rgba(47, 126, 227, 0.25), transparent 60%),
    radial-gradient(58rem 40rem at 90% 94%, rgba(0, 48, 133, 0.18), transparent 60%);
}
.beta-corporate-theme .corp-home-wash > * {
  position: relative;
  z-index: 1;
}
.beta-corporate-theme.dark .corp-home-wash {
  background: none;
}
.beta-corporate-theme.dark .corp-home-wash::before {
  background: none;
}

/* Tailwind accent-50 utilities used by the hero gradient — neutralized
   in dark so the page-level brand gradient shows through. */
.beta-corporate-theme.dark .to-accent-50\/50,
.beta-corporate-theme.dark .to-accent-50,
.beta-corporate-theme.dark .from-accent-50,
.beta-corporate-theme.dark .from-accent-50\/50 {
  --tw-gradient-from: transparent var(--tw-gradient-from-position) !important;
  --tw-gradient-to: transparent var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

/* Hero's own gradient overlay should disappear in dark so the page
   brand gradient shows through. */
.beta-corporate-theme.dark .from-primary-50.via-white {
  --tw-gradient-from: transparent var(--tw-gradient-from-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), transparent var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}

/* =====================================================================
   Home page section bands + dark-mode parity for translucent surfaces.
   Inline styles in the home page were defeating dark mode — these
   themable classes replace them and pick up the correct palette.
   ===================================================================== */
.beta-corporate-theme .home-band-cream-blue {
  background: linear-gradient(
    to bottom,
    rgba(254, 249, 233, 0.85) 0%,
    #ffffff 28%,
    #ffffff 72%,
    rgba(219, 234, 254, 0.6) 100%
  );
}
.beta-corporate-theme .home-band-blue-white {
  background: linear-gradient(
    to bottom,
    rgba(219, 234, 254, 0.6) 0%,
    #ffffff 28%,
    #ffffff 100%
  );
}
.beta-corporate-theme.dark .home-band-cream-blue,
.beta-corporate-theme.dark .home-band-blue-white {
  background: none;
}

/* Contact card on home */
.beta-corporate-theme .home-contact-card {
  background-color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(0, 48, 133, 0.1);
}
.beta-corporate-theme.dark .home-contact-card {
  background-color: rgba(23, 34, 58, 0.78) !important;
  border: 1px solid var(--c-border) !important;
}

/* Translucent white cards — Tailwind opacity variants escape the
   `.bg-white` override because they compile to `bg-white/90` classes. */
.beta-corporate-theme.dark .bg-white\/95,
.beta-corporate-theme.dark .bg-white\/90,
.beta-corporate-theme.dark .bg-white\/85,
.beta-corporate-theme.dark .bg-white\/80,
.beta-corporate-theme.dark .bg-white\/75,
.beta-corporate-theme.dark .bg-white\/70 {
  background-color: rgba(23, 34, 58, 0.85) !important;
}

/* Translucent white borders and rings */
.beta-corporate-theme.dark .border-white\/60,
.beta-corporate-theme.dark .border-white\/50,
.beta-corporate-theme.dark .border-white\/40 {
  border-color: var(--c-border) !important;
}
.beta-corporate-theme.dark .ring-black\/5 {
  --tw-ring-color: rgba(255, 255, 255, 0.06) !important;
}
.beta-corporate-theme.dark .ring-slate-200 {
  --tw-ring-color: var(--c-border) !important;
}

/* Slate utilities used in the "ASI Difference" comparison card */
.beta-corporate-theme.dark .bg-slate-100 { background-color: var(--c-surface-section) !important; }
.beta-corporate-theme.dark .bg-slate-200 { background-color: var(--c-surface-elevated) !important; }
.beta-corporate-theme.dark .border-slate-200 { border-color: var(--c-border) !important; }
.beta-corporate-theme.dark .text-slate-900 { color: var(--c-text-primary) !important; }
.beta-corporate-theme.dark .text-slate-800 { color: var(--c-text-secondary) !important; }
.beta-corporate-theme.dark .text-slate-700 { color: var(--c-text-secondary) !important; }
.beta-corporate-theme.dark .text-slate-600 { color: var(--c-text-muted) !important; }

/* =====================================================================
   Themable card surface used by Pricing, Contact, and other sections
   that previously hard-coded `backgroundColor: #FFFFFF` inline.
   ===================================================================== */
.beta-corporate-theme .corp-card {
  background-color: #ffffff;
  border: 1px solid rgba(0, 48, 133, 0.12);
}

/* Logo swap — show light logo in light mode, dark logo in dark mode. */
.beta-corporate-theme .corp-logo-dark { display: none; }
.beta-corporate-theme .corp-logo-light { display: inline-block; }
.beta-corporate-theme.dark .corp-logo-dark { display: inline-block; }
.beta-corporate-theme.dark .corp-logo-light { display: none; }

/* Hero trust-chip icon badge — navy in light, warm yellow in dark. */
.beta-corporate-theme .corp-trust-icon {
  background-color: rgba(0, 48, 133, 0.1);
  color: #003085;
}
.beta-corporate-theme.dark .corp-trust-icon {
  background-color: rgba(255, 225, 99, 0.18);
  color: #FFE163;
}

/* Industry pill — readable on both light and dark card surfaces. */
.beta-corporate-theme .corp-chip {
  background-color: #ffffff;
  border: 1px solid rgba(0, 48, 133, 0.12);
  color: #374151;
}
.beta-corporate-theme.dark .corp-chip {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: var(--c-border, rgba(255, 255, 255, 0.12));
  color: var(--c-text-primary, #e5e7eb);
}

/* Brand link color — navy in light, warm yellow in dark for contrast. */
.beta-corporate-theme .corp-link {
  color: #003085;
}
.beta-corporate-theme .corp-link:hover {
  color: #002567;
}
.beta-corporate-theme.dark .corp-link {
  color: #FFE163;
}
.beta-corporate-theme.dark .corp-link:hover {
  color: #FFD54F;
}
.beta-corporate-theme.dark .corp-card {
  background-color: rgba(23, 34, 58, 0.85) !important;
  border-color: var(--c-border) !important;
}
.beta-corporate-theme.dark .corp-card .text-gray-900,
.beta-corporate-theme.dark .corp-card h1,
.beta-corporate-theme.dark .corp-card h2,
.beta-corporate-theme.dark .corp-card h3,
.beta-corporate-theme.dark .corp-card h4 {
  color: var(--c-text-primary) !important;
}

/* Decorative section orbs (blue/yellow) used on Services & About sections.
   In dark mode they fight the brand background — replace with subtle
   periwinkle/lavender tints that match the page orbs. */
.beta-corporate-theme.dark #services .bg-blue-200\/20,
.beta-corporate-theme.dark #about .bg-blue-200\/20 {
  background-color: rgba(106, 123, 198, 0.18) !important;
}
.beta-corporate-theme.dark #services .bg-yellow-200\/20,
.beta-corporate-theme.dark #about .bg-yellow-200\/20 {
  background-color: rgba(207, 185, 220, 0.14) !important;
}

/* Section-level gradient washes — neutralize so the page navy shows. */
.beta-corporate-theme.dark #services.bg-gradient-to-br,
.beta-corporate-theme.dark #about.bg-gradient-to-br {
  background-image: none !important;
  background-color: transparent !important;
}

/* About callout (from-primary-50 to-accent-50) becomes a soft dark panel. */
.beta-corporate-theme.dark .from-primary-50.to-accent-50 {
  background-image: none !important;
  background-color: var(--c-surface-section) !important;
  border: 1px solid var(--c-border);
}

/* FAQ items on Services page (light + dark) */
.beta-corporate-theme .corp-faq-item {
  background-color: #ffffff;
  border: 1px solid rgba(0, 48, 133, 0.12);
}
.beta-corporate-theme .corp-faq-item.corp-faq-open {
  background-color: rgba(0, 48, 133, 0.03);
  border-color: rgba(0, 48, 133, 0.4);
}
.beta-corporate-theme.dark .corp-faq-item {
  background-color: rgba(23, 34, 58, 0.6) !important;
  border-color: var(--c-border) !important;
}
.beta-corporate-theme.dark .corp-faq-item.corp-faq-open {
  background-color: rgba(47, 126, 227, 0.12) !important;
  border-color: rgba(106, 160, 232, 0.5) !important;
}

/* Industry pills on Services page */
.beta-corporate-theme.dark [style*="rgba(0, 48, 133, 0.04)"] {
  background-color: rgba(106, 123, 198, 0.08) !important;
}

/* Inline-styled inputs with explicit white bg used in Contact form. */
.beta-corporate-theme.dark .corp-card input,
.beta-corporate-theme.dark .corp-card textarea,
.beta-corporate-theme.dark .corp-card select {
  background-color: var(--c-surface-card) !important;
  border-color: var(--c-border-strong) !important;
  color: var(--c-text-primary) !important;
}

/* =====================================================================
   WordPress-specific brand overrides for the compiled Tailwind utilities.
   The precompiled tailwind.css shipped with this theme uses 2025's indigo
   primary and orange accent. Remap the utility classes to ASI Corporate
   navy / orange so they match the React corporate variant.
   ===================================================================== */
.beta-corporate-theme .bg-primary       { background-color: #003085 !important; }
.beta-corporate-theme .bg-primary-50    { background-color: #e8eef9 !important; }
.beta-corporate-theme .bg-primary-100   { background-color: #d1dcef !important; }
.beta-corporate-theme .hover\:bg-primary-700:hover { background-color: #002567 !important; }
.beta-corporate-theme .hover\:bg-primary-600:hover { background-color: #002567 !important; }
.beta-corporate-theme .text-primary     { color: #003085 !important; }
.beta-corporate-theme .text-primary-100 { color: #d1dcef !important; }
.beta-corporate-theme .text-primary-700 { color: #002567 !important; }
.beta-corporate-theme .hover\:text-primary:hover      { color: #003085 !important; }
.beta-corporate-theme .hover\:text-primary-700:hover  { color: #002567 !important; }
.beta-corporate-theme .group:hover .group-hover\:text-primary { color: #003085 !important; }
.beta-corporate-theme .group:hover .group-hover\:bg-primary   { background-color: #003085 !important; }
.beta-corporate-theme .border-primary-200 { border-color: #b8d0ee !important; }
.beta-corporate-theme .hover\:border-primary:hover    { border-color: #003085 !important; }
.beta-corporate-theme .hover\:border-primary-300:hover{ border-color: #8fb0df !important; }
.beta-corporate-theme .focus\:ring-primary:focus      { --tw-ring-color: #003085 !important; }
.beta-corporate-theme .from-primary     { --tw-gradient-from: #003085 var(--tw-gradient-from-position) !important; }
.beta-corporate-theme .to-primary-700   { --tw-gradient-to: #001a4d var(--tw-gradient-to-position) !important; }
.beta-corporate-theme .from-primary-50  { --tw-gradient-from: #e8eef9 var(--tw-gradient-from-position) !important; }
.beta-corporate-theme .to-primary-50    { --tw-gradient-to: #e8eef9 var(--tw-gradient-to-position) !important; }

.beta-corporate-theme .bg-accent        { background-color: #F1A900 !important; }
.beta-corporate-theme .bg-accent-50     { background-color: #fff6e0 !important; }
.beta-corporate-theme .hover\:bg-accent-600:hover { background-color: #c88a00 !important; }
.beta-corporate-theme .text-accent      { color: #F1A900 !important; }
.beta-corporate-theme .text-accent-400  { color: #ffc04f !important; }
.beta-corporate-theme .text-accent-600  { color: #c88a00 !important; }
.beta-corporate-theme .text-accent-700  { color: #9e6e00 !important; }
.beta-corporate-theme .border-accent    { border-color: #F1A900 !important; }
.beta-corporate-theme .border-accent-200{ border-color: #fad27a !important; }
.beta-corporate-theme .hover\:text-accent:hover   { color: #F1A900 !important; }
.beta-corporate-theme .hover\:border-accent\/40:hover { border-color: rgba(241, 169, 0, 0.4) !important; }

/* FAQ chevron rotation hook (WP templates use data-faq-open attribute;
   React source already handles open state via .corp-faq-open class). */
.beta-corporate-theme .corp-faq-item[data-faq-open] [data-faq-chevron] { transform: rotate(180deg); }

/* Form inputs used throughout WP templates. React uses inline Tailwind on
   inputs, so .asi-input is a WP-only helper for PHP form markup. */
.beta-corporate-theme .asi-input {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.95rem;
  line-height: 1.4;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.beta-corporate-theme select.asi-input {
  padding: 0.85rem 2.25rem 0.85rem 1rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
html.dark .beta-corporate-theme select.asi-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23b6c2d4' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.beta-corporate-theme .asi-input:focus {
  outline: none;
  border-color: #003085;
  box-shadow: 0 0 0 3px rgba(0, 48, 133, 0.12);
}

/* ---------------- Dark mode (when .dark is applied to <html>) ----------
   Note: the page background gradient and decorative orbs are defined in
   the `.beta-corporate-theme.dark.beta-corporate-bg` block above. Those
   rules must NOT be overridden here or the periwinkle/steel-blue orbs
   will be wiped out and the page will collapse to a flat navy. */
html.dark .beta-corporate-theme { color: #e5e7eb; }
html.dark .beta-corporate-theme .bg-white { background-color: #111827 !important; }
html.dark .beta-corporate-theme .text-gray-900 { color: var(--c-text-primary) !important; }
html.dark .beta-corporate-theme .text-gray-800 { color: var(--c-text-primary) !important; }
html.dark .beta-corporate-theme .text-gray-700 { color: var(--c-text-primary) !important; }
html.dark .beta-corporate-theme .text-gray-600 { color: var(--c-text-secondary) !important; }
html.dark .beta-corporate-theme .text-gray-500 { color: var(--c-text-muted) !important; }
html.dark .beta-corporate-theme .corp-card {
  background-color: rgba(17, 24, 39, 0.75);
  border-color: rgba(191, 219, 254, 0.1);
}
html.dark .beta-corporate-theme .corp-icon-badge {
  background-color: rgba(255, 225, 99, 0.15);
  color: #FFE163;
}
html.dark .beta-corporate-theme .corp-faq-item {
  background-color: #111827;
  border-color: rgba(191, 219, 254, 0.1);
}
html.dark .beta-corporate-theme .asi-input {
  background-color: rgba(17, 24, 39, 0.6);
  border-color: #374151;
  color: var(--c-text-primary);
}
html.dark .beta-corporate-theme .border-gray-200 { border-color: #374151 !important; }
html.dark .beta-corporate-theme .bg-gray-50      { background-color: #1f2937 !important; }

/* Legal content readability */
.beta-corporate-theme .legal-content h2 { margin-top: 2rem; }
.beta-corporate-theme .legal-content h3 { margin-top: 1.25rem; }
.beta-corporate-theme .legal-content p,
.beta-corporate-theme .legal-content li { color: #374151; }
html.dark .beta-corporate-theme .legal-content p,
html.dark .beta-corporate-theme .legal-content li { color: #d1d5db; }

/* Theme toggle icon visibility */
html:not(.dark) .beta-corporate-theme .theme-icon-dark  { display: none; }
html.dark        .beta-corporate-theme .theme-icon-light { display: none; }

/* Logo pair visibility */
html:not(.dark) .beta-corporate-theme .corp-logo-dark  { display: none; }
html.dark        .beta-corporate-theme .corp-logo-light { display: none; }

/* Line-clamp fallback (also in Tailwind but harmless to restate). */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }