/* Planet and Sky — site styles.
   Layout/grid/navbar/hero come from Bulma (loaded via CDN in each page's <head>).
   Everything below is site-specific, ported from the old Gatsby build's all.scss. */

:root {
  --link: #C1CAFD;
  --dark-bg: #1a1a1a;
  --text-color: #ddd;
  --shadow-gray: #999;
  --black: #000;
  --white: #fff;
}

html, body {
  min-height: 100vh;
}

body {
  display: flex;
  flex-direction: column;
  background: var(--dark-bg);
}

a {
  color: var(--link);
}

/* Links inside body copy need a non-color cue (WCAG 1.4.1) — the navbar
   and store/platform icon links are excluded since they're not running
   text and already distinguishable by position/image. */
.site-content a {
  text-decoration: underline;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 0;
  z-index: 100;
  background: var(--black);
  color: var(--white);
  padding: 0.75rem 1rem;
  transition: top 0.1s ease-in-out;
}

.skip-link:focus {
  top: 0;
}

.site-content {
  flex: 1;
  background: var(--dark-bg);
  color: var(--text-color);
}

.hero.is-primary {
  background-color: var(--black);
}

.has-bg-img {
  background: url('../images/stars.jpg') center center;
  background-size: cover;
}

.hero-body {
  min-height: 1rem;
  display: flex;
  align-items: center;
  padding: 2rem;
}

.hero-body .subtitle {
  /* The photo background's local brightness varies (stars, nebula glow)
     and shifts with viewport width, so a flat opacity reduction isn't a
     reliable enough contrast guarantee (WCAG 1.4.3). A dark halo keeps
     the text readable against any part of the image while still reading
     as a softer, secondary line than the page's headings. */
  opacity: .9;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
}

h1 {
  margin-bottom: 1rem;
}

.footer {
  padding: 0 0 3rem 0;
  background-color: var(--dark-bg);
}

.footer div {
  justify-content: center;
}

.footer .has-text-white {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 10px rgba(0, 0, 0, 0.8);
}

/* Home page */

.container.home h1 {
  opacity: 0.9;
  margin: 0 0 0 1.2rem;
}

.container.home h1 ._title {
  font-weight: bold;
}

img.cover {
  border: 1px solid var(--link);
  box-shadow: 1px 1px 1px var(--shadow-gray);
  margin: 1rem;
  width: 400px;
  height: 400px;
}

.container.home a {
  text-decoration: underline;
}

.container.home p {
  margin: 1.5rem 0 0 0;
}

.container.home .blurb {
  margin: 1rem 0 0 1.2rem;
  font-style: italic;
}

.container.home .contact {
  margin-top: 2.5rem;
}

/* Navbar */

.navbar {
  background-color: var(--black);
}

/* Bulma's default mobile menu background is white; without this override
   the white nav text (including "The Music"/"The Podcast" triggers, which
   have no background of their own) is invisible against it. */
.navbar-menu {
  background-color: var(--black);
}

.navbar a,
.navbar button {
  color: var(--white);
}

.navbar a:hover,
.navbar button:hover {
  background: inherit;
}

.navbar-brand {
  align-items: center;
}

.navbar-link {
  color: var(--link);
}

.navbar-item.has-dropdown {
  align-items: center;
}

.navbar-item.is-arrowless::after {
  display: none;
}

/* The dropdown trigger and the mobile burger are real <button> elements
   (so they're keyboard-focusable and Enter/Space-operable) styled to look
   exactly like the plain links/icon they replace. */
button.navbar-link,
button.navbar-burger {
  background: none;
  border: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

/* Bulma's own CSS only reveals the dropdown on :hover, which a keyboard
   user can never trigger. :focus-within reveals it as soon as the trigger
   button (or, once open, a link inside it) has keyboard focus. */
.navbar-item.has-dropdown:focus-within .navbar-dropdown {
  display: block;
}

.navbar-dropdown {
  background-color: var(--black);
  border-top: none;
  color: var(--white);
}

.navbar-dropdown a.navbar-item:hover {
  background-color: inherit;
  color: inherit;
  font-weight: bold;
}

/* Song pages */

section.song {
  margin: 0;
  padding: 1rem 0;
}

section.song.empty_world {
  padding: 0;
}

/* Gives .container.song its own stacking context (so the negative
   z-index art below layers under this page's own text instead of
   sinking under the whole page) and makes it the positioning anchor
   the art sizes itself against, so the backdrop stays confined to this
   section instead of bleeding into the footer below it. */
.container.song {
  margin-left: 0;
  position: relative;
  z-index: 0;
  min-height: 100vh;
}

/* The art is a dim, full-bleed backdrop behind the lyrics, sized to
   the song section rather than a boxed-in image beside them. */
.column.art {
  position: absolute;
  inset: 0;
  /* Bulma's is-half/is-one-quarter width classes would otherwise still
     apply and pin this to a fraction of the section. */
  width: 100% !important;
  height: 100%;
  z-index: -1;
  opacity: 0.18;
  background-size: cover !important;
}

.art.something_is_dreaming {
  background: url('../images/song_art/ep1_art_nt.png') no-repeat center center;
  background-size: contain;
}

.art.round {
  background: url('../images/song_art/ep2_art_nt.png') center center;
  background-size: cover;
}

.art.travelers {
  background: url('../images/song_art/ep3_art_nt.png') center center;
  background-size: cover;
}

.art.eons_of_joy {
  background: url('../images/song_art/ep4_art_nt.png') center center;
  background-size: cover;
}

.art.such_is_love {
  background: url('../images/song_art/ep5_art_nt.png') center center;
  background-size: cover;
}

.art.beautiful_life {
  background: url('../images/song_art/ep6_art_nt.png') center center;
  background-size: cover;
}

.art.planet_my_love {
  background: url('../images/song_art/ep7_art_nt.png') center center;
  background-size: cover;
}

.art.empty_world {
  background: url('../images/song_art/ep8_art.png') center center;
  background-size: cover;
  /* The instrumental track has no lyrics to keep legible over the art,
     so it can sit brighter than the backdrop on the lyric pages —
     about halfway between that dim backdrop and full strength. */
  opacity: 0.59;
}

.art.wake_up {
  background: url('../images/song_art/ep9_art_nt.png') center center;
  background-size: cover;
}

.container.song .columns {
  justify-content: center;
  flex-wrap: wrap;
}

.column.lyrics {
  flex-grow: 0;
  flex-basis: 420px;
  max-width: 420px;
}

.column.lyrics p {
  margin: 1rem;
  /* The song art sits behind this text as a dim backdrop, so it needs
     a halo to stay readable over the brighter parts of the image. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 0, 0, 0.85);
}

/* Music page */

.music a:hover {
  color: white;
}

.music dd {
  margin-bottom: 0.5rem;
}

.music img.cover {
  border: 1px solid #8295E9;
  box-shadow: 1px 1px 1px #999;
}

.music .locations {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.music .locations .buy-prompt {
  display: inline-block;
  margin-right: 2rem;
  margin-bottom: 0.5rem;
}

.music .stores {
  display: inline-block;
}

.music .stores img {
  width: 1.75em;
  margin-right: 0.5rem;
}

/* Podcast + People pages */

.podcast h2,
.people h2 {
  margin: 0 0 1rem;
}

.podcast h3,
.people h3 {
  margin: 1rem 0 0 0;
}

.podcast h3.with-divider,
.people h3.with-divider {
  border-bottom: solid 1px gray;
  padding-bottom: 1rem;
  margin-bottom: 2rem;
}

.podcast p,
.people p {
  margin: 1rem 0;
}

.podcast .sources img {
  display: inline-block;
  width: auto;
  height: 2.5rem;
  margin: 0.25rem 0.5rem 0 0;
}

.podcast a:hover,
.people a:hover {
  color: white;
}

.podcast dl,
.people dl {
  margin-bottom: 1.5rem;
}

.podcast dl dt,
.people dl dt {
  font-weight: bold;
  margin: 1rem 0 0.25rem;
}

.podcast dl dd,
.people dl dd {
  margin-top: 0;
}

.podcast .name {
  margin-bottom: 0;
}

.podcast .name h1 {
  margin: 0;
}

.podcast h3 {
  margin-bottom: 1rem;
}

.podcast li a {
  display: inline-block;
  margin-bottom: 1rem;
}

.podcast .transcript {
  margin-top: 0;
}

.podcast img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0.4rem 0 1rem 0;
}

.podcast p {
  margin: 0 0 1rem;
}

.people h2 {
  margin-bottom: 0;
}

.people img.people {
  height: 3em;
  width: 3em;
}

/* Links page */

.links .columns {
  padding-top: 1rem;
}

.links .pic {
  padding-left: 1rem;
}

.links p {
  margin-top: 1rem;
}

/* Smartphones (portrait) */
@media only screen and (max-width: 768px) {
  .hero.is-primary {
    display: none;
  }

  section {
    padding-top: 1rem;
  }

  h1.is-size-3 {
    font-size: 1.5rem !important;
    margin-top: 0;
  }

  .home ._title,
  .home .dash,
  .home ._subtitle,
  .home .contact,
  .home footer {
    display: none;
  }

  .home .blurb {
    margin: 0 0 1rem 0 !important;
    padding: 0;
  }

  .column.home {
    padding: 0;
  }

  .home .columns {
    display: flex;
    flex-direction: column-reverse;
  }

  .home p.is-size-4 {
    margin-top: 0.5rem;
  }

  .home p.note {
    display: none;
  }

  img.cover {
    border: 1px solid #8295E9;
    box-shadow: 1px 1px 1px #999;
    margin: 0;
    height: 250px !important;
    width: 250px !important;
  }

  .podcast .name,
  .podcast .episode-art {
    display: none;
  }

  .column.lyrics {
    flex-basis: auto;
    max-width: none;
  }
}