/**
 * Header Mobile Responsive Fixes
 * Mobile menu, offcanvas drawer, improved breakpoints, and accessibility.
 *
 * Breakpoints:
 *   Mobile:  320px – 767px
 *   Tablet:  768px – 1023px
 *   Desktop: 1024px+
 *
 * @package Anora
 * @version 1.0.0
 */

/* ==========================================================================
   MOBILE HEADER (≤767px)
   ========================================================================== */

@media (max-width: 767px) {

    /* Hide desktop row */
    .header-row.device-desktop {
        display: none !important;
    }

    /* Show mobile wrapper */
    .header-mobile-wrapper {
        display: block !important;
    }

    /* Sticky header */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--notion-white, #ffffff);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }

    /* Mobile row — let height be controlled by child container */
    .header-mobile-wrapper .header-row {
        display: block;
        padding: 0;
    }

    .header-mobile-wrapper .row-container,
    .builder-header .header-mobile-wrapper .row-container.container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px;
        min-height: var(--anora-header-main-height, 70px);
        box-sizing: border-box;
    }

    /* Fix logo width capping: override flex: 1 limitations from style.css */
    .header-mobile-wrapper .zone-left {
        flex: 0 1 auto;
        min-width: 0;
    }

    .header-mobile-wrapper .zone-center {
        flex: 1;
        /* allow center to take remaining space if any */
    }

    .header-mobile-wrapper .zone-right {
        flex: 0 0 auto;
    }

    /* Logo sizing - use customizer variable for mobile */
    .header-mobile-wrapper .site-branding {
        max-width: var(--anora-logo-width-mobile, 140px);
    }

    .header-mobile-wrapper .custom-logo {
        height: auto;
        /* Remove hardcoded max-height so width drives the scale */
        max-height: none !important;
        width: 100%;
        object-fit: contain;
        display: block;
    }

    /* Header zones */
    .header-mobile-wrapper .zone-left {
        flex: 1;
        justify-content: flex-start;
    }

    .header-mobile-wrapper .zone-right {
        flex: 0 0 auto;
        display: flex !important;
        align-items: center;
        gap: 12px;
    }

    /* ── Hamburger Trigger ─────────────────────────────────────────────── */

    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .menu-toggle .dashicons {
        font-size: 24px;
        width: 24px;
        height: 24px;
        color: var(--notion-black, #1a1a1a);
        transition: transform 0.3s ease;
    }

    .menu-toggle:hover .dashicons {
        transform: scale(1.1);
    }

    /* ── Offcanvas Drawer ──────────────────────────────────────────────── */

    .mobile-offcanvas-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        height: 100dvh;
        background: var(--notion-white, #ffffff);
        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
        transition: right 0.4s cubic-bezier(0.4, 0.0, 0.2, 1);
        padding: 0;
    }

    .mobile-offcanvas-menu.is-open {
        right: 0;
    }

    /* Offcanvas header (close button area) */
    .offcanvas-header {
        display: flex;
        justify-content: flex-end;
        padding: 16px;
        position: sticky;
        top: 0;
        background: var(--notion-white, #ffffff);
        z-index: 10;
    }

    /* Close button */
    .close-offcanvas {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        cursor: pointer;
        border-radius: var(--radius-md, 6px);
        transition: background 0.2s ease;
    }

    .close-offcanvas:hover {
        background: transparent !important;
    }

    .close-offcanvas .dashicons {
        font-size: 24px;
        color: var(--notion-black, #1a1a1a);
    }

    /* Offcanvas content */
    .offcanvas-content {
        padding: 0 24px 24px;
    }

    /* Menu items inside offcanvas */
    .offcanvas-content ul,
    .offcanvas-content .main-navigation ul {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .offcanvas-content .main-navigation ul,
    .offcanvas-content .mobile-menu ul,
    .offcanvas-content ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .offcanvas-content .main-navigation ul,
    .offcanvas-content .mobile-menu ul,
    .offcanvas-content ul.menu {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
    }

    .offcanvas-content .main-navigation li,
    .offcanvas-content .mobile-menu li,
    .offcanvas-content ul.menu li {
        border-bottom: none;
        /* Removed border to match desktop */
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        margin: 0 !important;
        position: relative;
    }

    .offcanvas-content .main-navigation a,
    .offcanvas-content .mobile-menu a,
    .offcanvas-content ul.menu a {
        display: block;
        padding: 8px 0;
        /* Tighter padding like desktop */
        font-size: 1rem;
        /* Match base scale */
        font-weight: 500;
        color: var(--notion-gray-700, #454545);
        /* Same as desktop */
        text-decoration: none;
        transition: color 0.15s ease;
        background: transparent !important;
        box-shadow: none !important;
    }

    .offcanvas-content .main-navigation a:hover,
    .offcanvas-content .main-navigation a:focus,
    .offcanvas-content ul.menu a:hover,
    .offcanvas-content ul.menu a:focus {
        color: var(--notion-black, #1a1a1a);
    }

    .offcanvas-content .current-menu-item>a {
        color: var(--notion-black, #1a1a1a);
        font-weight: 600;
    }

    /* Submenu support - overriding desktop floating styles */
    .offcanvas-content .main-navigation ul ul.sub-menu,
    .offcanvas-content .sub-menu {
        padding-left: 16px !important;
        position: static !important;
        width: 100% !important;
        box-shadow: none !important;
        background: transparent !important;
        border: none !important;
        min-width: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        margin-top: 0 !important;
        border-radius: 0 !important;
    }

    .offcanvas-content .sub-menu a {
        font-size: 14px;
        padding: 12px 0;
    }

    /* Submenu toggle button (injected by JS) */
    .submenu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 0;
        background: transparent !important;
        border: none !important;
        cursor: pointer;
        position: absolute;
        right: 0;
        top: 0;
        transition: transform 0.3s ease, color 0.2s ease;
    }

    .submenu-toggle:hover .dashicons,
    .submenu-toggle:focus .dashicons {
        color: var(--notion-black, #1a1a1a);
    }

    .submenu-open>.submenu-toggle {
        transform: rotate(180deg);
    }

    /* Hide default theme arrows to prevent duplicate icons */
    .offcanvas-content .menu-item-has-children>a::after,
    .offcanvas-content .menu-item-has-children>a::before,
    .offcanvas-content .menu-item-has-children>a .sub-arrow,
    .offcanvas-content .menu-item-has-children>a i {
        display: none !important;
        content: none !important;
    }

    .submenu-toggle .dashicons {
        font-size: 16px;
        width: 16px;
        height: 16px;
        color: var(--notion-gray-600, #5a5a5a);
    }

    /* Submenu Toggle SVG Rotation */
    .submenu-toggle svg,
    .submenu-toggle .anora-icon {
        width: 16px;
        height: 16px;
        fill: currentColor;
        transform: rotate(180deg);
        transition: transform 0.3s ease;
    }

    .submenu-open>.submenu-toggle svg,
    .submenu-open>.submenu-toggle .anora-icon {
        transform: rotate(0deg);
    }

    /* Hide submenu by default, show when parent has .submenu-open */
    .offcanvas-content .menu-item-has-children>.sub-menu {
        display: none;
    }

    .offcanvas-content .menu-item-has-children.submenu-open>.sub-menu {
        display: block;
    }

    /* Offcanvas item (builder items like social, button) */
    .offcanvas-item {
        padding: 12px 0;
    }

    .offcanvas-item .header-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px 24px;
    }

    /* ── Offcanvas Overlay ─────────────────────────────────────────────── */

    .mobile-offcanvas-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: rgba(0, 0, 0, 0.5);
        opacity: 0;
        visibility: hidden;
        z-index: 9998;
        transition: opacity 0.4s ease, visibility 0.4s ease;
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
    }

    .mobile-offcanvas-overlay.is-open {
        opacity: 1;
        visibility: visible;
    }

    /* Body scroll lock */
    body.offcanvas-open {
        overflow: hidden;
    }
}

/* ==========================================================================
   TABLET (768px – 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {

    /* Keep mobile menu on tablet */
    .header-row.device-desktop {
        display: none !important;
    }

    .header-mobile-wrapper {
        display: block !important;
    }

    /* Override flex display from style.css to prevent content collapse */
    .header-mobile-wrapper .header-row {
        display: block;
        padding: 0;
    }

    /* Larger container padding and full width */
    .header-mobile-wrapper .row-container,
    .builder-header .header-mobile-wrapper .row-container.container {
        padding: 0 32px;
        width: 100% !important;
        max-width: 100% !important;
        min-height: var(--anora-header-main-height, 70px);
    }

    /* Fix logo width capping: override flex: 1 limitations from style.css */
    .header-mobile-wrapper .zone-left {
        flex: 0 1 auto;
        min-width: 0;
    }

    .header-mobile-wrapper .zone-center {
        flex: 1;
    }

    .header-mobile-wrapper .zone-right {
        flex: 0 0 auto;
    }

    /* Tablet logo size from Customizer */
    .header-mobile-wrapper .site-branding {
        max-width: var(--anora-logo-width-tablet, 160px);
    }



    /* Wider offcanvas */
    .mobile-offcanvas-menu {
        max-width: 380px;
    }

    /* Force hamburger menu to show in tablet range where style.css drops it */
    .menu-toggle {
        display: block;
    }
}

/* ==========================================================================
   DESKTOP (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {

    /* Hide mobile header */
    .header-mobile-wrapper {
        display: none !important;
    }

    /* Show desktop header */
    .header-row.device-desktop {
        display: flex !important;
    }

    /* Ensure trigger is hidden */
    .menu-toggle {
        display: none !important;
    }

    /* Desktop header spacing */
    .site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }

    .header-row.row-main {
        padding: 16px 0;
    }

    .row-container {
        max-width: var(--anora-header-width, var(--content-wide, 1200px));
        margin: 0 auto;
        padding: 0 var(--space-lg, 1.5rem);
    }
}

/* ==========================================================================
   EXTRA SMALL (320px – 374px)
   ========================================================================== */

@media (max-width: 374px) {

    .header-mobile-wrapper .row-container {
        padding: 0 16px;
    }

    .header-mobile-wrapper .custom-logo {
        max-height: none !important;
    }

    .mobile-offcanvas-menu {
        width: 90%;
        max-width: 280px;
    }

    .offcanvas-content {
        padding: 0 20px 20px;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

.menu-toggle:focus-visible {
    outline: 2px solid var(--notion-accent, #2383e2);
    outline-offset: 2px;
}

.close-offcanvas:focus-visible {
    outline: 2px solid var(--notion-accent, #2383e2);
    outline-offset: 2px;
}

.offcanvas-content a:focus-visible,
.offcanvas-content button:focus-visible {
    outline: 2px solid var(--notion-accent, #2383e2);
    outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .mobile-offcanvas-menu,
    .mobile-offcanvas-overlay,
    .menu-toggle *,
    .submenu-toggle,
    .offcanvas-content a {
        transition: none !important;
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

body.dark-mode .mobile-offcanvas-menu {
    background: var(--notion-white);
    /* var already swapped by dark-mode in style.css */
}

body.dark-mode .offcanvas-header {
    background: var(--notion-white);
}

body.dark-mode .offcanvas-content li {
    border-color: var(--notion-gray-200);
}

body.dark-mode .close-offcanvas .dashicons,
body.dark-mode .menu-toggle .dashicons {
    color: var(--notion-black);
    /* --notion-black is #fff in dark mode */
}

/* Scrolled header shadow */
.site-header.is-scrolled {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}