/* =========================================================================
   Blueprint Spain — Floating pill navigation
   Single source of truth for the nav. Loaded via @import in main.css, so it
   applies to every page. High-specificity + targeted !important is used where
   main.css / Bootstrap force nav values later in the cascade.
   ========================================================================= */

:root {
  --bp-nav-blue: #004C80;
  --bp-nav-blue-dark: #003a61;
  --bp-nav-ink: #1f2d3d;
  --bp-nav-muted: #8a97a6;
  --bp-nav-tint: #eef4f9;
  --bp-nav-line: rgba(16, 42, 67, 0.08);
}

/* ---- Full-width bar, stuck to the top ------------------------------------ */
nav.bp-nav.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: none;
  padding: 0 !important;
  margin: 0;
  background: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid var(--bp-nav-line);
  box-shadow: 0 1px 3px rgba(16, 42, 67, 0.05);
  z-index: 1030;
}

/* Inner content is constrained + centered to the page content width so the
   list lines up with .container / section content. 50px side padding mirrors
   main's padding; max-width 1240 = 1140 content + that padding (border-box). */
nav.bp-nav .bp-nav__inner {
  flex: 1 1 100%;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 50px;
}

/* Collapse fills the bar so the menu can span its full width */
nav.bp-nav .bp-nav__collapse {
  flex-grow: 1;
  flex-basis: auto;
}

/* Give body room for the fixed bar */
body {
  padding-top: 62px;
}

/* ---- Brand ---------------------------------------------------------------- */
nav.bp-nav .bp-nav__brand {
  display: flex;
  align-items: center;
  padding: 0;
  margin: 0 6px 0 0;
}
nav.bp-nav .bp-nav__brand img {
  height: 30px;
  width: auto;
  display: block;
}

/* ---- Menu layout ---------------------------------------------------------- */
/* Items cluster on the right; the empty space sits between logo and the group */
nav.bp-nav .bp-nav__menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}
nav.bp-nav .bp-nav__menu .nav-item {
  margin: 0 !important;
  position: relative;
}

/* ---- Links ---------------------------------------------------------------- */
nav.bp-nav.no-background .bp-nav__link {
  color: var(--bp-nav-ink) !important;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  padding: 10px 14px !important;
  border-radius: 10px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: color 0.18s ease, background-color 0.18s ease;
}
nav.bp-nav.no-background .bp-nav__link:hover,
nav.bp-nav.no-background .nav-item.dropdown:hover > .bp-nav__link,
nav.bp-nav.no-background .nav-item.show > .bp-nav__link {
  color: var(--bp-nav-blue) !important;
  background-color: var(--bp-nav-tint);
  text-decoration: none !important;
}

/* Dropdown caret -> tidy chevron that rotates when open.
   The rotated V occupies the lower half of its 7px box, so translateY
   recenters the visible glyph on the box center in both states. */
nav.bp-nav .dropdown-toggle::after {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 7px;
  vertical-align: 1px;
  border: none;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: translateY(-2.5px) rotate(45deg);
  transition: transform 0.2s ease;
  opacity: 0.75;
}
nav.bp-nav .nav-item.dropdown:hover .dropdown-toggle::after,
nav.bp-nav .nav-item.show .dropdown-toggle::after {
  transform: translateY(2.5px) rotate(225deg);
}

/* ---- CTA (Contact Us) — last item in the right-aligned cluster ------------- */
/* Selector out-specifies the `.bp-nav__menu .nav-item { margin:0 }` reset. */
nav.bp-nav .bp-nav__menu .bp-nav__item--cta {
  margin-left: 10px !important;
}
nav.bp-nav.no-background .bp-nav__cta {
  color: #ffffff !important;
  background-color: var(--bp-nav-blue);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 11px 22px !important;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 76, 128, 0.18);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
nav.bp-nav.no-background .bp-nav__cta:hover {
  color: #ffffff !important;
  background-color: var(--bp-nav-blue-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 76, 128, 0.24);
}

/* =========================================================================
   Dropdown "mega" panels
   ========================================================================= */
nav.bp-nav .dropdown-menu.bp-mega {
  display: block;               /* animate via opacity/visibility, not display */
  position: absolute;
  top: 100%;
  left: 0;
  right: auto;
  margin: 0;
  padding: 14px;
  min-width: 240px;
  background: #ffffff;
  border: 1px solid var(--bp-nav-line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(16, 42, 67, 0.14),
              0 4px 12px rgba(16, 42, 67, 0.06);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 1000;
}

/* Invisible hover bridge so the menu doesn't close when crossing the gap */
nav.bp-nav .nav-item.dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 14px;
}

/* Open state (hover on desktop, or Bootstrap .show on click) */
nav.bp-nav .nav-item.dropdown:hover > .dropdown-menu.bp-mega,
nav.bp-nav .nav-item.dropdown.show > .dropdown-menu.bp-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Single-column panel (Our Services) */
nav.bp-nav .bp-mega--single {
  min-width: 260px;
}

/* Multi-column grid panel (Resources). Because the nav items are clustered on
   the right, anchor the panel's right edge to the trigger so it opens leftward
   and never spills off the right of the viewport. */
nav.bp-nav .dropdown-menu.bp-mega--grid {
  left: auto;
  right: 0;
  transform: translateY(8px);
  display: grid;
  grid-template-columns: repeat(4, minmax(200px, 1fr));
  gap: 10px 28px;
  padding: 20px 24px;
}
nav.bp-nav .nav-item.dropdown:hover > .dropdown-menu.bp-mega--grid,
nav.bp-nav .nav-item.dropdown.show > .dropdown-menu.bp-mega--grid {
  transform: translateY(0);
}

/* Columns + labels */
nav.bp-nav .bp-mega__col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
nav.bp-nav .bp-mega__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bp-nav-muted);
  padding: 4px 12px 8px;
}

/* Items inside panels */
nav.bp-nav .bp-mega__link {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--bp-nav-ink) !important;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease;
}
nav.bp-nav .bp-mega__link:hover,
nav.bp-nav .bp-mega__link:focus {
  background-color: var(--bp-nav-tint) !important;
  color: var(--bp-nav-blue) !important;
  text-decoration: none;
}
nav.bp-nav .bp-mega__link:active {
  transform: scale(0.99);
}
nav.bp-nav .bp-mega__link--all {
  margin-top: 4px;
  color: var(--bp-nav-blue) !important;
  font-weight: 600;
}

/* ---- Toggler (hamburger) -------------------------------------------------- */
nav.bp-nav .bp-nav__toggler {
  margin-left: auto;
  padding: 6px 8px;
  border: 1px solid var(--bp-nav-line);
  border-radius: 10px;
  outline: none;
}
nav.bp-nav .bp-nav__toggler:focus {
  box-shadow: 0 0 0 3px rgba(0, 76, 128, 0.15);
}

/* =========================================================================
   Medium desktop — fold the grid to two columns so it never overflows
   ========================================================================= */
@media (min-width: 992px) and (max-width: 1300px) {
  nav.bp-nav .dropdown-menu.bp-mega--grid {
    grid-template-columns: repeat(2, minmax(190px, 1fr));
  }
}

/* =========================================================================
   Mobile / tablet (collapsed nav, < 992px to match navbar-expand-lg)
   ========================================================================= */
@media (max-width: 991.98px) {
  body {
    padding-top: 64px;
  }

  nav.bp-nav.navbar {
    top: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: none;
  }

  nav.bp-nav .bp-nav__inner {
    width: 100%;
    max-width: none;
    padding: 8px 18px;
  }

  nav.bp-nav .bp-nav__brand {
    margin-right: auto;
  }

  /* The collapsing panel spans full width beneath the brand row */
  nav.bp-nav .bp-nav__collapse {
    flex-basis: 100%;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
  }

  nav.bp-nav .bp-nav__menu {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    width: 100%;
    padding: 10px 0 4px;
    margin-top: 8px;
    border-top: 1px solid var(--bp-nav-line);
  }

  nav.bp-nav.no-background .bp-nav__link {
    width: 100%;
    padding: 12px 12px !important;
    border-radius: 10px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* Chevron on the far right for mobile rows */
  nav.bp-nav .dropdown-toggle::after {
    margin-left: auto;
  }

  /* Accordion: static panels that toggle via .show, no absolute float */
  nav.bp-nav .dropdown-menu.bp-mega,
  nav.bp-nav .bp-mega--grid {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    left: auto;
    right: auto;
    min-width: 0;
    width: 100%;
    grid-template-columns: 1fr;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 2px 0 6px 10px;
    margin: 0 0 4px;
  }
  nav.bp-nav .nav-item.dropdown.show > .dropdown-menu.bp-mega,
  nav.bp-nav .nav-item.dropdown.show > .bp-mega--grid {
    display: block;
    transform: none;
  }

  /* Kill the desktop hover-open + hover bridge on touch layouts */
  nav.bp-nav .nav-item.dropdown:hover > .dropdown-menu.bp-mega {
    display: none;
  }
  nav.bp-nav .nav-item.dropdown.show:hover > .dropdown-menu.bp-mega {
    display: block;
  }
  nav.bp-nav .nav-item.dropdown::after {
    content: none;
  }

  nav.bp-nav .bp-mega__label {
    margin-top: 10px;
    padding: 4px 12px 4px;
  }
  nav.bp-nav .bp-mega__link {
    font-size: 15px;
    padding: 10px 12px;
    white-space: normal;
  }

  /* CTA becomes a full-width button at the bottom of the menu */
  nav.bp-nav .bp-nav__menu .bp-nav__item--cta {
    margin: 10px 0 4px !important;
  }
  nav.bp-nav.no-background .bp-nav__cta {
    display: block;
    width: 100%;
    text-align: center;
    padding: 13px 22px !important;
    font-size: 16px;
  }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
  nav.bp-nav .bp-nav__link,
  nav.bp-nav .bp-nav__cta,
  nav.bp-nav .dropdown-menu.bp-mega,
  nav.bp-nav .dropdown-toggle::after,
  nav.bp-nav .bp-mega__link {
    transition: none !important;
  }
}