/*
  Global styles for the Livvy App landing page

  The design uses a limited colour palette inspired by the Livvy brand
  (turquoise and dark teal) with plenty of white space.  Responsive
  rules ensure the layout adapts gracefully to smaller screens.  Feel
  free to customise the CSS variables to tune the look and feel.
*/

/* Define CSS variables for colour palette and reuse them throughout */
:root {
  --primary-color: #00b8d4; /* turquoise */
  --primary-hover: #009ab7; /* slightly darker turquoise for hover states */
  --secondary-color: #012d31; /* dark teal */
  --background-color: #ffffff; /* page background */
  --text-color: #333333; /* base text colour */
  --light-gray: #f5f7f8; /* light gray backgrounds */
}

/* Reset some basic elements and define global typography */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: var(--background-color);
  color: var(--text-color);
  line-height: 1.6;
}

h1, h2, h3 {
  font-weight: 700;
  margin: 0;
}

p {
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* A simple wrapper for centring content and constraining width */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header styles */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.95);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
}

.site-header .logo img {
  height: 40px;
}

.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.nav a {
  font-weight: 500;
  color: var(--secondary-color);
  transition: color 0.2s ease-in-out;
}

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

/* Button styles.  Buttons are links styled as buttons. */
.btn {
  padding: 0.6rem 1.2rem;
  border-radius: 4px;
  font-weight: 600;
  display: inline-block;
  cursor: pointer;
}

.btn.primary {
  background-color: var(--primary-color);
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}

.btn.primary:hover {
  background-color: var(--primary-hover);
}

.btn.book-demo {
  background-color: var(--secondary-color);
  color: #ffffff;
  border-radius: 4px;
  transition: background-color 0.2s ease-in-out;
}

.btn.book-demo:hover {
  background-color: var(--primary-color);
}

/* Hero section styling */
.hero {
  position: relative;
  height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
  overflow: hidden;
  margin-top: 64px; /* offset for fixed header height */
}

.hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(1, 45, 49, 0.7);
  z-index: -1;
}

.hero-content {
  z-index: 1;
  max-width: 600px;
  padding: 0 1rem;
  animation: heroContentAnimation 4.5s ease-in-out forwards;
}

.hero-content p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #f0f0f0;
  animation: fadeOutSubtext 4.5s ease-in-out forwards;
}

@keyframes heroContentAnimation {
  0%, 67% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-200px);
  }
}

@keyframes fadeOutSubtext {
  0%, 67% {
    opacity: 1;
    max-height: 100px;
    margin-bottom: 2rem;
  }
  100% {
    opacity: 0;
    max-height: 0;
    margin-bottom: 0;
  }
}

.hero-content h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.hero-content p {
  font-size: 1.125rem;
  margin-bottom: 2rem;
  color: #f0f0f0;
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  text-align: center;
  z-index: 2;
  animation: bounce 2s infinite;
}

.scroll-indicator i {
  font-size: 1.5rem;
  opacity: 0.8;
}

.scroll-indicator p {
  font-size: 0.875rem;
  margin-top: 0.5rem;
  opacity: 0.7;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* Features section styling */
.features {
  padding: 4rem 0;
  background-color: var(--light-gray);
}

.feature {
  display: flex;
  align-items: center;
  margin-bottom: 4rem;
  gap: 3rem;
  min-height: 400px;
}

.feature:last-child {
  margin-bottom: 0;
}

.feature.reverse .feature-text {
  order: 2;
}

.feature.reverse .feature-image {
  order: 1;
}

.feature-text {
  flex: 0 0 30%;
  min-width: 250px;
}

.feature-text h2 {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.feature-text p {
  font-size: 1rem;
  color: var(--text-color);
  line-height: 1.7;
}

.feature-image {
  flex: 0 0 70%;
  min-width: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.feature-image img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Values section styling */
.values {
  padding: 4rem 0;
}

.values h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: var(--secondary-color);
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2rem;
}

.value {
  text-align: center;
  background-color: var(--light-gray);
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.value i {
  font-size: 2rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
}

.value h3 {
  font-size: 1.25rem;
  margin: 0.5rem 0;
  color: var(--secondary-color);
}

.value p {
  font-size: 0.95rem;
  color: var(--text-color);
}

/* CTA section styling */
.cta {
  background-color: var(--primary-color);
  color: #ffffff;
  text-align: center;
  padding: 4rem 2rem;
}

.cta h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

.cta p {
  font-size: 1.1rem;
  margin-bottom: 2rem;
}

.cta .btn {
  background-color: #ffffff;
  color: var(--primary-color);
  transition: background-color 0.2s ease-in-out;
}

.cta .btn:hover {
  background-color: rgba(255, 255, 255, 0.9);
}

/* Footer styling */
.site-footer {
  background-color: var(--secondary-color);
  color: #ffffff;
  padding: 2rem 0;
}

.site-footer .footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  gap: 1rem;
}

.site-footer .footer-top .login-link {
  color: #ffffff;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.site-footer .footer-top .login-link:hover {
  color: var(--primary-color);
}

.site-footer .footer-top .btn {
  background-color: var(--primary-color);
  color: #ffffff;
  transition: background-color 0.2s ease-in-out;
}

.site-footer .footer-top .btn:hover {
  background-color: var(--primary-hover);
}

.site-footer hr {
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin: 1rem 0;
}

.site-footer .footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.9rem;
}

.site-footer .footer-nav {
  display: flex;
  gap: 1rem;
}

.site-footer .footer-nav a {
  color: #ffffff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.site-footer .footer-nav a:hover {
  text-decoration: underline;
  color: var(--primary-color);
}

/* Policy page styles */
.policy-content {
  padding: 6rem 0 4rem 0;
  background-color: var(--background-color);
}

.back-to-home {
  margin-bottom: 2rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  color: var(--primary-color);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease-in-out;
}

.back-link:hover {
  color: var(--primary-hover);
  text-decoration: underline;
}

.policy-content h1 {
  font-size: 2.5rem;
  margin-bottom: 2rem;
  color: var(--secondary-color);
  text-align: center;
}

.policy-text {
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.7;
}

.policy-text h2 {
  font-size: 1.5rem;
  margin: 2rem 0 1rem 0;
  color: var(--secondary-color);
}

.policy-text h3 {
  font-size: 1.25rem;
  margin: 1.5rem 0 0.75rem 0;
  color: var(--secondary-color);
}

.policy-text p {
  margin-bottom: 1rem;
  color: var(--text-color);
}

.policy-text ul, .policy-text ol {
  margin: 1rem 0;
  padding-left: 2rem;
}

.policy-text li {
  margin-bottom: 0.5rem;
  color: var(--text-color);
}

/* Responsive rules */
@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 2rem;
  }
  .hero-content p {
    font-size: 1rem;
  }
  .feature {
    flex-direction: column;
    min-height: auto;
    gap: 2rem;
    flex-wrap: wrap;
  }
  .feature.reverse .feature-text,
  .feature.reverse .feature-image {
    order: unset;
  }
  .feature-image,
  .feature-text {
    width: 100%;
    flex: 1 1 100%;
    min-width: auto;
  }
  .feature-image img {
    max-height: 300px;
  }
  .nav {
    gap: 1rem;
  }
  .nav a {
    font-size: 0.9rem;
  }
}