/* ==========================================================================
   Thomas Arnett — shared styles
   --------------------------------------------------------------------------
   Everything that's the same on every page: colours and fonts, the basics,
   the top bar, the floating WhatsApp button and its little panel, and the
   foot of the page. Each page has its own stylesheet for the rest.

   Change a colour or the top bar here and it changes on all four pages.
   ========================================================================== */

/* ---------- 1. Design tokens ---------- */
:root {
  --red:   #E4002B;
  --black: #000000;
  --white: #FFFFFF;
  --paper: #F7F6F2;
  --choir: #EDE6DA;        /* the choir's colour */
  --coral: #FF5B3A;        /* the social colour */

  /* Category colours used by the selector on the home page */
  --cat-sport:  #E4002B;
  --cat-music:  #7E1512;
  --cat-choir:  #EDE6DA;
  --cat-social: #FF5B3A;

  --display: "Anton", Impact, sans-serif;           /* headings, nav, labels */
  --serif:   "Newsreader", Georgia, serif;          /* lines and body text */
  --keys:    "Archivo", "Arial Narrow", sans-serif; /* piano key letters */

  --gutter: 16px;
  --bar-h: 60px;           /* the fixed top bar's own height */

  /* How far content has to start below the top of the screen. Normally that's
     just the bar. The home page raises it while the "happening soon" banner is
     showing, and everything follows — page padding, sticky headings and every
     jump target are all measured from this one value. */
  --bar: var(--bar-h);
}
@media (min-width: 900px) {
  :root { --gutter: 40px; --bar-h: 72px; }
}

/* ---------- 2. Base ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--black);
  font: 18px/1.5 var(--serif);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }

/* Anything marked hidden really is hidden. The browser's own rule for this
   is weak, so any element we also give a display to - a grid, a flex row -
   quietly ignores it and shows an empty box. This has caught us twice, so
   it's settled here once for the whole site. */
[hidden] { display: none !important; }

/* Anything you can jump to keeps clear of the fixed top bar. Without this,
   a link like music.html#lessons lands with the bar covering the start of
   the section, which looks like landing in the middle of the page. */
[id] { scroll-margin-top: var(--bar); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.label { font-family: var(--display); font-size: 15px; letter-spacing: .06em; }
.note { font-style: italic; font-size: 15px; opacity: .8; }

/* One word of a headline in red. On a red background it goes black instead,
   and on black it stays red. */
.hl { color: var(--red); }
.on-red .hl, .card--red .hl { color: var(--black); }

/* A real photo. It fills its box and crops, rather than being squashed, so
   the layout keeps its shape whatever the photo's own proportions are.
   Wherever a page styles ".ph", it styles ".pic" the same way. */
.pic { overflow: hidden; background: #E6E4DE; }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Striped box where a real photo will go. Delete once the photos are in. */
.ph {
  display: flex;
  align-items: flex-end;
  padding: 12px;
  background: repeating-linear-gradient(135deg, #E6E4DE 0 12px, #DCDAD3 12px 24px);
  color: #4F4E4A;
  font: 12px/1.2 var(--display);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.on-black .ph, .card--black .ph { background: repeating-linear-gradient(135deg, #1D1D1D 0 12px, #262626 12px 24px); color: #999; }
.on-red .ph, .card--red .ph { background: repeating-linear-gradient(135deg, #F2F0EA 0 12px, #E8E5DE 12px 24px); }

/* Buttons */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  background: var(--red);
  color: var(--white);
  font: 18px var(--display);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.cta:hover, .cta:focus-visible { background: var(--black); }
.on-red .cta { background: var(--black); }
.on-red .cta:hover, .on-red .cta:focus-visible { background: var(--white); color: var(--black); }
/* An address that opens on a map. Underlined, because a place name that
   does something when you tap it has to look like it will. */
.map-a { text-decoration: underline; text-underline-offset: 3px; }
.map-a:hover, .map-a:focus-visible { color: var(--red); }
.on-red .map-a:hover, .on-red .map-a:focus-visible,
.on-black .map-a:hover, .on-black .map-a:focus-visible { color: var(--white); }

/* The quiet second way to get in touch, sitting beside a button that opens
   WhatsApp. Everything that can be booked offers both. */
.or-email { align-self: center; font: italic 17px var(--serif); text-decoration: underline; text-underline-offset: 3px; }
.or-email:hover, .or-email:focus-visible { color: var(--red); }
.on-red .or-email:hover, .on-red .or-email:focus-visible,
.on-black .or-email:hover, .on-black .or-email:focus-visible { color: var(--white); }

.cta--ghost { background: transparent; color: currentColor; border: 2px solid currentColor; }
.cta--ghost:hover, .cta--ghost:focus-visible { background: var(--black); color: var(--paper); }
.on-black .cta--ghost:hover, .on-black .cta--ghost:focus-visible { background: var(--white); color: var(--black); }

/* ---------- 3. Fixed top bar: name, photo and menu ----------
   Solid, and every page leaves room for it, so it never covers content. */
.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  height: var(--bar-h);     /* the bar itself never grows; only the gap below it does */
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--black);
  color: var(--white);
}
/* The name is the way home: it's a link to the top of the home page from
   every page of the site. The red underline appears on hover so it's clear
   it can be clicked. */
.bar__me { display: flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; }
.bar__me .bar__name { border-bottom: 2px solid transparent; transition: border-color .2s; }
.bar__me:hover .bar__name, .bar__me:focus-visible .bar__name { border-bottom-color: var(--red); }
.bar__me:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.bar__photo {
  position: relative;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #2A2A2A;
  font: 14px var(--display);
  box-shadow: 0 0 0 2px var(--red);
  /* The photo itself is round, so the little number badge on the home page
     can hang off the edge without being cut off. */
  overflow: visible;
}
.bar__photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
/* The number badge on the home page, showing which card you're on */
.bar__num {
  position: absolute;
  right: -9px;
  bottom: -5px;
  padding: 0 4px;
  background: var(--red);
  font: 11px/1.4 var(--display);
}
.bar__me > span:last-child { min-width: 0; overflow: hidden; }
.bar__name { display: block; font: 16px/1.05 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.bar__role { display: block; font: italic 13px/1.2 var(--serif); color: #CFCFCF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; flex: none; gap: 2px; }
.nav a {
  padding: 6px 8px;
  font: 14px var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
  transition: background-color .2s;
}
.nav a:hover, .nav a:focus-visible, .nav [aria-current="page"] { background: var(--red); }

@media (min-width: 900px) {
  .bar__photo { width: 48px; height: 48px; }
  .bar__name { font-size: 20px; }
  .bar__role { font-size: 15px; }
  .nav { gap: 4px; }
  .nav a { padding: 9px 16px; font-size: 16px; }
}

/* ---------- 4. The WhatsApp button, on every page ---------- */
.whatsapp {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 70;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--red);
  color: var(--white);
  box-shadow: 0 6px 18px rgba(0,0,0,.35);
  cursor: pointer;
  transition: transform .2s, background-color .2s;
}
.whatsapp:hover, .whatsapp:focus-visible { background: var(--black); transform: scale(1.06); }
.whatsapp svg { width: 30px; height: 30px; fill: currentColor; }

/* A quiet nudge, so the button gets noticed once: a ring that grows out of
   it and fades, a few seconds after the page has settled. Twice, then it
   rests. A button that pulses forever stops being a nudge and becomes an
   irritation — and anyone who has already tapped it never sees it at all. */
.whatsapp::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--red);
  opacity: 0;
  pointer-events: none;
}
.whatsapp.is-nudging::after { animation: nudge 1.8s ease-out 2; }
@keyframes nudge {
  from { transform: scale(1);    opacity: .75; }
  to   { transform: scale(1.75); opacity: 0; }
}
@media (min-width: 900px) { .whatsapp { right: 24px; bottom: 24px; width: 64px; height: 64px; } }

/* The little panel it opens on pages that cover more than one thing */
.ask {
  margin: auto auto 90px;
  width: min(92vw, 380px);
  padding: 22px;
  border: 0;
  background: var(--paper);
  color: var(--black);
  box-shadow: 10px 10px 0 var(--red);
}
.ask::backdrop { background: rgba(0,0,0,.6); }
.ask h2 {
  margin-bottom: 14px;
  max-width: none;
  font: 400 28px/1.05 var(--display);
  font-style: normal;
  text-transform: uppercase;
}
.ask__options { display: grid; gap: 8px; }
.ask__options a {
  padding: 14px 16px;
  border: 2px solid var(--black);
  font: 20px var(--display);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
}
.ask__options a:hover, .ask__options a:focus-visible { background: var(--red); color: var(--white); border-color: var(--red); }
.ask__close { margin-top: 14px; background: none; border: 0; font: italic 16px var(--serif); text-decoration: underline; cursor: pointer; }

/* ---------- 4b. A video, without the weight of one ----------
   Until someone presses play this is a single picture and a button: no
   YouTube player, no scripts of theirs, nothing tracking a visitor who
   never asked to watch. The player only arrives on the click, and it
   arrives already playing. Shared, because the Minecraft walk-through
   will want exactly the same thing when it turns up. */
.watch { display: grid; gap: 20px; }
.watch__player {
  position: relative;
  /* Most videos are widescreen; a film of our own says its own shape in
     settings.js, so the box is right before anything has loaded and nothing
     jumps about when it does. */
  aspect-ratio: var(--ratio, 16 / 9);
  background: #111;
  overflow: hidden;
}
.watch__player iframe,
.watch__player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.watch__player video { object-fit: contain; background: #000; }

/* A video with nothing beside it, where the page already has something in
   that space - the Minecraft church, where the joining details sit there. */
.watch.watch--solo { display: block; }

/* The poster and the play button are one button, so the whole picture is
   the target - easy to hit on a phone, and one tab stop for a keyboard. */
.watch__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: #111 center / cover no-repeat;
  cursor: pointer;
}
.watch__play::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.25);
  transition: background-color .2s;
}
.watch__play:hover::before, .watch__play:focus-visible::before { background: rgba(0,0,0,.05); }
.watch__play:focus-visible { outline: 3px solid var(--red); outline-offset: -3px; }

/* The red circle with the triangle in it.

   It has its own class rather than being "the span inside the button".
   That selector also caught the hidden label that tells a screen reader
   what the video is - turning it into a second circle, clipped to nothing
   but still taking up a row, which pushed the real one off centre. */
.watch__ring {
  position: relative;
  width: 76px;
  height: 76px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
  transition: transform .2s;
}
.watch__ring::after {
  content: "";
  margin-left: 6px;               /* a triangle looks off-centre without this */
  border: 15px solid transparent;
  border-left: 24px solid var(--white);
}
.watch__play:hover .watch__ring, .watch__play:focus-visible .watch__ring { transform: scale(1.08); }

.watch__side { display: grid; gap: 12px; align-content: center; justify-items: start; }
.watch__side p { font: italic 17px/1.45 var(--serif); opacity: .85; }

@media (min-width: 900px) {
  .watch { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); column-gap: 32px; }
  .watch__ring { width: 88px; height: 88px; }
}

/* ---------- 5. Foot of the page ---------- */
.foot {
  position: relative;
  z-index: 2;
  padding: 40px var(--gutter) 90px;
  display: grid;
  gap: 18px;
  background: var(--paper);
  color: var(--black);
  border-top: 2px solid var(--black);
}
.foot a { font: 18px var(--display); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; }
.foot a:hover, .foot a:focus-visible { color: var(--red); }
.foot__note { font: italic 15px var(--serif); text-transform: none; letter-spacing: 0; opacity: .75; }
@media (min-width: 900px) { .foot { grid-template-columns: repeat(3, 1fr); align-items: center; } }

/* ---------- 6. Less motion, for anyone who asks their device for it ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .whatsapp { transition: none; }
  .watch__play::before, .watch__ring { transition: none; }
  .watch__play:hover .watch__ring, .watch__play:focus-visible .watch__ring { transform: none; }
  .whatsapp.is-nudging::after { animation: none; }
}