/*
 * Black navigation for every marketing page (owner's choice, 2026-10-17:
 * "this black" from iconly.pro). A solid black bar like Apple's Dynamic
 * Island, the white PLAY IT logo with its gold triangle, thin white line
 * icons (our own, drawn in the iconly.pro style: 24px grid, 1.5px rounded
 * strokes) and the glass sign-up pill. The black menu panel follows
 * hiibiza.com: huge white links on black.
 * Load after each page's own stylesheets.
 */

:root {
  --nav-black: #000;
  --nav-raised: #1c1c1e;
  --nav-raised-hover: #2c2c2e;
  --nav-line: rgba(255, 255, 255, 0.1);
  --nav-ink: #fff;
  --nav-soft: rgba(255, 255, 255, 0.62);
  --icon-user: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='7.75' r='3.75'/%3E%3Cpath d='M5 20.25c0-3.7 3.1-5.9 7-5.9s7 2.2 7 5.9'/%3E%3C/svg%3E");
  --icon-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.25'/%3E%3Cpath d='M3.75 12h16.5'/%3E%3Cpath d='M12 3.75c2.2 2.35 3.3 5.1 3.3 8.25s-1.1 5.9-3.3 8.25c-2.2-2.35-3.3-5.1-3.3-8.25s1.1-5.9 3.3-8.25z'/%3E%3C/svg%3E");
  --icon-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 9h15'/%3E%3Cpath d='M4.5 15h10'/%3E%3C/svg%3E");
  --icon-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 6.5l11 11'/%3E%3Cpath d='M17.5 6.5l-11 11'/%3E%3C/svg%3E");
}

/* ---------- Icons ---------- */
.nav-icon,
.site-header .header-login::before,
.marketing-popover summary::before,
.marketing-site-header .marketing-header-menu::before,
.marketing-menu__close::before,
.menu-panel .menu-panel__top .menu-button::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.site-header .header-login::before {
  --icon: var(--icon-user);
}
.marketing-popover summary::before {
  --icon: var(--icon-globe);
  width: 1.05rem;
  height: 1.05rem;
}
.marketing-site-header .marketing-header-menu::before {
  --icon: var(--icon-menu);
}
.marketing-menu__close::before,
.menu-panel .menu-panel__top .menu-button::before {
  --icon: var(--icon-close);
  width: 1.1rem;
  height: 1.1rem;
}

/* ---------- Icon motion ---------- */
.site-header .header-login::before,
.marketing-popover summary::before,
.marketing-site-header .marketing-header-menu::before,
.marketing-menu__close::before,
.menu-panel .menu-panel__top .menu-button::before {
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-header .header-login:hover::before,
.site-header .header-login:focus-visible::before {
  animation: nav-icon-hop 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.marketing-popover summary:hover::before,
.marketing-popover[open] summary::before {
  transform: rotate(180deg);
}
.marketing-site-header .marketing-header-menu:hover::before {
  transform: scaleX(-1);
}
.marketing-menu__close:hover::before,
.menu-panel .menu-panel__top .menu-button:hover::before {
  transform: rotate(90deg);
}
@keyframes nav-icon-hop {
  0% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px) scale(1.08);
  }
  100% {
    transform: translateY(0);
  }
}

/* ---------- Homepage island ----------
 * Always the original see-through glass with the dark logo (owner, 2026-10-17:
 * the bar must not turn black when scrolling). The black rules below are kept
 * behind a "nav-dark" class that nothing sets, in case it is wanted again. */
body.nav-dark .site-header .header-shell::before,
.site-header.nav-dark-island .header-shell::before {
  border-color: var(--nav-line);
  background: var(--nav-black);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.nav-dark .site-header .brand-logo,
.site-header.nav-dark-island .brand-logo,
.menu-panel .brand-logo {
  content: url("../images/logo-white.png");
}
body.pricing-visible .site-header .brand {
  background: transparent;
}
.site-header .header-login {
  align-items: center;
  gap: 0.4rem;
  min-height: 2.3rem;
  padding: 0 0.85rem;
  border-radius: 999px;
  transition:
    background-color 220ms ease,
    color 220ms ease;
}
@media (min-width: 42.01rem) {
  .site-header .header-login {
    display: inline-flex;
  }
}
body.nav-dark .site-header .header-login {
  color: var(--nav-ink);
}
/* Hover: a white pill with black text and icon. */
.site-header .header-login:hover,
.site-header .header-login:focus-visible,
body.nav-dark .site-header .header-login:hover,
body.nav-dark .site-header .header-login:focus-visible {
  background: #fff;
  color: #000;
}
/* Sign up uses the "Try PLAY IT for free" button (css/cta-glass.css), sized for the bar. */
.site-header .header-actions .header-signup.cta-glass.cta-glass.cta-glass {
  min-height: 2.3rem;
  padding: 0 1.05rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.5);
}
.site-header .header-actions .menu-button {
  border: 0;
  transition: background-color 220ms ease;
}
body.nav-dark .site-header .header-actions .menu-button {
  background: var(--nav-raised);
  color: var(--nav-ink);
}
body.nav-dark .site-header .header-actions .menu-button:hover,
body.nav-dark .site-header .header-actions .menu-button:focus-visible {
  background: var(--nav-raised-hover);
}
/* Menu icon: two lines; on hover the short one grows and the long one shrinks. */
.site-header .header-actions .menu-icon {
  position: relative;
  width: 1.15rem;
  height: 0.62rem;
  margin: 0;
  border-radius: 0;
  background: none;
}
.site-header .header-actions .menu-icon::before,
.site-header .header-actions .menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: width 380ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.site-header .header-actions .menu-icon::before {
  top: 0;
  width: 100%;
}
.site-header .header-actions .menu-icon::after {
  top: auto;
  bottom: 0;
  width: 62%;
}
.site-header .menu-button:hover .menu-icon::before {
  width: 62%;
}
.site-header .menu-button:hover .menu-icon::after {
  width: 100%;
}

/* Language switch inside the black bar. */
body.nav-dark .site-header .marketing-popover summary,
.marketing-site-header.nav-dark .marketing-popover summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 0;
  background: var(--nav-raised);
  color: var(--nav-ink);
}
body.nav-dark .site-header .marketing-popover summary:hover,
body.nav-dark .site-header .marketing-popover[open] summary,
.marketing-site-header.nav-dark .marketing-popover summary:hover,
.marketing-site-header.nav-dark .marketing-popover[open] summary {
  background: var(--nav-raised-hover);
  color: var(--nav-ink);
}
.marketing-popover summary {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.marketing-popover .marketing-language-chevron {
  stroke: currentColor;
}
.marketing-popover__panel {
  border: 1px solid var(--nav-line);
  background: var(--nav-black);
  color: var(--nav-ink);
}
.marketing-popover__panel button {
  color: var(--nav-soft);
}
.marketing-popover__panel button[aria-pressed="true"],
.marketing-popover__panel button:hover {
  background: var(--nav-raised);
  color: var(--nav-ink);
}

/* ---------- Other pages: the same black bar ---------- */
.marketing-site-header.nav-dark .marketing-header-shell,
.marketing-site-header.nav-dark.is-menu-open .marketing-header-shell {
  border-color: var(--nav-line);
  background: var(--nav-black);
  color: var(--nav-ink);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.marketing-site-header.nav-dark .marketing-logo,

.marketing-menu__top .marketing-logo {
  content: url("../images/logo-white.png");
}
.marketing-site-header .marketing-header-menu,
.marketing-menu__close {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.marketing-site-header.nav-dark .marketing-header-menu,
.marketing-menu__close {
  background: var(--nav-raised);
  color: var(--nav-ink);
}
.marketing-site-header .marketing-header-menu:hover,
.marketing-site-header .marketing-header-menu:focus-visible,
.marketing-menu__close:hover,
.marketing-menu__close:focus-visible {
  background: var(--nav-raised-hover);
  color: var(--nav-ink);
  transform: none;
}

/* ---------- Menu panels: huge white links on black ---------- */
.menu-panel,
.marketing-menu {
  background: var(--nav-black);
  color: var(--nav-ink);
}
.menu-panel .menu-panel__top .menu-button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 0;
  background: var(--nav-raised);
  color: var(--nav-ink);
}
.menu-panel .menu-list a,
.marketing-menu .marketing-menu__links a {
  color: var(--nav-soft);
  transition: color 200ms ease;
}
.menu-panel .menu-list a:hover,
.menu-panel .menu-list a:focus-visible,
.marketing-menu .marketing-menu__links a:hover,
.marketing-menu .marketing-menu__links a:focus-visible,
.marketing-menu .marketing-menu__links a[aria-current="page"] {
  color: var(--nav-ink);
}
.menu-panel .menu-language,
.menu-panel .menu-language button,
.marketing-menu__language,
.marketing-menu__language button,
.marketing-menu__fine-print a {
  color: var(--nav-soft);
}
.menu-panel .menu-language button[aria-pressed="true"],
.marketing-menu__language button[aria-pressed="true"] {
  background: var(--nav-raised);
  color: var(--nav-ink);
}

@media (prefers-reduced-motion: reduce) {
  .header-island-toggle__signal i,
  .site-header .header-login:hover::before {
    animation: none;
  }
  .site-header .header-login::before,
  .marketing-popover summary::before,
  .marketing-site-header .marketing-header-menu::before,
  .marketing-menu__close::before,
  .menu-panel .menu-panel__top .menu-button::before,
  .site-header .header-actions .menu-icon::before,
  .site-header .header-actions .menu-icon::after {
    transition: none;
    transform: none;
  }
}

/* Phones: keep the bar inside the screen. */
@media (max-width: 42rem) {
  .marketing-site-header {
    width: calc(100% - 2rem);
  }
  .marketing-site-header .marketing-header-shell {
    width: 100%;
  }
}
@media (max-width: 42rem) {
  .site-header .header-actions {
    margin-right: 0.4rem;
  }
}

/* The bar sits a little lower (owner, 2026-10-17). */
body .site-header {
  padding-top: 1.5rem;
}
.marketing-site-header {
  top: 1.6rem;
}
@media (max-width: 42rem) {
  body .site-header {
    padding-top: 1.15rem;
  }
  .marketing-site-header {
    top: 1.15rem;
  }
}

/* The bar is above everything on the page. */
body .site-header,
.marketing-site-header {
  z-index: 1000;
}
.site-header[data-island-state="hidden"] .header-shell {
  transform: translate3d(var(--island-shift-x, 0px), -140%, 0);
  opacity: 0;
}

/* Phones: keep a compact language button in the bar (owner, 2026-10-17). */
@media (max-width: 42rem) {
  body .site-header .marketing-header-controls,
  .marketing-site-header .marketing-header-controls {
    display: flex;
  }
  .site-header .marketing-popover summary,
  .marketing-site-header .marketing-popover summary {
    min-height: 2.1rem;
    padding: 0 0.6rem;
    font-size: 0.66rem;
  }
  .marketing-popover .marketing-language-chevron {
    display: none;
  }
}
@media (max-width: 42rem) {
  .marketing-popover summary [data-language-current] {
    display: none;
  }
}
@media (max-width: 42rem) {
  .site-header .brand .brand-logo {
    width: auto;
    max-width: 98px;
  }
  .site-header .header-actions .header-signup.cta-glass.cta-glass.cta-glass {
    padding: 0 0.75rem;
    letter-spacing: 0.04em;
  }
  .site-header .header-actions {
    gap: 4px;
  }
}

/* SoundCloud-style bar buttons (owner, 2026-10-17): "Log in" is a solid
   white pill, "Sign up" a dark grey pill, both in bold. */
.site-header .header-login,
.site-header .header-login:hover,
.site-header .header-login:focus-visible {
  background: #fff;
  color: #111;
  font-weight: 800;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.site-header .header-actions .header-signup.cta-glass.cta-glass.cta-glass {
  border: 0;
  background: #333;
  color: #fff;
  font-weight: 800;
  animation: none;
  box-shadow: none;
}
.site-header .header-actions .header-signup.cta-glass.cta-glass.cta-glass:hover {
  background: #444;
  color: #fff;
}
.site-header .header-actions .header-signup.cta-glass::before {
  display: none;
}
.marketing-site-header .marketing-header-menu {
  font-weight: 800;
}