/* stylelint-disable no-descending-specificity -- see ./top-nav.md for rationale */

/* See ./top-nav.md for the BEM structure, theme variants, and breakpoint conventions. */

/* ============================================================
   1. Block root + theme variants + body-lock
   ============================================================ */


.top-nav.block:has(.top-nav__desktop-menu):has(.top-nav__mobile-menu) {
  display: block;
}

/* Pair with styles.css `header { min-height: var(--nav-height) }`
   reserve - see ./top-nav.md "Sticky-pinned header collapse". */
body:has(.sticky-container__pinned .top-nav.block .top-nav__desktop-menu):has(.sticky-container__pinned .top-nav.block .top-nav__mobile-menu) header {
  min-height: 0;
}

.top-nav {
  --tn-surface: transparent;
  --tn-divider: var(--ll-color-border-default);
  --ll-brand-logo-light: url('/img/brand/logo_lifelock_horizontal_black_color.svg');
  --ll-brand-logo-transparent: url('/img/brand/logo_lifelock_horizontal_white_color.svg');

  position: relative;
  background: var(--tn-surface);
}

.top-nav--theme-light {
  --tn-surface: var(--ll-color-bg-default);
}

.top-nav--theme-transparent {
  --tn-surface: transparent;
}

/* Flush block-end spacing when the bar is adopted into a sticky
   container's pinned region. */
.sticky-container__pinned .top-nav {
  margin-block: 0;
}

/* ============================================================
   2. Desktop menu (LG+ chrome: bar + mega-menu flyouts)
   ============================================================ */

.top-nav__desktop-menu {
  --tn-desktop-divider-open: transparent;

  display: none;
  position: relative;
  border-bottom: var(--ll-border-width-hairline) solid transparent;
}

@media (width >= 1024px) {
  .top-nav__desktop-menu {
    display: block;
  }
}

.top-nav__desktop-menu:has(.top-nav__mega-menu[aria-hidden="false"]) {
  border-bottom-color: var(--tn-desktop-divider-open);
}

@media (width >= 1024px) {
  body:has(.top-nav .top-nav__mega-menu[aria-hidden="false"])::after {
    content: '';
    position: fixed;
    inset: var(--sticky-container-top-height, 72px) 0 0;
    background: var(--ll-color-bg-scrim);
    z-index: 98;
  }
}

.top-nav__desktop-menu-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-block: var(--ll-space-4);
}

@media (width >= 1024px) {
  .top-nav__desktop-menu-bar {
    min-height: 72px;
  }
}

/* Primary nav: row of nav-link triggers (Plans / Resources / Free
   trial). Stays at content-width (no flex-grow) so auto-grow lives
   between primary and secondary via margin-left:auto on secondary. */
.top-nav__desktop-menu-primary {
  display: flex;
  align-items: center;
  margin-left: var(--ll-space-6);

  /* Figma LG gap = space-8 (32px); XL steps up to space-9 below.
     (WEBEXP figma-check #4) */
  gap: var(--ll-space-8);
}

@media (width >= 1440px) {
  .top-nav__desktop-menu-primary {
    margin-left: var(--ll-space-12);
    gap: var(--ll-space-9);
  }
}

.top-nav__desktop-menu-secondary {
  display: flex;
  align-items: center;
  gap: var(--ll-space-5);
  margin-left: auto;
}

@media (width >= 1440px) {
  .top-nav__desktop-menu-secondary {
    gap: var(--ll-space-8);
  }
}

/* Borderless inline link with leading icon + label - secondary nav's
   "plain" link shape (Sign in, Call us). Typography matches body-base
   regular (400) per Figma sub-nav spec, not button-base medium (500). */
.top-nav__desktop-menu-icon-link {
  --tn-desktop-icon-link-color: var(--ll-color-text-secondary);
  --tn-desktop-icon-link-color-hover: var(--ll-color-text-brand);

  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-3);
  color: var(--tn-desktop-icon-link-color);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  text-decoration: none;
  white-space: nowrap;
  transition: color 120ms ease;
}

.top-nav__desktop-menu-icon-link > .top-nav__icon {
  --tn-icon-size: 24px;
}

.top-nav__desktop-menu-icon-link:hover,
.top-nav__desktop-menu-icon-link:focus-visible {
  color: var(--tn-desktop-icon-link-color-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ============================================================
   3. Mobile menu (below-LG chrome: bar + drill-down drawer)
   ============================================================ */

.top-nav__mobile-menu {
  --tn-mobile-bar-height: 60px;
  --tn-mobile-divider-open: transparent;

  display: block;
  position: relative;
  border-bottom: var(--ll-border-width-hairline) solid transparent;
}

@media (width >= 1024px) {
  .top-nav__mobile-menu {
    display: none;
  }
}

.top-nav__mobile-menu:has(.top-nav__mobile-menu-drawer[aria-hidden="false"]) {
  border-bottom-color: var(--tn-mobile-divider-open);
}

/* SM/MD bar 60px: space-4 (12) pad + space-3/5 pill — see ./top-nav.md */
.top-nav__mobile-menu-bar {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding-block: var(--ll-space-4);
}

.top-nav__mobile-menu-bar .top-nav__pill-link {
  min-height: 0;
  padding-block: var(--ll-space-3);
  padding-inline: var(--ll-space-5);
  gap: var(--ll-space-3);
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  font-weight: var(--ll-text-button-sm-weight);
}

.top-nav__mobile-menu-actions {
  display: flex;
  align-items: center;
  gap: var(--ll-space-7);
  margin-left: auto;
}

@media (width >= 768px) {
  .top-nav__mobile-menu-actions {
    gap: var(--ll-space-5);
  }
}

.top-nav__mobile-menu-burger {
  --tn-mobile-burger-color: var(--ll-color-text-secondary);
  --tn-mobile-burger-color-hover: var(--ll-color-text-brand);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--tn-mobile-burger-color);
  cursor: pointer;
  border-radius: var(--ll-radius-s);
}

.top-nav__mobile-menu-burger:hover,
.top-nav__mobile-menu-burger:focus-visible {
  color: var(--tn-mobile-burger-color-hover);
}

/* Hide the close icon by default - scoped under the burger button so
   the (0,2,0) specificity beats `.top-nav__icon { display: inline-block }`
   declared later in section 11. Without the scope, both rules share
   specificity (0,1,0) and the later base rule wins, leaving both
   icons visible side-by-side. */
.top-nav__mobile-menu-burger .top-nav__mobile-menu-burger-icon--close {
  display: none;
}

.top-nav__mobile-menu-burger[aria-expanded="true"]
  .top-nav__mobile-menu-burger-icon--open {
  display: none;
}

.top-nav__mobile-menu-burger[aria-expanded="true"]
  .top-nav__mobile-menu-burger-icon--close {
  display: inline-flex;
}

/* Drawer panel: viewport-bounded with its own scroll axis so taller-
   than-viewport content scrolls internally. position: absolute (not
   fixed) so the drawer rides the sticky bar. */
.top-nav__mobile-menu-drawer {
  --tn-mobile-drawer-surface: transparent;

  position: absolute;
  top: calc(100% + var(--ll-border-width-hairline));
  left: 0;
  right: 0;
  height: calc(100dvh - var(--tn-mobile-bar-height) - var(--ll-border-width-hairline));
  overflow-y: auto;
  overscroll-behavior: none;
  z-index: 1;
  background: var(--tn-mobile-drawer-surface);

  /* Thin native scrollbar so the drawer's own scrollbar doesn't overpower
   * the drawer chrome, esp. on macOS/Windows where the OS default is thick.
   * scrollbar-width / -color are supported everywhere we target (Chrome 121+,
   * Safari 18.2+, Firefox); no ::-webkit-scrollbar fallback needed. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--ll-color-text-tertiary) 40%, transparent) transparent;
}

.top-nav__mobile-menu-drawer[aria-hidden="true"] {
  display: none;
}

.top-nav__mobile-menu-view {
  display: none;
  flex-direction: column;
  padding: 0 0 var(--ll-space-9);
}

.top-nav__mobile-menu-drawer[data-view="root"] .top-nav__mobile-menu-view[data-view="root"],
.top-nav__mobile-menu-drawer[data-view="plans"] .top-nav__mobile-menu-view[data-view="plans"],
.top-nav__mobile-menu-drawer[data-view="resources"] .top-nav__mobile-menu-view[data-view="resources"] {
  display: flex;
}

.top-nav__mobile-menu-view-header {
  --tn-mobile-view-header-divider: var(--ll-color-border-default);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ll-space-6);
  padding: var(--ll-space-5);
  margin-bottom: var(--ll-space-8);
  border-bottom: var(--ll-border-width-hairline) solid var(--tn-mobile-view-header-divider);
}

/* MD */
@media (width >= 768px) {
  .top-nav__mobile-menu-view-header {
    padding-inline: var(--ll-space-8);
  }
}

.top-nav__mobile-menu-view-back,
.top-nav__mobile-menu-view-close {
  --tn-mobile-view-button-color: var(--ll-color-text-secondary);
  --tn-mobile-view-button-color-hover: var(--ll-color-text-brand);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 0;
  color: var(--tn-mobile-view-button-color);
  cursor: pointer;
  border-radius: var(--ll-radius-s);
  flex: none;
}

.top-nav__mobile-menu-view-back:hover,
.top-nav__mobile-menu-view-back:focus-visible,
.top-nav__mobile-menu-view-close:hover,
.top-nav__mobile-menu-view-close:focus-visible {
  color: var(--tn-mobile-view-button-color-hover);
}

.top-nav__mobile-menu-view-title {
  margin: 0;
  flex: 1;
  text-align: center;
  font-family: var(--ll-text-body-xl-family);
  font-size: var(--ll-text-body-xl-size);
  line-height: var(--ll-text-body-xl-line-height);
  letter-spacing: var(--ll-text-body-xl-letter-spacing);
  font-weight: var(--ds-font-weight-medium);
}

.top-nav__mobile-menu-items {
  --tn-mobile-item-divider: var(--ll-color-border-default);

  list-style: none;
  margin: 0 0 var(--ll-space-7);
  padding: var(--ll-space-6) var(--ll-space-5) 0;
  display: flex;
  flex-direction: column;
}

.top-nav__mobile-menu-items > li {
  margin: 0;
  border-bottom: var(--ll-border-width-hairline) solid var(--tn-mobile-item-divider);
}

.top-nav__mobile-menu-items > li:last-child {
  border-bottom: 0;
}

.top-nav__mobile-menu-items .top-nav__nav-link {
  width: 100%;
  padding-block: var(--ll-space-5);
  font-size: var(--ll-text-body-base-size);
}

.top-nav__mobile-menu-items .top-nav__nav-link[data-action="open-subpanel"]
  > .top-nav__icon:last-child {
  margin-left: auto;
}

.top-nav__mobile-menu-sections {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--ll-space-9);
  padding-inline: var(--ll-space-5);
}

/* MD */
@media (width >= 768px) {
  .top-nav__mobile-menu-sections {
    grid-template-columns: 1fr 1fr;
    gap: var(--ll-space-11) var(--ll-space-8);
    padding-inline: var(--ll-space-8);
  }
}

.top-nav__mobile-menu-sections .top-nav__menu-item--image .top-nav__menu-item-visual {
  width: 64px;
  height: 64px;
  border-radius: var(--ll-radius-md);
}

.top-nav__mobile-menu-footer {
  padding-inline: var(--ll-space-5);
}

/* Drawer footer cluster (Sign in row + Compare plans CTA at MD/SM).
 * Sits below the primary list inside the root view; the primary list
 * already provides its own padding + hairline rules, so the footer just
 * needs to space the CTA pill against the surrounding rails. */
.top-nav__mobile-menu-drawer-footer {
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-7);
  padding: 0 var(--ll-space-5) var(--ll-space-5);
}

.top-nav__mobile-menu-drawer-footer .top-nav__mobile-menu-items {
  margin: 0;
  padding-top: 0;
}

.top-nav__mobile-menu-drawer-footer .top-nav__pill-link--block {
  align-self: stretch;
}

/* Subpanel takeover: hide the bar so the subpanel's own header acts
   as the visual top; expand the drawer to the full viewport. */
.top-nav__mobile-menu:has(.top-nav__mobile-menu-drawer[aria-hidden="false"]:not([data-view="root"]))
  .top-nav__mobile-menu-bar {
  display: none;
}

.top-nav__mobile-menu:has(.top-nav__mobile-menu-drawer[aria-hidden="false"]:not([data-view="root"]))
  .top-nav__mobile-menu-drawer {
  top: 0;
  height: 100dvh;
}

/* ============================================================
   4. Mega-menu (LG+ flyout panel)
   ============================================================ */

.top-nav__mega-menu {
  --tn-mega-surface: transparent;
  --tn-mega-divider: transparent;
  --tn-mega-shadow: none;
}

.top-nav__mega-menu--header {
  position: absolute;
  top: calc(100% + var(--ll-border-width-hairline));
  left: 0;
  right: 0;
  z-index: 1;
  background: var(--tn-mega-surface);
  border-bottom: var(--ll-border-width-hairline) solid var(--tn-mega-divider);
  box-shadow: var(--tn-mega-shadow);
}

.top-nav__mega-menu--header[aria-hidden="true"] {
  display: none;
}

.top-nav__mega-menu-inner {
  box-sizing: border-box;
  display: grid;
  gap: var(--ll-space-7);
  grid-template-columns: repeat(4, 1fr);
  align-items: stretch;

  /* Figma LG/XL mega-menu: 32px top / 40px bottom (asymmetric so the
     link rows feel anchored to the bar without crowding the footer).
     Base rule is the LG/XL value because .top-nav__desktop-menu is
     display:none below 1024px - no mobile override needed. */
  padding-block: var(--ll-space-8) var(--ll-space-9);
}

/* LG-only: collapse to 3 columns when the mega-menu has exactly 3
   direct children (no-promo shape). XL always keeps 4 columns via
   the base rule above. */
@media (width >= 1024px) and (width <= 1439px) {
  .top-nav__mega-menu-inner:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width >= 1440px) {
  .top-nav__mega-menu-inner {
    gap: var(--ll-space-8);
  }
}

.top-nav__mega-menu-promo {
  /* Pin to the last explicit column so the promo auto-adapts to the
     3-column (LG, 3-child) and 4-column (default) mega-menu layouts. */
  grid-column: -2 / -1;
  align-self: stretch;
}

/* ============================================================
   5. Menu item (row inside a mega-menu group)
   ============================================================ */

.top-nav__menu-item {
  --tn-menu-item-hover-bg: var(--ll-color-bg-secondary-hover);
  --tn-menu-item-title-accent-color-hover: var(--ll-color-text-primary);
  --tn-menu-item-visual-color-hover: var(--ll-color-text-primary);
  --tn-menu-item-title-color-hover: var(--ll-color-text-primary);

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-start;
  gap: var(--ll-space-4);
  color: inherit;
  text-decoration: none;
}

.top-nav__menu-item::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--ll-space-5));
  border-radius: var(--ll-radius-md-mobile);
  background: transparent;
  z-index: -1;
  pointer-events: none;
  transition: background 120ms ease;
}

.top-nav__menu-item:hover::before,
.top-nav__menu-item:focus-visible::before {
  background: var(--tn-menu-item-hover-bg);
}

.top-nav__menu-item:hover,
.top-nav__menu-item:focus-visible {
  text-decoration: none;
}

.top-nav__menu-item:hover .top-nav__menu-item-title-accent,
.top-nav__menu-item:focus-visible .top-nav__menu-item-title-accent {
  color: var(--tn-menu-item-title-accent-color-hover);
}

/* Whole-title shift on hover, but only when no accent has been lifted
 * from <strong>/<em>. Strong/em variants must keep the regular text in
 * neutral while only the accent shifts (handled by the rule above);
 * icon and image variants have plain titles and shift in full. */
.top-nav__menu-item:hover .top-nav__menu-item-title:not(:has(.top-nav__menu-item-title-accent)),
.top-nav__menu-item:focus-visible .top-nav__menu-item-title:not(:has(.top-nav__menu-item-title-accent)) {
  color: var(--tn-menu-item-title-color-hover);
}

/* Icon-variant glyph picks up the hover color via currentColor on
 * .top-nav__icon (mask-image + background-color: currentcolor). The
 * image-variant visual is a background-image thumbnail so this rule
 * is a no-op for it. */
.top-nav__menu-item:hover .top-nav__menu-item-visual,
.top-nav__menu-item:focus-visible .top-nav__menu-item-visual {
  color: var(--tn-menu-item-visual-color-hover);
}

.top-nav__menu-item-visual {
  --tn-menu-item-visual-color: var(--ll-color-text-brand);
  --tn-menu-item-image-bg: var(--ll-color-bg-card);

  flex: none;
  color: var(--tn-menu-item-visual-color);
}

.top-nav__menu-item--icon .top-nav__menu-item-visual {
  --tn-icon-size: 24px;
}

.top-nav__menu-item--image .top-nav__menu-item-visual {
  width: 72px;
  height: 56px;
  border-radius: var(--ll-radius-s);
  background: var(--tn-menu-item-image-bg);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.top-nav__menu-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-2);
}

.top-nav__menu-item-title {
  --tn-menu-item-title-color: var(--ll-color-text-secondary);

  display: block;
  margin: 0;
  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
  color: var(--tn-menu-item-title-color);
}

/* Accent span (lifted from authored <strong> / <em> / <span class="accent">
 * by liftTitleAccents in the decorator). The accent is signalled by
 * BRAND COLOR + BODY-BASE EMPHASIS WEIGHT - the surrounding title keeps
 * its native medium weight, so "LifeLock Core" reads as a single visual
 * unit with "Core" tinted to brand-ocean teal-blue and rendered at the bold
 * emphasis weight. Matches the Figma "PROTECTION LEVELS" Inter Tight
 * Bold + #017a96 spec. */
.top-nav__menu-item-title-accent {
  --tn-menu-item-title-accent-color: var(--ll-color-text-brand);

  color: var(--tn-menu-item-title-accent-color);
  font-weight: var(--ll-text-body-base-weight-emphasis);
}

.top-nav__menu-item-copy {
  --tn-menu-item-copy-color: var(--ll-color-text-secondary);

  display: block;
  margin: 0;
  font-family: var(--ll-text-body-xs-family);
  font-size: var(--ll-text-body-xs-size);
  line-height: var(--ll-text-body-xs-line-height);
  letter-spacing: var(--ll-text-body-xs-letter-spacing);
  font-weight: var(--ll-text-body-xs-weight);
  color: var(--tn-menu-item-copy-color);
}

/* ============================================================
   6. Menu item group (header + list + optional footer link)
   ============================================================ */

.top-nav__menu-item-group {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.top-nav__menu-item-group-header {
  --tn-group-header-color: var(--ll-color-text-secondary);

  margin: 0;
  padding: 0;
  font-family: var(--ll-text-tagline-sm-family);
  font-size: var(--ll-text-tagline-sm-size);
  line-height: var(--ll-text-tagline-sm-line-height);
  letter-spacing: var(--ll-text-tagline-sm-letter-spacing);
  font-weight: var(--ll-text-tagline-sm-weight);
  color: var(--tn-group-header-color);
}

.top-nav__menu-item-group-items {
  --tn-group-items-border-top-color: var(--ll-color-border-default);

  list-style: none;
  margin: var(--ll-space-4) 0 0;
  padding: var(--ll-space-6) 0 0;
  border-top: var(--ll-border-width-hairline) solid var(--tn-group-items-border-top-color);
  display: flex;
  flex-direction: column;
  gap: var(--ll-space-8);
}

.top-nav__menu-item-group-items > li {
  margin: 0;
}

.top-nav__menu-item-group-footer {
  --tn-group-footer-link-color: var(--ll-color-text-link);
  --tn-group-footer-link-color-hover: var(--ll-color-text-primary);

  margin: 0;
  margin-top: auto;
  padding-top: var(--ll-space-8);
}

.top-nav__menu-item-group-footer > a {
  color: var(--tn-group-footer-link-color);
  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
  text-decoration: underline;
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-3);
  transition: color 120ms ease;
}

.top-nav__menu-item-group-footer > a:hover,
.top-nav__menu-item-group-footer > a:focus-visible {
  color: var(--tn-group-footer-link-color-hover);
  text-decoration-thickness: 2px;
}

.top-nav__menu-item-group-footer > a > .top-nav__icon {
  --tn-icon-size: 20px;
}

/* ============================================================
   7. Brand link
   ============================================================ */

.top-nav__brand-link {
  --tn-brand-link-color: var(--ll-color-text-secondary);

  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-3);
  color: var(--tn-brand-link-color);
  text-decoration: none;
  line-height: 0;
  flex: none;
}

/* Two theme <img>s inside the brand link; show/hide by theme class. */
.top-nav__brand-link-logo {
  display: block;
  width: 125px;
  height: 32px;
  object-fit: contain;
  object-position: left center;
}

.top-nav__brand-link-logo--transparent {
  display: none;
}

.top-nav--theme-transparent .top-nav__brand-link-logo--light {
  display: none;
}

.top-nav--theme-transparent .top-nav__brand-link-logo--transparent {
  display: block;
}

@media (width >= 1024px) {
  .top-nav__desktop-menu-bar a.top-nav__brand-link {
    /* Raw 10px literal (not in the --ll-space-* ramp); nudges the LG/XL
     * brand logo down within the vertically-centered desktop bar.
     * Scoped to the desktop bar so the (hidden) mobile brand link
     * doesn't inherit the offset at LG+. */
    padding-top: 10px;
  }

  .top-nav__brand-link-logo {
    width: 151px;
    height: 38px;
  }
}

/* ============================================================
   8. Nav link (primary trigger / leaf)
   ============================================================ */

.top-nav__nav-link {
  --tn-nav-link-color: var(--ll-color-text-secondary);
  --tn-nav-link-color-hover: var(--ll-color-text-brand);
  --tn-nav-link-color-active: var(--ll-color-text-brand);
  --tn-nav-link-color-open: var(--ll-color-text-brand);
  --tn-nav-link-trigger-open-bg: var(--ll-color-bg-muted);

  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-2);
  padding: var(--ll-space-2) 0;
  color: var(--tn-nav-link-color);
  font-family: var(--ll-text-body-base-family);
  font-size: var(--ll-text-body-base-size);
  line-height: var(--ll-text-body-base-line-height);
  letter-spacing: var(--ll-text-body-base-letter-spacing);
  font-weight: var(--ll-text-body-base-weight);
  text-decoration: none;
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 120ms ease;
}

.top-nav__nav-link:hover,
.top-nav__nav-link:focus-visible {
  color: var(--tn-nav-link-color-hover);
}

/* tel: variant hover behaviour (the "Call us:" anchor).
 *
 * The Figma "Hovered" state shows the prefix text ("Call us:") staying
 * in the default nav-link colour while only the phone digits flip to
 * the brand colour with an underline. We get that by:
 *   1. wrapping the digits in a `.tfn-element__number` span at
 *      decoration time (see scripts/dynamic-pricing/stamp.js -> `wrapTfnNumberSpan`),
 *   2. styling that span generically in styles/styles.css under
 *      `a.tfn-element:hover .tfn-element__number`, and
 *   3. freezing the anchor-level hover colour + underline here so the
 *      prefix text doesn't inherit a hover colour change and so the
 *      anchor-wide `text-decoration: underline` doesn't visually
 *      compete with the digit-only underline.
 *
 * Specificity: `.top-nav__nav-link.tfn-element:hover` is (0,3,0),
 * beating the generic `.top-nav__nav-link:hover { color }` (0,2,0)
 * which would otherwise flip the entire anchor (and therefore the
 * prefix text via inheritance) to `--tn-nav-link-color-hover`. */
.top-nav__nav-link.tfn-element:hover,
.top-nav__nav-link.tfn-element:focus-visible {
  color: var(--tn-nav-link-color);
  text-decoration: none;
}

.top-nav__nav-link.is-active {
  color: var(--tn-nav-link-color-active);
}

.top-nav__desktop-menu-primary .top-nav__nav-link {
  position: relative;
  isolation: isolate;

  /* Figma nav button = 40px tall: 24 (body-base line) + 8 + 8 padding.
     Base .top-nav__nav-link uses space-2 (4px) -> 32px; primary triggers
     step up to space-3. (WEBEXP figma-check #1) */
  padding-block: var(--ll-space-3);
}

.top-nav__nav-link-label {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.top-nav__nav-link-label::after {
  content: attr(data-label);
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
  user-select: none;
  font-weight: var(--tn-nav-link-weight-open, 600);
}

/* Mega-menu trigger hover / open */
.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:hover,
.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:focus-visible,
.top-nav__desktop-menu-primary .top-nav__nav-link[aria-expanded="true"] {
  --tn-nav-link-weight-open: 600;

  color: var(--tn-nav-link-color-open);
}

.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:hover .top-nav__nav-link-label,
.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:focus-visible .top-nav__nav-link-label,
.top-nav__desktop-menu-primary .top-nav__nav-link[aria-expanded="true"] .top-nav__nav-link-label {
  font-weight: var(--tn-nav-link-weight-open);
}

.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:hover::before,
.top-nav__desktop-menu-primary .top-nav__nav-link[data-action="open-megamenu"]:focus-visible::before,
.top-nav__desktop-menu-primary .top-nav__nav-link[aria-expanded="true"]::before {
  content: '';
  position: absolute;

  /* Top/bottom flush with the 40px trigger (padding now owns the height);
     horizontal insets keep the pill's side breathing room. */
  inset:
    0
    calc(var(--ll-space-3) * -1)
    0
    calc(var(--ll-space-4) * -1);
  background: var(--tn-nav-link-trigger-open-bg);
  border-radius: var(--ll-radius-md-mobile);
  z-index: -1;
}

.top-nav__nav-link-chevron {
  --tn-icon-size: 20px;

  transition: transform 160ms ease;
}

.top-nav__nav-link[aria-expanded="true"] .top-nav__nav-link-chevron {
  transform: rotate(180deg);
}

/* ============================================================
   9. Pill link (Call us, Compare plans)
   ============================================================ */

.top-nav__pill-link {
  --tn-pill-border-color: var(--ll-color-border-strong);
  --tn-pill-bg: transparent;
  --tn-pill-color: var(--ll-color-text-secondary);
  --tn-pill-bg-hover: var(--ll-color-text-secondary);
  --tn-pill-color-hover: var(--ll-color-text-inverse);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ll-space-3);
  min-height: 40px;
  padding-block: 0;
  padding-inline: var(--ll-space-7);
  box-sizing: border-box;
  border-radius: var(--ll-radius-pill);
  border: var(--ll-border-width-hairline) solid var(--tn-pill-border-color);
  background: var(--tn-pill-bg);
  color: var(--tn-pill-color);
  font-family: var(--ll-text-button-lg-family);
  font-size: var(--ll-text-button-lg-size);
  line-height: var(--ll-text-button-lg-line-height);
  letter-spacing: var(--ll-text-button-lg-letter-spacing);
  font-weight: var(--ll-text-button-lg-weight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.top-nav__pill-link:hover,
.top-nav__pill-link:focus-visible {
  background: var(--tn-pill-bg-hover);
  color: var(--tn-pill-color-hover);
}

.top-nav__pill-link--filled {
  --tn-pill-bg: var(--ll-color-brand-secondary);
  --tn-pill-border-color: var(--ll-color-brand-secondary);
  --tn-pill-color: var(--ll-color-text-inverse);
  --tn-pill-bg-hover: var(--ll-color-brand-secondary);
  --tn-pill-color-hover: var(--ll-color-text-inverse);
}

.top-nav__pill-link--filled:hover,
.top-nav__pill-link--filled:focus-visible {
  filter: brightness(0.95);
}

.top-nav__pill-link--block {
  display: flex;
  width: 100%;
  min-height: 56px;
  padding-block: var(--ll-space-5);
}

/* ============================================================
   10. Promo card (featured plug)
   ============================================================ */

.top-nav__promo-card {
  --tn-promo-surface: var(--ll-color-bg-promo);

  /* Figma promo (node 20484:23313): fills the mega-menu column (304 at XL)
     and floors at 126px tall. min-block-size (not a fixed height) so
     longer authored copy grows instead of clipping. */
  box-sizing: border-box;
  min-block-size: 126px;
  background: var(--tn-promo-surface);
  border-radius: var(--ll-radius-md-mobile);
  padding: var(--ll-space-7);
  display: flex;
  flex-direction: column;
}

.top-nav__promo-card-title {
  --tn-promo-title-color: var(--ll-color-text-secondary);

  margin: 0;
  font-family: var(--ll-text-button-base-family);
  font-size: var(--ll-text-button-base-size);
  line-height: var(--ll-text-button-base-line-height);
  letter-spacing: var(--ll-text-button-base-letter-spacing);
  font-weight: var(--ll-text-button-base-weight);
  color: var(--tn-promo-title-color);
}

.top-nav__promo-card-body {
  --tn-promo-body-color: var(--ll-color-text-secondary);

  margin: 0;
  margin-top: var(--ll-space-3);
  font-family: var(--ll-text-body-sm-family);
  font-size: var(--ll-text-body-sm-size);
  line-height: var(--ll-text-body-sm-line-height);
  letter-spacing: var(--ll-text-body-sm-letter-spacing);
  font-weight: var(--ll-text-body-sm-weight);
  color: var(--tn-promo-body-color);
}

.top-nav__promo-card-cta {
  --tn-promo-cta-color: var(--ll-color-text-link);
  --tn-promo-cta-color-hover: var(--ll-color-text-brand);

  margin: 0;
  margin-top: var(--ll-space-8);

  /* Flex wrapper so the row height is driven by the link, not the inherited
     16px/24px line-box strut. Keeps the CTA at the button-sm text height
     (18px) to match Figma (node 20484:23320, "Blog button" = 18.36px). */
  display: flex;
}

.top-nav__promo-card-cta > a {
  color: var(--tn-promo-cta-color);
  font-family: var(--ll-text-button-sm-family);
  font-size: var(--ll-text-button-sm-size);
  line-height: var(--ll-text-button-sm-line-height);
  letter-spacing: var(--ll-text-button-sm-letter-spacing);
  font-weight: var(--ll-text-button-sm-weight);
  text-underline-offset: 2px;
  display: inline-flex;
  align-items: center;
  gap: var(--ll-space-3);
  transition: color 120ms ease;

  /* Pin the row to the text line-height and let the 20px arrow overflow,
     mirroring Figma where the icon extends past the 18px button row instead
     of growing it. This keeps the promo content box at 126px (card 174px). */
  block-size: var(--ll-text-button-sm-line-height);
  overflow: visible;
}

/* Hover parity with the live legacy site (.c-headermenu__promo-link):
 * text flips to the Norton brand-ocean teal-blue (--ll-color-text-brand =
 * --ds-color-brand-mid = #017a96). Do NOT reach for --ll-color-text-link-hover
 * here - it resolves to --ds-color-brand-dark (#00445a), which is a much
 * darker teal that does not match the live legacy hover. */
.top-nav__promo-card-cta > a:hover,
.top-nav__promo-card-cta > a:focus-visible {
  color: var(--tn-promo-cta-color-hover);
}

.top-nav__promo-card-cta > a > .top-nav__icon {
  --tn-icon-size: 20px;
}

/* ============================================================
   11. Icon (canonical icon slot, mask-image + currentColor)
   ------------------------------------------------------------
   The decorator emits a <span class="icon top-nav__icon"
   data-icon-path="..." style="--top-nav-icon-url: url(...)">
   for every @@icon=...@@ token and every internal glyph (panel
   chevron, burger, drawer back / close, group-footer arrow).

   processIconPaths(block) then injects a child <img> for the
   project-wide pipeline; we hide that <img> here and paint the
   visible glyph as a mask of the SVG silhouette tinted with
   the surrounding text color, so chevrons / call / menu glyphs
   theme correctly in both light and transparent variants.
   Single-color glyphs only - multi-color illustrations should
   be authored with @@img=...@@ instead.
   ============================================================ */

.top-nav__icon {
  display: inline-block;
  width: var(--tn-icon-size, 16px);
  height: var(--tn-icon-size, 16px);
  flex: none;
  background-color: currentcolor;
  mask: var(--top-nav-icon-url) center / contain no-repeat;

  /* stylelint-disable-next-line property-no-vendor-prefix --
     Safari < 15.4 still requires the -webkit-mask shorthand. */
  -webkit-mask: var(--top-nav-icon-url) center / contain no-repeat;
}

.top-nav__icon > img {
  display: none;
}

.top-nav__icon--sm { --tn-icon-size: 14px; }
.top-nav__icon--md { --tn-icon-size: 18px; }
.top-nav__icon--lg { --tn-icon-size: 24px; }

.top-nav__icon--rotate-90  { transform: rotate(90deg); }
.top-nav__icon--rotate-180 { transform: rotate(180deg); }
.top-nav__icon--rotate-270 { transform: rotate(270deg); }

/* ============================================================
   11.5. Focus ring (all interactive descendants)
   ============================================================ */

.top-nav a:focus-visible,
.top-nav button:focus-visible {
  outline: var(--ll-border-width-strong) solid var(--ll-color-focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   12. Theme variants (token overrides only)
   ============================================================ */

/* Light theme: solid white bar, primary text. */
.top-nav--theme-light .top-nav__desktop-menu {
  --tn-desktop-divider-open: var(--ll-color-border-default);
}

.top-nav--theme-light .top-nav__desktop-menu-icon-link {
  --tn-desktop-icon-link-color: var(--ll-color-text-secondary);
  --tn-desktop-icon-link-color-hover: var(--ll-color-text-brand);
}

.top-nav--theme-light .top-nav__mobile-menu {
  --tn-mobile-divider-open: var(--ll-color-border-default);
}

.top-nav--theme-light .top-nav__mobile-menu-burger {
  --tn-mobile-burger-color: var(--ll-color-text-secondary);
  --tn-mobile-burger-color-hover: var(--ll-color-text-brand);
}

.top-nav--theme-light .top-nav__mobile-menu-drawer {
  --tn-mobile-drawer-surface: var(--ll-color-bg-default);
}

.top-nav--theme-light .top-nav__mobile-menu-view-header {
  --tn-mobile-view-header-divider: var(--ll-color-border-default);
}

.top-nav--theme-light .top-nav__mobile-menu-view-back,
.top-nav--theme-light .top-nav__mobile-menu-view-close {
  --tn-mobile-view-button-color: var(--ll-color-text-secondary);
  --tn-mobile-view-button-color-hover: var(--ll-color-text-brand);
}

.top-nav--theme-light .top-nav__mobile-menu-items {
  --tn-mobile-item-divider: var(--ll-color-border-default);
}

.top-nav--theme-light .top-nav__mega-menu {
  --tn-mega-surface: var(--ll-color-bg-default);
  --tn-mega-divider: var(--ll-color-border-default);
  --tn-mega-shadow: var(--ll-shadow-overlay);
}

.top-nav--theme-light .top-nav__brand-link {
  --tn-brand-link-color: var(--ll-color-text-secondary);
}

.top-nav--theme-light .top-nav__nav-link {
  --tn-nav-link-color: var(--ll-color-text-secondary);
  --tn-nav-link-color-hover: var(--ll-color-text-brand);
  --tn-nav-link-color-active: var(--ll-color-text-brand);
  --tn-nav-link-color-open: var(--ll-color-text-brand);
  --tn-nav-link-trigger-open-bg: var(--ll-color-bg-muted);
}

/* Transparent theme: bar reads through, white text/icons/borders. */
.top-nav--theme-transparent .top-nav__desktop-menu {
  --tn-desktop-divider-open: transparent;
}

.top-nav--theme-transparent .top-nav__desktop-menu-icon-link {
  --tn-desktop-icon-link-color: var(--ll-color-text-inverse);
  --tn-desktop-icon-link-color-hover: var(--ll-color-brand-secondary);
}

.top-nav--theme-transparent .top-nav__mobile-menu {
  --tn-mobile-divider-open: transparent;
}

.top-nav--theme-transparent .top-nav__mobile-menu-burger {
  --tn-mobile-burger-color: var(--ll-color-text-inverse);
  --tn-mobile-burger-color-hover: var(--ll-color-brand-secondary);
}

.top-nav--theme-transparent .top-nav__mobile-menu-drawer {
  --tn-mobile-drawer-surface: var(--ll-color-bg-default);
}

.top-nav--theme-transparent .top-nav__mobile-menu-view-header {
  --tn-mobile-view-header-divider: var(--ll-color-border-default);
}

.top-nav--theme-transparent .top-nav__mobile-menu-view-back,
.top-nav--theme-transparent .top-nav__mobile-menu-view-close {
  --tn-mobile-view-button-color: var(--ll-color-text-secondary);
  --tn-mobile-view-button-color-hover: var(--ll-color-text-brand);
}

.top-nav--theme-transparent .top-nav__mobile-menu-items {
  --tn-mobile-item-divider: var(--ll-color-border-default);
}

.top-nav--theme-transparent .top-nav__mega-menu {
  --tn-mega-surface: var(--ll-color-bg-default);
  --tn-mega-divider: var(--ll-color-border-default);
  --tn-mega-shadow: var(--ll-shadow-overlay);
}

.top-nav--theme-transparent .top-nav__brand-link {
  --tn-brand-link-color: var(--ll-color-text-inverse);
}

.top-nav--theme-transparent .top-nav__desktop-menu .top-nav__nav-link {
  --tn-nav-link-color: var(--ll-color-text-inverse);
  --tn-nav-link-color-hover: var(--ll-color-brand-secondary);
  --tn-nav-link-color-active: var(--ll-color-brand-secondary);
  --tn-nav-link-trigger-open-bg: transparent;
}

.top-nav--theme-transparent .top-nav__pill-link {
  --tn-pill-border-color: var(--ll-color-border-inverse);
  --tn-pill-bg: transparent;
  --tn-pill-color: var(--ll-color-text-inverse);
  --tn-pill-bg-hover: var(--ll-color-bg-default);
  --tn-pill-color-hover: var(--ll-color-text-secondary);
}

.top-nav--theme-transparent .top-nav__pill-link--filled {
  --tn-pill-bg: var(--ll-color-brand-secondary);
  --tn-pill-border-color: var(--ll-color-brand-secondary);
  --tn-pill-color: var(--ll-color-text-inverse);
  --tn-pill-bg-hover: var(--ll-color-brand-secondary);
  --tn-pill-color-hover: var(--ll-color-text-inverse);
}