@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Mobile Navigation Component
   =====================================================================

   File:
   assets/css/components/mobile-navigation.css

   Phase:
   Phase 6 - Component CSS

   Purpose:
   - Provide the mobile website header
   - Present logo / brand
   - Present mobile menu trigger
   - Present mobile navigation panel
   - Present primary website links
   - Present authentication links
   - Present counselling CTA
   - Present expert / centre partnership links
   - Support accessible open / closed states
   - Support body-scroll locking integration
   - Support safe-area devices
   - Hide mobile navigation on tablet / desktop

   Dependencies:
   - assets/css/style.css
   - assets/css/website.css
   - assets/css/responsive.css
   - assets/css/components/topbar.css
   - assets/css/components/navigation.css

   Component markup will later be rendered by:
   website/components/mobile-navigation.php

   Behaviour will later be implemented by:
   assets/js/components/mobile-navigation.js
   ===================================================================== */


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

.mobile-navigation {
    position: relative;

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

    display: none;

    width: 100%;

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

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

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


/* =====================================================================
   2. MOBILE HEADER
   ===================================================================== */

.mobile-navigation__header {
    position: relative;

    z-index: calc(var(--z-sticky) + 2);

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    min-height: 4.5rem;

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


/* =====================================================================
   3. BRAND / LOGO
   ===================================================================== */

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

    flex: 0 1 auto;

    max-width: 11rem;

    color: var(--color-heading);

    text-decoration: none;
}


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

    text-decoration: none;
}


.mobile-navigation__brand:focus-visible {
    outline:
        3px
        solid
        rgb(60 141 245 / 0.25);

    outline-offset: 3px;

    border-radius: var(--radius-sm);
}


.mobile-navigation__logo {
    display: block;

    width: auto;
    max-width: 100%;
    height: 2.5rem;

    object-fit: contain;
}


/* =====================================================================
   4. MENU TOGGLE
   ===================================================================== */

.mobile-navigation__toggle {
    position: relative;

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

    flex: 0 0 auto;

    width: 2.75rem;
    height: 2.75rem;

    padding: 0;

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

    border:
        var(--border-width)
        solid
        var(--color-grey-200);

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

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;

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


.mobile-navigation__toggle:hover {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);

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


.mobile-navigation__toggle:focus-visible {
    outline:
        3px
        solid
        rgb(60 141 245 / 0.24);

    outline-offset: 2px;
}


/* =====================================================================
   5. TOGGLE ICON
   ===================================================================== */

.mobile-navigation__toggle-icon {
    position: relative;

    display: block;

    width: 1.25rem;
    height: 1rem;
}


.mobile-navigation__toggle-line {
    position: absolute;
    left: 0;

    display: block;

    width: 100%;
    height: 2px;

    background-color: currentColor;

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

    transform-origin: center;

    transition:
        top var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


.mobile-navigation__toggle-line:nth-child(1) {
    top: 0;
}


.mobile-navigation__toggle-line:nth-child(2) {
    top: 0.4375rem;
}


.mobile-navigation__toggle-line:nth-child(3) {
    top: 0.875rem;
}


/* =====================================================================
   6. TOGGLE OPEN STATE
   ===================================================================== */

.mobile-navigation.is-open
.mobile-navigation__toggle {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);

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


.mobile-navigation.is-open
.mobile-navigation__toggle-line:nth-child(1) {
    top: 0.4375rem;

    transform: rotate(45deg);
}


.mobile-navigation.is-open
.mobile-navigation__toggle-line:nth-child(2) {
    opacity: 0;
}


.mobile-navigation.is-open
.mobile-navigation__toggle-line:nth-child(3) {
    top: 0.4375rem;

    transform: rotate(-45deg);
}


/* =====================================================================
   7. OVERLAY
   ===================================================================== */

.mobile-navigation__overlay {
    position: fixed;
    inset: 0;

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

    visibility: hidden;

    opacity: 0;

    background-color:
        rgb(15 23 42 / 0.48);

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    transition:
        opacity var(--transition-base),
        visibility var(--transition-base);
}


.mobile-navigation.is-open
.mobile-navigation__overlay {
    visibility: visible;

    opacity: 1;
}


/* =====================================================================
   8. MENU PANEL
   ===================================================================== */

.mobile-navigation__panel {
    position: fixed;
    top: 0;
    right: 0;

    z-index: calc(var(--z-overlay) + 1);

    display: flex;
    flex-direction: column;

    width: min(
        88vw,
        24rem
    );

    height: 100dvh;
    min-height: 100vh;

    overflow-y: auto;
    overscroll-behavior: contain;

    padding:
        env(safe-area-inset-top, 0)
        0
        env(safe-area-inset-bottom, 0);

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

    box-shadow:
        -16px 0 40px
        rgb(15 23 42 / 0.16);

    transform: translateX(100%);

    visibility: hidden;

    transition:
        transform var(--transition-base),
        visibility var(--transition-base);

    -webkit-overflow-scrolling: touch;
}


.mobile-navigation.is-open
.mobile-navigation__panel {
    visibility: visible;

    transform: translateX(0);
}


/* =====================================================================
   9. PANEL HEADER
   ===================================================================== */

.mobile-navigation__panel-header {
    position: sticky;
    top: 0;

    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-4);

    min-height: 4.5rem;

    padding:
        var(--space-3)
        var(--space-5);

    background-color:
        rgb(255 255 255 / 0.96);

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

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


/* =====================================================================
   10. PANEL BRAND
   ===================================================================== */

.mobile-navigation__panel-brand {
    display: inline-flex;
    align-items: center;

    max-width: 9.5rem;
}


.mobile-navigation__panel-logo {
    display: block;

    width: auto;
    max-width: 100%;
    height: 2.25rem;

    object-fit: contain;
}


/* =====================================================================
   11. PANEL CLOSE BUTTON
   ===================================================================== */

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

    flex: 0 0 auto;

    width: 2.5rem;
    height: 2.5rem;

    padding: 0;

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

    border:
        var(--border-width)
        solid
        var(--color-grey-200);

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

    cursor: pointer;

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


.mobile-navigation__close:hover {
    color: var(--color-error-700);
    background-color: var(--color-error-50);

    border-color: #fecaca;
}


.mobile-navigation__close:focus-visible {
    outline:
        3px
        solid
        rgb(60 141 245 / 0.24);

    outline-offset: 2px;
}


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

    width: 1.1rem;
    height: 1.1rem;
}


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


/* =====================================================================
   12. PANEL BODY
   ===================================================================== */

.mobile-navigation__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;

    padding:
        var(--space-5)
        var(--space-5)
        var(--space-6);
}


/* =====================================================================
   13. PRIMARY MENU
   ===================================================================== */

.mobile-navigation__menu {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   14. MENU ITEM
   ===================================================================== */

.mobile-navigation__item {
    display: block;

    width: 100%;
}


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

.mobile-navigation__link {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    width: 100%;
    min-height: 3rem;

    padding:
        0.75rem
        var(--space-4);

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    line-height: 1.3;

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

    text-decoration: none;

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

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


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

    text-decoration: none;
}


.mobile-navigation__link:focus-visible {
    outline:
        3px
        solid
        rgb(60 141 245 / 0.22);

    outline-offset: 2px;
}


/* =====================================================================
   16. CURRENT LINK
   ===================================================================== */

.mobile-navigation__link[aria-current="page"],
.mobile-navigation__link.is-current {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);

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


.mobile-navigation__link[aria-current="page"]::before,
.mobile-navigation__link.is-current::before {
    content: "";

    position: absolute;
    top: 0.75rem;
    bottom: 0.75rem;
    left: 0;

    width: 3px;

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

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


/* =====================================================================
   17. DISABLED LINK
   ===================================================================== */

.mobile-navigation__link.is-disabled,
.mobile-navigation__link[aria-disabled="true"] {
    color: var(--color-grey-400);
    background-color: transparent;

    cursor: not-allowed;

    pointer-events: none;
}


/* =====================================================================
   18. MENU LINK ICON
   ===================================================================== */

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

    flex: 0 0 auto;

    width: 1.1rem;
    height: 1.1rem;

    color: var(--color-grey-500);
}


.mobile-navigation__link:hover
.mobile-navigation__link-icon,
.mobile-navigation__link.is-current
.mobile-navigation__link-icon {
    color: var(--color-primary-700);
}


/* =====================================================================
   19. MENU DIVIDER
   ===================================================================== */

.mobile-navigation__divider {
    width: 100%;
    height: 1px;

    margin-block: var(--space-5);

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

    border: 0;
}


/* =====================================================================
   20. SECTION LABEL
   ===================================================================== */

.mobile-navigation__section-label {
    display: block;

    margin-bottom: var(--space-2);
    padding-inline: var(--space-4);

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

    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;

    color: var(--color-text-muted);
}


/* =====================================================================
   21. AUTHENTICATION LINKS
   ===================================================================== */

.mobile-navigation__auth {
    display: grid;

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

    gap: var(--space-3);
}


.mobile-navigation__auth .btn {
    width: 100%;
}


/* =====================================================================
   22. PRIMARY MOBILE CTA
   ===================================================================== */

.mobile-navigation__cta {
    display: flex;
    flex-direction: column;

    gap: var(--space-3);

    margin-top: var(--space-5);
}


.mobile-navigation__cta .btn {
    width: 100%;
}


/* =====================================================================
   23. BOOK COUNSELLING BUTTON
   ===================================================================== */

.mobile-navigation__counselling {
    min-height: 3rem;

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


/* =====================================================================
   24. BOOK NOW BUTTON
   ===================================================================== */

.mobile-navigation__book {
    min-height: 3.125rem;

    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}


/* =====================================================================
   25. PARTNERSHIP AREA
   ===================================================================== */

.mobile-navigation__partnership {
    display: flex;
    flex-direction: column;

    gap: var(--space-2);

    margin-top: var(--space-5);
    padding: var(--space-4);

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

    border:
        var(--border-width)
        solid
        var(--color-border);

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


.mobile-navigation__partnership-title {
    margin-bottom: var(--space-1);

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

    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;

    color: var(--color-text-muted);
}


/* =====================================================================
   26. PARTNERSHIP LINK
   ===================================================================== */

.mobile-navigation__partnership-link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-3);

    min-height: 2.75rem;

    padding:
        var(--space-2)
        var(--space-3);

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

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

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

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


.mobile-navigation__partnership-link:hover {
    color: var(--color-primary-800);
    background-color: var(--color-primary-50);

    text-decoration: none;
}


/* =====================================================================
   27. PANEL FOOTER
   ===================================================================== */

.mobile-navigation__footer {
    margin-top: auto;
    padding-top: var(--space-6);
}


.mobile-navigation__footer-text {
    font-size: var(--font-size-xs);
    line-height: var(--line-height-relaxed);

    color: var(--color-text-muted);
}


/* =====================================================================
   28. OPTIONAL EXPANDABLE SUBMENU
   ===================================================================== */

.mobile-navigation__submenu {
    display: none;

    margin:
        var(--space-1)
        0
        var(--space-2);

    padding:
        0
        0
        0
        var(--space-4);

    list-style: none;

    border-left:
        var(--border-width-strong)
        solid
        var(--color-primary-100);
}


.mobile-navigation__item.is-open
.mobile-navigation__submenu {
    display: block;
}


/* =====================================================================
   29. SUBMENU LINK
   ===================================================================== */

.mobile-navigation__submenu-link {
    display: block;

    padding:
        var(--space-2)
        var(--space-3);

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

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

    border-radius: var(--radius-sm);
}


.mobile-navigation__submenu-link:hover {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);

    text-decoration: none;
}


/* =====================================================================
   30. SUBMENU TOGGLE
   ===================================================================== */

.mobile-navigation__submenu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 2rem;
    height: 2rem;

    margin-left: auto;

    padding: 0;

    color: var(--color-grey-500);
    background: transparent;

    border: 0;
    border-radius: var(--radius-sm);

    cursor: pointer;
}


.mobile-navigation__submenu-toggle:hover {
    color: var(--color-primary-700);
    background-color: var(--color-primary-50);
}


.mobile-navigation__submenu-toggle-icon {
    width: 0.9rem;
    height: 0.9rem;

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


.mobile-navigation__item.is-open
.mobile-navigation__submenu-toggle-icon {
    transform: rotate(180deg);
}


/* =====================================================================
   31. OPEN BODY STATE
   =====================================================================

   app.js already provides the is-scroll-locked body class. The mobile
   navigation JS will use that helper while the menu is open.
   ===================================================================== */

body.is-scroll-locked {
    overscroll-behavior: none;
}


/* =====================================================================
   32. MOBILE ENABLEMENT
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .mobile-navigation {
        display: block;
    }
}


/* =====================================================================
   33. TABLET / DESKTOP
   ===================================================================== */

@media (min-width: 48rem) {

    .mobile-navigation {
        display: none !important;
    }


    .mobile-navigation__overlay,
    .mobile-navigation__panel {
        display: none !important;
    }
}


/* =====================================================================
   34. SMALL MOBILE
   ===================================================================== */

@media (max-width: 30rem) {

    .mobile-navigation__header {
        min-height: 4.25rem;
    }


    .mobile-navigation__brand {
        max-width: 9.5rem;
    }


    .mobile-navigation__logo {
        height: 2.25rem;
    }


    .mobile-navigation__panel {
        width: min(
            92vw,
            22rem
        );
    }


    .mobile-navigation__panel-header,
    .mobile-navigation__body {
        padding-inline: var(--space-4);
    }
}


/* =====================================================================
   35. VERY SMALL MOBILE
   ===================================================================== */

@media (max-width: 23.9375rem) {

    .mobile-navigation__panel {
        width: 100%;
    }


    .mobile-navigation__auth {
        grid-template-columns: 1fr;
    }


    .mobile-navigation__panel-header {
        padding-inline: var(--space-4);
    }


    .mobile-navigation__body {
        padding:
            var(--space-4)
            var(--space-4)
            var(--space-5);
    }
}


/* =====================================================================
   36. LANDSCAPE MOBILE
   ===================================================================== */

@media
    (max-width: 47.9375rem)
    and
    (orientation: landscape)
    and
    (max-height: 32rem) {

    .mobile-navigation__panel-header {
        min-height: 3.75rem;
    }


    .mobile-navigation__body {
        padding-top: var(--space-3);
    }


    .mobile-navigation__link {
        min-height: 2.5rem;

        padding-block: var(--space-2);
    }


    .mobile-navigation__divider {
        margin-block: var(--space-3);
    }


    .mobile-navigation__cta,
    .mobile-navigation__partnership {
        margin-top: var(--space-3);
    }
}


/* =====================================================================
   37. REDUCED MOTION
   ===================================================================== */

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

    .mobile-navigation__toggle,
    .mobile-navigation__toggle-line,
    .mobile-navigation__overlay,
    .mobile-navigation__panel,
    .mobile-navigation__close,
    .mobile-navigation__link,
    .mobile-navigation__partnership-link,
    .mobile-navigation__submenu-toggle-icon {
        transition: none;
    }
}


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

@media (forced-colors: active) {

    .mobile-navigation,
    .mobile-navigation__panel-header,
    .mobile-navigation__toggle,
    .mobile-navigation__close,
    .mobile-navigation__partnership {
        border-color: CanvasText;
    }


    .mobile-navigation__overlay {
        background-color: Canvas;
    }


    .mobile-navigation__link[aria-current="page"],
    .mobile-navigation__link.is-current {
        outline:
            2px
            solid
            Highlight;
    }
}


/* =====================================================================
   39. PRINT
   ===================================================================== */

@media print {

    .mobile-navigation {
        display: none !important;
    }
}


/* =====================================================================
   END OF OLLATOEDU ECOSYS MOBILE NAVIGATION COMPONENT
   ===================================================================== */