/* ============================================================
   YummyMath — Contact page (Step 6b)
   ------------------------------------------------------------
   Converted from "Contact us.html". Shared chrome (nav/footer,
   design tokens, buttons) lives in assets/theme.css — this file
   only holds the page-specific breadcrumb, hero, contact form,
   and closer styles.

   NOTE: the mockup ("Contact us.html") had no <form> — just a
   mailto link ("developer can wire one later if desired"). This
   step wires a real <form method="POST" action="/action/contact/">
   per the plan, styled to match the mockup's "contact" section
   visual rhythm (lead copy + reasons list) with form fields added.
   ============================================================ */

/* BREADCRUMB — shared .crumbs/.crumbs__inner now lives in theme.css */

/* ---------- HERO ---------- */
.m-hero { background: var(--color-cream); padding: 3.25rem 2.5rem; }
.m-hero__inner { max-width: 760px; margin: 0 auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-accent-deep);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--color-accent-deep);
}
.m-hero__headline {
  font-family: var(--font-serif);
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--color-green);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin-bottom: 1.1rem;
}
.m-hero__sub { font-size: 1.08rem; color: var(--color-text); line-height: 1.55; margin-bottom: 0; }

/* ============================================================
   CONTACT — two-column layout: form (main content) + reasons
   list (sidebar-style, mirrors the mockup's "What we can help
   with" block).
   ============================================================ */
.contact { background: #FFFFFF; border-top: 1px solid var(--color-divider); padding: 2.75rem 2.5rem 3rem; }
.contact__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 2.5rem;
  align-items: start;
}
.contact__lead { font-size: 1.02rem; color: var(--color-text); line-height: 1.55; margin-bottom: 0.5rem; }
.contact__note { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 1.75rem; }

/* ---------- FORM ---------- */
.contact-form { display: flex; flex-direction: column; gap: 1.1rem; }
.contact-form__row { display: flex; flex-direction: column; gap: 0.4rem; }
.contact-form__row label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); }
.contact-form__row input,
.contact-form__row select,
.contact-form__row textarea {
  font-family: inherit;
  font-size: 0.95rem;
  color: var(--color-text);
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--color-divider);
  border-radius: 6px;
  background: var(--color-cream);
  transition: border-color 0.15s, background 0.15s;
}
.contact-form__row input:focus,
.contact-form__row select:focus,
.contact-form__row textarea:focus {
  outline: none;
  border-color: var(--color-green);
  background: #FFFFFF;
}
.contact-form__row textarea { resize: vertical; min-height: 140px; }
.contact-form__required { color: var(--color-accent-deep); }
.contact-form__submit { align-self: flex-start; }
.contact-form__submit:disabled { opacity: 0.6; cursor: not-allowed; }

/* Inline status region — populated by JS on submit (success/error),
   kept in the DOM (not injected) so screen readers pick it up via
   aria-live without a layout shift on first render. */
.contact-form__status {
  font-size: 0.92rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: none;
}
.contact-form__status[data-state="success"] {
  display: block;
  background: rgba(5, 131, 110, 0.08);
  color: var(--color-green-dark);
  border: 1px solid rgba(5, 131, 110, 0.25);
}
.contact-form__status[data-state="error"] {
  display: block;
  background: rgba(178, 34, 34, 0.06);
  color: #8a2323;
  border: 1px solid rgba(178, 34, 34, 0.2);
}

/* ---------- REASONS SIDEBAR ---------- */
.contact__reasons {
  background: var(--color-cream);
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  padding: 1.5rem 1.5rem;
}
.contact__reasons-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin-bottom: 0.9rem; }
.contact__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.85rem; }
/* Bullet dot + plain (non-colored) bold text, matching Contact us.html's
   `.contact__list` exactly — a previous version colored <strong> green,
   which the mockup never does (strong is just font-weight:600, same
   color as the rest of the line), and was missing the bullet dot. */
.contact__list li { position: relative; padding-left: 1.4rem; font-size: 0.92rem; line-height: 1.5; color: var(--color-text); }
.contact__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-green); }
.contact__list strong { font-weight: 600; }

/* ---------- CLOSER ---------- */
.closer { background: var(--color-green); color: #FFFFFF; padding: 3rem 2.5rem; text-align: center; }
.closer__inner { max-width: 880px; margin: 0 auto; }
.closer__headline { font-family: var(--font-serif); font-size: 2rem; font-weight: 600; line-height: 1.15; margin-bottom: 0.9rem; }
.closer__sub { font-size: 1.02rem; line-height: 1.55; margin-bottom: 1.6rem; opacity: 0.95; max-width: 600px; margin-left: auto; margin-right: auto; }
.closer .ym-btn--light { background: #FFFFFF; color: var(--color-green); }
.closer .ym-btn--light:hover { background: var(--color-cream); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .contact__inner { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .m-hero { padding: 2.5rem 1.25rem; }
  .m-hero__headline { font-size: 1.9rem; }
  .contact, .closer { padding-left: 1.25rem; padding-right: 1.25rem; }
  .closer__headline { font-size: 1.7rem; }
}