/* =========================================================
   AluminiumGlass
   navigation.css
   Global Public Navigation System
   ========================================================= */

/* ---------------------------------------------------------
   Navigation Root
   --------------------------------------------------------- */

.site-navigation {
    position: relative;
    width: 100%;
    background: var(--color-surface, #ffffff);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    z-index: 900;
}

.site-navigation.is-sticky {
    position: sticky;
    top: 0;
}

/* Main navigation container */

.nav-container {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;
    min-height: 56px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* ---------------------------------------------------------
   Navigation List
   --------------------------------------------------------- */

.nav-list {
    display: flex;
    align-items: center;
    gap: 4px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-item {
    position: relative;
    margin: 0;
    padding: 0;
}

/* ---------------------------------------------------------
   Navigation Links
   --------------------------------------------------------- */

.nav-link {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 44px;
    padding: 10px 14px;

    color: var(--color-text, #1f2937);
    background: transparent;

    border: 0;
    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;

    transition:
        color 180ms ease,
        background-color 180ms ease,
        box-shadow 180ms ease;
}

/* Hover */

.nav-link:hover {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

/* Keyboard focus */

.nav-link:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--color-primary, #0b63ce) 30%,
            transparent
        );

    outline-offset: 2px;
}

/* Active link */

.nav-link.is-active,
.nav-item.is-active > .nav-link {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

/* Active underline */

.nav-item.is-active > .nav-link::after {
    content: "";

    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 3px;

    height: 2px;

    background: var(--color-primary, #0b63ce);
    border-radius: 999px;
}

/* ---------------------------------------------------------
   Navigation Icons
   --------------------------------------------------------- */

.nav-icon {
    width: 18px;
    height: 18px;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ---------------------------------------------------------
   Dropdown Arrow
   --------------------------------------------------------- */

.nav-arrow {
    width: 8px;
    height: 8px;

    margin-top: -4px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg);

    transition: transform 180ms ease;
}

.nav-item:hover > .nav-link .nav-arrow,
.nav-item.is-open > .nav-link .nav-arrow {
    transform: rotate(225deg);
}

/* ---------------------------------------------------------
   Dropdown Menu
   --------------------------------------------------------- */

.nav-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    min-width: 230px;
    max-width: 320px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: var(--color-surface, #ffffff);

    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 12px;

    box-shadow:
        0 14px 35px rgba(15, 23, 42, 0.12),
        0 4px 12px rgba(15, 23, 42, 0.06);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(-6px);

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;

    z-index: 1000;
}

/* Dropdown visible */

.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown,
.nav-item.is-open > .nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

/* Dropdown item */

.nav-dropdown-item {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Dropdown link */

.nav-dropdown-link {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    min-height: 42px;

    padding: 9px 12px;

    color: var(--color-text, #374151);
    background: transparent;

    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;

    text-decoration: none;

    transition:
        color 160ms ease,
        background-color 160ms ease;
}

.nav-dropdown-link:hover {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

.nav-dropdown-link:focus-visible {
    outline: 2px solid var(--color-primary, #0b63ce);
    outline-offset: -2px;
}

/* Active dropdown */

.nav-dropdown-link.is-active {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
    font-weight: 700;
}

/* ---------------------------------------------------------
   Nested Dropdown
   --------------------------------------------------------- */

.nav-dropdown .nav-item {
    position: relative;
}

.nav-dropdown .nav-dropdown {
    top: -8px;
    left: calc(100% + 8px);

    transform: translateX(-6px);
}

.nav-dropdown .nav-item:hover > .nav-dropdown,
.nav-dropdown .nav-item:focus-within > .nav-dropdown,
.nav-dropdown .nav-item.is-open > .nav-dropdown {
    transform: translateX(0);
}

/* ---------------------------------------------------------
   Mega Menu
   --------------------------------------------------------- */

.nav-mega {
    position: absolute;

    top: calc(100% + 8px);
    left: 50%;

    width: min(1100px, calc(100vw - 32px));

    padding: 24px;

    background: var(--color-surface, #ffffff);

    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 16px;

    box-shadow:
        0 20px 50px rgba(15, 23, 42, 0.14),
        0 5px 15px rgba(15, 23, 42, 0.06);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translate(-50%, -6px);

    transition:
        opacity 160ms ease,
        visibility 160ms ease,
        transform 160ms ease;

    z-index: 1000;
}

.nav-item:hover > .nav-mega,
.nav-item:focus-within > .nav-mega,
.nav-item.is-open > .nav-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translate(-50%, 0);
}

/* Mega menu grid */

.nav-mega-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.nav-mega-column {
    min-width: 0;
}

.nav-mega-title {
    margin: 0 0 10px;

    color: var(--color-heading, #111827);

    font-size: 14px;
    font-weight: 700;
}

.nav-mega-list {
    display: grid;
    gap: 3px;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* ---------------------------------------------------------
   Navigation Divider
   --------------------------------------------------------- */

.nav-divider {
    width: 1px;
    height: 28px;

    background: var(--color-border, #e5e7eb);

    flex: 0 0 auto;
}

/* ---------------------------------------------------------
   Navigation Actions
   --------------------------------------------------------- */

.nav-actions {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-left: auto;
}

.nav-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    min-height: 42px;
    padding: 9px 14px;

    color: var(--color-text, #374151);
    background: transparent;

    border: 1px solid transparent;
    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;

    transition:
        color 160ms ease,
        background-color 160ms ease,
        border-color 160ms ease;
}

.nav-action:hover {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

.nav-action--primary {
    color: #ffffff;
    background: var(--color-primary, #0b63ce);
}

.nav-action--primary:hover {
    color: #ffffff;
    background: var(--color-primary-dark, #084f9f);
}

.nav-action--outline {
    border-color: var(--color-border, #d1d5db);
}

.nav-action--outline:hover {
    border-color: var(--color-primary, #0b63ce);
}

/* ---------------------------------------------------------
   Mobile Menu Button
   --------------------------------------------------------- */

.nav-toggle {
    display: none;

    width: 44px;
    height: 44px;

    padding: 0;

    align-items: center;
    justify-content: center;

    color: var(--color-text, #1f2937);
    background: transparent;

    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;

    cursor: pointer;
}

.nav-toggle:hover {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

.nav-toggle:focus-visible {
    outline: 3px solid
        color-mix(
            in srgb,
            var(--color-primary, #0b63ce) 30%,
            transparent
        );

    outline-offset: 2px;
}

/* Hamburger */

.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
    display: block;

    width: 20px;
    height: 2px;

    background: currentColor;

    border-radius: 999px;

    transition:
        transform 180ms ease,
        opacity 180ms ease;
}

.nav-toggle-icon {
    position: relative;
}

.nav-toggle-icon::before,
.nav-toggle-icon::after {
    content: "";

    position: absolute;
    left: 0;
}

.nav-toggle-icon::before {
    top: -7px;
}

.nav-toggle-icon::after {
    top: 7px;
}

/* Toggle open */

.nav-toggle[aria-expanded="true"] .nav-toggle-icon {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before {
    top: 0;
    transform: rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after {
    top: 0;
    transform: rotate(-45deg);
}

/* ---------------------------------------------------------
   Mobile Navigation Panel
   --------------------------------------------------------- */

.mobile-nav {
    display: none;

    width: 100%;

    background: var(--color-surface, #ffffff);

    border-top: 1px solid var(--color-border, #e5e7eb);
}

.mobile-nav.is-open {
    display: block;
}

.mobile-nav-inner {
    width: min(100% - 32px, 1280px);
    margin-inline: auto;

    padding: 12px 0 20px;
}

/* Mobile list */

.mobile-nav-list {
    display: grid;
    gap: 3px;

    margin: 0;
    padding: 0;

    list-style: none;
}

/* Mobile link */

.mobile-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;

    width: 100%;
    min-height: 46px;

    padding: 10px 12px;

    color: var(--color-text, #374151);
    background: transparent;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;
}

.mobile-nav-link:hover,
.mobile-nav-link.is-active {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

/* Mobile submenu */

.mobile-submenu {
    display: none;

    margin: 0 0 4px;
    padding: 3px 0 3px 14px;

    list-style: none;
}

.mobile-nav-item.is-open > .mobile-submenu {
    display: grid;
    gap: 2px;
}

.mobile-submenu-link {
    display: flex;
    align-items: center;

    min-height: 40px;
    padding: 8px 12px;

    color: var(--color-muted, #6b7280);

    border-radius: 7px;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;
}

.mobile-submenu-link:hover,
.mobile-submenu-link.is-active {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

/* ---------------------------------------------------------
   Breadcrumb Navigation
   --------------------------------------------------------- */

.breadcrumb {
    width: min(100% - 32px, 1280px);
    margin: 0 auto;

    padding: 12px 0;

    overflow-x: auto;

    scrollbar-width: none;
}

.breadcrumb::-webkit-scrollbar {
    display: none;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;

    min-width: max-content;

    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: var(--color-muted, #6b7280);

    font-size: 13px;
    line-height: 1.4;
}

.breadcrumb-item:not(:last-child)::after {
    content: "/";

    color: var(--color-border-dark, #9ca3af);
}

.breadcrumb-link {
    color: inherit;
    text-decoration: none;
}

.breadcrumb-link:hover {
    color: var(--color-primary, #0b63ce);
}

.breadcrumb-current {
    color: var(--color-text, #374151);
    font-weight: 600;
}

/* ---------------------------------------------------------
   Location Navigation
   --------------------------------------------------------- */

.location-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.location-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    min-height: 40px;
    padding: 8px 12px;

    color: var(--color-text, #374151);
    background: var(--color-surface-muted, #f8fafc);

    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 8px;

    font-size: 14px;
    font-weight: 500;

    text-decoration: none;
}

.location-nav-link:hover {
    color: var(--color-primary, #0b63ce);
    border-color: var(--color-primary, #0b63ce);
}

/* ---------------------------------------------------------
   Navigation Search
   --------------------------------------------------------- */

.nav-search {
    display: flex;
    align-items: center;

    flex: 1 1 auto;
    max-width: 460px;

    position: relative;
}

.nav-search-input {
    width: 100%;
    min-height: 42px;

    padding: 9px 42px 9px 14px;

    color: var(--color-text, #1f2937);
    background: var(--color-surface-muted, #f8fafc);

    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;

    font-family: inherit;
    font-size: 14px;

    outline: none;

    transition:
        border-color 160ms ease,
        box-shadow 160ms ease,
        background-color 160ms ease;
}

.nav-search-input:focus {
    background: #ffffff;
    border-color: var(--color-primary, #0b63ce);

    box-shadow:
        0 0 0 3px
        color-mix(
            in srgb,
            var(--color-primary, #0b63ce) 12%,
            transparent
        );
}

.nav-search-button {
    position: absolute;

    right: 4px;
    top: 4px;

    width: 34px;
    height: 34px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    color: var(--color-muted, #6b7280);
    background: transparent;

    border: 0;
    border-radius: 6px;

    cursor: pointer;
}

.nav-search-button:hover {
    color: var(--color-primary, #0b63ce);
    background: var(--color-primary-soft, #eff6ff);
}

/* ---------------------------------------------------------
   Responsive: Tablet
   --------------------------------------------------------- */

@media (max-width: 1024px) {

    .nav-container {
        width: min(100% - 24px, 960px);
        gap: 12px;
    }

    .nav-list {
        gap: 1px;
    }

    .nav-link {
        padding-inline: 10px;
        font-size: 14px;
    }

    .nav-actions {
        gap: 4px;
    }

    .nav-action {
        padding-inline: 10px;
        font-size: 13px;
    }

    .nav-mega {
        width: min(900px, calc(100vw - 24px));
    }

    .nav-mega-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------
   Responsive: Mobile
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .site-navigation {
        border-bottom: 1px solid var(--color-border, #e5e7eb);
    }

    .nav-container {
        width: min(100% - 24px, 720px);
        min-height: 56px;
    }

    /* Hide desktop navigation */

    .nav-list {
        display: none;
    }

    .nav-actions {
        display: none;
    }

    .nav-search {
        display: none;
    }

    /* Show mobile button */

    .nav-toggle {
        display: inline-flex;
    }

    /* Mobile navigation */

    .mobile-nav {
        box-shadow:
            0 12px 25px rgba(15, 23, 42, 0.08);
    }

    /* Disable desktop dropdown */

    .nav-dropdown,
    .nav-mega {
        display: none !important;
    }

    .breadcrumb {
        width: min(100% - 24px, 720px);
    }

    .location-nav {
        width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .location-nav::-webkit-scrollbar {
        display: none;
    }
}

/* ---------------------------------------------------------
   Responsive: Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {

    .nav-container {
        width: calc(100% - 20px);
    }

    .mobile-nav-inner {
        width: calc(100% - 20px);
    }

    .mobile-nav-link {
        min-height: 48px;
        font-size: 14px;
    }

    .breadcrumb {
        width: calc(100% - 20px);
    }

    .breadcrumb-item {
        font-size: 12px;
    }

    .location-nav-link {
        min-height: 38px;
        font-size: 13px;
    }
}

/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .nav-link,
    .nav-dropdown,
    .nav-mega,
    .nav-arrow,
    .nav-action,
    .nav-toggle-icon,
    .nav-toggle-icon::before,
    .nav-toggle-icon::after {
        transition: none;
    }
}

/* ---------------------------------------------------------
   Print
   --------------------------------------------------------- */

@media print {

    .site-navigation,
    .mobile-nav,
    .nav-actions,
    .nav-toggle {
        display: none !important;
    }

    .breadcrumb {
        width: 100%;
        padding: 0;
    }
}