/**
 * Arbor — Phase 2 mega-menu navigation (desktop full-width panel + mobile accordion).
 *
 * Loaded + scoped under body.arbor-ds by inc/arbor-nav.php (rollout-gated). Tokens
 * from style.css. NO borders / lines / shadows — regions are separated with
 * spacing, surface fills (--ds-surface) and corner radius (--ds-radius). !important
 * is used in places to win over the compiled reeco.css (allowed by CSS-GUIDE.md).
 */

/* Anchor targets (menu #onama / #kontakt) clear the sticky header. */
body.arbor-ds #onama,
body.arbor-ds #kontakt { scroll-margin-top: 120px; }

/* ===================== Desktop: triggers + caret ========================= */
/* Triggers inherit .site-header-menu > li > a typography from arbor-chrome.css. */
body.arbor-ds .arbor-meganav__trigger {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}
body.arbor-ds .arbor-meganav__trigger.is-open { color: var(--ds-brand) !important; }
/* Active scope — the room/link matching the current page (set client-side). */
body.arbor-ds .arbor-meganav .is-current { color: var(--ds-brand) !important; }

/* The nav is absolutely centered (arbor-chrome.css), which would otherwise
   constrain its shrink-to-fit width to the right half and wrap the items.
   Let it size to its content and never break a label mid-word. */
body.arbor-ds .site-header-navigation { width: -moz-max-content; width: max-content; max-width: none; }
body.arbor-ds .site-header-menu { flex-wrap: nowrap; }
body.arbor-ds .site-header-menu > li > a { white-space: nowrap; }

/* ===================== Desktop: full-width panel ========================= */
/* Anchor the panel to the header bar and lift the whole header above the page
   content so the dropdown paints on top (no shadow needed). */
body.arbor-ds .gs-site-header-holder { position: relative; z-index: 1000; }
body.arbor-ds .gs-site-header { position: relative; }

/* Full-width (end-to-end) backdrop dropping below the header; the CONTENT inside
   is constrained to the page .container box on .arbor-mega__inner below.
   The panel casts the SAME drop shadow as the stuck navbar (arbor-chrome.css)
   so the open dropdown reads as one lifted surface with the header. The 4px
   downward offset keeps the shadow on the panel's bottom edge (over the page),
   while its top edge tucks under the header bar. */
body.arbor-ds .arbor-mega {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--ds-surface-overlay);
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.10);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
body.arbor-ds .arbor-mega.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
@media (prefers-reduced-motion: reduce) {
    body.arbor-ds .arbor-mega { transition: none !important; transform: none !important; }
}

body.arbor-ds .arbor-mega__panel { display: none; }
body.arbor-ds .arbor-mega__panel.is-active { display: block; }

/* Constrain content to the page .container box (reeco.css: 1150px → 1320px at
   ≥1367px, 15px gutters) and center it, so it lines up with page content.
   NOTE: don't use the .container class here — `.gs-site-header-full-width
   .container` would force it full-bleed. */
body.arbor-ds .arbor-mega__inner {
    max-width: 1150px;
    margin: 0 auto;
    padding: var(--ds-space-4) 15px;
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: var(--ds-space-5);
    align-items: start;
}
@media (min-width: 1367px) {
    body.arbor-ds .arbor-mega__inner { max-width: 1320px; }
}

/* Left column — stacks its children (subcats, view-all, quiz) */
body.arbor-ds .arbor-mega__nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
/* Left column — sub-categories (primary navigation) */
body.arbor-ds .arbor-mega__subcats {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%; /* full width so the sub-category arrow stays right-aligned */
}
body.arbor-ds .arbor-mega__subcats li { margin: 0; }
body.arbor-ds .arbor-mega__subcat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 16px;
    border-radius: var(--ds-radius-pill);
    font-family: var(--ds-font-body);
    font-size: 15px;
    line-height: 1.2;
    color: var(--ds-ink) !important;
    text-decoration: none !important;
    transition: background .15s ease, color .15s ease;
}
body.arbor-ds .arbor-mega__subcat-arrow { opacity: 0; transition: opacity .15s ease; }
body.arbor-ds .arbor-mega__subcat:hover,
body.arbor-ds .arbor-mega__subcat.is-current {
    background: var(--ds-surface);
    color: var(--ds-brand) !important;
}
body.arbor-ds .arbor-mega__subcat:hover .arbor-mega__subcat-arrow,
body.arbor-ds .arbor-mega__subcat.is-current .arbor-mega__subcat-arrow { opacity: 1; }

/* "Pogledaj sve <room>" link under the sub-category list */
body.arbor-ds .arbor-mega__viewall {
    display: inline-flex;
    align-items: center;
    /* The arrow lives in its own aria-hidden span, and a flex item's leading
       space is collapsed — without this the two render as "Pogledaj sve→". */
    gap: 4px;
    margin: 10px 0 0 16px;
    font-family: var(--ds-font-body);
    font-weight: 600;
    font-size: 14px;
    /* Crimson, not body grey: these two are the panel's only calls to action —
       the accent marks them as the way out of the panel, and separates them
       from the sub-category list they sit under. */
    color: var(--ds-brand) !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
body.arbor-ds .arbor-mega__viewall:hover { color: color-mix(in srgb, var(--ds-brand) 78%, #000) !important; }

/* Right column — curated "popular product" tiles (interior imagery) */
body.arbor-ds .arbor-mega__feature-head {
    margin: 0 0 var(--ds-space-3);
    font-family: var(--ds-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ds-body);
}
body.arbor-ds .arbor-mega__tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ds-space-4);
    align-items: start;
}
body.arbor-ds .arbor-mega__tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none !important;
    color: var(--ds-ink) !important;
}
body.arbor-ds .arbor-mega__tile-media {
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--ds-radius);
    overflow: hidden;
    background: var(--ds-surface);
    transition: background .2s ease;
}
body.arbor-ds .arbor-mega__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
body.arbor-ds .arbor-mega__tile:hover .arbor-mega__tile-media img { transform: scale(1.05); }
/* Placeholder shown until an interior photo is uploaded and the product has no image. */
body.arbor-ds .arbor-mega__tile-ph {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ds-surface), var(--ds-surface-overlay));
}
body.arbor-ds .arbor-mega__tile-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
body.arbor-ds .arbor-mega__tile-eyebrow {
    font-family: var(--ds-font-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ds-brand);
}
body.arbor-ds .arbor-mega__tile-title {
    font-family: var(--ds-font-body);
    font-size: 14px;
    line-height: 1.35;
    transition: color .15s ease;
}
body.arbor-ds .arbor-mega__tile:hover .arbor-mega__tile-title { color: var(--ds-brand) !important; }
body.arbor-ds .arbor-mega__tile-price {
    font-family: var(--ds-font-body);
    font-size: 14px;
    font-weight: 600;
    color: var(--ds-ink);
}
body.arbor-ds .arbor-mega__tile-price del { color: var(--ds-body); font-weight: 400; margin-right: 6px; }
body.arbor-ds .arbor-mega__tile-price ins { text-decoration: none; color: var(--ds-brand); }

/* "Help / quiz" link — sits in the left column directly under "Pogledaj sve"
   (uses its spare height, so the panel doesn't grow). Styled AS "Pogledaj sve":
   the two are the same kind of thing — a way out of the panel — and a filled
   dark pill made the secondary one shout louder than the primary one. Kept as
   its own rule rather than folded into a shared selector so either can move
   without dragging the other. */
body.arbor-ds .arbor-mega__kviz {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 8px 0 0 16px;
    font-family: var(--ds-font-body);
    font-weight: 600;
    font-size: 14px;
    color: var(--ds-brand) !important;
    text-decoration: none !important;
    transition: color .15s ease;
}
body.arbor-ds .arbor-mega__kviz:hover { color: color-mix(in srgb, var(--ds-brand) 78%, #000) !important; }

/* Tablet down — never show the desktop panel (mobile overlay takes over <992px). */
@media (max-width: 991px) {
    body.arbor-ds .arbor-mega { display: none !important; }
}

/* Desktop tightening for narrower laptops */
@media (max-width: 1100px) and (min-width: 992px) {
    body.arbor-ds .arbor-mega__inner { grid-template-columns: 200px 1fr; gap: var(--ds-space-4); }
}

/* ===================== Mobile: full-height drill-down ==================== */
@media (max-width: 991px) {
    /* Fill reeco's fixed, full-height .mobile-navigation flex column, so the nav
       owns the height below the close/logo bar. Only the active screen's body
       scrolls — the bar (and, on a room, the back + title) stay put, and short
       screens don't scroll at all. */
    body.arbor-ds .arbor-mnav-wrap {
        width: 100%;
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }

    body.arbor-ds .arbor-mnav__rooms,
    body.arbor-ds .arbor-mnav__flat {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    body.arbor-ds .arbor-mnav__rooms li,
    body.arbor-ds .arbor-mnav__flat li { margin: 0; }

    /* Drill-down screens: one visible at a time, each fills the nav height
       (flex column) so we can centre the root and pin/scroll the room body. */
    body.arbor-ds .arbor-mnav__screen {
        flex: 1 1 auto;
        min-height: 0;
        flex-direction: column;
    }
    body.arbor-ds .arbor-mnav__screen--root { display: flex; padding-bottom: 12px; }
    body.arbor-ds .arbor-mnav__screen--room { display: none; }
    body.arbor-ds .arbor-mnav-wrap.is-drilled .arbor-mnav__screen--root { display: none; }
    body.arbor-ds .arbor-mnav-wrap.is-drilled .arbor-mnav__screen--room.is-active {
        display: flex;
        animation: arbor-mnav-slide-in .28s cubic-bezier(.22, .61, .36, 1);
    }
    @keyframes arbor-mnav-slide-in {
        from { opacity: 0; transform: translateX(26px); }
        to   { opacity: 1; transform: translateX(0); }
    }

    /* Root: rooms centred in the free space; secondary links + CTA at the bottom. */
    body.arbor-ds .arbor-mnav__screen--root .arbor-mnav__rooms {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    body.arbor-ds .arbor-mnav__screen--root .arbor-mnav__flat,
    body.arbor-ds .arbor-mnav__screen--root .arbor-mnav__cta { flex: 0 0 auto; }

    /* While drilled into a room, hide the overlay's social footer so the room
       content reclaims that height and reaches the bottom of the screen — it
       then scrolls only if it still doesn't fit. */
    body.arbor-ds .mobile-navigation.is-mnav-drilled .arbor-mobnav__social { display: none; }

    /* Room: back + title pinned; only the body scrolls, and only if it must. */
    body.arbor-ds .arbor-mnav__back,
    body.arbor-ds .arbor-mnav__screen-title { flex: 0 0 auto; }
    body.arbor-ds .arbor-mnav__screen-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;      /* Firefox — scrolls, no visible scrollbar */
        -ms-overflow-style: none;   /* legacy Edge/IE */
    }
    body.arbor-ds .arbor-mnav__screen-body::-webkit-scrollbar { width: 0; height: 0; display: none; } /* WebKit/Blink */

    /* Root: room rows (forward navigation) */
    body.arbor-ds .arbor-mnav__roomlink {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        background: none;
        border: 0;
        padding: 13px 0;
        font-family: var(--ds-font-head);
        font-weight: var(--ds-fw-display);
        font-size: 26px;
        line-height: 1.2;
        color: var(--ds-ink) !important; /* beat reeco's white mobile-nav text */
        text-align: left;
        cursor: pointer;
    }
    body.arbor-ds .arbor-mnav__fwd {
        flex: 0 0 auto;
        font-family: var(--ds-font-body);
        font-weight: 400;
        font-size: 22px;
        line-height: 1;
        color: var(--ds-ink);
    }
    body.arbor-ds .arbor-mnav__roomlink:hover,
    body.arbor-ds .arbor-mnav__roomlink:hover .arbor-mnav__fwd { color: var(--ds-brand) !important; }

    /* Room screen: back button + title */
    body.arbor-ds .arbor-mnav__back {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: 0;
        padding: 4px 0;
        margin: 0 0 10px;
        font-family: var(--ds-font-body);
        font-weight: 600;
        font-size: 15px;
        color: var(--ds-body) !important;
        cursor: pointer;
    }
    body.arbor-ds .arbor-mnav__back-arrow { font-size: 18px; line-height: 1; }
    body.arbor-ds .arbor-mnav__back:hover { color: var(--ds-brand) !important; }
    body.arbor-ds .arbor-mnav__screen-title {
        margin: 0 0 8px;
        font-family: var(--ds-font-head);
        font-weight: var(--ds-fw-display);
        font-size: 26px;
        line-height: 1.2;
        color: var(--ds-ink);
    }

    /* Sub-categories — plain text list (primary nav), no photos. */
    body.arbor-ds .arbor-mnav__subcats {
        list-style: none;
        margin: 2px 0 0;
        padding: 0;
    }
    body.arbor-ds .arbor-mnav__subcats li { margin: 0; }
    body.arbor-ds .arbor-mnav__subcat {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 13px 0;
        font-family: var(--ds-font-body);
        font-size: 17px;
        line-height: 1.3;
        color: var(--ds-ink) !important;
        text-decoration: none !important;
    }
    body.arbor-ds .arbor-mnav__subcat-arrow { flex: 0 0 auto; color: var(--ds-body); font-size: 15px; }
    body.arbor-ds .arbor-mnav__subcat:hover,
    body.arbor-ds .arbor-mnav__subcat:hover .arbor-mnav__subcat-arrow { color: var(--ds-brand) !important; }
    /* Same move as the desktop panel: matches .arbor-mnav__viewall. */
    body.arbor-ds .arbor-mnav__kviz {
        display: inline-block;
        margin-top: 10px;
        font-family: var(--ds-font-body);
        font-weight: 600;
        font-size: 16px;
        color: var(--ds-ink) !important;
        text-decoration: none !important;
    }
    body.arbor-ds .arbor-mnav__kviz:hover { color: var(--ds-brand) !important; }

    body.arbor-ds .arbor-mnav__viewall {
        display: inline-block;
        margin-top: 14px;
        font-family: var(--ds-font-body);
        font-weight: 600;
        font-size: 16px;
        color: var(--ds-ink) !important;
        text-decoration: none !important;
    }
    body.arbor-ds .arbor-mnav__viewall:hover { color: var(--ds-brand) !important; }

    /* Mobile "Izdvojeno" — curated tiles as a clean 2-column product grid. */
    body.arbor-ds .arbor-mnav__tiles-head {
        margin: 20px 0 12px;
        font-family: var(--ds-font-body);
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--ds-body);
    }
    body.arbor-ds .arbor-mnav__tiles {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    body.arbor-ds .arbor-mnav__tile {
        display: flex;
        flex-direction: column;
        gap: 8px;
        text-decoration: none !important;
        color: var(--ds-ink) !important;
    }
    body.arbor-ds .arbor-mnav__tile-media {
        display: block;
        aspect-ratio: 4 / 3;
        border-radius: var(--ds-radius);
        overflow: hidden;
        background: var(--ds-surface);
    }
    body.arbor-ds .arbor-mnav__tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
    body.arbor-ds .arbor-mnav__tile-title { font-family: var(--ds-font-body); font-size: 14px; line-height: 1.3; }
    body.arbor-ds .arbor-mnav__tile-price { font-family: var(--ds-font-body); font-size: 14px; font-weight: 600; }

    body.arbor-ds .arbor-mnav__flat { margin-top: 12px; }
    body.arbor-ds .arbor-mnav__flat a {
        display: inline-block;
        padding: 9px 0;
        font-family: var(--ds-font-body);
        font-size: 20px;
        color: var(--ds-ink) !important;
        text-decoration: none !important;
    }
    body.arbor-ds .arbor-mnav__flat a:hover { color: var(--ds-brand) !important; }

    body.arbor-ds .arbor-mnav__cta {
        display: block;
        text-align: center;
        margin-top: 24px;
        padding: 15px;
        border-radius: var(--ds-radius-pill);
        background: var(--ds-brand);
        color: var(--ds-on-brand) !important;
        font-family: var(--ds-font-head);
        font-weight: var(--ds-fw-button);
        font-size: 15px;
        letter-spacing: .04em;
        text-transform: uppercase;
        text-decoration: none !important;
    }
}

/* Touch devices: neutralise the sticky :hover a tap leaves behind (a tapped row
   would otherwise stay brand-red until the next interaction). Mouse users on a
   narrow window keep hover feedback via (hover: hover). */
@media (max-width: 991px) and (hover: none) {
    body.arbor-ds .arbor-mnav__subcat:hover,
    body.arbor-ds .arbor-mnav__roomlink:hover,
    body.arbor-ds .arbor-mnav__roomlink:hover .arbor-mnav__fwd,
    body.arbor-ds .arbor-mnav__viewall:hover,
    body.arbor-ds .arbor-mnav__kviz:hover,
    body.arbor-ds .arbor-mnav__flat a:hover { color: var(--ds-ink) !important; }
    body.arbor-ds .arbor-mnav__subcat:hover .arbor-mnav__subcat-arrow,
    body.arbor-ds .arbor-mnav__back:hover { color: var(--ds-body) !important; }
}

@media (max-width: 480px) {
    body.arbor-ds .arbor-mnav__roomlink,
    body.arbor-ds .arbor-mnav__screen-title { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
    body.arbor-ds .arbor-mnav-wrap.is-drilled .arbor-mnav__screen--room.is-active { animation: none !important; }
}