/* ============================================
   Montana Stream — Wireframe / Clip-art style
   ============================================ */

:root {
  --bg: #f5f1e8;          /* warm paper */
  --ink: #1a1a1a;         /* line ink */
  --ink-soft: #2a2a2a;
  --accent: #2a2a2a;
  --header-h: 64px;
  --font-display: 'Georgia', 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ============================================
   Header
   ============================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--bg);
  border-bottom: 1.5px solid var(--ink);
  height: var(--header-h);
}

.header-inner {
  max-width: 1300px;
  height: 100%;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.logo svg { display: block; }

.nav {
  display: flex;
  gap: 32px;
}

.nav a {
  position: relative;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0;
  color: var(--ink);
  transition: opacity 0.2s ease;
}

.nav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.nav a:hover::after,
.nav a.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1.5px solid var(--ink);
  width: 40px;
  height: 40px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 0;
}

.nav-toggle span {
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--ink);
}

/* ============================================
   Hero / Scene
   ============================================ */
.hero {
  position: relative;
  flex: 1;
  width: 100%;
  overflow: hidden;
  /* fill remaining viewport between header & footer */
  min-height: calc(100vh - var(--header-h) - 80px);
}

.scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--ink);
  display: block;
}

.scene .mountains-back { opacity: 0.35; }
.scene .mountains-mid  { opacity: 0.6; }
.scene .pines          { opacity: 0.85; }
.scene .pines-front    { opacity: 1; }

/* ============================================
   Coming Soon — always centered
   ============================================ */
.coming-soon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  padding: 28px 48px;
  background: rgba(245, 241, 232, 0.85);
  border: 1.5px solid var(--ink);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  max-width: 90vw;
}

.coming-soon h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--ink);
}

.coming-soon .tagline {
  margin-top: 12px;
  font-size: clamp(0.85rem, 1.5vw, 1rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* ============================================
   Footer
   ============================================ */
.site-footer {
  border-top: 1.5px solid var(--ink);
  background: var(--bg);
  padding: 20px 0;
}

.footer-inner {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.copyright {
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  color: var(--ink);
}

.socials {
  display: flex;
  gap: 14px;
  list-style: none;
}

.socials a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.socials a:hover {
  background: var(--ink);
  color: var(--bg);
}

.socials svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ============================================
   Inner page content (videos/affiliates/about)
   ============================================ */
.page {
  flex: 1;
  max-width: 900px;
  margin: 0 auto;
  padding: 60px 24px;
  width: 100%;
}

.page h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 400;
  margin-bottom: 24px;
  border-bottom: 1.5px solid var(--ink);
  padding-bottom: 16px;
}

.page p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 18px;
  opacity: 0.85;
}

/* ============================================
   Mobile
   ============================================ */
@media (max-width: 720px) {
  .nav-toggle { display: flex; }

  /* Mobile header layout:
       Top bar (logo + nav-toggle on opposite ends)
       Nav slides open below the top bar (between logo row and search)
       Mobile search bar sits at the very bottom of the header

     We achieve this by flipping .header-inner into a column-wrap container,
     letting the nav fill its own line beneath the logo row. */
  .site-header { height: auto; }

  .header-inner {
    height: auto;
    flex-wrap: wrap;
    padding: 0;
  }

  /* Top bar: logo on the left, nav-toggle on the right */
  .logo {
    height: var(--header-h);
    flex: 1;
    padding-left: 24px;
  }

  .nav-toggle {
    margin-right: 24px;
  }

  /* Hide the desktop header-search inside .header-inner at mobile widths
     (we use the dedicated .header-search-mobile bar below) */
  .header-search { display: none; }

  /* Nav takes its own row, full width, and animates open */
  .nav {
    order: 3;
    position: static;
    flex-basis: 100%;
    width: 100%;
    background: var(--bg);
    border-top: 1.5px solid var(--ink);
    flex-direction: column;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  .nav.open {
    max-height: 300px;
  }

  .nav a {
    padding: 16px 24px;
    border-top: 1px solid rgba(0,0,0,0.1);
    width: 100%;
  }

  .nav a:first-child {
    border-top: none;
  }

  .nav a::after { display: none; }

  .coming-soon {
    padding: 20px 28px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ============================================
   Videos page — stream card grid
   ============================================ */
.videos-page {
  max-width: 1300px;
}

.videos-intro {
  margin-bottom: 36px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}

.video-loading,
.video-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 0;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
  opacity: 0.65;
}

.stream-card {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.stream-card:hover {
  transform: translateY(-2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.stream-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #1a1a1a;
  overflow: hidden;
  border-bottom: 1.5px solid var(--ink);
}

.stream-media.clickable {
  cursor: zoom-in;
}

/* Fullscreen — let the media element fill the whole screen.
   Browsers apply :fullscreen to whichever element entered fullscreen,
   which in our case is .stream-media. */
.stream-media:fullscreen,
.stream-media:-webkit-full-screen,
.stream-media:-moz-full-screen,
.stream-media:-ms-fullscreen {
  width: 100vw;
  height: 100vh;
  aspect-ratio: auto;
  cursor: zoom-out;
  background: #000;
}

.stream-media:fullscreen iframe,
.stream-media:-webkit-full-screen iframe,
.stream-media:fullscreen video,
.stream-media:-webkit-full-screen video,
.stream-media:fullscreen img,
.stream-media:-webkit-full-screen img {
  object-fit: contain;
}

.stream-media iframe,
.stream-media video,
.stream-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.stream-audio-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(245, 241, 232, 0.92);
  border: 1px solid var(--ink);
  color: var(--ink);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.stream-audio-badge svg {
  width: 12px;
  height: 12px;
}

.stream-caption {
  padding: 14px 16px;
  text-align: center;
}

.stream-title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.3;
  color: var(--ink);
  display: inline-block;
  position: relative;
  padding-bottom: 2px;
}

.stream-title::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.3s ease;
}

.stream-title:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.stream-title.no-credit {
  cursor: default;
}

.stream-title.no-credit::after {
  display: none;
}

.stream-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f5f1e8;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  background: #1a1a1a;
}

/* Offline / drought placeholder — line-art buffalo skull on warm paper.
   Replaces the player while keeping the same 16:9 aspect ratio. */
.stream-offline {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 20px;
  background: var(--bg);
  color: var(--ink);
  text-align: center;
}

.stream-offline .offline-art {
  width: 60%;
  max-width: 240px;
  flex-shrink: 0;
}

.stream-offline .offline-art img {
  /* Override the .stream-media img absolute-fill rule */
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  display: block;
  object-fit: contain !important;
}

.stream-offline .offline-text {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-style: italic;
  letter-spacing: 0.04em;
  line-height: 1.3;
  opacity: 0.78;
  max-width: 80%;
}

@media (max-width: 720px) {
  .video-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ============================================
   Search bar (used in header and on page)
   ============================================ */
.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ink);
  background: var(--bg);
  padding: 0 10px 0 34px;
  height: 36px;
  min-width: 180px;
  max-width: 320px;
  flex: 1;
}

.search-wrap .search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--ink);
  opacity: 0.65;
  pointer-events: none;
}

.search-wrap input {
  border: 0;
  outline: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.search-wrap input::-webkit-search-cancel-button { cursor: pointer; }

.header-search { margin-left: auto; }

/* Mobile-only bottom search bar inside the header.
   Hidden on desktop, shown on small screens. */
.header-search-mobile {
  display: none;
  border-top: 1.5px solid var(--ink);
  padding: 10px 16px;
  background: var(--bg);
}

.header-search-mobile .search-wrap {
  width: 100%;
  max-width: none;
}

/* ============================================
   Filter buttons (Live page)
   ============================================ */
.stream-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.stream-controls .page-search {
  /* On the Live page, hide the in-page search if the header search
     is visible on desktop. We still keep it as a fallback. */
  display: none;
}

.filter-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 8px 14px;
  height: 36px;
  background: transparent;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.filter-btn:hover {
  background: rgba(26, 26, 26, 0.06);
}

.filter-btn.active {
  background: var(--ink);
  color: var(--bg);
}

/* ============================================
   Welcome panel (index page)
   ============================================ */
.welcome-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  padding: 32px 44px;
  background: rgba(245, 241, 232, 0.9);
  border: 1.5px solid var(--ink);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  max-width: 92vw;
  width: 540px;
}

.welcome-panel h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 14px;
}

.welcome-panel .welcome-lead {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.5;
  opacity: 0.82;
  margin-bottom: 22px;
}

.welcome-panel .welcome-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 12px 28px;
  border: 1.5px solid var(--ink);
  color: var(--ink);
  transition: background 0.2s ease, color 0.2s ease;
}

.welcome-panel .welcome-cta:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ============================================
   About page extras
   ============================================ */
.page h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
  font-weight: 400;
  margin-top: 36px;
  margin-bottom: 14px;
}

.page h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 400;
  margin-top: 18px;
  margin-bottom: 10px;
  opacity: 0.85;
}

.about-list {
  margin: 0 0 18px 22px;
  padding: 0;
  line-height: 1.7;
  opacity: 0.88;
}

.about-list li { margin-bottom: 6px; }

.page code {
  background: rgba(26, 26, 26, 0.08);
  padding: 2px 6px;
  font-size: 0.92em;
  border-radius: 2px;
}

/* ============================================
   Filtering — hide non-matching stream cards
   ============================================ */
.stream-card.is-hidden { display: none; }

/* ============================================
   Mobile adjustments for header & controls
   ============================================ */
@media (max-width: 900px) {
  .header-search { display: none; }
  .header-search-mobile { display: block; }
  .site-header { height: auto; }
  .stream-controls .page-search { display: flex; }
}

@media (max-width: 720px) {
  .stream-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .stream-controls .page-search {
    /* Hidden because the mobile header search already covers this */
    display: none;
  }
  .filter-wrap {
    justify-content: stretch;
  }
  .filter-btn {
    flex: 1;
    padding: 8px 6px;
    font-size: 0.7rem;
    letter-spacing: 0.06em;
  }
}

/* ============================================
   Card overlay buttons — pop-out, loop
   ============================================ */
.stream-popout,
.stream-loop {
  position: absolute;
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--ink);
  background: rgba(245, 241, 232, 0.92);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.18s ease, background 0.18s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.stream-popout svg,
.stream-loop svg {
  width: 16px;
  height: 16px;
  display: block;
}

/* Pop-out lives in the top-right corner, loop just to its left.
   Loop button is hidden by default (only visible in fullscreen). */
.stream-popout { top: 10px; right: 10px; }
.stream-loop {
  top: 10px;
  right: 52px;
  display: none;
}

/* Reveal pop-out on hover */
.stream-media:hover .stream-popout,
.stream-popout:focus-visible {
  opacity: 1;
}

.stream-popout:hover,
.stream-loop:hover {
  background: var(--ink);
  color: var(--bg);
}

.stream-loop.is-active {
  background: var(--ink);
  color: var(--bg);
}

/* Show the loop button when the card is fullscreen. */
.stream-media:fullscreen .stream-loop,
.stream-media:-webkit-full-screen .stream-loop,
.stream-media:-moz-full-screen .stream-loop {
  display: inline-flex;
  opacity: 1;
  top: 16px;
  right: 60px;
  width: 44px;
  height: 44px;
}

.stream-media:fullscreen .stream-loop svg,
.stream-media:-webkit-full-screen .stream-loop svg {
  width: 22px;
  height: 22px;
}

/* In fullscreen, the pop-out button stays visible and matches the loop size */
.stream-media:fullscreen .stream-popout,
.stream-media:-webkit-full-screen .stream-popout {
  opacity: 1;
  top: 16px;
  right: 16px;
  width: 44px;
  height: 44px;
}

.stream-media:fullscreen .stream-popout svg,
.stream-media:-webkit-full-screen .stream-popout svg {
  width: 22px;
  height: 22px;
}

/* ============================================
   Upload date under the title (Videos page)
   ============================================ */
.stream-date {
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-top: 6px;
  color: var(--ink);
}

/* ============================================
   Pop-out window layout
   ============================================ */
.popup-body {
  background: #000;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.popup-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
}

.popup-grid {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.popup-media {
  flex: 1;
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.popup-media video,
.popup-media iframe,
.popup-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: 0;
  background: #000;
  display: block;
}

.popup-title {
  padding: 8px 16px;
  background: #f5f1e8;
  color: #1a1a1a;
  font-family: var(--font-display);
  font-size: 0.95rem;
  text-align: center;
  border-top: 1.5px solid #1a1a1a;
}

.popup-title a {
  color: inherit;
  text-decoration: none;
  position: relative;
}

.popup-title a:hover { text-decoration: underline; }