/* =============================================================================
   NAVIGATION COMPONENTS — Fishermens Academy
   Spec: Harbor Blue (#1A365D), Sunrise Gold (#D69E2E)
   ============================================================================= */

/* --- Skip Link --- */
.skip-to-main {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 10px 20px;
    background-color: var(--color-sunrise-gold);
    color: var(--color-harbor-blue);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 200ms ease-out;
}

.skip-to-main:focus {
    top: 0;
    outline: 3px solid var(--color-harbor-blue);
}

/* --- Navbar Core --- */
.academy-navbar-wrapper {
    position: sticky;
    top: 0;
    z-index: 900;
    width: 100%;
}

.academy-navbar {
    background-color: var(--color-white);
    width: 100%;
    border-bottom: 1px solid rgba(74, 85, 104, 0.15);
    /* Slate gray */
    box-shadow: 0 1px 3px rgba(26, 54, 93, 0.05);
    /* Harbor blue shadow */
}

.academy-navbar__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--space-xl);
    height: 80px;
}

@media (max-width: 1023px) {
    .academy-navbar__container {
        padding: 0 var(--space-lg);
        height: 64px;
    }
}

@media (max-width: 639px) {
    .academy-navbar__container {
        padding: 0 var(--space-md);
        height: 60px;
    }
}

/* --- Brand Logo --- */
.academy-navbar__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px; /* Space between logo and text */
    text-decoration: none;
    outline: none;
    border-radius: 4px;
}

.academy-navbar__logo:focus-visible {
    outline: 2px solid var(--color-sunrise-gold);
    outline-offset: 4px;
}

/* New class to constrain the logo image */
.academy-navbar__logo-image {
    height: 65px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.academy-logo-text {
    font-family: var(--font-heading);
    font-size: var(--fs-h4);
    font-weight: var(--fw-bold);
    letter-spacing: 0.5px;
}

.academy-logo-text__light {
    color: var(--color-sunrise-gold);
}

.academy-logo-text__deep {
    color: var(--color-harbor-blue);
}

/* --- Desktop Links --- */
.academy-navbar__links {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

@media (max-width: 1023px) {
    .academy-navbar__links {
        display: none;
    }
}

.academy-navbar__link-item {
    display: flex;
}

.academy-navbar__link {
    display: inline-block;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-slate-gray);
    text-decoration: none;
    border-radius: 6px;
    position: relative;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.academy-navbar__link:hover {
    color: var(--color-harbor-blue);
    background-color: rgba(26, 54, 93, 0.04);
}

.academy-navbar__link--active {
    color: var(--color-harbor-blue);
    font-weight: var(--fw-bold);
}

.academy-navbar__link--active::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 16px;
    right: 16px;
    height: 2px;
    background-color: var(--color-sunrise-gold);
    border-radius: 1px;
}

/* --- Hamburger --- */
.academy-navbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

@media (max-width: 1023px) {
    .academy-navbar__cta {
        display: none;
    }
}

.academy-navbar__hamburger {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(74, 85, 104, 0.2);
    border-radius: 8px;
    color: var(--color-harbor-blue);
    cursor: pointer;
}

@media (max-width: 1023px) {
    .academy-navbar__hamburger {
        display: inline-flex;
    }
}

/* --- Mobile Menu --- */
/* The full-screen invisible barrier that blocks clicks and dims the background */
.academy-mobile-menu {
    position: fixed;
    top: 60px;
    /* Sits exactly below the mobile header */
    left: 0;
    width: 100vw;
    height: calc(100vh - 60px);
    background-color: rgba(255, 255, 255, 0.95);
    /* The white opaque overlay */
    z-index: 30;

    /* CRITICAL FIX: Hide completely when closed */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Prevents it from blocking clicks on the dashboard */
    transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
}

/* When the menu is OPEN */
.academy-mobile-menu--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    /* Allow clicks */
}

@media (min-width: 1024px) {
    .academy-mobile-menu {
        display: none !important;
    }
}

.academy-mobile-menu__links {
    list-style: none;
    margin: 0;
    padding: 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.academy-mobile-menu__link {
    display: flex;
    padding: 12px 16px;
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: var(--fw-medium);
    color: var(--color-slate-gray);
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid transparent;
}

.academy-mobile-menu__link--active {
    color: var(--color-harbor-blue);
    font-weight: var(--fw-semibold);
    background-color: rgba(214, 158, 46, 0.05);
    /* Sunrise Gold tint */
    border-left-color: var(--color-sunrise-gold);
}

.academy-mobile-menu__divider {
    height: 1px;
    background-color: rgba(74, 85, 104, 0.1);
    margin: 8px 24px;
}

.academy-mobile-menu__cta {
    padding: 0 24px 24px;
}

/* --- Portal Sidebar --- */
.academy-sidebar {
    width: 280px;
    min-height: 100vh;
    background-color: var(--color-harbor-blue);
    display: flex;
    flex-direction: column;
    color: var(--color-white);
}

.academy-sidebar__header {
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.academy-sidebar__avatar {
    width: 48px;
    height: 48px;
    background-color: var(--color-sunrise-gold);
    color: var(--color-harbor-blue);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: var(--fw-bold);
}

.academy-sidebar__user-info {
    display: flex;
    flex-direction: column;
}

.academy-sidebar__user-name {
    font-family: var(--font-body);
    font-weight: var(--fw-semibold);
    font-size: var(--fs-body);
}

.academy-sidebar__user-role {
    font-family: var(--font-body);
    font-size: var(--fs-small);
    color: var(--color-sunrise-gold);
}

.academy-sidebar__nav {
    flex: 1;
    padding: var(--space-md) 0;
}

.academy-sidebar__links {
    list-style: none;
    margin: 0;
    padding: 0;
}

.academy-sidebar__link {
    display: flex;
    padding: 12px var(--space-lg);
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-family: var(--font-body);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.academy-sidebar__link:hover {
    color: var(--color-white);
    background-color: rgba(255, 255, 255, 0.05);
}

.academy-sidebar__link--active {
    color: var(--color-sunrise-gold);
    font-weight: var(--fw-semibold);
    background-color: rgba(214, 158, 46, 0.1);
    border-left: 3px solid var(--color-sunrise-gold);
}

.academy-sidebar__footer {
    padding: var(--space-lg);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.academy-sidebar__logout {
    width: 100%;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    text-align: left;
    cursor: pointer;
}

.academy-sidebar__logout:hover {
    color: var(--color-alert-crimson);
}

/* =============================================================================
   LANGUAGE SELECTOR
   ============================================================================= */

.language-selector-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-white, #FFFFFF);
    padding: 8px 14px;
    border-radius: 6px;
    /* Soft Slate Gray border for visibility */
    border: 1px solid rgba(74, 85, 104, 0.2);
    transition: all var(--transition-fast, 200ms ease);
    cursor: pointer;
}

/* Hover and focus states */
.language-selector-wrapper:hover,
.language-selector-wrapper:focus-within {
    border-color: var(--color-sunrise-gold, #D69E2E);
    background-color: rgba(214, 158, 46, 0.05);
    /* Soft Sunrise Gold tint */
    box-shadow: 0 2px 4px rgba(26, 54, 93, 0.05);
}

.language-selector-icon {
    color: var(--color-harbor-blue, #1A365D);
    font-size: 14px;
    transition: color 200ms ease;
}

.language-selector-wrapper:hover .language-selector-icon {
    color: var(--color-sunrise-gold, #D69E2E);
}

.language-selector-dropdown {
    background: transparent;
    color: var(--color-harbor-blue, #1A365D);
    border: none;
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: var(--fs-body, 14px);
    font-weight: var(--fw-semibold, 600);
    cursor: pointer;
    outline: none;
}

/* Base styling for dropdown options */
.language-selector-dropdown option {
    background-color: var(--color-white, #FFFFFF);
    color: var(--color-slate-gray, #4A5568);
    font-weight: var(--fw-medium, 500);
    padding: 10px;
}

/* Highlight the currently selected language */
.language-selector-dropdown option:checked {
    background-color: var(--color-sunrise-gold, #D69E2E);
    color: var(--color-white, #FFFFFF);
    font-weight: var(--fw-bold, 700);
}