/* Header chrome. Enqueued globally from inc/enqueue.php. */

/* The live Kadence header is NOT sticky and has no bottom border — it is a
   plain white band as tall as the logo. Keep it that way; the ticket asked for
   like-for-like, and a sticky header on a 171px band eats a phone screen. */
.ehlelectrical-header {
  position: relative;
  z-index: 100;
  background: #ffffff;
}

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

/* The logo's anchor comes from the_custom_logo(), so style the image itself
   rather than assuming a wrapper we control. 200px wide is the live size. */
.ehlelectrical-header__logo { display: flex; align-items: center; }
.ehlelectrical-header__logo a { display: block; text-decoration: none; font-weight: 700; }
.ehlelectrical-header__logo a:focus-visible {
  outline: 3px solid var(--ehlelectrical-brand-dark);
  outline-offset: 4px;
}
.ehlelectrical-header__logo img { width: 200px; height: auto; max-height: 171px; }

@media (max-width: 767px) {
  .ehlelectrical-header__logo img { width: 140px; }
}

/* margin-left:auto on the nav pushes nav + actions to the right. */
.ehlelectrical-nav { margin-left: auto; }

.ehlelectrical-nav__list {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Nav links — the "nicer hover" the ticket asked for.
   An underline grows from the left on hover and stays put on the current page,
   the colour shifts to brand blue, and the whole thing is keyboard-visible.
   The underline is a pseudo-element rather than text-decoration so it can be
   animated and so it sits clear of the descenders. */
.ehlelectrical-nav__list a {
  position: relative;
  display: block;
  padding: 10px 2px;
  text-decoration: none;
  font-size: 17px;
  font-weight: 400;
  color: #1a202c;
  cursor: pointer;
  transition: color .25s var(--ehlelectrical-ease);
}
.ehlelectrical-nav__list a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--ehlelectrical-brand);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .25s var(--ehlelectrical-ease);
}
.ehlelectrical-nav__list a:hover,
.ehlelectrical-nav__list a:focus-visible,
.ehlelectrical-nav__list .current-menu-item > a { color: var(--ehlelectrical-brand); }

.ehlelectrical-nav__list a:hover::after,
.ehlelectrical-nav__list a:focus-visible::after,
.ehlelectrical-nav__list .current-menu-item > a::after { transform: scaleX(1); }

.ehlelectrical-nav__list a:focus-visible {
  outline: 3px solid var(--ehlelectrical-brand-dark);
  outline-offset: 4px;
  border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .ehlelectrical-nav__list a,
  .ehlelectrical-nav__list a::after { transition: none; }
}

.ehlelectrical-header__actions { display: flex; align-items: center; gap: 12px; }

/* Burger — hidden on desktop. */
.ehlelectrical-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
}
.ehlelectrical-burger span {
  display: block;
  height: 2px;
  width: 24px;
  margin-inline: auto;
  background: var(--ehlelectrical-text);
  transition: transform .25s var(--ehlelectrical-ease), opacity .25s var(--ehlelectrical-ease);
}
.ehlelectrical-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ehlelectrical-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ehlelectrical-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas drawer, slides in from the right. */
.ehlelectrical-drawer {
  position: fixed;
  inset: var(--ehlelectrical-header-height) 0 0 auto;
  width: min(360px, 86vw);
  z-index: 99;
  background: var(--ehlelectrical-card-bg);
  border-left: 1px solid var(--ehlelectrical-border);
  padding: 32px 28px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .3s var(--ehlelectrical-ease);
}
.ehlelectrical-drawer.is-open { transform: translateX(0); }

.ehlelectrical-drawer__list { list-style: none; margin: 0; padding: 0; text-align: right; }
.ehlelectrical-drawer__list li { border-bottom: 1px solid var(--ehlelectrical-border); }
.ehlelectrical-drawer__list a { display: block; padding: 14px 0; text-decoration: none; font-size: 1.05rem; }
.ehlelectrical-drawer__list .sub-menu { list-style: none; margin: 0; padding-right: 16px; }
.ehlelectrical-drawer__list .sub-menu a { font-size: .95rem; color: var(--ehlelectrical-text-muted); }

@media (max-width: 992px) {
  .ehlelectrical-nav,
  .ehlelectrical-header__cta { display: none; }
  .ehlelectrical-burger { display: flex; }

  /* The nav carried margin-left:auto; hiding it would collapse the burger back
     next to the logo. Re-assert the push on the actions container. */
  .ehlelectrical-header__actions { margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .ehlelectrical-drawer, .ehlelectrical-burger span { transition: none; }
}