/* =============================================================================
   ARC bridge — moves the older Tailwind subpages onto the new design language
   without rewriting their markup. Loaded after custom.css on every page except
   the homepage (arc_component_assets(true) adds html.arc-bridge).
   - Typography: Montserrat display + Figtree body (replaces Lora / DM Sans)
   - The first section inside <main> becomes a navy "aurora" hero
   custom.css remaps dark utilities with !important, so hero overrides need it too.
   ============================================================================= */

:root {
  --font-heading: var(--font-display);
  --font-body: var(--font-sans);
}

.arc-bridge body { background: var(--white); }
.arc-bridge main h1, .arc-bridge main h2, .arc-bridge main h3 { font-weight: 800; letter-spacing: -0.03em; }
.arc-bridge main h2 { line-height: 1.12; }
.arc-bridge main section:not(:first-child) h2.text-2xl,
.arc-bridge main section:not(:first-child) h2.text-3xl { font-size: clamp(1.9rem, 1.3rem + 1.8vw, 2.8rem) !important; }

/* --- Hero ------------------------------------------------------------------- */
.arc-bridge main > section:first-child {
  position: relative; overflow: hidden; isolation: isolate;
  background: radial-gradient(120% 120% at 85% -10%, #21466f 0%, var(--navy-500) 45%, var(--navy-700) 100%) !important;
  border-bottom: 0 !important;
  color: var(--navy-100);
}
.arc-bridge main > section:first-child::before,
.arc-bridge main > section:first-child::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); pointer-events: none;
}
.arc-bridge main > section:first-child::before {
  width: 60vw; height: 60vw; max-width: 880px; max-height: 880px; right: -14vw; top: -34vw;
  background: radial-gradient(circle, rgba(116,169,172,.5), rgba(116,169,172,0) 65%);
  animation: arcDrift1 18s ease-in-out infinite alternate;
}
.arc-bridge main > section:first-child::after {
  width: 44vw; height: 44vw; max-width: 640px; max-height: 640px; left: -14vw; bottom: -30vw;
  background: radial-gradient(circle, rgba(199,86,52,.4), rgba(199,86,52,0) 65%);
  animation: arcDrift2 22s ease-in-out infinite alternate;
}
/* the old light washes / dot patterns */
.arc-bridge main > section:first-child > .absolute { display: none !important; }
.arc-bridge main > section:first-child > div { padding-top: 96px !important; padding-bottom: 104px !important; }

.arc-bridge main > section:first-child { color: var(--navy-100) !important; }
.arc-bridge main > section:first-child * { color: inherit !important; }
.arc-bridge main > section:first-child h1 {
  color: var(--white) !important; font-family: var(--font-display) !important; font-weight: 900 !important;
  font-size: clamp(2.6rem, 1.3rem + 4.2vw, 5.2rem) !important; line-height: 1 !important; letter-spacing: -0.045em !important;
  max-width: 18ch; text-wrap: balance;
}
.arc-bridge main > section:first-child h2 { color: var(--white) !important; }
.arc-bridge main > section:first-child strong { color: var(--white) !important; }
.arc-bridge main > section:first-child p { color: var(--navy-100) !important; }
.arc-bridge main > section:first-child p.text-lg,
.arc-bridge main > section:first-child p.sm\:text-lg { font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem) !important; line-height: 1.65 !important; }
.arc-bridge main > section:first-child nav[aria-label="Breadcrumb"] { color: var(--navy-200) !important; letter-spacing: .08em; }
.arc-bridge main > section:first-child nav[aria-label="Breadcrumb"] a:hover { color: var(--teal-300) !important; }
.arc-bridge main > section:first-child .text-arc-orange { color: #f0a488 !important; }
.arc-bridge main > section:first-child .text-arc-navy\/55,
.arc-bridge main > section:first-child .text-white\/55 { color: var(--navy-200) !important; }
/* pills, chips and boxes that were light-on-light */
.arc-bridge main > section:first-child [class*="bg-white"],
.arc-bridge main > section:first-child [class*="bg-arc-orange/10"],
.arc-bridge main > section:first-child .rounded-full:not(.bg-arc-orange) {
  background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.16) !important; --tw-ring-color: rgba(255,255,255,.12) !important;
}
.arc-bridge main > section:first-child [class*="border-"] { border-color: rgba(255,255,255,.16) !important; }
.arc-bridge main > section:first-child a.bg-arc-orange { color: var(--white) !important; box-shadow: 0 16px 40px -14px rgba(199,86,52,.7); }
.arc-bridge main > section:first-child a.bg-arc-orange,
.arc-bridge main > section:first-child a.rounded-full { padding: 14px 26px !important; font-size: .95rem !important; }
/* hero images (e.g. insights posts) */
.arc-bridge main > section:first-child img { border-radius: 20px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.6); }

/* --- Body sections ---------------------------------------------------------- */
.arc-bridge main .rounded-3xl { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.arc-bridge main a.rounded-3xl:hover, .arc-bridge main article.rounded-3xl:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10,30,63,.35); }
.arc-bridge main a.bg-arc-orange { transition: transform .35s cubic-bezier(.16,1,.3,1), opacity .2s; }
.arc-bridge main a.bg-arc-orange:hover { transform: translateY(-2px); opacity: 1 !important; }

@media (prefers-reduced-motion: reduce) {
  .arc-bridge main > section:first-child::before, .arc-bridge main > section:first-child::after { animation: none; }
}

/* --- One grid for every inner page -------------------------------------------
   The older pages mixed max-w-3xl…7xl section wrappers, so content started at a
   different x on every page. All section wrappers now match the header and
   homepage: 1200px max, 32px gutters (20px on phones). Long-form text keeps a
   readable measure by limiting the text blocks, not the column, so everything
   stays left-aligned to the same edge while tables and card grids use the width. */
.arc-bridge main [class*="mx-auto"][class*="max-w-"][class*="px-4"] {
  max-width: 1200px !important;
  padding-left: 32px !important;
  padding-right: 32px !important;
}
.arc-bridge main [class*="mx-auto"][class*="max-w-"][class*="px-4"] [class*="mx-auto"][class*="max-w-"][class*="px-4"] {
  padding-left: 0 !important; padding-right: 0 !important;       /* nested wrappers: no double gutter */
}
.arc-bridge main [class*="mx-auto"][class*="max-w-"][class*="px-4"]:not(.text-center) > :is(p, ul, ol, blockquote, h2, h3),
.arc-bridge main .arc-prose > :is(p, ul, ol, blockquote, h2, h3, h4, figure) {
  max-width: 46rem;
}
.arc-bridge main .arc-prose { max-width: none !important; }
@media (max-width: 640px) {
  .arc-bridge main [class*="mx-auto"][class*="max-w-"][class*="px-4"] { padding-left: 20px !important; padding-right: 20px !important; }
}