@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Desktop Navigation Styles
   =====================================================================

   File:
   assets/css/components/navigation.css

   Purpose:
   - Style the primary desktop navigation
   - Keep navigation background full-width
   - Keep content aligned to global .container
   - Style brand/logo
   - Style primary menu
   - Style Book Counselling
   - Style Login
   - Style Book Now primary CTA
   - Support active/current states
   - Support disabled links
   - Support sticky navigation behaviour
   - Integrate with navigation.js
   - Maintain accessibility
   - Remain hidden on mobile where mobile-navigation is used

   Related PHP:
   - app/views/website/components/navigation.php

   Related JS:
   - assets/js/components/navigation.js

   Expected structure:

   .navigation
     .container
       .navigation__inner

         .navigation__brand
           .navigation__brand-link
             .navigation__logo
             OR
             .navigation__brand-mark
             .navigation__brand-text

         .navigation__main
           .navigation__menu
             .navigation__item
               .navigation__link
                 .navigation__link-text
                 .navigation__active-indicator

         .navigation__actions
           .navigation__action
           .navigation__action--counselling
           .navigation__action--login

           .navigation__cta

   IMPORTANT:
   - .navigation remains full-width
   - .container controls content width
   - Do not apply max-width directly to .navigation
   ===================================================================== */


/* =====================================================================
   1. NAVIGATION ROOT
   ===================================================================== */

.navigation {
    position: relative;

    width: 100%;

    background-color: var(--color-white);

    border-bottom:
        1px
        solid
        var(--color-border);

    box-shadow:
        0
        1px
        0
        rgb(15 23 42 / 0.02);

    z-index: var(--z-sticky);

    transition:
        background-color var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}


/* =====================================================================
   2. STICKY NAVIGATION
   ===================================================================== */

.navigation.is-sticky {
    position: sticky;

    top: 0;
}


/* =====================================================================
   3. SCROLLED STATE
   ===================================================================== */

.navigation.is-scrolled {
    background-color:
        rgb(255 255 255 / 0.97);

    border-bottom-color:
        var(--color-border);

    box-shadow:
        0
        8px
        24px
        rgb(15 23 42 / 0.08);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =====================================================================
   4. NAVIGATION INNER
   ===================================================================== */

.navigation__inner {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap:
        clamp(
            1.25rem,
            2.5vw,
            2.5rem
        );

    min-height: 5rem;
}


/* =====================================================================
   5. BRAND AREA
   ===================================================================== */

.navigation__brand {
    display: flex;
    align-items: center;

    min-width: 0;
}


/* =====================================================================
   6. BRAND LINK
   ===================================================================== */

.navigation__brand-link {
    display: inline-flex;
    align-items: center;

    gap: var(--space-3);

    min-width: 0;

    color: var(--color-heading);

    text-decoration: none;
}


.navigation__brand-link:hover {
    color: var(--color-heading);
}


/* =====================================================================
   7. LOGO IMAGE
   ===================================================================== */

.navigation__logo {
    display: block;

    width: auto;
    height: 3rem;

    max-width: 12rem;

    object-fit: contain;
}


/* =====================================================================
   8. FALLBACK BRAND MARK
   ===================================================================== */

.navigation__brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 2.9rem;
    height: 2.9rem;

    border-radius: var(--radius-lg);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-extrabold);

    letter-spacing: var(--letter-spacing-wide);

    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-600) 0%,
            var(--color-secondary-500) 100%
        );

    box-shadow:
        0
        5px
        14px
        rgb(33 111 219 / 0.18);
}


/* =====================================================================
   9. BRAND TEXT
   ===================================================================== */

.navigation__brand-text {
    display: block;

    min-width: 0;

    font-size:
        clamp(
            1.15rem,
            1.5vw,
            1.35rem
        );

    font-weight: var(--font-weight-bold);

    line-height: 1.15;

    letter-spacing: var(--letter-spacing-tight);

    color: var(--color-heading);

    white-space: nowrap;
}


/* =====================================================================
   10. MAIN MENU WRAPPER
   ===================================================================== */

.navigation__main {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
}


/* =====================================================================
   11. MENU
   ===================================================================== */

.navigation__menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        clamp(
            0.1rem,
            0.6vw,
            0.35rem
        );

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   12. MENU ITEM
   ===================================================================== */

.navigation__item {
    position: relative;

    display: flex;
    align-items: center;

    margin: 0;
}


/* =====================================================================
   13. MENU LINK
   ===================================================================== */

.navigation__link {
    position: relative;

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

    min-height: 3rem;

    padding:
        0.6rem
        clamp(
            0.55rem,
            0.9vw,
            0.85rem
        );

    border-radius: var(--radius-md);

    font-size:
        clamp(
            0.86rem,
            0.9vw,
            0.95rem
        );

    font-weight: var(--font-weight-semibold);

    line-height: 1.2;

    color: var(--color-grey-700);

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}


/* =====================================================================
   14. MENU LINK TEXT
   ===================================================================== */

.navigation__link-text {
    display: inline-block;
}


/* =====================================================================
   15. MENU LINK HOVER
   ===================================================================== */

.navigation__link:hover {
    color: var(--color-primary-700);

    background-color:
        var(--color-primary-50);
}


/* =====================================================================
   16. ACTIVE INDICATOR
   ===================================================================== */

.navigation__active-indicator {
    position: absolute;

    left: 50%;
    bottom: 0.25rem;

    width: 0;
    height: 2px;

    border-radius: var(--radius-pill);

    background-color:
        var(--color-primary-600);

    transform:
        translateX(-50%);

    transition:
        width var(--transition-fast);
}


/* =====================================================================
   17. CURRENT MENU ITEM
   ===================================================================== */

.navigation__link.is-current {
    color: var(--color-primary-700);

    background-color:
        var(--color-primary-50);
}


.navigation__link.is-current
.navigation__active-indicator {
    width:
        calc(
            100% -
            1.5rem
        );
}


/* =====================================================================
   18. HOVER ACTIVE INDICATOR
   ===================================================================== */

.navigation__link:hover
.navigation__active-indicator {
    width:
        calc(
            100% -
            1.5rem
        );
}


/* =====================================================================
   19. DISABLED MENU LINK
   ===================================================================== */

.navigation__link.is-disabled {
    color: var(--color-grey-400);

    cursor: not-allowed;

    opacity: 0.72;

    background-color: transparent;
}


.navigation__link.is-disabled:hover {
    color: var(--color-grey-400);

    background-color: transparent;

    transform: none;
}


/* =====================================================================
   20. ACTION AREA
   ===================================================================== */

.navigation__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap:
        clamp(
            0.4rem,
            0.8vw,
            0.65rem
        );

    flex: 0 0 auto;
}


/* =====================================================================
   21. SHARED SECONDARY ACTION
   ===================================================================== */

.navigation__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    min-height: 2.8rem;

    padding:
        0.65rem
        0.85rem;

    border:
        1px
        solid
        transparent;

    border-radius: var(--radius-md);

    font-size: 0.86rem;
    font-weight: var(--font-weight-semibold);

    line-height: 1.15;

    text-decoration: none;

    white-space: nowrap;

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


/* =====================================================================
   22. ACTION ICON
   ===================================================================== */

.navigation__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;
}


.navigation__action-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   23. ACTION TEXT
   ===================================================================== */

.navigation__action-text {
    display: inline-block;
}


/* =====================================================================
   24. BOOK COUNSELLING ACTION
   ===================================================================== */

.navigation__action--counselling {
    color: var(--color-primary-700);

    background-color:
        var(--color-primary-50);

    border-color:
        var(--color-primary-100);
}


.navigation__action--counselling:hover {
    color: var(--color-primary-800);

    background-color:
        var(--color-primary-100);

    border-color:
        var(--color-primary-200);

    box-shadow:
        var(--shadow-xs);

    transform:
        translateY(-1px);
}


/* =====================================================================
   25. LOGIN ACTION
   ===================================================================== */

.navigation__action--login {
    color: var(--color-grey-700);

    background-color: transparent;

    border-color: transparent;
}


.navigation__action--login:hover {
    color: var(--color-primary-700);

    background-color:
        var(--color-grey-50);
}


.navigation__action--login.is-current {
    color: var(--color-primary-700);

    background-color:
        var(--color-primary-50);
}


/* =====================================================================
   26. PRIMARY CTA
   ===================================================================== */

.navigation__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 0.45rem;

    min-height: 2.9rem;

    padding:
        0.7rem
        1rem;

    border:
        1px
        solid
        var(--color-primary-600);

    border-radius: var(--radius-md);

    font-size: 0.87rem;
    font-weight: var(--font-weight-bold);

    line-height: 1.15;

    color: var(--color-white);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-600) 0%,
            var(--color-primary-700) 100%
        );

    text-decoration: none;

    white-space: nowrap;

    box-shadow:
        0
        5px
        14px
        rgb(33 111 219 / 0.18);

    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}


/* =====================================================================
   27. PRIMARY CTA HOVER
   ===================================================================== */

.navigation__cta:hover {
    color: var(--color-white);

    border-color:
        var(--color-primary-800);

    background:
        linear-gradient(
            135deg,
            var(--color-primary-700) 0%,
            var(--color-primary-800) 100%
        );

    box-shadow:
        0
        8px
        20px
        rgb(33 111 219 / 0.24);

    transform:
        translateY(-1px);
}


/* =====================================================================
   28. CTA ICON
   ===================================================================== */

.navigation__cta-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;
}


.navigation__cta-icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   29. CTA TEXT
   ===================================================================== */

.navigation__cta-text {
    display: inline-block;
}


/* =====================================================================
   30. DISABLED ACTIONS
   ===================================================================== */

.navigation__action.is-disabled,
.navigation__cta.is-disabled {
    opacity: 0.5;

    cursor: not-allowed;

    pointer-events: none;

    transform: none;

    box-shadow: none;
}


/* =====================================================================
   31. FOCUS STATES
   ===================================================================== */

.navigation__brand-link:focus-visible,
.navigation__link:focus-visible,
.navigation__action:focus-visible,
.navigation__cta:focus-visible {
    outline:
        3px
        solid
        rgb(33 111 219 / 0.25);

    outline-offset: 3px;
}


/* =====================================================================
   32. LARGE DESKTOP
   ===================================================================== */

@media (min-width: 90rem) {

    .navigation__inner {
        min-height: 5.2rem;

        gap: 2.5rem;
    }


    .navigation__logo {
        height: 3.15rem;

        max-width: 12.5rem;
    }


    .navigation__menu {
        gap: 0.25rem;
    }


    .navigation__link {
        padding-inline: 0.9rem;

        font-size: 0.95rem;
    }


    .navigation__actions {
        gap: 0.6rem;
    }

}


/* =====================================================================
   33. MEDIUM DESKTOP
   ===================================================================== */

@media
    (min-width: 75rem)
    and
    (max-width: 89.9375rem) {

    .navigation__inner {
        gap: 1.5rem;
    }


    .navigation__brand-text {
        font-size: 1.2rem;
    }


    .navigation__link {
        padding-inline: 0.65rem;

        font-size: 0.88rem;
    }


    .navigation__action {
        padding-inline: 0.7rem;

        font-size: 0.8rem;
    }


    .navigation__cta {
        padding-inline: 0.85rem;

        font-size: 0.82rem;
    }

}


/* =====================================================================
   34. COMPACT DESKTOP
   =====================================================================

   This keeps the desktop navigation usable before the mobile breakpoint.
   ===================================================================== */

@media
    (min-width: 64rem)
    and
    (max-width: 74.9375rem) {

    .navigation__inner {
        gap: 1rem;
    }


    .navigation__brand-mark {
        width: 2.6rem;
        height: 2.6rem;
    }


    .navigation__brand-text {
        font-size: 1.05rem;
    }


    .navigation__logo {
        height: 2.8rem;

        max-width: 10rem;
    }


    .navigation__menu {
        gap: 0;
    }


    .navigation__link {
        min-height: 2.7rem;

        padding-inline:
            0.48rem;

        font-size: 0.78rem;
    }


    .navigation__actions {
        gap: 0.3rem;
    }


    .navigation__action {
        min-height: 2.6rem;

        padding:
            0.55rem
            0.55rem;

        font-size: 0.74rem;
    }


    .navigation__action-icon {
        width: 0.85rem;
        height: 0.85rem;
    }


    .navigation__cta {
        min-height: 2.65rem;

        padding:
            0.58rem
            0.7rem;

        font-size: 0.75rem;
    }


    .navigation__cta-icon {
        width: 0.85rem;
        height: 0.85rem;
    }

}


/* =====================================================================
   35. MOBILE / TABLET
   =====================================================================

   Dedicated mobile-navigation.php handles navigation below 48rem.

   Navigation remains hidden entirely at that point.
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .navigation {
        display: none;
    }

}


/* =====================================================================
   36. TABLET BETWEEN MOBILE AND DESKTOP
   =====================================================================

   Because the project's desktop/mobile breakpoint is 48rem, use a
   compact desktop version between 48rem and 63.9375rem.

   Hide secondary text-heavy actions first to prevent wrapping.
   ===================================================================== */

@media
    (min-width: 48rem)
    and
    (max-width: 63.9375rem) {

    .navigation__inner {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: 0.75rem;

        min-height: 4.5rem;
    }


    .navigation__brand-text {
        display: none;
    }


    .navigation__brand-mark {
        width: 2.6rem;
        height: 2.6rem;
    }


    .navigation__logo {
        height: 2.7rem;

        max-width: 8.5rem;
    }


    .navigation__menu {
        gap: 0;
    }


    .navigation__link {
        min-height: 2.6rem;

        padding-inline:
            0.4rem;

        font-size: 0.73rem;
    }


    .navigation__actions {
        gap: 0.3rem;
    }


    .navigation__action--counselling {
        display: none;
    }


    .navigation__action--login {
        padding-inline: 0.55rem;

        font-size: 0.75rem;
    }


    .navigation__action--login
    .navigation__action-icon {
        display: none;
    }


    .navigation__cta {
        min-height: 2.55rem;

        padding-inline: 0.65rem;

        font-size: 0.74rem;
    }


    .navigation__cta-icon {
        display: none;
    }

}


/* =====================================================================
   37. HOVER-CAPABLE DEVICES
   ===================================================================== */

@media (hover: hover) and (pointer: fine) {

    .navigation__brand-link:hover
    .navigation__brand-mark {
        box-shadow:
            0
            8px
            20px
            rgb(33 111 219 / 0.22);
    }


    .navigation__link:hover {
        transform: translateY(-1px);
    }

}


/* =====================================================================
   38. REDUCED MOTION
   ===================================================================== */

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

    .navigation,
    .navigation__link,
    .navigation__active-indicator,
    .navigation__action,
    .navigation__cta {
        transition: none;
    }


    .navigation__link:hover,
    .navigation__action:hover,
    .navigation__cta:hover {
        transform: none;
    }

}


/* =====================================================================
   39. FORCED COLOURS / HIGH CONTRAST
   ===================================================================== */

@media (forced-colors: active) {

    .navigation {
        color: CanvasText;
        background: Canvas;

        border-bottom:
            1px
            solid
            CanvasText;

        box-shadow: none;
    }


    .navigation__brand-mark {
        color: Canvas;
        background: CanvasText;
    }


    .navigation__brand-text,
    .navigation__link,
    .navigation__action {
        color: CanvasText;
    }


    .navigation__link.is-current,
    .navigation__action.is-current {
        color: HighlightText;

        background: Highlight;
    }


    .navigation__cta {
        color: HighlightText;

        background: Highlight;

        border-color: Highlight;
    }


    .navigation__active-indicator {
        background-color: Highlight;
    }

}


/* =====================================================================
   40. PRINT
   ===================================================================== */

@media print {

    .navigation {
        display: none !important;
    }

}


/* =====================================================================
   END OF OLLATOEDU ECOSYS DESKTOP NAVIGATION STYLES
   ===================================================================== */