/* ── index.css ── */
/* Global stylesheet */
* {
	box-sizing: border-box;
}

html,
body {
	font-family: var(--font-family);
	font-size: 16px;
	color: var(--text-color);
	background-color: var(--background-color);
}

/* The skip link shows itself when a keyboard reaches it. */
#skip-link:focus {
	background-color: var(--background-highlight);
	clip: auto;
	clip-path: none;
	color: var(--color-highlight);
	height: auto;
	left: 1rem;
	padding: 0.5rem 1rem;
	top: 1rem;
	width: auto;
	z-index: 200;
}

/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

p:last-child {
	margin-bottom: 0;
}
p {
	line-height: 1.5;
}

li {
	line-height: 1.5;
}

p {
	text-wrap: pretty;
}
h1, h2, h3 {
	text-wrap: balance;
}

a[href] {
	color: var(--text-color-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
a[href]:hover {
	text-decoration-thickness: 2px;
}

/* One focus ring for every link and control, in the brand yellow. */
:focus-visible {
	outline: 3px solid var(--outline-highlight);
	outline-offset: 2px;
}

::selection {
	background-color: var(--yellow-30);
	color: black;
}
a[href]:visited {
	color: var(--text-color-link);
}
a[href]:hover,
a[href]:active {
	color: var(--text-color-link);
}

/* Each step at least 1.3x the one below it, so a heading always reads
   as a heading. */
h1 {
	font-size: 2.5em;
	line-height: 1.15;
}
h2 {
	font-size: 1.75em;
	line-height: 1.2;
}
h3 {
	font-size: 1.3em;
	line-height: 1.3;
}
h1 + .note, h2 + .note, h3 + .note {
	font-style: italic;
	margin-top: -1rem;
}

table {
	margin: 1em 0;
}
table td,
table th {
	padding-right: 1em;
}

.map-container {
	background-color: var(--background-color-highlight);
	color: var(--text-color);
	display: flex;
	flex-direction: column;
}

.map-container .key {
	padding: 1rem;
}
.map-container ul,
ul.key {
	list-style: none;
	padding: 0;
}

@media (min-width: 768px) {
	.map-container {
		flex-direction: row;
	}
}

#tasso-map {
	aspect-ratio: 1.2;
	height: 300px;
	width: 100%;
	max-width: 400px;
}
#tasso-map.wide {
	aspect-ratio: 1.5;
	max-width: 900px;
}

.location-key,
.location-marker {
	background-color: var(--marker-blue);
	color: white;
	padding: 0 0.25rem;
}

.location-kissi {
	background-color: var(--marker-red);
	color: white;
}

/* The key that points (map.js): a place's number in the text and its
   marker light up together, in the brand yellow, the marker ringed so
   it stands out on the map. Nothing moves: Leaflet places markers with
   a transform, and a scale would carry the marker away from its spot. */
.location-key,
.location-marker {
	transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}
.location-key.is-pointed,
.location-marker.is-pointed {
	background-color: var(--brand-yellow);
	color: black;
}
.location-marker.is-pointed {
	box-shadow: 0 0 0 2px black, 0 0 0 4px var(--brand-yellow);
}
.location-marker:focus-visible {
	outline: 3px solid var(--outline-highlight);
	outline-offset: 2px;
}

.location-key {
	font-size: 0.875rem;
}

picture img {
	height: auto;
	width: 100%;
}
.picture-wrapper p {
	font-style: italic;
	text-align: center;
}

p.lead {
	font-size: 1.2em;
	font-weight: bold;
}

.hero {
	margin: 2rem auto 3rem;
	max-width: 500px;
	text-align: center;
}
.hero p {
	font-size: 1.3em;
}

.africa-map {
	margin: 1rem -2rem 2rem;
}
.africa-map > div {
	margin: 0 auto;
	max-width: 40em;
}

.two-columns {
	display: grid;
	grid-template-columns: 1fr;
}
/* The contact page's two lists are h2s for the outline, at h3 size. */
.two-columns h2 {
	font-size: 1.3em;
}

/* The email address is the main way in: give it room. The numbers
   line up as numbers. */
p.email {
	font-size: 1.3em;
}
.phones li {
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.two-columns {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ── layout.css ── */
body {
	padding: 0;
	min-height: 100dvh;
	margin: 0 auto;
	display: flex;
	align-items: stretch;
	flex-direction: column;
}

section > div {
  margin: 0 auto;
  /* About 70 characters a line, for reading. */
  max-width: calc(70ch + 4rem);
  padding: 0 2rem;
}

/* ── section.css ── */
section {
	border-top: var(--subtle-border);
	padding: 2rem 0;
}
section:first-child {
	border-top: none;
}
section.highlight {
	background-color: var(--background-color-highlight);
}
section.blue {
	background-color: var(--brand-light-blue);
	color: var(--text-on-brand-light-blue);
}
section.with-gladi-gladi {
	background-color: var(--background-sea);
	margin-top: 50px;
	position: relative;
}
section.with-gladi-gladi:before {
	background-image: url(/static/img/gladi-gladi-bg-400.png);
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
	height: 98px;
	left: 50%;
	margin-left: -100px;
	position: absolute;
	top: -44px;
	transition: all 5s linear;
	width: 200px;
	z-index: 1;
}

/* The Gladi-Gladi crossing: as its section scrolls into view, the boat
   glides a short way from just right of centre to just left of it, the
   trip to the island begun on the page. Tied to the scroll, so it only
   moves when the reader does; without scroll-driven animation, or with
   reduced motion, the boat simply waits in place. */
@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		section.with-gladi-gladi:before {
			animation: gladi-crossing linear both;
			animation-range: entry 0% cover 50%;
			animation-timeline: view();
		}
	}
}
@keyframes gladi-crossing {
	from {
		animation-timing-function: cubic-bezier(0.5, 1, 0.89, 1);
		translate: 60px 0;
	}
	to {
		translate: -60px 0;
	}
}

/* ── banner.css ── */
.banner {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50%;
  background-image: url(/static/img/banner.jpg);
  height: 300px;
  position: relative;
}

.banner picture {
  position: absolute;
  right: 1rem;
  bottom: -1rem;
}

.banner img {
  height: 100px;
  width: 100px;
}

@media (min-width: 640px) {
  .banner picture {
    right: 3rem;
    bottom: -1rem;
  }
  .banner img {
    height: 150px;
    width: 150px;
  }
}

/* ── cta.css ── */
.cta {
	display: flex;
	justify-content: center;

	a[href],
	a[href]:focus,
	a[href]:visited {
		background-color: var(--background-highlight);
		border-radius: 5px;
		color: var(--color-highlight);
		display: inline-block;
		text-decoration: none;
		padding: 0.5rem 1rem;
	}
	a[href]:hover {
		background-color: var(--yellow-60);
	}
}

/* ── gallery.css ── */
section.gallery {
  border: none;
  padding: 1rem 0;
  
  & > div {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    margin: 0;
    max-width: none;
  }

  & picture {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: 400px;
    margin: 0;
    width: clamp(320px, 100%, 400px);
  }

@media (min-width: 640px) {
  section.gallery > div {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 820px) {
  section.gallery > div {
    grid-template-columns: repeat(3, 1fr);
  }
}
}


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

.gallery-picture p {
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* ── montage.css ── */
.montage {
  margin: 1rem -2rem;
}
.montage div {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 auto;
  max-width: 400px;
}
.montage picture {
  width: 100%;
}
.montage img {
  aspect-ratio: 1;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Who took the montage's photos, and under which licence: folded away
   under the button, since nine credits would outweigh nine photos. */
.photo-credits {
  font-size: 0.875rem;
  margin-top: 1.5rem;
  text-align: center;

  summary {
    cursor: pointer;
  }

  ul {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
  }
}

/* ── prices.css ── */
table.price-list {
  border-collapse: collapse;
  & th {
    border-right: var(--subtle-border);
    font-weight: normal;;
    padding: 0.5rem;
    vertical-align: bottom;

    &:last-child {
      border-right: none;
    }
  }
  & td {
    border: var(--subtle-border);
    padding: 0.5rem;
  }
  width: 100%;
  & th {
    text-align: left;
  }
  & .numeric {
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
    width: 15ch;
  }
}

/* ── footer.css ── */
footer {
  border-top: var(--subtle-border);
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
  margin-top: auto;
  padding: 1rem;

  p {
    margin: 0;
  }
  
  @media (width > 768px) {
    flex-direction: row;
  }
}

/* ── typography.css ── */
body {
  font-family: var(--font-family);
  font-size: 16px;
}

.ha-placeholder {
  display: none !important;
}

/* ── wildlife.css ── */
.bird-list {
  --border-radius: 1rem;
  --background-card: var(--gray-5);
  --color-card: black;

  @supports (color: light-dark(black, white)) {
    --background-card: light-dark(var(--gray-5), var(--gray-80));
    --color-card: light-dark(black, white);
  }

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 1rem;

  @media (min-width: 640px) {
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 960px) {
    grid-template-columns: repeat(3, 1fr);
  }

  bird-card {
    background-color: var(--background-card);
    border-radius: var(--border-radius);
    color: var(--color-card);
    /* The card's six parts (photo, name, Latin name, home, link, photo
       credit) share
       their rows with the other cards in the row, so the names line up
       however each bird was framed. The photos are never cropped: each
       sits at the top of its card, above any space a taller one leaves. */
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    overflow: hidden;
    padding-bottom: 1.5rem;
    row-gap: 0.25rem;
    text-align: center;

    picture {
      align-self: start;
      display: block;
    }

    img {
      display: block;
      height: auto;
      width: 100%;
    }

    h3 {
      margin: 0.75rem 1rem 0;
    }

    p {
      margin: 0 1rem;

      &.latin {
        font-style: italic;
      }

      &.link {
        margin-top: 0.5rem;
      }

      &.credit {
        font-size: 0.875rem;
        margin-top: 0.5rem;
      }
    }
  }
}


/* ── whats-on.css ──
   The events coming up: a date tile in the brand blue beside each
   event's title, date, description and link. */
.event-list {
  display: grid;
  gap: 1.25rem;
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
}

.event-list > li {
  line-height: inherit;
}

.event-card {
  align-items: start;
  border: var(--subtle-border);
  border-radius: 1rem;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: auto 1fr;
  padding: 1.25rem;
}

.event-date {
  align-content: center;
  aspect-ratio: 1;
  background-color: var(--brand-blue);
  border-radius: 0.75rem;
  color: black;
  display: grid;
  justify-items: center;
  line-height: 1;
  width: 4.5rem;
}

.event-wd,
.event-m {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.event-d {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
}

.event-body {
  min-width: 0;

  h2 {
    margin: 0;
    overflow-wrap: anywhere;
  }

  .event-when {
    margin: 0.25rem 0 0;
    opacity: 0.8;
  }

  .event-soon {
    background-color: var(--brand-yellow);
    border-radius: 999px;
    color: black;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    margin-inline-end: 0.35rem;
    padding: 0.1rem 0.55rem;
    text-transform: uppercase;
    vertical-align: 0.1em;
  }

  /* The description as written: paragraphs a short step apart, lists
     with ordinary bullets and items close together. The editor writes
     each item as its own paragraph (a "loose" list), so an item's
     paragraph loses its margins here. */
  .event-notes {
    margin-top: 0.75rem;

    > :first-child { margin-top: 0; }
    > :last-child { margin-bottom: 0; }

    p { margin: 0.6rem 0; }

    ul, ol {
      margin: 0.6rem 0;
      padding-inline-start: 1.25rem;
    }
    ul { list-style: disc; }
    ol { list-style: decimal; }

    li { margin: 0.15rem 0; padding-inline-start: 0.2rem; }
    li > p { margin: 0; }
    li::marker { color: color-mix(in srgb, var(--brand-blue) 70%, var(--text-color)); }
  }

  .event-more {
    margin: 1rem 0 0;

    a[href] {
      font-weight: 600;
    }
  }
}

/* On a phone the tile sits beside the title and date only; the
   description and link take the card's full width below. */
@media (width < 480px) {
  .event-card {
    align-items: center;
    gap: 0 1rem;
    padding: 1rem;
  }

  .event-date {
    grid-row: span 2;
  }

  .event-body {
    display: contents;

    h2 { align-self: end; }
    .event-when { align-self: start; }
    .event-notes,
    .event-more { grid-column: 1 / -1; }
    .event-notes { margin-top: 1rem; }
  }

  .event-date {
    width: 3.75rem;
  }

  .event-d {
    font-size: 1.6rem;
  }
}

/* ── between pages ──
   The menu's current-page pill glides from page to page (header.css
   names the parts and says why). The opt-in is here, not in header.css,
   because only the website's pages load this file: a page transitions
   only when both it and the next one opt in, so the admin screens,
   which wear the same header, stay out of it. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-group(*.nav-link) {
  z-index: 2;
}

::view-transition-group(nav-current) {
  z-index: 1;
}

/* The pill is a plain blue shape: it stretches to the new link's width
   on the way, clipped to a pill, so its ends stay round. */
::view-transition-group(nav-current) {
  animation-duration: 280ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
  border-radius: 999px;
  overflow: clip;
}

::view-transition-old(nav-current),
::view-transition-new(nav-current) {
  animation-duration: 280ms;
  height: 100%;
  width: 100%;
}

/* Arriving at the contact page, Contact us's yellow clears quickly, so
   the blue pill lands on the button rather than mixing with it on the
   way in. */
::view-transition-old(nav-contact) {
  animation-duration: 120ms;
}