/* West Coast Cool — site.css v2.7 (2026-10-08)
   Replaces bootstrap.min.css, carousel.css, octet-site.css, audio-style.css, jquery.fancybox.min.css */

:root {
  /* Blue & white palette — light to deeper */
  --white:  #ffffff;
  --blue-1: #f3f1fa;
  --blue-2: #e4dff1;   /* original nav color */
  --blue-3: #cdc5e6;
  --blue-4: #a99dd4;
  --nav-bg: var(--blue-2);
  --ink: #000;
  --paper: var(--white);
  --banner: rgba(255, 255, 255, .88);
  --nav-h: 5rem;
  --screen: calc(100svh - var(--nav-h));   /* one full screen below the nav */
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.5 system-ui, Arial, sans-serif; }
img { max-width: 100%; display: block; }
a { color: inherit; }
section { scroll-margin-top: var(--nav-h); }
h2 { margin: 0 0 1rem; }
.wrap { padding: 3rem max(5%, calc((100% - 60rem) / 2)); }

/* Every section fills the screen below the nav */
main > section { min-height: var(--screen); }
#about    { background: var(--white); }
#shows    { background: var(--blue-1); }
#photos   { background: var(--blue-3); }
#videos   { background: var(--blue-2); display: grid; align-content: center; }
#testimonials { background: var(--blue-3); }
#contact  { background: var(--blue-1); display: grid; place-content: center; }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 100; height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0 1rem; background: var(--nav-bg);
}
.nav .brand img { height: calc(var(--nav-h) * .9); width: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.25rem; }
.nav ul a { text-decoration: none; font-weight: 600; }
.nav ul a:hover { text-decoration: underline; }
.nav-toggle { display: none; background: #5c5c5c; color: #fff; border: 0; border-radius: 4px; font-size: 1.5rem; padding: .25rem .75rem; cursor: pointer; }

@media (max-width: 760px) {
  .nav-toggle { display: block; }
  .nav ul { display: none; position: absolute; top: var(--nav-h); left: 0; right: 0;
            flex-direction: column; gap: 0; background: var(--nav-bg); padding: .5rem 1rem 1rem; }
  .nav ul.open { display: flex; }
  .nav ul a { display: block; padding: .5rem 0; }
}

.hero { padding-top: var(--nav-h); background: var(--blue-1); }
.hero img { width: 100%; height: var(--screen); object-fit: cover; object-position: center; }

/* ---------- ABOUT (native <details> accordion) ---------- */
#about h2 { text-align: center; }
details { border: 1px solid #ccc; background: #fff; }
details + details { border-top: 0; }
summary { padding: 1rem 1.25rem; font-weight: 700; cursor: pointer; }
details[open] summary { background: var(--nav-bg); }
details > div { padding: 1rem 1.25rem 1.5rem; max-width: 70ch; }

/* ---------- SHOWS ---------- */
.shows { list-style: none; margin: 0 0 2rem; padding: 0; }
.shows li { display: flex; align-items: center; gap: 1rem; padding: .75rem; }
.shows li:nth-child(odd) { background: rgba(0, 0, 0, .05); }
.shows button { padding: 0; border: 0; background: none; cursor: zoom-in; flex: none; }
.shows img { width: 4rem; }
.shows .placeholder img { width: 8rem; }
.shows .placeholder span { font-size: 1.2rem; font-style: italic; }

dialog { border: 0; padding: 0; max-width: min(90vw, 40rem); background: #fff; }
dialog::backdrop { background: rgba(0, 0, 0, .75); }
dialog img { width: 100%; }
dialog form { text-align: right; padding: .5rem; }
.btn { background: #5c5c5c; color: #fff; border: 0; border-radius: 4px; padding: .5rem 1rem; cursor: pointer; }

/* ---------- CAROUSEL ---------- */
.carousel { position: relative; overflow: hidden; height: var(--screen); }
.slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; }
.slide.active { opacity: 1; }
.slide img { width: 100%; height: 100%; object-fit: contain; }
/* Slow zoom. Outgoing image holds its scale until the fade finishes, then resets (no shrink). */
.slide img { transition: transform 0s 1.5s; }
.slide.active img { transform: scale(1.1); transition: transform 20s linear; }

.carousel .prev, .carousel .next {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 2;
  width: 3rem; height: 3rem; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: #000; font-size: 1.5rem; line-height: 1;
}
.carousel .prev { left: 1rem; }
.carousel .next { right: 1rem; }
.carousel .prev:hover, .carousel .next:hover { background: #fff; }


.testimonial { position: relative; height: var(--screen); overflow: hidden; }
.testimonial img { width: 100%; height: 100%; object-fit: contain; }
.caption { position: absolute; left: 0; right: 0; bottom: 3rem; background: var(--banner); padding: .75rem 5rem; }
.caption h2 { margin: 0; font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 500; font-style: italic; }
.caption h3 { margin: 0; font-size: clamp(1.3rem, 3.5vw, 3rem); }
.caption p  { margin: 0; font-style: italic; font-size: clamp(.8rem, 1.2vw, 1rem); }

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
  .slide img, .slide.active img { transition: none; transform: none; }
}

/* ---------- VIDEOS ---------- */
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.5rem; }
.card { background: #fff; border-radius: 4px; overflow: hidden; }
.card iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }
.card h3 { font-size: 1.2rem; margin: .75rem 1rem .25rem; }
.card p { margin: 0 1rem 1rem; color: #555; font-size: .9rem; }

/* ---------- CONTACT / FOOTER ---------- */
#contact { text-align: center; padding: 3rem 1rem; }
#contact .label { font-size: 1.5rem; }
footer { text-align: center; padding: 1.5rem; font-size: .85rem; background: var(--nav-bg); }

/* ---------- AUDIO PAGE ---------- */
.player { display: grid; grid-template-columns: auto 1fr auto; gap: 1rem; align-items: center; margin-bottom: 2rem; }
.player .play { width: 3.5rem; height: 3.5rem; font-size: 1.4rem; border: 1px solid #ccc; border-radius: 6px; background: #fff; cursor: pointer; }
.player .info { font-size: .85rem; }
.player input[type=range] { width: 100%; accent-color: #337ab7; }
.player .skip button { border: 0; background: none; font-size: 1.4rem; cursor: pointer; }
.player .skip button:disabled { opacity: .3; cursor: default; }
.playlist { padding-left: 1.5rem; }
.playlist li { margin: .5rem 0; cursor: pointer; }
.playlist li:hover { text-decoration: underline; }
.playlist li.active { font-weight: 700; }