/* Site-wide overrides (was the theme's SITE CSS field) */
/* Light text on dark sections, but leave the Website Grader alone */
.BG-Dark,
.BG-Dark :is(p, li, strong, span):not(.ldg-root *) {
 color: #fff;
}
.BG-Dark a:not(.Button, .ldg-root *) {
 color: #fff;
 text-decoration: underline;
}
/* The grader manages its own colors; reset what the section would otherwise pass down */
.BG-Dark .ldg-root {
 color: var(--ldg-ink, #3B3A2E);
}

/* Keyboard focus: a brand ring on light sections, white on dark ones */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
 outline: 2px solid var(--cb-primary-hover);
 outline-offset: 3px;
}
:where(.BG-Dark, .ModuleSlider, footer, #MobileNavWrapper) :where(a, button, summary, [tabindex]):focus-visible {
 outline-color: #fff;
}

/* Hero background video control (added by site.js) */
.hero-video-toggle {
 position: absolute;
 right: 20px;
 bottom: 20px;
 z-index: 1001;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 44px;
 height: 44px;
 padding: 0;
 color: #fff;
 background: rgba(43, 53, 28, .6);
 border: 2px solid #fff;
 border-radius: 50%;
 cursor: pointer;
 transition: background-color .2s ease-out;
}
.hero-video-toggle:hover { background: var(--cb-primary-hover); }
.hero-video-toggle svg { width: 16px; height: 16px; }

/* Reduced motion: content still fades in, but nothing slides, zooms or nudges */
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto !important; }
 .AnimateMe,
 .AnimateMe.visible {
  transform: none !important;
  transition: opacity .3s ease-out !important;
 }
 .ModuleSlider .FeatureImage img,
 .ModuleSlider .FeatureImage video {
  transition: none !important;
 }
 .Button a::after,
 .Button input::after,
 .Button button::after {
  transition: none !important;
 }
 .Button a:hover::after,
 .Button input:hover::after,
 .Button button:hover::after {
  transform: translate(5px, 0) !important;
 }
}

/* Skip link: hidden until focused */
.skip-link {
 position: absolute;
 left: 12px;
 top: -100px;
 z-index: 10000;
 padding: 10px 16px;
 color: #fff;
 background: var(--cb-primary-hover);
 border-radius: 5px;
 font-weight: 600;
 text-decoration: none;
}
.skip-link:focus { top: 12px; }

/* Tap-to-call in the mobile header (the theme hid it everywhere) */
@media screen and (max-width: 1200px) {
 #MobilePhone { display: flex !important; }
 #MobilePhone a { color: var(--cb-primary); }
}

/* FAQ toggles on dark bands: white disc, olive glyph (wheat gold was too faint to read as state) */
.BG-Dark .ModuleAccordion dl.FAQ dt button div.plusMinusWrapper { background: #fff; }

/* Desktop menu: keep each label on one line now that Pricing is top level */
@media screen and (min-width: 1201px) {
 #TopMenuWrapper ul.menu > li > a { white-space: nowrap; padding-left: 12px; padding-right: 12px; }
}

/* Website Grader callout (partials/grader-cta.njk) */
.grader-cta { padding: 56px 0; text-align: center; }
.grader-cta h2 { color: #fff; margin-bottom: 12px; }
.grader-cta p { max-width: 640px; margin: 0 auto 24px; }
.grader-cta-form { max-width: 560px; margin: 0 auto; text-align: left; }
.grader-cta-form label { display: block; margin-bottom: 6px; color: #fff; font-weight: 600; }
.grader-cta-row { display: flex; gap: 12px; }
.grader-cta-row input {
 flex: 1;
 min-width: 0;
 height: 50px !important;
 padding: 0 16px !important;
 font-size: 16px;
 color: var(--ct);
 background: #fff;
 border: 2px solid #fff;
 border-radius: 5px;
}
.grader-cta-row .Button button { height: 50px !important; min-width: 0; white-space: nowrap; }
.grader-cta-row .Button button:hover,
.grader-cta-row .Button button:focus-visible { background: var(--cb-secondary-hover) !important; }
.grader-cta-row input:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media screen and (max-width: 560px) {
 .grader-cta-row { flex-direction: column; }
 .grader-cta-row input { flex: none; }
 .grader-cta-row .Button button { width: 100%; }
}

/* Website Grader page: trust line under the form and the how-it-works steps */
.grader-trust { margin-top: 16px; text-align: center; font-size: 15px; opacity: .9; }
.grader-steps {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 32px;
 max-width: 1000px;
 margin: 32px auto 36px;
 padding: 0;
 list-style: none;
 counter-reset: step;
}
.grader-steps li { counter-increment: step; text-align: center; }
.grader-steps li::before {
 content: counter(step);
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 48px;
 height: 48px;
 margin-bottom: 12px;
 color: #fff;
 font-weight: 700;
 font-size: 20px;
 background: var(--cb-primary);
 border-radius: 50%;
}
.grader-steps h3 { margin-bottom: 8px; }
@media screen and (max-width: 800px) {
 .grader-steps { grid-template-columns: 1fr; gap: 24px; }
}

/* Blog listing: an editorial list, one row per post; the title link covers the whole row */
.blog-index { padding: 48px 0 72px; }
.blog-list { max-width: 960px; margin: 0 auto; padding: 0; list-style: none; }
.blog-card {
 position: relative;
 display: grid;
 grid-template-columns: 280px 1fr;
 gap: 32px;
 align-items: center;
 padding: 28px 0;
 border-bottom: 1px solid #eaeaea;
}
.blog-card:first-child { padding-top: 0; }
.blog-card:last-child { border-bottom: 0; }
.blog-card img {
 display: block;
 width: 100%;
 aspect-ratio: 4 / 3;
 object-fit: cover;
 border-radius: 10px;
 transition: opacity .3s ease;
}
.blog-card h2 {
 margin: 0 0 8px;
 font-family: var(--ff-secondary), Georgia, serif;
 font-size: 26px;
 font-weight: 600;
 line-height: 1.25;
 text-wrap: balance;
}
.blog-card h2 a {
 color: var(--cb-primary-hover);
 text-decoration: none;
 text-underline-offset: 4px;
 text-decoration-thickness: 2px;
}
.blog-card h2 a::after { content: ''; position: absolute; inset: 0; }
.blog-card p { margin: 0; max-width: 62ch; font-size: 16px; line-height: 1.7; color: var(--ct); }
.blog-card:hover h2 a { color: var(--cb-secondary-hover); text-decoration-line: underline; }
.blog-card:hover img { opacity: .85; }
.blog-card h2 a:focus-visible { outline: none; text-decoration-line: underline; }
.blog-card:has(a:focus-visible) { outline: 2px solid var(--cb-primary-hover); outline-offset: 6px; border-radius: 10px; }
@media screen and (max-width: 700px) {
 .blog-index { padding: 32px 0 48px; }
 .blog-card { grid-template-columns: 1fr 96px; gap: 8px 16px; align-items: start; padding: 20px 0; }
 .blog-card img { grid-column: 2; grid-row: 1; aspect-ratio: 1; border-radius: 5px; }
 .blog-card-text { display: contents; }
 .blog-card h2 { grid-column: 1; grid-row: 1; font-size: 21px; }
 .blog-card p { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
 .blog-card img { transition: none; }
}

/* Free estimate callout (partials/estimate-cta.njk) */
.estimate-cta { padding: 56px 0; text-align: center; }
.estimate-cta.BG-Dark .BG-Color-Transparent h2 { color: #fff; margin-bottom: 12px; }
.estimate-cta p { max-width: 640px; margin: 0 auto 24px; font-size: 17px; }
.estimate-cta p:last-child { margin-bottom: 0; }
.estimate-cta .Button { width: auto; display: inline-flex; margin: 0; }
.estimate-cta .Button a { text-decoration: none; }
.estimate-cta .Button a:hover { background: #f3efe6 !important; }