/**
 * Jangro Storefront — frontend minor fixes (plain CSS).
 *
 * Source of truth remains:
 *   web/css/source/components/_homepage.less
 *   web/css/source/components/_navigation.less
 *   web/css/source/components/_content-pages.less
 *   web/css/source/components/_wall-charts.less
 *   web/css/source/components/_hero-slider.less
 *   web/css/source/components/_utility-bar.less
 *
 * Loaded after Magento compiled styles so DeployHQ version bumps still apply
 * these fixes when styles-m/l.css are stale.
 *
 * ZOO-888: postcode height, trade-account title, ntrl hover
 * ZOO-891: wall-charts search label, hero carousel aspect crop
 * ZOO-897: hero 4/1 aspect desktop-only (mobile overflow / CTA crop)
 * ZOO-914: hero slide stack — stop banner jump during fade
 * ZOO-956: homepage feedback — lime nav CTA, postcode width, news band, utility tag,
 *          account-band cards must stay inside the light-green container
 */

/* UAT-221: the category handle adds layered navigation after the custom page
   layout has merged. Contact pages must never render the Shop By block. */
.page-layout-contact-us .block.filter,
.page-layout-contact-us-cms .block.filter {
  display: none !important;
}

/* —— 1. Homepage distributor postcode input matches CTA height + width —— */
.jangro-distributor-panel__form {
  align-items: stretch;
  flex-direction: column;
}

.jangro-distributor-panel__form .control {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
}

.jangro-distributor-panel__form .input-text {
  box-sizing: border-box;
  flex: 1 1 auto;
  font-size: 16px;
  height: 48px;
  line-height: 1.25;
  min-height: 48px;
  padding: 0 0.8rem;
  width: 100%;
}

.jangro-distributor-panel__form .action.primary {
  align-items: center;
  box-sizing: border-box;
  display: inline-flex;
  font-size: 14px;
  height: 48px;
  justify-content: center;
  line-height: 1.25;
  min-height: 48px;
  padding: 0 24px;
  width: 100%;
}

/* —— 1b. ZOO-956: lime nav distributor CTA (white label) —— */
.navigation .level0.jangro-nav-item--cta > .level-top {
  background: #8dc63f !important;
  color: #fff !important;
}

.navigation .level0.jangro-nav-item--cta > .level-top:hover,
.navigation .level0.jangro-nav-item--cta > .level-top:focus,
.navigation .level0.jangro-nav-item--cta > .level-top:focus-visible {
  background: #76a832 !important;
  color: #fff !important;
}

/* —— 1c. ZOO-956: Latest News stays on white, not account-band tint —— */
.cms-index-index .jangro-band.latest-news {
  background: #fff;
}

/* —— 1d. ZOO-956: utility links right-aligned after Trade Account tag removal —— */
.jangro-utility {
  justify-content: flex-end;
}

.jangro-utility__tag {
  display: none !important;
}

/* —— 1e. ZOO-956: account-band cards must not overflow the light-green band ——
 * Blank theme is content-box; height:100% + padding made the trade/distributor
 * panels taller than the grid row and past the band background.
 */
.jangro-account-split > .jangro-trade-panel,
.jangro-account-split > .jangro-distributor-panel {
  box-sizing: border-box !important;
  height: auto !important;
  max-height: none;
  min-height: 0;
}

/* —— 2. Hide Magento H1 when CMS hero already provides the title —— */
.cms-page-view:has(.jangro-page-hero) .page-main > .page-title-wrapper {
  display: none !important;
}

/* —— 3. About Jangro ntrl promo: readable hover (override blank submenu a:hover) —— */
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo,
.navigation .level0 .submenu a.jangro-megamenu__promo {
  background: var(--jangro-green, #0a4d3c) !important;
  border: 1px solid transparent;
  color: var(--jangro-on-dark, #d5e4db) !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:hover,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:focus,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:focus-visible,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo.ui-state-focus,
.navigation .level0 .submenu a.jangro-megamenu__promo:hover,
.navigation .level0 .submenu a.jangro-megamenu__promo:focus,
.navigation .level0 .submenu a.jangro-megamenu__promo.ui-state-focus {
  background: var(--jangro-green-mid, #11614c) !important;
  border-color: var(--jangro-lime, #8dc63f) !important;
  box-shadow: 0 0 0 2px rgba(141, 198, 63, 0.35);
  color: var(--jangro-on-dark, #d5e4db) !important;
  text-decoration: none !important;
}

.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo .jangro-megamenu__promo-eyebrow,
.navigation .level0 .submenu a.jangro-megamenu__promo .jangro-megamenu__promo-eyebrow {
  color: var(--jangro-lime, #8dc63f) !important;
}

.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo .jangro-megamenu__promo-title,
.navigation .level0 .submenu a.jangro-megamenu__promo .jangro-megamenu__promo-title {
  color: var(--jangro-surface, #fff) !important;
}

.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo .jangro-megamenu__promo-meta,
.navigation .level0 .submenu a.jangro-megamenu__promo .jangro-megamenu__promo-meta {
  color: var(--jangro-on-dark-muted, #a8bfb2) !important;
}

.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:hover .jangro-megamenu__promo-meta,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:focus .jangro-megamenu__promo-meta,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo:focus-visible .jangro-megamenu__promo-meta,
.navigation .level0.jangro-megamenu--about .jangro-megamenu__promo.ui-state-focus .jangro-megamenu__promo-meta,
.navigation .level0 .submenu a.jangro-megamenu__promo:hover .jangro-megamenu__promo-meta,
.navigation .level0 .submenu a.jangro-megamenu__promo:focus .jangro-megamenu__promo-meta,
.navigation .level0 .submenu a.jangro-megamenu__promo.ui-state-focus .jangro-megamenu__promo-meta {
  color: var(--jangro-on-dark, #d5e4db) !important;
}

/* —— 4. Wall Charts toolbar: hide search label that was breaking flex layout —— */
.wall-charts__toolbar-inner { flex-wrap: wrap; }
.wall-charts__request-button { margin-left: auto; }
.wall-charts__request-button p { margin: 0; }
.wall-charts__toolbar-inner .wall-charts__filters { flex-basis: 100%; }
@media (max-width: 767px) {
  .wall-charts__request-button { margin-left: 0; width: 100%; }
}
.wall-charts__search .visually-hidden {
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

.wall-charts__search input {
  flex: 1 1 auto;
  min-width: 0;
}

.wall-charts__filters {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* —— 5. Homepage hero carousel (ZOO-914) ——
 * CMS split copy + media sizes the track from content (`aspect-ratio: auto`).
 * Inactive slides were `position: absolute` while `.is-active` was
 * `position: relative`, so the fading slide jumped from the content box into
 * the padded track (`inset: 0`). Stack every slide in one grid cell so only
 * opacity changes. Hide leftover CMS `<p>` comment nodes in the track.
 */
.jangro-hero-carousel__track {
  aspect-ratio: auto;
  display: grid;
}

.jangro-hero-carousel__track > p {
  display: none;
}

.jangro-hero-carousel__slide {
  grid-area: 1 / 1;
  inset: auto;
  position: relative;
  z-index: 0;
}

.jangro-hero-carousel__slide.is-active {
  position: relative;
  z-index: 1;
}