/*
  Global Stylesheet for the Its My Anxiety website

  This file defines the colour palette, typography, and reusable
  components that are shared across all pages. It is designed
  around soft, calming colours and gentle motion to create an
  anxiety‑safe experience. Motion respects the user’s reduced
  motion preference, interactive elements have clear focus states
  for keyboard users, and the typography is clean and legible.
*/

:root {
  /* Palette */
  --color-background: #FFF8F2;
  --color-primary:    #7A4E7B;
  --color-secondary:  #C38CA5;
  --color-accent:     #F3C2D3;
  --color-highlight: #F5E5EF;
  --color-text:       #3F2F3F;
  --radius:           12px;
  --shadow:           0 4px 8px rgba(0,0,0,0.05);
}

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

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

/* Layout */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Header and Navigation */
header nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.2rem;
}

.logo img {
  height: 50px;
  border-radius: var(--radius);
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  font-weight: 500;
}

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

.mobile-menu-button {
  display: none;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--color-primary);
  cursor: pointer;
}

/* Mobile Navigation */
@media (max-width: 768px) {
  .nav-links {
    display: none;
    flex-direction: column;
    margin-top: 1rem;
  }
  .nav-links.open {
    display: flex;
  }
  .mobile-menu-button {
    display: block;
  }
  .logo img {
    height: 60px;
  }
}

/* Hero Section */
.hero {
  padding: 4rem 0;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

.hero-text h1 {
  font-size: 2.5rem;
  margin: 0 0 1rem 0;
}

.hero-text p {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
}

.trust-line {
  font-style: italic;
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.cta-buttons {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.cta-buttons > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
}

/* Buttons */
.btn {
  border: none;
  border-radius: var(--radius);
  padding: 0.75rem 1.25rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: inline-block;
}

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

.btn-secondary {
  background: var(--color-secondary);
  color: #ffffff;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.btn:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

.cta-note {
  font-size: 0.8rem;
  color: var(--color-text);
  opacity: 0.8;
}

/* Breathe Animation */
.breathe-container {
  text-align: center;
  margin-top: 2rem;
}

.breathe-circle {
  width: 200px;
  height: 200px;
  background-color: var(--color-accent);
  border-radius: 50%;
  margin: 0 auto 1rem auto;
  opacity: 0.6;
  animation: breathe 8s infinite ease-in-out;
}

@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.5); }
}

@media (prefers-reduced-motion: reduce) {
  .breathe-circle {
    animation: none;
  }
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem 0;
  font-size: 0.9rem;
}

.footer-bottom {
  border-top: 1px solid var(--color-highlight);
  padding-top: 1rem;
}

footer p {
  margin: 0;
}

/* Sections */
.section {
  padding: 3rem 0;
}

.section h2 {
  margin-bottom: 1.5rem;
  font-size: 2rem;
}

/* Cards */
.card {
  background: #ffffff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}

.card img {
  width: 100%;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.card h3 {
  margin: 0 0 0.5rem 0;
}

.card p {
  margin: 0 0 1rem 0;
}

.card .btn {
  margin-top: auto;
}

/* Tables */
.comparison-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: #ffffff;
  margin-bottom: 2rem;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem;
  text-align: left;
}

.comparison-table thead {
  background: var(--color-highlight);
}

.comparison-table tr:not(:last-child) td {
  border-bottom: 1px solid #eee;
}

/* Affiliate disclosure */
.affiliate-disclosure {
  background: var(--color-highlight);
  padding: 1rem;
  border-left: 5px solid var(--color-primary);
  margin-bottom: 2rem;
  font-size: 0.85rem;
}

/* Page divider */
.page-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--color-accent), transparent);
  margin: 2rem 0;
}

/* Progress bar */
.progress-bar-container {
  width: 100%;
  background: #eee;
  height: 10px;
  border-radius: 5px;
  margin-top: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .progress-bar-fill {
    transition: none;
  }
}

/* Result styles */
.result-section h2 {
  margin-top: 1rem;
}

.result-validation {
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.result-disclaimer {
  font-size: 0.8rem;
  font-style: italic;
  margin-top: 1rem;
  color: var(--color-text);
}

/* Grid layouts */
.blog-grid,
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

/* Therapy reassurance and other notes */
.therapy-reassurance {
  background: var(--color-highlight);
  border-radius: var(--radius);
  padding: 1.5rem;
  margin-top: 2rem;
}

.therapy-reassurance h2 {
  margin-top: 0;
}

.small-note {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    padding: 2rem 0;
  }
  .section {
    padding: 2rem 0;
  }
}