/* Header navbar.

   Desktop (>=992px) shows the links inline in a pill and hides the hamburger.
   At 991px and below nothing here applies, so the existing .header-menu-box
   dropdown stays the sole navigation — six inline links do not fit on a phone.

   Deliberately px rather than the Webflow spacing tokens: this is a new
   component with no design-system counterpart, and the token scale jumps
   too coarsely for a 48px control. */

.header-nav {
  display: none;
}

/* Visually hidden but still announced, for the Products "coming soon" dot. */
.header-nav-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

@media screen and (min-width: 992px) {

  /* Was 1fr 1.56fr, sized for a logo and a small hamburger pill. The nav needs
     whatever the logo does not use. */
  .header-wrap {
    grid-template-columns: auto 1fr;
  }

  .header-nav {
    align-items: center;
    gap: 2px;
    padding: 6px;
    border-radius: var(--_base---bordar-radius--pill);
    background-color: var(--_color---normal-color--near-black);
    display: flex;
  }

  /* The hamburger pill and its dropdown panel are the small-screen path. */
  .header-menu-box {
    display: none;
  }

  .header-nav-link {
    color: var(--_color---normal-color--snow-white);
    font-size: var(--_base---font-size--font-size-md);
    font-weight: var(--_base---font-weight--medium);
    letter-spacing: var(--_base---spacing-letter--spacing-letter-tighter);
    white-space: nowrap;
    border-radius: var(--_base---bordar-radius--pill);
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    text-decoration: none;
    transition: color .3s, background-color .3s;
    display: inline-flex;
  }

  .header-nav-link:hover {
    color: var(--_color---normal-color--vivid-orange);
    background-color: #ffffff0f;
  }

  .header-nav-link:focus-visible {
    outline: 2px solid var(--_color---normal-color--vivid-orange);
    outline-offset: 2px;
  }

  /* Own class, not Webflow's .w--current: webflow.js recomputes that one at
     runtime by string-matching href against location.pathname, so a host that
     serves /contact/ strips it off an href="/contact" link. It already does
     this to the export's own .menu-link. */
  .header-nav-link-current {
    color: var(--_color---normal-color--vivid-orange);
    background-color: #fe65122e;
  }

  .header-nav-dot {
    background-color: var(--_color---normal-color--vivid-orange);
    border-radius: 50%;
    flex: none;
    width: 5px;
    height: 5px;
  }
}

@media screen and (max-width: 991px) {

  /* Was padded 6px 6px 6px 20px with a 78px gap, shaped around the scroll-percent
     chip that sat on its right. With the chip gone the pill holds one control and
     needs to be symmetric again. */
  .header-menu-child {
    grid-column-gap: 0;
    grid-row-gap: 0;
    padding: 14px 22px;
  }
}

/* Six links plus the button crowd the container between 992 and 1279. */
@media screen and (min-width: 992px) and (max-width: 1279px) {
  .header-nav-link {
    font-size: var(--_base---font-size--font-size-sm);
    padding: 8px 11px;
  }
}

/* Current item in the phone dropdown and in the footer.

   The export ships .w--current with no styling at all, and webflow.js
   recomputes that class at runtime anyway (see .header-nav-link-current
   above), so the marker here is aria-current: written in the HTML, never
   touched by Webflow, and the same hook a screen reader reads.
   "page" marks the exact URL; "true" marks the section from a child page
   such as /services/development. Both should light up, hence [aria-current]
   with no value test.

   Unscoped by breakpoint on purpose: the dropdown is the phone navigation and
   the footer is on every page at every width. */
.menu-link[aria-current],
.link-block[aria-current] {
  color: var(--_color---normal-color--vivid-orange);
}

/* A short rule leading the label, so the current item is not signalled by
   colour alone. :first-child keeps it off the Products link's "coming soon"
   badge, which is a second div inside the same anchor. */
.menu-link[aria-current]>div:first-child {
  align-items: center;
  gap: 12px;
  display: inline-flex;
}


/* The dropdown panel is 280px centred on a ~111px button (left: 34% plus a
   -50% translate), which puts its right edge ~51px past the right of a 390px
   screen on every page. Nothing was visibly lost while every row was short,
   but the "coming soon" badge sits far enough right to be cut off, and the
   page picks up horizontal scroll whenever the menu is open.

   Hang it off the button's right edge instead, which is where a dropdown
   belongs, and cap the width so it always clears both gutters. Only below
   992px, since the button and this panel are hidden above it. */
@media screen and (max-width: 991px) {
  .drop-down-menu-main {
    min-width: 0;
    width: min(320px, calc(100vw - 32px));
    left: auto;
    right: 0;
    transform: translateY(-7%);
  }

  /* Belt and braces: if a future label runs long, the badge drops under it
     rather than pushing the row wider than the panel. */
  .menu-link-soon {
    flex-wrap: wrap;
  }
}
/* Below 992px .footer-bottom-bar turns into a column, but it keeps the
   align-items: flex-end from its row layout — so the copyright block stayed
   shrink-to-fit and pinned itself to the right edge while the logo sat at the
   left, reading as two unrelated stray items. Full width puts it back on the
   logo's left edge and lets the line wrap against the container instead of
   against its own content width. */
@media screen and (max-width: 991px) {
  .footer-bottom-bar .body {
    width: 100%;
  }
}