/* ==========================================================================
   Noah's Daycare — components: header, nav, footer, buttons, cards, forms.
   Depends on the tokens in base.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Top bar — hours + phone, always one tap away
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--terracotta);
  color: var(--white);
  font-size: var(--t-sm);
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-2) var(--sp-5);
  padding-block: var(--sp-2);
  text-align: center;
}

.topbar__item { margin: 0; max-width: none; }

.topbar__link {
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
}
.topbar__link:hover { color: var(--white); text-decoration: underline; }

@media (min-width: 768px) {
  .topbar__inner { justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   Header + brand
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-deep);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: var(--ink);
}

/* The star logo ships on a white background, so it sits in a white circle —
   the chip hides the square edge against cream either way. */
.brand__mark {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--white);
  object-fit: contain;
  padding: 2px;
}

.brand__text { display: flex; flex-direction: column; line-height: 1.2; }

.brand__name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
}

.brand__tag {
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Navigation — hamburger below 900px, horizontal above.
   Budget at five links: brand ~230 + links ~345 + CTA ~150 + gutters ~64
   = ~790px, so 900 leaves comfortable slack. (At seven links this had to sit
   at 1120 to avoid overflow.) Keep in sync with the matchMedia in nav.js.
   -------------------------------------------------------------------------- */

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--white);
  border: 1px solid var(--cream-deep);
  border-radius: var(--r-pill);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}

.nav-toggle__bars {
  position: relative;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: var(--ink);
  border-radius: var(--r-pill);
}
.nav-toggle__bars::before { top: -6px; }
.nav-toggle__bars::after  { top: 6px; }

.nav {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  padding: var(--sp-4) var(--gutter) var(--sp-5);
  background: var(--cream);
  border-bottom: 1px solid var(--cream-deep);
  box-shadow: var(--shadow-md);
}

.site-header.is-open .nav { display: block; }

.nav__list {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}

.nav__link {
  display: block;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  color: var(--ink);
  font-family: var(--font-head);
  font-weight: 600;
  text-decoration: none;
}

.nav__link:hover {
  background: var(--cream-alt);
  color: var(--ink);
}

.nav__link[aria-current='page'] {
  background: var(--peach);
  color: var(--ink);
}

.nav__cta { width: 100%; justify-content: center; }

@media (min-width: 900px) {
  .nav-toggle { display: none; }

  .nav {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    position: static;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
  }

  .nav__list {
    display: flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0;
  }

  .nav__link {
    padding: var(--sp-2) var(--sp-3);
    font-size: var(--t-sm);
  }

  .nav__link[aria-current='page'] {
    background: transparent;
    color: var(--terracotta);
    box-shadow: inset 0 -3px 0 var(--apricot);
    border-radius: 0;
  }

  .nav__cta { width: auto; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: var(--t-base);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, transform 0.18s ease,
              box-shadow 0.18s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--terracotta);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn--primary:hover {
  background: var(--terracotta-dark);
  color: var(--white);
  box-shadow: var(--shadow-md);
}

.btn--secondary {
  background: var(--white);
  border-color: var(--cream-deep);
  color: var(--ink);
}
.btn--secondary:hover {
  background: var(--cream-alt);
  color: var(--ink);
}

/* Tertiary. Keeps the full button padding so it shares the exact height and
   baseline of the pill buttons it sits beside — only the fill is dropped.
   (It previously zeroed padding-inline, which left it visibly misaligned.) */
.btn--ghost {
  background: transparent;
  color: var(--terracotta);
}

.btn--ghost:hover {
  background: rgba(182, 79, 54, 0.08);
  color: var(--terracotta-dark);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
}

/* Modifiers instead of one-off inline styles, so every row on the site sits
   at the same distance from the content above it. */
.btn-row--center { justify-content: center; }
.btn-row--spaced { margin-top: var(--sp-5); }

/* Below 420px two pills side by side get cramped and ragged — stack them
   full width so the edges line up. */
@media (max-width: 419px) {
  .btn-row { flex-direction: column; align-items: stretch; }
  .btn-row .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Cards, badges, callouts
   -------------------------------------------------------------------------- */

.card {
  padding: var(--sp-5);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.card h3 { margin-bottom: var(--sp-2); }
.card p { color: var(--ink-soft); }

.card--peach  { background: var(--peach); box-shadow: none; }
.card--sage   { background: var(--sage);  box-shadow: none; }
.card--sky    { background: var(--sky);   box-shadow: none; }
.card--butter { background: var(--butter); box-shadow: none; }
.card--lilac  { background: var(--lilac); box-shadow: none; }

.card--peach p, .card--sage p, .card--sky p,
.card--butter p, .card--lilac p { color: var(--ink); }

.badge {
  display: inline-block;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-size: var(--t-sm);
  font-weight: 700;
  margin: 0;
}

.badge--soft   { background: var(--butter); color: var(--ink); }
.badge--sage   { background: var(--sage);   color: var(--ink); }
.badge--onDark { background: rgba(255, 255, 255, 0.16); color: var(--white); }

.quote {
  margin: 0;
  padding: var(--sp-6);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

.quote p {
  font-family: var(--font-head);
  font-size: var(--t-h3);
  line-height: 1.45;
  color: var(--ink);
}

.quote figcaption {
  margin-top: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.quote--lead {
  background: var(--white);
  text-align: center;
  max-width: 780px;
  margin-inline: auto;
}

.quote--lead p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   Photos
   -------------------------------------------------------------------------- */

.media {
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--cream-deep);
}

.media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Fixed ratios keep the phone snapshots from dictating page rhythm — and
   crop the letterboxing off the vertical ones. */
.media--square   { aspect-ratio: 1 / 1; }
.media--portrait { aspect-ratio: 4 / 5; }
.media--wide     { aspect-ratio: 4 / 3; }

/* The subject in these two sits above centre; pull the crop up to match. */
.media img.focus-top { object-position: 50% 32%; }

.media__caption {
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Split — text beside a photo, stacking on phones
   -------------------------------------------------------------------------- */

.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 860px) {
  .split { grid-template-columns: 1fr 1fr; gap: var(--sp-7); }
  .split--wide-text { grid-template-columns: 1.15fr 0.85fr; }
  /* Photo first in the source for a11y, second on screen. */
  .split--flip .split__media { order: 2; }
}

/* --------------------------------------------------------------------------
   Feature list — checkmarks without list-style bullets
   -------------------------------------------------------------------------- */

.ticks {
  list-style: none;
  margin: 0 0 var(--sp-4);
  padding: 0;
}

.ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: var(--sp-3);
}

.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--sage) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5' fill='none' stroke='%233e6249' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 0.8rem no-repeat;
}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */

.price-card {
  display: flex;
  flex-direction: column;
  padding: var(--sp-6) var(--sp-5);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  text-align: center;
}

.price-card--feature {
  background: var(--peach);
  box-shadow: var(--shadow-md);
}

.price-card__days {
  font-family: var(--font-head);
  font-size: var(--t-lg);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.price-card__amount {
  font-family: var(--font-head);
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3rem);
  font-weight: 700;
  line-height: 1;
  color: var(--terracotta);
  margin-bottom: var(--sp-2);
}

.price-card--feature .price-card__amount { color: var(--terracotta-dark); }

.price-card__note {
  font-size: var(--t-sm);
  color: var(--ink-soft);
  margin: 0;
}

.price-card--feature .price-card__note { color: var(--ink); }

.price-tag {
  display: inline-block;
  margin-bottom: var(--sp-3);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-head);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--terracotta);
}

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

/* --------------------------------------------------------------------------
   FAQ — native disclosure, no JS
   -------------------------------------------------------------------------- */

.faq { display: grid; gap: var(--sp-3); }

.faq__item {
  background: var(--white);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--font-head);
  font-size: var(--t-lg);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '';
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-right: 2.5px solid var(--terracotta);
  border-bottom: 2.5px solid var(--terracotta);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.2s ease;
}

.faq__item[open] .faq__q::after {
  transform: rotate(225deg) translate(-3px, -3px);
}

.faq__q:hover { background: var(--cream-alt); }

.faq__a {
  padding: 0 var(--sp-5) var(--sp-5);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */

.cta-band {
  padding: var(--sp-7) var(--sp-5);
  background: linear-gradient(150deg, var(--peach), var(--butter));
  border-radius: var(--r-xl);
  text-align: center;
}

.cta-band p { margin-inline: auto; color: var(--ink); }
.cta-band .btn-row { justify-content: center; }

/* --------------------------------------------------------------------------
   Contact — form beside details, map
   -------------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--sp-7); }
}

.contact-grid .form { max-width: none; }

.detail-card {
  padding: var(--sp-5);
  background: var(--cream-alt);
  border-radius: var(--r-lg);
}

.detail-card + .detail-card { margin-top: var(--sp-4); }

.detail-card h3 { font-size: var(--t-lg); margin-bottom: var(--sp-2); }

.map {
  overflow: hidden;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  line-height: 0;
}

.map iframe {
  width: 100%;
  height: 340px;
  border: 0;
}

/* --------------------------------------------------------------------------
   Trust badges row
   -------------------------------------------------------------------------- */

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

/* --------------------------------------------------------------------------
   Sticky call bar — phones only, hidden from 900px up
   -------------------------------------------------------------------------- */

.callbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  /* Clear the home indicator on iPhones. */
  padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 249, 242, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--cream-deep);
  box-shadow: 0 -4px 18px rgba(96, 62, 45, 0.1);
}

.callbar__btn {
  flex: 1;
  padding-inline: var(--sp-3);
  font-size: var(--t-sm);
  white-space: nowrap;
}

.callbar__btn:hover { transform: none; }

/* Both labels are nowrap, so at ~320-360px the two buttons together are wider
   than the viewport. Tighten first; below 360px drop the number from the label
   (the button still dials, and the number is in the header strip and footer). */
@media (max-width: 400px) {
  .callbar { gap: var(--sp-2); }
  .callbar__btn { padding-inline: var(--sp-2); }
}

@media (max-width: 359px) {
  .callbar__num { display: none; }
}

.callbar__icon {
  flex: none;
  width: 1.05em;
  height: 1.05em;
}

/* Stop the bar covering the end of the footer. */
body { padding-bottom: 5.5rem; }

@media (min-width: 900px) {
  .callbar { display: none; }
  body { padding-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background: linear-gradient(160deg, var(--peach) 0%, var(--cream-alt) 62%,
                                      var(--cream) 100%);
  padding-block: var(--sp-7) var(--sp-8);
}

.hero__grid {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}

.hero p { color: var(--ink-soft); }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-7); }
}

/* Quick-facts strip that overlaps the hero edge. */
.factstrip {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-5);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.factstrip__item p { margin: 0; color: var(--ink-soft); }

.factstrip__label {
  display: block;
  font-family: var(--font-head);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
}

@media (min-width: 640px) {
  .factstrip { grid-template-columns: repeat(3, 1fr); }
}

/* --------------------------------------------------------------------------
   Tables (pricing)
   -------------------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  background: var(--white);
}

.table {
  width: 100%;
  border-collapse: collapse;
  min-width: 420px;
}

.table th,
.table td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--cream-deep);
}

.table th {
  font-family: var(--font-head);
  background: var(--cream-alt);
}

.table tr:last-child td { border-bottom: 0; }

/* --------------------------------------------------------------------------
   Forms (enrollment request)
   -------------------------------------------------------------------------- */

.form {
  display: grid;
  gap: var(--sp-5);
  max-width: 560px;
  padding: var(--sp-6);
  background: var(--white);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.field { display: grid; gap: var(--sp-2); }

/* The hidden attribute is a UA-stylesheet rule, so any class that sets
   display beats it. Without this, form.hidden = true does nothing and the
   form stays on screen. */
.form[hidden] { display: none; }

/* Sent state for the submit button. The button has to report the outcome
   itself — a confirmation message below it is easy to miss, and a button
   left reading "Sending…" reads as a hang. Forest is 4.9:1 on white, AA. */
.btn--sent,
.btn--sent:hover,
.btn--sent:disabled {
  background: var(--forest);
  border-color: var(--forest);
  color: var(--white);
  opacity: 1;
  cursor: default;
  transform: none;
}

.field__label {
  font-family: var(--font-head);
  font-weight: 600;
}

.field__hint {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.field__req { color: var(--terracotta); }

.field input,
.field textarea,
.field select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--cream);
  border: 2px solid var(--cream-deep);
  border-radius: var(--r-md);
  font: inherit;
  color: var(--ink);
}

.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none;
  border-color: var(--apricot);
  box-shadow: 0 0 0 3px rgba(247, 191, 164, 0.45);
}

/* Custom chevron — the native one won't match the rounded, warm styling. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6' fill='none' stroke='%23b64f36' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

/* Grey the placeholder option until a real choice is made. */
.field select:invalid { color: var(--ink-faint); }

.field textarea { min-height: 8rem; resize: vertical; }

.form__note {
  font-size: var(--t-sm);
  color: var(--ink-soft);
}

.form-success {
  padding: var(--sp-5);
  background: var(--sage);
  border-radius: var(--r-md);
  font-family: var(--font-head);
  font-weight: 600;
}

/* Failure state for the enrollment form. Peach rather than a hard red — the
   tone stays warm, and the phone/email routes carry the actual weight. */
.form-error {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  background: var(--peach);
  border-radius: var(--r-md);
}

.form-error p { margin: 0 0 var(--sp-3); }
.form-error p:last-child { margin-bottom: 0; }

.form-error__title {
  font-family: var(--font-head);
  font-weight: 600;
}

.form-error__routes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.form-error__routes a {
  display: inline-block;
  padding: var(--sp-3) var(--sp-4);
  background: var(--white);
  border-radius: var(--r-sm);
  font-weight: 600;
  text-decoration: none;
  /* 44px min tap target on phones. */
  min-height: 44px;
  line-height: 1.4;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  margin-top: var(--sp-8);
  padding-top: var(--sp-7);
  background: var(--cream-alt);
  border-top-left-radius: var(--r-xl);
  border-top-right-radius: var(--r-xl);
  color: var(--ink);
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  padding-bottom: var(--sp-6);
}

.site-footer__name {
  font-family: var(--font-head);
  font-size: var(--t-lg);
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.site-footer__heading {
  font-size: var(--t-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: var(--sp-3);
}

.site-footer__line,
.site-footer__address {
  margin-bottom: var(--sp-3);
  color: var(--ink-soft);
  font-size: var(--t-sm);
}

.site-footer__links {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--t-sm);
}

.site-footer__links li { margin-bottom: var(--sp-2); }

.site-footer a { color: var(--terracotta); }

.site-footer__bottom {
  padding-block: var(--sp-4);
  border-top: 1px solid var(--cream-deep);
}

.site-footer__bottom p {
  margin: 0;
  max-width: none;
  font-size: var(--t-xs);
  color: var(--ink-soft);
}

@media (min-width: 640px) {
  .site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 960px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}