/*
 * Wellspring Tree Care — modern polish layer.
 *
 * Loaded after the captured GHL styles on every page. It keeps the original colours and layout
 * and only refines type, spacing, buttons, image containers and cards. Most GHL rules are keyed
 * on element ids (#col-…, .cbutton-…), so the overrides here use !important where they have to
 * beat one. Classes starting wtc- are added by the small tagger script in Base.astro.
 */

/* ---------- One type system on every page ----------
 * Pages came from two GHL templates: most use Fira Sans + Roboto, the contact page used
 * Montserrat + Lato (and fell back to a serif because neither was loaded). Fira Sans for
 * headings and Roboto for text, everywhere. */
html:root {
  --headlinefont: "Fira Sans" !important;
  --contentfont: "Roboto" !important;
  --montserrat: "Fira Sans" !important;
  --poppins: "Roboto" !important;
  --lato: "Roboto" !important;
  --inter: "Roboto" !important;
  --wtc-green: #afbc34;
  --wtc-green-dark: #8e9a22;
  --wtc-forest: #3a5a1c;
  --wtc-ink: #1d2417;
  --wtc-radius: 14px;
  --wtc-radius-sm: 10px;
  --wtc-shadow: 0 1px 2px rgba(20, 30, 10, .06), 0 8px 24px rgba(20, 30, 10, .08);
  --wtc-shadow-lg: 0 2px 4px rgba(20, 30, 10, .06), 0 18px 40px rgba(20, 30, 10, .14);
}
body {
  /* Some pages had no base font at all, so unstyled text fell back to Times New Roman. */
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: tighter tracking, calmer line height. (GHL's "sub-heading" block is used for body
 * paragraphs on this site, so it is deliberately left alone.) */
.c-heading :is(h1, h2, h3, h4, h5, h6) {
  line-height: 1.18 !important;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.c-heading h1 { letter-spacing: -0.02em; }

/* No justified text: it left rivers of space in the narrow service cards. */
.wtc-unjustify, .wtc-unjustify * { text-align: left !important; }
.c-bullet-list li::marker { color: var(--wtc-green); }

/* ---------- Buttons ---------- */
.c-button > a,
.c-button > button {
  border-radius: 999px !important;
  padding: 13px 28px !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  box-shadow: 0 2px 6px rgba(20, 30, 10, .12), 0 8px 20px rgba(20, 30, 10, .10) !important;
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease !important;
}
.c-button > a:hover,
.c-button > button:hover {
  transform: translateY(-2px);
  filter: brightness(1.05);
  box-shadow: 0 4px 10px rgba(20, 30, 10, .14), 0 14px 30px rgba(20, 30, 10, .16) !important;
}
.c-button > a:focus-visible,
.c-button > button:focus-visible {
  outline: 3px solid rgba(175, 188, 52, .55);
  outline-offset: 3px;
}
/* Two-line "Click To Call NOW / for Emergency…" buttons: a squarer pill reads better. */
.c-button > a:has(.main-heading-group + *),
.c-button > a:has(.sub-heading-button) {
  border-radius: 16px !important;
  padding: 14px 30px !important;
}
.c-button .sub-heading-button,
.c-button [class*="sub-heading"] {
  font-weight: 400 !important;
  opacity: .9;
}
/* The hero's outlined button on photo backgrounds: frosted instead of flat black. */
.c-button > a.borderFull {
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.view-post-button {
  font-weight: 600;
}

/* ---------- Image containers ---------- */
/* Every content image gets soft corners; photos (tagged by size) also get a shadow. */
.c-image img { border-radius: var(--wtc-radius) !important; }
.c-image img.wtc-photo {
  box-shadow: var(--wtc-shadow);
  transition: transform .35s ease, box-shadow .35s ease;
}
.c-image a:hover img.wtc-photo,
.wtc-gallery img.wtc-photo:hover {
  transform: scale(1.015);
  box-shadow: var(--wtc-shadow-lg);
}
.c-image .image-container,
.c-image figure { border-radius: var(--wtc-radius); }
/* Embedded Google Maps. */
iframe[src*="google.com/maps"] { border-radius: var(--wtc-radius); box-shadow: var(--wtc-shadow); }
/* Images inside a card: only the top corners show, flush with the card. */
.wtc-card .c-image img { border-radius: var(--wtc-radius-sm) !important; }

/* ---------- Cards & boxes ---------- */
/* Columns with their own background or shadow (service cards, the emergency box, feature
 * tiles, process steps) — tagged wtc-card by the script. */
.wtc-card {
  border-radius: var(--wtc-radius) !important;
  box-shadow: var(--wtc-shadow) !important;
  border-color: rgba(20, 30, 10, .06) !important;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.wtc-card.wtc-card--lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--wtc-shadow-lg) !important;
}
/* Coloured tiles (the green "Certified Arborist" feature) keep their colour, lose the hard
 * top bar look. */
.wtc-card.wtc-card--tinted { box-shadow: 0 10px 30px rgba(120, 130, 20, .25) !important; }

/* Blog post cards already had a card look: match radius and shadow. */
.post {
  border-radius: var(--wtc-radius) !important;
  box-shadow: var(--wtc-shadow) !important;
  border-color: rgba(20, 30, 10, .06) !important;
  transition: transform .25s ease, box-shadow .25s ease;
}
.post:hover { transform: translateY(-4px); box-shadow: var(--wtc-shadow-lg) !important; }
.post .post-image-wrapper img { border-radius: var(--wtc-radius-sm) !important; }

/* ---------- FAQ accordion ---------- */
.hl-faq-child {
  border-radius: var(--wtc-radius-sm) !important;
  overflow: hidden;
  margin-bottom: 10px !important;
  border: 1px solid rgba(20, 30, 10, .08) !important;
  background: #fff;
  transition: box-shadow .2s ease;
}
.hl-faq-child:hover { box-shadow: var(--wtc-shadow); }
.hl-faq-child-heading { padding: 16px 20px !important; }
.hl-faq-child-panel { padding-left: 20px !important; padding-right: 20px !important; }

/* ---------- Header ---------- */
.c-nav-menu .nav-menu-item a,
.c-nav-menu .nav-menu > li > a {
  letter-spacing: .04em;
  transition: color .15s ease;
}
.c-nav-menu .nav-menu-item a:hover { color: var(--wtc-green) !important; }

/* ---------- Spacing ---------- */
/* A little more room between stacked blocks inside a column. */
.c-column > .inner > .c-heading + .c-paragraph,
.c-column > .inner > .c-sub-heading + .c-heading { margin-top: 4px; }
.c-column > .inner > .c-paragraph + .c-button,
.c-column > .inner > .c-bullet-list + .c-button { margin-top: 10px !important; }

@media (max-width: 767px) {
  /* Phones: side gutters so text and cards never touch the screen edge. */
  .wtc-card { margin-left: 4px; margin-right: 4px; }
  .c-heading :is(h1, h2) { text-wrap: balance; }
  .c-button > a, .c-button > button { padding: 12px 24px !important; }
  /* The feature tiles ran edge to edge on phones. */
  .wtc-card.wtc-card--tinted { margin: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .c-button > a, .c-button > button, .wtc-card, .post, .c-image img.wtc-photo { transition: none !important; }
  .c-button > a:hover, .wtc-card:hover, .post:hover, .c-image img.wtc-photo:hover { transform: none !important; }
}

/* Paragraph blocks that GHL had marked up as <h2> are now <p class="wtc-p"> (heading hierarchy).
 * The block's wrapper already carries the font size, so only reset what <p> adds by default. */
.text-output p.wtc-p { margin: 0; font: inherit; line-height: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit; }
/* FAQ questions moved from <h4> to <h3>: keep the size the <h4> had (1em of the 20px set on the wrapper). */
.hl-faq-child-heading-text h3 { font-size: 1em; line-height: 1.5; margin: 0; }