/* =========================================== */
/* GLOBAL FIX: Prevent White Text on White Buttons */
/* This file MUST load last to override all other styles */
/* =========================================== */

/* CRITICAL: Detect buttons with white backgrounds and force dark text */
/* This applies to ALL button types and variants */

/* Method 1: Buttons with explicit .bg-white class */
/* Consolidated: All bg-white button states grouped */
:is(.btn.bg-white, button.bg-white, .bg-white.btn, .bg-white button):is(:hover, :focus, :active) {
  color: #0f172a !important; /* Dark text on white background */
  background: #ffffff !important; /* Keep white background */
}

:is(.btn.bg-white, button.bg-white, .bg-white.btn, .bg-white button):is(:hover, :focus, :active) * {
  color: #0f172a !important; /* Dark text for all child elements */
}

/* Method 2: Outline buttons that should stay white on hover */
/* Consolidated: All outline button states grouped */
:is(.btn-outline-primary.stay-white-on-hover, .btn-outline-primary[data-stay-white], .btn-outline-secondary.stay-white-on-hover, .btn-outline-secondary[data-stay-white]):is(:hover, :focus, :active) {
  color: #0f172a !important; /* Dark text on white background */
  background: #ffffff !important; /* Keep white background */
}

:is(.btn-outline-primary.stay-white-on-hover, .btn-outline-primary[data-stay-white], .btn-outline-secondary.stay-white-on-hover, .btn-outline-secondary[data-stay-white]):hover::before,
:is(.btn-outline-primary.stay-white-on-hover, .btn-outline-primary[data-stay-white], .btn-outline-secondary.stay-white-on-hover, .btn-outline-secondary[data-stay-white]):hover::after {
  display: none !important; /* Hide gradient backgrounds */
}

:is(.btn-outline-primary.stay-white-on-hover, .btn-outline-primary[data-stay-white], .btn-outline-secondary.stay-white-on-hover, .btn-outline-secondary[data-stay-white]):is(:hover, :focus, :active) * {
  color: #0f172a !important; /* Dark text for all child elements */
}

/* Method 3: Outline buttons with white background class */
/* Method 3 & 4: Outline buttons (primary & secondary) with white background */
/* Consolidated: All outline+bg-white button states grouped */
:is(.btn-outline-primary.bg-white, .bg-white.btn-outline-primary, button.bg-white.btn-outline-primary, .bg-white button.btn-outline-primary, .btn-outline-secondary.bg-white, .bg-white.btn-outline-secondary, button.bg-white.btn-outline-secondary, .bg-white button.btn-outline-secondary):is(:hover, :focus, :active) {
  color: #0f172a !important; /* Dark text on white background */
  background: #ffffff !important; /* Keep white background */
}

:is(.btn-outline-primary.bg-white, .bg-white.btn-outline-primary, button.bg-white.btn-outline-primary, .bg-white button.btn-outline-primary, .btn-outline-secondary.bg-white, .bg-white.btn-outline-secondary, button.bg-white.btn-outline-secondary, .bg-white button.btn-outline-secondary):hover::before,
:is(.btn-outline-primary.bg-white, .bg-white.btn-outline-primary, button.bg-white.btn-outline-primary, .bg-white button.btn-outline-primary, .btn-outline-secondary.bg-white, .bg-white.btn-outline-secondary, button.bg-white.btn-outline-secondary, .bg-white button.btn-outline-secondary):hover::after {
  display: none !important; /* Hide gradient backgrounds */
}

:is(.btn-outline-primary.bg-white, .bg-white.btn-outline-primary, button.bg-white.btn-outline-primary, .bg-white button.btn-outline-primary, .btn-outline-secondary.bg-white, .bg-white.btn-outline-secondary, button.bg-white.btn-outline-secondary, .bg-white button.btn-outline-secondary):is(:hover, :focus, :active) * {
  color: #0f172a !important; /* Dark text for all child elements */
}

/* Method 5: Buttons with inline white background styles */
.btn[style*="background: white"]:hover,
.btn[style*="background-color: white"]:hover,
.btn[style*="background: #fff"]:hover,
.btn[style*="background-color: #fff"]:hover,
.btn[style*="background: #ffffff"]:hover,
.btn[style*="background-color: #ffffff"]:hover,
button[style*="background: white"]:hover,
button[style*="background-color: white"]:hover,
button[style*="background: #fff"]:hover,
button[style*="background-color: #fff"]:hover,
button[style*="background: #ffffff"]:hover,
button[style*="background-color: #ffffff"]:hover {
  color: #0f172a !important; /* Dark text on white background */
}

.btn[style*="background: white"]:hover *,
.btn[style*="background-color: white"]:hover *,
.btn[style*="background: #fff"]:hover *,
.btn[style*="background-color: #fff"]:hover *,
.btn[style*="background: #ffffff"]:hover *,
.btn[style*="background-color: #ffffff"]:hover *,
button[style*="background: white"]:hover *,
button[style*="background-color: white"]:hover *,
button[style*="background: #fff"]:hover *,
button[style*="background-color: #fff"]:hover *,
button[style*="background: #ffffff"]:hover *,
button[style*="background-color: #ffffff"]:hover * {
  color: #0f172a !important; /* Dark text for all child elements */
}

/* Method 6: Contact card buttons - ensure they have dark text if white */
.contact-card .btn-outline-primary:hover,
.contact-card .btn-outline-secondary:hover {
  /* Only apply dark text if button background is white */
}

.contact-card .btn-outline-primary.bg-white:hover,
.contact-card .btn-outline-secondary.bg-white:hover,
.contact-card .bg-white.btn-outline-primary:hover,
.contact-card .bg-white.btn-outline-secondary:hover {
  color: #0f172a !important;
  background: #ffffff !important;
}

.contact-card .btn-outline-primary.bg-white:hover *,
.contact-card .btn-outline-secondary.bg-white:hover *,
.contact-card .bg-white.btn-outline-primary:hover *,
.contact-card .bg-white.btn-outline-secondary:hover * {
  color: #0f172a !important;
}

/* Method 7: Override ALL white text rules when background is white */
/* This is the nuclear option - highest specificity */
.btn.bg-white:hover,
button.bg-white:hover,
.bg-white.btn:hover,
.bg-white button:hover,
.btn-outline-primary.bg-white:hover,
.bg-white.btn-outline-primary:hover,
.btn-outline-secondary.bg-white:hover,
.bg-white.btn-outline-secondary:hover {
  /* Force dark text - override any white text rules */
  color: #0f172a !important;
}

.btn.bg-white:hover *,
button.bg-white:hover *,
.bg-white.btn:hover *,
.bg-white button:hover *,
.btn-outline-primary.bg-white:hover *,
.bg-white.btn-outline-primary:hover *,
.btn-outline-secondary.bg-white:hover *,
.bg-white.btn-outline-secondary:hover * {
  color: #0f172a !important;
}

/* Method 8: CRITICAL - Fix for .btn-outline-primary buttons on white cards */
/* These buttons have white background by default, so if gradient doesn't show, use dark text */
.contact-card .btn-outline-primary,
.card .btn-outline-primary,
.bg-light .btn-outline-primary,
.bg-white .btn-outline-primary {
  /* Ensure gradient shows OR use dark text fallback */
  position: relative;
}

/* If button is on white background and gradient might not show, use dark text */
.contact-card .btn-outline-primary:hover,
.card .btn-outline-primary:hover,
.bg-light .btn-outline-primary:hover,
.bg-white .btn-outline-primary:hover {
  /* Check if ::before gradient is visible - if not, use dark text */
  /* Since CSS can't detect visibility, we'll ensure gradient shows AND add fallback */
  color: #6366f1 !important; /* Purple text as fallback - visible on white */
  background: transparent !important;
}

/* Ensure gradient shows properly */
.contact-card .btn-outline-primary:hover::before,
.card .btn-outline-primary:hover::before,
.bg-light .btn-outline-primary:hover::before,
.bg-white .btn-outline-primary:hover::before {
  z-index: 0 !important;
  opacity: 1 !important;
}

/* If gradient is visible, use white text */
.contact-card .btn-outline-primary:hover::before + *,
.contact-card .btn-outline-primary:hover > * {
  position: relative;
  z-index: 1;
  /* Only use white text if gradient background is actually visible */
}

/* NUCLEAR OPTION: Force dark text for outline buttons unless gradient is explicitly working */
/* This ensures readability - if gradient fails, text is still visible */
.contact-card .btn-outline-primary:hover,
.card .btn-outline-primary:hover,
.bg-light .btn-outline-primary:hover,
.bg-white .btn-outline-primary:hover {
  /* Use purple text (matches border) - always visible on white */
  color: #6366f1 !important;
  background: transparent !important;
}

.contact-card .btn-outline-primary:hover *,
.card .btn-outline-primary:hover *,
.bg-light .btn-outline-primary:hover *,
.bg-white .btn-outline-primary:hover * {
  color: #6366f1 !important;
}

/* BUT: If gradient IS working, allow white text */
/* We'll detect this by checking if ::before has left: 0 */
.contact-card .btn-outline-primary:hover::before {
  left: 0 !important; /* Force gradient to show */
}

/* When gradient shows, use white text */
.contact-card .btn-outline-primary:hover::before[style*="left: 0"],
.contact-card .btn-outline-primary:hover::before {
  /* Gradient is showing, so text can be white */
}

/* Final override: Use purple text for outline buttons on white backgrounds */
/* This ensures they're always readable */
.contact-card .btn-outline-primary:hover,
.card .btn-outline-primary:hover,
.bg-light .btn-outline-primary:hover,
.bg-white .btn-outline-primary:hover,
.contact-card .btn-outline-primary:focus,
.card .btn-outline-primary:focus,
.bg-light .btn-outline-primary:focus,
.bg-white .btn-outline-primary:focus {
  color: #6366f1 !important; /* Purple text - always readable on white */
  background: transparent !important;
  border-color: #6366f1 !important;
}

.contact-card .btn-outline-primary:hover *,
.card .btn-outline-primary:hover *,
.bg-light .btn-outline-primary:hover *,
.bg-white .btn-outline-primary:hover *,
.contact-card .btn-outline-primary:focus *,
.card .btn-outline-primary:focus *,
.bg-light .btn-outline-primary:focus *,
.bg-white .btn-outline-primary:focus * {
  color: #6366f1 !important;
}

/* =========================================== */
/* CRITICAL: Purple Buttons MUST Have White Text */
/* This applies to ALL button types: <a>, <button>, <span>, etc. */
/* =========================================== */

/* PRIMARY BUTTONS - Purple gradient background with WHITE text */
/* Consolidated: All primary button selectors grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary) {
  color: #ffffff !important; /* WHITE text on purple gradient */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
}

/* All child elements within primary buttons - WHITE text */
/* Consolidated: All child selectors grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary) *,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary) i,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary) span {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* PRIMARY BUTTONS - Hover state - Darker purple gradient with WHITE text */
/* Consolidated: All hover/focus states grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary):is(:hover, :focus) {
  color: #ffffff !important; /* WHITE text on darker purple gradient */
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
  border: none !important;
}

/* All child elements within primary buttons on hover - WHITE text */
/* Consolidated: All child selectors grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary):is(:hover, :focus) *,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary):is(:hover, :focus) i,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary):is(:hover, :focus) span {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* PRIMARY BUTTONS - Active state - Maintain WHITE text */
/* Consolidated: All active states grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary):active {
  color: #ffffff !important; /* WHITE text on active state */
  background: linear-gradient(135deg, #6d28d9 0%, #9333ea 100%) !important;
  border: none !important;
}

/* All child elements within primary buttons on active - WHITE text */
/* Consolidated: All child selectors grouped */
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary, .btn.btn-primary, a.btn.btn-primary, button.btn.btn-primary, span.btn.btn-primary):active *,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary):active i,
:is(.btn-primary, a.btn-primary, button.btn-primary, span.btn-primary):active span {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* OUTLINE PRIMARY BUTTONS - Purple text default, WHITE text on hover */
.btn-outline-primary,
a.btn-outline-primary,
button.btn-outline-primary,
span.btn-outline-primary {
  color: #6366f1 !important; /* Purple text by default */
  background: transparent !important;
  border: 2px solid #6366f1 !important;
}

/* All child elements within outline primary buttons - Purple text default */
.btn-outline-primary *,
a.btn-outline-primary *,
button.btn-outline-primary *,
span.btn-outline-primary *,
.btn-outline-primary i,
a.btn-outline-primary i,
button.btn-outline-primary i,
span.btn-outline-primary i,
.btn-outline-primary span,
a.btn-outline-primary span,
button.btn-outline-primary span,
span.btn-outline-primary span {
  color: #6366f1 !important; /* Purple text for all child elements */
}

/* OUTLINE PRIMARY BUTTONS - Hover state - Purple gradient background with WHITE text */
.btn-outline-primary:hover,
.btn-outline-primary:focus,
a.btn-outline-primary:hover,
a.btn-outline-primary:focus,
button.btn-outline-primary:hover,
button.btn-outline-primary:focus,
span.btn-outline-primary:hover,
span.btn-outline-primary:focus {
  color: #ffffff !important; /* WHITE text on purple gradient hover */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border-color: #6366f1 !important;
}

/* All child elements within outline primary buttons on hover - WHITE text */
.btn-outline-primary:hover *,
.btn-outline-primary:focus *,
a.btn-outline-primary:hover *,
a.btn-outline-primary:focus *,
button.btn-outline-primary:hover *,
button.btn-outline-primary:focus *,
span.btn-outline-primary:hover *,
span.btn-outline-primary:focus *,
.btn-outline-primary:hover i,
.btn-outline-primary:focus i,
a.btn-outline-primary:hover i,
a.btn-outline-primary:focus i,
button.btn-outline-primary:hover i,
button.btn-outline-primary:focus i,
span.btn-outline-primary:hover i,
span.btn-outline-primary:focus i,
.btn-outline-primary:hover span,
.btn-outline-primary:focus span,
a.btn-outline-primary:hover span,
a.btn-outline-primary:focus span,
button.btn-outline-primary:hover span,
button.btn-outline-primary:focus span,
span.btn-outline-primary:hover span,
span.btn-outline-primary:focus span {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* OUTLINE PRIMARY BUTTONS - Active state - Maintain WHITE text */
.btn-outline-primary:active,
a.btn-outline-primary:active,
button.btn-outline-primary:active,
span.btn-outline-primary:active {
  color: #ffffff !important; /* WHITE text on active state */
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
  border-color: #6366f1 !important;
}

/* All child elements within outline primary buttons on active - WHITE text */
.btn-outline-primary:active *,
a.btn-outline-primary:active *,
button.btn-outline-primary:active *,
span.btn-outline-primary:active *,
.btn-outline-primary:active i,
a.btn-outline-primary:active i,
button.btn-outline-primary:active i,
span.btn-outline-primary:active i,
.btn-outline-primary:active span,
a.btn-outline-primary:active span,
button.btn-outline-primary:active span,
span.btn-outline-primary:active span {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* SMALL & LARGE PRIMARY BUTTONS - Same rules apply */
/* Consolidated: All size variants grouped */
:is(.btn-primary.btn-sm, .btn-sm.btn-primary, span.btn-primary.btn-sm, span.btn-sm.btn-primary, .btn-primary.btn-lg, .btn-lg.btn-primary, a.btn-primary.btn-lg, button.btn-primary.btn-lg, span.btn-primary.btn-lg) {
  color: #ffffff !important; /* WHITE text */
}

:is(.btn-primary.btn-sm, .btn-sm.btn-primary, span.btn-primary.btn-sm, span.btn-sm.btn-primary, .btn-primary.btn-lg, .btn-lg.btn-primary, a.btn-primary.btn-lg, button.btn-primary.btn-lg, span.btn-primary.btn-lg) * {
  color: #ffffff !important; /* WHITE text for all child elements */
}

:is(.btn-primary.btn-sm, .btn-sm.btn-primary, span.btn-primary.btn-sm, span.btn-sm.btn-primary, .btn-primary.btn-lg, .btn-lg.btn-primary, a.btn-primary.btn-lg, button.btn-primary.btn-lg, span.btn-primary.btn-lg):hover {
  color: #ffffff !important; /* WHITE text on hover */
}

:is(.btn-primary.btn-sm, .btn-sm.btn-primary, span.btn-primary.btn-sm, span.btn-sm.btn-primary, .btn-primary.btn-lg, .btn-lg.btn-primary, a.btn-primary.btn-lg, button.btn-primary.btn-lg, span.btn-primary.btn-lg):hover * {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* =========================================== */
/* SPECIFIC CONTEXTS - "View All Projects" and Related Buttons */
/* =========================================== */

/* Related Projects section buttons */
.text-center .btn-primary,
.text-center a.btn-primary,
.text-center button.btn-primary,
section .btn-primary,
section a.btn-primary,
section button.btn-primary,
.container .btn-primary,
.container a.btn-primary,
.container button.btn-primary {
  color: #ffffff !important; /* WHITE text */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
}

.text-center .btn-primary *,
.text-center a.btn-primary *,
.text-center button.btn-primary *,
section .btn-primary *,
section a.btn-primary *,
section button.btn-primary *,
.container .btn-primary *,
.container a.btn-primary *,
.container button.btn-primary * {
  color: #ffffff !important; /* WHITE text for all child elements */
}

.text-center .btn-primary:hover,
.text-center a.btn-primary:hover,
.text-center button.btn-primary:hover,
section .btn-primary:hover,
section a.btn-primary:hover,
section button.btn-primary:hover,
.container .btn-primary:hover,
.container a.btn-primary:hover,
.container button.btn-primary:hover {
  color: #ffffff !important; /* WHITE text on hover */
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
}

.text-center .btn-primary:hover *,
.text-center a.btn-primary:hover *,
.text-center button.btn-primary:hover *,
section .btn-primary:hover *,
section a.btn-primary:hover *,
section button.btn-primary:hover *,
.container .btn-primary:hover *,
.container a.btn-primary:hover *,
.container button.btn-primary:hover * {
  color: #ffffff !important; /* WHITE text for all child elements */
}

/* Buttons with margin utilities */
.btn-primary.me-3,
.btn-primary.mb-2,
a.btn-primary.me-3,
a.btn-primary.mb-2,
button.btn-primary.me-3,
button.btn-primary.mb-2 {
  color: #ffffff !important; /* WHITE text */
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
}

.btn-primary.me-3 *,
.btn-primary.mb-2 *,
a.btn-primary.me-3 *,
a.btn-primary.mb-2 *,
button.btn-primary.me-3 *,
button.btn-primary.mb-2 * {
  color: #ffffff !important; /* WHITE text for all child elements */
}

.btn-primary.me-3:hover,
.btn-primary.mb-2:hover,
a.btn-primary.me-3:hover,
a.btn-primary.mb-2:hover,
button.btn-primary.me-3:hover,
button.btn-primary.mb-2:hover {
  color: #ffffff !important; /* WHITE text on hover */
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
}

.btn-primary.me-3:hover *,
.btn-primary.mb-2:hover *,
a.btn-primary.me-3:hover *,
a.btn-primary.mb-2:hover *,
button.btn-primary.me-3:hover *,
button.btn-primary.mb-2:hover * {
  color: #ffffff !important; /* WHITE text for all child elements */
}