/* Task #1252602: Navigation Nuclear Overhaul — contrast fixes, centering, globe lang switcher, mega-btn--money */

/* ════════════════════════════════════════════════════════════════
   PART 1 — GLOBAL BLUE BUTTON CONTRAST FIX
   Every blue/primary button MUST have white text. No exceptions.
════════════════════════════════════════════════════════════════ */

/* Primary blue buttons — force white text absolutely */
a.btn,
button.btn,
.btn,
.btn-primary,
.button-primary,
.cta-button,
.cta-btn,
[class*="btn-primary"],
[class*="button-blue"],
[class*="btn-blue"],
.nav-cta-go-pro,
.nav-mobile-cta-pro,
.nav-mobile-go-pro,
.nav-upgrade-btn,
a.nav-cta-go-pro,
a.nav-mobile-go-pro,
a.nav-mobile-cta-pro,
.stripe-btn,
.checkout-btn,
.cta-primary,
.hero-cta,
.hero-btn,
.card-btn,
.pricing-cta,
.plan-cta,
.subscribe-btn,
.join-btn,
input[type="submit"],
button[type="submit"].primary,
.ping-cta-btn,
.modal-cta-btn,
.upgrade-cta,
.bottom-cta-btn,
.pro-upgrade-btn {
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
}

/* Any element with blue/primary background — force white text */
[style*="background:#2563eb"] ,
[style*="background: #2563eb"],
[style*="background:#1d4ed8"],
[style*="background: #1d4ed8"],
[style*="background:#1e40af"],
[style*="background: #1e40af"],
[style*="background:#3b82f6"],
[style*="background: #3b82f6"],
[style*="background-color:#2563eb"],
[style*="background-color: #2563eb"],
[style*="background-color:#1d4ed8"],
[style*="background-color: #1d4ed8"],
[style*="background-color:#1e40af"],
[style*="background-color: #1e40af"] {
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
}

/* ════════════════════════════════════════════════════════════════
   PART 2 — HEADER VERTICAL CENTERING
   All header elements must be vertically centered.
════════════════════════════════════════════════════════════════ */

header[role="banner"],
nav#mainNav,
.nav-brand-row {
    align-items: center \!important;
}

.nav-plain-auth {
    display: flex \!important;
    align-items: center \!important;
    gap: 0.5rem \!important;
}

/* ════════════════════════════════════════════════════════════════
   PART 3 — MEGA-BTN--MONEY (Plans button premium styling)
════════════════════════════════════════════════════════════════ */

.mega-btn--money {
    color: #1d4ed8 \!important;
    font-weight: 700 \!important;
    position: relative;
}

.mega-btn--money::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #2563eb;
    transition: width 0.2s ease;
    border-radius: 2px;
}

.mega-btn--money:hover::after,
.mega-btn--money.open::after {
    width: 80%;
}

/* ════════════════════════════════════════════════════════════════
   PART 4 — LANGUAGE SWITCHER STYLES
════════════════════════════════════════════════════════════════ */

.nav-lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-lang-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.35rem 0.4rem;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    color: #374151;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.nav-lang-btn:hover {
    background: rgba(0,0,0,0.06);
    color: #111827;
}

.nav-lang-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
    min-width: 130px;
    z-index: 9999;
    padding: 4px;
    animation: langDropIn 0.12s ease-out;
}

@keyframes langDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.nav-lang-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    font-size: 0.875rem;
    color: #111827 \!important;
    -webkit-text-fill-color: #111827 \!important;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 500;
    transition: background 0.1s;
}

.nav-lang-option:hover {
    background: #f3f4f6;
}

/* Hide lang switcher on mobile — use mobile menu instead */
@media (max-width: 900px) {
    .nav-lang-switcher {
        display: none \!important;
    }
}

/* ════════════════════════════════════════════════════════════════
   PART 5 — MOBILE MENU IMPROVEMENTS
   Login visible, Get Started full-width feel, no overlap
════════════════════════════════════════════════════════════════ */

.nav-mobile-cta-login {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #374151 \!important;
    -webkit-text-fill-color: #374151 \!important;
    text-decoration: none;
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 24px;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.6rem 1rem;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.nav-mobile-cta-login:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}

/* Mobile CTA row text — ensure white on blue */
.nav-mobile-cta-pro,
a.nav-mobile-cta-pro {
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
    background: #2563eb \!important;
}

/* ════════════════════════════════════════════════════════════════
   PART 6 — GET STARTED BUTTON (replacing Go Pro in header)
   Blue pill, white text, always visible
════════════════════════════════════════════════════════════════ */

.nav-cta-go-pro,
a.nav-cta-go-pro {
    background: #2563eb \!important;
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
    border-radius: 24px \!important;
    padding: 0.4rem 1rem \!important;
    font-weight: 700 \!important;
    font-size: 0.82rem \!important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: background 0.15s, transform 0.1s;
    border: none \!important;
    box-shadow: 0 1px 3px rgba(37,99,235,0.3);
    white-space: nowrap;
}

.nav-cta-go-pro:hover,
a.nav-cta-go-pro:hover {
    background: #1d4ed8 \!important;
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
    transform: translateY(-1px);
}

/* ════════════════════════════════════════════════════════════════
   PART 7 — WCAG AA CONTRAST SAFEGUARD
   Any remaining text on blue backgrounds must be white
════════════════════════════════════════════════════════════════ */

/* Blue section backgrounds */
.bg-blue-600 *, .bg-blue-700 *, .bg-blue-800 *,
[class*="bg-blue"] a, [class*="bg-blue"] p, [class*="bg-blue"] h1,
[class*="bg-blue"] h2, [class*="bg-blue"] h3, [class*="bg-blue"] span,
.section-blue *, .hero-blue * {
    /* Only override color for text elements, not icons/images */
    color: inherit;
}

/* Make sure all "Get Started" and "Go Pro" CTAs are readable */
.nav-cta-go-pro span,
.nav-mobile-cta-pro span,
.nav-upgrade-btn span {
    color: #ffffff \!important;
    -webkit-text-fill-color: #ffffff \!important;
}