/* ==========================================================
   TURN ON LEARNING
   PROFESSIONAL RESPONSIVE HEADER

   Σχεδιασμός:
   - Λευκό και απαλό γαλάζιο background
   - Σκούρα μπλε γράμματα
   - Σταθερά navigation links
   - Μπλε animated underline
   - Login / Register
   - My Account / Logout
   - Responsive mobile navigation
========================================================== */


/* ==========================================================
   01. HEADER VARIABLES
========================================================== */

:root {
    --header-background: #f5f9ff;
    --header-background-secondary: #eaf3ff;

    --header-primary: #155eef;
    --header-primary-dark: #1048b7;

    --header-text: #173b69;
    --header-text-muted: #526e92;

    --header-border: #d8e6f8;

    --header-height: 94px;
}


/* ==========================================================
   02. MAIN HEADER
========================================================== */

#site-header {
    position: sticky;
    top: 0;
    z-index: 1000;

    display: block;

    width: 100%;
    min-height: var(--header-height);

    margin: 0;
    padding: 0;

    background: rgba(245, 249, 255, 0.82);

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

    border-bottom: 2px solid var(--header-border);

    box-shadow:
        0 5px 22px rgba(28, 75, 140, 0.08);
}


/* ==========================================================
   03. HEADER INNER CONTAINER
========================================================== */

.header-container {
    width: 100%;
    max-width: 1920px;

    min-height: var(--header-height);

    margin: 0 auto;

    padding: 0 clamp(20px, 2.5vw, 54px);

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

    gap: clamp(20px, 2vw, 40px);
}


/* ==========================================================
   04. LOGO
========================================================== */

.header-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    flex-shrink: 0;

    text-decoration: none;
}

.header-logo {
    display: block;

    width: clamp(160px, 12vw, 200px);
    height: auto;

    max-height: 76px;

    object-fit: contain;
}

.brand-fallback {
    color: var(--header-primary);

    font-size: 23px;
    font-weight: 800;

    letter-spacing: -0.7px;
}


/* ==========================================================
   05. MAIN NAVIGATION
========================================================== */

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

    flex: 1;
    min-width: 0;

    gap: clamp(16px, 1.7vw, 32px);
}


/* ==========================================================
   06. NAVIGATION LIST
========================================================== */

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

    gap: clamp(12px, 1.25vw, 25px);

    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-links li {
    flex-shrink: 0;
}


/* ==========================================================
   07. NAVIGATION LINKS
========================================================== */

.nav-links a {
    position: relative;

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

    min-height: 52px;

    color: var(--header-text);

    font-size: 15.5px;
    font-weight: 650;
    line-height: 1.4;

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

    transition: color 0.2s ease;
}


/* ==========================================================
   08. NAVIGATION HOVER
========================================================== */

.nav-links a:hover {
    color: var(--header-primary);
}


/* ==========================================================
   09. ANIMATED BLUE UNDERLINE
========================================================== */

.nav-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 7px;

    width: 0;
    height: 3px;

    background: var(--header-primary);

    border-radius: 4px;

    transition: width 0.25s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after {
    width: 100%;
}


/* ==========================================================
   10. HEADER ACTIONS
========================================================== */

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

    gap: 12px;

    flex-shrink: 0;
}


/* ==========================================================
   11. LANGUAGE INDICATOR
========================================================== */

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

    min-width: 38px;
    height: 42px;

    padding: 0 8px;

    color: var(--header-primary-dark);
    background: #e6efff;

    border: 1px solid #d6e5fb;
    border-radius: 10px;

    font-size: 13px;
    font-weight: 750;

    letter-spacing: 0.3px;
}


/* ==========================================================
   12. LOGIN / MY ACCOUNT
========================================================== */

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

    min-height: 46px;

    padding: 11px 22px;
    box-sizing: border-box;

    color: #1552bd;
    background: #e5efff;

    border: 1px solid #c7dcff;
    border-radius: 11px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;

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

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}

a.header-login:hover {
    color: #1048b7;
    background: #d8e8ff;

    border-color: #b8d2ff;
}

/* Το My Account παραμένει προσωρινά ανενεργό. */

span.header-login[aria-disabled="true"] {
    cursor: default;
}


/* ==========================================================
   13. REGISTER / LOGOUT
========================================================== */

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

    min-height: 46px;

    padding: 11px 24px;
    box-sizing: border-box;

    color: #ffffff;

    background: linear-gradient(
        135deg,
        #3478ff,
        #155eef
    );

    border: 1px solid #155eef;
    border-radius: 11px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.4;

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

    box-shadow:
        0 5px 15px rgba(21, 94, 239, 0.19);

    transition:
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

.header-register:hover {
    color: #ffffff;

    filter: brightness(0.94);

    box-shadow:
        0 7px 19px rgba(21, 94, 239, 0.30);
}


/* ==========================================================
   14. LOGOUT FORM
   Το Logout είναι POST button και όχι σύνδεσμος.
========================================================== */

.header-logout-form {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin: 0;
    padding: 0;

    border: none;
    background: transparent;
}

/* Ίδια εμφάνιση με το Register. */

.header-logout-form .header-register {
    appearance: none;
    -webkit-appearance: none;

    margin: 0;

    cursor: pointer;

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

    line-height: 1.4;
}

.header-logout-form .header-register:hover {
    color: #ffffff;
}

.header-logout-form .header-register:active {
    filter: brightness(0.88);
}


/* ==========================================================
   15. MOBILE MENU BUTTON
========================================================== */

.menu-toggle {
    display: none;

    width: 48px;
    height: 48px;

    padding: 0;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 6px;

    background: #e6efff;

    border: 1px solid #cbdfff;
    border-radius: 12px;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    width: 24px;
    height: 2px;

    background: var(--header-primary);

    border-radius: 3px;

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


/* ==========================================================
   16. TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1500px) {

    .menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .header-navigation {
        display: none;

        position: absolute;

        top: 100%;
        left: 0;
        right: 0;

        padding:
            26px
            clamp(20px, 4vw, 60px)
            32px;

        background: #f6faff;

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

        box-shadow:
            0 15px 30px rgba(20, 50, 100, 0.1);

        flex-direction: column;
        align-items: stretch;

        gap: 24px;

        max-height:
            calc(100dvh - var(--header-height));

        overflow-y: auto;
    }

    .header-navigation.is-open {
        display: flex;
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;

        gap: 0;
    }

    .nav-links li {
        border-bottom:
            1px solid #dfe9f7;
    }

    .nav-links a {
        display: flex;

        width: 100%;

        min-height: 50px;
        padding: 13px 5px;

        font-size: 16px;

        white-space: normal;
    }

    .nav-links a::after {
        bottom: 0;
        height: 2px;
    }

    .header-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Hamburger -> X */

    .menu-toggle[aria-expanded="true"]
    span:nth-child(1) {
        transform:
            translateY(8px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"]
    span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"]
    span:nth-child(3) {
        transform:
            translateY(-8px) rotate(-45deg);
    }
}


/* ==========================================================
   17. MOBILE PHONES
========================================================== */

@media (max-width: 480px) {

    :root {
        --header-height: 78px;
    }

    .header-container {
        padding: 0 16px;
    }

    .header-logo {
        width: 150px;
        max-height: 64px;
    }

    .header-login,
    .header-register {
        min-height: 44px;

        padding: 11px 17px;
    }

    .header-logout-form .header-register {
        min-height: 44px;
        padding: 11px 17px;
    }

    .header-actions {
        gap: 10px;
    }
}


/* ==========================================================
   18. KEYBOARD ACCESSIBILITY
========================================================== */

.header-brand:focus-visible,
.nav-links a:focus-visible,
.header-login:focus-visible,
.header-register:focus-visible,
.menu-toggle:focus-visible {
    outline: 3px solid #4c8dff;
    outline-offset: 4px;
}


/* ==========================================================
   19. REDUCED MOTION
========================================================== */

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

    #site-header *,
    #site-header *::before,
    #site-header *::after {
        transition: none !important;
        animation: none !important;
    }
}