/* Site Navigation Wrapper */
.site-navigation-wrapper {
  position: relative;
  max-width: 1400px;
  margin: 1rem auto;
  width: 100%;
}

/* Add responsive margins for smaller screens (before mobile breakpoint) */
@media (max-width: 1399px) and (min-width: 1081px) {
  .site-navigation-wrapper {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .top-support-links {
    right: calc(1rem + 2rem); /* Wrapper padding + navigation padding */
  }
  
  .site-navigation {
    width: 100%;
  }
  
  .search-section {
    right: calc(1rem + 2rem); /* Account for wrapper padding + navigation padding */
  }
}

/* Top Support Links Container */
.top-support-links {
  position: absolute;
  top: -1.5rem;
  right: 2rem; /* Match navigation padding */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
  z-index: 10;
}

/* Help Center Link */
.help-center-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.help-center-link:hover {
  color: #0073aa;
  text-decoration: none;
}

/* Support Link (Bill Tracking) */
.top-support-links .support-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.75rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.top-support-links .support-link:hover {
  color: #0073aa;
  text-decoration: none;
}

/* White color for both links on pages with page-header-background (non-front pages) */
.page-header-background .top-support-links .support-link,
.page-header-background .top-support-links .help-center-link {
  color: var(--color-white);
}
.page-header-background .top-support-links .support-link:hover,
.page-header-background .top-support-links .help-center-link:hover {
  color: var(--color-white);
  opacity: 0.8;
}

/* Site Navigation Container */
.site-navigation {
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-radius: var(--border-radius-medium);
  height: 100px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 2rem;
  position: relative;
  box-sizing: border-box;
  width: 100%;
}

/* Ensure logo stays centered by using CSS Grid's auto placement */
.site-navigation::before {
  content: '';
  grid-column: 1;
  grid-row: 1;
}

.site-navigation::after {
  content: '';
  grid-column: 3;
  grid-row: 1;
  width: 100px; /* Match search section width */
}


.site-navigation.is-search-open {
  border-bottom-right-radius: 0;
}

/* Support Links Section (legacy - may be used elsewhere) */
.support-links {
  display: flex;
  gap: 1rem;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 100px;
  min-width: 100px;
}
.support-links .support-link {
  color: #6c757d;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: color 0.2s ease;
}
.support-links .support-link:hover {
  color: #0073aa;
  text-decoration: none;
}

/* Main Navigation Section */
.main-navigation {
  display: contents;
}
.main-navigation-left {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
  grid-column: 1;
  grid-row: 1;
}
.main-navigation-right {
  display: flex;
  gap: 2rem;
  justify-content: flex-start;
  align-items: center;
  grid-column: 3;
  grid-row: 1;
}

/* Main Navigation Links */
.nav-link {
  color: #11385D;
  text-decoration: none;
  font-weight: 600;
  font-family: var(--font-headline);
  transition: color 0.2s ease;
  white-space: nowrap;
}
.nav-link:hover {
  color: #0073aa;
  text-decoration: none;
}

/* Logo */
.logo-link {
  display: inline-block;
  transition: opacity 0.2s ease;
  flex-shrink: 0;
  grid-column: 2;
  justify-self: center;
}
.logo-link:hover {
  opacity: 0.8;
}
.site-logo {
  height: auto;
  width: 210px;
  display: block;
  margin: 0 20px;
}

/* Search Section */
.search-section {
  display: flex;
  justify-content: flex-end;
  flex-shrink: 0;
  width: 100px;
  min-width: 100px;
  grid-column: 3;
  grid-row: 1;
  align-self: center;
  position: absolute;
  right: 2rem;
  z-index: 1;
}

/* Search Button */
.search-button {
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-medium-gray);
  border-radius: var(--border-radius-small);
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}
.search-button:focus-visible {
  outline: 2px solid var(--color-dark-gray);
  outline-offset: 2px;
}
.search-button[aria-expanded="true"] {
  border-color: var(--color-dark-gray);
}
.search-button:hover {
  border-color: var(--color-dark-gray);
}
.search-icon {
  width: 20px;
  height: 20px;
  filter: brightness(0) saturate(100%) invert(65%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
  transition: filter 0.2s ease;
}
.search-button:hover .search-icon {
  filter: brightness(0) saturate(100%) invert(24%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

/* Search Form */
.search-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.search-field {
  padding: calc(0.5rem + 2px) 0.75rem;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  min-width: 200px;
}
.search-field:focus {
  outline: none;
  border-color: #0073aa;
  box-shadow: 0 0 0 0.2rem rgba(0, 115, 170, 0.25);
}
.search-submit {
  background-color: #0073aa;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.search-submit:hover {
  background-color: #005a87;
}

.site-search-panel .search-submit {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-white);
  color: var(--color-black);
  border: 1px solid var(--color-light-green);
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.65rem 1.5rem;
  border-radius: 0.25rem;
  transition: transform 0.2s ease;
  box-shadow: none;
  z-index: 0;
  margin-top: -8px;
}

.site-search-panel .search-submit::before,
.site-search-panel .search-submit::after {
  content: '';
  position: absolute;
  background-color: var(--color-light-green);
  transition: all 0.2s ease;
  z-index: -1;
}

.site-search-panel .search-submit::before {
  bottom: -10px;
  left: 4px;
  width: 100%;
  height: 10px;
  transform: skewX(45deg);
}

.site-search-panel .search-submit::after {
  right: -10px;
  bottom: -6px;
  width: 10px;
  height: 105%;
  transform: skewY(45deg);
}

.site-search-panel .search-submit:hover {
  background-color: var(--color-white);
  color: var(--color-black);
  transform: translate(4px, 4px);
}

.site-search-panel .search-submit:hover::before {
  bottom: -4px;
  left: 1px;
  height: 4px;
}

.site-search-panel .search-submit:hover::after {
  right: -4px;
  bottom: -3px;
  width: 4px;
  height: 104%;
}

.site-search-panel {
  position: absolute;
  top: calc(100% - 0px);
  right: -1px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: auto;
  max-width: min(28rem, calc(100% - 4rem));
  padding: 1.5rem;
  background: var(--color-white);
  border: 1px solid var(--color-light-gray);
  border-top: none;
  border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.12);
  transform-origin: top right;
  transform: translateY(-1rem);
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    transform 0.35s ease;
}

.site-search-panel .search-form {
  width: auto;
}

.site-search-panel.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* Mobile */
@media (max-width: 1080px) {
  /* Hide desktop navigation when mobile header is active */
  .site-navigation-wrapper {
    display: none;
  }
  
  .site-navigation {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
  
  .main-navigation {
    order: 1;
    flex-wrap: wrap;
    gap: 1rem;
  }
  
  .support-links {
    order: 2;
    width: auto;
  }
  
  .search-section {
    order: 3;
    width: auto;
  }
  
  .search-field {
    min-width: 150px;
  }

  .site-search-panel {
    right: 0;
    max-width: min(28rem, calc(100% - 3rem));
  }
}

@media (max-width: 768px) {
  .main-navigation {
    flex-direction: column;
    gap: 0.5rem;
  }
  
  .nav-link {
    font-size: 0.9rem;
  }
  
  .site-logo {
    height: 46px;
  }

  .site-search-panel {
    left: 1rem;
    right: 1rem;
    width: auto;
  }

  .site-search-panel.is-open .search-form {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .site-search-panel.is-open .search-field {
    width: 100%;
    min-width: 0;
  }

  .site-search-panel.is-open .search-submit {
    width: 100%;
  }
}