/**
 * GaveGlade mobile layout fixes
 * 1) Frontpage kutchara tabs: pills on banner, text clear below
 * 2) Product carousels: cards keep readable width (no 1-letter wrap)
 * 3) Mega menus: stack columns on mobile; left-align nested navs
 */

/* --- Mega: kill inherited center + force left nested navs --- */
.wp-block-kutchara-mega-menu__menu-container.menu-justified-center,
.wp-block-kutchara-mega-menu__menu-container.menu-justified-left {
  /* positioning handled below on mobile */
}

.wp-block-kutchara-mega-menu__menu-container .wp-block-navigation,
.wp-block-kutchara-mega-menu__menu-container .wp-block-navigation .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation__container {
  --navigation-layout-justify: flex-start !important;
  --navigation-layout-align: flex-start !important;
  --navigation-layout-justification-setting: left !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  text-align: left !important;
  padding-left: 0 !important;
  padding-inline-start: 0 !important;
  margin-left: 0 !important;
  margin-inline: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

.wp-block-kutchara-mega-menu__menu-container ul.wp-block-navigation__container {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.wp-block-kutchara-mega-menu__menu-container .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation-item__content {
  justify-content: flex-start !important;
  text-align: left !important;
  margin-inline: 0 !important;
  padding-inline-start: 0 !important;
}

@media (max-width: 781px) {
  /* CRITICAL: WP global style sets flex-wrap:nowrap on columns — keep mega stacked */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-columns,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-columns.is-layout-flex,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container [class*="wp-container-core-columns"],
  .wp-block-kutchara-mega-menu__menu-container .wp-block-columns,
  .wp-block-kutchara-mega-menu__menu-container .wp-block-columns.is-layout-flex {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 1.25rem !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-columns > .wp-block-column,
  .wp-block-kutchara-mega-menu__menu-container .wp-block-columns > .wp-block-column {
    flex-basis: 100% !important;
    flex-grow: 0 !important;
    flex-shrink: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Cover full width on top */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-columns > .wp-block-column:has(> .wp-block-cover),
  .wp-block-kutchara-mega-menu__menu-container .wp-block-columns > .wp-block-column:has(> .wp-block-cover) {
    order: -1 !important;
  }

  /* Open mega panel: no JS center offset, full bleed content */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container > .wp-block-group {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-heading {
    text-align: left !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* --- Frontpage tabs --- */
@media (max-width: 767px) {
  .wp-block-kutchara-tabs {
    position: relative;
    gap: 0 !important;
  }

  .wp-block-kutchara-tabs .wp-block-kutchara-tabs__header-container {
    position: absolute;
    top: 0.75rem;
    left: 0;
    right: 0;
    z-index: 5;
    width: 100% !important;
    max-width: 100% !important;
    padding-inline: 0.75rem;
    box-sizing: border-box;
    pointer-events: none;
  }

  .wp-block-kutchara-tabs .wp-block-kutchara-tabs__header-row {
    transform: none !important;
    pointer-events: auto;
  }

  .wp-block-kutchara-tabs .wp-block-kutchara-tabs__tablist {
    justify-content: center;
    flex-wrap: nowrap;
    gap: 0.4rem !important;
  }

  .wp-block-kutchara-tabs .wp-block-kutchara-tabs__tab-trigger {
    padding: 8px 14px !important;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .wp-block-kutchara-tabs .wp-block-cover {
    min-height: 52vh !important;
    padding-top: 4.5rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
    padding-bottom: 1.75rem !important;
  }

  .wp-block-kutchara-tabs .wp-block-cover__inner-container {
    padding-inline: 0.25rem !important;
  }
}

/* --- Product carousels --- */
@media (max-width: 781px) {
  .is-product-collection-layout-carousel .wc-block-product-template.is-flex-container,
  .is-product-collection-layout-carousel .wc-block-product-template,
  .wp-block-woocommerce-product-collection.is-product-collection-layout-carousel .wc-block-product-template {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 1rem !important;
  }

  .is-product-collection-layout-carousel .wc-block-product-template > li,
  .is-product-collection-layout-carousel .wc-block-product-template.is-flex-container > li,
  .wp-block-woocommerce-product-collection.is-product-collection-layout-carousel .wc-block-product-template > li {
    flex: 0 0 auto !important;
    width: min(68vw, 220px) !important;
    min-width: 160px !important;
    max-width: 220px !important;
  }

  .is-product-collection-layout-carousel .wp-block-post-title,
  .is-product-collection-layout-carousel .wp-block-post-title a {
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: normal !important;
    writing-mode: horizontal-tb !important;
  }
}

/* Nuclear mega mobile: force stack + zero indent on nested navs */
@media (max-width: 781px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-columns.is-layout-flex,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-container-core-columns-is-layout-f56f613f,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container [class*="wp-container-core-columns-is-layout"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 1.25rem !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-column.is-layout-flow,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-column {
    width: 100% !important;
    max-width: 100% !important;
    flex-basis: 100% !important;
  }

  /* Kill any leftover indent on nested vertical nav (ul often keeps browser/theme pad) */
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation ul,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container ul.wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container li.wp-block-navigation-item,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container a.wp-block-navigation-item__content,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container span.wp-block-navigation-item__label {
    margin: 0 !important;
    margin-inline: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-inline: 0 !important;
    padding-inline-start: 0 !important;
    padding-inline-end: 0 !important;
    text-indent: 0 !important;
    left: 0 !important;
    inset-inline-start: 0 !important;
    transform: none !important;
    text-align: left !important;
  }

  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container ul.wp-block-navigation__container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Carousel cards a bit wider */
  .is-product-collection-layout-carousel .wc-block-product-template > li,
  .is-product-collection-layout-carousel .wc-block-product-template.is-flex-container > li {
    width: min(72vw, 240px) !important;
    min-width: 180px !important;
    max-width: 240px !important;
  }
}
/* GaveGlade mega: nested navs inherit align-items:center from top nav — force start */
.wp-block-kutchara-mega-menu__menu-container,
.wp-block-kutchara-mega-menu__menu-container * {
  --navigation-layout-align: flex-start !important;
  --navigation-layout-justify: flex-start !important;
  --navigation-layout-justification-setting: flex-start !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation.is-layout-flex,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container ul.wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container [class*="wp-container-core-navigation"],
.wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation,
.wp-block-kutchara-mega-menu__menu-container nav.wp-block-navigation.is-layout-flex,
.wp-block-kutchara-mega-menu__menu-container ul.wp-block-navigation__container,
.wp-block-kutchara-mega-menu__menu-container [class*="wp-container-core-navigation"] {
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  justify-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  text-align: left !important;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container li.wp-block-navigation-item,
.wp-block-kutchara-mega-menu__menu-container li.wp-block-navigation-item {
  align-self: flex-start !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Beat core: open overlay sets align-items: var(--navigation-layout-justification-setting) on ALL containers */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation__container,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-kutchara-mega-menu__menu-container .wp-block-navigation-item {
  --navigation-layout-justification-setting: flex-start !important;
  --navigation-layout-align: flex-start !important;
  --navigation-layout-justify: flex-start !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
}