/* ==========================================================================
   nav-align.css  —  centre the desktop nav dropdowns under their trigger
   --------------------------------------------------------------------------
   The dropdown panels were anchored to the item's LEFT edge. Because the
   panels are wider than the nav items, every one of them sat off-centre:
     Roofing        +87px right
     Storm Damage   +63px right
     Areas We Serve -147px (its 760px panel ran off the left of the screen)
     Our Work       +81px right
   Centring on the item fixes all four and keeps the wide panel on screen.

   `translate` is used instead of `transform` so any open/close animation on
   `transform` still runs.
   ========================================================================== */

.pk-nav__item {
  position: relative;
}

.pk-nav__item > .pk-nav__panel,
.pk-nav__item > .dropdown-menu {
  left: 50% !important;
  right: auto !important;
  translate: -50% 0 !important;
  max-width: calc(100vw - 32px);
}

/* The "Areas We Serve" panel is a 3-column grid — keep it inside the viewport
   on smaller desktops rather than letting it clip. */
.pk-nav__item--wide > .pk-nav__panel {
  width: min(760px, calc(100vw - 40px));
}

/* Below the desktop breakpoint the nav collapses into the mobile menu, which
   has its own layout — don't fight it there. */
@media (max-width: 1099px) {
  .pk-nav__item > .pk-nav__panel,
  .pk-nav__item > .dropdown-menu {
    left: 0 !important;
    translate: none !important;
    width: auto;
  }
}