@charset "UTF-8";

/* =====================================================================
   OLLATOEDU ECOSYS
   Topbar Component Styles
   =====================================================================

   File:
   assets/css/components/topbar.css

   Purpose:
   - Style the global topbar
   - Keep topbar background full-width
   - Keep content aligned to the global .container
   - Style welcome text on the left
   - Style expert/centre/account actions on the right
   - Support icons alongside text
   - Provide responsive behaviour
   - Maintain accessibility and professional visual hierarchy

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

   Expected structure:
   .topbar
     .container
       .topbar__inner
         .topbar__welcome
           .topbar__welcome-icon
           .topbar__welcome-text

         .topbar__navigation
           .topbar__links
             .topbar__item
               .topbar__link
                 .topbar__icon
                 .topbar__link-text
             .topbar__separator

   Notes:
   - Do not constrain .topbar itself
   - The .container controls horizontal alignment
   - Desktop content aligns with the same 1280px site container
   ===================================================================== */


/* =====================================================================
   1. TOPBAR ROOT
   ===================================================================== */

.topbar {
    position: relative;

    width: 100%;

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

    color: var(--color-white);

    border-bottom:
        1px
        solid
        rgb(255 255 255 / 0.08);

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


/* =====================================================================
   2. TOPBAR INNER
   ===================================================================== */

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

    gap: var(--space-6);

    min-height: 2.75rem;

    padding-block:
        0.45rem;
}


/* =====================================================================
   3. WELCOME AREA
   ===================================================================== */

.topbar__welcome {
    display: inline-flex;
    align-items: center;

    gap: var(--space-2);

    min-width: 0;

    color:
        rgb(255 255 255 / 0.94);
}


/* =====================================================================
   4. WELCOME ICON
   ===================================================================== */

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

    flex: 0 0 auto;

    width: 1rem;
    height: 1rem;

    color:
        rgb(255 255 255 / 0.82);
}


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


/* =====================================================================
   5. WELCOME TEXT
   ===================================================================== */

.topbar__welcome-text {
    display: block;

    min-width: 0;

    overflow: hidden;

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

    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* =====================================================================
   6. TOPBAR NAVIGATION
   ===================================================================== */

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

    flex: 0 0 auto;
}


/* =====================================================================
   7. LINK LIST
   ===================================================================== */

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

    gap: 0;

    margin: 0;
    padding: 0;

    list-style: none;
}


/* =====================================================================
   8. LINK ITEM
   ===================================================================== */

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

    margin: 0;
}


/* =====================================================================
   9. TOPBAR LINK
   ===================================================================== */

.topbar__link {
    position: relative;

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

    gap: 0.4rem;

    min-height: 2rem;

    padding:
        0.35rem
        0.65rem;

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

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

    line-height: 1.2;

    color:
        rgb(255 255 255 / 0.92);

    text-decoration: none;

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


/* =====================================================================
   10. LINK ICON
   ===================================================================== */

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

    flex: 0 0 auto;

    width: 0.95rem;
    height: 0.95rem;

    color:
        rgb(255 255 255 / 0.78);

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


.topbar__icon svg {
    width: 100%;
    height: 100%;
}


/* =====================================================================
   11. LINK TEXT
   ===================================================================== */

.topbar__link-text {
    display: inline-block;

    white-space: nowrap;
}


/* =====================================================================
   12. LINK HOVER
   ===================================================================== */

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

    background-color:
        rgb(255 255 255 / 0.10);
}


.topbar__link:hover
.topbar__icon {
    color: var(--color-white);

    transform: translateY(-1px);
}


/* =====================================================================
   13. CURRENT PAGE
   ===================================================================== */

.topbar__link.is-current {
    color: var(--color-white);

    background-color:
        rgb(255 255 255 / 0.14);
}


.topbar__link.is-current
.topbar__icon {
    color: var(--color-white);
}


/* =====================================================================
   14. FOCUS STATE
   ===================================================================== */

.topbar__link:focus-visible {
    outline:
        2px
        solid
        rgb(255 255 255 / 0.85);

    outline-offset: 2px;

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


/* =====================================================================
   15. SEPARATOR
   ===================================================================== */

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

    margin: 0;

    padding-inline:
        0.1rem;
}


.topbar__separator span {
    display: block;

    width: 1px;
    height: 0.9rem;

    background-color:
        rgb(255 255 255 / 0.24);
}


/* =====================================================================
   16. DESKTOP EMPHASIS
   =====================================================================

   Slightly emphasise the account actions without turning them into
   heavy buttons.
   ===================================================================== */

.topbar__item:nth-last-child(-n + 2)
.topbar__link {
    font-weight: var(--font-weight-bold);
}


/* =====================================================================
   17. LARGE DESKTOP
   ===================================================================== */

@media (min-width: 90rem) {

    .topbar__inner {
        min-height: 2.9rem;
    }


    .topbar__welcome-text {
        font-size: 0.84rem;
    }


    .topbar__link {
        padding-inline:
            0.75rem;

        font-size: 0.82rem;
    }

}


/* =====================================================================
   18. STANDARD DESKTOP
   ===================================================================== */

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

    .topbar__inner {
        gap: var(--space-4);
    }


    .topbar__link {
        padding-inline:
            0.6rem;
    }

}


/* =====================================================================
   19. TABLET
   ===================================================================== */

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

    .topbar__inner {
        gap: var(--space-3);
    }


    .topbar__welcome-text {
        max-width: 16rem;
    }


    .topbar__link {
        gap: 0.3rem;

        padding-inline:
            0.45rem;

        font-size: 0.75rem;
    }


    .topbar__icon {
        width: 0.85rem;
        height: 0.85rem;
    }


    .topbar__separator {
        padding-inline: 0;
    }

}


/* =====================================================================
   20. MOBILE
   =====================================================================

   On mobile, the dedicated mobile navigation already exposes:
   - Login
   - Register
   - Join as Expert
   - Partner as Centre

   Therefore the topbar becomes a compact welcome strip instead of
   duplicating the entire action list.
   ===================================================================== */

@media (max-width: 47.9375rem) {

    .topbar__inner {
        justify-content: center;

        min-height: 2.5rem;

        padding-block:
            0.4rem;
    }


    .topbar__welcome {
        width: 100%;

        justify-content: center;

        text-align: center;
    }


    .topbar__welcome-text {
        max-width: 100%;

        font-size: 0.78rem;

        white-space: normal;
        text-overflow: clip;
    }


    .topbar__welcome-icon {
        width: 0.95rem;
        height: 0.95rem;
    }


    .topbar__navigation {
        display: none;
    }

}


/* =====================================================================
   21. SMALL MOBILE
   ===================================================================== */

@media (max-width: 29.9375rem) {

    .topbar__inner {
        min-height: 2.35rem;
    }


    .topbar__welcome {
        gap: 0.4rem;
    }


    .topbar__welcome-text {
        font-size: 0.72rem;
    }


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

}


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

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

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

}


/* =====================================================================
   23. REDUCED MOTION
   ===================================================================== */

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

    .topbar__link,
    .topbar__icon {
        transition: none;
    }


    .topbar__link:hover,
    .topbar__link:hover
    .topbar__icon {
        transform: none;
    }

}


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

@media (forced-colors: active) {

    .topbar {
        color: CanvasText;
        background: Canvas;

        border-bottom:
            1px
            solid
            CanvasText;
    }


    .topbar__welcome,
    .topbar__welcome-icon,
    .topbar__link,
    .topbar__icon {
        color: CanvasText;
    }


    .topbar__link {
        border:
            1px
            solid
            transparent;
    }


    .topbar__link:hover,
    .topbar__link.is-current {
        background: Highlight;

        color: HighlightText;
    }


    .topbar__separator span {
        background-color: CanvasText;
    }

}


/* =====================================================================
   25. PRINT
   ===================================================================== */

@media print {

    .topbar {
        display: none !important;
    }

}


/* =====================================================================
   END OF OLLATOEDU ECOSYS TOPBAR STYLES
   ===================================================================== */