/* lib/styles/components/navbar.css */

/* =============================================================================
   SKIP LINK
   ============================================================================= */
.skip-to-main {
  position: absolute;
  top: calc(var(--space-16) * -1);
  left: var(--space-4);
  z-index: 9999;
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-semibold);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition:
    top var(--motion-transition-interactive),
    box-shadow var(--motion-transition-interactive);
}

.skip-to-main:focus,
.skip-to-main:focus-visible {
  top: 0;
  outline: var(--border-width-medium) solid var(--color-brand-trust-navy);
  outline-offset: var(--space-1);
}

/* =============================================================================
   NAVBAR WRAPPER & BASE
   ============================================================================= */
.navbar-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  width: 100%;
}

.navbar {
  width: 100%;
  background-color: color-mix(in srgb, var(--color-surface-primary) 95%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-width-thin) solid var(--color-border-default);
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow var(--motion-transition-interactive),
    border-color var(--motion-transition-interactive),
    background-color var(--motion-transition-interactive);
}

.navbar__container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding-inline: var(--space-4);
  min-height: 5.625rem;
}

@media (min-width: 40rem) {
  .navbar__container {
    padding-inline: var(--space-8);
    min-height: 4.5rem;
  }
}

@media (min-width: 64rem) {
  .navbar__container {
    padding-inline: var(--space-12);
    min-height: 5rem;
  }
}

/* =============================================================================
   LOGO
   ============================================================================= */
.navbar__logo {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Space between the logo image and text */
  flex-shrink: 0;
  text-decoration: none;
  border-radius: var(--radius-sm);
}

.navbar__logo-img {
  display: block;
  width: auto;
  height: 2.75rem;
  object-fit: contain;
  object-position: left center;
}

/* Added specific styling for the Total Solutions brand text */
.navbar__logo-text {
  font-family: var(--font-heading, sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-brand-trust-navy, #0F294A);
  white-space: nowrap;
}

@media (min-width: 64rem) {
  .navbar__logo-img {
    height: 4.2rem;
  }
  .navbar__logo-text {
    font-size: 1.375rem;
  }
}

/* =============================================================================
   DESKTOP LINKS & DROPDOWNS
   ============================================================================= */
.navbar__links {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 75rem) {
  .navbar__links {
    display: none;
  }
}

.navbar__link-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}

.navbar__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--motion-transition-interactive),
    background-color var(--motion-transition-interactive);
}

.navbar__link::after {
  content: '';
  position: absolute;
  left: var(--space-4);
  right: var(--space-4);
  bottom: calc(var(--space-1) * -1);
  height: var(--border-width-medium);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition:
    transform var(--motion-transition-interactive),
    opacity var(--motion-transition-interactive);
}

.navbar__link-label {
  position: relative;
  z-index: 1;
}

.navbar__link-icon {
  font-size: 0.65rem;
  color: inherit;
  transition: transform var(--motion-transition-interactive);
}

.navbar__link:hover,
.navbar__link-item:hover .navbar__link,
.navbar__link:focus-visible,
.navbar__link-item:focus-within .navbar__link {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.navbar__link:focus-visible {
  outline: var(--border-width-medium) solid color-mix(in srgb, var(--color-primary) 28%, transparent);
  outline-offset: var(--space-1);
}

.navbar__link--active {
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.navbar__link--active::after,
.navbar__link:hover::after,
.navbar__link:focus-visible::after,
.navbar__link-item:hover .navbar__link::after,
.navbar__link-item:focus-within .navbar__link::after {
  transform: scaleX(1);
  opacity: 1;
}

.navbar__link-item--has-dropdown:hover .navbar__link-icon,
.navbar__link-item--has-dropdown:focus-within .navbar__link-icon {
  transform: rotate(180deg);
}

.navbar__link--login {
  color: var(--color-brand-trust-navy);
  font-weight: var(--font-weight-semibold);
  border: var(--border-width-thin) solid var(--color-border-default);
  background-color: var(--color-background-alt);
}

.navbar__link--login:hover,
.navbar__link--login:focus-visible {
  color: var(--color-brand-trust-navy);
  background-color: var(--color-surface-page);
  border-color: var(--color-border-strong);
}

/* --- Dropdown Menu UI --- */
.navbar__dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  min-width: 13.75rem;
  z-index: var(--z-dropdown);
  background-color: var(--color-surface-primary);
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(-50%) translateY(var(--space-2));
  transition:
    opacity var(--motion-transition-reveal),
    transform var(--motion-transition-reveal),
    visibility var(--motion-transition-reveal);
}

.navbar__dropdown--mega {
  min-width: 36rem;
}

.navbar__dropdown::before {
  content: '';
  position: absolute;
  top: calc(var(--space-4) * -1);
  left: 0;
  right: 0;
  height: var(--space-4);
}

.navbar__link-item--has-dropdown:hover .navbar__dropdown,
.navbar__link-item--has-dropdown:focus-within .navbar__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.navbar__dropdown-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.navbar__dropdown-list--mega {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  padding: var(--space-4);
}

.navbar__dropdown-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition:
    color var(--motion-transition-interactive),
    background-color var(--motion-transition-interactive);
}

.navbar__dropdown-link:hover,
.navbar__dropdown-link:focus-visible {
  color: var(--color-primary);
  background-color: var(--color-background-alt);
}

.navbar__dropdown-link:focus-visible {
  outline: var(--border-width-medium) solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  outline-offset: var(--space-1);
}

/* =============================================================================
   ACTIONS & HAMBURGER
   ============================================================================= */
.navbar__actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-4);
}

.navbar__cta {
  display: flex;
}

@media (max-width: 75rem) {
  .navbar__cta {
    display: none;
  }
}

.navbar__cta-link {
  display: inline-flex;
  text-decoration: none;
}

.navbar__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: var(--border-width-thin) solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
  transition:
    color var(--motion-transition-interactive),
    background-color var(--motion-transition-interactive),
    border-color var(--motion-transition-interactive),
    transform var(--motion-transition-interactive);
}

@media (max-width: 75rem) {
  .navbar__hamburger {
    display: inline-flex;
  }
}

.navbar__hamburger:hover,
.navbar__hamburger:focus-visible {
  background-color: var(--color-background-alt);
  border-color: var(--color-border-strong);
  color: var(--color-primary);
}

.navbar__hamburger:focus-visible {
  outline: var(--border-width-medium) solid color-mix(in srgb, var(--color-primary) 22%, transparent);
  outline-offset: var(--space-1);
}

.navbar__hamburger--open {
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-primary) 24%, transparent);
  color: var(--color-primary);
}

.navbar__hamburger-icon {
  font-size: 1.25rem;
  transition: transform var(--motion-transition-interactive);
}

.navbar__hamburger--open .navbar__hamburger-icon {
  transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
  .skip-to-main,
  .navbar,
  .navbar__link,
  .navbar__link::after,
  .navbar__link-icon,
  .navbar__dropdown,
  .navbar__dropdown-link,
  .navbar__hamburger,
  .navbar__hamburger-icon {
    transition-duration: 0.01ms !important;
  }

  .navbar__hamburger--open .navbar__hamburger-icon,
  .navbar__link-item--has-dropdown:hover .navbar__link-icon,
  .navbar__link-item--has-dropdown:focus-within .navbar__link-icon {
    transform: none !important;
  }
}