/* Foundation2: the whole stylesheet. No framework. */

/* ---------- Tokens ---------- */
:root {
  --dark: #232323;
  --hero-title: #717171;
  --hero-text: #777;
  --accent: #f7ed4a;      /* "What is Foundation2?" */

  --font-title: "Cabin", sans-serif;
  --font-heading: "Mulish", "Muli", sans-serif;
  --font-text: "Quicksand", sans-serif;
  --font-small: "Raleway", sans-serif;

  /* Type scale; shrinks fluidly below 768px (320px wide -> 768px wide). */
  --fs-title: 4.25rem;
  --fs-heading: 3rem;
  --fs-text: 1.5rem;
  --lh-heading: 1.2;
  --lh-text: 1.6;

  --gutter: 15px;
}

@media (max-width: 768px) {
  :root {
    --fs-title: calc(2.1375rem + (4.25 - 2.1375) * ((100vw - 20rem) / 28));
    --fs-heading: calc(1.7rem + (3 - 1.7) * ((100vw - 20rem) / 28));
    --fs-text: calc(1.175rem + (1.5 - 1.175) * ((100vw - 20rem) / 28));
    --lh-heading: 1.4;
    --lh-text: 1.4;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-height: 100vh;
  margin: 0;
  background: #fff;
  color: var(--dark);
  font: 400 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

h1, h2, p { margin: 0; }

.container {
  position: relative;          /* keeps text above the hero photo layer */
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
@media (min-width: 576px)  { .container { max-width: 540px; } }
@media (min-width: 768px)  { .container { max-width: 720px; } }
@media (min-width: 992px)  { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }

/* Centred text column: 10 of 12 columns on tablets and up. */
.column { margin: 0 auto; }
@media (min-width: 768px) {
  .column { width: calc((100% + 2 * var(--gutter)) * .83333); padding: 0 var(--gutter); }
}

/* ---------- Full-screen panels ---------- */
main { position: relative; z-index: 1; }   /* sits above the footer (see below) */

.hero,
.about {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  padding: 3rem 0;
  text-align: center;
}

.hero { overflow: hidden; background: #eee; }
/* Photo layer; site.js slides it down at half scroll speed (parallax). */
.hero-bg {
  position: absolute;
  inset: 0;
  background: url("../images/misty-forest.webp") 50% 50% / cover no-repeat;
  will-change: transform;
}

.hero-title {
  margin-bottom: .5rem;
  padding-bottom: 1rem;
  color: var(--hero-title);
  font: 700 var(--fs-title)/var(--lh-heading) var(--font-title);
  word-break: break-word;
}
.hero-text {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  color: var(--hero-text);
  font: 400 var(--fs-text)/var(--lh-text) var(--font-text);
}

/* Bobbing "scroll down" button (hidden on phones). */
.scroll-down {
  position: absolute;
  left: 50%;
  bottom: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  margin-left: -30px;
  border-radius: 50%;
  background: rgba(80, 80, 80, .5);
}
.scroll-down svg {
  width: 32px;
  height: 32px;
  fill: none;
  stroke: #fff;
  stroke-width: 1.2;
  animation: bob 1.7s ease-in-out infinite;
}
@keyframes bob { 50% { transform: translateY(-5px); } }
@media (max-width: 767px) {
  .scroll-down { display: none; }
}

.about { background: var(--dark); color: #fff; }
.about h2 {
  margin-bottom: .5rem;
  padding-bottom: 1rem;
  color: var(--accent);
  font: 300 var(--fs-heading)/var(--lh-heading) var(--font-heading);
}
.about p {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  font: 400 var(--fs-text)/var(--lh-text) var(--font-text);
}

/* ---------- Footer ---------- */
/* Pinned behind the page and uncovered as you reach the bottom. */
.footer {
  position: sticky;
  bottom: 0;
  z-index: 0;
  padding: 30px 0;
  background: var(--dark);
  color: #fff;
  text-align: center;
}
.footer p {
  margin: 0 var(--gutter);
  font: 400 1rem/1.6 var(--font-small);
}

/* Fade-in on scroll (only when the script is running and motion is OK). */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}
.reveal-ready [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-down svg { animation: none; }
}