/* ==========================================================================
   HEADER — Eyebrow + Main Navigation Bar
   Ported from Midco.com navigation.css — exact design tokens & dimensions
   ========================================================================== */

/* ==========================================================================
   CSS Custom Properties (Design Tokens)
   ========================================================================== */

:root {
    /* Colors - Top Bar (Eyebrow) - Light Gray per Figma */
    --nav-eyebrow-bg: #f4f4f4;
    --nav-eyebrow-text: var(--color-text-body);
    --nav-eyebrow-text-muted: var(--color-text-body);
    --nav-eyebrow-link-hover: var(--color-primary);
    --nav-eyebrow-active-bg: #ffffff;
    /* Colors - Main Bar */
    --nav-main-bg: #ffffff;
    --nav-main-text: #000000;
    --nav-main-text-muted: #475467;
    --nav-main-link-hover: var(--color-primary);
    --nav-main-active: var(--color-primary);
    --nav-main-border: transparent;
    /* Colors - Dropdown */
    --nav-dropdown-bg: #ffffff;
    --nav-dropdown-text: #000000;
    --nav-dropdown-hover-bg: transparent;
    --nav-dropdown-hover-text: var(--color-primary);
    --nav-dropdown-border: transparent;
    --nav-dropdown-shadow: 0 5px 30px rgba(0, 0, 0, 0.15);
    --nav-dropdown-radius: 7px;
    /* Colors - Brand */
    --nav-color-primary: var(--color-primary);
    /* Spacing */
    --nav-spacing-xs: 0.25rem;
    --nav-spacing-sm: 0.5rem;
    --nav-spacing-md: 1rem;
    --nav-spacing-lg: 1.5rem;
    --nav-spacing-xl: 2rem;
    --nav-spacing-2xl: 3.5rem;
    /* Layout */
    --nav-max-width: 1440px;
    /* Typography */
    --nav-font-family: "Gotham", -apple-system, BlinkMacSystemFont, sans-serif;
    --nav-font-size-eyebrow: 0.8125rem; /* 13px */
    --nav-font-size-main: 1.0625rem; /* 17px */
    --nav-font-size-dropdown: 0.9375rem; /* 15px */
    --nav-font-weight-normal: 400;
    --nav-font-weight-medium: 500;
    --nav-font-weight-bold: 700;
    /* Layout - per Figma: eyebrow 55px, main 83px = 138px total */
    --nav-eyebrow-height: 3.4375rem;
    --nav-main-height: 5.1875rem;
    --nav-header-total: 8.625rem;
    --nav-dropdown-width: 14.5rem;
    /* Transitions */
    --nav-transition-fast: 150ms ease;
    --nav-transition-normal: 250ms ease;
    /* Z-index */
    --nav-z-header: 100;
    --nav-z-dropdown: 200;
}

/* ==========================================================================
   Header Container
   ========================================================================== */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--nav-z-header);
  font-family: var(--nav-font-family);
  background-color: var(--nav-main-bg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

body.has-fixed-header {
  padding-top: var(--nav-header-total);
}

/* ==========================================================================
   Top Bar (Eyebrow) - Light Gray Row
   ========================================================================== */

.nav-eyebrow {
  background-color: var(--nav-eyebrow-bg);
  height: var(--nav-eyebrow-height);
  display: flex;
  align-items: center;
}

.nav-eyebrow__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--nav-max-width);
  margin: 0 auto;
  padding: 0 4rem;
  height: 100%;
}

/* Eyebrow Logo */
.nav-eyebrow__logo {
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: var(--nav-spacing-lg);
  flex-shrink: 0;
}

.nav-eyebrow__logo img {
  height: 2rem;
  width: auto;
}

/* Eyebrow Left Container (Logo + Sectors) */
.nav-eyebrow__left {
  display: flex;
  align-items: center;
  height: 100%;
}

/* Sector Links (Left side: RESIDENTIAL, ADVERTISING, BUSINESS, etc.) */
.nav-eyebrow__sectors {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.nav-eyebrow__sectors > li {
  height: 100%;
}

.nav-eyebrow__sectors a {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 var(--nav-spacing-xl);
  color: var(--nav-eyebrow-text-muted);
  font-size: var(--nav-font-size-eyebrow);
  font-weight: var(--nav-font-weight-medium);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0px;
  transition:
    color var(--nav-transition-fast),
    background-color var(--nav-transition-fast);
}

.nav-eyebrow__sectors a:hover,
.nav-eyebrow__sectors a:focus {
  color: var(--nav-eyebrow-link-hover);
  text-decoration: none;
}

.nav-eyebrow__sectors > li.is-active {
  background-color: var(--nav-eyebrow-active-bg);
}

.nav-eyebrow__sectors > li.is-active a {
  color: var(--nav-eyebrow-text);
}

/* Utility Links (Right side: CONTACT, ACCOUNT dropdown) */
.nav-eyebrow__utils {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.nav-eyebrow__util {
  position: relative;
  height: 100%;
}

.nav-eyebrow__util-link {
  display: flex;
  align-items: center;
  gap: var(--nav-spacing-xs);
  height: 100%;
  padding: 0 var(--nav-spacing-lg);
  color: var(--nav-main-text-muted);
  font-size: var(--nav-font-size-eyebrow);
  font-weight: var(--nav-font-weight-medium);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--nav-font-family);
  transition: color var(--nav-transition-fast);
}

.nav-eyebrow__util-link:hover,
.nav-eyebrow__util-link:focus {
  color: var(--nav-eyebrow-link-hover);
  text-decoration: none;
}

/* Open state - cyan color */
.nav-eyebrow__util--open .nav-eyebrow__util-link {
  color: var(--nav-eyebrow-link-hover);
}

/* Dropdown arrow via CSS ::after */
.nav-eyebrow__util-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: var(--nav-spacing-xs);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid currentColor;
  transition: transform var(--nav-transition-fast);
}

.nav-eyebrow__util--open .nav-eyebrow__util-link::after {
  transform: rotate(180deg);
}

/* Account link - no dropdown arrow for plain link */
a.nav-eyebrow__util-link--account {
  text-transform: uppercase;
}
a.nav-eyebrow__util-link--account::after {
  display: none;
}

/* Utility link without dropdown arrow (e.g. Contact) */
a.nav-eyebrow__util-link {
  text-transform: uppercase;
}
a.nav-eyebrow__util-link::after {
  display: none;
}

/* Eyebrow Dropdown */
.nav-eyebrow__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  z-index: var(--nav-z-dropdown);
  min-width: var(--nav-dropdown-width);
  max-height: calc(100vh - var(--nav-eyebrow-height) - var(--nav-spacing-xl));
  overflow-y: auto;
  margin: 0;
  padding: var(--nav-spacing-md) 0;
  list-style: none;
  background-color: var(--nav-dropdown-bg);
  border-radius: var(--nav-dropdown-radius);
  box-shadow: var(--nav-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--nav-transition-normal),
    visibility var(--nav-transition-normal),
    transform var(--nav-transition-normal);

  /* Minimal scrollbar */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.nav-eyebrow__dropdown::-webkit-scrollbar {
  width: 6px;
}

.nav-eyebrow__dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.nav-eyebrow__dropdown::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

/* Blue border indicator at top of dropdown */
.nav-eyebrow__dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 3px;
  background-color: var(--nav-color-primary);
  border-radius: 3px 3px 0 0;
}

.nav-eyebrow__util--open .nav-eyebrow__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Primary Nav Section Link */
.nav-primary__dropdown-item--section-link {
  margin-top: var(--nav-spacing-sm);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: var(--nav-spacing-sm);
}

.nav-primary__dropdown-link--section-link {
  display: flex;
  align-items: center;
  gap: var(--nav-spacing-xs);
  color: var(--nav-dropdown-text);
  font-weight: 700;
  font-size: var(--nav-font-size-dropdown);
}

.nav-primary__dropdown-link--section-link::after {
  content: "";
  display: inline-block;
  width: 0.75rem;
  height: 0.75rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
  mask-size: contain;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  transition: transform var(--nav-transition-fast);
}

.nav-primary__dropdown-link--section-link:hover::after,
.nav-primary__dropdown-link--section-link:focus::after {
  transform: translateX(0.125rem);
}

.nav-primary__dropdown-link--section-link:hover,
.nav-primary__dropdown-link--section-link:focus {
  color: var(--nav-dropdown-hover-text);
  text-decoration: none;
}

.nav-primary__dropdown-link--section-link.is-active,
.nav-primary__dropdown-link--section-link[aria-current="page"] {
  color: var(--nav-color-primary);
}

/* ==========================================================================
   Main Bar - White Row with Logo and Primary Nav
   ========================================================================== */

.nav-main-bar {
  background-color: var(--nav-main-bg);
  height: var(--nav-main-height);
  display: flex;
  align-items: center;
}

.nav-main-bar__inner {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  width: 100%;
  max-width: var(--nav-max-width);
  margin: 0 auto;
  padding: 0 4rem;
  height: 100%;
}

/* Logo in Main Bar */
.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo img,
.nav-logo__image {
  height: 2.75rem;
  width: auto;
}

.nav-logo__text {
  font-size: var(--nav-font-size-main);
  font-weight: var(--nav-font-weight-bold);
  color: var(--nav-main-text);
}

/* Mobile Logo - icon + wordmark on left, visible only on mobile */
.nav-logo-mobile {
  display: none;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.nav-logo-mobile__icon {
  height: 2rem;
  width: auto;
}

.nav-logo-mobile__wordmark {
  height: 2rem;
  width: auto;
}

/* ==========================================================================
   Account Icon - Circle with user icon
   ========================================================================== */

.nav-account-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: #e0e0e0;
  flex-shrink: 0;
}

.nav-account-icon svg {
  width: 1.125rem;
  height: 1.125rem;
}

.nav-account-icon--active {
  background-color: var(--nav-color-primary);
  color: var(--color-white);
}

/* ==========================================================================
   Primary Navigation (Main Nav Items)
   ========================================================================== */

.nav-primary {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav-primary__list {
  display: flex;
  align-items: center;
  gap: var(--nav-spacing-2xl);
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

@media (max-width: 1440px) {
  .nav-primary__list {
    gap: clamp(1.25rem, 2vw, var(--nav-spacing-2xl));
  }
}

.nav-primary__item {
  position: relative;
  height: 100%;
}

.nav-primary__link {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  color: var(--nav-main-text);
  font-size: var(--nav-font-size-main);
  font-weight: var(--nav-font-weight-medium);
  font-family: var(--nav-font-family);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color var(--nav-transition-fast);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  white-space: nowrap;
}

.nav-primary__link:hover,
.nav-primary__link:focus {
  color: var(--nav-main-link-hover);
  text-decoration: none;
}

/* Active/Current page */
.nav-primary__item--active > .nav-primary__link,
.nav-primary__item--ancestor > .nav-primary__link {
  color: var(--nav-main-active);
}

/* Chevron indicator */
.nav-primary__chevron {
  transition: transform var(--nav-transition-fast);
  margin-left: var(--nav-spacing-xs);
}

.nav-primary__chevron svg {
  width: 1rem;
  height: 1rem;
}

.nav-primary__item--open .nav-primary__chevron {
  transform: rotate(180deg);
}

/* Primary Nav Dropdown */
.nav-primary__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-0.5rem);
  z-index: var(--nav-z-dropdown);
  min-width: var(--nav-dropdown-width);
  max-height: calc(100vh - var(--nav-header-total) - 2rem);
  overflow-y: auto;
  margin: 0;
  padding: var(--nav-spacing-md) 0;
  list-style: none;
  background-color: var(--nav-dropdown-bg);
  border-radius: var(--nav-dropdown-radius);
  box-shadow: var(--nav-dropdown-shadow);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--nav-transition-normal),
    visibility var(--nav-transition-normal),
    transform var(--nav-transition-normal);
}

.nav-primary__item--open > .nav-primary__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Blue border indicator at top of dropdown */
.nav-primary__dropdown::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 62px;
  height: 3px;
  background-color: var(--nav-color-primary);
  border-radius: 3px 3px 0 0;
}

.nav-primary__dropdown-link {
  display: flex;
  align-items: center;
  gap: var(--nav-spacing-md);
  padding: var(--nav-spacing-md) var(--nav-spacing-lg);
  color: var(--nav-dropdown-text);
  font-size: var(--nav-font-size-dropdown);
  font-weight: var(--nav-font-weight-normal);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--nav-transition-fast),
    background-color var(--nav-transition-fast);
}

.nav-primary__dropdown-link svg {
  width: 1rem;
  height: 1rem;
  color: var(--nav-main-text-muted);
}

.nav-primary__dropdown-link:hover,
.nav-primary__dropdown-link:focus {
  color: var(--nav-dropdown-hover-text);
  background-color: var(--nav-dropdown-hover-bg);
  text-decoration: none;
}

.nav-primary__dropdown-link.is-active,
.nav-primary__dropdown-link[aria-current="page"] {
  position: relative;
  color: var(--nav-color-primary);
}

.nav-primary__dropdown-link.is-active::before,
.nav-primary__dropdown-link[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 45%;
  background-color: var(--nav-color-primary);
}

.nav-primary__dropdown-divider {
  height: 0;
  margin: var(--nav-spacing-sm) 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* Nested dropdown within desktop dropdown */
.nav-primary__dropdown-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}

.nav-primary__dropdown-item-wrapper > .nav-primary__dropdown-link {
  flex: 1;
  min-width: 0;
}

.nav-primary__dropdown-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: currentColor;
  padding: 0;
  margin-right: var(--nav-spacing-md);
  opacity: 0.6;
  transition: opacity 0.15s;
}

.nav-primary__dropdown-toggle:hover {
  opacity: 1;
}

.nav-primary__dropdown-toggle::after {
  content: '+';
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  pointer-events: none;
}

.nav-primary__dropdown-item--expanded > .nav-primary__dropdown-item-wrapper > .nav-primary__dropdown-toggle::after {
  content: '\2212'; /* minus */
}

.nav-primary__nested-submenu {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0 0 var(--nav-spacing-sm) 0;
}

.nav-primary__dropdown-item--expanded > .nav-primary__nested-submenu {
  display: block;
}

.nav-primary__nested-submenu > li > .nav-primary__dropdown-link {
  font-size: 0.8125rem;
  padding-block: var(--nav-spacing-sm);
  padding-left: calc(var(--nav-spacing-lg) + 0.75rem);
  opacity: 0.85;
}

/* ==========================================================================
   Contact Us CTA (replaces search)
   ========================================================================== */

.nav-cta {
  flex-shrink: 0;
  margin-left: auto;
}

/* ==========================================================================
   Mobile Navigation Toggle (Hamburger with 3 bars)
   ========================================================================== */

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle__bar {
  display: block;
  width: 1.25rem;
  height: 2px;
  background-color: var(--color-black);
  border-radius: 1px;
  transition:
    transform var(--nav-transition-normal),
    opacity var(--nav-transition-normal);
}

.nav-toggle__bar + .nav-toggle__bar {
  margin-top: 0.25rem;
}

/* Hamburger to X animation */
.nav-toggle--active .nav-toggle__bar:nth-child(1) {
  transform: translateY(0.375rem) rotate(45deg);
}

.nav-toggle--active .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle--active .nav-toggle__bar:nth-child(3) {
  transform: translateY(-0.375rem) rotate(-45deg);
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

@media (max-width: 74.9375rem) {
  .nav-eyebrow {
    display: none;
  }

  .nav-primary {
    display: none;
  }

  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: flex;
    margin-left: auto;
  }

  .nav-logo {
    display: none;
  }

  .nav-logo-mobile {
    display: flex;
  }

  body.has-fixed-header {
    padding-top: 4.5rem; /* Mobile header height 72px */
  }

  .nav-main-bar {
    height: 4.5rem;
  }

  .nav-main-bar__inner {
    position: relative;
    padding: 0 var(--nav-spacing-2xl);
  }
}

/* Small screens */
@media (max-width: 35.9375rem) {
  .nav-main-bar__inner {
    padding: 0 var(--nav-spacing-xl);
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Remove default focus outline on click */
.nav-primary__link:focus,
.nav-eyebrow__util-link:focus,
.nav-eyebrow__sectors a:focus,
.nav-primary__dropdown-link:focus,
.nav-toggle:focus {
  outline: none;
}

/* Show focus ring only for keyboard navigation */
.nav-primary__link:focus-visible,
.nav-eyebrow__util-link:focus-visible,
.nav-eyebrow__sectors a:focus-visible,
.nav-primary__dropdown-link:focus-visible,
.nav-toggle:focus-visible {
  outline: 2px solid var(--nav-color-primary);
  outline-offset: -2px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .nav-primary__dropdown,
  .nav-eyebrow__dropdown,
  .nav-toggle__bar,
  .nav-primary__chevron {
    transition: none;
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .site-header {
    display: none !important;
  }

  body.has-fixed-header {
    padding-top: 0;
  }
}