/* ==========================================================================
   MODULE: HEADER RESPONSIVE BEHAVIOR
   ========================================================================== */

/* --------------------------------------------------------------------------
   DOCUMENTATION
   --------------------------------------------------------------------------
   
   Class: .is-nav-drawer-only
   Usage: Add to Navigation Link blocks (Cart, Account, etc.).
   Logic: 
   1. Hidden by default (Desktop/Closed Menu).
   2. Visible ONLY when the parent container has .is-menu-open (Mobile/Drawer).

   -------------------------------------------------------------------------- */


/* ==========================================================================
   FEATURE A: NAVIGATION-ONLY ELEMENTS
   ========================================================================== */

/**
 * 1. GLOBAL RESET (Hide Everywhere)
 * We use 'body' to increase specificity (0-1-1) to beat standard block styles.
 */
body .is-nav-drawer-only {
    display: none !important;
}

/**
 * 2. CONTEXTUAL VISIBILITY (Show in Drawer)
 * 
 * Target: Elements inside the responsive container, BUT ONLY when
 * the container has the '.is-menu-open' class. 
 * This prevents the element from showing if the container exists 
 * but is in "bar" (desktop) mode.
 */
.wp-block-navigation__responsive-container.is-menu-open .is-nav-drawer-only {
    display: block !important;
}

/* 
 * Flex Fix:
 * If the element is a list item (li), 'display: block' breaks the layout 
 * (icon alignment). We force it back to flex.
 */
.wp-block-navigation__responsive-container.is-menu-open ul.wp-block-navigation__container>li.is-nav-drawer-only {
    display: flex !important;
    align-items: center;
}


/* ==========================================================================
   FEATURE B: RESPONSIVE HEADER PADDING
   ========================================================================== */

/**
 * Overrides the inline styles (25% padding) injected by the Block Editor.
 */

/* Small Desktop */
@media screen and (max-width: 1536px) {
    .wp-block-group.wc-blocks-header-pattern {
        padding-right: 20% !important;
        padding-left: 20% !important;
    }
}

/* Narrow Desktop */
@media screen and (max-width: 1280px) {
    .wp-block-group.wc-blocks-header-pattern {
        padding-right: 10% !important;
        padding-left: 10% !important;
    }
}

/* Tablet / Narrower Desktop (Below 1024px) */
@media screen and (max-width: 1024px) {
    .wp-block-group.wc-blocks-header-pattern {
        padding-right: 10% !important;
        padding-left: 10% !important;
    }
}

/* Mobile / Small Tablet (Below 782px) */
@media screen and (max-width: 782px) {
    .wp-block-group.wc-blocks-header-pattern {
        padding-right: 2rem !important;
        padding-left: 2rem !important;
        /* Safe vertical spacing */
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}

/* Fully Mobile (Below 480px) */
@media screen and (max-width: 480px) {
    .wp-block-group.wc-blocks-header-pattern {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
    }
}