/* Header chrome — three rows, replacing Elementor template 30.
   Loaded globally from inc/enqueue.php. Design lives here, not in ACF fields. */

.contener-header { position: relative; z-index: 50; }

/* --- Row 1: utility bar ------------------------------------------------- */

.contener-utility {
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-size: .75rem;
  font-weight: 700;
}
.contener-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
}
.contener-utility a { color: currentColor; text-decoration: none; }
.contener-utility a:hover { color: var(--contener-accent); }

.contener-utility__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.contener-utility .contener-social { display: flex; gap: 6px; }

/* Live tiles each icon in its own brand colour at 32px with a 10% radius, so
   the markup carries a per-network modifier class. */
.contener-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 10%;
  background: rgb(0 0 0 / .18);
  color: var(--contener-text-invert);
  transition: opacity .15s var(--contener-ease);
}
.contener-social__link:hover { opacity: .82; color: var(--contener-text-invert); }
.contener-social__link--facebook  { background: #3b5998; }
.contener-social__link--x         { background: #000; }
.contener-social__link--instagram { background: #c13584; }
.contener-social__link--linkedin  { background: #0a66c2; }
.contener-social__link--youtube   { background: #f00; }

/* --- Row 2: logo, basket, call-back ------------------------------------- */

.contener-header__bar { background: var(--contener-card-bg); }

.contener-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--contener-header-height);
}

/* .custom-logo-link is WordPress's own anchor from the_custom_logo(); the theme
   class only appears in the no-logo fallback. Both are styled together. */
.contener-header__logo,
.contener-header__bar .custom-logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  font-weight: 700;
}
.contener-header__bar .custom-logo {
  max-height: 109px;
  width: auto;
  height: auto;
}

/* margin-left:auto lives on the actions, not on the nav. The nav is in its own
   row and disappears at the breakpoint; hanging the push off it would collapse
   the layout the moment the burger appears. */
.contener-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.contener-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--contener-brand-dark);
  text-decoration: none;
}
.contener-cart__count {
  position: absolute;
  top: -6px; right: -8px;
  min-width: 18px; height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-size: .7rem; font-weight: 600; line-height: 18px;
  text-align: center;
}

.contener-header__cta {
  background: var(--contener-brand);
  color: var(--contener-text-invert);
}
.contener-header__cta:hover { background: var(--contener-brand-dark); color: var(--contener-text-invert); }

/* --- Row 3: primary nav + phone ----------------------------------------- */

.contener-header__navrow {
  background: var(--contener-brand);
  color: var(--contener-text-invert);
}
.contener-header__navinner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 95px;
}

.contener-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}
.contener-nav__list a {
  display: block;
  padding: 13px 14px;
  color: var(--contener-text-invert);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
}
.contener-nav__list a:hover,
.contener-nav__list .current-menu-item > a { color: var(--contener-accent); }

.contener-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: .42em; height: .42em;
  margin: -.22em 0 0 .5em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  vertical-align: middle;
}

/* Dropdown.
   The items inherit the nav row's 20px, which is a nav-bar size, not a list
   size: in a 220px panel every one of the eight product categories wrapped onto
   two lines. They drop to 16px and go `nowrap`, so the panel sizes itself to the
   longest label ("Worktop Laboratory Waste Container") and every row is one
   line. It only ever renders above 1025px — below that the drawer takes over —
   so a ~310px panel hanging off the left-hand end of the nav cannot overflow. */
.contener-nav__list .sub-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 5;
  min-width: 240px;
  margin: 0;
  padding: 10px 0;
  list-style: none;
  background: var(--contener-brand-dark);
  border-radius: 0 0 var(--contener-radius) var(--contener-radius);
  box-shadow: 0 20px 44px rgba(2, 54, 103, .3);
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity   .16s var(--contener-ease),
    transform .16s var(--contener-ease),
    visibility 0s linear .16s;
}
.contener-nav__list li { position: relative; }
.contener-nav__list li:hover > .sub-menu,
.contener-nav__list li:focus-within > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.contener-nav__list .sub-menu a {
  padding: 10px 22px;
  font-size: 1rem;
  line-height: 1.35;
  white-space: nowrap;
  border-left: 3px solid transparent;
  transition:
    background-color .14s var(--contener-ease),
    border-color     .14s var(--contener-ease),
    color            .14s var(--contener-ease);
}
.contener-nav__list .sub-menu a:hover,
.contener-nav__list .sub-menu a:focus-visible,
.contener-nav__list .sub-menu .current-menu-item > a {
  background: rgba(255, 255, 255, .09);
  border-left-color: var(--contener-accent);
  color: var(--contener-accent);
}

/* The parent stays lit and its caret stays flipped while the panel is open —
   without this, moving the pointer off "Products" and down into the list makes
   the trigger look inactive above an open menu. */
.contener-nav__list .menu-item-has-children:hover > a,
.contener-nav__list .menu-item-has-children:focus-within > a { color: var(--contener-accent); }
.contener-nav__list .menu-item-has-children > a::after {
  transition: transform .16s var(--contener-ease);
}
.contener-nav__list .menu-item-has-children:hover > a::after,
.contener-nav__list .menu-item-has-children:focus-within > a::after {
  transform: rotate(-135deg);
  margin-top: .06em;
}

@media (prefers-reduced-motion: reduce) {
  .contener-nav__list .sub-menu,
  .contener-nav__list .sub-menu a,
  .contener-nav__list .menu-item-has-children > a::after { transition-duration: .01ms; }
  .contener-nav__list .sub-menu { transform: none; }
}

.contener-header__phone {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--contener-text-invert);
  text-decoration: none;
  white-space: nowrap;
}
.contener-header__phone:hover { color: var(--contener-accent); }
.contener-header__phone { gap: 10px; font-size: 1.5rem; }
.contener-header__phone-label  { font-weight: 400; }
.contener-header__phone-number { font-weight: 600; text-decoration: underline; }

/* --- Burger + drawer ---------------------------------------------------- */

.contener-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.contener-burger span {
  display: block;
  width: 26px; height: 2px;
  background: var(--contener-brand-dark);
  transition: transform .2s var(--contener-ease), opacity .2s var(--contener-ease);
}
.contener-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.contener-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.contener-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.contener-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  z-index: 60;
  width: min(320px, 86vw);
  padding: 88px 24px 32px;
  background: var(--contener-card-bg);
  box-shadow: -8px 0 32px rgb(0 0 0 / .12);
  transform: translateX(100%);
  transition: transform .25s var(--contener-ease);
  overflow-y: auto;
}
.contener-drawer.is-open { transform: translateX(0); }

.contener-drawer__phone {
  display: block;
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--contener-radius);
  background: var(--contener-brand);
  color: var(--contener-text-invert);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.contener-drawer__list { list-style: none; margin: 0; padding: 0; }
.contener-drawer__list li { border-bottom: 1px solid var(--contener-border); }
.contener-drawer__list a { display: block; padding: 14px 0; text-decoration: none; font-size: 1.05rem; color: var(--contener-heading); }
.contener-drawer__list .sub-menu { list-style: none; margin: 0; padding-left: 16px; }
.contener-drawer__list .sub-menu a { font-size: .95rem; color: var(--contener-text-muted); }
.contener-drawer__list--utility { margin-top: 20px; }
.contener-drawer__list--utility a { font-size: .9rem; color: var(--contener-text-muted); }

/* --- Breakpoints. lg = 1025, matching the Elementor kit. ---------------- */

@media (max-width: 1024px) {
  .contener-header__inner { min-height: 110px; }
  .contener-header__bar .custom-logo { max-height: 76px; }
  .contener-burger { display: flex; }
  .contener-header__navrow { display: none; }
  .contener-header__cta { display: none; }
}

@media (max-width: 767px) {
  .contener-utility__inner { justify-content: center; gap: 12px; }
  .contener-utility__nav { display: none; }
  .contener-header__bar .custom-logo { max-height: 48px; }
  .contener-header__inner { min-height: 84px; }
}