/**
 * navigation.css — primary nav, dropdowns, mobile offcanvas.
 *
 * Single responsibility: navigation menu styling (desktop + mobile).
 *
 * @package ICE_GeneratePress_Child
 * @since   1.0.0
 */

/* ======================================================================
   Primary Navigation (desktop)
   ====================================================================== */

.ice-primary-nav {
        display: none;
        flex: 1 1 auto;
        justify-content: center;
        align-items: center;
}

.ice-primary-nav .ice-menu {
        display: flex;
        align-items: center;
        gap: var(--ice-spacing-xs);
        list-style: none;
        margin: 0;
        padding: 0;
}

.ice-primary-nav .ice-menu > li {
        position: relative;
        display: inline-flex;
        align-items: center;
}

.ice-primary-nav .ice-menu > li > a {
        display: inline-flex;
        align-items: center;
        gap: var(--ice-spacing-2xs);
        padding: 8px 16px;
        font-family: var(--ice-font-body);
        font-size: var(--ice-fs-base);
        font-weight: var(--ice-fw-semibold);
        color: var(--ice-title);
        text-decoration: none;
        line-height: var(--ice-lh-snug);
        letter-spacing: var(--ice-ls-tight);
        border-radius: var(--ice-btn-radius-sm);
        transition: color var(--ice-t-fast), background var(--ice-t-fast);
}

.ice-primary-nav .ice-menu > li > a:hover,
.ice-primary-nav .ice-menu > li.ice-is-active > a,
.ice-primary-nav .ice-menu > li.current-menu-item > a,
.ice-primary-nav .ice-menu > li.current-menu-ancestor > a {
        color: var(--ice-accent);
        text-decoration: none;
}

.ice-primary-nav .ice-menu > li > a:hover {
        background: var(--ice-light);
}

.ice-primary-nav .ice-menu > li > a .ice-menu-label {
        white-space: nowrap;
}

.ice-primary-nav .ice-caret-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: transform var(--ice-t-base);
}

.ice-primary-nav .ice-menu > li:hover > a .ice-caret-icon,
.ice-primary-nav .ice-menu > li:focus-within > a .ice-caret-icon {
        transform: rotate(180deg);
}

/* ----- Submenu toggle (hidden on desktop — hover handles dropdown) ----- */

.ice-primary-nav .ice-sub-toggle {
        display: none;
}

.ice-sub-toggle-icon {
        display: inline-flex;
        transition: transform var(--ice-t-base);
}

/* ======================================================================
   Dropdown submenu (desktop)
   ====================================================================== */

.ice-primary-nav .ice-sub-menu {
        position: absolute;
        top: calc(100% + 8px);
        left: 50%;
        transform: translateX(-50%) translateY(8px);
        min-width: 260px;
        background: var(--ice-white);
        border: 1px solid var(--ice-border);
        border-radius: var(--ice-btn-radius-sm);
        box-shadow: var(--ice-shadow-lg);
        padding: var(--ice-spacing-xs) 0;
        list-style: none;
        margin: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--ice-t-base), transform var(--ice-t-base), visibility 0s linear var(--ice-t-base);
        z-index: var(--ice-z-dropdown);
}

.ice-primary-nav .ice-sub-menu::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 50%;
        transform: translateX(-50%) rotate(45deg);
        width: 12px;
        height: 12px;
        background: var(--ice-white);
        border-left: 1px solid var(--ice-border);
        border-top: 1px solid var(--ice-border);
}

.ice-primary-nav .ice-sub-menu li {
        /* Each submenu item gets a dotted bottom border separator (matches ice.or.id). */
        border-bottom: 1px dotted var(--ice-border);
}

.ice-primary-nav .ice-sub-menu li:last-child {
        border-bottom: 0;
}

.ice-primary-nav .ice-sub-menu a {
        display: block;
        padding: 10px 18px;
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-medium);
        color: var(--ice-title);
        text-decoration: none;
        transition: background var(--ice-t-fast), color var(--ice-t-fast);
        white-space: nowrap;
}

.ice-primary-nav .ice-sub-menu a:hover,
.ice-primary-nav .ice-sub-menu li.ice-is-active > a,
.ice-primary-nav .ice-sub-menu li.current-menu-item > a {
        background: var(--ice-light);
        color: var(--ice-accent);
}

/* Show submenu on hover (desktop, no JS needed). */
.ice-primary-nav .ice-menu > li:hover > .ice-sub-menu,
.ice-primary-nav .ice-menu > li:focus-within > .ice-sub-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
        transition: opacity var(--ice-t-base), transform var(--ice-t-base), visibility 0s;
}

.ice-primary-nav .ice-sub-menu .ice-sub-menu {
        top: 0;
        left: calc(100% + 8px);
        transform: translateY(0);
}

.ice-primary-nav .ice-sub-menu .ice-sub-menu::before {
        display: none;
}

.ice-primary-nav .ice-sub-menu li:hover > .ice-sub-menu,
.ice-primary-nav .ice-sub-menu li:focus-within > .ice-sub-menu {
        transform: translateY(0);
}

/* ======================================================================
   Mobile Offcanvas
   ====================================================================== */

.ice-offcanvas {
        position: fixed;
        inset: 0;
        z-index: var(--ice-z-offcanvas);
        visibility: hidden;
        pointer-events: none;
}

.ice-offcanvas.is-open {
        visibility: visible;
        pointer-events: auto;
}

.ice-offcanvas__overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        opacity: 0;
        transition: opacity var(--ice-drawer-transition);
        /* Backdrop blur for premium feel — content behind the overlay
         * appears softly out of focus. Matches WartaLokal's overlay treatment. */
        backdrop-filter: blur(var(--ice-drawer-overlay-blur));
        -webkit-backdrop-filter: blur(var(--ice-drawer-overlay-blur));
}

.ice-offcanvas.is-open .ice-offcanvas__overlay {
        opacity: 1;
}

.ice-offcanvas__panel {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(360px, 88vw);
        background: var(--ice-drawer-bg);
        color: var(--ice-drawer-color);
        box-shadow: var(--ice-shadow-drawer);
        transform: translateX(100%);
        transition: transform var(--ice-drawer-transition);
        display: flex;
        flex-direction: column;
        overflow: hidden;
}

.ice-offcanvas.is-open .ice-offcanvas__panel {
        transform: translateX(0);
}

/* ----- Offcanvas header (logo + close) ----- */

.ice-offcanvas__header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-md);
        padding: var(--ice-spacing-md) var(--ice-spacing-lg);
        border-bottom: 1px solid var(--ice-drawer-border-color);
        min-height: 72px;
        flex-shrink: 0;
}

.ice-offcanvas__logo {
        flex: 1 1 auto;
        min-width: 0;
        display: flex;
        align-items: center;
}

.ice-offcanvas__logo .custom-logo {
        max-height: 40px;
        width: auto;
        height: auto;
        /* Force white logo on dark drawer background. */
        filter: brightness(0) invert(1);
}

.ice-offcanvas__logo .ice-logo__mark {
        width: 34px;
        height: 34px;
        font-size: var(--ice-fs-xs);
        background: var(--ice-accent);
        color: var(--ice-primary);
}

.ice-offcanvas__logo .ice-logo__text {
        font-size: var(--ice-fs-md);
        color: var(--ice-drawer-title-color);
}

.ice-offcanvas__close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        flex: 0 0 auto;
        border-radius: var(--ice-btn-radius-sm);
        color: rgba(255, 255, 255, 0.7);
        background: transparent;
        border: 1px solid var(--ice-drawer-border-color);
        transition: all var(--ice-t-fast);
}

.ice-offcanvas__close:hover {
        border-color: var(--ice-accent);
        color: var(--ice-accent);
        transform: rotate(90deg);
}

/* ----- Offcanvas body (scrollable) ----- */

.ice-offcanvas__body {
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: var(--ice-spacing-md) 0;
        display: flex;
        flex-direction: column;
        gap: 0;
        -webkit-overflow-scrolling: touch;
}

/* ----- About text section ----- */

.ice-offcanvas__about {
        padding: 0 var(--ice-spacing-lg) var(--ice-spacing-md);
        border-bottom: 1px solid var(--ice-drawer-border-color);
        margin-bottom: var(--ice-spacing-sm);
}

.ice-offcanvas__about p {
        margin: 0;
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-relaxed);
        color: rgba(255, 255, 255, 0.6);
        font-style: italic;
}

/* ----- Section label "MENU" ----- */

.ice-offcanvas__section-label {
        font-size: 11px;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(255, 255, 255, 0.4);
        padding: var(--ice-spacing-xs) var(--ice-spacing-lg) var(--ice-spacing-2xs);
        font-weight: var(--ice-fw-bold);
}

/* ----- Mobile nav ----- */

.ice-mobile-nav {
        flex: 1 1 auto;
}

.ice-mobile-nav .ice-mobile-menu,
.ice-mobile-nav .ice-menu {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0;
}

.ice-mobile-nav .ice-menu-item--top {
        position: relative;
}

.ice-mobile-nav .ice-menu-item--top > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ice-spacing-sm);
        padding: 12px var(--ice-spacing-lg);
        font-family: var(--ice-font-body);
        font-size: var(--ice-fs-base);
        font-weight: var(--ice-fw-medium);
        color: var(--ice-drawer-link-color);
        text-decoration: none;
        line-height: var(--ice-lh-snug);
        letter-spacing: var(--ice-ls-tight);
        /* Border-left gold indicator (WartaLokal pattern).
         * Transparent by default, becomes gold on hover/active. */
        border-left: 3px solid transparent;
        transition: color var(--ice-t-fast), background var(--ice-t-fast), border-color var(--ice-t-fast);
}

.ice-mobile-nav .ice-menu-item--top > a:hover,
.ice-mobile-nav .ice-menu-item--top.ice-is-active > a,
.ice-mobile-nav .ice-menu-item--top.current-menu-item > a,
.ice-mobile-nav .ice-menu-item--top.current-menu-ancestor > a {
        color: var(--ice-drawer-link-hover);
        border-left-color: var(--ice-accent);
        background: var(--ice-drawer-hover-bg);
}

.ice-mobile-nav .ice-menu-label {
        flex: 1 1 auto;
}

.ice-mobile-nav .ice-caret-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 24px;
        height: 24px;
        color: rgba(255, 255, 255, 0.4);
        transition: transform var(--ice-t-base), color var(--ice-t-fast);
        pointer-events: auto;
}

.ice-mobile-nav .ice-caret-icon svg {
        pointer-events: none;
}

.ice-mobile-nav .ice-menu-item--top.ice-is-expanded > a .ice-caret-icon {
        transform: rotate(180deg);
        color: var(--ice-accent);
}

/* Visual feedback: when a parent item is expanded, highlight its label. */
.ice-mobile-nav .ice-menu-item--top.ice-is-expanded > a {
        color: var(--ice-accent);
        border-left-color: var(--ice-accent);
        background: var(--ice-drawer-active-bg);
}

.ice-mobile-nav .ice-menu-item--top.ice-is-expanded > a .ice-menu-label {
        font-weight: var(--ice-fw-bold);
}

/* Submenu toggle button (rendered by walker but hidden on mobile —
 * the caret in the link handles the toggle via JS click handler). */
.ice-mobile-nav .ice-sub-toggle {
        display: none;
}

/* ----- Mobile submenu (accordion) ----- */

.ice-mobile-nav .ice-sub-menu {
        display: none;
        list-style: none;
        margin: 0;
        padding: 0 0 var(--ice-spacing-xs) 0;
        flex-direction: column;
        gap: 0;
        background: rgba(0, 0, 0, 0.2);
}

.ice-mobile-nav .ice-sub-menu.is-open {
        display: flex;
        animation: ice-fade-in 200ms ease;
}

.ice-mobile-nav .ice-sub-menu li {
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.ice-mobile-nav .ice-sub-menu li:last-child {
        border-bottom: 0;
}

.ice-mobile-nav .ice-sub-menu a {
        display: block;
        padding: 10px var(--ice-spacing-lg) 10px calc(var(--ice-spacing-lg) + 16px);
        font-size: var(--ice-fs-sm);
        font-weight: var(--ice-fw-medium);
        color: rgba(255, 255, 255, 0.6);
        text-decoration: none;
        transition: background var(--ice-t-fast), color var(--ice-t-fast);
}

.ice-mobile-nav .ice-sub-menu a:hover,
.ice-mobile-nav .ice-sub-menu li.ice-is-active > a,
.ice-mobile-nav .ice-sub-menu li.current-menu-item > a {
        background: var(--ice-drawer-hover-bg);
        color: var(--ice-accent);
}

/* ----- Contact section ----- */

.ice-offcanvas__contact-section {
        padding: var(--ice-spacing-md) var(--ice-spacing-lg);
        border-top: 1px solid var(--ice-drawer-border-color);
        margin-top: var(--ice-spacing-sm);
}

.ice-offcanvas__contact-title {
        font-family: var(--ice-font-heading);
        font-size: 11px;
        font-weight: var(--ice-fw-bold);
        color: rgba(255, 255, 255, 0.4);
        text-transform: uppercase;
        letter-spacing: 0.14em;
        margin: 0 0 var(--ice-spacing-sm);
}

.ice-offcanvas__contact {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: var(--ice-spacing-xs);
}

.ice-offcanvas__contact-item {
        display: flex;
        align-items: flex-start;
        gap: var(--ice-spacing-sm);
        font-size: var(--ice-fs-sm);
        line-height: var(--ice-lh-normal);
        color: rgba(255, 255, 255, 0.6);
}

.ice-offcanvas__contact-item svg {
        flex-shrink: 0;
        color: var(--ice-accent);
        margin-top: 2px;
}

.ice-offcanvas__contact-item a {
        color: rgba(255, 255, 255, 0.85);
        text-decoration: none;
        transition: color var(--ice-t-fast);
        word-break: break-word;
}

.ice-offcanvas__contact-item a:hover {
        color: var(--ice-accent);
}

/* ----- Drawer footer (social + copyright) ----- */

.ice-offcanvas__footer {
        padding: var(--ice-spacing-md) var(--ice-spacing-lg);
        border-top: 1px solid var(--ice-drawer-border-color);
        flex-shrink: 0;
}

.ice-offcanvas__footer-label {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.4);
        margin-bottom: var(--ice-spacing-sm);
        font-weight: var(--ice-fw-bold);
        text-transform: uppercase;
        letter-spacing: 0.14em;
}

.ice-offcanvas__footer .ice-socials {
        display: flex;
        gap: var(--ice-spacing-xs);
}

.ice-offcanvas__footer .ice-socials__link {
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--ice-btn-radius-sm);
        border: 1px solid var(--ice-drawer-border-color);
        color: rgba(255, 255, 255, 0.5);
        transition: all var(--ice-t-fast);
}

.ice-offcanvas__footer .ice-socials__link:hover {
        border-color: var(--ice-accent);
        color: var(--ice-accent);
}

.ice-offcanvas__copyright {
        margin-top: var(--ice-spacing-md);
        font-size: 10px;
        color: rgba(255, 255, 255, 0.3);
        line-height: 1.5;
}

/* ======================================================================
   Mobile: hide desktop nav, show hamburger
   ====================================================================== */

@media (max-width: 1024px) {
        .ice-primary-nav {
                display: none !important;
        }

        .ice-hamburger {
                display: inline-flex;
        }

        /* Topbar STAYS VISIBLE on tablet + mobile (v1.1.4).
         * Working hours are hidden via responsive.css at <= 576px.
         * At 577-1024px, the topbar shows WhatsApp + hours + socials. */
}

@media (min-width: 1025px) {
        .ice-primary-nav {
                display: flex;
        }

        .ice-hamburger {
                display: none;
        }
}

@keyframes ice-fade-in {
        from {
                opacity: 0;
                transform: translateY(-4px);
        }
        to {
                opacity: 1;
                transform: translateY(0);
        }
}