/* ============================================================
   Anna Vee — custom overrides on top of Wox CSS.
   ============================================================ */

/* ----- Hero: white overlay (was overlay-dark-60) ----- */
.overlay-light-60:before {
  background: rgba(255, 255, 255, 0.4);
}

/* When overlay is light, default white text loses contrast — switch to dark */
#section0.overlay-light-60 .intro-subtitle,
#section0.overlay-light-60 #intro-title,
#section0.overlay-light-60 .bottom-credits,
#section0.overlay-light-60 .bottom-credits a,
#section0.overlay-light-60 .social-icons a {
  color: #111;
}

/* ----- Swap positions of bottom-credits and social-icons on Hero ----- */
#section0 .bottom-credits {
  left: auto;
  right: 50px;
  text-align: right;
}
#section0 .social-icons-wrapper {
  left: 50px;
  right: auto;
  text-align: left;
}
@media only screen and (max-width: 768px) {
  #section0 .bottom-credits {
    right: 26px;
  }
  #section0 .social-icons-wrapper {
    left: 26px;
  }
}

/* ----- Inline SVG social icons (used by both Hero and Contact) ----- */
.social-icons .social-icon a.av-social,
.social-icons-contact .social-icon a.av-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-left: 14px;
  color: #fff;
  opacity: 0.7;
  transition: opacity 0.25s ease, color 0.25s ease;
}
.social-icons .social-icon a.av-social:hover,
.social-icons-contact .social-icon a.av-social:hover {
  opacity: 1;
}
.social-icons .social-icon:first-child a.av-social,
.social-icons-contact .social-icon:first-child a.av-social {
  margin-left: 0;
}
.social-icons .social-icon a.av-social svg,
.social-icons-contact .social-icon a.av-social svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}
/* Hero overlay is light → dark icons */
#section0.overlay-light-60 .social-icons .social-icon a.av-social {
  color: #111;
}
/* Contact left col has a white background → dark icons there too */
#section5 .social-icons-contact .social-icon a.av-social {
  color: #111;
}

/* ============================================================
   New SVG burger (Group-1-2.svg) — replaces Wox 3-line CSS lines.
   Open state is triggered by Wox's own JS adding `.open` to
   `.navigation-fire`. So we hook into `.navigation-fire.open`.
   ============================================================ */

/* Hide Wox's 3 default <span class="line"> children */
.av-burger .navigation-icon .line { display: none !important; }

/* Reset wrapper sizing so SVG fits naturally where the original 3 lines lived */
.av-burger .navigation-icon {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  cursor: pointer;
  background: transparent;
}

.av-burger .av-burger-svg {
  width: 32px;
  height: 17px;
  display: block;
  overflow: visible;
}
.av-burger .av-burger-svg path,
.av-burger .av-burger-svg rect {
  fill: currentColor;
}

/* Crossfade between the two states.
   Closed group = original diagonal paths.
   Open group   = SAME paths with SVG-attribute transforms that rotate them
                  −45° around their bbox centers and translate them so they
                  stack as "=" (set in Navigation.astro).
   We must NOT add a CSS transform on the <g> elements — that would
   compose with the SVG attribute transform on the inner <path>s and
   garble the geometry. Pure opacity is enough. */
.av-burger .av-burger-svg g {
  transition: opacity 0.35s ease;
}
.av-burger .av-burger-closed { opacity: 1; }
.av-burger .av-burger-open   { opacity: 0; }
.av-burger.open .av-burger-closed { opacity: 0; }
.av-burger.open .av-burger-open   { opacity: 1; }

/* ============================================================
   Liex-style menu appearance: whole menu slides in from the left.
   Wox toggles `nav.navigation-menu` between default and `.show`.
   ============================================================ */

nav.navigation-menu {
  /* Override Wox's default `opacity: 0 + scale(0.75)` with Liex-style
     transform-only slide-in. Keep the menu fully OPAQUE + VISIBLE at all
     times — it's hidden by being translated off-screen, not by opacity.
     This prevents the items from "fading in" together with the menu
     during the slide animation. */
  visibility: visible !important;
  opacity: 1 !important;
  transform: translateX(-100%) !important;
  -webkit-transform: translateX(-100%) !important;
  transition:
    transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) !important;
  -webkit-transition:
    -webkit-transform 0.5s cubic-bezier(0.7, 0, 0.3, 1) !important;
}
nav.navigation-menu.show {
  transform: translateX(0) !important;
  -webkit-transform: translateX(0) !important;
}

/* Menu items stay invisible while the menu is sliding in.
   They only appear together with the scramble-letters reveal, which is
   triggered from JS once the slide transition has finished. */
nav.navigation-menu .menu.brackets li a.menu-state {
  opacity: 0;
  /* kill Wox's default `transition: all 0.5s linear` so reveal is instant
     and only the scramble plugin animates the text itself */
  transition: none !important;
  /* Premium sizing — big enough for the scramble effect to read,
     but not so big it eats the layout. */
  font-size: 36px !important;
  letter-spacing: 0.03em;
  line-height: 1.05;
  /* Keep glyph widths stable while letters cycle through random chars,
     otherwise the row would jitter horizontally on each frame. */
  font-variant-numeric: tabular-nums;
}
nav.navigation-menu .menu.brackets li {
  margin-bottom: 4px !important;
}
@media only screen and (max-width: 1200px) {
  nav.navigation-menu .menu.brackets li a.menu-state {
    font-size: 30px !important;
  }
}
@media only screen and (max-width: 880px) {
  nav.navigation-menu .menu.brackets li a.menu-state {
    font-size: 24px !important;
  }
}
@media only screen and (max-width: 480px) {
  nav.navigation-menu .menu.brackets li a.menu-state {
    font-size: 20px !important;
  }
}
nav.navigation-menu .menu.brackets li a.menu-state.av-revealed {
  opacity: 1;
}

/* ============================================================
   Decoupled color switching for logo and burger.
   Each section carries two data attributes:
     data-logo-bg="light|dark"   — background under the logo (top-left)
     data-burger-bg="light|dark" — background under the burger (top-right)
   A script in BaseLayout watches the visible section and toggles
   `body.av-logo-on-light` / `av-logo-on-dark` and
   `body.av-burger-on-light` / `av-burger-on-dark`.
   ============================================================ */

/* ---- Burger ---- */
/* default: white burger (assumes dark bg) */
.av-burger {
  color: #fff;
  transition: color 0.35s ease;
}
/* on light bg: dark burger */
body.av-burger-on-light .av-burger { color: #111; }

/* When the menu is open we render a × on a dark menu overlay,
   so force the burger to white regardless of which section is behind it. */
.av-burger.open { color: #fff !important; }

/* ---- Logo ---- */
/* default: white logo (assumes dark bg) */
.logo .logo-img:before {
  background-image: url("/img/logo-light.svg") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  transition: opacity 0.2s ease;
}
/* on light bg: dark logo */
body.av-logo-on-light .logo .logo-img:before {
  background-image: url("/img/logo-dark.svg") !important;
}

/* prevent body scroll while menu is open */
body.av-menu-open { overflow: hidden; }

/* On the Albums section the vertical "ALBUMS" label is Wox-white with a
   dark text-shadow — invisible on our light beige bg. Force it dark there. */
.av-albums-section .section-title-vertical,
.av-albums-section .section-title-vertical span,
.av-albums-section .section-title-vertical a {
  color: #1a1a1c !important;
  text-shadow: none !important;
}
.av-albums-section .section-title-vertical:after {
  background-color: #1a1a1c !important;
}

/* ============================================================
   Spotify player — bottom bar
   ============================================================ */
.av-spotify-bar {
  position: fixed;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 1100;
  background: #1a1a1c;
  color: #f6f4ee;
  padding: 16px 20px 20px;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  display: grid;
  grid-template-columns: 1fr auto;
  grid-gap: 18px;
  align-items: center;
  font-family: "Raleway", sans-serif;
}
.av-spotify-bar-left { min-width: 0; }
.av-spotify-bar-status {
  font-family: "Oswald", sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b8884b;
  margin-bottom: 4px;
}
.av-spotify-bar-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.av-spotify-bar-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.av-spotify-bar-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(246, 244, 238, 0.4);
  background: transparent;
  color: #f6f4ee;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.av-spotify-bar-play:hover {
  background: rgba(246, 244, 238, 0.08);
  border-color: rgba(246, 244, 238, 0.8);
}
.av-spotify-bar-open {
  font-family: "Oswald", sans-serif;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #f6f4ee;
  text-decoration: none;
  border: 1px solid rgba(246, 244, 238, 0.4);
  padding: 10px 16px;
  border-radius: 22px;
  transition: background 0.2s ease;
}
.av-spotify-bar-open:hover {
  background: rgba(246, 244, 238, 0.08);
}
.av-spotify-bar-close {
  background: transparent;
  border: 0;
  color: rgba(246, 244, 238, 0.5);
  font-size: 20px;
  cursor: pointer;
  padding: 6px 10px;
  transition: color 0.2s ease;
}
.av-spotify-bar-close:hover { color: #f6f4ee; }
.av-spotify-bar-progress {
  grid-column: 1 / -1;
  height: 3px;
  background: rgba(246, 244, 238, 0.12);
  border-radius: 2px;
  overflow: hidden;
}
.av-spotify-bar-progress-fill {
  height: 100%;
  background: #b8884b;
  transition: width 0.15s linear;
}
@media (max-width: 640px) {
  .av-spotify-bar { left: 12px; right: 12px; bottom: 12px; padding: 12px 14px 14px; }
  .av-spotify-bar-title { font-size: 14px; }
}

/* ============================================================
   Spotify play button next to each track
   ============================================================ */
.av-track-services {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.av-track-services button.av-svc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid #e5b25d;
  color: #e5b25d;
  padding: 5px 10px;
  border-radius: 999px;
  font-family: "Oswald", sans-serif;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.av-track-services button.av-svc:hover {
  background: #e5b25d;
  color: #1a1a1c;
  border-color: #e5b25d;
}
.av-track-services button.av-svc[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
.av-track-services .av-svc-spotify svg { width: 14px; height: 14px; fill: currentColor; }


/* Menu: use Fjalla One — same condensed uppercase vibe as Oswald but less tall */
nav.navigation-menu .menu.brackets li a.menu-state {
  font-family: "Fjalla One", "Oswald", sans-serif !important;
}


/* Contact vertical label + dash — force black */
#section5 .section-title-vertical,
#section5 .section-title-vertical span,
#section5 .section-title-vertical a {
  color: #1a1a1c !important;
  text-shadow: none !important;
}
#section5 .section-title-vertical:after {
  background-color: #1a1a1c !important;
}

/* v10: enlarge the ANNA VEE hero title by ~1/3 */
#intro-title { font-size: 207px !important; }
@media only screen and (max-width: 880px) { #intro-title { font-size: 153px !important; } }
@media only screen and (max-width: 768px) { #intro-title { font-size: 100px !important; } }

/* v10: subtle dark filter on the hero (high transparency) */
#section0.overlay-dark-25:before { background: rgba(0, 0, 0, 0.25); }