/* Dark theme */
.theme-dark .header-components-search__form,
html.dark .header-components-search__form,
body.dark-theme .header-components-search__form {
    background: rgba(30, 30, 30, 0.9);
}


.theme-dark .header-components-search__input,
html.dark .header-components-search__input,
body.dark-theme .header-components-search__input {
    color: #eee;
}

/* ============================================================
 * Layer 3: Icon cards — 1:1 zibll header-slider-card
 * DOM: .header-slider-card.container > (.zib-widget.padding-10|div)
 *        > .flex.jse.flex-row.gutters-5.flex-col-sm-2
 *          > (.flex1|.relative-h) > [.main-color >] .icon-cover-card.flex.ac.(zib-widget|padding-10)
 *
 * IMPORTANT: gutters/flex helpers must live here (not only zibll-utilities.css).
 * zibll-utilities was single-post-only, so homepage cards stuck together while
 * other pages that load utilities showed 10px gaps — exact user screenshot bug.
 * ============================================================ */

/* Self-contained zibll flex + gutters for header cards (page-type independent) */
.header-slider-card .flex,
.header-components-card .flex {
    display: flex;
}
.header-slider-card .flex.jse,
.header-components-card .flex.jse,
.header-slider-card .jse,
.header-components-card .jse {
    justify-content: space-evenly;
}
.header-slider-card .flex-row,
.header-components-card .flex-row {
    flex-direction: row;
}
.header-slider-card .flex.ac,
.header-components-card .flex.ac,
.header-slider-card .ac,
.header-components-card .ac {
    align-items: center;
}
/* zibll: .gutters-5 { margin:-5px } > * { padding:5px } → 10px visual gap.
 * Use both gutters model AND flex gap so homepage (which used to miss
 * zibll-utilities) and any future cascade zero-padding still show seams. */
.header-slider-card .gutters-5,
.header-components-card .gutters-5,
.header-slider-card .flex.jse.flex-row,
.header-components-card .flex.jse.flex-row {
    margin: -5px;
    gap: 0; /* spacing comes from child padding to match zibll exactly */
}
.header-slider-card .gutters-5 > *,
.header-components-card .gutters-5 > *,
.header-slider-card .flex.jse.flex-row > *,
.header-components-card .flex.jse.flex-row > * {
    padding: 5px !important;
    box-sizing: border-box;
}
.header-slider-card .flex1,
.header-components-card .flex1,
.header-slider-card .flex .flex1,
.header-components-card .flex .flex1 {
    flex: 1 1 0;
    overflow: hidden;
    min-width: 0;
}
.header-slider-card .relative-h,
.header-components-card .relative-h {
    position: relative;
    height: 100%;
}

.header-slider-card,
.header-components-card {
    position: relative;
    margin-top: -40px;
    z-index: 1;
    /* Sit in normal flow after the slide shell; container is full-bleed */
    width: 100%;
}

/* Ensure .container max-width + horizontal padding match site main (zibll .container) */
.header-slider-card.container,
.header-components-card.container {
    width: 100%;
    max-width: var(--container, var(--mian-max-width, 1200px));
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.header-slider-card .zib-widget,
.header-components-card .zib-widget {
    margin-bottom: 0;
}

/* zibll filter-blur glass on card surfaces + search form */
.filter-blur .header-slider-search .line-form,
.filter-blur .header-components-search .line-form,
.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
}

.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
}

.theme-dark .filter-blur .header-slider-card .zib-widget,
html.dark .filter-blur .header-slider-card .zib-widget,
body.dark-theme .filter-blur .header-slider-card .zib-widget,
.theme-dark .filter-blur .header-components-card .zib-widget,
html.dark .filter-blur .header-components-card .zib-widget,
body.dark-theme .filter-blur .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
}

/* Device-split blur (AKSRT extension of zibll filter-blur) */
@media (min-width: 768px) {
  .has-blur-pc .header-slider-card .zib-widget,
  .has-blur-pc .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
  }
  .has-blur-pc .header-components-search .line-form,
  .has-blur-pc .header-slider-search .line-form {
    background: rgba(255, 255, 255, 0.75);
  }
  .theme-dark .has-blur-pc .header-slider-card .zib-widget,
  html.dark .has-blur-pc .header-slider-card .zib-widget,
  .theme-dark .has-blur-pc .header-components-card .zib-widget,
  html.dark .has-blur-pc .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
  }
}
@media (max-width: 767px) {
  .has-blur-mobile .header-slider-card .zib-widget,
  .has-blur-mobile .header-components-card .zib-widget {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px);
    background: var(--blur-bg, rgba(255, 255, 255, 0.75));
  }
  .has-blur-mobile .header-components-search .line-form,
  .has-blur-mobile .header-slider-search .line-form {
    background: rgba(255, 255, 255, 0.75);
  }
  .theme-dark .has-blur-mobile .header-slider-card .zib-widget,
  html.dark .has-blur-mobile .header-slider-card .zib-widget,
  .theme-dark .has-blur-mobile .header-components-card .zib-widget,
  html.dark .has-blur-mobile .header-components-card .zib-widget {
    background: var(--blur-bg, rgba(30, 30, 30, 0.75));
  }

  .header-slider-card .icon-cover-card.zib-widget {
    padding: 10px;
  }
  .header-slider-card .icon-cover-card.padding-10 {
    padding: 2px;
  }
  .header-slider-card,
  .header-components-card {
    margin-top: -35px;
  }
}