:root {
  /* Color palette named by color */
  --black:        #000000;
  --white:        #FFFFFF;
  --grey:         #D6D6D6;
  --logo-blue:    #002AFF;
  --indigo:       #5259A6;
  --light-peach:  #FABAAA;
  --peach:        #E1907D;

  --radius:       8px;
}

/* Reset & Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Mulish', sans-serif;
  background: var(--white);
  color: var(--black);
  line-height: 1.5;
}

/* === HEADER === */
header {
  background: var(--white);
  padding: 1rem 2rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.header-container {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.header-logo {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.header-logo img {
  height: 130px;
}
.header-logo span {
  font-family: 'Josefin Sans', serif;
  font-size: 2.5rem;
  font-weight: bold;
  color: var(--black);
}
header nav {
  display: flex;
  gap: 1.5rem;
}
header nav a {
  font-family: 'Josefin Sans', serif;
  text-decoration: none;
  font-size: 1.25rem;
  color: var(--black);
  position: relative;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0; height: 2px;
  background: var(--grey);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
header nav a:hover::after {
  transform: scaleX(1);
}

/* Stack logo/nav on mobile */
@media (max-width: 600px) {
  .header-container {
    flex-direction: column;
    align-items: center;
  }
  header nav {
    margin-top: 1rem;
    justify-content: center;
    width: 100%;
  }
  header nav a {
    margin: 0 .75rem;
  }
}

/* === HERO SECTION VARIANTS === */
/* DDD Dietetics Hero (grey bg) */
.hero.ddd {
  background: var(--light-peach);
  padding: 2rem 2rem;
}

/* KSR Performance Hero (also light grey) */
.hero.ksr {
  background: var(--grey);
  padding: 2rem 2rem;
}

/* Shared hero substructure */
.hero-container {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.hero-text {
  flex: 1 1 400px;
}
.hero-text h1 {
  font-family: 'Josefin Sans', serif;
  font-size: 2.5rem;
  margin-bottom: 1rem;
}
.hero-text p.lead {
  font-size: 1.1rem;
  margin-bottom: 1.5rem;
}
.hero-text ul {
  list-style: none;
  margin-bottom: 2rem;
}
.hero-text ul li {
  display: flex;
  align-items: center;
  margin-bottom: .75rem;
}
.hero-text ul li::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  margin-right: 0.75rem;
}

/* DDD-specific bullet & text color (black) */
.hero.ddd .hero-text h1,
.hero.ddd .hero-text p.lead,
.hero.ddd .hero-text ul li {
  color: var(--indigo);
}
.hero.ddd .hero-text ul li::before {
  background: var(--indigo);
}

/* KSR-specific bullet & text color (black) */
.hero.ksr .hero-text h1,
.hero.ksr .hero-text p.lead,
.hero.ksr .hero-text ul li {
  color: var(--black);
}
.hero.ksr .hero-text ul li::before {
  background: var(--black);
}

.hero-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.hero-buttons a {
  font-family: 'Quando', serif;
  text-decoration: none;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  transition: background .2s ease, color .2s ease;
  text-align: center;
}
.hero-img {
  flex: 1 1 400px;
  text-align: center;
}
.hero-img img {
  max-width: 100%;
  border-radius: var(--radius);
}

/* Button overrides per variant */
/* DDD Buttons (peach/indigo) */
.hero.ddd .btn-primary {
  background: var(--peach);
  color: var(--indigo);
  border: 2px solid var(--peach);
}
.hero.ddd .btn-primary:hover {
  background: var(--indigo);
  color: var(--white);
}
.hero.ddd .btn-secondary {
  background: transparent;
  color: var(--indigo);
  border: 2px solid var(--indigo);
}
.hero.ddd .btn-secondary:hover {
  background: var(--peach);
  color: var(--indigo);
}

/* KSR Buttons (black/white) */
.hero.ksr .btn-primary {
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--black);
}
.hero.ksr .btn-primary:hover {
  background: var(--white);
  color: var(--black);
}
.hero.ksr .btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
}
.hero.ksr .btn-secondary:hover {
  background: var(--black);
  color: var(--white);
}
/* === KSR GLOBAL BUTTONS (for any .btn-primary on a KSR page) === */
body.ksr .btn-primary {
  background: var(--black);
  color: var(--white);
  border: 2px solid var(--black);
}
body.ksr .btn-primary:hover {
  background: var(--white);
  color: var(--black);
}

/* Optional: if you also use .btn-secondary on KSR pages */
body.ksr .btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
}
body.ksr .btn-secondary:hover {
  background: var(--black);
  color: var(--white);
}
/* === DDD GLOBAL PRIMARY BUTTON === */
body.ddd .btn-primary {
  background: var(--peach);
  color: var(--indigo);
  border: 2px solid var(--peach);
}
body.ddd .btn-primary:hover {
  background: var(--indigo);
  color: var(--white);
}
/* === ABOUT SECTION === */
.about {
  background: var(--white);
  padding: 4rem 2rem;
}
.about-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.about-img {
  flex: 1 1 300px;
  text-align: center;
}
.about-img img {
  width: 100%;
  max-width: 350px;
  border-radius: var(--radius);
}
.about-text {
  flex: 2 1 400px;
}
.about-text h2 {
  font-family: 'Josefin Sans', serif;
  font-size: 2rem;
  color: var(--indigo);
  margin-bottom: 1rem;
}
.about-text p {
  margin-bottom: 1rem;
}

/* === PLAN CARDS === */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
  gap: 2rem;
  margin-top: 2rem;
}
.card {
  border: 2px solid var(--black);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: var(--grey);
}
.card h3 {
  font-family: 'Josefin Sans', serif;
  color: var(--black);
  margin-bottom: .5rem;
}
.card p {
  flex: 1;
  margin-bottom: 1rem;
}
.card .price {
  font-weight: bold;
  margin-bottom: 1rem;
}
/* DDD pages: cards get light-peach background */
body.ddd .card {
  background: var(--light-peach);
}

/* === BUTTON STYLES (fallback) === */
.btn-primary,
.btn-secondary {
  display: inline-block;
  font-family: 'Quando', serif;
  text-decoration: none;
  padding: .75rem 1.5rem;
  border-radius: var(--radius);
  transition: background .2s ease, color .2s ease;
  text-align: center;
}

/* === FOOTER BASE STYLE (unchanged) === */
footer {
  /* all your existing footer rules remain here… */
  text-align: center;
  padding: 2rem;
  margin-top: 4rem;
  color: inherit;        /* let variants set this */
  background: inherit;   /* let variants set this */
}
footer a {
  text-decoration: none;
  color: inherit;        /* links inherit from variant color */
}

/* === DDD FOOTER VARIANT === */
footer.footer--ddd {
  background: var(--indigo);
  color: var(--white);
}
footer.footer--ddd a {
  color: var(--light-peach);
}

/* === KSR FOOTER VARIANT === */
footer.footer--ksr {
  background: var(--black);
  color: var(--white);
}
footer.footer--ksr a {
  color: var(--grey);
}

/* === RESPONSIVE TWEAKS === */
@media (max-width: 600px) {
  .hero-container,
  .about-container {
    flex-direction: column;
    text-align: center;
  }
  .hero-text ul li,
  .hero-buttons {
    justify-content: center;
  }
}
@media (max-width: 600px) {
  /* Allow the nav to wrap under the logo and center everything */
  .header-container {
    flex-direction: column;
    align-items: center;
  }
  header nav {
    display: flex;
    flex-wrap: wrap;           /* ← this lets links drop to a new row */
    justify-content: center;   /* ← center all of them */
    width: 100%;               /* ← take full width */
    margin-top: 1rem;
  }
  header nav a {
    flex: 1 1 45%;             /* ← each link gets up to 45% of the row */
    text-align: center;
    margin: 0.5rem 0;          /* ← vertical breathing room */
  }
}