/* ==========================================================================
   Page Navigation - styles
   --------------------------------------------------------------------------
   You normally do NOT need to edit this file.
   Colors, spacing and fonts are controlled by the CSS variables below, and the
   builder tool sets them for you on the embed code it generates.

   The bar has two layouts. It swaps between them based on how much room the
   bar itself has - not the size of the screen - so it also looks right inside
   a narrow column:
     - wide   : label on the left, links on the right, all on one line
     - narrow : a tap-to-open dropdown, or a row you swipe sideways

   Which of the two narrow styles you get is set by data-phone="dropdown"
   (the default) or data-phone="swipe" in the embed code.
   ========================================================================== */

.sn-nav {
  /* ---- Things you can change ---- */
  --sn-bg: #ececec;                /* bar background */
  --sn-text: #111111;              /* label + current link color */
  --sn-accent: #111111;            /* underline under the current page */
  --sn-muted: rgba(0, 0, 0, 0.55); /* color of the other links */
  --sn-divider: rgba(0, 0, 0, 0.15); /* hairline above the open dropdown */
  /* Type. "inherit" means "whatever this page already uses", so by default the
     bar picks up the site's own fonts, sizes and weights instead of imposing
     its own. Set any of these to a real value to override the site. */
  --sn-font: inherit;
  --sn-font-size: inherit;
  --sn-font-weight: inherit;
  --sn-letter-spacing: inherit;
  --sn-text-transform: inherit;
  --sn-title-size: inherit;
  --sn-title-weight: inherit;
  --sn-height: 4.5rem;             /* bar height in the wide layout */
  --sn-gap: 2.5rem;                /* space between links */
  --sn-pad-x: 2rem;                /* space from the left/right edge */
  --sn-radius: 0px;                /* rounded corners on the bar */

  /* ---- Layout plumbing (leave alone) ---- */
  box-sizing: border-box;
  display: block;
  position: relative;
  width: 100%;
  background: var(--sn-bg);
  border-radius: var(--sn-radius);
  font-family: var(--sn-font);
  overflow: hidden;
}

.sn-nav *,
.sn-nav *::before,
.sn-nav *::after {
  box-sizing: inherit;
}

/* Sticks the bar to the top of the screen as you scroll. Turned on by the
   builder's "Stick to top when scrolling" option. */
.sn-nav[data-sticky="true"] {
  position: sticky;
  top: 0;
  z-index: 900;
}

.sn-nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-gap);
  min-height: var(--sn-height);
  padding: 0 var(--sn-pad-x);
}

/* With no label, the links start from the left instead of the right. */
.sn-nav[data-has-title="false"] .sn-nav__inner {
  justify-content: flex-start;
}

/* Holds the label and, in the narrow dropdown layout, the arrow button - so
   the two sit on the same line. */
.sn-nav__head {
  display: flex;
  align-items: center;
  min-width: 0;
}

/* ---- The label on the left (e.g. "Watch Online") ---- */
.sn-nav__title {
  margin: 0;
  color: var(--sn-text);
  white-space: nowrap;
  text-decoration: none;
}

/* Type is only forced on the plain version. When the label is a real heading
   (data-title-tag="h4") we deliberately set no type rules, so the site's own
   heading style comes through untouched. */
.sn-nav__title--plain {
  font-size: var(--sn-title-size);
  font-weight: var(--sn-title-weight);
  letter-spacing: var(--sn-letter-spacing);
  text-transform: var(--sn-text-transform);
}

/* A link inside a heading label. */
.sn-nav__title-link {
  color: inherit;
  text-decoration: none;
}

a.sn-nav__title:hover,
.sn-nav__title-link:hover {
  opacity: 0.7;
}

/* ---- The links ----
   The strip can always scroll sideways. That way nothing ever gets cut off,
   even if someone adds more links than there is room for. */
.sn-nav__scroller {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;             /* hide the scrollbar (Firefox) */
  min-width: 0;
}

.sn-nav__scroller::-webkit-scrollbar {
  display: none;                     /* hide the scrollbar (Safari/Chrome) */
}

.sn-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sn-gap);
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The paragraph wrapper around a link. Its only job is to carry the site's
   paragraph style, so it must not add space of its own. */
.sn-nav__text {
  margin: 0;
}

.sn-nav__link {
  display: inline-block;
  padding: 0.35em 0;
  line-height: 1.2;
  color: var(--sn-muted);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}

/* The builder's bold options. These deliberately win over everything else,
   including the site's own heading and paragraph weights, because they are a
   choice someone made on purpose. */
.sn-nav[data-bold-label="true"] .sn-nav__title {
  font-weight: 700;
}

.sn-nav[data-bold-links="true"] .sn-nav__link {
  font-weight: 700;
}

/* As with the label: only the plain version takes our type settings. */
.sn-nav__link--plain {
  font-size: var(--sn-font-size);
  font-weight: var(--sn-font-weight);
  letter-spacing: var(--sn-letter-spacing);
  text-transform: var(--sn-text-transform);
}

.sn-nav__link:hover,
.sn-nav__link:focus-visible {
  color: var(--sn-text);
}

/* The page the visitor is currently on */
.sn-nav__link[aria-current="page"] {
  color: var(--sn-text);
  border-bottom-color: var(--sn-accent);
}

.sn-nav__link:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- The dropdown button (only used in the narrow dropdown layout) ---- */
.sn-nav__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  width: 100%;
  padding: 0.95rem var(--sn-pad-x);
  border: 0;
  background: none;
  color: var(--sn-text);
  font: inherit;
  font-size: var(--sn-font-size);
  font-weight: var(--sn-font-weight);
  letter-spacing: var(--sn-letter-spacing);
  text-transform: var(--sn-text-transform);
  text-align: left;
  cursor: pointer;
}

.sn-nav__toggle:focus-visible {
  outline: 2px solid var(--sn-accent);
  outline-offset: -3px;
}

/* The little chevron, drawn with two borders so there is no image to load. */
.sn-nav__chevron {
  flex: none;
  width: 0.55em;
  height: 0.55em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-25%) rotate(45deg);
  transition: transform 0.2s ease;
}

.sn-nav[data-open="true"] .sn-nav__chevron {
  transform: translateY(15%) rotate(225deg);
}

/* Soft fade on the right edge, so it is obvious there is more to swipe to.
   It only appears while there is more list to scroll. */
.sn-nav[data-overflow="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 3rem;
  pointer-events: none;
  background: linear-gradient(to right, transparent, var(--sn-bg));
}

/* ==========================================================================
   Narrow layout (phones, and any column too tight for one line)
   ========================================================================== */
.sn-nav[data-narrow="true"] {
  --sn-gap: 1.5rem;
  --sn-pad-x: 1.25rem;
  --sn-height: auto;
}

.sn-nav[data-narrow="true"] .sn-nav__inner {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.sn-nav[data-narrow="true"] .sn-nav__title {
  padding: 0.9rem var(--sn-pad-x) 0.5rem;
}

/* ---- Narrow style 1: swipeable row (data-phone="swipe") ---- */
.sn-nav[data-narrow="true"][data-phone="swipe"] .sn-nav__list {
  padding: 0 var(--sn-pad-x) 0.9rem;
}

.sn-nav[data-narrow="true"][data-phone="swipe"][data-has-title="false"] .sn-nav__list {
  padding-top: 0.9rem;
}

/* ---- Narrow style 2: dropdown (data-phone="dropdown") ----
   The list is hidden until the button is tapped, then it opens underneath and
   pushes the page down - so it can never be clipped or hidden behind anything.
   The button doubles as a "you are here" label. */
.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__toggle {
  display: flex;
}

/* The label and the arrow share one line, arrow pinned to the right. */
.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__head {
  justify-content: space-between;
  width: 100%;
}

.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__title {
  padding: 0.9rem 0 0.9rem var(--sn-pad-x);
}

/* Beside a label, the button is just the arrow - but still a full-height,
   comfortable tap target. */
.sn-nav[data-narrow="true"][data-phone="dropdown"][data-has-title="true"] .sn-nav__toggle {
  width: auto;
  align-self: stretch;
  padding: 0.9rem var(--sn-pad-x);
}

.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__scroller {
  display: none;
  border-top: 1px solid var(--sn-divider);
}

.sn-nav[data-narrow="true"][data-phone="dropdown"][data-open="true"] .sn-nav__scroller {
  display: block;
}

.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__list {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 0;
  padding: 0.35rem 0 0.6rem;
}

/* Big tap targets, and the underline becomes a bar down the left instead. */
.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__link {
  display: block;               /* so the whole row is tappable, not just the words */
  padding: 0.75rem var(--sn-pad-x);
  border-bottom: 0;
}

.sn-nav[data-narrow="true"][data-phone="dropdown"] .sn-nav__link[aria-current="page"] {
  box-shadow: inset 3px 0 0 var(--sn-accent);
}

/* Respect the visitor's "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
  .sn-nav__link {
    transition: none;
  }
}