/* Thrive Nursery — stylesheet for the 2026 refresh.
   Replaces the Bootstrap 2.3 / jQuery theme from the Squarehook mirror. */

:root {
  --green: #27523f;
  --green-dark: #1b3a2c;
  --green-light: #3d7358;
  --gray: #8a8d8f;
  --ink: #1f2422;
  --muted: #5c6663;
  --sand: #f6f5f1;
  --line: #e2e0d9;
  --white: #fff;
  --radius: 10px;
  --wrap: 1120px;
  --shadow: 0 1px 2px rgba(31, 36, 34, .06), 0 8px 24px rgba(31, 36, 34, .06);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--green); }
a:hover { color: var(--green-light); }

h1, h2, h3 {
  line-height: 1.2;
  margin: 0 0 .5em;
  color: var(--green-dark);
  font-weight: 700;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.2rem; }

p { margin: 0 0 1em; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 20px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--green);
  color: var(--white);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; color: var(--white); }

/* ---------- header / nav ---------- */

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

.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 76px;
}

.brand { flex: none; }
.brand img { width: 190px; }

.nav-toggle {
  margin-left: auto;
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 1rem;
  color: var(--green-dark);
  cursor: pointer;
}

.site-nav { margin-left: auto; }

/* Direct child only — a bare `.site-nav ul` also matches the dropdown lists
   and, being more specific than `.menu`, would override their display:none. */
.site-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--green-dark);
  white-space: nowrap;
}

.site-nav a:hover { background: var(--sand); }
.site-nav a[aria-current="page"] { color: var(--white); background: var(--green); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- nav dropdowns ---------- */

.has-menu { position: relative; display: flex; align-items: center; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--green-dark);
  cursor: pointer;
}

.menu-toggle:hover { background: var(--sand); }
.menu-toggle.is-current { background: var(--green); color: var(--white); }

/* The old caret was a 0.7em text glyph and effectively invisible. */
.caret {
  width: 13px;
  height: 13px;
  flex: none;
  transition: transform .15s ease;
}

.menu-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* Animated open/close. display:none can't transition, so the closed state is
   visibility + opacity + a small lift; absolute positioning keeps it out of
   the flow either way. */
.menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  min-width: 232px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.menu a { display: block; padding: 9px 12px; font-weight: 600; }

/* Click-driven only. A :hover rule here would leave a second menu open
   whenever the pointer rested on a sibling after a click. */
.menu-toggle[aria-expanded="true"] + .menu {
  opacity: 1;
  visibility: visible;
  transform: none;
}

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

  /* Once the nav wraps onto its own line the container is taller than
     min-height, which stopped centring the logo row and left it jammed
     against the top. Explicit padding keeps that row breathing whether the
     menu is open or closed. */
  .site-header .wrap {
    flex-wrap: wrap;
    min-height: 0;
    padding-block: 14px;
    row-gap: 0;
  }

  .brand,
  .nav-toggle { align-self: center; }

  /* Collapsible panel: max-height animates where display:none cannot. */
  .site-nav {
    flex-basis: 100%;
    margin-left: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .3s ease, visibility .3s, margin-top .3s ease;
  }

  .site-nav.is-open {
    max-height: 720px;
    visibility: visible;
    margin-top: 12px;
  }

  .site-nav > ul { flex-direction: column; align-items: stretch; gap: 2px; }
  .site-nav a { padding: 11px 12px; }

  /* Stacked nav: the dropdown becomes an inline block, not an overlay. */
  .has-menu { display: block; position: static; }
  .menu-toggle { width: 100%; justify-content: space-between; padding: 11px 12px; }

  .menu {
    position: static;
    min-width: 0;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 0 0 6px 12px;
    padding: 0;
    opacity: 1;
    transform: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease, visibility .25s;
  }

  .menu-toggle[aria-expanded="true"] + .menu {
    max-height: 400px;
    visibility: visible;
  }
}

/* ---------- hero ---------- */

/* Image and body are stacked in one grid cell, so the hero grows to fit
   whichever is taller — the copy never overflows the image on narrow screens. */
/* The copy sets the hero's height (via min-height, so it can still grow when
   the text wraps on narrow screens) and the photo is absolutely positioned to
   fill whatever that comes to. Letting the image participate in sizing made
   the row as tall as its intrinsic height — 1700px for Anna's portrait
   originals. */
.hero {
  position: relative;
  display: grid;
  overflow: hidden;
  background: var(--green-dark);
  color: var(--white);
}

.hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  opacity: .5;
}

.hero-body {
  grid-area: 1 / 1;
  position: relative;
  z-index: 1;
  min-height: clamp(320px, 40vw, 500px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding-block: 48px;
}

.hero h1 { color: var(--white); margin-bottom: .25em; }

.hero p {
  max-width: 46rem;
  margin-inline: auto;
  font-size: clamp(1rem, 2vw, 1.2rem);
  color: rgba(255, 255, 255, .92);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 1px solid var(--green);
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--green-light); border-color: var(--green-light); color: var(--white); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn-ghost { background: transparent; color: var(--green); }
.btn-ghost:hover { background: var(--sand); color: var(--green-dark); }

/* On dark backgrounds the ghost button needs light-on-dark treatment. */
.hero .btn-ghost,
.section-green .btn-ghost {
  color: var(--white);
  border-color: rgba(255, 255, 255, .75);
}

.hero .btn-ghost:hover,
.section-green .btn-ghost:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--green-dark);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 22px;
}

/* ---------- sections ---------- */

.section { padding: clamp(40px, 7vw, 76px) 0; }
.section-sand { background: var(--sand); }
.section-green { background: var(--green); color: var(--white); }
.section-green h2 { color: var(--white); }
.section-green a { color: var(--white); }

.section-head { max-width: 46rem; margin: 0 auto clamp(24px, 4vw, 44px); text-align: center; }
.section-head p { color: var(--muted); margin-bottom: 0; }
.section-green .section-head p { color: rgba(255, 255, 255, .9); }

/* ---------- split copy/media sections ---------- */

.split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}

.split-copy > :first-child { margin-top: 0; }
.split-copy > :last-child { margin-bottom: 0; }

.split-media {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Image first on the wholesale block so the page alternates. */
.split-reverse .split-media { order: -1; }

@media (max-width: 800px) {
  .split { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: 0; }
}

.prose { max-width: 46rem; margin-inline: auto; }
.prose h2 { margin-top: 1.4em; }
.prose h2:first-child { margin-top: 0; }

/* ---------- cards ---------- */

.grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.card img { aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.card-body { padding: 20px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.card-body h3 { margin-bottom: .35em; }
.card-body p { color: var(--muted); font-size: .96rem; }
.card-body .btn { margin-top: auto; align-self: flex-start; }

/* card that is entirely a link */
a.card { text-decoration: none; color: inherit; }
a.card:hover { border-color: var(--green-light); }
a.card:hover h3 { color: var(--green-light); }

/* ---------- catalog tab bar ---------- */

.tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tabbar a {
  display: block;
  padding: 12px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  color: var(--green-dark);
  font-weight: 700;
  text-decoration: none;
}

.tabbar a:hover { background: var(--green); border-color: var(--green); color: var(--white); }

/* ---------- hours / info ---------- */

.hours {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.hours > li {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}

.hours h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.hours p { margin: 0; font-weight: 600; }

.notice {
  border-left: 4px solid var(--green-light);
  background: var(--sand);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 16px 20px;
  margin: 24px 0;
}
.notice p:last-child { margin-bottom: 0; }

/* ---------- table ---------- */

.table-scroll { overflow-x: auto; }

table.rates {
  width: 100%;
  border-collapse: collapse;
  background: var(--white);
  font-size: .98rem;
}

table.rates caption {
  text-align: left;
  color: var(--muted);
  padding-bottom: 10px;
}

table.rates th,
table.rates td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

table.rates thead th {
  background: var(--green);
  color: var(--white);
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}

table.rates td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
table.rates tbody tr:nth-child(even) { background: var(--sand); }

/* ---------- forms ---------- */

.form-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  align-items: start;
}

.form-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 30px;
  box-shadow: var(--shadow);
}

.form-card > h2 { font-size: 1.4rem; }
.form-card > p { color: var(--muted); font-size: .96rem; }

.field { margin-bottom: 16px; }
.field-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }

@media (max-width: 480px) {
  .field-row { grid-template-columns: 1fr; }
}

label {
  display: block;
  margin-bottom: 6px;
  font-size: .88rem;
  font-weight: 700;
  color: var(--muted);
}

input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--white);
}

input:focus,
textarea:focus {
  outline: 2px solid var(--green-light);
  outline-offset: 1px;
  border-color: var(--green-light);
}

textarea { min-height: 120px; resize: vertical; }

.field-error { color: #b00020; font-size: .85rem; margin-top: 4px; }

.form-status {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: .95rem;
}

.form-status-success { background: #e6f4ec; color: #14532d; border: 1px solid #a7d8bd; }
.form-status-error { background: #fdecec; color: #7f1d1d; border: 1px solid #f2b8b8; }

.turnstile-container { margin: 14px 0; }

/* ---------- footer ---------- */

.site-footer {
  background: var(--green-dark);
  color: rgba(255, 255, 255, .82);
  padding: 44px 0 32px;
  font-size: .95rem;
}

.site-footer h3 { color: var(--white); font-size: 1rem; margin-bottom: .6em; }
.site-footer a { color: var(--white); }

.footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 6px; }

.social { display: flex; gap: 14px; margin-top: 12px; }
.social a { font-size: 1.5rem; line-height: 1; }

.colophon {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .18);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  justify-content: space-between;
  font-size: .85rem;
  color: rgba(255, 255, 255, .65);
}

/* ---------- icons ---------- */

.ico {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: .2em;
  opacity: .9;
}

.ico-social { width: 26px; height: 26px; display: block; }

.with-ico {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.with-ico.centered { justify-content: center; text-align: left; }

.social a { display: inline-flex; line-height: 0; }
.social a:hover { opacity: .85; }