/* ==========================================================
   Chair It Up — styles
   Goal: large text, strong contrast, simple layout for seniors.
   Colors match the printed flyer (teal and cream).
   ========================================================== */

/* ---- Colors (change these to re-color the whole site) ---- */
:root {
  --ink: #1a1a1a;          /* main text: nearly black */
  --teal: #1d6870;         /* flyer teal (headings, logo) */
  --teal-dark: #134a50;
  --cream: #f4f0e8;        /* flyer cream background */
  --banner: #e9e2d4;       /* slightly darker cream behind the logo */
}

/* ---- Basics ---- */
* { box-sizing: border-box; }

html { font-size: 137.5%; }  /* base text = 22px (most sites use 16px) */

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

/* ---- 1. Business name ---- */
.site-header {
  background: var(--banner);
  padding: 1.5rem 0;
}
.logo {
  margin: 0;
  font-size: 3rem;
  font-weight: 700;
  color: var(--teal);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- 2. Quote ---- */
.hero { padding: 3rem 0; }
h1 {
  margin: 0 0 0.75rem;
  font-size: 2.8rem;
  line-height: 1.2;
  color: var(--ink);
}
.tagline {
  margin: 0;
  font-size: 1.4rem;
  color: var(--teal);
  font-weight: 700;
}
.tagline-more {
  margin: 0.5rem auto 0;
  font-size: 1.2rem;
  max-width: 30em;
}
.divider {
  width: 120px;
  border: 0;
  border-top: 3px solid var(--teal);
  margin: 2rem auto;
}

/* ---- 3. What the program is ---- */
.about {
  font-size: 1.2rem;
  max-width: 34em;
  margin: 0 auto;
}

/* ---- 4. Join button ---- */
.button {
  display: inline-block;
  margin-top: 2rem;
  background: var(--teal);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  text-decoration: none;
  padding: 0.9rem 2rem;
  border-radius: 12px;
}
.button:hover { background: var(--teal-dark); }
.price-note {
  margin: 1rem auto 0;
  font-size: 1.1rem;
}
.price-note + .start-note { margin-top: 0.25rem; }
.start-note {
  margin: 1rem auto 0;
  font-size: 1.1rem;
  font-weight: 700;
}
a:focus-visible {
  outline: 4px solid #ffbf00;   /* bright outline when using the keyboard */
  outline-offset: 4px;
}

/* ---- 5. How the program works ---- */
.how {
  background: var(--banner);
  padding: 3rem 0;
}
.how h2 {
  margin: 0 0 1.5rem;
  font-size: 1.8rem;
  color: var(--teal);
}
/* Steps read left-to-right, so they line up on the left */
.steps {
  list-style: none;
  max-width: 36em;
  margin: 0 auto 1.5rem;
  padding: 0;
  text-align: left;
}
.steps > li {
  background: #fff;
  border-left: 6px solid var(--teal);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
}
.steps h3 {
  margin: 0 0 0.5rem;
  font-size: 1.35rem;
  color: var(--teal-dark);
}
.steps p { margin: 0 0 0.75rem; }
.steps p:last-child { margin-bottom: 0; }
.steps ul { margin: 0 0 0.75rem; padding-left: 1.25em; }
.steps ul li { margin-bottom: 0.75rem; }
.steps a {
  display: inline-block;
  color: var(--teal-dark);
  font-weight: 700;
  text-underline-offset: 4px;
}
.note {
  max-width: 36em;
  margin: 0 auto;
  font-weight: 700;
}

/* ---- 6. About the instructor ---- */
.about-me {
  background: #fff;
  padding: 3rem 0;
}
.about-me .container {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  text-align: left;
}
.photo {
  flex: 0 0 240px;
  width: 240px;
  height: auto;
  border-radius: 14px;
  border: 4px solid var(--teal);
}
.about-me h2 {
  margin: 0 0 1rem;
  font-size: 1.8rem;
  color: var(--teal);
}
.about-me p { margin: 0 0 1rem; }

/* ---- 7. Common questions ---- */
.faq {
  background: var(--cream);
  padding: 3rem 0;
}
.faq h2 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  color: var(--teal);
}
.faq-hint { margin: 0 0 1.5rem; }
.faq details {
  max-width: 36em;
  margin: 0 auto 1rem;
  text-align: left;
  background: #fff;
  border: 2px solid var(--teal);
  border-radius: 10px;
}
/* The question: a big, easy-to-tap bar with a + that turns into a − */
.faq summary {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding: 1rem 3rem 1rem 1.25rem;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--teal-dark);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.6rem;
  line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }  /* minus sign */
.faq summary:focus-visible {
  outline: 4px solid #ffbf00;
  outline-offset: 2px;
}
.faq details p {
  margin: 0;
  padding: 0 1.25rem 1.25rem;
}

.faq details a {
  color: var(--teal-dark);
  font-weight: 700;
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* ---- 8. Second Join button ---- */
.join-again {
  background: #fff;
  padding: 1rem 0 3rem;
}

/* ---- 9. Contact ---- */
.contact {
  background: var(--banner);
  padding: 2.5rem 0;
}
.contact h2 {
  margin: 0 0 0.5rem;
  font-size: 1.8rem;
  color: var(--teal);
}
.contact p { margin: 0 0 0.5rem; }
.email { font-size: 1.5rem; font-weight: 700; }
.email a {
  color: var(--teal-dark);
  text-underline-offset: 4px;
  overflow-wrap: anywhere;
}

/* ---- Footer ---- */
.site-footer {
  background: var(--teal-dark);
  color: #fff;
  padding: 1.25rem 0;
  font-size: 0.85rem;
}
.site-footer p { margin: 0; }

/* ---- Small screens (phones) ---- */
@media (max-width: 600px) {
  html { font-size: 118.75%; }   /* 19px — still large, but fits a phone */
  .logo { font-size: 2.2rem; }
  h1 { font-size: 1.7rem; }
  .hero { padding: 2rem 0; }
  /* Stack the photo above the words on phones */
  .about-me { padding: 2rem 0; }
  .about-me .container { flex-direction: column; align-items: center; }
  .photo { flex: none; width: 200px; }
  .about-me h2 { text-align: center; }
}