/*!
Theme Name: Blocksy Child / Custom
Description: Dot Kacter Dev. Custom Styles and Dropdown Fixes
*/

/* Ensure parent containers allow dropdowns to overflow on desktop */
@media (min-width: 1000px) {
  header,
  #header,
  .ct-header,
  .ct-sticky-container,
  header [data-device="desktop"],
  header [data-row],
  header [data-column],
  header [data-items],
  nav.menu-container,
  nav.header-menu-1,
  nav.header-menu-2,
  ul#menu-application,
  ul#menu-main-menu {
    overflow: visible !important;
  }

  .menu-item-has-children,
  [class*="animated-submenu"] {
    position: relative !important;
  }

  /* Sub-menu base positioning & exact native appearance from kacter.cc */
  nav.header-menu-2 .sub-menu,
  header .menu-item-has-children > .sub-menu,
  header [class*="animated-submenu"] > .sub-menu {
    display: block !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: auto !important;
    z-index: 9999 !important;
    width: 200px !important;
    min-width: 200px !important;
    background-color: #192a3d !important;
    box-shadow: 0px 10px 20px rgba(41, 51, 61, 0.1) !important;
    border-radius: 0px 0px 2px 2px !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate3d(0, 10px, 0);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  }

  /* Show dropdown on hover, focus-within, or when .ct-active is present */
  header .menu-item-has-children:hover > .sub-menu,
  header .menu-item-has-children:focus-within > .sub-menu,
  header .menu-item-has-children.ct-active > .sub-menu,
  header [class*="animated-submenu"]:hover > .sub-menu,
  header [class*="animated-submenu"]:focus-within > .sub-menu,
  header [class*="animated-submenu"].ct-active > .sub-menu,
  header [data-responsive] .menu-item-has-children:hover > .sub-menu,
  header [data-responsive] .menu-item-has-children:focus-within > .sub-menu,
  header [data-responsive] .menu-item-has-children.ct-active > .sub-menu {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(0, 0, 0) !important;
  }

  /* Submenu list items */
  nav.header-menu-2 .sub-menu li,
  header .sub-menu li {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    transform: none !important;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.1) !important;
  }

  nav.header-menu-2 .sub-menu li:last-child,
  header .sub-menu li:last-child {
    border-bottom: none !important;
  }

  nav.header-menu-2 .sub-menu li a.ct-menu-link,
  header .sub-menu li a.ct-menu-link {
    display: block !important;
    padding: 16px 24px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s ease, color 0.15s ease !important;
  }

  nav.header-menu-2 .sub-menu li a.ct-menu-link:hover,
  header .sub-menu li a.ct-menu-link:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #2872fa !important;
  }

  /* Rotate chevron arrow on active/hover */
  header .menu-item-has-children:hover > .ct-menu-link .ct-toggle-dropdown-desktop svg,
  header .menu-item-has-children.ct-active > .ct-menu-link .ct-toggle-dropdown-desktop svg {
    transform: rotate(180deg) !important;
  }

  .ct-toggle-dropdown-desktop svg {
    transition: transform 0.2s ease !important;
  }
}

/* ==========================================================================
   Mobile Navigation Drawer & Accordion Submenus
   ========================================================================== */
.mobile-menu .menu-item-has-children.dropdown-active > ul.sub-menu {
  display: block !important;
}

.mobile-menu .menu-item-has-children:not(.dropdown-active) > ul.sub-menu {
  display: none !important;
}

.mobile-menu .ct-toggle-dropdown-mobile {
  cursor: pointer;
}

.mobile-menu .ct-toggle-dropdown-mobile svg {
  transition: transform 0.2s ease;
}

.mobile-menu .dropdown-active > .ct-sub-menu-parent .ct-toggle-dropdown-mobile svg {
  transform: rotate(-180deg) !important;
}

/* ==========================================================================
   Tablet & Mobile Content Refinements (<= 999.98px)
   ========================================================================== */
@media (min-width: 690px) and (max-width: 999.98px) {
  /* Prevent 100px desktop side margins from shrinking feature images on tablets */
  .stk-05d67d3,
  .stk-7487d13,
  .stk-fdf8f6f,
  .stk-bace9ba {
    margin-left: 24px !important;
    margin-right: 24px !important;
  }
}

@media (max-width: 689.98px) {
  /* Ensure all 4 home feature cards consistently stack Image on top -> Text & Button below */
  .stk-block-feature.stk-ed2f55a > .stk-container > .stk-inner-blocks.stk-block-content,
  .stk-block-feature.stk-886bb98 > .stk-container > .stk-inner-blocks.stk-block-content {
    flex-direction: column !important;
  }

  .stk-block-feature.stk-052a7be > .stk-container > .stk-inner-blocks.stk-block-content,
  .stk-block-feature.stk-5d0550c > .stk-container > .stk-inner-blocks.stk-block-content {
    flex-direction: column-reverse !important;
  }

  /* Add comfortable spacing between stacked image and heading inside each feature block */
  .stk-block-feature .stk-block-image {
    margin-bottom: 20px !important;
  }

  .stk-block-feature {
    margin-bottom: 64px !important;
  }

  /* Allow multi-button groups (e.g. DevMQTT) to wrap cleanly on narrow mobile screens */
  .stk-button-group {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }

  /* Stack WordPress core columns on mobile (e.g. DevMQTT Delete Account page) so images are not cropped */
  .wp-block-columns:not(.is-not-stacked-on-mobile) {
    flex-wrap: wrap !important;
  }

  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }
}