/* ==============================================================
   TEKY / Weideng v6 — true sticky catalogue sidebar + light
   scrolled header state
   ============================================================== */

/* The original Gutenberg wrapper used overflow:hidden. That creates
   an overflow ancestor and prevents CSS position:sticky from tracking
   the viewport reliably. Keep horizontal clipping on the page itself,
   but let the site-block wrapper remain vertically visible. */
html,
body {
  overflow-x: clip;
}
.wp-site-blocks {
  overflow: visible !important;
}

/* --------------------------------------------------------------
   1) Product collection: compact sidebar that really follows scroll.
-------------------------------------------------------------- */
@media (min-width: 1025px) {
  .wp-block-columns.catalog-layout.classic-catalog {
    align-items: flex-start !important;
    overflow: visible !important;
  }

  .catalog-layout.classic-catalog > .catalog-sidebar.wp-block-column,
  .catalog-sidebar.wp-block-column {
    position: sticky !important;
    position: -webkit-sticky !important;
    top: 112px !important;
    align-self: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 132px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 20 !important;
  }

  /* Keep the sidebar's own white card compact instead of stretching. */
  .catalog-sidebar > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* Tablet/mobile keeps a normal block so it does not consume the screen. */
@media (max-width: 1024px) {
  .catalog-layout.classic-catalog > .catalog-sidebar.wp-block-column,
  .catalog-sidebar.wp-block-column {
    position: static !important;
    top: auto !important;
    max-height: none !important;
    overflow: visible !important;
    z-index: auto !important;
  }
}

/* --------------------------------------------------------------
   2) Header: black at top, pale blue with heavy black text on scroll.
-------------------------------------------------------------- */
.site-header .header-inner {
  transition:
    background-color .28s ease,
    color .28s ease,
    box-shadow .28s ease,
    border-color .28s ease !important;
}

.site-header.is-scrolled .header-inner {
  background: rgba(222, 243, 249, .97) !important;
  color: #050708 !important;
  box-shadow: 0 12px 34px rgba(30, 78, 92, .16) !important;
  border-color: rgba(5, 7, 8, .06) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
}

.site-header.is-scrolled .wp-block-navigation-item__content,
.site-header.is-scrolled .wp-block-navigation-item__label,
.site-header.is-scrolled .header-blog a,
.site-header.is-scrolled .language-switcher,
.site-header.is-scrolled .language-switcher summary,
.site-header.is-scrolled .wordmark a {
  color: #050708 !important;
  font-weight: 900 !important;
}

.site-header.is-scrolled .wordmark a {
  color: #16343d !important;
}

.site-header.is-scrolled .wp-block-navigation__submenu-icon {
  color: #079d9b !important;
}

/* The contact pill remains clearly separated on the pale header. */
.site-header.is-scrolled .pill-button .wp-block-button__link,
.site-header.is-scrolled .wp-block-button.pill-button .wp-block-button__link {
  color: #050708 !important;
  background: #fff !important;
  border-color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 0 16px rgba(22, 226, 223, .48) !important;
}

/* Desktop dropdown stays dark for contrast even when the bar is pale. */
@media (min-width: 783px) {
  .site-header.is-scrolled .wp-block-navigation .has-child .wp-block-navigation__submenu-container {
    background: #090c0d !important;
  }
  .site-header.is-scrolled .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content,
  .site-header.is-scrolled .wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__label {
    color: rgba(255,255,255,.92) !important;
    font-weight: 800 !important;
  }
}

/* Mobile menu button must remain visible after the header becomes light. */
@media (max-width: 782px) {
  .site-header.is-scrolled .wp-block-navigation__responsive-container-open,
  .site-header.is-scrolled .wp-block-navigation__responsive-container-open svg {
    color: #050708 !important;
    fill: currentColor !important;
  }
}