/*------------------------------------------------------------
  ERX Top Navigation Bar
  Fragment: navbar-top.xhtml
  Extension point: webhelp.fragment.before.body

  To remove this navbar from the project:
    1. Delete navbar-top.xhtml from html-fragments/
    2. Delete navbar-top.css from css/
    3. Remove the <html-fragment> entry from your .opt file
    4. Remove the <css> entry from your .opt file
  No other layout files are affected.
------------------------------------------------------------*/

/*------------------------------------------------------------
  Color tokens used by this component
  Source: :root block in your main stylesheet

  --erx-ink:            #08221F  (navbar background)
  --topnav_hover_color: #ee5519  (link hover color)
  Note: both variables are defined in :root in main.css
------------------------------------------------------------*/

/* Background
   Uses body prefix — required to outrank WebHelp's
   cascade for background-color on this element.       */
body .erx-topnav {
  width: 100%;
  background-color: var(--erx-ink);
}

.erx-topnav__inner {
  display: flex;
  justify-content: flex-end;
  padding: 0 24px;
  margin: 0 auto;
  width: 100%;
  max-width: 1200px; /* matches container-fluid max-width in main.css */
  box-sizing: border-box;
}

.erx-topnav__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.erx-topnav__item {
  display: flex;
  align-items: center;
}

/* Link default state
   Scoped to .erx-topnav to outrank bare a, a:visited
   rules in main.css                                   */
.erx-topnav .erx-topnav__link,
.erx-topnav .erx-topnav__link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  color: #fff;
  text-decoration: none;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.01em;
  transition: color 0.2s ease;
}

/* Link hover and focus state
   Scoped to .erx-topnav to outrank bare a:hover,
   a:focus rules in main.css                           */
.erx-topnav .erx-topnav__link:hover,
.erx-topnav .erx-topnav__link:focus {
  color: var(--topnav_hover_color);
  text-decoration: none;
}

.erx-topnav__icon {
  width: 0.8rem;
  height: 0.8rem;
  fill: currentColor; /* inherits color from link state, including hover */
  flex-shrink: 0;
  position: relative;
  top: -0.5px; /* optical alignment */
}

/* ── Breakpoints ─────────────────────────────────────────────
   Mirrors your existing breakpoints in main.css              */

@media only screen and (max-width: 991px) {
  .erx-topnav__inner {
    padding: 0 1.25rem; /* matches ~20px, consistent with your 2.5rem shell padding split across sides */
  }

  .erx-topnav__list {
    gap: 1.25rem;
  }

  .erx-topnav .erx-topnav__link,
  .erx-topnav .erx-topnav__link:visited {
    font-size: 0.8rem;
  }
}

@media only screen and (max-width: 767px) {
  .erx-topnav__inner {
    padding: 0 1.375rem; /* matches your min(100% - 2.75rem) shell padding split across sides */
    justify-content: center; /* center links on small mobile rather than hug right edge */
  }

  .erx-topnav__list {
    gap: 1rem;
  }

  .erx-topnav .erx-topnav__link,
  .erx-topnav .erx-topnav__link:visited {
    font-size: 0.75rem;
  }

  .erx-topnav__icon {
    width: 0.7rem;
    height: 0.7rem;
  }
}