/* ==========================================================================
   Alija Side Panels
   Strips (always visible) + Panels (slide-in overlays)

   Full-width: strips pin to the true viewport edges (left:0 / right:0).
   ========================================================================== */

:root {
    --alija-sp-bg:        #C9C2BC;
    --alija-sp-text:      #000000;
    --alija-sp-btn-bg:    #FFFFFF;
    --alija-sp-btn-text:  #554843;

    --alija-sp-strip-pad:      9px;    /* transparent frame on each side */
    --alija-sp-strip-w:        71px;   /* total strip width. Visible beige band = strip-w − 2×pad = 53px. To widen, raise this (e.g. 82px -> 64px band). */
    --alija-sp-strip-h:        43px;   /* mobile/tablet bar height */

    --alija-sp-panel-w:        513px;

    --alija-sp-z-backdrop: 99996;
    --alija-sp-z-panel:    99998;
    --alija-sp-z-strip:    99999;

    --alija-sp-ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
    --alija-sp-dur-slide:      0.4s;
    --alija-sp-dur-fade:       0.3s;
    --alija-sp-dur-hover:      0.2s;
    --alija-sp-content-delay:  0.35s;

    --alija-sp-font: 'Aeonik Pro', Sans-serif;
}

/* Scope everything under .alija-sp so we never touch the theme. */
.alija-sp {
    font-family: var(--alija-sp-font);
    color: var(--alija-sp-text);
}
.alija-sp,
.alija-sp *,
.alija-sp *::before,
.alija-sp *::after {
    box-sizing: border-box;
}
/* Reset for our buttons. Keep font-family inheriting from .alija-sp
   (do NOT use `font: inherit` — it would clobber the Aeonik family). */
.alija-sp button {
    background: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
}
/* No focus outlines / borders anywhere in our UI. */
.alija-sp :focus,
.alija-sp :focus-visible,
.alija-sp__panel:focus,
.alija-sp__panel:focus-visible {
    outline: none;
    box-shadow: none;
}
.alija-sp ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.alija-sp a {
    color: inherit;
    text-decoration: none;
}
.alija-sp img {
    max-width: none;   /* themes often force img{max-width:100%} */
    /* NB: no `display` here — it would out-specify .alija-sp__icon--minus
       and un-hide the minus icon. Display is set per-icon below. */
}

/* ==========================================================================
   STRIPS  (desktop: vertical, pinned to the edges of the 1440px box)
   The <button> spans the full 71px incl. the 9px transparent frame.
   The .inner is an absolutely-positioned beige band inset by 9px, so the
   frame is just the gap. On hover it expands to inset:0 (53px -> 71px).
   ========================================================================== */
.alija-sp__strip {
    position: fixed;
    top: 0;
    /* !important overrides the theme's reset.css, which targets every <button>
       with `width:auto` (collapses the strip) and `border:1px solid #c36`
       (the red border) at equal-or-higher specificity. */
    width: var(--alija-sp-strip-w, 71px) !important;
    height: 100dvh;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    color: var(--alija-sp-text, #000) !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    z-index: var(--alija-sp-z-strip);
}
.alija-sp__strip--left  { left:  0; }
.alija-sp__strip--right { right: 0; }

.alija-sp__strip-inner {
    position: absolute;
    /* Explicit longhand (NOT the `inset` shorthand) with fallbacks. The
       shorthand is silently dropped by some renderers, which leaves the
       absolutely-positioned band with no width and collapses it to text
       width — that was the thin strip. This guarantees the 53px band. */
    top:    var(--alija-sp-strip-pad, 9px);
    right:  var(--alija-sp-strip-pad, 9px);
    bottom: var(--alija-sp-strip-pad, 9px);
    left:   var(--alija-sp-strip-pad, 9px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 28px;
    background: var(--alija-sp-bg);
    transition: top    var(--alija-sp-dur-hover) var(--alija-sp-ease),
                right  var(--alija-sp-dur-hover) var(--alija-sp-ease),
                bottom var(--alija-sp-dur-hover) var(--alija-sp-ease),
                left   var(--alija-sp-dur-hover) var(--alija-sp-ease);
}

/* Hover: band grows to fill the 9px frame on all sides. (No focus-grow —
   that left the strip stuck open after a click.) */
.alija-sp__strip:hover .alija-sp__strip-inner {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

/* Strip label — vertical on desktop. */
.alija-sp__strip-label {
    font-size: 14px;
    font-weight: 500;
    line-height: 1;            /* 100% */
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}
.alija-sp__strip--left  .alija-sp__strip-label { text-align: center; }
.alija-sp__strip--right .alija-sp__strip-label { text-align: right; }

/* Plus / minus icon (left strip only). */
.alija-sp__icon {
    display: block;
    width: 14px;
    height: 14px;
    margin-bottom: 16px;
}
.alija-sp__icon--minus { display: none; }
.alija-sp__strip[aria-expanded="true"] .alija-sp__icon--plus  { display: none; }
.alija-sp__strip[aria-expanded="true"] .alija-sp__icon--minus { display: block; }

/* ==========================================================================
   PANELS
   The panel sits in its OPEN position (pinned to the box edge, right where
   the strip is) and is revealed with clip-path, so it appears to grow out
   FROM the strip — it never slides in from off-screen.
   ========================================================================== */
.alija-sp__panel {
    position: fixed;
    top: 0;
    width: var(--alija-sp-panel-w);
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: var(--alija-sp-bg);
    color: var(--alija-sp-text);
    z-index: var(--alija-sp-z-panel);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: clip-path var(--alija-sp-dur-slide) var(--alija-sp-ease);
    pointer-events: none;
}

/* Closed = clipped to zero width at the strip edge. */
.alija-sp__panel--menu {
    left: 0;
    clip-path: inset(0 100% 0 0);   /* reveals left -> right, out of the strip */
}
.alija-sp__panel--contact {
    right: 0;
    clip-path: inset(0 0 0 100%);   /* reveals right -> left, out of the strip */
}

.alija-sp__panel.is-open {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
}

.alija-sp__panel-inner {
    /* Leave room for the strip that overlays this panel's edge. */
    padding: 40px 48px 40px calc(var(--alija-sp-strip-w) + 32px);
    min-height: 100%;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transition: opacity var(--alija-sp-dur-fade) var(--alija-sp-ease);
}
.alija-sp__panel--contact .alija-sp__panel-inner {
    padding: 40px calc(var(--alija-sp-strip-w) + 32px) 40px 48px;
}

.alija-sp__panel.is-open .alija-sp__panel-inner {
    opacity: 1;
    transition-delay: var(--alija-sp-content-delay);
}

/* Panel header (phone + lang switcher). */
.alija-sp__panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 56px;
}
.alija-sp__panel-lang { font-size: 14px; }

/* ==========================================================================
   MENU LIST (left panel)
   ========================================================================== */
.alija-sp__menu {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.alija-sp__menu-list {
    display: flex;
    flex-direction: column;
}
.alija-sp__menu-list li,
.alija-sp__menu-list li a {
    font-size: 34px;
    line-height: 42px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
}
.alija-sp__menu-list li a {
    display: inline-block;
    transition: opacity var(--alija-sp-dur-hover) var(--alija-sp-ease);
}
.alija-sp__menu-list li a:hover { opacity: 0.6; }

.alija-sp__menu-empty {
    font-size: 14px;
    opacity: 0.6;
}

/* Social links — 2-column grid. */
.alija-sp__socials {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 48px;
    margin-top: 48px;
    max-width: 280px;
}
.alija-sp__socials a {
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.03em;
    transition: opacity var(--alija-sp-dur-hover) var(--alija-sp-ease);
}
.alija-sp__socials a:hover { opacity: 0.6; }

/* ==========================================================================
   CONTACT PANEL (right panel)
   ========================================================================== */
.alija-sp__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 28px;
}
.alija-sp__info li {
    font-size: 22px;
    line-height: 1;            /* 100% */
    font-weight: 400;
    letter-spacing: -0.03em;
    color: var(--alija-sp-text);
}
.alija-sp__info li a:hover { opacity: 0.6; }

/* CTA button. */
.alija-sp__cta {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    align-self: flex-start;
    margin-top: 40px;
    padding: 20px 24px;
    background: var(--alija-sp-btn-bg);
    color: var(--alija-sp-btn-text);
    font-size: 18px;
    line-height: 1;            /* 100% */
    font-weight: 400;
    letter-spacing: -0.03em;
    min-width: 320px;
    transition: opacity var(--alija-sp-dur-hover) var(--alija-sp-ease);
}
.alija-sp__cta:hover { opacity: 0.85; }
.alija-sp__cta img { width: 18px; height: 18px; }

/* No backdrop overlay — panels open without dimming the page. */

/* Lock body scroll when a panel is open. */
body.alija-sp-locked {
    overflow: hidden;
}

/* ==========================================================================
   TABLET + MOBILE  (<= 1024px): strips flip to top/bottom full-width bars.
   Gutter is already 0 here, so bars run edge-to-edge automatically.
   ========================================================================== */
@media (max-width: 1024px) {

    /* Strips become full-width horizontal bars. */
    .alija-sp__strip {
        top: auto;
        left: 0;
        right: 0;
        width: auto !important;   /* override the desktop !important above */
        height: var(--alija-sp-strip-h);
        transition: transform 0.3s var(--alija-sp-ease);
    }
    .alija-sp__strip--left  { top: 0;    bottom: auto; }
    .alija-sp__strip--right { bottom: 0; top: auto; }

    /* Hide on scroll down (JS toggles .is-bars-hidden); reappear on scroll up. */
    .alija-sp.is-bars-hidden .alija-sp__strip--left  { transform: translateY(-100%); }
    .alija-sp.is-bars-hidden .alija-sp__strip--right { transform: translateY(100%); }

    /* Full-bleed bar (no frame on mobile), icon + label side by side. */
    .alija-sp__strip-inner {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        justify-content: center;
        padding-top: 0;
        gap: 10px;
    }

    /* Hover-grow disabled on touch. */
    .alija-sp__strip:hover .alija-sp__strip-inner {
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    /* Labels horizontal. */
    .alija-sp__strip-label {
        writing-mode: horizontal-tb;
        transform: none;
        text-align: center;
    }
    .alija-sp__strip--right .alija-sp__strip-label { text-align: center; }

    /* Icon beside the label instead of above. */
    .alija-sp__icon {
        margin-bottom: 0;
    }

    /* Panels expand out from their bar (clip-path reveal), not from behind it. */
    .alija-sp__panel {
        width: 100vw;
        max-width: 100vw;
        height: auto;
        max-height: calc(100vh - (var(--alija-sp-strip-h) * 2));
        max-height: calc(100dvh - (var(--alija-sp-strip-h) * 2));
    }
    .alija-sp__panel--menu {
        top: var(--alija-sp-strip-h);   /* sits at the bottom edge of the top bar */
        bottom: auto;
        left: 0;
        clip-path: inset(0 0 100% 0);   /* reveals downward, out of the bar */
    }
    .alija-sp__panel--contact {
        top: auto;
        bottom: var(--alija-sp-strip-h); /* sits at the top edge of the bottom bar */
        right: 0;
        clip-path: inset(100% 0 0 0);   /* reveals upward, out of the bar */
    }
    .alija-sp__panel.is-open {
        clip-path: inset(0 0 0 0);
    }

    .alija-sp__panel-inner,
    .alija-sp__panel--contact .alija-sp__panel-inner {
        padding: 32px 24px;
    }

    /* Slightly smaller menu items on mobile. */
    .alija-sp__menu-list li,
    .alija-sp__menu-list li a {
        font-size: 28px;
        line-height: 36px;
    }
    .alija-sp__cta {
        min-width: 0;
        width: 100%;
    }
}