/* ========================================
   HOME PAGE STYLES
   ======================================== */

body {
  overflow: hidden;
}

.container {
  height: calc(100dvh - 80px);
  max-height: calc(100vh - 80px); /* Fallback */
  max-height: calc(100dvh - 80px);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs, 4px);
  width: 100%;
  height: 100%;
  padding: var(--spacing-lg, 40px) var(--spacing-md, 20px);
  overflow-y: auto;
  overflow-x: hidden;

  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

main h1 {
  text-align: center;
  max-width: 90%;
  word-wrap: break-word;
  hyphens: auto;
}

main h2 {
  text-align: center;
  margin-top: var(--spacing-sm, 10px);
}

main .intro-text {
  text-align: center;
  max-width: 650px;
  margin-top: var(--spacing-md, 20px);
  font-size: var(--font-size-subtitle, 16px);
}

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

/* Tablet */
@media screen and (max-width: 900px) {
  .container {
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
  }

  main {
    padding: var(--spacing-md, 20px) var(--spacing-sm, 10px);
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  body {
    overflow: auto;
  }

  .container {
    max-height: none;
    min-height: calc(100vh - 40px);
    min-height: calc(100dvh - 40px);
  }

  main {
    padding: var(--spacing-md, 20px) var(--spacing-sm, 10px);
    justify-content: flex-start;
    padding-top: var(--spacing-md, 20px);
  }

  main h1 {
    font-size: clamp(20px, 6vw, 28px);
    max-width: 100%;
  }

  main h2 {
    font-size: clamp(16px, 4vw, 18px);
  }

  main .intro-text {
    font-size: var(--font-size-base, 14px);
    margin-top: var(--spacing-sm, 10px);
  }
}

/* Extra small devices */
@media screen and (max-width: 400px) {
  main {
    padding: var(--spacing-sm, 10px);
    gap: 2px;
  }
}

/* ========================================
   LANDSCAPE MODE
   ======================================== */

@media screen and (max-height: 500px) and (orientation: landscape) {
  main {
    justify-content: flex-start;
    padding: var(--spacing-sm, 10px);
  }

  main h1 {
    font-size: clamp(18px, 4vh, 24px);
  }

  main h2 {
    font-size: clamp(14px, 3vh, 16px);
    margin-top: var(--spacing-xs, 4px);
  }

  main .intro-text {
    font-size: var(--font-size-small, 12px);
    margin-top: var(--spacing-xs, 4px);
  }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
  body {
    overflow: visible;
  }

  .container {
    max-height: none;
  }

  main {
    padding: 20px;
  }
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  main {
    scroll-behavior: auto;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  main h1,
  main h2 {
    font-weight: 900;
  }
}