/* css/policy-nav.css — the header used by the policy pages.
 *
 * These pages open inside the ExamBook app as a webview, which changes two
 * things about the site's normal header:
 *
 * 1. There is no way out. The logo is not a link and there is no checkout
 *    button, because inside the app they would drop someone onto the marketing
 *    site mid-policy — and a payment CTA in a webview is exactly what store
 *    review teams flag.
 * 2. The links must stay visible. The site's own stylesheet hides .nav-links
 *    below 900px, which is every phone; a webview with the links hidden leaves
 *    the reader on one page with nowhere to go. Here they stay on at all
 *    widths, as a single row that scrolls sideways if it has to.
 */

.nav-logo.static { cursor: default; user-select: none; }

/* Beats the `.nav-links { display:none }` in the mobile block of style.css on
   specificity alone — a media query adds none, so no !important is needed. */
.nav-links.policy-nav {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin-left: auto;
  padding-left: 12px;
}
.nav-links.policy-nav::-webkit-scrollbar { display: none; }
.nav-links.policy-nav a {
  white-space: nowrap;
  font-size: 0.86rem;
  padding: 4px 0;
}
/* The page you are on, marked so the row reads as a position and not a menu. */
.nav-links.policy-nav a[aria-current="page"] {
  color: var(--text-primary);
  font-weight: 700;
  border-bottom: 2px solid var(--purple);
}

/* A phone cannot hold the wordmark and five links on one line — they collided.
   Below 640px the links drop to their own row under the logo and scroll
   sideways if a sixth is ever added. */
@media (max-width: 640px) {
  .nav .nav-inner { flex-wrap: wrap; row-gap: 9px; }
  .nav-logo.static { flex: 0 0 auto; }
  .nav-links.policy-nav {
    flex: 1 0 100%;
    margin-left: 0;
    padding-left: 0;
    gap: 16px;
    /* Room for the underline on the current page, and for the row to be
       flicked sideways without clipping the last link. */
    padding-bottom: 2px;
  }
  .nav-links.policy-nav a { font-size: 0.82rem; }
  .nav-logo span { font-size: 0.98rem; }
  .nav-logo img { height: 26px !important; }
}