/* Scripps Tweaks: top-right-nav (STW_TopRightNav) */
/* A filled box. The theme's colour variables depend on the section they are used in (--color-background is white at
   the top of the page), so the nav is scoped to the theme's own dark theme with data-theme="dark" on it: in there
   --color-background is the dark blue and --color-text is white. */
/* The colours the box uses come from four variables, so a chosen background colour only has to change them: the
   default is white text, the footer's hairline grey, the orange dot and the gold hover sweep. */
.stwTopNav__nav {
  --stw-text: var(--color-white);
  --stw-rule: var(--color-rule-on-dark);
  --stw-dot: var(--color-oxide-orange);
  --stw-sweep: linear-gradient(to right, rgba(255, 201, 81, 0), var(--color-infinity-gold));
  --stw-room-below: 32px; /* the least gap kept between the box and a block below it (stw-top-right-nav.js reads this) */
  background: var(--color-background);
  border-radius: 10px;
  box-sizing: border-box;
  color: var(--stw-text);
  padding: 16px 20px 16px 28px; /* a little more on the left, where the current page's dot sits */
}

/* On desktop the box is at most 250px wide (the column beside the Page Intro is wider), left-aligned in it like the
   sidebar's blocks. On narrower screens it stays full width under the intro. */
@media (min-width: 1024px) {
  .stwTopNav__nav {
    max-width: 250px;
  }
}

/* A light background colour (white, light grey, the light brand colours): dark text and a darker hairline. */
.stwTopNav__nav--onLight {
  --stw-text: var(--color-strength);
  --stw-rule: var(--color-strength-40);
}

/* A gold or orange background: the gold hover sweep and the orange dot would disappear into it, so the sweep is white
   and the dot takes the text colour. */
.stwTopNav__nav--gold {
  --stw-dot: var(--stw-text);
  --stw-sweep: linear-gradient(to right, rgba(255, 255, 255, 0), var(--color-white));
}

.stwTopNav__title {
  color: var(--stw-text);
  font-family: Lunaquete, Georgia, 'Times New Roman', serif;
  font-size: 23px;
  font-weight: 400;
  margin: 0 0 8px;
}

/* The links are rows in the style of the site footer's menus (SR_SiteFooter .siteFooter__menu), written here with the
   theme's own variables and its own arrow icon so they look and behave the same:
   - a hairline above each row (and one under the last), stopping 16px short of the right edge, with the arrow there;
   - on hover a gold gradient fades in behind the row, the hairline grows to the full width and rounds into a cap on
     the right (half the row height), and the arrow turns black;
   - the current page is bold (the theme's 600 weight) with the orange dot to the left of its label. */
.stwTopNav__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Indented levels are nested lists. The rows stay full width (so the rules and the hover run across the box); only the
   label steps in, 16px per level, and the current page's dot moves with it. */
.stwTopNav__list--l0 > .stwTopNav__item > .stwTopNav__link {
  --stw-indent: 0px;
}

.stwTopNav__list--l1 > .stwTopNav__item > .stwTopNav__link {
  --stw-indent: 16px;
}

.stwTopNav__list--l2 > .stwTopNav__item > .stwTopNav__link,
.stwTopNav__list--l3 > .stwTopNav__item > .stwTopNav__link {
  --stw-indent: 32px;
}

.stwTopNav__link {
  align-items: center;
  color: var(--stw-text);
  display: flex;
  isolation: isolate; /* keeps the gradient (behind the text) inside the row */
  justify-content: space-between;
  min-block-size: 34px;
  padding-block: 7px; /* with the label's 2px of top padding a one-line row is the footer's 34px */
  padding-inline: var(--stw-indent, 0) 16px; /* 16px at the end keeps the arrow inside the cap */
  position: relative;
  text-decoration: none;
}

/* The theme greys any link on hover; the footer's rows keep their white text, so these do too. */
.stwTopNav__link:hover,
.stwTopNav__link:focus-visible {
  color: var(--stw-text);
  text-decoration: none;
}

/* The hairline: only its colour, radius and right inset change on hover, so nothing shifts. */
.stwTopNav__link::after {
  border-block-end: 0.5px solid transparent;
  border-block-start: 0.5px solid var(--stw-rule);
  border-inline-end: 0.5px solid transparent;
  border-radius: 0;
  content: '';
  inset: 0;
  inset-inline-end: 16px; /* stops at the arrow tip, reaches the edge on hover */
  pointer-events: none;
  position: absolute;
  transition: border-color 0.4s ease, border-radius 0.4s ease, inset-inline-end 0.4s ease;
}

/* The gold gradient: full width, fades in place behind the label. */
.stwTopNav__link::before {
  background: var(--stw-sweep);
  border-radius: 0 17px 17px 0;
  content: '';
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: opacity 0.25s ease-out; /* quick on mouse-out so it is gone before the cap squares off */
  z-index: -1;
}

/* One more hairline under the last row (the list ends 16px short of the edge, like the rules). */
.stwTopNav__list--l0::after {
  border-block-start: 0.5px solid var(--stw-rule);
  content: '';
  display: block;
  margin-inline-end: 16px;
}

.stwTopNav__label {
  font-family: var(--font-family-maison-neue);
  font-size: 13px; /* the footer's rows use 14px; one step smaller here */
  font-weight: 400;
  line-height: 1.3;
  padding-block-start: 2px; /* Maison Neue sits a little high in its line box: centres it on the arrow */
}

.stwTopNav__link.is-current .stwTopNav__label {
  font-weight: 600;
}

/* Phones: like the theme's sidebar type and the footer's rows, 16px text and taller rows to tap. */
@media (max-width: 767px) {
  .stwTopNav__link {
    min-block-size: 48px;
    padding-block: 14px;
  }

  .stwTopNav__label {
    font-size: 16px;
  }
}

.stwTopNav__link .icon--menuArrow {
  color: var(--stw-text);
  display: block;
  flex-shrink: 0;
}

.stwTopNav__dot {
  background-color: var(--stw-dot);
  block-size: 6px;
  border-radius: 50%;
  inline-size: 6px;
  inset-block-start: 50%;
  inset-inline-start: calc(var(--stw-indent, 0px) - 14px); /* in the box's left padding, beside the label */
  position: absolute;
  transform: translateY(calc(-50% - 1px));
}

@media (hover: hover) {
  .stwTopNav__link:hover::after {
    border-block-end-color: var(--stw-rule);
    border-inline-end-color: var(--stw-rule);
    border-radius: 0 17px 17px 0;
    inset-inline-end: 0;
  }

  .stwTopNav__link:hover::before {
    opacity: 1;
    transition: opacity 1s ease-in; /* slow in, so the gold comes up gradually behind the cap */
  }

  .stwTopNav__link:hover .icon--menuArrow {
    color: var(--color-black);
  }

  /* With a row hovered, the next row's top hairline steps aside so the cap's lower edge is not doubled. */
  .stwTopNav__item:has(> .stwTopNav__link:hover) + .stwTopNav__item > .stwTopNav__link::after,
  .stwTopNav__item:has(> .stwTopNav__link:hover) > .stwTopNav__list > .stwTopNav__item:first-child > .stwTopNav__link::after {
    border-block-start-color: transparent;
    transition: border-color 0.3s ease;
  }

  .stwTopNav__list--l0:has(> .stwTopNav__item:last-child:not(:has(.stwTopNav__item)) > .stwTopNav__link:hover)::after {
    border-block-start-color: transparent; /* the last row's own cap carries the bottom line while it is hovered */
  }
}

/* The same look for keyboard focus. */
.stwTopNav__link:focus-visible::after {
  border-block-end-color: var(--stw-rule);
  border-inline-end-color: var(--stw-rule);
  border-radius: 0 17px 17px 0;
  inset-inline-end: 0;
}

.stwTopNav__link:focus-visible::before {
  opacity: 1;
}

.stwTopNav__link:focus-visible .icon--menuArrow {
  color: var(--color-black);
}

/* Up beside the Page Intro: the intro is a 24-column grid whose title and lede stop at column 17 (the RFS hero at
   17), so columns 19 to 24 are free at the top right. Below 1024px there is no room, so it drops under the intro. */
.pageIntro > .stwTopNav--top {
  align-self: start;
  grid-column: 19 / -1;
  grid-row: 1 / span 2;
  margin-block-start: 8px;
}

@media (max-width: 1023px) {
  .pageIntro > .stwTopNav--top {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-block-start: 32px;
  }

  /* Mobile placement "Below content": the theme draws the block again after the content (.stwTopNav--below), so on a
     narrow screen the copy under the intro is not drawn. A page where that second copy is missing keeps this one. */
  body:has(.stwTopNav--below) .stwTopNav--top[data-stw-mobile='below'] {
    display: none;
  }
}

/* The below-content copy is for narrow screens only; from 1024px the list is up beside the Page Intro. */
@media (min-width: 1024px) {
  .stwTopNav--below {
    display: none;
  }
}

/* Following the page (desktop only). stw-top-right-nav.js adds .is-floating (the nav is lifted out as a fixed box at the
   spot where it sits, with its space kept in the Page Intro) and .is-away (it shrinks toward its top-right corner and
   fades while a block would run under it). z-index 90 is under the site header (200) and its menus. */
@media (min-width: 1024px) {
  .stwTopNav[data-stw-follow] .stwTopNav__nav {
    transform-origin: top right;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0s;
  }

  .stwTopNav__nav.is-floating {
    box-sizing: border-box;
    margin: 0 0 var(--stw-room-below); /* room below the box: stw-top-right-nav.js keeps this much clear between it and the block below */
    position: fixed;
    z-index: 90;
  }

  /* Only a list taller than the window (a whole menu; the script adds this class only then) scrolls inside itself, with
     the scrollbar hidden (it still scrolls with the wheel, a trackpad, touch and the keyboard). A list that fits never
     scrolls, so no scrollbar can show up on it, not even for a fraction of a pixel of rounding. */
  .stwTopNav__nav.is-scrollable {
    -ms-overflow-style: none;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }

  .stwTopNav__nav.is-scrollable::-webkit-scrollbar {
    display: none;
  }

  .stwTopNav[data-stw-follow] .stwTopNav__nav.is-away {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s;
    visibility: hidden; /* out of the tab order and from screen readers once it has faded */
  }
}

@media (prefers-reduced-motion: reduce) {
  .stwTopNav[data-stw-follow] .stwTopNav__nav,
  .stwTopNav[data-stw-follow] .stwTopNav__nav.is-away {
    transition: none;
  }
}

@media print {
  .stwTopNav__nav.is-floating {
    position: static;
  }

  .stwTopNav__nav.is-nudged {
    transform: none !important;
  }
}

/* Between 1024px and 1439px the theme (QA #137) collapses the Page Intro's title and description to the full
   width of the grid. That cannot share a row with the nav in columns 19 to 24, so the grid dropped the title
   underneath it. While the nav is up beside the intro, keep the title and description in columns 1 to 17. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .robustStory__hero:has(> flynt-component[name='SR_PageIntro']) > flynt-component[name='SR_PageIntro']:has(> .stwTopNav--top) :is(.pageIntro__title, .pageIntro__description) {
    grid-column: 1 / 18;
  }
}