/* ==========================================================================
   StoneView — WordPress-only overrides
   --------------------------------------------------------------------------
   These rules exist ONLY to undo Hello Elementor's base styles. They have no
   counterpart on the static site and must never be copied back into
   site.css or header-footer.css.

   The problem: hello-elementor/assets/css/reset.css contains

       [type=button],[type=submit],button {
         background-color:transparent; border:1px solid #c36; color:#c36;
         border-radius:3px; padding:.5rem 1rem; font-size:1rem; font-weight:400;
       }

   `[type=submit]` scores 0-1-0, which TIES with site.css's `.btn` / `.btn-primary`
   (also 0-1-0) and wins on source order, because Hello's reset is enqueued after
   the child theme's stylesheet. The result is a white, pink-outlined submit
   button in both homepage forms.

   Fix: restate the affected properties one specificity level higher, scoped to
   the page wrapper. Do NOT do this with a blanket
   `.sv-page-v4 button { ... }` — at 0-1-1 that would also outrank site.css's own
   `.btn` rules and flatten every button on the page.

   Only the two type="submit" buttons need this. The five hero-tab buttons are
   already safe: `.hero-tabs button` is 0-1-1 and beats the reset on its own.
   ========================================================================== */

.sv-page-v4 .btn {
  border: 0;
  border-radius: 100px;
  padding: 15px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 650;
}

.sv-page-v4 .btn-lg {
  padding: 18px 34px;
  font-size: 16px;
}

.sv-page-v4 .btn-primary {
  background: var(--clay);
  color: var(--white);
  box-shadow: var(--sh-1);
}

.sv-page-v4 .btn-primary:hover {
  background: var(--clay-d);
  box-shadow: var(--sh-2);
}

/* Hello's reset also sets a border-radius and padding on form controls; the
   quick-quote panel and the estimate card both rely on site.css's own values. */
.sv-page-v4 .field input,
.sv-page-v4 .field select,
.sv-page-v4 .field textarea {
  font-size: 15px;
}

/* ==========================================================================
   Global link / button colour normalisation  (v4 sitewide)
   --------------------------------------------------------------------------
   hello-elementor/assets/css/reset.css paints:
       a           { color:#c36 }          (crimson)
       a:hover     { color:#336 }          (navy — illegible on dark sections)
       a:visited   { text-decoration:underline }
       button, [type=submit] { color:#c36; ... }  hover:{ bg:#c36; color:#fff }

   site.css neutralises the base `a` colour but has no `a:hover`, so every link
   that isn't a styled v4 component flips to navy on hover and vanishes against
   dark backgrounds. This is the "blue/black text on hover" issue.

   Fix: clear those base colours with a `body`-prefixed selector (0-0-2), which
   beats Hello's element rules (0-0-1) regardless of stylesheet order while
   staying BELOW every v4 component rule (0-1-1+), so buttons, nav, footer and
   mega links keep their own colours and hovers.
   ========================================================================== */
body a { color: inherit; }
body a:hover,
body a:focus { color: inherit; }
body a:visited { text-decoration: none; }

body button,
body [type="button"],
body [type="submit"],
body [type="reset"] { color: inherit; }
/* Kill Hello's crimson hover on EVERY button type. Note [type=button]:hover
   scores (0,2,0) — an attribute selector outranks a plain element selector —
   so `body button:hover` (0,1,2) is NOT enough for <button type="button">
   (the Services toggle, burger, hero tabs). Each attribute form must be
   matched explicitly at (0,2,1) to win. */
body button:hover,
body button:focus,
body [type="button"]:hover,
body [type="button"]:focus,
body [type="submit"]:hover,
body [type="submit"]:focus,
body [type="reset"]:hover,
body [type="reset"]:focus {
  background-color: transparent;
  color: inherit;
}

/* ---- v4 buttons: lock label colour through hover -------------------------
   Hello Elementor's reset (a:hover #336 navy, [type=submit]:hover #c36) and the
   generic neutralisers above otherwise hijack styled-button labels on hover —
   turning them navy or making them inherit the wrong colour. !important is used
   deliberately to win against that third-party reset without a specificity
   arms race. Covers header/footer/section/form buttons. */
.btn-primary, .btn-primary:hover,
.sv-btn-primary, .sv-btn-primary:hover,
.btn-forest, .btn-forest:hover,
.btn-ghost, .btn-ghost:hover,
.sv-btn-ghost, .sv-btn-ghost:hover { color: #fff !important; }

.btn-outline { color: var(--ink, #1D211C) !important; }
.btn-outline:hover { color: var(--forest, #1F3A2E) !important; }

.sv-btn-sand, .sv-btn-sand:hover,
.btn-sand, .btn-sand:hover { color: var(--forest-d, #14251C) !important; }

/* CF7 submit: solid dark button on the light form-card (Hello's reset would
   blank the background on hover; lock both colour and background). */
.sv-page-v4 .wpcf7-submit.btn-primary { background: var(--clay, #20241E) !important; color: #fff !important; }
.sv-page-v4 .wpcf7-submit.btn-primary:hover { background: var(--forest, #1F3A2E) !important; color: #fff !important; }
/* …except the dark hero quick panel, where the submit is the sand button. */
.sv-page-v4 .quick .wpcf7-submit.btn-primary { background: var(--sand, #C9B79C) !important; color: var(--forest-d, #14251C) !important; }
.sv-page-v4 .quick .wpcf7-submit.btn-primary:hover { background: #fff !important; color: var(--forest-d, #14251C) !important; }

/* ---- Mega/Locations feature card: stronger overlay for text legibility ---
   The card text sits over a photo; deepen the gradient so the eyebrow, heading
   and link read clearly on any image. */
.sv-mega-feat::after {
  background: linear-gradient(to top, rgba(14,26,19,.94) 8%, rgba(14,26,19,.62) 52%, rgba(14,26,19,.40) 100%) !important;
}

/* Arrow glyphs as CSS unicode escapes (\2192 = →). The literal "→" in the
   source sheets can mojibake when a caching layer serves the CSS without a
   UTF-8 charset, showing garbled characters; the escape is pure ASCII and
   renders reliably. */
.sv-mega-feat .sv-feat-link::after,
.link-arrow::after { content: "\2192"; }

/* ---- Homepage bottom CTA: equal columns + shorter message box ------------ */
.sv-page-v4 .cta-band .cta-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
.sv-page-v4 .cta-band .form-card textarea,
.sv-page-v4 .cta-band .form-card .wpcf7-textarea { min-height: 84px; height: 96px; }
@media (max-width: 1080px) { .sv-page-v4 .cta-band .cta-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Mobile CTA vs floating contact widget — avoid double bottom-anchored CTAs
   --------------------------------------------------------------------------
   #svFcw (WhatsApp + Call floating widget, injected by Insert Headers & Footers)
   and the v4 .mobile-cta bar both anchor to the bottom on phones. The
   .mobile-cta bar is the primary mobile CTA (full-width, includes the "Free
   estimate" form link the header button drops on mobile), so hide the floating
   widget below the .mobile-cta breakpoint. Desktop keeps #svFcw (no mobile-cta
   there). ID selector beats the widget's own class-based styles.
   ========================================================================== */
@media (max-width: 900px) {
  #svFcw { display: none !important; }
}

/* ==========================================================================
   Sticky header — WordPress admin bar offset
   --------------------------------------------------------------------------
   The v4 header is `position: sticky; top: 0`. For logged-in users WordPress
   renders a fixed admin bar at top:0, so a top:0 sticky header sticks BEHIND
   it and jitters as you scroll — the "glitchy sticky" symptom. Offsetting the
   header (and the scroll-padding for in-page anchors) by the admin-bar height
   removes the overlap. Logged-out visitors have no admin bar and are
   unaffected.
   ========================================================================== */
.admin-bar .sv-head { top: 32px; }
.admin-bar .sv-scrim,
.admin-bar .sv-drawer { top: 32px; }
.admin-bar { scroll-padding-top: calc(32px + var(--sv-bar-h-sm, 64px) + 16px); }
@media screen and (max-width: 782px) {
  .admin-bar .sv-head,
  .admin-bar .sv-scrim,
  .admin-bar .sv-drawer { top: 46px; }
}

/* ==========================================================================
   Homepage hero — mobile overflow fix
   --------------------------------------------------------------------------
   Grid and flex items default to min-width:auto, so they refuse to shrink
   below their content's min-content width. The hero-tabs row (five buttons
   that don't wrap) gives .hero-in a ~609px min-content, so on a phone the
   1fr grid column blows out to 609px and the hero text/buttons are clipped by
   overflow-x:clip. Letting the grid item shrink (min-width:0) and the tabs
   wrap fixes it. Scoped to the homepage body.
   ========================================================================== */
.sv-page-v4 .hero-grid > * { min-width: 0; }
.sv-page-v4 .hero-in,
.sv-page-v4 .hero-copy,
.sv-page-v4 .hero-copy > * { min-width: 0; max-width: 100%; }
@media (max-width: 900px) {
  .sv-page-v4 .hero-tabs { flex-wrap: wrap; }
  .sv-page-v4 .hero-tabs button { flex: 0 0 auto; }
  .sv-page-v4 .btn-row { flex-wrap: wrap; }
  .sv-page-v4 .btn-row .btn { flex: 1 1 auto; }
}

/* ==========================================================================
   Header "Locations" dropdown — town picker (v4, WordPress-only)
   Reuses the mega panel; lays the 21 towns out in columns beside a CTA card.
   ========================================================================== */
/* .sv-mega-in also carries the class, and header-footer.css defines its grid
   at equal specificity + later source order — so qualify with both classes. */
.sv-mega-in.sv-mega-locations-in { grid-template-columns: 1fr 300px; }
.sv-town-cols { columns: 4 150px; column-gap: 20px; }
.sv-town-link {
  display: block; padding: 8px 10px; margin-inline: -10px; border-radius: 8px;
  font-size: 14.5px; font-weight: 560; color: var(--charcoal, #242822);
  break-inside: avoid; transition: background .18s ease, color .18s ease;
}
.sv-town-link:hover { background: var(--bone, #F2F4F1); color: var(--forest, #1F3A2E); }
.sv-town-link small { color: var(--muted, #5F675E); font-weight: 500; margin-left: 4px; }
@media (max-width: 1180px) { .sv-town-cols { columns: 3 130px; } }

/* Drawer: town accordion list */
.sv-acc-towns { columns: 2 120px; column-gap: 8px; padding: 6px 22px 10px; }
.sv-acc-towns a {
  display: block; padding: 9px 8px; font-size: 14.5px; color: var(--ink, #1D211C);
  border-bottom: 1px solid rgba(0,0,0,.05); break-inside: avoid;
}

/* ==========================================================================
   Blog — archive cards + single-post prose (v4)
   ========================================================================== */
.sv-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 900px) { .sv-blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sv-blog-grid { grid-template-columns: 1fr; } }

.sv-post-card {
  display: flex; flex-direction: column; background: var(--white, #fff);
  border: 1px solid var(--line, #D5DCD4); border-radius: 12px; overflow: hidden;
  box-shadow: var(--sh-1); transition: transform .3s ease, box-shadow .3s ease;
}
.sv-post-card:hover { transform: translateY(-4px); box-shadow: var(--sh-2); }
.sv-post-card .sv-post-img { aspect-ratio: 16/10; overflow: hidden; }
.sv-post-card .sv-post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.sv-post-card:hover .sv-post-img img { transform: scale(1.05); }
.sv-post-card .sv-post-body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.sv-post-card .sv-post-meta { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--stone, #4E6771); font-weight: 700; margin-bottom: 10px; }
.sv-post-card h3 { font-size: 1.25rem; line-height: 1.25; margin-bottom: 10px; }
.sv-post-card h3 a { color: var(--forest, #1F3A2E); }
.sv-post-card p { font-size: 14.5px; color: var(--muted, #5F675E); line-height: 1.6; margin-bottom: 16px; }
.sv-post-card .link-arrow { margin-top: auto; }

.sv-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 52px; flex-wrap: wrap; }
.sv-pagination a, .sv-pagination span {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px;
  padding: 0 12px; border-radius: 8px; border: 1px solid var(--line, #D5DCD4);
  font-weight: 650; font-size: 15px; color: var(--charcoal, #242822); background: var(--white, #fff);
}
.sv-pagination a:hover { border-color: var(--forest, #1F3A2E); color: var(--forest, #1F3A2E); }
.sv-pagination .current { background: var(--forest, #1F3A2E); border-color: var(--forest, #1F3A2E); color: #fff; }

/* Single-post prose */
.sv-prose { max-width: 760px; margin-inline: auto; font-size: 1.08rem; line-height: 1.75; color: var(--ink, #1D211C); }
.sv-prose > * + * { margin-top: 1.25em; }
.sv-prose h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.6em; }
.sv-prose h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); margin-top: 1.4em; }
.sv-prose ul, .sv-prose ol { padding-left: 1.3em; }
.sv-prose li { margin-top: .5em; }
.sv-prose li::marker { color: var(--moss, #4F6F52); }
.sv-prose img { border-radius: 10px; }
.sv-prose blockquote {
  border-left: 3px solid var(--sand, #C9B79C); padding-left: 20px; margin-left: 0;
  font-style: italic; color: var(--muted, #5F675E);
}

/* ==========================================================================
   Gallery grid (v4)  — masonry columns with hover captions
   ========================================================================== */
.sv-gallery { columns: 3 300px; column-gap: 16px; margin-top: 8px; }
.sv-gallery figure {
  break-inside: avoid; margin: 0 0 16px; position: relative;
  border-radius: 10px; overflow: hidden; box-shadow: var(--sh-1);
}
.sv-gallery img { width: 100%; display: block; transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.sv-gallery figure:hover img { transform: scale(1.06); }
.sv-gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: 46px 16px 14px;
  background: linear-gradient(transparent, rgba(14,26,19,.88));
  color: #fff; opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.sv-gallery figure:hover figcaption { opacity: 1; transform: translateY(0); }
.sv-gallery figcaption strong { display: block; font-size: 15px; font-weight: 650; }
.sv-gallery .sv-gcat {
  display: inline-block; margin-bottom: 6px; padding: 3px 10px; border-radius: 100px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: rgba(201,183,156,.9); color: #14251C;
}
@media (max-width: 640px) { .sv-gallery { columns: 2 160px; column-gap: 12px; } .sv-gallery figure { margin-bottom: 12px; } }

/* ==========================================================================
   Contact Form 7 — v4 styling
   --------------------------------------------------------------------------
   CF7 wraps each control in <span class="wpcf7-form-control-wrap">. The v4
   .field rules target the input directly, so make the wrap transparent and
   full-width, then style CF7's validation tips and response banner on-brand.
   ========================================================================== */
.sv-page-v4 .wpcf7-form-control-wrap { display: block; }
.sv-page-v4 .field .wpcf7-form-control-wrap input,
.sv-page-v4 .field .wpcf7-form-control-wrap select,
.sv-page-v4 .field .wpcf7-form-control-wrap textarea { width: 100%; }
.sv-page-v4 .wpcf7-submit { margin-top: 6px; width: 100%; cursor: pointer; }

.sv-page-v4 .wpcf7-not-valid-tip {
  color: #c0392b; font-size: 13px; font-weight: 600; margin-top: 5px;
}
.sv-page-v4 .wpcf7 form .wpcf7-response-output {
  margin: 18px 0 0; padding: 12px 16px; border-radius: 8px;
  font-size: 14px; line-height: 1.5;
}
.sv-page-v4 .wpcf7 form.sent .wpcf7-response-output {
  border: 1px solid #2E7D46; background: #EAF5EE; color: #1F3A2E;
}
.sv-page-v4 .wpcf7 form.invalid .wpcf7-response-output,
.sv-page-v4 .wpcf7 form.unaccepted .wpcf7-response-output,
.sv-page-v4 .wpcf7 form.failed .wpcf7-response-output {
  border: 1px solid #c0392b; background: #FDECEA; color: #8A1C14;
}
.sv-page-v4 .wpcf7-spinner { margin: 0 auto; display: block; }

/* --- Consistent field styling across ALL control types -------------------
   Hello Elementor's reset.css styles input[type=text], select and textarea
   (border 1px #666, radius 3px, padding .5rem 1rem) at a specificity that ties
   the v4 .field rule — but it does NOT list [type=tel] / [type=email], so those
   render with the v4 style while text/select pick up Hello's. Result: mixed
   padding, border and radius in one form. Re-assert the v4 field style one
   level higher, on the light form-card forms (the dark .quick panel keeps its
   own styling). */
/* Payment card icons on a light card (footer .sv-pay is tuned for the dark
   footer; give the light-context variant a subtle border so the chips read). */
.sv-page-v4 .sv-pay--light { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sv-page-v4 .sv-pay--light span { background: #fff; border: 1px solid var(--line, #D5DCD4); height: 26px; padding: 0 8px; border-radius: 5px; display: inline-flex; align-items: center; }
.sv-page-v4 .sv-pay--light svg { height: 13px; width: auto; }

.sv-page-v4 .form-card .field input,
.sv-page-v4 .form-card .field select,
.sv-page-v4 .form-card .field textarea,
.sv-page-v4 .form-card .wpcf7-form-control-wrap input,
.sv-page-v4 .form-card .wpcf7-form-control-wrap select,
.sv-page-v4 .form-card .wpcf7-form-control-wrap textarea {
  padding: 14px 16px;
  border: 1.5px solid var(--line, #D5DCD4);
  border-radius: var(--r, 8px);
  background: var(--bone, #F2F4F1);
  font-size: 15.5px;
}

/* --- CF7 inside the DARK hero quick-quote panel (.quick) -----------------
   The panel is dark, so the default dark-red validation tips and the light
   response banner are illegible. Recolour them for the dark ground and make
   the submit button + its hover clearly stand out. */
.sv-page-v4 .quick .wpcf7-not-valid-tip {
  color: #FFC9BE; background: rgba(192,57,43,.30);
  padding: 3px 9px; border-radius: 6px; display: inline-block;
}
.sv-page-v4 .quick .wpcf7 form .wpcf7-response-output {
  color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.10);
}
.sv-page-v4 .quick .wpcf7 form.invalid .wpcf7-response-output,
.sv-page-v4 .quick .wpcf7 form.unaccepted .wpcf7-response-output,
.sv-page-v4 .quick .wpcf7 form.failed .wpcf7-response-output {
  border-color: #FFC9BE; background: rgba(192,57,43,.30); color: #FFE3DC;
}
/* CF7 flags success by adding `.sent` to the <form> element. A dead rule from the
   old static mockup — `.quick .sent { display:none }`, written for a former
   `<div class="sent">` success panel that no longer exists — was matching that
   form and hiding the whole panel on submit, so the confirmation never showed
   ("form disappears, no feedback"). Keep the form visible; its green banner below
   is the confirmation. Specificity (0,4,1) beats the legacy (0,2,0). */
.sv-page-v4 .quick form.wpcf7-form.sent { display: block; }
.sv-page-v4 .quick .wpcf7 form.sent .wpcf7-response-output {
  display: block; border-color: #8FD6A6; background: rgba(46,125,70,.30); color: #DFF5E6;
  text-align: center; font-weight: 600; margin-top: 14px;
}
/* Submit on the dark panel: sand button with a clear, bright hover so the
   call-to-action reads and the hover state is obvious. */
.sv-page-v4 .quick .wpcf7-submit.btn-primary {
  background: var(--sand); color: var(--forest-d);
}
.sv-page-v4 .quick .wpcf7-submit.btn-primary:hover {
  background: #fff; color: var(--forest-d); box-shadow: var(--sh-2);
}

/* Invalid fields get a visible red outline in BOTH contexts. */
.sv-page-v4 .wpcf7-form .wpcf7-not-valid {
  border-color: #c0392b !important; box-shadow: 0 0 0 2px rgba(192,57,43,.15);
}
.sv-page-v4 .quick .wpcf7-form .wpcf7-not-valid {
  border-color: #FFC9BE !important; box-shadow: 0 0 0 2px rgba(255,201,190,.25);
}

/* Genuine text links inside prose keep a legible, on-brand colour and a
   visible hover — so blog posts and body copy still read as linked. */
.entry-content a,
.sv-prose a {
  color: var(--forest, #1F3A2E);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.entry-content a:hover,
.sv-prose a:hover {
  color: var(--moss, #4F6F52);
}

/* CF7 flags success by adding `.sent` to the <form>. A dead rule from the old
   static mockup — `.quick .sent { display:none }` — matched that form and hid the
   whole hero panel on submit, so no confirmation showed. Keep the form visible;
   its green banner below is the confirmation. Specificity (0,4,1) beats (0,2,0). */
.sv-page-v4 .quick form.wpcf7-form.sent { display: block; }
.sv-page-v4 .quick .wpcf7 form.sent .wpcf7-response-output {
  display: block; border-color: #8FD6A6; background: rgba(46,125,70,.30); color: #DFF5E6;
  text-align: center; font-weight: 600; margin-top: 14px;
}