/* Base styles */
html,
body {
  height: 100%;
  overflow-x: hidden; /* prevent horizontal overflow during pinch/zoom */
  overscroll-behavior-y: contain; /* avoid overscroll exposing extra space */
}

html {
  display: flex;
  flex-direction: column;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
  color: var(--text-color);
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
  min-height: 100vh;
  height: 100%;
  scroll-behavior: smooth;
  animation: fadeInBody 1.2s;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  overflow-x: hidden;
} /* make the page a column flex container so footer can stick to bottom */

/* Ensure media elements don't overflow and remove baseline whitespace */
img,
picture,
svg,
video {
  max-width: 100%;
  height: auto;
  display: block;
}

body.dark-theme {
  background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
}

body.beige-theme {
  background: linear-gradient(135deg, #e8d9c3 0%, #f5f1e8 100%);
}

/* Links */
a {
  color: var(--primary);
  text-decoration: none;
  transition: var(--transition);
}

a:hover {
  color: var(--primary-dark);
}

/* ensure main area expands to push footer down */
main {
  flex: 1 0 auto;
}

/* Buttons used globally */
.btn {
  display: inline-block;
  background: linear-gradient(90deg, var(--primary) 60%, var(--accent) 100%);
  color: var(--light);
  font-weight: 700;
  padding: 0.8rem 2.2rem;
  border-radius: 30px;
  border: none;
  font-size: 1.1rem;
  letter-spacing: 1.2px;
  box-shadow: 0 4px 16px rgba(255, 59, 63, 0.12);
  cursor: pointer;
  transition:
    background 0.3s,
    transform 0.2s;
  text-transform: uppercase;
  margin: 0.5rem;
}

.btn:hover {
  background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
  color: var(--light);
  transform: translateY(-2px) scale(1.04);
}