@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: 1.5rem;
        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 {
    min-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: 1.25rem;
}

    .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 {
    min-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 {
    min-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);
    }

    /* Same fix as SD-REG-07 / TG-REG-01: the hero → scrolled swap must be instant. The gradient can't interpolate,
       so it vanished at once while background-color faded in from transparent (under the blur) and the links/icons
       faded — for that window the header was see-through and the page showed through the menu. Only the shadow
       animates. `.tg-header.` prefix: accessibility.css (loaded later) re-adds a background-color transition on
       `.tg-header`. */
    .tg-header.tg-header--hero {
        transition: box-shadow .35s ease;
    }

    .tg-header--hero .tg-nav-links a,
    .tg-header--hero .tg-nav-toggle span,
    .tg-header--hero .tg-search__btn,
    .tg-header--hero .tg-search__input,
    .tg-header--hero .tg-icon-btn,
    .tg-header--hero .tg-lang-btn,
    .tg-header--hero .tg-btn-login,
    .tg-header--hero .tg-language-toggle {
        transition: none;
    }

/* ─────────────────────────────────────────────────────────────
   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;
    }

/* The hamburger only exists up to 1100px; above that the drawer must never show, even if it was left
   open while the window was narrow (restore-down → open menu → maximise stacked it under the header). */
@media (min-width: 1101px) {
    .tg-nav-mobile,
    .tg-nav-mobile.is-open {
        display: none;
    }
}

    .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-btn, #0077C0);
    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-btn-bold, #005E99);
    }

.tg-mob-cta--outline {
    background: transparent;
    border: 1.5px solid var(--dw-btn, #0077C0);
    color: var(--dw-btn, #0077C0);
}

/* ─────────────────────────────────────────────────────────────
   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 Button
   ========================================================= */

.tg-lang-btn {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    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;
    text-decoration: none;
    white-space: nowrap;
    transition: background .35s, color .35s;
}

    .tg-lang-btn:hover {
        background: rgba(0, 0, 0, .09);
        color: var(--dw-gray-900);
    }

    .tg-lang-btn:focus,
    .tg-lang-btn:active,
    .tg-lang-btn:focus-visible {
        background: rgba(0, 0, 0, .09);
        color: var(--dw-gray-900);
        border: none;
        outline: none;
        box-shadow: none;
    }


/* =========================================================
   Language Dropdown Wrapper
   ========================================================= */

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


/* =========================================================
   Dropdown Toggle
   ========================================================= */

.tg-language-toggle {
    gap: 7px;
}

    .tg-language-toggle svg {
        flex-shrink: 0;
        transition: transform .2s ease;
    }

.tg-language-dropdown.show .tg-language-toggle svg {
    transform: rotate(180deg);
}


/* =========================================================
   Dropdown Menu
   ========================================================= */

.tg-language-menu {
    min-width: 163px;
    margin-top: 10px !important;
    padding: 7px;
    border: 0 !important;
    border-radius: 16px;
    background: var(--dw-bg-gray);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    overflow: hidden;
}


    /* Remove list styling */

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


    /* =========================================================
   Dropdown Items
   ========================================================= */

    .tg-language-menu .dropdown-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        min-height: 40px;
        margin: 2px 0;
        padding: 9px 12px;
        border-radius: 10px;
        background: transparent;
        color: var(--dw-gray-900) !important;
        font-size: .875rem;
        font-weight: 400;
        line-height: 1.25;
        text-decoration: none !important;
        transition: background .2s ease, color .2s ease;
    }


        /* Hover */

        .tg-language-menu .dropdown-item:hover,
        .tg-language-menu .dropdown-item:focus {
            background: rgba(0, 0, 0, .06) !important;
            color: var(--dw-gray-900) !important;
            outline: none;
        }


        /* Selected language */

        .tg-language-menu .dropdown-item.active {
            background: rgba(0, 0, 0, .06) !important;
            color: var(--dw-gray-900) !important;
            font-weight: 500;
        }


/* Check icon */

.tg-language-check {
    flex-shrink: 0;
}
/* =========================================================
   LANGUAGE DROPDOWN VISIBILITY — Bootstrap toggles `.show`
   ========================================================= */
.tg-language-menu {
    display: none;
}

    .tg-language-menu.show {
        display: block;
    }

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

   Giving the two OUTER columns an equal flex basis is what puts the
   middle column on the header's true horizontal centre, however much
   wider the action buttons are than the logo. `flex: 1 1 1` was the
   bug: an unitless basis is not a valid <length>, so the browser threw
   the whole declaration away — the actions column never grew, the logo
   column absorbed every pixel of free space, and Home/About/FAQ/Courses
   were shoved to the right edge against the buttons. The `margin-*:
   auto` overrides that used to follow this block fought the same
   layout and are gone with it; the same goes for the blanket
   `.tg-nav-actions { display: flex !important }`, which beat the ≤768px
   `display: none` and left the whole desktop action row on phones.

   Direction is left to the `dir` attribute on <html>, so the bar
   mirrors in Arabic (logo right, actions left) as it did before.

   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 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 16px;
    /* Grid item of `.tg-header`: without `min-width: 0` the track grows to
       the bar's min-content width and the whole header spills past the
       viewport instead of the columns adapting. */
    min-width: 0;
}

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

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

/* The action row is `justify-content: flex-end`, so when its column is
   squeezed narrower than its content the overflow runs LEFT — straight
   across the centred links, which is exactly what "About Us" sitting
   under the search pill was. `min-width: max-content` keeps the column
   at least as wide as what it holds; if that leaves no room for a true
   centre the links drift left instead of being overlapped. */
.tg-navbar > .tg-nav-actions {
    flex: 1 1 0;
    justify-content: flex-end;
    min-width: max-content;
    gap: 8px;
}

/* A long display name must not be free to widen that column without
   limit — the chip ellipsises instead. */
.tg-navbar .tg-profile-toggle {
    max-width: 12.5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Laptop bands. Centring the links needs room for TWO action-row widths
   (the logo column mirrors the action column), so the labels come off in
   two steps as that stops being affordable: the search button's word
   below 1470px, the profile chip's name as well below 1340px. Both
   controls stay, as icons. */
@media (max-width: 1470px) {
    .tg-nav-links {
        gap: 18px;
    }

    .tg-navbar > .tg-nav-actions {
        gap: 6px;
    }

    .tg-search__btn span {
        display: none;
    }
}

@media (max-width: 1340px) {
    /* The name is a bare text node between the two icons, so `font-size: 0`
       is what hides it; the SVGs carry explicit width/height attributes and
       are unaffected. Specificity has to beat portal-profile-menu.css, which
       loads after this file. */
    .tg-navbar .tg-profile-toggle {
        font-size: 0;
        gap: 4px;
    }
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — collapse to the hamburger at ≤1100px, not ≤768px.

   Four links plus the six action controls plus the logo need roughly
   1000px. The old ≤768px breakpoint left a dead band (769–1100px) where
   the action row simply grew over the centred links — "About Us" sat
   underneath the search pill — because none of those controls shrink.
   The drawer already carries the links, login/profile, language and
   accessibility, so collapsing earlier loses nothing.
   ───────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .tg-nav-links {
        display: none;
    }

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

    .tg-navbar > .tg-header__logo {
        flex: 1 1 auto;
    }

    /* The middle column now holds only the hamburger, so centring it
       would park that button mid-header. */
    .tg-navbar > .tg-navbar__left {
        flex: 0 0 auto;
        justify-content: flex-start;
    }

    /* Search / language / accessibility / profile all repeat inside the
       drawer, so the action row keeps the notification bell alone — the
       bell is NOT in the drawer, its markup carries fixed element ids and
       cannot be rendered twice on a page. */
    .tg-navbar > .tg-nav-actions {
        display: flex;
        flex: 0 0 auto;
        gap: 4px;
    }

        .tg-navbar > .tg-nav-actions > *:not(.dw-notif) {
            display: none;
        }
}


.tg-language-dropdown {
    position: relative !important;
}

.tg-language-menu {
    position: absolute !important;
    top: 100% !important;
    margin-top: 0.5rem !important;
    z-index: 1050 !important; 
}

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

html[dir="ltr"] .tg-language-menu {
    right: 0 !important;
    left: auto !important;
}

/* =========================================================
   Language switcher flags + AI translation fallback notice
   (languages and flags come from Admin › Localization)
   ========================================================= */

/* Flags show in the desktop dropdown only; the drawer's native select can't render them. */
.dw-lang-flag {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-size: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.dw-lang-option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Up to ~40 admin languages: keep the menu inside the viewport. */
.tg-language-menu.show {
    max-height: min(60vh, 26rem);
    overflow-y: auto;
}

/* Drawer language picker: a native select, so it stays one control however many languages are configured. */
.tg-lang-select {
    -webkit-appearance: none;
    appearance: none;
    min-width: 10rem;
    max-width: 100%;
    padding-inline-end: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

    html[dir="rtl"] .tg-lang-select {
        background-position: left 12px center;
    }

.dw-ai-lang-warning {
    position: fixed;
    inset-inline: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    max-width: 40rem;
    margin-inline: auto;
    padding: .875rem 1rem;
    border-radius: 12px;
    border: 1px solid #f0c36d;
    background: #fff8e6;
    color: #5c4300;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
    font-size: .9375rem;
    line-height: 1.4;
}

.dw-ai-lang-warning__icon {
    flex-shrink: 0;
    margin-top: .1rem;
    color: #b7791f;
}

.dw-ai-lang-warning__text {
    flex: 1;
    margin: 0;
}

.dw-ai-lang-warning__close {
    flex-shrink: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.375rem;
    line-height: 1;
    cursor: pointer;
    padding: 0 .25rem;
}

/* Night mode: the DCT logo's dark wordmark ("Dubai College of Tourism") vanishes on the near-black header, so
   the logo sits on a small white plate and keeps its real colours. The admin theme logo swapped in on the
   Courses page (.dw-theme-logo) is drawn white instead — see DubaiWay/Courses.cshtml. Day mode is untouched. */
/* Only the colour logo (dct-logo-color.svg): the transparent variant used over hero images is already light. */
html[data-ax-theme="night"] img.tg-header__logo[src*="logo-color"]:not(.dw-theme-logo),
html[data-ax-theme="night"] .dw-footer__brand-logo img[src*="logo-color"] {
    background: #FFFFFF;
    border-radius: 6px;
    padding: 4px 6px;
}