/* ── 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%;
}

/* ── 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;
  }
}

/* ── properties.css ── */
:root {
  --font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
  --font-family-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;;
  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
}

:root {

  /* Brand colors */
  --brand-yellow: #e1ce5c;
  --brand-blue: #4daeea;
  --brand-red: #e65454;

  /* Palettes */
  --gray-5: color-mix(in oklch, black 5%, white);
  --gray-10: color-mix(in oklch, black 10%, white);
  --gray-20: color-mix(in oklch, black 20%, white);
  --gray-30: color-mix(in oklch, black 30%, white);
  --gray-40: color-mix(in oklch, black 40%, white);
  --gray-50: color-mix(in oklch, black 50%, white);
  --gray-60: color-mix(in oklch, black 60%, white);
  --gray-70: color-mix(in oklch, black 70%, white);
  --gray-80: color-mix(in oklch, black 80%, white);  
  --gray-90: color-mix(in oklch, black 90%, white);  
  --gray-95: color-mix(in oklch, black 95%, white);

  --yellow-10: color-mix(in oklch, var(--brand-yellow)  20%, white);
  --yellow-20: color-mix(in oklch, var(--brand-yellow)  40%, white);
  --yellow-30: color-mix(in oklch, var(--brand-yellow)  60%, white);
  --yellow-40: color-mix(in oklch, var(--brand-yellow)  80%, white);
  --yellow-50: color-mix(in oklch, var(--brand-yellow) 100%, white);
  --yellow-60: color-mix(in oklch, var(--brand-yellow)  80%, black);
  --yellow-70: color-mix(in oklch, var(--brand-yellow)  60%, black);
  --yellow-80: color-mix(in oklch, var(--brand-yellow)  40%, black);
  --yellow-90: color-mix(in oklch, var(--brand-yellow)  20%, black);

  --blue-10: color-mix(in oklch, var(--brand-blue)  20%, white);
  --blue-20: color-mix(in oklch, var(--brand-blue)  40%, white);
  --blue-30: color-mix(in oklch, var(--brand-blue)  60%, white);
  --blue-40: color-mix(in oklch, var(--brand-blue)  80%, white);
  --blue-50: color-mix(in oklch, var(--brand-blue) 100%, white);
  --blue-60: color-mix(in oklch, var(--brand-blue)  80%, black);
  --blue-70: color-mix(in oklch, var(--brand-blue)  60%, black);
  --blue-80: color-mix(in oklch, var(--brand-blue)  40%, black);
  --blue-90: color-mix(in oklch, var(--brand-blue)  20%, black);

  --red-10: color-mix(in oklch, var(--brand-red)  20%, white);
  --red-20: color-mix(in oklch, var(--brand-red)  40%, white);
  --red-30: color-mix(in oklch, var(--brand-red)  60%, white);
  --red-40: color-mix(in oklch, var(--brand-red)  80%, white);
  --red-50: color-mix(in oklch, var(--brand-red) 100%, white);
  --red-60: color-mix(in oklch, var(--brand-red)  80%, black);
  --red-70: color-mix(in oklch, var(--brand-red)  60%, black);
  --red-80: color-mix(in oklch, var(--brand-red)  40%, black);
  --red-90: color-mix(in oklch, var(--brand-red)  20%, black);

  --subtle-border: 1px solid var(--gray-5);
  --background-sea: #c5e1f4;
  /* Darkened to 55% so a link reads at WCAG AA (4.5:1) on every light
     background it sits on: white, sand, the grey cards and the sea. */
  --text-color-link: color-mix(in srgb, var(--brand-blue) 55%, black);

  --background-color: var(--gray-5);
  --background-highlight: var(--yellow-50);
  /* The sand-tinted band behind highlighted sections and the map key. */
  --background-color-highlight: var(--yellow-10);
  --outline-highlight: var(--yellow-70);
  --color-highlight: black;

  --marker-blue: var(--blue-70);
  --marker-red: var(--red-60);

  @supports (color: light-dark(black, white)) {
    --background-color: light-dark(white, var(--gray-95));
    --text-color: light-dark(black, white);
    --text-color-link: light-dark(color-mix(in srgb, var(--brand-blue) 55%, black), color-mix(in srgb, var(--brand-blue) 80%, white));
    --subtle-border: 1px solid light-dark(var(--gray-10), var(--gray-80));
    --background-color-highlight: light-dark(color-mix(in oklch, var(--brand-yellow) 14%, white), color-mix(in oklch, var(--brand-yellow) 10%, var(--gray-95)));
    /* The dark yellow ring vanishes on a dark page; the brand yellow doesn't. */
    --outline-highlight: light-dark(var(--yellow-70), var(--brand-yellow));
    /* Dark mode darkens the sea too, or the page's white text sits on
       pale blue there. */
    --background-sea: light-dark(#c5e1f4, color-mix(in oklch, var(--brand-blue) 30%, var(--gray-95)));
  }
}

/* ── 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;
  }
}

/* ── nav.css ── */
:root {
  --hamburger-slice-color: var(--text-color);
  --hamburger-size: clamp(16px, 10vmin, 32px); /* Sensible value */

  /* --hamburger-size: 200px; /* 👈 A value to show that the math is correct */
}

#navigation {
  z-index: 1000;
}
#menu {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
}
#hamburger-toggle {
  opacity: 0;
  cursor: pointer;
  position: absolute;
}
#hamburger {
  display: block;
  cursor: pointer;
  width: var(--hamburger-size);
  height: var(--hamburger-size);
  box-sizing: content-box;
}
#hamburger .slice {
  --slice-height: 2px;
  display: block;
  position: relative;
  width: 100%;
  height: var(--slice-height, 2px);
  border-radius: var(--slice-height);
  transition: all 0.1s ease;
  background-color: var(--hamburger-slice-color);
  opacity: 90%;
}
#hamburger .slice {
  margin-top: 22%; /* Fallback to produce something hamburger-ish if calc is not available */
  margin-top: calc(33% - var(--slice-height));
  top: calc((33% - var(--slice-height)) / -2);
}

#hamburger-toggle:focus-visible ~ #hamburger {
  outline: 3px solid var(--outline-highlight);
  outline-offset: 4px;
}

#hamburger-toggle:checked ~ #menu {
  visibility: visible;
  opacity: 1;
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(1) {
  top: calc(50% - 33% + var(--slice-height) / 2);
  transform: rotate(45deg);
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(2) {
  opacity: 0;
}
#hamburger-toggle:checked ~ #hamburger .slice:nth-child(3) {
  top: calc(-50% + var(--slice-height) / 2);
  transform: rotate(-45deg);
}

body:has(#hamburger-toggle:checked) {
  main {
    opacity: 0.25;
  }
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: var(--subtle-border);
  position: relative;

  .site-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    padding: 0 1rem;

    a[href] {
      color: inherit;
      text-decoration: none;
    }
  }

  .hamburger {
    padding: 1rem;
  }
}

.menu {
  background-color: var(--background-color);
  border-bottom: var(--subtle-border);
  box-shadow: 0 30px 30px 0 light-dark(rgba(0, 0, 0, 0.05 ), rgba(255, 255, 255, 0.05));
  padding: 0 0 0.5rem;
  margin: 0;

  li {
    list-style-type: none;
    padding: 0;
    margin: 0;
  }

  a[href] {
    color: var(--text-color);
    display: block;
    padding: 1rem;
    text-decoration: none;
    text-wrap: nowrap;

    &:hover {
      text-decoration: underline;
    }

    &:focus-visible {
      outline-offset: -3px;
    }
  }

  /* In the open menu the current page is bold and underlined in the
     brand blue: a mark that doesn't depend on colour alone. */
  a[aria-current="page"] {
    font-weight: 700;
    text-decoration: underline 2px var(--brand-blue);
  }
}

@media (width > 600px) {
  #hamburger,
  #hamburger-toggle {
    display: none;
  }
  #menu {
    box-shadow: none;
    display: flex;
    flex-wrap: wrap;
    /* With the links' own 0.75rem, the words line up under the name. */
    padding: 0 0.25rem;
    position: revert;
    visibility: visible;
  }

  /* Where the name and the menu don't fit on one line, the menu takes
     its own line beneath the name rather than running off the edge. */
  header {
    flex-wrap: wrap;

    .site-name {
      font-size: 2rem;
      padding-block: 0.5rem;
    }
  }

  .menu a[href] {
    padding-inline: 0.75rem;
  }

  .menu {
    border-bottom: none;
    box-shadow: none;

    a[href] {  
      &:hover {
        background-color: color-mix(in srgb, var(--background-color) 90%, black);
        text-decoration: none;
      }
    }

    a[aria-current="page"] {
      background-color: var(--brand-blue);
      color: black;
      font-weight: normal;
      text-decoration: none;

      &:hover {
        background-color: color-mix(in srgb, var(--brand-blue) 90%, black);
      }
    }
  }
}

/* ── 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 five parts (photo, name, Latin name, home, link) 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 5;
    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;
      }
    }
  }
}