/* ============================================================================
   1CLIK — theme3 header & footer polish
   Loaded after theme3.css. Scoped to the theme3 header/footer only: no other
   part of the site is affected, the palette and branding stay untouched.
   Goals: one clean row in the header (logo · nav · controls), a footer that
   reads as columns with real headings, and predictable stacking on mobile,
   in both light/dark and RTL/LTR.
   ========================================================================= */

/* ---------------------------------------------------------------- header */
html[data-theme="theme3"] body.t3 .t2-header .t2-bar {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 1.6vw, 1.75rem);
    padding-block: 0.55rem;
    min-width: 0;
}

/* The logo must never shrink or sit under the nav. */
html[data-theme="theme3"] body.t3 .t2-header .t2-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-logo img {
    height: clamp(26px, 2.4vw, 34px);
    width: auto;
    max-width: 100%;
}

/* Navigation: one optical line, evenly spaced, scrollable instead of overlapping.
   No `display` here: theme2.css already owns the responsive switch (nav → burger at
   ≤ 920px / ≤ 760px). Re-declaring `display: flex` from this higher-specificity rule
   silently defeated those media queries, which is why the nav kept rendering next to
   the language selector on phones and the header overlapped. */
html[data-theme="theme3"] body.t3 .t2-header .t2-nav {
    align-items: center;
    gap: clamp(0.15rem, 1vw, 1.1rem);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-nav::-webkit-scrollbar {
    display: none;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
    padding-inline: 0.55rem;
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Controls: one aligned cluster, with a soft divider before the primary CTA. */
html[data-theme="theme3"] body.t3 .t2-header .t2-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    flex: 0 0 auto;
    min-width: 0;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-actions > * {
    flex: 0 0 auto;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-actions .t2-btn-primary {
    margin-inline-start: 0.35rem;
}

html[data-theme="theme3"] body.t3 .t2-header .t2-actions::before {
    content: "";
    order: -1;
    inline-size: 1px;
    block-size: 22px;
    margin-inline-end: 0.15rem;
    background: color-mix(in srgb, currentColor 18%, transparent);
    opacity: 0.55;
}

/* Focus visibility on every header control (keyboard + screen readers). */
html[data-theme="theme3"] body.t3 .t2-header a:focus-visible,
html[data-theme="theme3"] body.t3 .t2-header button:focus-visible {
    outline: 2px solid var(--t3-accent, var(--primary, #1f8f86));
    outline-offset: 2px;
    border-radius: 10px;
}

/* Mid widths: drop the secondary CTA first so nothing crowds the bar. */
@media (max-width: 1199.98px) {
    html[data-theme="theme3"] body.t3 .t2-header .t2-actions .t2-btn-primary {
        display: none;
    }
}

@media (max-width: 991.98px) {
    html[data-theme="theme3"] body.t3 .t2-header .t2-bar {
        gap: 0.5rem;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-actions::before {
        display: none;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-nav {
        overflow-x: visible;
    }
}

@media (max-width: 575.98px) {
    html[data-theme="theme3"] body.t3 .t2-header .t2-actions {
        gap: 0.25rem;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-logo img {
        height: 26px;
    }
}

/* ---------------------------------------------------------------- mobile header
   Phones (≤ 760px) get one clean row — brand · language · menu — and every other
   control (appearance, account, "Open tools", the platforms drawer) moves into the
   opened menu instead of being squeezed into the bar. The markup wrappers are
   `.t2-actions-extra` and `.t2-burger-wrap`; on wider screens they are
   `display: contents`, so the desktop header is byte-for-byte the same layout.
   ----------------------------------------------------------------------------- */
html[data-theme="theme3"] body.t3 .t2-header .t2-actions-extra,
html[data-theme="theme3"] body.t3 .t2-header .t2-burger-wrap {
    display: contents;
}

@media (min-width: 761px) {
    /* Keep the desktop rhythm: the wrapped controls never shrink on their own. */
    html[data-theme="theme3"] body.t3 .t2-header .t2-actions-extra > * {
        flex: 0 0 auto;
    }
}

/* ≤ 920px the burger owns the primary navigation. The opened column is declared with
   enough specificity to win over the single-row polish rules above (alignment and item
   width are the two properties that used to leak from the desktop layout). */
@media (max-width: 920px) {
    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-nav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex: 1 0 100%;
        width: 100%;
        margin: 0;
        gap: 0.1rem;
        overflow-x: visible;
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-nav a {
        width: 100%;
        justify-content: flex-start;
        padding-inline: 0.35rem;
    }

    /* The floating accent bar of the desktop nav reads as a stray line in a column. */
    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-nav a.is-on::after {
        display: none;
    }
}

@media (max-width: 760px) {
    /* Closed bar: the brand, the language selector and the menu button only. */
    html[data-theme="theme3"] body.t3 .t2-header .t2-bar {
        flex-wrap: nowrap;
        min-width: 0;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-actions {
        gap: 0.3rem;
        min-width: 0;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-actions-extra {
        display: none;
    }

    /* The language button may use the room the removed controls leave behind. */
    html[data-theme="theme3"] body.t3 .t2-header .t2-lang {
        max-width: 9.5rem;
        min-width: 0;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-actions .lang-pop-name {
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }

    html[data-theme="theme3"] body.t3 .t2-header .t2-burger {
        flex: 0 0 auto;
    }

    /* Opened menu: links first, then the secondary controls, each on its own row. */
    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-bar {
        flex-wrap: wrap;
        align-items: center;
        row-gap: 0.35rem;
        padding-block: 0.6rem 0.75rem;
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-logo {
        order: 1;
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-burger {
        order: 2;
        margin-inline-start: auto;
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-actions {
        order: 4;
        flex: 1 0 100%;
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 0.4rem;
        margin-inline-start: 0;
        padding-top: 0.45rem;
        border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-nav {
        order: 3;
    }

    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-actions-extra {
        display: flex;
        flex: 1 0 100%;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.4rem;
    }

    /* The CTA is hidden up to 1199.98px for the bar; inside the menu it belongs. */
    html[data-theme="theme3"] body.t3 .t2-header.is-open .t2-actions-extra .t2-btn-primary {
        display: inline-flex;
        flex: 1 1 11rem;
        justify-content: center;
        min-height: 44px;
    }

    /* A drawn edge while the panel is open, in both colour schemes. */
    html[data-theme="theme3"] body.t3 .t2-header.is-open {
        border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
        box-shadow: 0 16px 32px rgba(0, 0, 0, 0.14);
    }
}

/* From 361px the language button can show its name again; the flag alone is kept
   for the smallest phones by the existing ≤ 380px rule. */
@media (min-width: 361px) and (max-width: 760px) {
    html[data-theme="theme3"] body.t3 .t2-actions .lang-pop-btn .lang-pop-name > span {
        display: inline;
    }
}

/* Phone: anchor the language panel to the header row instead of the button, so its
   inline end lines up with the bar and all 14 languages stay inside the viewport
   instead of being clipped by the screen edge (LTR and RTL alike). */
@media (max-width: 760px) {
    html[data-theme="theme3"] body.t3 .t2-header .t2-bar {
        position: relative;
    }

    html[data-theme="theme3"] body.t3 .t2-header .lang-pop {
        position: static;
    }
}

/* ---------------------------------------------------------------- footer */
html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) repeat(4, minmax(0, 1fr));
    align-items: start;
    gap: clamp(1.25rem, 2.2vw, 2.25rem);
    padding-block: clamp(1.75rem, 3vw, 2.75rem);
}

/* Brand block: stacked in the first column instead of spanning the whole row. */
html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-brand p {
    max-width: 34ch;
    margin: 0;
    line-height: 1.6;
    font-size: 0.9rem;
    overflow-wrap: anywhere;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-brand a {
    overflow-wrap: anywhere;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col {
    min-width: 0;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col h2 {
    margin: 0 0 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
}

/* Arabic does not use uppercase/letter-spacing: keep the heading legible. */
html[data-theme="theme3"][dir="rtl"] body.t3 .t2-footer .t2-foot-col h2 {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.9rem;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a {
    display: inline-block;
    line-height: 1.45;
    font-size: 0.92rem;
    overflow-wrap: anywhere;
    text-decoration: none;
    transition: color 0.15s ease, transform 0.15s ease;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a:hover {
    transform: translateX(2px);
}

html[data-theme="theme3"][dir="rtl"] body.t3 .t2-footer .t2-foot-col a:hover {
    transform: translateX(-2px);
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a:focus-visible {
    outline: 2px solid var(--t3-accent, var(--primary, #1f8f86));
    outline-offset: 2px;
    border-radius: 6px;
}

html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block: 1rem;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 0.85rem;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1.25rem;
    }

    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575.98px) {
    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.35rem;
    }

    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col ul {
        gap: 0.15rem;
    }

    /* Comfortable touch targets in the stacked layout only. */
    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a {
        display: flex;
        align-items: center;
        min-height: 40px;
    }

    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-bottom {
        justify-content: flex-start;
    }
}

/* Respect a user's reduced-motion preference for the subtle hover shift. */
@media (prefers-reduced-motion: reduce) {
    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a,
    html[data-theme="theme3"] body.t3 .t2-footer .t2-foot-col a:hover {
        transition: none;
        transform: none;
    }
}