/* CSS Reset & Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background: #fff;
  /* Sticky footer layout */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; font-weight: 500; margin: 0 0 .5rem; color: var(--text-dark); }
p { margin: 0 0 1rem; color: var(--text-light); }
ul { margin: 0 0 1rem 1.25rem; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Theme Variables */
:root {
  --primary-soft: #f8d7e3;
  --primary-light: #fef7f0;
  --primary-mint: #d4f0f0;
  --accent-warm: #ffd8c8;
  --text-dark: #333333;
  --text-light: #666666;
  --white: #ffffff;
  --ok-green: #4caf50;
  --avoid-red: #e57373;
  --ovulation-dot: #ff9f80;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.06);
  --shadow-md: 0 8px 15px rgba(0,0,0,.1);
  --radius: 12px;
}

/* Layout */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

main { flex: 1 0 auto; }

.content-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 1024px) { .content-layout { grid-template-columns: 2fr 1fr; } }

.content-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 1024px) { .content-grid { grid-template-columns: 1.5fr 1fr; } }

/* Header / Navigation */
.header { position: sticky; top: 0; z-index: 50; background: var(--white); box-shadow: var(--shadow-sm); }
.nav { display: flex; align-items: center; justify-content: space-between; padding: .75rem 0; gap: .5rem; flex-wrap: wrap; }
.nav-brand { display: flex; align-items: center; gap: .5rem; font-weight: 600; }
.nav-brand i { color: var(--accent-warm); }
.nav-toggle { background: none; border: none; font-size: 1.25rem; cursor: pointer; }
.nav-menu { list-style: none; padding: 0; margin: 0; display: none; flex-direction: column; gap: .75rem; width: 100%; margin-top: .5rem; }
.nav-menu a { padding: .5rem .75rem; border-radius: 8px; color: var(--text-dark); }
.nav-menu a:hover, .nav-menu a.active { background: var(--primary-light); }
.nav-menu.nav-menu--visible { display: flex; }

@media (min-width: 768px) {
  .nav-toggle { display: none; }
  .nav-menu { display: flex; flex-direction: row; gap: 1rem; width: auto; margin-top: 0; }
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--primary-soft) 0%, var(--primary-light) 100%);
  padding: 3rem 0;
}
.hero .container { display: grid; gap: .75rem; text-align: left; }
.hero h1 { font-size: 2rem; }
.hero p { font-size: 1rem; }
.cta-buttons { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .5rem; }
@media (min-width: 1024px) { .hero { padding: 4rem 0; } .hero h1 { font-size: 2.5rem; } .hero p { font-size: 1.125rem; } }

/* Buttons */
.btn-primary, .btn-secondary {
  appearance: none; border: none; cursor: pointer; padding: .75rem 1rem; border-radius: 999px; font-weight: 600;
}
.btn-primary { background: var(--text-dark); color: var(--white); }
.btn-primary:hover { filter: brightness(1.05); }
.btn-secondary { background: var(--white); color: var(--text-dark); border: 2px solid var(--text-dark); }
.btn-secondary:hover { background: var(--primary-light); }

/* Cards */
.card-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin: 2rem 0; }
@media (min-width: 768px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }

.card { background: var(--white); border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.card i { font-size: 1.5rem; color: var(--accent-warm); }
.card h3 { margin-top: .5rem; margin-bottom: .25rem; }

/* Sections */
.section { padding: 2rem 0; }
.section-title { margin-bottom: .75rem; }

/* Sidebar / Tips */
.tip { background: var(--primary-light); border-left: 4px solid var(--accent-warm); padding: 1rem; border-radius: 8px; }

/* Cycle Visualization (simple) */
.cycle-visualization {
  width: 100%; border-radius: var(--radius);
  background: var(--white);
  position: relative; overflow: hidden; display:flex; flex-direction: column; align-items:center;
  box-shadow: var(--shadow-sm); padding: 1rem;
}
.cycle-visualization svg { width: 100%; height: auto; display: block; }
.cycle-legend { display:flex; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; font-size: .875rem; color: var(--text-light); }
.cycle-legend .cycle-swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; margin-right: .5rem; vertical-align: -2px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.cycle-swatch--fertile { background: linear-gradient(135deg, var(--primary-mint), var(--accent-warm)); }
.cycle-swatch--base { background: #e9edf1; }
.cycle-swatch--ovulation { background: var(--ovulation-dot); }

/* FAQ */
.faq { max-width: 900px; margin: 0 auto; }
.faq-item { background: var(--white); border-radius: 10px; box-shadow: var(--shadow-sm); margin-bottom: .75rem; overflow: hidden; }
.faq-question { width: 100%; text-align: left; background: none; border: none; padding: 1rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-weight: 600; }
.faq-answer { padding: 0 1rem 0; max-height: 0; overflow: hidden; transition: max-height .3s ease, padding .3s ease; color: var(--text-light); }
.faq-answer.active { padding: 0 1rem 1rem; max-height: 400px; }

/* Footer */
.footer { background: var(--primary-light); padding: 1.5rem 0; margin-top: 2rem; }
.footer p { margin-bottom: .5rem; }
.footer-links { display: flex; gap: 1rem; flex-wrap: wrap; }
.footer a { color: var(--text-dark); text-decoration: underline; }
.footer-nav { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:.5rem; font-size:.95rem; }

/* Food safety card */
.safety-legend { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin: .5rem 0 1rem; color: var(--text-light); }
.safety-legend .ok { color: var(--ok-green); }
.safety-legend .avoid { color: var(--avoid-red); }
.safety-grid { display:grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 768px) { .safety-grid { grid-template-columns: 1fr 1fr; } }
.safety-item { background: var(--white); border-radius: 10px; box-shadow: var(--shadow-sm); padding: .75rem .9rem; display:flex; gap:.6rem; align-items:flex-start; border-left: 4px solid transparent; }
.safety-item.ok { border-left-color: var(--ok-green); }
.safety-item.avoid { border-left-color: var(--avoid-red); }
.safety-item i { margin-top:.15rem; }
.safety-item.ok i { color: var(--ok-green); }
.safety-item.avoid i { color: var(--avoid-red); }
.safety-item h4 { margin: 0 0 .15rem; font-size: 1rem; }
.safety-item p { margin: 0; }

/* Utilities */
.spacer-sm { height: .5rem; }
.spacer { height: 1rem; }
.spacer-lg { height: 2rem; }