/* Site top bar (inc/topbar.php), every page, desktop only (≥1025px). Homepage: visible only at
   scrollY = 0 (html.sanam-tb-hidden hides it). Other pages: always fixed at the top. Below 1025px it is not shown and nothing moves. */
.sanam-topbar { display: none; }
@media print { .sanam-topbar { display: none !important; } }

@media (min-width: 1025px) {
    body.sanam-tb-on {
        --sanam-tb-h: 64px;
        --sanam-tb-admin: 0px;
        --sanam-tb-ease: cubic-bezier(.22, 1, .36, 1);
    }

    /* Room for the bar inside the hero itself (a transparent top border the hero's own gradient
       paints under), so no empty page strip shows above the hero once the bar has gone. */
    html body.sanam-tb-on .elementor-18 .elementor-element.elementor-element-79712149 {
        border-top: var(--sanam-tb-h) solid transparent !important;
        background-origin: border-box !important;
    }

    body.sanam-tb-on.admin-bar { --sanam-tb-admin: 32px; }

    /* Other pages: the bar replaces the maroon theme header and stays fixed at the top (it hides on
       scroll only on the homepage). The page starts below it; in-page links stop below it too. */
    body.sanam-tb-on .site-header { display: none; }
    body.sanam-tb-on:not(.home) { padding-top: var(--sanam-tb-h); }
    html:has(body.sanam-tb-on:not(.home)) { scroll-padding-top: 80px; }

    /* Other pages: solid brand maroon (no glass), whichever style is chosen for the homepage. */
    body.sanam-tb-on:not(.home) .sanam-topbar {
        background: #662627;
        color: #fff;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        border-bottom: 1px solid rgb(228 170 88 / .25);
    }
    body.sanam-tb-on:not(.home) .sanam-topbar a { opacity: .88; }
    body.sanam-tb-on:not(.home) .sanam-topbar a:hover,
    body.sanam-tb-on:not(.home) .sanam-topbar a:focus-visible { opacity: 1; color: #e4aa58; }

    .sanam-topbar {
        position: fixed;
        inset-inline: 0;
        top: var(--sanam-tb-admin);
        z-index: 998; /* under the Elementor header (1000) */
        display: flex;
        align-items: center;
        height: var(--sanam-tb-h);
        /* Apple-style global nav: frosted translucent glass, small even-spaced links. */
        background: rgb(250 250 252 / .8);
        color: #291f1e;
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        font: 600 14px/1 var(--sanam-font-ui);
        /* Enter: slides down and fades in, then the links follow one after another. */
        transition: transform .6s var(--sanam-tb-ease), opacity .45s ease, visibility 0s linear 0s;
    }

    body.sanam-tb--gold .sanam-topbar {
        background: rgb(228 170 88 / .86);
        color: #521e1f;
    }

    body.sanam-tb--dark .sanam-topbar {
        background: rgb(41 31 30 / .72);
        color: #f2e7d9;
    }

    body.sanam-tb--dark .sanam-topbar a:hover { color: #e4aa58; }

    /* sanam-tb-pre: the first frame after load, so the bar also slides in when the page opens. */
    html.sanam-tb-pre .sanam-topbar {
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: none;
    }

    /* Exit: the whole bar, links included, rises up out of the screen. */
    html.sanam-tb-hidden .sanam-topbar {
        transform: translateY(calc(-100% - 12px));
        visibility: hidden;
        transition: transform .5s cubic-bezier(.6, 0, .4, 1), visibility 0s linear .5s;
    }

    .sanam-topbar__list li {
        transition: opacity .45s ease calc(.15s + var(--i, 0) * .05s), transform .6s var(--sanam-tb-ease) calc(.15s + var(--i, 0) * .05s);
    }

    html.sanam-tb-pre .sanam-topbar__list li {
        opacity: 0;
        transform: translateY(-8px);
        transition: none;
    }

    /* Links leave with the bar (no delay); they fade in again one by one when it comes back. */
    html.sanam-tb-hidden .sanam-topbar__list li {
        opacity: 0;
        transition: opacity .2s ease .3s;
    }


    .sanam-topbar__list {
        display: flex;
        align-items: center;
        justify-content: space-between; /* spread across a centred column, like apple.com */
        gap: 8px;
        width: 100%;
        max-width: 1024px;
        height: 100%;
        margin: 0 auto;
        padding: 0 22px;
        list-style: none;
        white-space: nowrap;
    }

    .sanam-topbar__list li { flex: none; }

    .sanam-topbar a {
        display: inline-flex;
        align-items: center;
        height: 100%;
        color: inherit;
        padding: 0 8px;
        text-decoration: none;
        opacity: .8;
        transition: opacity .2s ease, color .2s ease;
    }

    .sanam-topbar a:hover,
    .sanam-topbar a:focus-visible { opacity: 1; }

    .sanam-topbar__brand a { gap: 6px; padding-inline-start: 0; opacity: 1; }
    .sanam-topbar__mark { display: block; width: 27px; height: 27px; object-fit: contain; flex: none; transform: translateY(1.5px); } /* .79 × the wordmark, as in the logo */

    /* Animated logo: the mark alone, then the wordmark slides out of it into the full logo, holds, and
       folds back in, continuously. Its room is reserved so the links never move. */
    .sanam-topbar__word {
        position: relative;
        display: block;
        flex: none;
        width: 54px;
        height: 34px;
        animation: sanam-tb-logo 9s cubic-bezier(.65, 0, .35, 1) infinite;
        will-change: clip-path, transform, opacity;
    }
    .sanam-topbar__word img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
    /* White letters on maroon (other pages, the dark style); maroon letters on light or gold glass. */
    .sanam-topbar__word .is-on-light { display: none; }
    body.home.sanam-tb--light .sanam-topbar__word .is-on-dark,
    body.home.sanam-tb--gold .sanam-topbar__word .is-on-dark { display: none; }
    body.home.sanam-tb--light .sanam-topbar__word .is-on-light,
    body.home.sanam-tb--gold .sanam-topbar__word .is-on-light { display: block; }

    /* RTL (Arabic): the wordmark sits left of the mark and grows leftwards from it. */
    @keyframes sanam-tb-logo {
        0%, 22% { clip-path: inset(0 0 0 100%); transform: translateX(12px); opacity: 0; }
        34%, 78% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
        90%, 100% { clip-path: inset(0 0 0 100%); transform: translateX(12px); opacity: 0; }
    }
    /* LTR (English): to the right of the mark, growing rightwards. */
    html:not([dir="rtl"]) .sanam-topbar__word { animation-name: sanam-tb-logo-ltr; }
    @keyframes sanam-tb-logo-ltr {
        0%, 22% { clip-path: inset(0 100% 0 0); transform: translateX(-12px); opacity: 0; }
        34%, 78% { clip-path: inset(0 0 0 0); transform: none; opacity: 1; }
        90%, 100% { clip-path: inset(0 100% 0 0); transform: translateX(-12px); opacity: 0; }
    }

    /* Profile + language: one tight group at the end of the bar. */
    .sanam-topbar__tools { display: flex; align-items: center; gap: 2px; height: 100%; }
    .sanam-topbar__tools > span { display: flex; height: 100%; }
    .sanam-topbar__lang a { gap: 6px; padding-inline-end: 0; font-size: 13px; }

    /* Profile: an icon only, next to the language link (sign-in for visitors, profile when signed in). */
    .sanam-topbar__account a { padding-inline: 6px; }
    .sanam-topbar__account svg { width: 19px; height: 19px; }
    .sanam-topbar__account a.is-signed-in { position: relative; }
    .sanam-topbar__account a.is-signed-in::after { /* small gold dot: signed in */
        content: "";
        position: absolute;
        top: calc(50% - 11px);
        inset-inline-end: 6px;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #e4aa58;
    }
    .sanam-topbar__lang svg { width: 17px; height: 17px; }

    .sanam-topbar a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

    /* Homepage fixed Elementor header: below the bar while it shows, back to the top once it hides. */
    html body.sanam-tb-on .elementor-location-header .cedkw-sidebar {
        top: calc(var(--sanam-tb-admin) + var(--sanam-tb-h)) !important;
        transition: top .55s var(--sanam-tb-ease);
    }

    html.sanam-tb-pre body.sanam-tb-on .elementor-location-header .cedkw-sidebar {
        top: var(--sanam-tb-admin) !important;
        transition: none;
    }

    html.sanam-tb-hidden body.sanam-tb-on .elementor-location-header .cedkw-sidebar {
        top: var(--sanam-tb-admin) !important;
        transition: top .5s cubic-bezier(.6, 0, .4, 1);
    }
}

@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    .sanam-topbar,
    .sanam-topbar__list li,
    html .sanam-topbar,
    html .sanam-topbar__list li,
    html body.sanam-tb-on .elementor-location-header .cedkw-sidebar { transition: none !important; animation: none !important; }
    .sanam-topbar__word { animation: none !important; } /* full logo, still */
}

/* «نظام سنام» (team only): a gold button at the end of the bar. */
@media (min-width: 1025px) {
    .sanam-topbar .sanam-topbar__app { align-items: center; margin-inline-end: 8px; }
    .sanam-topbar .sanam-topbar__app a {
        height: 34px;
        padding: 0 16px;
        border-radius: 99px;
        background: #e4aa58;
        color: #291f1e !important;
        opacity: 1 !important;
        font-size: 13px;
        font-weight: 700;
        transition: background .2s ease, transform .2s ease;
    }
    .sanam-topbar .sanam-topbar__app a:hover,
    .sanam-topbar .sanam-topbar__app a:focus-visible { background: #f0bd70; transform: translateY(-1px); }
    body.sanam-tb--gold .sanam-topbar .sanam-topbar__app a { background: #662627; color: #fff !important; }
    body.sanam-tb--gold .sanam-topbar .sanam-topbar__app a:hover { background: #521e1f; }
}