/* Header of the default layout (templates/public/default/common/_header.html.twig).
 *
 * The client's finished navigation design (October 2026), ported as delivered:
 * the same palette, fonts, sizes and spacing. Every selector starts with .snav,
 * so nothing reaches other layouts, and Bootstrap 4, style.css and the page
 * stylesheets cannot change the bar (see the link resets below).
 *
 * Changes from the client file that the site needs:
 *  - position:fixed, not sticky: style.css sets overflow-x:hidden on html and
 *    body, which breaks position:sticky on the whole site.
 *  - One open state, set by assets/public/js/header-nav.js (.is-open on an item,
 *    .snav--open on the root). The client's :hover/:focus-within rules apply
 *    only until the script runs (.snav:not(.snav--js)).
 *  - The burger takes over at 1269.98px, not 760px: the client's row needs
 *    1,197px logged out and more signed in. Keep the number in step with
 *    header-nav.js.
 *  - The burger panel also holds the account links (the client hides them).
 */

.snav {
  --snav-black: #161616;
  --snav-white: #fff;
  --snav-line: #E9E2E0;
  --snav-pink: #D35DA8;
  --snav-pink-deep: #A93C82;
  --snav-sans: 'DM Sans', system-ui, sans-serif;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: var(--snav-black);
  color: var(--snav-white);
  font-family: var(--snav-sans);
  line-height: normal;
  -webkit-font-smoothing: antialiased;
}

/* The bar is out of the flow: push the page down by its height, and make anchor
   jumps (assets/public/js/smooth-scroll.js reads this) land below it. */
.snav + main {
  padding-top: 80px;
}

html:has(> body > .snav) {
  scroll-padding-top: 80px;
}

/* Link resets. style.css and some page stylesheets (webinars.css,
   milestone-moments.css) set `a { font-family: Inter; color: #000 }`, and the
   page stylesheets load after this file. One class plus `a` outranks them in
   any order. Bootstrap recolours and underlines a:hover. A rule below that sets
   a link's font or colour needs two classes (.snav .snav__login) to beat this. */
.snav a {
  color: inherit;
  font-family: inherit;
  text-decoration: none;
}

.snav a:hover {
  color: inherit;
  text-decoration: none;
}

/* The homepage's common.css fades every link and button (`a`, `button`
   transitions). The client file has no transition on these. */
.snav .snav__logo,
.snav .snav__login,
.snav .snav__burger {
  transition: none;
}

/* Bootstrap rings every focused button, also after a mouse click. Keep the ring
   for the keyboard only, as the browser does in the client file. */
.snav button:focus:not(:focus-visible) {
  outline: none;
}

.snav__bar {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 80px;
}

/* 60px tall in the 80px bar leaves 10px above and below the logo. */
.snav__logo {
  display: flex;
  flex: 0 0 auto;
}

.snav__logo img {
  width: auto;
  height: 60px;
}

/* The menus and the account links share one <nav>. Auto margins on the menu
   split the free space evenly on both sides of it, as the client's
   space-between bar does. The panel never shrinks below its content, so it does
   not push the account links off screen. */
.snav__panel {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.snav__menu {
  display: flex;
  align-items: stretch;
  height: 100%;
  list-style: none;
  margin: 0 auto;
  padding: 0;
}

.snav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.snav__top {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 100%;
  padding: 0 14px;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #D9D4D6;
  font-family: var(--snav-sans);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}

.snav__top svg {
  transition: transform .2s;
}

.snav__item.is-open .snav__top {
  color: var(--snav-white);
  border-bottom-color: var(--snav-pink);
}

.snav__item.is-open .snav__top svg {
  transform: rotate(180deg);
}

.snav__drop {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 250px;
  padding: 14px 0;
  background: var(--snav-white);
  color: var(--snav-black);
  border-top: 2px solid var(--snav-pink);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}

.snav__item.is-open .snav__drop {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.snav__drop a {
  display: block;
  padding: 11px 24px;
  font-size: 15px;
  font-weight: 500;
  transition: background .15s, color .15s;
}

.snav .snav__drop a:hover,
.snav .snav__drop a:focus {
  background: #F8E8F1;
  color: var(--snav-pink-deep);
  outline: none;
}

.snav__drop:focus {
  outline: none;
}

.snav__drop hr {
  border: 0;
  border-top: 1px solid var(--snav-line);
  margin: 8px 24px;
}

.snav__dhead {
  display: block;
  padding: 6px 24px 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--snav-pink-deep);
}

.snav__auth {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* The bar link is white text on black, so these beat the reset above. */
.snav .snav__login {
  color: #D9D4D6;
}

.snav .snav__login:hover {
  color: var(--snav-pink);
}

.snav__join {
  border: 1px solid var(--snav-white);
  padding: 12px 22px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.snav .snav__join:hover {
  background: var(--snav-white);
  color: var(--snav-black);
}

.snav__burger {
  display: none;
  background: none;
  border: 1px solid #444;
  color: var(--snav-white);
  width: 44px;
  height: 44px;
  cursor: pointer;
}

/* Before header-nav.js runs (or without JavaScript): the client's own hover and
   focus rules open the menus. */
@media (min-width: 1270px) {
  .snav:not(.snav--js) .snav__item:hover .snav__top,
  .snav:not(.snav--js) .snav__item:focus-within .snav__top {
    color: var(--snav-white);
    border-bottom-color: var(--snav-pink);
  }

  .snav:not(.snav--js) .snav__item:hover .snav__top svg,
  .snav:not(.snav--js) .snav__item:focus-within .snav__top svg {
    transform: rotate(180deg);
  }

  .snav:not(.snav--js) .snav__item:hover .snav__drop,
  .snav:not(.snav--js) .snav__item:focus-within .snav__drop {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
}

/* Burger. Keep 1269.98px in step with BURGER_QUERY in header-nav.js. */
@media (max-width: 1269.98px) {
  .snav__panel {
    display: none;
  }

  .snav__burger {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .snav.snav--open .snav__panel {
    display: block;
    position: absolute;
    top: 80px;
    left: 0;
    right: 0;
    height: auto;
    max-height: calc(100vh - 80px);
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 0 20px;
    background: var(--snav-black);
    border-top: 1px solid #2C2C2C;
  }

  .snav.snav--open .snav__menu {
    flex-direction: column;
    height: auto;
    margin: 0;
  }

  .snav.snav--open .snav__item {
    flex-direction: column;
    align-items: stretch;
  }

  .snav.snav--open .snav__top {
    height: 56px;
    padding: 0 24px;
    justify-content: space-between;
    border-bottom: 1px solid #2C2C2C;
  }

  .snav.snav--open .snav__item.is-open .snav__top {
    border-bottom-color: var(--snav-pink);
  }

  .snav.snav--open .snav__drop {
    display: none;
    position: static;
    padding: 6px 0;
    background: #1F1F1F;
    color: #E4DFE1;
    border-top: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .snav.snav--open .snav__item.is-open .snav__drop {
    display: block;
  }

  .snav.snav--open .snav__drop a:hover {
    background: #2a2a2a;
    color: var(--snav-pink);
  }

  .snav.snav--open .snav__drop hr {
    border-color: #333;
  }

  /* The account links: the bar's own styles, in a row under the menus. */
  .snav.snav--open .snav__auth {
    padding: 20px 24px 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .snav__top,
  .snav__top svg,
  .snav__drop,
  .snav__drop a,
  .snav__join {
    transition: none;
  }
}