/* ============================================
   RESET & BASE STYLES
   ============================================ */

/* Box-sizing reset: makes padding and borders included in element width/height */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margins and padding, set full height for viewport */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* Base body styles: font, dark background, light text */
body {
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #000000;
  color: #f5f5f5;
}

/* ============================================
   VIEWPORT & SCROLLING
   ============================================ */

/* Main container for all panels - enables smooth scroll snapping */
.viewport {
  height: 100vh; /* Full viewport height */
  overflow-y: auto; /* Allow vertical scrolling */
  scroll-snap-type: y mandatory; /* Snap to each panel when scrolling */
  scroll-behavior: smooth; /* Smooth scrolling animation */
}

/* Base panel class - each section is a full-screen panel */
.panel {
  height: 100vh; /* Each panel takes full viewport height */
  scroll-snap-align: start; /* Snap point for scroll snapping */
  position: relative; /* Allows absolute positioning of child elements */
}

/* ============================================
   HERO SECTION (First Panel)
   ============================================ */

/* Hero panel: dark background, relative positioning for absolute children */
.panel--hero {
  background: #000000;
  position: relative; /* Allows absolute positioning of images */
  overflow: hidden; /* Prevent overflow */
  padding: 10vh 3vw 6vh; /* Top/bottom padding to avoid nav overlap and cutoff, side padding */
}

/* Base styles for all hero images - responsive size that scales with viewport */
.hero__image {
  position: absolute;
  width: 200px;
  height: 200px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid rgba(245, 245, 245, 0.12);
  filter: grayscale(1);
}

/* Logo - centered (smaller) */
.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 350px;
  width: auto;
  height: auto;
  z-index: 1;
}

/* Top row: flex container, centered, 10px gap between images */
.hero__row {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}

.hero__row--top {
  top: 8%;
}

.hero__row--bottom {
  bottom: 8%;
}

/* Images inside a row flow in the flex layout (no absolute positioning) */
.hero__row .hero__image,
.hero__row #hero__image--1,
.hero__row #hero__image--2,
.hero__row #hero__image--3,
.hero__row #hero__image--4,
.hero__row #hero__image--5,
.hero__row #hero__image--6 {
  position: static;
  top: auto;
  left: auto;
  right: auto;
  transform: none;
}

/* ============================================
   NAVIGATION BAR (Fixed Top)
   ============================================ */

/* Fixed navigation bar at the top of the page */
.topbar {
  position: fixed; /* Stays at top when scrolling */
  top: 0;
  left: 0;
  right: 0;
  height: 7vh; /* Responsive height using viewport height */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 40; /* Above other content */
  background: rgba(0, 0, 0, 0.86); /* Semi-transparent dark background */
  backdrop-filter: blur(10px); /* Blur effect behind navbar */
  -webkit-backdrop-filter: blur(10px); /* Safari support */
}

/* Navigation links container */
.nav {
  display: flex;
  gap: 2vw; /* Space between nav links using viewport width */
  font-size: 0.7rem; /* Relative font size */
  text-transform: uppercase; /* All caps text */
  letter-spacing: 0.18em; /* Wider letter spacing */
}

/* Individual navigation links */
.nav a {
  color: rgba(245, 245, 245, 0.7); /* Semi-transparent white */
  padding: 0.4rem 0.3rem; /* Relative padding using rem */
  min-height: 5vh; /* Minimum touch target size using viewport height */
  min-width: 5vh;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s ease;
}

/* Current page in nav – slightly lit up */
.nav a[aria-current="page"] {
  color: #ffffff;
  font-weight: 500;
}

/* Hover state for navigation links */
.nav a:hover {
  color: #ffffff; /* Full white on hover */
}

/* ============================================
   INFO SECTION (Second Panel)
   ============================================ */

/* Info panel: slightly lighter background, centered content */
.panel--info {
  background: #000000; /* Slightly lighter than hero for contrast */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3vw; /* Horizontal padding using viewport width */
  flex-direction: column; /* Stack content vertically */
}

/* Info content container */
.info {
  max-width: 60%; /* Limit width for readability using percentage */
}

/* Override max-width when inside info panel for full width on mobile */
.panel--info .info {
  max-width: 100%;
}

/* Small label text above main content (e.g., "Countdown") */
.info__kicker {
  margin: 0 0 1.5vh; /* Relative margin using viewport height */
  font-size: 0.75rem; /* Relative font size */
  letter-spacing: 0.18em; /* Wide letter spacing */
  text-transform: uppercase; /* All caps */
  color: rgba(245, 245, 245, 0.7); /* Semi-transparent white */
  text-align: center;
}

/* Regular paragraph text in info section */
.info__text {
  margin: 0 0 1.2vh; /* Relative margin using viewport height */
  color: rgba(245, 245, 245, 0.8);
  line-height: 1.7; /* Comfortable line spacing for readability */
}

/* ============================================
   COUNTDOWN TIMER
   ============================================ */

/* Container for countdown items (years, days, hours, minutes, seconds) */
.countdown {
  display: flex;
  justify-content: center; /* Center countdown items */
  gap: 2vw; /* Space between each time unit using viewport width */
  margin-top: 2.5vh; /* Relative margin using viewport height */
  flex-wrap: wrap; /* Wrap to new line on small screens */
}

/* Individual countdown item (e.g., "5 dagen") */
.countdown__item {
  display: flex;
  flex-direction: column; /* Stack number and label vertically */
  align-items: center; /* Center horizontally */
}

/* Large number in countdown (e.g., "5") */
.countdown__number {
  font-family: "Playfair Display", "Times New Roman", serif; /* Elegant serif font */
  font-size: clamp(2rem, 5vw, 3rem); /* Responsive font size using rem and viewport width */
  font-weight: 600; /* Semi-bold */
  color: #f5f5f5;
}

/* Label below countdown number (e.g., "dagen") */
.countdown__label {
  font-size: 0.875rem; /* Relative font size */
  text-transform: uppercase; /* All caps */
  letter-spacing: 0.1em; /* Wide letter spacing */
  color: rgba(245, 245, 245, 0.7); /* Semi-transparent */
  margin-top: 0.5vh; /* Small gap from number using viewport height */
}

/* ============================================
   AGENDA (Add to calendar)
   ============================================ */

/* Label text above the calendar buttons */
.agenda-label {
  display: block;
  text-align: center;
  margin-top: 4vh; /* Extra space below countdown */
  margin-bottom: 1.5vh;
  color: rgba(245, 245, 245, 0.9);
}

/* Container for Apple and Google buttons */
.agenda-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5vh;
}

/* Shared button style for Apple and Google */
.agenda-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #f5f5f5;
  text-decoration: none;
  border: 1px solid rgba(245, 245, 245, 0.3);
  padding: 0.65rem 1.25rem;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  font-weight: 500;
  font-size: 0.95rem;
}

.agenda-btn:hover {
  background: rgba(245, 245, 245, 0.1);
  border-color: rgba(245, 245, 245, 0.6);
  color: #fff;
}

.agenda-btn__icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
}

.agenda-btn--apple .agenda-btn__icon {
  width: 1.35rem;
  height: 1.35rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

/* Tablet: 768px–1024px */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .hero__image {
    width: 140px;
    height: 140px;
  }
  .hero__logo {
    max-width: 280px;
  }
  .hero__row--top {
    top: 10%;
  }
  .hero__row--bottom {
    bottom: 10%;
  }
}

/* Portrait mobile: narrow screen (vertical phone) */
@media only screen and (max-width: 480px) {
  .hero__image {
    width: 125px;
    height: 125px;
  }
  .hero__row {
    gap: 6px;
  }
  .hero__row--top {
    top: 12%;
  }
  .hero__row--bottom {
    bottom: 12%;
  }
}

/* Landscape mobile: short viewport (horizontal phone) */
@media only screen and (orientation: landscape) and (max-height: 500px) {
  .hero__image {
    width: 70px;
    height: 70px;
  }
  .hero__logo {
    max-width: 160px;
  }
  .hero__row {
    gap: 6px;
  }
  .hero__row--top {
    top: 4%;
  }
  .hero__row--bottom {
    bottom: 4%;
  }
}

/* Fallback: small width (covers narrow portrait without orientation) */
@media only screen and (max-width: 1000px) and (min-width: 481px) {
  .hero__image {
    width: 125px;
    height: 125px;
  }
}