/* ============================================================
   TT MOBILE NAVIGATION (≤1024px)
   Header tools row (search · language · burger), slide-in drawer
   with accordion sub-menus, and the search overlay.
   Sizes/motion follow the reference drawer; colours use the
   Transtec tokens from global-design-system.css.
   ============================================================ */

:root {
    --tt-mnav-border: var(--tt-border-light, #E8EDF5);
    --tt-mnav-bg-light: var(--tt-surface-light, #F8F9FC);
    --tt-mnav-text: var(--tt-text-primary, #1A1D26);
    --tt-mnav-text-2: var(--tt-text-secondary, #5A6478);
    --tt-mnav-accent: var(--tt-blue, #1E5DAB);
    --tt-mnav-accent-hover: var(--tt-blue-hover, #164A8A);
    --tt-mnav-accent-soft: rgba(30, 93, 171, 0.12);
    --tt-mnav-ease-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --tt-mnav-ease-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --tt-mnav-ease-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- header tools (row 1, mobile only) ---------- */
.tt-header-tools {
    display: none;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.tt-header-search,
.tt-header-lang {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-width: 36px;
    height: 36px;
    color: var(--tt-mnav-text-2);
    border: 1px solid var(--tt-mnav-border);
    border-radius: 4px;
    text-decoration: none;
    transition: color var(--tt-mnav-ease-fast), border-color var(--tt-mnav-ease-fast);
}
.tt-header-search { width: 36px; padding: 0; }
.tt-header-search svg { width: 16px; height: 16px; }
.tt-header-search:hover,
.tt-header-search:focus-visible,
.tt-header-lang:hover,
.tt-header-lang:focus-visible { color: var(--tt-navy, #0A1628); border-color: var(--tt-mnav-accent); }

.tt-header-lang {
    gap: 6px;
    padding: 0 9px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}
.tt-header-lang svg { width: 14px; height: 14px; opacity: 0.6; }
.tt-header-lang:hover svg { opacity: 1; }

/* burger: three 24px lines, 5px apart, 32px hit box */
.tt-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 32px;
    height: 32px;
    padding: 4px;
    margin: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.tt-menu-toggle__line {
    display: block;
    width: 100%;
    height: 2px;
    background-color: var(--tt-navy, #0A1628);
    border-radius: 2px;
    transform-origin: center;
    transition: transform var(--tt-mnav-ease-base), opacity var(--tt-mnav-ease-base);
}
.tt-menu-toggle.is-active .tt-menu-toggle__line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.tt-menu-toggle.is-active .tt-menu-toggle__line:nth-child(2) { opacity: 0; }
.tt-menu-toggle.is-active .tt-menu-toggle__line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
    .tt-header-tools { display: flex; }
    .tt-menu-toggle { display: flex; }
    .tt-header-top-inner { min-height: 64px; gap: 1rem; }
}
@media (max-width: 480px) {
    .tt-header-lang span { display: none; }
    .tt-header-lang svg { width: 16px; height: 16px; opacity: 1; }
    .tt-header .tt-logo .tt-logo-img,
    .tt-header .tt-logo img { height: 34px !important; max-height: 34px !important; }
}

/* ---------- backdrop ---------- */
.tt-mnav__backdrop {
    position: fixed;
    inset: 0;
    z-index: 490;
    background-color: rgba(10, 22, 40, 0.55);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity var(--tt-mnav-ease-base);
}
.tt-mnav__backdrop[hidden] { display: none; }
.tt-mnav__backdrop.is-open { opacity: 1; }

/* ---------- drawer ---------- */
.tt-mnav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: auto;
    right: 0;
    z-index: 500;
    width: min(92vw, 400px);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    background-color: #fff;
    color: var(--tt-mnav-text);
    box-shadow: -12px 0 32px rgba(10, 22, 40, 0.18);
    overflow: hidden;
    overscroll-behavior: contain;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform var(--tt-mnav-ease-slow), visibility 0s var(--tt-mnav-ease-slow);
}
.tt-mnav.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform var(--tt-mnav-ease-slow), visibility 0s;
}
[dir="rtl"] .tt-mnav {
    right: auto;
    left: 0;
    box-shadow: 12px 0 32px rgba(10, 22, 40, 0.18);
    transform: translateX(-100%);
}
[dir="rtl"] .tt-mnav.is-open { transform: translateX(0); }

html[lang^="en"] .tt-mnav { font-family: var(--tt-font-en, 'Inter', sans-serif); }
[dir="rtl"] .tt-mnav { font-family: var(--tt-font-ar, 'IBM Plex Sans Arabic', sans-serif); }

/* keep clear of the WP admin bar when logged in */
.admin-bar .tt-mnav,
.admin-bar .tt-mnav__backdrop { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .tt-mnav,
    .admin-bar .tt-mnav__backdrop { top: 46px; }
}

/* head */
.tt-mnav__head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--tt-mnav-border);
}
.tt-mnav__logo { display: flex; align-items: center; min-width: 0; }
.tt-mnav__logo img {
    display: block;
    width: auto !important;
    height: 38px !important;
    max-height: 38px !important;
    max-width: 180px;
}
.tt-mnav__close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-end: -0.5rem;
    padding: 0;
    background: var(--tt-mnav-bg-light);
    border: 1px solid var(--tt-mnav-border);
    border-radius: 9999px;
    color: var(--tt-mnav-text);
    cursor: pointer;
    transition: background-color var(--tt-mnav-ease-fast), color var(--tt-mnav-ease-fast), transform var(--tt-mnav-ease-fast);
}
.tt-mnav__close svg { width: 20px; height: 20px; }
.tt-mnav__close:hover,
.tt-mnav__close:focus-visible {
    background-color: var(--tt-mnav-accent);
    border-color: var(--tt-mnav-accent);
    color: #fff;
}
.tt-mnav__close:active { transform: scale(0.94); }

/* body + list */
.tt-mnav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 0.5rem 1.5rem 1rem;
}
.tt-mnav__list,
.tt-mnav__sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tt-mnav__list { display: flex; flex-direction: column; gap: 0; }
.tt-mnav__item { border-bottom: 1px solid var(--tt-mnav-border); }
.tt-mnav__item:last-child { border-bottom: 0; }
.tt-mnav__row { display: flex; align-items: stretch; gap: 0.25rem; }

.tt-mnav__link {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    min-height: 48px;
    padding: 0.5rem 0;
    font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    font-weight: 600;
    line-height: 1.3;
    color: var(--tt-mnav-text);
    text-decoration: none;
    border: 0;
    background: none;
    text-align: start;
    transition: color var(--tt-mnav-ease-fast);
}
.tt-mnav__link:hover,
.tt-mnav__link:focus-visible,
.tt-mnav__link--active { color: var(--tt-mnav-accent); }
.tt-mnav__label { min-width: 0; }

.tt-mnav__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 4px;
    background-color: rgba(10, 22, 40, 0.06);
    color: var(--tt-mnav-accent);
    transition: background-color var(--tt-mnav-ease-fast);
}
.tt-mnav__icon svg { width: 16px; height: 16px; }
.tt-mnav__link--active .tt-mnav__icon { background-color: var(--tt-mnav-accent-soft); }

/* expander (chevron) */
.tt-mnav__expander {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0.5rem;
    color: var(--tt-mnav-text-2);
    cursor: pointer;
    transition: color var(--tt-mnav-ease-fast), background-color var(--tt-mnav-ease-fast);
}
.tt-mnav__expander:hover,
.tt-mnav__expander:focus-visible {
    background-color: var(--tt-mnav-bg-light);
    color: var(--tt-mnav-accent);
}
.tt-mnav__chevron {
    width: 20px;
    height: 20px;
    transition: transform var(--tt-mnav-ease-base);
}
.tt-mnav__item.is-expanded > .tt-mnav__row .tt-mnav__chevron { transform: rotate(180deg); }

/* collapsible panel (grid-rows trick, no height animation JS) */
.tt-mnav__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--tt-mnav-ease-base);
}
.tt-mnav__panel[hidden] { display: none; }
.tt-mnav__item.is-expanded > .tt-mnav__panel { grid-template-rows: 1fr; }
.tt-mnav__sublist { overflow: hidden; min-height: 0; }
.tt-mnav__item.is-expanded > .tt-mnav__panel > .tt-mnav__sublist { padding-block: 0.25rem 0.5rem; }

.tt-mnav__subitem {
    padding-inline-start: 0;
    border-inline-start: 2px solid var(--tt-mnav-border);
    margin-inline-start: 15px;
}
.tt-mnav__link--sub {
    min-height: 42px;
    padding-inline-start: 1rem;
    font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.05rem);
    font-weight: 500;
    color: var(--tt-mnav-text-2);
}
.tt-mnav__subitem:last-child .tt-mnav__link--sub { padding-bottom: 0.5rem; }
.tt-mnav__link--sub.tt-mnav__link--active { color: var(--tt-mnav-accent); font-weight: 600; }
.tt-mnav__sublist--nested { margin-inline-start: 1rem; }

/* foot: CTA + prefs */
.tt-mnav__foot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--tt-mnav-border);
    background-color: var(--tt-mnav-bg-light);
}
.tt-mnav__cta { display: flex; flex-direction: column; gap: 0.5rem; }
.tt-mnav__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
    padding: 1em 2.5em;
    font-size: clamp(0.95rem, 0.9rem + 0.35vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.3;
    text-transform: uppercase;
    text-decoration: none;
    color: #fff;
    background-color: var(--tt-mnav-accent);
    border: 2px solid var(--tt-mnav-accent);
    border-radius: 4px;
    transition: background-color var(--tt-mnav-ease-base), border-color var(--tt-mnav-ease-base), transform var(--tt-mnav-ease-base), box-shadow var(--tt-mnav-ease-base);
}
.tt-mnav__btn:hover,
.tt-mnav__btn:focus-visible {
    color: #fff;
    background-color: var(--tt-mnav-accent-hover);
    border-color: var(--tt-mnav-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(30, 93, 171, 0.35);
}
[dir="rtl"] .tt-mnav__btn { text-transform: none; letter-spacing: 0; }

.tt-mnav__prefs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.tt-mnav__search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.45em 0.7em;
    font-size: clamp(0.86rem, 0.81rem + 0.3vw, 0.96rem);
    font-weight: 600;
    color: var(--tt-mnav-text-2);
    text-decoration: none;
    border: 1px solid var(--tt-mnav-border);
    border-radius: 4px;
    transition: color var(--tt-mnav-ease-fast), border-color var(--tt-mnav-ease-fast);
}
.tt-mnav__search svg { width: 15px; height: 15px; }
.tt-mnav__search:hover,
.tt-mnav__search:focus-visible { color: var(--tt-mnav-accent); border-color: var(--tt-mnav-accent); }

.tt-mnav__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: clamp(0.86rem, 0.81rem + 0.3vw, 0.96rem);
    font-weight: 600;
    color: var(--tt-mnav-text-2);
    text-decoration: none;
    border: 1px solid var(--tt-mnav-border);
    border-radius: 9999px;
    transition: color var(--tt-mnav-ease-fast), border-color var(--tt-mnav-ease-fast);
}
.tt-mnav__lang svg { width: 16px; height: 16px; }
.tt-mnav__lang:hover,
.tt-mnav__lang:focus-visible { color: var(--tt-mnav-accent); border-color: var(--tt-mnav-accent); }

/* page scroll lock while open (JS also pins the body) */
body.tt-nav-open { overflow: hidden; touch-action: none; }

@media (max-width: 540px) {
    .tt-mnav { width: 100%; box-shadow: none; }
}
@media (min-width: 1025px) {
    .tt-mnav,
    .tt-mnav__backdrop { display: none !important; }
}

/* ---------- search overlay ---------- */
.tt-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 600;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.tt-search-overlay[hidden] { display: none; }
.tt-search-overlay__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(6, 14, 26, 0.62);
    opacity: 0;
    transition: opacity var(--tt-mnav-ease-base);
}
.tt-search-overlay__panel {
    position: relative;
    box-sizing: border-box;
    width: min(720px, calc(100% - 2rem));
    margin-top: min(18vh, 140px);
    padding: 1.5rem;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: var(--tt-shadow-xl, 0 16px 48px rgba(10, 22, 40, 0.12));
    transform: translateY(-12px);
    opacity: 0;
    transition: transform var(--tt-mnav-ease-base), opacity var(--tt-mnav-ease-base);
}
.tt-search-overlay.is-open .tt-search-overlay__backdrop { opacity: 1; }
.tt-search-overlay.is-open .tt-search-overlay__panel { transform: translateY(0); opacity: 1; }
.tt-search-overlay__form { display: flex; align-items: center; gap: 0.5rem; }
.tt-search-overlay__icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--tt-text-muted, #8892A4); }
.tt-search-overlay__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5em 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 1.05rem;
    color: var(--tt-mnav-text);
}
.tt-search-overlay__input:focus { outline: none; }
.tt-search-overlay__input::-webkit-search-decoration,
.tt-search-overlay__input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.tt-search-overlay__submit {
    flex-shrink: 0;
    padding: 0.6em 1.1em;
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
    background: var(--tt-mnav-accent);
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background var(--tt-mnav-ease-fast);
}
.tt-search-overlay__submit:hover { background: var(--tt-mnav-accent-hover); }
.tt-search-overlay__close {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    color: var(--tt-text-muted, #8892A4);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: color var(--tt-mnav-ease-fast), background var(--tt-mnav-ease-fast);
}
.tt-search-overlay__close:hover { color: var(--tt-mnav-text); background: var(--tt-surface-medium, #E8EDF5); }
.tt-search-overlay__close svg { width: 18px; height: 18px; }
.tt-search-overlay__hint {
    margin: 0.5rem 0 0;
    padding-top: 0.5rem;
    border-top: 1px solid var(--tt-mnav-border);
    font-size: 0.8rem;
    color: var(--tt-text-muted, #8892A4);
}
@media (max-width: 640px) {
    .tt-search-overlay__panel { margin-top: 0; width: 100%; border-radius: 0; min-height: 100%; }
    .tt-search-overlay__submit { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .tt-mnav,
    .tt-mnav__backdrop,
    .tt-mnav__panel,
    .tt-mnav__chevron,
    .tt-menu-toggle__line,
    .tt-search-overlay__backdrop,
    .tt-search-overlay__panel { transition: none; }
}