/* Brand palette. Source of truth is CLAUDE.md section 3 - always use these
   variables, never raw hex. Contrast rule: never white text on amber. */
:root {
  --th-brand: #6B2D2D;   /* logo red - headings, nav, footer */
  --th-accent: #E3A33B;  /* amber - CTA buttons, key highlights */
  --th-text: #333333;    /* body copy */
  --th-bg: #FAF6F1;      /* warm off-white section backgrounds */
  --th-white: #FFFFFF;   /* utility, not a brand colour */
}

/* ---------- Main menu hover ----------
   inc/sensiblewp-styles.php prints `.main-navigation li:hover > a, a:hover
   { color: ... }` (the Customizer "hover color", currently #6b342d) after
   this file in wp_head, so this has to outrank it: adding .site-header makes
   it (0,3,2) against the customizer's (0,2,2).
   Dropdown links carry `color: #8c9398 !important` in style.css, so submenus
   on their white background are unaffected by this. The th-cta menu button
   sets its own hover with !important, so it is unaffected too. */
.site-header .main-navigation li:hover > a,
.site-header .main-navigation a:hover {
  color: var(--th-accent);
}

/* ---------- Header CTA button ---------- */

li.th-cta > a {
  background: var(--th-accent) !important;
  color: var(--th-brand) !important;
  font-weight: 700;
  padding: 10px 20px !important;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, color .2s;
}
li.th-cta > a:hover,
li.th-cta > a:focus {
  background: var(--th-brand) !important;
  color: var(--th-white) !important;
}

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

.th-hero-sub {
  color: var(--th-white);
  font-size: 1.25rem;
  line-height: 1.6;
  max-width: 700px;
  margin: 0 auto 32px;
  text-align: center;
}

.th-hero-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

/* The transparent border keeps the primary button the same height as the
   outline one, which carries a real 2px border. */
.th-btn {
  display: inline-block;
  font-weight: 700;
  padding: 10px 20px;
  border: 2px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}

/* Same treatment as the header th-cta button above. The customizer inline
   CSS in inc/sensiblewp-styles.php prints `a { color: ... }` after this file
   in wp_head, but it is a bare element selector, so these classes win on
   specificity without needing !important. */
.th-btn-primary {
  background: var(--th-accent);
  color: var(--th-brand);
}
.th-btn-primary:hover,
.th-btn-primary:focus {
  background: var(--th-brand);
  color: var(--th-white);
}

.th-btn-outline {
  background: transparent;
  border-color: var(--th-white);
  color: var(--th-white);
}
.th-btn-outline:hover,
.th-btn-outline:focus {
  background: var(--th-white);
  border-color: var(--th-white);
  color: var(--th-brand);
}

.th-hero-note {
  color: var(--th-white);
  font-size: .875rem;
  opacity: .85;
  margin: 18px 0 0;
}

/* ---------- Inner page header band ----------
   style.css line 1065 paints .entry-header with the stock theme red
   (#ea474b), which is not a brand colour. The absolutely positioned
   .site-header floats over this band, so it also decides whether the amber
   nav hover is readable: amber on #ea474b is 1.74:1, amber on brand red is
   4.69:1. */
.entry-header {
  background: var(--th-brand);
}

/* ---------- Home page block editor content ---------- */

/* Only the vertical padding: the horizontal gutters belong to .grid-pad
   (30px left) and, under 769px, to .grid (20px/10px). A `padding` shorthand
   here would zero them, because treehouse.css loads after style.css at the
   same specificity. */
.th-home-content {
  padding-top: 36px;
  padding-bottom: 20px;
}

/* style.css line 1055 adds another 1.5em above the first block. */
.th-home-content .entry-content {
  margin-top: 0;
}

/* Section headings. Both "How We Work" and "Why Our Clients Stay" are plain
   h2s and style.css line 234 already sizes every h2 at 32px, so they matched
   before this rule - it makes the size explicit and adds the brand colour
   that CLAUDE.md section 3 specifies for headings (they were inheriting the
   customizer body grey). */
.th-home-content h2 {
  font-size: 32px;
  line-height: 36px;
  color: var(--th-brand);
  margin-bottom: .75em;
}

/* Separator block between the two home sections. Core gives .wp-block-separator
   both a top and a bottom border; we want a single hairline. */
.th-home-content .wp-block-separator {
  border: 0;
  border-top: 1px solid rgba(107, 45, 45, .18);
  width: 100%;
  max-width: 100%;
  height: 0;
  opacity: 1;
  margin: 64px auto 56px;
}

/* "How We Work" process strip. Not yet in the CLAUDE.md section 4 table. */
.th-process-steps {
  color: var(--th-brand);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: .04em;
  margin: 0 0 1.25em;
}

/* ---------- Tinted panels with white cards ----------
   Shared by "th-testimonials" (Columns or Quote block) and "th-services"
   (a Group wrapping two Columns rows on What We Do). Each inner column is a
   card. Contained width: the theme declares no align-wide support, so
   alignwide/alignfull are inert here. */

.th-testimonials,
.th-services,
.th-panel {
  background: var(--th-bg);
  border-radius: 8px;
  padding: 40px 24px;
  margin: 0 0 1.5em;
}

.th-testimonials .wp-block-column,
.th-services .wp-block-column {
  background: var(--th-white);
  color: var(--th-text);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
  padding: 30px;
}

/* style.css line 257 gives every blockquote a grey fill and a 5px left
   border in the theme's old red. Strip it back inside the cards, in case a
   Quote block is used instead of plain paragraphs. */
.th-testimonials blockquote {
  background: none;
  border: 0;
  border-radius: 0;
  color: var(--th-text);
  font-style: normal;
  margin: 0;
  padding: 0;
}

.th-testimonials p {
  color: var(--th-text);
  margin: 0 0 1em;
}

.th-testimonials cite,
.th-testimonials .th-attribution {
  display: block;
  color: var(--th-brand);
  font-weight: 700;
  font-style: normal;
  margin: 16px 0 0;
}
.th-testimonials p:last-child,
.th-testimonials cite,
.th-testimonials .th-attribution {
  margin-bottom: 0;
}

/* ---------- What We Do: services grid ----------
   Two Columns rows of three inside the .th-services panel. */

.th-services .wp-block-columns {
  margin-bottom: 0;
}
.th-services .wp-block-columns + .wp-block-columns {
  margin-top: 24px;
}

.th-services .th-service-title {
  color: var(--th-brand);
  font-weight: 700;
  margin: 0 0 .5em;
}

.th-services p {
  color: var(--th-text);
}
.th-services p:last-child {
  margin-bottom: 0;
}

/* ---------- What We Do: "How to Get Started" steps ----------
   Columns block, class "th-start". White numeral on a brand-red disc,
   about 10.3:1. */

.th-start .wp-block-column {
  text-align: center;
}

.th-start-number {
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--th-brand);
  color: var(--th-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 56px;
  text-align: center;
}

.th-start .th-start-title {
  color: var(--th-brand);
  font-weight: 700;
  margin: 0 0 .5em;
}

.th-start p {
  color: var(--th-text);
}

/* ---------- Seed to Sapling ----------
   The price band is a .th-cta-band with an oversized heading - it is the
   centrepiece of the page. Everything else on that page reuses th-services,
   th-cta-band and the Button block classes unchanged. */

.th-price-band h2 {
  font-size: 40px;
  line-height: 46px;
}

/* Intro subhead. A paragraph, not a heading, but it still needs to read as
   a subhead rather than body copy. */
.th-lede {
  color: var(--th-text);
  font-size: 1.5rem;
  line-height: 1.45;
  margin: 0 0 1.5em;
}

/* Media & Text block holding the photo of Scott. Core's own
   is-stacked-on-mobile handles the stacking (at 600px). */
.th-about {
  margin: 1.8em 0 1.5em;
}
.th-about .wp-block-media-text__media img {
  border-radius: 8px;
}

/* ---------- Plain tinted panel ----------
   Group block, class "th-panel". The same tinted panel as th-testimonials
   and th-services but with no inner cards - used for the "Small by Choice"
   closing argument on Who We Are. */

.th-panel p {
  color: var(--th-text);
}
.th-panel p:last-child {
  margin-bottom: 0;
}

/* ---------- Section heading rhythm ----------
   style.css resets every heading to margin: 0 and only adds .5em below, so
   an h2 sits tight against whatever precedes it. Scoped to the fullwidth
   template so the homepage (page-template-page-home) keeps its own tuned
   spacing under the hero. */

.page-template-page-fullwidth .entry-content h2 {
  margin-top: 1.8em;
}
/* ...but not when the h2 opens the page, directly under the title band. */
.page-template-page-fullwidth .entry-content > h2:first-child {
  margin-top: 0;
}
.page-template-page-fullwidth .entry-content .th-cta-band h2,
.page-template-page-fullwidth .entry-content .th-panel h2 {
  margin-top: 0;
}

/* ---------- Our Process: steps ----------
   One Group block per step, class "th-step". White card with a brand-red
   spine, so it stays distinct from the tinted .th-testimonials panel used
   for the pull quote further down the page. */

.th-step {
  background: var(--th-white);
  border-left: 4px solid var(--th-brand);
  border-radius: 0 6px 6px 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
  padding: 24px 28px;
  margin: 0 0 20px;
}

.th-step-number {
  display: block;
  color: var(--th-brand);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin: 0 0 6px;
}

.th-step h3 {
  color: var(--th-brand);
  font-size: 22px;
  line-height: 28px;
  margin: 0 0 .5em;
}

.th-step p {
  color: var(--th-text);
}

.th-step .th-step-outcome {
  margin: 1em 0 0;
}

/* ---------- Our Process: closing CTA band ---------- */

.th-cta-band {
  background: var(--th-brand);
  border-radius: 8px;
  padding: 48px 32px;
  margin: 48px 0 24px;
  text-align: center;
}

.th-cta-band h2,
.th-cta-band p {
  color: var(--th-white);
}

.th-cta-band p {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.th-cta-band .wp-block-buttons {
  justify-content: center;
  gap: 16px;
}

/* ---------- Button block variants ----------
   The editor puts the class on the outer .wp-block-button and wraps the link
   in .wp-block-button__link, so the rules have to target the inner anchor.
   Core's own .wp-block-button__link is one class; these are two, so they win
   without !important. Same look as the .th-btn anchors in the hero. */

.th-btn-primary .wp-block-button__link {
  background: var(--th-accent);
  color: var(--th-brand);
  border: 2px solid var(--th-accent);
  border-radius: 8px;
  font-weight: 700;
  padding: 10px 20px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.th-btn-primary .wp-block-button__link:hover,
.th-btn-primary .wp-block-button__link:focus {
  background: var(--th-brand);
  color: var(--th-white);
  border-color: var(--th-brand);
}

.th-btn-outline .wp-block-button__link {
  background: transparent;
  color: var(--th-white);
  border: 2px solid var(--th-white);
  border-radius: 8px;
  font-weight: 700;
  padding: 10px 20px;
  text-decoration: none;
  transition: background .2s, color .2s, border-color .2s;
}
.th-btn-outline .wp-block-button__link:hover,
.th-btn-outline .wp-block-button__link:focus {
  background: var(--th-white);
  color: var(--th-brand);
  border-color: var(--th-white);
}

/* Inside the band the background IS brand red, so the default primary hover
   would make the button vanish. Flip to white instead, same as the footer. */
.th-cta-band .th-btn-primary .wp-block-button__link:hover,
.th-cta-band .th-btn-primary .wp-block-button__link:focus {
  background: var(--th-white);
  color: var(--th-brand);
  border-color: var(--th-white);
}

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

/* Brand red footer with white text, per CLAUDE.md section 3. The doubled
   .site-footer.th-footer selector is needed to beat the inline customizer
   CSS from inc/sensiblewp-styles.php, which prints `.site-footer {
   background: ... }` and `{ color: ... }` after this file in wp_head. White
   on brand red is about 10.3:1, comfortably past AA. */
.site-footer.th-footer {
  background: var(--th-brand);
  color: var(--th-white);
  padding: 50px 0 30px;
}
/* Paragraphs carry their own colour (style.css line 242, plus the customizer
   inline rule), so they never inherit the white above - set it explicitly. */
.site-footer.th-footer p {
  color: var(--th-white);
}
.site-footer.th-footer a {
  color: var(--th-white);
  text-decoration: underline;
}
.site-footer.th-footer a:hover,
.site-footer.th-footer a:focus {
  color: var(--th-accent);
}

.th-footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.site-footer.th-footer .th-footer-heading {
  color: var(--th-white);
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 20px;
}

.th-footer-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.th-footer-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  line-height: 1.4;
}
/* Amber on brand red is about 4.7:1 - fine for these decorative glyphs. */
.th-footer .th-icon {
  flex: 0 0 auto;
  color: var(--th-accent);
}

.th-footer-text {
  margin: 0 0 24px;
  max-width: 34em;
}

.th-footer-btn {
  display: inline-block;
  background: var(--th-accent);
  color: var(--th-brand) !important;
  font-weight: 700;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
/* The old hover flipped to brand red, which is now the footer background -
   the button would vanish. Flip to white instead. */
.th-footer-btn:hover,
.th-footer-btn:focus {
  background: var(--th-white);
  color: var(--th-brand) !important;
}

.th-footer-bottom {
  margin-top: 50px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: 14px;
}
.th-footer-bottom .th-sep {
  margin: 0 6px;
}

@media only screen and (max-width: 767px) {
  .th-hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .th-btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .th-home-content {
    padding-top: 28px;
    padding-bottom: 10px;
  }
  .th-home-content h2 {
    font-size: 26px;
    line-height: 30px;
  }
  .th-home-content .wp-block-separator {
    margin: 40px auto 34px;
  }
  .th-step {
    padding: 20px 20px;
  }
  .th-step-number {
    font-size: 32px;
  }
  .th-cta-band {
    padding: 36px 20px;
    margin: 36px 0 20px;
  }
  .th-cta-band .wp-block-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .th-cta-band .wp-block-button {
    width: 100%;
  }
  .th-cta-band .wp-block-button__link {
    display: block;
    width: 100%;
    text-align: center;
  }

  .th-testimonials,
  .th-services,
  .th-panel {
    display: block;
    padding: 28px 18px;
  }
  .th-testimonials .wp-block-column,
  .th-services .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 20px;
  }
  .th-testimonials .wp-block-column:last-child,
  .th-services .wp-block-columns:last-child .wp-block-column:last-child {
    margin-bottom: 0;
  }
  .th-services .wp-block-columns + .wp-block-columns {
    margin-top: 20px;
  }
  .th-start .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 28px;
  }
  .th-start .wp-block-column:last-child {
    margin-bottom: 0;
  }
  .th-price-band h2 {
    font-size: 28px;
    line-height: 34px;
  }
  .th-lede {
    font-size: 1.25rem;
  }

  .th-footer-cols {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .th-footer-bottom {
    margin-top: 36px;
  }
}