/* ==========================================================================
   stvdwell.com: site-specific styles
   Loaded after the template's main.css. The hero, player, BeatStars and
   social rules used to live in <style> blocks inside index.html.
   ========================================================================== */

/* ---------- Fonts: self-hosted latin subsets, only the faces the page uses ---------- */

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cousine';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/cousine-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Cousine';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/cousine-700-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/montserrat-800-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/roboto-400-latin.woff2') format('woff2');
}

/* ---------- Loader ---------- */

/* site.js adds .is-hidden once the hero photo is ready. The animation is a
   safety net: even if a script fails, the page is never left covered. */
#mask {
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
  animation: mask-failsafe 0s linear 4s forwards;
}

#mask.is-hidden {
  opacity: 0;
  visibility: hidden;
}

@keyframes mask-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* ---------- In-page navigation ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

html {
  scroll-padding-top: 42px;
}

/* Phones and tablets: the header bar stays pinned to the top. The intro is
   pushed down by the bar's height, so the page looks exactly as it did when
   the header scrolled away with it. Update these if the logo size changes. */
@media (max-width: 990px) {
  header {
    position: fixed;
    left: 0;
    z-index: 99999;
  }

  .jIntro {
    margin-top: 74px;
  }

  html {
    scroll-padding-top: 74px;
  }
}

@media (max-width: 767px) {
  .jIntro {
    margin-top: 52px;
  }

  html {
    scroll-padding-top: 52px;
  }
}

/* GOODIES menu: hover opens it on devices that can hover; a tap or click
   toggles .active (set by site.js) everywhere else. */
@media (hover: none) {
  .dropdown:hover .dropdown-menu {
    display: none;
  }
}

.dropdown.active .dropdown-menu {
  display: block;
}

/* ---------- Intro ---------- */

.intro-static {
  position: relative;
  width: 100%;
  height: 100vh; /* Maintains full viewport height */
}

.intro-static .fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ---------- Spotify player ---------- */

.player.horizontal {
  background-color: #151518;
  overflow: visible;
  padding: 20px 0;  /* Increased padding for larger widget */
  min-height: 400px;  /* Ensure enough space for the widget */
}

.player.horizontal .container {
  background-color: #151518;
  margin: 0 auto;
  max-width: 1010px;
  position: relative;
  padding: 0 15px;
}

.spotify-container {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  min-height: 352px;  /* Match iframe height */
}

.spotify-container iframe {
  background-color: #151518;
  display: block;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .player.horizontal {
    padding: 15px 0;
    min-height: 380px;
  }

  .spotify-container {
    width: 100%;
    padding: 0 10px;
    min-height: 352px;
  }
}

/* ---------- BeatStars store ---------- */

.beatstars-container {
  position: relative;
  width: 100%;
  height: 800px;
  background: #000; /* Optional: matches dark theme */
  border-radius: 8px; /* Optional: rounded corners */
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.beatstars-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Video (click-to-load YouTube) ---------- */

.video-frame {
  position: relative;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background-color: #000;
}

.section.new-video .video-frame > iframe,
.video-frame .yt-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-frame .yt-facade {
  display: block;
  cursor: pointer;
}

.video-frame .yt-facade img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-facade-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  margin: -24px 0 0 -34px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath fill='%23f00' d='M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z'/%3E%3Cpath fill='%23fff' d='M45 24 27 14v20z'/%3E%3C/svg%3E") no-repeat center / 68px 48px;
  opacity: 0.9;
  transition: opacity 0.2s;
}

.yt-facade:hover .yt-facade-play,
.yt-facade:focus-visible .yt-facade-play {
  opacity: 1;
}

/* ---------- Social icons ---------- */

.social {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.social a .social-icon {
  width: 35px;
  height: auto;
  transition: opacity 0.3s;
}

/* Instagram and YouTube artwork has built-in padding, so it is drawn wider */
.social a .social-icon.is-wide {
  width: 75px;
}

.social-icon:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .social {
    gap: 20px;
  }

  .social a .social-icon {
    width: 30px;
  }

  .social a .social-icon.is-wide {
    width: 50px;
  }
}