@import url(_fonts.css);

:root {
  --green: #3a9b5a;
  --dark-green: #285d47;
  --red: #df4a39;
  --dark-blue: #1a3337;
  --blue: #6397a0;
  --white: #ffffff;
  --grey: #c9c7c6;
  --skin: #f8dfa9;
}

body {
  color: var(--dark-blue);
  background-color: #91bfc7;
  font-family: "National Park", Helvetica, sans-serif;
  font-size: 20px;
  letter-spacing: 0.025ch;
  margin: 0;
  padding: 0;
}

a {
  color: #5a5a5a;
}

h1,
h2 {
  /* font-family: "zeitung", sans-serif; */
  font-weight: 700;
  font-style: normal;
}

header,
section#introduction {
  color: #ffffff;
}

section#introduction a {
  color: #cfe8ea;
}

/* Container */
div.container {
  padding: 1em;
}

div.container > * {
  max-width: 600px;
  margin-inline: auto;
}

img {
  display: block;
  width: 100%;
  margin: 0;
}

/* Layout for showing two images side-by-side */
.image-row {
  display: flex;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  margin: 40px 0;
}

.image-row > * {
  flex: 0 0 calc((100% - 2rem) / 2);
}

.image-row img {
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

/* Image swap: show alternate image on hover */
.image-swap {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}
.image-swap img {
  width: 100%;
  display: block;
  height: auto; /* preserve intrinsic aspect ratio */
}
.image-swap .hover-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto; /* match base image aspect ratio instead of forcing 100% height */
  opacity: 0;
  transition: opacity 180ms ease-in-out, transform 180ms ease-in-out;
  z-index: 2;
}
.image-swap:hover .hover-img,
.image-swap:focus .hover-img {
  opacity: 1;
}

/* Sticky behaviour for a specific image wrapper used beside the ordered list
   Put this near the image-swap rules so it's easy to find. */
.image-swap.sticky {
  /* sticky relative to the viewport; `top` controls distance from top */
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 1rem;
  align-self: flex-start; /* keep alignment inside the .image-row */
  display: block; /* block-level so width rules behave predictably */
  /* keep overflow hidden for hover effects but allow sticky to work */
  overflow: visible;
}

/* Accessibility: if reduced motion is preferred, disable transitions */
@media (prefers-reduced-motion: reduce) {
  .image-swap .hover-img {
    transition: none;
  }
}

.image-swap img[src*="rugzak"] {
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
}
.image-swap .hover-img[src*="rugzak"] {
  width: 100%;
  max-width: none;
  height: auto;
}

/* Big Three */
#the-big-three h3 {
  color: var(--red);
}

#consumables h3 {
  color: var(--white);
}

/* List */
ol.list {
  margin-top: 0;
}
.list li:not(:last-child) {
  border-bottom: 1.5px solid var(--dark-blue);
  padding-bottom: 0.3em;
  margin-bottom: 0.25em;
}

/* Columns */
.columns {
  padding-top: 1em;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1em;
}

/* Scroll sequence */
.scroll-sequence {
  display: grid;
  position: sticky;
  top: 1rem;
  align-self: flex-start;
}

.scroll-sequence > * {
  grid-area: 1/1;
}

/* Utility classes */
.pad-content {
  padding: 0.5em;
}