/* #2728 — candidate-facing surfaces carry no continuous/infinite animations
   (see docs/design-guide/DESIGN_GUIDELINES.md). Decorative infinite loops were
   removed from this file; activity-bound ones (spinners, skeleton/upload
   progress) were kept because they only run while an operation is in flight. */
/*
 * CAREER PORTAL SECTION NAVIGATION
 * Hybrid progressive navigation with glassmorphism
 * Version: 1.0
 * Last Updated: 2025-10-23
 */

/* ============================================================================
   CSS VARIABLES
   ============================================================================ */
:root {
    /* Navigation styles - using dark neutral to complement company colors */
    --career-nav-bg: rgba(10, 10, 10, 0.85);
    --career-nav-bg-scrolled: rgba(10, 10, 10, 0.95);
    --career-nav-border: rgba(255, 255, 255, 0.12);
    --career-nav-text: rgba(255, 255, 255, 0.90);
    --career-nav-text-hover: rgba(255, 255, 255, 1);
    --career-nav-shadow: rgba(0, 0, 0, 0.15);
    --career-nav-blur: 24px;
    --career-nav-height: 72px;
    --career-nav-mobile-height: 64px;

    /* NOTE: Dynamic colors (--career-nav-active, --career-nav-highlight, --career-nav-glow)
       are now used directly as var(--color-primary-500) throughout this file
       instead of being redefined here. This ensures they always use the
       company colors defined in the blade template inline styles. */
}

/* ============================================================================
   SKIP TO CONTENT (Accessibility)
   ============================================================================ */
.skip-to-content {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--color-primary-500, #3b82f6);
    color: white;
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    font-weight: 600;
    z-index: 10000;
    border-radius: 0 0 0.5rem 0;
}

.skip-to-content:focus {
    top: 0;
    outline: 3px solid white;
    outline-offset: 2px;
}

/* ============================================================================
   MAIN NAVIGATION
   ============================================================================ */
.career-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    height: var(--career-nav-height);
    background: var(--career-nav-bg);
    backdrop-filter: saturate(180%) blur(var(--career-nav-blur));
    -webkit-backdrop-filter: saturate(180%) blur(var(--career-nav-blur));
    border-bottom: 1px solid var(--career-nav-border);

    /* PREMIUM GLOW EFFECT - Uses primary color */
    box-shadow:
        0 4px 24px var(--career-nav-shadow),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset,
        0 8px 32px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.12);

    /* ALWAYS VISIBLE */
    transform: translateY(0);
    opacity: 1;
    visibility: visible;

    transition:
        box-shadow 400ms cubic-bezier(0.4, 0, 0.2, 1),
        background 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ENHANCED GLOW WHEN SCROLLED - Uses primary color */
.career-nav[data-scrolled="true"] {
    background: var(--career-nav-bg-scrolled);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset,
        0 12px 48px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.2),
        0 0 80px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.08);
}

/* Progress Bar */
.career-nav__progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}

.career-nav__progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(
        90deg,
        var(--color-primary-500, #3b82f6) 0%,
        var(--color-secondary-500, #10b981) 50%,
        var(--color-primary-500, #3b82f6) 100%
    );
    background-size: 200% 100%;
    transition: width 0.15s ease-out;

    /* ENHANCED GLOW - Uses primary color */
    box-shadow:
        0 0 16px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.5),
        0 0 32px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.3);

    /* #2728: shimmer loop removed — the bar keeps the static glow above. */
}

/* Container */
.career-nav__container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Brand/Logo (Mobile) */
.career-nav__brand {
    display: none;
}

.career-nav__logo {
    height: 32px;
    width: auto;
}

/* Desktop Navigation Menu */
.career-nav__menu {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.career-nav__link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0.875rem 1.5rem;
    color: var(--career-nav-text);
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: 10px;
    transition: all 350ms cubic-bezier(0.34, 1.56, 0.64, 1);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.career-nav__link::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    opacity: 0;
    transition: opacity 350ms ease;
}

.career-nav__link:hover::before {
    opacity: 1;
}

.career-nav__link:hover {
    color: var(--career-nav-text-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.1);
}

.career-nav__link:focus {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
    color: var(--career-nav-text-hover);
}

.career-nav__link.active {
    color: var(--color-primary-500, #3b82f6);
}

.career-nav__link.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 2px;
    background: var(--color-primary-500, #3b82f6);
    border-radius: 2px 2px 0 0;
}

.career-nav__link--highlight {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.2) 0%,
        rgba(var(--color-primary-500-rgb), 0.25) 100%
    );
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    border: 1px solid rgba(var(--color-primary-500-rgb), 0.3);
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-500-rgb), 0.2) inset,
        0 4px 16px rgba(var(--color-primary-500-rgb), 0.15);
}

.career-nav__link--highlight:hover {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-500-rgb), 0.3) 0%,
        rgba(var(--color-primary-500-rgb), 0.35) 100%
    );
    color: rgba(255, 255, 255, 1);
    transform: translateY(-3px) scale(1.03);
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-500-rgb), 0.4),
        0 8px 24px rgba(var(--color-primary-500-rgb), 0.25),
        0 0 40px rgba(var(--color-primary-500-rgb), 0.15);
}

.career-nav__link--highlight.active {
    color: rgba(255, 255, 255, 1);
}

.career-nav__link--highlight.active::after {
    background: var(--color-primary-600);
}

/* Mobile Toggle (Hamburger) */
.career-nav__toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 32px;
    height: 32px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    z-index: 10;
}

.career-nav__toggle:focus {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
    border-radius: 4px;
}

.career-nav__toggle-icon {
    width: 100%;
    height: 2px;
    background: var(--career-nav-text);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.career-nav__toggle[aria-expanded="true"] .career-nav__toggle-icon:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.career-nav__toggle[aria-expanded="true"] .career-nav__toggle-icon:nth-child(2) {
    opacity: 0;
}

.career-nav__toggle[aria-expanded="true"] .career-nav__toggle-icon:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Mobile Full-Screen Menu */
.career-nav__mobile-menu {
    position: fixed;
    top: var(--career-nav-mobile-height);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, 0.98);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    transform: translateX(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0.4s;
    overflow-y: auto;
}

.career-nav__mobile-menu[aria-hidden="false"] {
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
}

.career-nav__mobile-content {
    padding: 2rem 1.5rem;
    min-height: 100%;
    display: flex;
    align-items: center;
}

.career-nav__mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

.career-nav__mobile-link {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 1rem;
    color: var(--career-nav-text);
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.3s ease;
}

.career-nav__mobile-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--career-nav-text-hover);
    transform: translateX(8px);
}

.career-nav__mobile-link:focus {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

.career-nav__mobile-link.active {
    background: rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.15);
    color: var(--color-primary-500, #3b82f6);
    border-left: 3px solid var(--color-primary-500, #3b82f6);
}

.career-nav__mobile-link--highlight {
    background: rgba(var(--color-primary-500-rgb), 0.15);
    color: rgba(255, 255, 255, 0.95);
    border-left: 3px solid var(--color-primary-600);
}

.career-nav__mobile-link--highlight:hover {
    background: rgba(var(--color-primary-500-rgb), 0.25);
    color: rgba(255, 255, 255, 1);
}

.career-nav__mobile-link--highlight.active {
    color: rgba(255, 255, 255, 1);
}

.career-nav__mobile-number {
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
    min-width: 2rem;
}

.career-nav__mobile-text {
    flex: 1;
}

/* ============================================================================
   FLOATING NAVIGATION DOTS (Mobile Only)
   ============================================================================ */
.career-dots {
    position: fixed;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    display: none;
}

.career-dots__list {
    list-style: none;
    margin: 0;
    padding: 0.75rem;
    background: var(--career-nav-bg);
    backdrop-filter: blur(var(--career-nav-blur));
    -webkit-backdrop-filter: blur(var(--career-nav-blur));
    border-radius: 2rem;
    border: 1px solid var(--career-nav-border);
    box-shadow: 0 4px 20px var(--career-nav-shadow);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.career-dots__dot {
    display: block;
    width: 10px;
    height: 10px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: all 0.3s ease;
    position: relative;
}

.career-dots__dot:hover {
    background: rgba(255, 255, 255, 0.6);
    transform: scale(1.3);
}

.career-dots__dot:focus {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 3px;
}

.career-dots__dot.active {
    background: var(--color-primary-500, #3b82f6);
    box-shadow: 0 0 10px var(--color-primary-500, #3b82f6);
}

.career-dots__dot.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-primary-500, #3b82f6);
    border-radius: 50%;
    opacity: 0.5;
}

/* ============================================================================
   RESPONSIVE DESIGN
   ============================================================================ */

/* Below 1200px the 9-item menu (longer still when localized) cannot fit
   the bar — use the mobile toggle + panel */
@media screen and (max-width: 1199px) {
    .career-nav__brand {
        display: block;
    }

    .career-nav__menu {
        display: none;
    }

    .career-nav__toggle {
        display: flex;
    }
}

/* Mobile (< 768px) */
@media screen and (max-width: 767px) {
    :root {
        --career-nav-height: var(--career-nav-mobile-height);
    }

    .career-nav__brand {
        display: block;
    }

    .career-nav__menu {
        display: none;
    }

    .career-nav__toggle {
        display: flex;
    }

    .career-nav__container {
        padding: 0 1rem;
    }

    .career-dots {
        display: block;
    }
}

/* Large screens (> 1400px) */
@media screen and (min-width: 1400px) {
    .career-nav__link {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* ============================================================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
    .career-nav,
    .career-nav__mobile-menu,
    .career-nav__link,
    .career-nav__mobile-link,
    .career-dots__dot,
    .career-nav__toggle-icon {
        transition: none;
        animation: none;
    }

    .career-nav__progress-bar {
        transition: width 0.05s linear;
    }
}

/* ============================================================================
   HIGH CONTRAST MODE (Accessibility)
   ============================================================================ */
@media (prefers-contrast: high) {
    .career-nav {
        background: rgba(0, 0, 0, 0.95);
        border-bottom: 2px solid white;
    }

    .career-nav__link.active,
    .career-nav__link:focus {
        outline-width: 3px;
        outline-offset: 4px;
    }
}

/* ============================================================================
   LIGHT THEME OVERRIDES
   ============================================================================ */
[data-theme="light"] {
    --career-nav-bg: rgba(255, 255, 255, 0.85);
    --career-nav-bg-scrolled: rgba(255, 255, 255, 0.95);
    --career-nav-border: rgba(0, 0, 0, 0.12);
    --career-nav-text: rgba(24, 24, 27, 0.90);
    --career-nav-text-hover: rgba(24, 24, 27, 1);
    --career-nav-shadow: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .career-nav {
    box-shadow:
        0 4px 24px var(--career-nav-shadow),
        0 0 0 1px rgba(0, 0, 0, 0.04) inset,
        0 8px 32px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.08);
}

[data-theme="light"] .career-nav[data-scrolled="true"] {
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 0 0 1px rgba(0, 0, 0, 0.06) inset,
        0 12px 48px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.15),
        0 0 80px rgba(var(--color-primary-500-rgb, 59, 130, 246), 0.05);
}

[data-theme="light"] .career-nav__progress {
    background: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .career-dots__dot {
    background: rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .career-dots__dot:hover {
    background: rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */
@media print {
    .career-nav,
    .career-dots,
    .skip-to-content {
        display: none;
    }
}

/* ============================================================================
   #4309 DARK ACCENTS - on the dark theme the brand 500 and 600 tints of the
   active link, its underline and the highlight pill move to tone 300, as the
   career theme does for its own accents (career-extras.css .hero-word-accent).
   Light modes keep the values above.
   ============================================================================ */
[data-theme="dark"] .career-nav__link.active {
    color: rgb(var(--color-primary-300-rgb));
}

[data-theme="dark"] .career-nav__link.active::after {
    background: rgb(var(--color-primary-300-rgb));
}

[data-theme="dark"] .career-nav__link--highlight {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-300-rgb), 0.2) 0%,
        rgba(var(--color-primary-300-rgb), 0.25) 100%
    );
    border-color: rgba(var(--color-primary-300-rgb), 0.3);
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-300-rgb), 0.2) inset,
        0 4px 16px rgba(var(--color-primary-300-rgb), 0.15);
}

[data-theme="dark"] .career-nav__link--highlight:hover {
    background: linear-gradient(135deg,
        rgba(var(--color-primary-300-rgb), 0.3) 0%,
        rgba(var(--color-primary-300-rgb), 0.35) 100%
    );
    box-shadow:
        0 0 0 1px rgba(var(--color-primary-300-rgb), 0.4),
        0 8px 24px rgba(var(--color-primary-300-rgb), 0.25),
        0 0 40px rgba(var(--color-primary-300-rgb), 0.15);
}

[data-theme="dark"] .career-nav__link--highlight.active::after {
    background: rgb(var(--color-primary-300-rgb));
}

[data-theme="dark"] .career-nav__mobile-link.active {
    background: rgba(var(--color-primary-300-rgb), 0.15);
    color: rgb(var(--color-primary-300-rgb));
    border-left-color: rgb(var(--color-primary-300-rgb));
}

[data-theme="dark"] .career-nav__mobile-link--highlight {
    background: rgba(var(--color-primary-300-rgb), 0.15);
    border-left-color: rgb(var(--color-primary-300-rgb));
}

[data-theme="dark"] .career-nav__mobile-link--highlight:hover {
    background: rgba(var(--color-primary-300-rgb), 0.25);
}

/* #4309 rework (rev-4409): the highlighted pill keeps its white text when active in dark. The tone 300
   active colour above is (0,3,0) and would outrank .career-nav__link--highlight.active (0,2,0) and its
   mobile twin, which are the white-text rules the light modes rely on. */
[data-theme="dark"] .career-nav__link--highlight.active,
[data-theme="dark"] .career-nav__mobile-link--highlight.active {
    color: rgba(255, 255, 255, 1);
}