/* ============================================================================
   Navigation
   Premium fixed header with Far Overseas branding
   ============================================================================ */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--nav-height);

  display: flex;
  align-items: center;

  z-index: var(--z-nav);

  background: linear-gradient(
   rgb(250, 250, 250)
  );

  transition:
    height var(--dur-med) var(--ease-standard),
    background var(--dur-med) var(--ease-standard),
    box-shadow var(--dur-med) var(--ease-standard);
}


/* ============================================================================
   Scrolled Navbar
   ============================================================================ */

.navbar.is-scrolled {
  height: var(--nav-height-scrolled);

  background: rgb(250, 250, 250);

  box-shadow: var(--shadow-md);
}


/* ============================================================================
   Navbar Inner
   ============================================================================ */

.navbar__inner {
  display: flex;
  align-items: center;

  width: 100%;

  gap: clamp(1rem, 2.5vw, 2.25rem);
}


/* ============================================================================
   FAR OVERSEAS BRAND
   ============================================================================ */

.navbar__brand {
  display: flex;
  align-items: center;

  flex: 0 0 auto;

  width: 220px;
  height: 60px;

  overflow: hidden;

  text-decoration: none;

  min-width: 0;
}


/* ============================================================================
   Far Overseas Full Logo

   logo-mark.png contains the complete Far Overseas lockup, but the PNG
   canvas has transparent space around the visible artwork. The fixed
   220x60 viewport crops that empty space while keeping the logo readable.
   ============================================================================ */

.navbar__logo {
  display: block;

  width: 220px;
  height: 60px;

  flex: 0 0 220px;

  object-fit: cover;
  object-position: center;

  max-width: none;
  filter:
    drop-shadow(0 0 4px rgba(252, 253, 253, 0.08))
    drop-shadow(0 0 10px rgba(249, 251, 251, 0.08));
}


/* ============================================================================
   Navigation
   ============================================================================ */

.navbar nav {
  flex: 1 1 auto;

  min-width: 0;
}


.navbar__links {
  display: flex;
  align-items: center;

  justify-content: flex-end;

  gap: clamp(0.85rem, 1.65vw, 1.65rem);

  list-style: none;

  margin: 0;
  padding: 0;
}


/* ============================================================================
   Navigation Links
   ============================================================================ */

.navbar__link {
  position: relative;

  display: flex;
  align-items: center;

  gap: 0.3rem;

  font-family: var(--font-display);

  font-weight: 600;

  font-size: 0.86rem;

  white-space: nowrap;

  color: rgba(7, 28, 28, 0.9);

  padding: 0.5rem 0;

  transition:
    color var(--dur-fast) var(--ease-standard);
}


.navbar__link:hover,
.navbar__link:focus-visible {
  color: var(--color-harbor-teal-dark);
}


.navbar__link::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -2px;

  width: 0;
  height: 1.5px;

  background: rgb(7, 28, 28);

  transition:
    width var(--dur-fast) var(--ease-standard);
}


.navbar__link:hover::after,
.navbar__link:focus-visible::after {
  width: 100%;
}


/* ============================================================================
   Chevron
   ============================================================================ */

.navbar__chevron {
  width: 9px;
  height: 9px;

  transition:
    transform var(--dur-fast) var(--ease-standard);
}


.navbar__item--dropdown:hover .navbar__chevron,
.navbar__item--dropdown:focus-within .navbar__chevron {
  transform: rotate(180deg);
}


.navbar__item--dropdown {
  position: relative;
}


/* ============================================================================
   Desktop Dropdown
   ============================================================================ */

.navbar__dropdown {
  position: absolute;

  top: calc(100% + 10px);
  left: 50%;

  transform:
    translateX(-50%)
    translateY(6px);

  min-width: 460px;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility var(--dur-fast);

  z-index: var(--z-dropdown);
}


.navbar__dropdown::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  top: -10px;

  height: 10px;
}


.navbar__dropdown-card {
  display: grid;

  grid-template-columns: repeat(2, 1fr);

  gap: 0.2rem;

  padding: var(--space-md);

  background: rgba(255, 255, 255, 0.98);

  border-radius: var(--radius-md);

  box-shadow: var(--shadow-lg);
}


.navbar__item--dropdown:hover .navbar__dropdown,
.navbar__item--dropdown:focus-within .navbar__dropdown {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  transform:
    translateX(-50%)
    translateY(0);
}


/* ============================================================================
   Dropdown Links
   ============================================================================ */

.navbar__dropdown-link {
  display: flex;
  align-items: center;

  gap: var(--space-xs);

  padding: 0.65rem 0.75rem;

  border-radius: var(--radius-sm);

  font-size: 0.88rem;
  font-weight: 600;

  color: var(--color-ink-teal);

  transition:
    background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard);
}


.navbar__dropdown-link:hover {
  background: var(--color-sand);

  color: var(--color-harbor-teal-dark);
}


.navbar__dropdown-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--color-harbor-teal);

  flex-shrink: 0;
}


/* ============================================================================
   Navbar Actions
   ============================================================================ */

.navbar__actions {
  display: flex;
  align-items: center;

  gap: var(--space-md);

  flex: 0 0 auto;
}


.navbar__cta {
  padding: 0.68rem 1.25rem;

  font-size: 0.84rem;

  white-space: nowrap;
}


/* ============================================================================
   Mobile CTA
   ============================================================================ */

.navbar__cta--mobile {
  display: none;
}


/* ============================================================================
   Mobile Toggle
   ============================================================================ */

.navbar__toggle {
  display: none;

  flex-direction: column;
  justify-content: center;

  gap: 5px;

  width: 32px;
  height: 32px;

  z-index: calc(var(--z-overlay) + 1);
}


.navbar__toggle-bar {
  width: 100%;
  height: 2px;

  background: var(--color-ink-teal);

  transition:
    transform var(--dur-fast) var(--ease-standard),
    opacity var(--dur-fast) var(--ease-standard);
}


.navbar__toggle.is-open .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}


.navbar__toggle.is-open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}


.navbar__toggle.is-open .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================================
   Scroll Progress
   ============================================================================ */

.navbar__progress {
  position: absolute;

  bottom: 0;
  left: 0;

  height: 2px;
  width: 0%;

  background: var(--color-signal-teal);

  transition:
    width var(--dur-fast) linear;
}


/* ============================================================================
   Tablet
   ============================================================================ */

@media (max-width: 1080px) {

  .navbar__links {
    gap: 0.85rem;
  }

  .navbar__link {
    font-size: 0.8rem;
  }

  .navbar__cta {
    padding-inline: 1rem;
  }

}


/* ============================================================================
   Mobile
   ============================================================================ */

@media (max-width: 960px) {

  

  .navbar__links {
    position: fixed;

    inset: 0;

    height: 100vh;

    background:rgba(250, 250, 250, 0.98); ;

    flex-direction: column;

    justify-content: flex-start;

    align-items: flex-start;

    gap: var(--space-lg);

   padding:
    90px
    var(--space-xl)
    40px;

    transform: translateX(100%);

    transition:
      transform var(--dur-med) var(--ease-out-expo);

    z-index: var(--z-overlay);

    overflow-y: auto;
  }


  .navbar__links.is-open {
    transform: translateX(0);
  }


 .navbar__link {
    font-size: var(--fs-display-sm);
    color: #0A2E2F;
}


  .navbar__item--dropdown {
    width: 100%;
  }


  /* --------------------------------------------------------------------------
     Mobile dropdown
     -------------------------------------------------------------------------- */

  .navbar__dropdown {
    position: static;

    left: auto;
    top: auto;

    transform: none;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    box-shadow: none;

    min-width: 0;

    width: 100%;

    max-height: 0;

    overflow: hidden;

    padding: 0;

    transition:
      max-height var(--dur-med) var(--ease-standard);
  }


  /* IMPORTANT:
     Override the desktop hover/focus transform.
     Without this, the desktop translateX(-50%)
     can shift the product links off-screen on mobile.
  */

  .navbar__item--dropdown:hover .navbar__dropdown,
  .navbar__item--dropdown:focus-within .navbar__dropdown,
  .navbar__item--dropdown.is-expanded .navbar__dropdown {
    position: static;

    left: auto;
    top: auto;

    transform: none;

    width: 100%;

    min-width: 0;
  }


  .navbar__dropdown::before {
    display: none;
  }


  .navbar__dropdown-card {
    grid-template-columns: 1fr;

    width: 100%;

    background: transparent;

    box-shadow: none;

    padding:
      var(--space-sm)
      0 0;
  }


  .navbar__item--dropdown.is-expanded .navbar__dropdown {
    max-height: 600px;
  }


  .navbar__item--dropdown.is-expanded .navbar__chevron {
    transform: rotate(180deg);
  }


  .navbar__dropdown-link {
    color: rgba(7, 28, 28, 0.82);
  }


  .navbar__dropdown-link:hover {
    background: var(--color-line-dark);

    color: var(--color-white);
  }


  /* --------------------------------------------------------------------------
     Hide desktop CTA
     -------------------------------------------------------------------------- */

  .navbar__cta {
    display: none;
  }


  /* --------------------------------------------------------------------------
     Show mobile CTA
     -------------------------------------------------------------------------- */

  .navbar__links .navbar__cta--mobile {
    display: inline-flex;

    margin-top: var(--space-md);
  }


  /* --------------------------------------------------------------------------
     Hamburger
     -------------------------------------------------------------------------- */

  .navbar__toggle {
    display: flex;
  }


  /* --------------------------------------------------------------------------
     Mobile brand
     -------------------------------------------------------------------------- */

  .navbar__brand {
    width: 190px;
    height: 52px;
  }


  .navbar__logo {
    width: 190px;
    height: 52px;
    flex-basis: 190px;
  }

}


/* ============================================================================
   Small Mobile
   ============================================================================ */

@media (max-width: 560px) {

  .navbar__brand {
    width: 165px;
    height: 46px;
  }

  .navbar__logo {
    width: 165px;
    height: 46px;
    flex-basis: 165px;
  }

}


/* ============================================================================
   Safety: Mobile CTA hidden on desktop
   ============================================================================ */

.navbar__cta--mobile {
  display: none;
}


@media (max-width: 960px) {

  .navbar__cta--mobile {
    display: inline-flex;
  }

}