/* ==========================================================================
   CALEXFIN MASTER STYLESHEET — CORPORATE ADVISORY DESIGN SYSTEM
   Luminous Light Canvas • Institutional Navy Accents • CALEXFIN Blue Focus
   ========================================================================== */
@import url('./design-system.css');

/* Global Accordion Marker Removal */
details summary::-webkit-details-marker {
  display: none;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #1D4ED8;
}

/* Page Transition Helpers */
#main-content {
  will-change: opacity, transform;
}

/* ==========================================================================
   UTILITY CASCADE & REMAPPINGS
   Ensures complete visual coherence with the reference light corporate theme
   ========================================================================== */

/* Main content sections that were previously hardcoded dark navy */
/* Text Color Remappings for Light Canvas (Strictly Excluding Contextual Hero Environments) */
/* Text Color Remappings for Light Canvas (Strictly Excluding Contextual Hero Environments, Buttons & Action Elements) */
section:not(footer):not(.clx-hero-env):not(#hero):not(:has(.calexfin-hero-env-bg-layer)) .text-\[\#F8FAFC\]:not(button):not(a):not(button *):not(a *),
section:not(footer):not(.clx-hero-env):not(#hero):not(:has(.calexfin-hero-env-bg-layer)) .text-white:not(button):not(button *):not(a.clx-btn):not(a.clx-btn *):not(a.btn):not(a.btn *):not(a[class*="bg-"]):not(a[class*="bg-"] *):not([class*="bg-blue"]):not([class*="bg-blue"] *):not([class*="from-blue"]):not([class*="from-blue"] *):not([class*="bg-[#1D4ED8]"]):not([class*="bg-[#1D4ED8]"] *):not([class*="bg-slate-900"]):not([class*="bg-slate-900"] *):not(.badge-white) {
  color: #0F172A !important;
}

/* Explicit Hero Contextual Environment Typography - Priority Protection */
section.clx-hero-env h1,
section#hero h1,
.clx-hero-env h1,
#hero h1,
section.clx-hero-env .text-white,
section#hero .text-white,
.clx-hero-env .text-white,
#hero .text-white {
  color: #FFFFFF !important;
}

section.clx-hero-env p,
section#hero p,
.clx-hero-env p,
#hero p {
  color: #E2E8F0 !important;
}

section:not(footer) .text-\[\#CBD5E1\] {
  color: #334155 !important;
}

section:not(footer) .text-\[\#9BB3D6\] {
  color: #64748B !important;
}

/* Border Remappings for Light Canvas */
section:not(footer) .border-\[\#284D8A\]\/50,
section:not(footer) .border-\[\#284D8A\]\/60,
section:not(footer) .border-\[\#284D8A\] {
  border-color: #E2E8F0 !important;
}

/* Form Inputs inside public website */
section:not(footer) input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
section:not(footer) select,
section:not(footer) textarea {
  background-color: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #0F172A !important;
}

section:not(footer) input::placeholder,
section:not(footer) textarea::placeholder {
  color: #94A3B8 !important;
}

section:not(footer) input:focus,
section:not(footer) select:focus,
section:not(footer) textarea:focus {
  border-color: #1D4ED8 !important;
  box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.14) !important;
  outline: none !important;
}

/* ==========================================================================
   SOLID BLUE & ROYAL-BLUE BUTTON SYSTEM (GLOBAL WHITE TEXT ENFORCEMENT)
   Guarantees pure white text (#FFFFFF) across all states, buttons, links,
   and nested elements without altering backgrounds, padding or dimensions.
   ========================================================================== */

.clx-btn-primary,
.btn-primary,
button.bg-\[\#1D4ED8\],
a.bg-\[\#1D4ED8\],
button[class*="bg-[#1D4ED8]"],
a[class*="bg-[#1D4ED8]"],
button[class*="bg-blue-600"],
a[class*="bg-blue-600"],
button[class*="bg-blue-700"],
a[class*="bg-blue-700"],
button[class*="from-blue"],
a[class*="from-blue"],
input[type="submit"][class*="bg-blue"],
input[type="submit"][class*="bg-[#1D4ED8]"],
input[type="submit"][class*="from-blue"],
input[type="button"][class*="bg-blue"],
input[type="button"][class*="bg-[#1D4ED8]"] {
  color: #FFFFFF !important;
}

/* Ensure all nested text elements (span, div, p, strong, b, label) inside solid blue buttons are white */
.clx-btn-primary *,
.btn-primary *,
button.bg-\[\#1D4ED8\] *,
a.bg-\[\#1D4ED8\] *,
button[class*="bg-[#1D4ED8]"] *,
a[class*="bg-[#1D4ED8]"] *,
button[class*="bg-blue-600"] *,
a[class*="bg-blue-600"] *,
button[class*="bg-blue-700"] *,
a[class*="bg-blue-700"] *,
button[class*="from-blue"] *,
a[class*="from-blue"] * {
  color: #FFFFFF !important;
}

/* Icons inside solid blue buttons default to white unless specifically tinted */
.clx-btn-primary i:not([class*="text-blue-"]),
.clx-btn-primary svg:not([class*="text-blue-"]),
button.bg-\[\#1D4ED8\] i:not([class*="text-blue-"]),
button.bg-\[\#1D4ED8\] svg:not([class*="text-blue-"]),
a.bg-\[\#1D4ED8\] i:not([class*="text-blue-"]),
a.bg-\[\#1D4ED8\] svg:not([class*="text-blue-"]),
button[class*="from-blue"] i:not([class*="text-blue-"]),
button[class*="from-blue"] svg:not([class*="text-blue-"]),
a[class*="from-blue"] i:not([class*="text-blue-"]),
a[class*="from-blue"] svg:not([class*="text-blue-"]) {
  color: #FFFFFF !important;
  stroke: currentColor;
}

/* Retain intentional accent icon tinting */
.clx-btn-primary i.text-blue-200,
.clx-btn-primary svg.text-blue-200,
button.bg-\[\#1D4ED8\] i.text-blue-200,
button.bg-\[\#1D4ED8\] svg.text-blue-200,
a.bg-\[\#1D4ED8\] i.text-blue-200,
a.bg-\[\#1D4ED8\] svg.text-blue-200 {
  color: #BFDBFE !important;
}

/* Complete Interactive States: Hover, Focus, Active, and Visited */
.clx-btn-primary:hover,
.clx-btn-primary:focus,
.clx-btn-primary:focus-visible,
.clx-btn-primary:active,
.clx-btn-primary:visited,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active,
.btn-primary:visited,
button.bg-\[\#1D4ED8\]:hover,
button.bg-\[\#1D4ED8\]:focus,
button.bg-\[\#1D4ED8\]:active,
a.bg-\[\#1D4ED8\]:hover,
a.bg-\[\#1D4ED8\]:focus,
a.bg-\[\#1D4ED8\]:active,
a.bg-\[\#1D4ED8\]:visited,
button[class*="bg-[#1D4ED8]"]:hover,
button[class*="bg-[#1D4ED8]"]:focus,
button[class*="bg-[#1D4ED8]"]:active,
a[class*="bg-[#1D4ED8]"]:hover,
a[class*="bg-[#1D4ED8]"]:focus,
a[class*="bg-[#1D4ED8]"]:active,
a[class*="bg-[#1D4ED8]"]:visited,
button[class*="bg-blue-600"]:hover,
button[class*="bg-blue-600"]:focus,
button[class*="bg-blue-600"]:active,
a[class*="bg-blue-600"]:hover,
a[class*="bg-blue-600"]:focus,
a[class*="bg-blue-600"]:active,
a[class*="bg-blue-600"]:visited,
button[class*="from-blue"]:hover,
button[class*="from-blue"]:focus,
button[class*="from-blue"]:active,
a[class*="from-blue"]:hover,
a[class*="from-blue"]:focus,
a[class*="from-blue"]:active,
a[class*="from-blue"]:visited {
  color: #FFFFFF !important;
}

.clx-btn-primary:hover *,
.clx-btn-primary:focus *,
.clx-btn-primary:active *,
button.bg-\[\#1D4ED8\]:hover *,
button.bg-\[\#1D4ED8\]:focus *,
button.bg-\[\#1D4ED8\]:active *,
a.bg-\[\#1D4ED8\]:hover *,
a.bg-\[\#1D4ED8\]:focus *,
a.bg-\[\#1D4ED8\]:active *,
button[class*="from-blue"]:hover *,
button[class*="from-blue"]:focus *,
button[class*="from-blue"]:active *,
a[class*="from-blue"]:hover *,
a[class*="from-blue"]:focus *,
a[class*="from-blue"]:active * {
  color: #FFFFFF !important;
}

/* Secondary CTA Buttons */
a.bg-\[\#173364\],
button.bg-\[\#173364\] {
  background: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  border-radius: 6px !important;
}
a.bg-\[\#173364\]:hover,
button.bg-\[\#173364\]:hover {
  background: #F8FAFC !important;
  color: #0F172A !important;
  border-color: #94A3B8 !important;
}

/* Floating Elements & Mega Menu */
.mega-menu-panel,
div.group:hover div.absolute {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 20px 45px -10px rgba(11, 31, 75, 0.15) !important;
}

/* Mobile Drawer */
#mobile-drawer {
  background: #FFFFFF !important;
  border-left: 1px solid #E2E8F0 !important;
}
#mobile-drawer a:not([class*="bg-blue"]):not([class*="bg-[#1D4ED8]"]):not(.clx-btn-primary):not([class*="from-blue"]) {
  color: #334155 !important;
}
#mobile-drawer a:not([class*="bg-blue"]):not([class*="bg-[#1D4ED8]"]):not(.clx-btn-primary):not([class*="from-blue"]):hover {
  background: #F8FAFC !important;
  color: #1D4ED8 !important;
}
#mobile-drawer span:not([class*="bg-blue"] *):not([class*="bg-[#1D4ED8]"] *):not(.clx-btn-primary *):not([class*="from-blue"] *) {
  color: #0F172A !important;
}


/* Hero Contextual Environment Typography Protection */
#hero,
.clx-hero-env {
  color: #FFFFFF;
}

#hero h1,
.clx-hero-env h1,
#hero .text-white,
.clx-hero-env .text-white {
  color: #FFFFFF !important;
}

#hero p,
.clx-hero-env p {
  color: #E2E8F0 !important;
}


/* ==========================================================================
   HERO CONTEXTUAL ENVIRONMENT TYPOGRAPHY PROTECTION
   Ensures white/light typography on dark navy hero banners across all pages
   while keeping light canvas section typography dark (#0F172A / #334155).
   ========================================================================== */

section.clx-hero-env,
section:has(.calexfin-hero-env-bg-layer),
section#hero {
  color: #FFFFFF;
}

/* Headings in Dark Hero Contexts */
section.clx-hero-env h1,
section:has(.calexfin-hero-env-bg-layer) h1,
section#hero h1,
.clx-hero-env h1,
#hero h1,
.clx-hero-env .hero-heading,
section:has(.calexfin-hero-env-bg-layer) .hero-heading,
section.clx-hero-env .text-white,
section:has(.calexfin-hero-env-bg-layer) .text-white,
section#hero .text-white {
  color: #FFFFFF !important;
  -webkit-text-fill-color: initial !important;
}

/* Subtitles and Descriptive Paragraphs in Dark Hero Contexts */
section.clx-hero-env p:not(.clx-btn *):not(.badge *):not(.clx-badge *),
section:has(.calexfin-hero-env-bg-layer) p:not(.clx-btn *):not(.badge *):not(.clx-badge *),
.clx-hero-env p:not(.clx-btn *):not(.badge *):not(.clx-badge *),
#hero p:not(.clx-btn *):not(.badge *):not(.clx-badge *),
section.clx-hero-env p.text-slate-200,
section.clx-hero-env p.text-slate-300,
section.clx-hero-env p.text-slate-400,
section.clx-hero-env p.text-slate-600 {
  color: #E2E8F0 !important;
}

/* Breadcrumbs in Dark Hero Contexts */
section.clx-hero-env nav,
section:has(.calexfin-hero-env-bg-layer) nav {
  color: #CBD5E1 !important;
}
section.clx-hero-env nav a,
section:has(.calexfin-hero-env-bg-layer) nav a {
  color: #CBD5E1 !important;
}
section.clx-hero-env nav a:hover,
section:has(.calexfin-hero-env-bg-layer) nav a:hover {
  color: #FFFFFF !important;
}
section.clx-hero-env nav span,
section:has(.calexfin-hero-env-bg-layer) nav span {
  color: #93C5FD !important;
}
section.clx-hero-env nav i,
section.clx-hero-env nav svg,
section:has(.calexfin-hero-env-bg-layer) nav svg {
  color: #94A3B8 !important;
}

/* Hero Pill Badges */
section.clx-hero-env .inline-flex.rounded-full,
section:has(.calexfin-hero-env-bg-layer) .inline-flex.rounded-full {
  background-color: rgba(255, 255, 255, 0.12) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #BFDBFE !important;
  backdrop-filter: blur(8px);
}
section.clx-hero-env .inline-flex.rounded-full i,
section:has(.calexfin-hero-env-bg-layer) .inline-flex.rounded-full i,
section.clx-hero-env .inline-flex.rounded-full svg,
section:has(.calexfin-hero-env-bg-layer) .inline-flex.rounded-full svg {
  color: #93C5FD !important;
}

/* ==========================================================================
   TEAM MEMBER DETAIL PAGE — SCOPED COMPONENT STYLES
   Ensures authoritative dark navy typography (#102A56), readable slate body (#334155),
   accessible muted labels (#64748B), high-contrast badges, and balanced layouts.
   ========================================================================== */

#team-detail-container,
.clx-team-detail-wrapper {
  color: #334155;
}

/* 1. Member Name & Primary Headings: Dark Navy (#102A56) */
#team-detail-container .team-detail-name,
#team-detail-container h1.team-detail-name,
#team-detail-container h1 {
  color: #102A56 !important;
  font-family: var(--clx-font-heading);
}

/* 2. Designation: Readable Dark Slate (#334155) */
#team-detail-container .team-detail-designation {
  color: #334155 !important;
  font-weight: 700;
}

/* 3. Biography & Narrative Body: Readable Dark Slate (#334155) */
#team-detail-container .team-detail-bio,
#team-detail-container .team-detail-narrative {
  color: #334155 !important;
  line-height: 1.7;
}

/* 4. Secondary Descriptions & Meta Labels: Muted Slate (#64748B) */
#team-detail-container .team-detail-meta,
#team-detail-container .team-detail-label,
#team-detail-container .team-detail-back-link {
  color: #64748B !important;
}
#team-detail-container .team-detail-back-link:hover {
  color: #1D4ED8 !important;
}

/* 5. Clean Light Card Containers */
#team-detail-container .team-detail-card {
  background-color: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 1.5rem;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.05);
}

#team-detail-container .team-detail-card h2,
#team-detail-container .team-detail-card h3,
#team-detail-container .team-detail-card h4 {
  color: #102A56 !important;
  font-family: var(--clx-font-heading);
}

/* 6. Contribution Panel (Dark Navy Institutional Highlight with White Text) */
#team-detail-container .team-contribution-card {
  background: linear-gradient(135deg, #071533 0%, #0B1F4B 50%, #10244F 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 1.5rem;
  box-shadow: 0 12px 32px -4px rgba(7, 21, 51, 0.28);
}
#team-detail-container .team-contribution-card h2 {
  color: #FFFFFF !important;
  font-family: var(--clx-font-heading);
}
#team-detail-container .team-contribution-card p.contribution-subtitle {
  color: #93C5FD !important;
}
#team-detail-container .team-contribution-card .contribution-text {
  color: #E2E8F0 !important;
  line-height: 1.7;
}

/* 7. Badges & Contrast System */
#team-detail-container .team-badge-leadership {
  background-color: #1D4ED8 !important;
  color: #FFFFFF !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  display: inline-block !important;
}

#team-detail-container .team-badge-blue {
  background-color: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}

#team-detail-container .team-badge-slate {
  background-color: #F1F5F9 !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
}

#team-detail-container .team-badge-emerald {
  background-color: #ECFDF5 !important;
  color: #047857 !important;
  border: 1px solid #A7F3D0 !important;
}

#team-detail-container .team-pill-expertise {
  background-color: #F8FAFC !important;
  color: #334155 !important;
  border: 1px solid #E2E8F0 !important;
}

#team-detail-container .team-pill-practice {
  background-color: #EFF6FF !important;
  color: #1D4ED8 !important;
  border: 1px solid #BFDBFE !important;
}

/* 8. Action Buttons (Preserve White Text on Solid/Gradient Blue) */
#team-detail-container .team-btn-primary {
  background: linear-gradient(135deg, #1D4ED8 0%, #1E40AF 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #1E40AF !important;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.25);
}
#team-detail-container .team-btn-primary *,
#team-detail-container .team-btn-primary span,
#team-detail-container .team-btn-primary i,
#team-detail-container .team-btn-primary svg {
  color: #FFFFFF !important;
}

#team-detail-container .team-btn-secondary {
  background-color: #FFFFFF !important;
  color: #334155 !important;
  border: 1px solid #CBD5E1 !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
}
#team-detail-container .team-btn-secondary:hover {
  background-color: #F8FAFC !important;
  color: #102A56 !important;
  border-color: #94A3B8 !important;
}