/* Studio des Ballons - shared stylesheet for all pages */

:root {
  --bg: #413441;          /* page background */
  --panel: #483948;       /* menu bar and photo panel */
  --text: #ffffff;
  --title: #ffcc00;       /* yellow headings */
  --link: #00ff00;        /* green links */
  --link-hover: #ff8a8a;  /* readable on both purples (contrast 5.2 and 4.7) */
  --photo-radius: 8px;    /* rounded corners of photos */
  --thumb-radius: 5px;    /* rounded corners of small thumbnails */
  --font: "Comic Sans MS", "Chalkboard SE", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: 1.5;
}

img { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover, a:focus-visible { color: var(--link-hover); }

/* ---------- header: white band with the logo ---------- */

.site-header {
  background: #ffffff;
  padding-top: 12px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 16px;
}

.site-header img {
  display: block;
  width: 755px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
}

/* logo and menu bar stay at the top of the screen while scrolling */
.site-top {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* short screens (phones held sideways): smaller logo band, so the fixed top
   part doesn't take up too much of the screen */
@media (max-height: 500px) {
  .site-header { padding-top: 6px; padding-right: 16px; padding-bottom: 6px; padding-left: 16px; }
  .site-header img { width: auto; height: 32px; }
}

/* ---------- main menu ---------- */
/* Wide screens: one row of links. Narrow screens: a "Menu" button that opens
   and closes the links as a panel below the menu bar (HTML popover, no
   JavaScript). Browsers without popover support simply show the links,
   wrapped over several lines. */

.site-nav { background: var(--panel); }

.nav-toggle { display: none; }

/* reset the browser's default popover styling so the menu shows as a normal bar */
.nav-menu {
  display: block;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  overflow: visible;
  color: inherit;
  background: none;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  max-width: 1200px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 0;
  padding-right: 8px;
  padding-bottom: 0;
  padding-left: 8px;
  list-style: none;
}

.nav-links a {
  display: block;
  padding-top: 12px;
  padding-right: 8px;
  padding-bottom: 12px;
  padding-left: 8px;
  font-size: 0.875rem;
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links a[aria-current="page"] { color: var(--text); }
.nav-links a:hover, .nav-links a:focus-visible { color: var(--link-hover); }

.nav-toggle {
  font: inherit;
  font-weight: normal;
  font-style: italic;
  text-transform: uppercase;
  color: var(--link);
  background: none;
  border: 0;
  padding-top: 12px;
  padding-right: 16px;
  padding-bottom: 12px;
  padding-left: 16px;
  cursor: pointer;
}

.nav-toggle:focus-visible { color: var(--link-hover); }
/* only on devices with a real mouse: touch screens keep "hover" after a tap */
@media (hover: hover) {
  .nav-toggle:hover { color: var(--link-hover); }
}

@media (max-width: 759px) {
  /* The open menu is placed just below the logo and menu bar, so their height
     is fixed here: logo scaled to the screen width (max 56px high), 12px
     padding above and below it, and a menu bar of one line plus 24px padding. */
  :root {
    --logo-height: min(56px, (100vw - 32px) * 56 / 755);
    --top-height: calc(var(--logo-height) + 24px + 1.5rem + 24px);
  }

  .site-header { padding-top: 12px; padding-right: 16px; padding-bottom: 12px; padding-left: 16px; }

  .site-header img {
    width: 100%;
    height: var(--logo-height);
    object-fit: contain;
  }

  @supports selector(:popover-open) {
    .nav-toggle { display: block; margin-left: auto; }

    .nav-menu {
      position: fixed;
      inset: var(--top-height) 0 auto 0;
      max-height: calc(100vh - var(--top-height));
      overflow-y: auto;
      padding-top: 0;
      padding-right: 0;
      padding-bottom: 8px;
      padding-left: 0;
      background: var(--panel);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
      /* unfold downwards from the menu bar while fading in; display and overlay
         are animated too so the panel stays visible while it folds away */
      transition: opacity 0.3s ease-out, clip-path 0.3s ease-out,
                  display 0.3s allow-discrete, overlay 0.3s allow-discrete;
    }

    .nav-menu:not(:popover-open) {
      display: none;
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }

    /* negative bottom inset leaves room for the shadow */
    .nav-menu:popover-open { opacity: 1; clip-path: inset(0 0 -24px 0); }

    @starting-style {
      .nav-menu:popover-open { opacity: 0; clip-path: inset(0 0 100% 0); }
    }

    .nav-links { display: block; padding-top: 0; padding-right: 16px; padding-bottom: 0; padding-left: 16px; }

    .nav-links a {
      padding-top: 12px;
      padding-right: 4px;
      padding-bottom: 12px;
      padding-left: 4px;
      text-align: center;
      font-size: 1rem;
      border-top: 1px solid var(--bg);
    }
  }
}

/* no sliding menu for visitors who asked their device to reduce motion */
@media (prefers-reduced-motion: reduce) {
  .nav-menu { transition: none; }
}

/* ---------- page content ---------- */

.content {
  max-width: 1000px;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 32px;
  padding-left: 16px;
}

.site-title {
  margin-top: 16px;
  margin-right: 0;
  margin-bottom: 64px;
  margin-left: 0;
  font-size: 1rem;
  font-weight: normal;
  color: var(--title);
}

.tagline { margin-top: 4px; margin-right: 0; margin-bottom: 24px; margin-left: 0; }

/* ---------- photo viewer (home page) ---------- */

/* Narrow screens: top thumbnails in a row, the photo, then the side thumbnails in a row. */
.viewer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
}

.viewer-thumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
}

.viewer-thumbs a {
  display: block;
  line-height: 0;
  border: 1px solid var(--link);
  border-radius: var(--thumb-radius);
  overflow: hidden;
}
.viewer-thumbs a:hover, .viewer-thumbs a:focus-visible { border-color: var(--link-hover); }
.viewer-thumbs a[aria-current="true"] { border-color: var(--text); }
.viewer-thumbs img { display: block; }

.viewer-photo,
.thumbs-side { flex-basis: 100%; }

.viewer-photo {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-left: 10px;
  background: var(--panel);
  min-width: 0;  /* may shrink below the 320px photo frame on small phones */
}

/* a fixed 320x240 space; each photo is shown in its own shape, centred in it,
   so the rounded corners are on the photo itself */
.viewer-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 320px;
  max-width: 100%;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  aspect-ratio: 4 / 3;
}

.viewer-frame img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--photo-radius);
}

/* Wide screens: the layout of the original site. One thumbnail at the top left,
   three staggered thumbnails above the photo, and a narrow column of three
   thumbnails to the right of the photo. */
@media (min-width: 640px) {
  .viewer {
    display: grid;
    grid-template-columns: 88px 420px 86px;
    grid-template-areas:
      "corner top   ."
      ".      photo side";
    gap: 4px 2px;
    width: max-content;
  }

  .thumbs-corner { grid-area: corner; }

  .thumbs-top {
    grid-area: top;
    flex-wrap: nowrap;
    gap: 4px;
    padding-top: 36px;
  }
  .thumbs-top li:last-child { margin-top: 40px; margin-right: 0; margin-bottom: 0; margin-left: 6px; }

  .viewer-photo {
    grid-area: photo;
    display: flex;
    align-items: center;
    height: 270px;
  }

  .thumbs-side {
    grid-area: side;
    align-self: stretch;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 2px;
    background: var(--panel);
  }
}

/* ---------- text pages (Recordings, Package deals, Contact) ---------- */

.page-text { max-width: 760px; margin-top: 24px; }
.page-text p { margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; }

.page-heading {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
  font-size: 1.125rem;
  font-weight: normal;
  color: #00ffff;
}

.studio-name { color: var(--title); }
.highlight { color: var(--link-hover); }

/* ---------- equipment ---------- */
/* Four columns separated by narrow bars, as on the original page;
   two columns on tablets, one on phones. */

/* Each column has three rows, shared by all columns like the original table:
   1. the first group (heading and list) at the top; this row takes up the
      extra height, so the next two rows sit at the bottom
   2. the second heading ("Digital interfaces", "Console") on one line
   3. the second list, ending on the same line in every column */
.equipment {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 1fr auto auto;
  gap: 12px;
  margin-top: 24px;
  background: #463746;  /* shows through the gaps as separator bars */
}

.gear {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding-top: 0;
  padding-right: 8px;
  padding-bottom: 8px;
  padding-left: 8px;
  background: var(--bg);
  text-align: center;
}

.gear-mics { text-align: left; }

.gear h2 {
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: 0;
  font-size: 1rem;
  font-weight: normal;
  color: var(--title);
}

.gear ul { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; padding-top: 0; padding-right: 0; padding-bottom: 0; padding-left: 0; list-style: none; }

.gear > div { grid-row: 1; }
.gear > div:only-child { grid-row: 1 / -1; }  /* columns with one group use all rows */

.gear .gear-second { grid-row: 2; align-self: end; margin-top: 24px; }
.gear-second-list { grid-row: 3; align-self: end; }

/* items separated by a "*" line, as on the original page */
.gear .starred li + li::before,
.gear .star-first li:first-child::before { content: "*"; display: block; margin-top: 8px; }

@media (max-width: 759px) {
  .equipment { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 479px) {
  .equipment { grid-template-columns: minmax(0, 1fr); }
  .gear-mics { text-align: center; }
}

/* ---------- surroundings ---------- */

.surroundings {
  display: grid;
  grid-template-columns: minmax(0, 372px) 500px;
  gap: 32px;
  align-items: center;
  margin-top: 24px;
}

.surroundings-text p { margin-top: 0; margin-right: 0; margin-bottom: 1em; margin-left: 0; }

.slideshow {
  position: relative;
  width: 500px;
  max-width: 100%;
  aspect-ratio: 500 / 335;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

/* the photos lie on top of each other; the visible one fades in */
/* each photo in its own shape, centred, so the rounded corners are on the photo */
.slideshow img {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-top: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-left: auto;
  border-radius: var(--photo-radius);
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.slideshow img.is-visible { opacity: 1; }

@media (max-width: 959px) {
  .surroundings { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .slideshow img { transition: none; }
}

/* ---------- occasions ---------- */

.occasions { max-width: 800px; margin-top: 24px; text-align: center; }

.occasions-box {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 4px;
  padding-top: 24px;
  padding-right: 0;
  padding-bottom: 24px;
  padding-left: 0;
  background: #514151;
}

.occasions-box > div { min-height: 103px; }

.occasions-items {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: bold;
  color: #514151;
  background: #bbccc4;
}

.occasions-details { background: #ffffff; }

@media (max-width: 479px) {
  .occasions-box { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- maps ---------- */

.maps-heading {
  margin-top: 24px;
  margin-right: 0;
  margin-bottom: 24px;
  margin-left: 0;
  font-size: 3rem;
  font-weight: normal;
}

.maps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  list-style: none;
  text-align: center;
}

.maps figure { margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; }

.maps figcaption { font-weight: bold; font-style: italic; }

.map-open,
.map-close {
  display: block;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: none;
  line-height: 0;
}

.map-open { margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; cursor: zoom-in; }
.map-close { cursor: zoom-out; }

.map-open img { width: 200px; border-radius: var(--photo-radius); }

@media (max-width: 639px) {
  .maps { grid-template-columns: minmax(0, 1fr); }
}

/* large map in a popover over a darkened page; fades in while growing slightly */
.map-popover {
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  border: 0;
  background: none;
  overflow: visible;
  transition: opacity 0.3s ease-out, transform 0.3s ease-out,
              display 0.3s allow-discrete, overlay 0.3s allow-discrete;
}

.map-popover:not(:popover-open) { opacity: 0; transform: scale(0.95); }
.map-popover:popover-open { opacity: 1; transform: none; }

@starting-style {
  .map-popover:popover-open { opacity: 0; transform: scale(0.95); }
}

.map-popover::backdrop {
  background: rgba(0, 0, 0, 0.75);
}

.map-close img {
  display: block;
  width: auto;
  height: auto;
  max-width: 95vw;
  max-height: 90vh;
  border-radius: var(--photo-radius);
}

@media (prefers-reduced-motion: reduce) {
  .map-popover { transition: none; }
}