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

a[href] {
	color: var(--text-color-link);
}
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;
}

.links-nextprev {
	list-style: none;
	border-top: 1px dashed var(--color-gray-20);
	padding: 1em 0;
}

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

pre,
code {
	font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
	margin: 0.5em 0;
	line-height: 1.375; /* 22px /16 */
	-moz-tab-size: var(--syntax-tab-size);
	-o-tab-size: var(--syntax-tab-size);
	tab-size: var(--syntax-tab-size);
	-webkit-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
	direction: ltr;
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
}
code {
	word-break: break-all;
}

/* Posts list */
.postlist {
	list-style: none;
	padding: 0;
	padding-left: 1.5rem;
}
.postlist-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	counter-increment: start-from -1;
	margin-bottom: 1em;
}
.postlist-item:before {
	display: inline-block;
	pointer-events: none;
	content: "" counter(start-from, decimal-leading-zero) ". ";
	line-height: 100%;
	text-align: right;
	margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
	font-size: 0.8125em; /* 13px /16 */
	color: var(--color-gray-90);
}
.postlist-date {
	word-spacing: -0.5px;
}
.postlist-link {
	font-size: 1.1875em; /* 19px /16 */
	font-weight: 700;
	flex-basis: calc(100% - 1.5rem);
	padding-left: 0.25em;
	padding-right: 0.5em;
	text-underline-position: from-font;
	text-underline-offset: 0;
	text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
	font-weight: bold;
}

/* Tags */
.post-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-transform: capitalize;
	font-style: italic;
}
.postlist-item > .post-tag {
	align-self: center;
}

/* Tags list */
.post-metadata {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5em;
	list-style: none;
	padding: 0;
	margin: 0;
}
.post-metadata time {
	margin-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;
}

@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 {
		outline: 3px solid var(--outline-highlight);
	}
}

/* ── 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 {
  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%;
  & .numeric {
    text-align: right;
    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;
  --text-color-link: color-mix(in srgb, var(--brand-blue) 80%, black);

  --background-color: var(--gray-5);
  --background-highlight: var(--yellow-50);
  --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) 80%, black), color-mix(in srgb, var(--brand-blue) 80%, white));
    --subtle-border: 1px solid light-dark(var(--gray-5), var(--gray-70));
    /* 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 {
  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;
  position: relative;
  
  .site-name {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0;
    padding: 0 1rem;
  }

  .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;
    }
  }

  a[aria-current="page"] {
    text-decoration: underline;
  }
}

@media (width > 500px) {
  #hamburger,
  #hamburger-toggle {
    display: none;
  }
  #menu {
    box-shadow: none;
    display: flex;
    padding: 0;
    position: revert;
    visibility: visible;
  }

  header {
    .site-name {
      font-size: 2rem;
    }
  }

  .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;
      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);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 2rem;
    
    img {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      height: auto;
      max-height: 100%;
      max-width: 100%;
      object-fit: contain;
      width: auto;
    }

    p {
      margin: 0;
      
      &.latin {
        font-style: italic;
      }
    }
  }
}