@import url('/css/global.css');

/* ─────────────────────────────────────────────────────────────
   HEADER SHELL
   ───────────────────────────────────────────────────────────── */
.tg-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    width: 100%;
    background: var(--dw-white);
    /* smooth transition for both scroll and page states */
    transition: background .35s ease, box-shadow .35s ease;
    padding: 30px 32px;
    height: 124px;
    display: grid;
}

.tg-header__logo {
    display: flex;
}

/* ─────────────────────────────────────────────────────────────
   NAVBAR (bottom strip) — WHITE state
   ───────────────────────────────────────────────────────────── */
.tg-navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

.tg-navbar__left {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* Nav links */
.tg-nav-links {
    display: flex;
    gap: 26px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .tg-nav-links a {
        font-size: 1rem;
        font-weight: 400;
        color: var(--dw-gray-700);
        text-decoration: none;
        padding-bottom: 8px;
        line-height: 24px;
        transition: color .2s;
    }

        .tg-nav-links a:hover {
            color: var(--dw-ink);
        }

        .tg-nav-links a.active {
            color: var(--dw-gray-800);
            border-bottom: 3px solid var(--dw-gray-800);
            border-end-start-radius: 3px;
            border-end-end-radius: 3px;
        }

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

/* Hamburger — dark bars on white background */
.tg-nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    flex-shrink: 0;
}

    .tg-nav-toggle span {
        display: block;
        width: 21px;
        height: 2px;
        background: var(--dw-ink);
        border-radius: 2px;
        transition: background .35s ease, transform .25s ease, opacity .25s ease;
    }

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

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

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

/* Search — white background state */
.tg-search {
    position: relative;
    display: flex;
    align-items: center;
}

.tg-search__btn {
    height: 40px;
    display: flex;
    align-items: center;
    gap: 4px;
    border: none;
    background: var(--dw-bg-gray);
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--dw-gray-b);
    fill: var(--dw-gray-b);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background .35s, border-color .35s, color .35s;
    letter-spacing: 0.14px;
    line-height: 20px;
}

    .tg-search__btn:hover {
        background: rgba(0,0,0,.09);
    }

.tg-search__input {
    display: block;
    width: 0;
    opacity: 0;
    pointer-events: none;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 20px;
    padding: 0;
    color: var(--dw-gray-b);
    font-size: 0.875rem;
    outline: none;
    transition: width .28s ease, opacity .28s ease;
}

    .tg-search__input::placeholder {
        color: var(--dw-gray-b);
    }

.tg-search.is-open .tg-search__btn {
    display: none;
}

.tg-search.is-open .tg-search__input {
    width: 200px;
    opacity: 1;
    padding: 6px 14px;
    pointer-events: auto;
}

/* Accessibility icon button — white state */
.dw-access {
    position: relative;
    display: inline-flex;
}

.tg-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 50%;
    color: var(--dw-gray-900);
    fill: var(--dw-gray-900);
    cursor: pointer;
    padding: 0;
    transition: background .35s, border-color .35s, color .35s;
}

    .tg-icon-btn:hover {
        background: rgba(0,0,0,.1);
    }

/* Language button — white state */
.tg-lang-btn {
    height: 40px;
    display: flex;
    align-items: center;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 26px;
    padding: 8px 12px;
    color: var(--dw-gray-900);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    transition: background .35s, border-color .35s, color .35s;
    text-decoration: unset;
}

    .tg-lang-btn:hover {
        background: rgba(0,0,0,.09);
    }

/* Login button — white state */
.tg-btn-login {
    height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--dw-bg-gray);
    border: none;
    border-radius: 999px;
    padding: 8px 12px;
    color: var(--dw-gray-900);
    fill: var(--dw-gray-900);
    font-size: 0.875rem;
    font-weight: 400;
    text-decoration: none;
    transition: background .35s, border-color .35s, color .35s;
}

    .tg-btn-login:hover {
        background: rgba(0,0,0,.09);
    }

/* ─────────────────────────────────────────────────────────────
   HERO HEADER — transparent on Home + About
   ───────────────────────────────────────────────────────────── */
.tg-header--hero {
    position: fixed; /* overlays the hero image */
    background: transparent;
    box-shadow: none;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 63.02%, rgba(0, 0, 0, 0.00) 100%);
}

    .tg-header--hero ::after {
        background: linear-gradient( 180deg, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.40) 63.02%, rgba(0, 0, 0, 0) 100% );
    }



    /* All elements go white/light when transparent */
    .tg-header--hero:not(.is-scrolled) .tg-nav-links a {
        color: var(--dw-header);
    }

        .tg-header--hero:not(.is-scrolled) .tg-nav-links a.active {
            color: var(--dw-header);
            border-bottom-color: var(--dw-header);
        }

    .tg-header--hero:not(.is-scrolled) .tg-nav-toggle span {
        background: rgba(255,255,255,.85);
    }

    .tg-header--hero:not(.is-scrolled) .tg-search__btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-search__input {
        color: var(--dw-gray-900);
    }

        .tg-header--hero:not(.is-scrolled) .tg-search__input::placeholder {
            color: var(--dw-gray-900);
        }

    .tg-header--hero:not(.is-scrolled) .bg-light.tg-search__input::placeholder {
        color: var(--dw-gray-b);
    }

    .tg-header--hero:not(.is-scrolled) .tg-icon-btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-lang-btn {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .tg-btn-login {
        color: var(--dw-gray-900);
    }

    .tg-header--hero:not(.is-scrolled) .bg-light, .tg-header--hero:not(.is-scrolled) .tg-search__input.bg-light {
        /*        background: var(--dw-bg-gray);
        color: var(--dw-gray-900);
        fill: var(--dw-gray-900);*/
    }

    /* Scrolled → back to white (JS adds .is-scrolled) */
    .tg-header--hero.is-scrolled {
        background: var(--dw-white);
        box-shadow: 0 1px 8px rgba(0,0,0,.1);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }

/* ─────────────────────────────────────────────────────────────
   MOBILE MENU
   ───────────────────────────────────────────────────────────── */

.tg-nav-mobile--hero {
    top: 124px;
}

.tg-nav-mobile {
    display: none;
    flex-direction: column;
    background: var(--dw-white);
    border-bottom: 1px solid rgba(0,0,0,.08);
    padding: 20px 24px 24px;
}

    .tg-nav-mobile.is-open {
        display: flex;
        position: fixed;
        width: 100%;
        z-index: 1000;
    }

    .tg-nav-mobile ul {
        list-style: none;
        padding: 0;
        margin: 0 0 4px;
        display: flex;
        flex-direction: column;
        gap: 0;
    }

        .tg-nav-mobile ul a {
            display: block;
            padding: 10px 0;
            font-size: .95rem;
            font-weight: 500;
            color: var(--dw-gray-700);
            text-decoration: none;
            border-bottom: 1px solid var(--dw-bdr);
            transition: color .18s;
        }

            .tg-nav-mobile ul a:hover,
            .tg-nav-mobile ul a.active {
                color: var(--dw-teal);
            }

.tg-mob-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    align-items: flex-start;
}

.tg-mob-cta {
    display: block;
    text-align: center;
    background: var(--dw-teal);
    color: var(--dw-white);
    border: none;
    border-radius: 24px;
    padding: 11px 24px;
    font-size: .95rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s;
}

    .tg-mob-cta:hover {
        background: var(--dw-teal-bold);
    }

.tg-mob-cta--outline {
    background: transparent;
    border: 1.5px solid var(--dw-teal);
    color: var(--dw-teal);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE BREAKPOINTS
   ───────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .tg-navbar {
        padding: 0;
    }

    .tg-search.is-open .tg-search__input {
        width: 160px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE  ── Mobile  (≤ 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Navbar ── */
    .tg-navbar {
        padding: 0;
    }

    .tg-nav-links {
        display: none;
    }

    .tg-nav-actions {
        display: none;
    }

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

@media (max-width: 640px) {
    .tg-header {
        height: 88px;
        padding: 20px;
    }

    .tg-nav-mobile--hero {
        top: 88px;
    }

    .tg-header__logo {
        height: 26px;
    }

    .tg-navbar {
        padding: 0 16px;
        height: 46px;
    }

    .tg-nav-links {
        display: none;
    }


    .tg-search.is-open .tg-search__input {
        width: 140px;
    }

    .tg-btn-login {
        padding: 6px 12px;
        font-size: 0.75rem;
    }
}

@media (max-width: 380px) {

    .tg-navbar {
        padding: 0 12px;
    }
}






/* =========================================================
   LANGUAGE DROPDOWN
   ========================================================= */

.tg-language-dropdown {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    z-index: 1050;
}


/* =========================================================
   LANGUAGE BUTTON
   ========================================================= */

.tg-language-toggle {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 40px;
    min-width: 80px;
    padding: 8px 12px;
    border: none;
    border-radius: 999px;
    background: var(--dw-bg-gray);
    color: var(--dw-gray-900);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 20px;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

    .tg-language-toggle:hover {
        background: rgba(0, 0, 0, .09);
    }

    .tg-language-toggle:focus,
    .tg-language-toggle:focus-visible {
        outline: none;
    }

    .tg-language-toggle svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
        transition: transform .2s ease;
    }


/* Arrow */
.tg-language-dropdown.is-open .tg-language-toggle svg {
    transform: rotate(180deg);
}


/* =========================================================
   DROPDOWN MENU
   ========================================================= */

.tg-language-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 180px;
    margin: 0;
    padding: 7px;
    border: none;
    border-radius: 16px;
    background: var(--dw-bg-gray);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);
    list-style: none;
    /* Hidden without affecting layout */
    display: none;
}


/* Open */
.tg-language-dropdown.is-open .tg-language-menu {
    display: block;
}


/* =========================================================
   MENU ITEMS
   ========================================================= */

.tg-language-menu ul,
.tg-language-menu li {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tg-language-menu .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 40px;
    margin: 2px 0;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dw-gray-900);
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-sizing: border-box;
    transition: background-color .15s ease, color .15s ease;
}


    /* Hover */
    .tg-language-menu .dropdown-item:hover {
        background: rgba(0, 0, 0, .09);
        color: var(--dw-gray-900);
    }


    /* Selected */
    .tg-language-menu .dropdown-item.active {
        background: rgba(0, 0, 0, .06);
        color: var(--dw-gray-900);
        font-weight: 600;
    }


/* Check */
.tg-language-check {
    flex: 0 0 auto;
    color: var(--dw-gray-900);
}


/* =========================================================
   HERO HEADER
   ========================================================= */

.tg-header--hero:not(.is-scrolled) .tg-language-toggle {
    background: var(--dw-bg-gray);
    color: var(--dw-gray-900);
}

    .tg-header--hero:not(.is-scrolled) .tg-language-toggle:hover {
        background: rgba(0, 0, 0, .09);
    }


/* =========================================================
   RTL
   ========================================================= */

html[dir="rtl"] .tg-language-menu {
    right: auto;
    left: 0;
    text-align: right;
}

    html[dir="rtl"] .tg-language-menu .dropdown-item {
        flex-direction: row;
    }


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 991px) {

    .tg-language-toggle {
        min-width: 76px;
        height: 40px;
        padding: 8px 12px;
        font-size: 0.875rem;
    }

    .tg-language-menu {
        width: 170px;
    }
}

/* ─────────────────────────────────────────────────────────────
   HEADER LAYOUT — logo left, nav links centred, actions right.

   `.tg-navbar` on its own only spaces the three columns apart, so
   Home/About/FAQ/Courses ended up hard against the logo instead of
   centred. Giving the two OUTER columns an equal flex basis puts the
   middle column on the header's true horizontal centre, however much
   wider the action buttons are than the logo.

   The child combinator matters: `.tg-header__logo` is on both the
   wrapper div and the <img> inside it, and `flex` on the image would
   stretch it.
   ───────────────────────────────────────────────────────────── */
.tg-navbar {
    gap: 16px;
}

.tg-navbar > .tg-header__logo {
    flex: 1 1 0;
    min-width: 0;
}

.tg-navbar > .tg-navbar__left {
    flex: 0 1 auto;
    justify-content: center;
}

/* Must be `1 1 0`, the same basis the logo column gets — that equal pair is what
   puts the middle column on the header's true centre. It read `flex: 1 1 1`,
   whose unitless basis is not a valid <length>, so the browser dropped the whole
   declaration: the actions column never grew, the logo column absorbed all the
   free space, and the links sat right of centre. */
.tg-navbar > .tg-nav-actions {
    flex: 1 1 0;
    justify-content: flex-end;
    min-width: 0;
}

/* Below the nav-links breakpoint the middle column holds only the
   hamburger, so centring it would park that button mid-header. */
@media (max-width: 768px) {
    .tg-navbar > .tg-navbar__left {
        flex: 0 0 auto;
        justify-content: flex-start;
    }
}