/* ============================================================================
   Canin — desktop header search + the two-row header (owner, 1405/07/25).

   Desktop only (> 900px). Row 1: logo | search | city + login. Row 2: the menu.
   Scrolling down slides row 2 up under row 1 (Digikala-style); scrolling up
   brings it back. The script in templates/public/header.php only toggles
   .is-condensed; everything visual is here.

   How the slide works without moving the page: the header's height in the page
   never changes (so nothing below it jumps). Instead the whole sticky header
   moves up by --hs-shift, and row 1 moves down by the same amount, so row 1
   stays exactly where it was while the menu row leaves the screen with it.
   Both use the same duration and curve, so row 1 never visibly moves.

   The homepage keeps its one-row header instead — see the 'reveal' section at
   the end. The phone header is untouched: .desk-header-search is hidden there
   and every rule below is inside the desktop media query.
   ========================================================================== */

.desk-header-search,
.hs-drop { display: none; }

@media (min-width: 901px) {
    .site-header.has-desk-search {
        /* menu row height (42) + the gap above it (12) */
        --hs-shift: 54px;
        --hs-ease: cubic-bezier(.2, .7, .2, 1);
        --hs-time: .34s;
        transition: transform var(--hs-time) var(--hs-ease);
    }

    .has-desk-search .header-content {
        flex-wrap: wrap;
        row-gap: 0;
        padding: 14px 0 0;
    }

    .has-desk-search .header-content > .logo { order: 1; }
    .has-desk-search .header-content > .header-actions { order: 3; }

    .has-desk-search .desk-header-search {
        order: 2;
        flex: 1 1 auto;
        max-width: 600px;
        margin-inline: 28px auto;
        display: flex;
        align-items: center;
        position: relative;
    }

    .has-desk-search .desk-header-search input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 50px;
        border: 1px solid #dbe5f3;
        border-radius: 13px;
        background: #f4f7fc;
        color: var(--text, #0f172a);
        font: inherit;
        font-size: 13.5px;
        outline: none;
        transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }

    .has-desk-search .desk-header-search input::placeholder { color: #8a97ab; }

    .has-desk-search .desk-header-search input:focus {
        border-color: var(--primary, #1677ff);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
    }

    .has-desk-search .desk-header-search button {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--primary, #1677ff), var(--primary-strong, #0b5fd9));
        color: #fff;
        cursor: pointer;
    }

    .has-desk-search .header-content > .main-nav {
        order: 4;
        flex: 0 0 100%;
        box-sizing: border-box;
        height: 42px;
        margin-top: 12px;
        align-items: center;
        justify-content: flex-start;
        gap: 24px;
        border-top: 1px solid #edf1f7;
        transition: opacity .22s ease, visibility 0s;
    }

    /* row 1 rides down exactly as far as the header rides up */
    .has-desk-search .header-content > .logo,
    .has-desk-search .header-content > .desk-header-search,
    .has-desk-search .header-content > .header-actions {
        transition: transform var(--hs-time) var(--hs-ease);
    }

    .site-header.has-desk-search.is-condensed { transform: translateY(calc(-1 * var(--hs-shift))); }

    .has-desk-search.is-condensed .header-content > .logo,
    .has-desk-search.is-condensed .header-content > .desk-header-search,
    .has-desk-search.is-condensed .header-content > .header-actions {
        transform: translateY(var(--hs-shift));
    }

    .has-desk-search.is-condensed .header-content > .main-nav {
        opacity: 0;
        visibility: hidden;
        transition: opacity .16s ease, visibility 0s var(--hs-time);
    }

    /* someone tabbing through the menu with the keyboard must see it */
    .site-header.has-desk-search.is-condensed:has(.main-nav:focus-within) { transform: none; }
    .has-desk-search.is-condensed:has(.main-nav:focus-within) .header-content > * { transform: none; }
    .has-desk-search.is-condensed:has(.main-nav:focus-within) .header-content > .main-nav { opacity: 1; visibility: visible; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .site-header.has-desk-search,
    .has-desk-search .header-content > * { transition: none !important; }
}

/* ============================================================================
   Homepage ('reveal'). The one-row header stays as it is until the hero's own
   search box has scrolled away; then (.hs-on) the menu links leave one after
   another and the header box opens from its centre, its magnifier pops in and
   one sweep of light crosses it. Scrolling up (.hs-drop-open) slides the menu
   down from under the header as an overlay. The script in header.php places
   the box (--hs-r, --hs-w) and toggles the classes.
   ========================================================================== */

@media (min-width: 901px) {
    .site-header.hs-home { --hs-ease: cubic-bezier(.22, 1, .36, 1); }
    .hs-home .header-content { position: relative; }

    /* menu links leave one after another, rising and blurring away */
    .hs-home .header-content > .main-nav a {
        transition: opacity .28s ease, transform .4s var(--hs-ease), filter .3s ease;
    }
    .hs-home.hs-on .header-content > .main-nav { pointer-events: none; }
    .hs-home.hs-on .header-content > .main-nav a { opacity: 0; transform: translateY(-14px); filter: blur(4px); }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(2) { transition-delay: .03s; }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(3) { transition-delay: .06s; }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(4) { transition-delay: .09s; }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(5) { transition-delay: .12s; }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(6) { transition-delay: .15s; }
    .hs-home.hs-on .header-content > .main-nav a:nth-child(7) { transition-delay: .18s; }

    .hs-home .desk-header-search {
        position: absolute;
        top: 50%;
        right: var(--hs-r, 120px);
        width: var(--hs-w, 560px);
        display: flex;
        align-items: center;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-50%) scale(.96);
        transition: opacity .2s ease, transform .3s ease, visibility 0s .3s;
    }
    /* Opens from the centre outwards. A keyframe animation, not a transition,
       so that once it ends the box has no clip-path at all — the suggestion
       panel under it must not be clipped. */
    .hs-home.hs-on .desk-header-search {
        opacity: 1;
        visibility: visible;
        transform: translateY(-50%);
        transition: opacity .3s ease .14s, transform .62s var(--hs-ease) .14s, visibility 0s .14s;
        animation: hs-open .62s var(--hs-ease) .14s backwards;
    }
    @keyframes hs-open {
        from { clip-path: inset(0 46% 0 46% round 13px); }
        to   { clip-path: inset(0 0 0 0 round 13px); }
    }

    .hs-home .desk-header-search input {
        width: 100%;
        height: 44px;
        padding: 0 16px 0 50px;
        border: 1px solid #dbe5f3;
        border-radius: 13px;
        background: #f4f7fc;
        color: var(--text, #0f172a);
        font: inherit;
        font-size: 13.5px;
        outline: none;
        transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
    }
    .hs-home .desk-header-search input:focus {
        border-color: var(--primary, #1677ff);
        background: #fff;
        box-shadow: 0 0 0 3px rgba(22, 119, 255, .12);
    }
    .hs-home .desk-header-search input::placeholder {
        color: #8a97ab;
        transition: opacity .3s ease .5s, transform .5s var(--hs-ease) .5s;
    }
    .hs-home:not(.hs-on) .desk-header-search input::placeholder { opacity: 0; transform: translateX(-12px); }

    .hs-home .desk-header-search button {
        position: absolute;
        left: 5px;
        top: 5px;
        width: 34px;
        height: 34px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 10px;
        background: linear-gradient(135deg, var(--primary, #1677ff), var(--primary-strong, #0b5fd9));
        color: #fff;
        cursor: pointer;
        opacity: 0;
        transform: scale(.2) rotate(-120deg);
        transition: transform .2s ease, opacity .15s ease;
    }
    .hs-home.hs-on .desk-header-search button {
        opacity: 1;
        transform: none;
        transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .42s, opacity .2s ease .42s;
    }

    /* one sweep of light across the box */
    .hs-home .desk-header-search::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 13px;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .9) 48%, rgba(170, 210, 255, .55) 52%, transparent 70%) no-repeat;
        background-size: 220% 100%;
        background-position: 140% 0;
        opacity: 0;
    }
    .hs-home.hs-on .desk-header-search::after { animation: hs-sweep 1s cubic-bezier(.4, 0, .2, 1) .55s both; }
    @keyframes hs-sweep {
        0%   { opacity: 1; background-position: 140% 0; }
        85%  { opacity: 1; }
        100% { opacity: 0; background-position: -40% 0; }
    }

    /* scrolling up: the menu slides down from under the header */
    .hs-drop {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 52px;
        overflow: hidden;
        pointer-events: none;
    }
    .hs-drop-in {
        height: 46px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(14px);
        border-bottom: 1px solid #e6edf6;
        box-shadow: 0 10px 22px rgba(15, 40, 90, .07);
        visibility: hidden;
        transform: translateY(-100%);
        transition: transform .34s var(--hs-ease), visibility 0s .34s;
    }
    .hs-drop-in .main-nav { display: flex; height: 46px; align-items: center; justify-content: flex-start; gap: 24px; }
    .hs-drop-in .main-nav a { opacity: 0; transform: translateY(-6px); transition: opacity .2s ease, transform .3s var(--hs-ease); }
    .hs-home.hs-drop-open .hs-drop { pointer-events: auto; }
    .hs-home.hs-drop-open .hs-drop-in { visibility: visible; transform: none; transition: transform .34s var(--hs-ease), visibility 0s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a { opacity: 1; transform: none; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(2) { transition-delay: .03s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(3) { transition-delay: .06s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(4) { transition-delay: .09s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(5) { transition-delay: .12s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(6) { transition-delay: .15s; }
    .hs-home.hs-drop-open .hs-drop-in .main-nav a:nth-child(7) { transition-delay: .18s; }
}

@media (min-width: 901px) and (prefers-reduced-motion: reduce) {
    .hs-home .header-content > .main-nav a,
    .hs-home .desk-header-search,
    .hs-home .desk-header-search button,
    .hs-home .desk-header-search input::placeholder,
    .hs-drop-in,
    .hs-drop-in .main-nav a { transition: none !important; }
    .hs-home.hs-on .desk-header-search,
    .hs-home.hs-on .desk-header-search::after { animation: none !important; }
}