/* Hands On Deck — conformance fixes, appended per theme version. Do not rewrite earlier blocks. */

/* 1.0.1 — conformance round 1 */
/* Dark bands: white H2 base text (the generic h2.hod-h2 rule out-ranked the band rule). */
.hod .hod-services .hod-h2, .hod .hod-why .hod-h2, .hod .hod-areas .hod-h2, .hod .hod-estimate .hod-h2 { color: #fff; }
/* Only the hero H1 and the services H2 balance their lines in the frame. */
.hod .hod-h2 { text-wrap: wrap; }
.hod .hod-services .hod-h2 { text-wrap: balance; }
/* Estimate form: chips sit in a row, no required asterisks (the frame shows none). */
.hod-est-form .gfield--type-radio .gfield_radio { flex-direction: row !important; grid-template-columns: none !important; }
.hod-est-form .gfield_required { display: none !important; }
.hod-est-form .gform_footer .gform_button { text-transform: uppercase !important; }
/* Photo upload: hex "+" with "Add photos" (the label opens the picker), helper line, small select link. */
.hod-est-form .gfield--type-fileupload { position: relative; padding-left: 60px !important; min-height: 40px; }
.hod-est-form .gfield--type-fileupload .gfield_label { display: block !important; margin: 0 0 2px !important; font: 500 15px/1.3 Jost, sans-serif !important; letter-spacing: 0 !important; text-transform: none !important; color: var(--navy) !important; cursor: pointer; }
.hod-est-form .gfield--type-fileupload .gfield_label::before { content: "+"; position: absolute; left: 0; top: 0; width: 46px; height: 40px; background: var(--navy); color: var(--cyan); clip-path: var(--hex); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; }
.hod-est-form .gform_drop_area { display: flex !important; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; }
.hod-est-form .gform_drop_area::before { content: none !important; }
.hod-est-form .gform_drop_area .gform_drop_instructions { display: inline !important; font-size: 0; }
.hod-est-form .gform_drop_area .gform_drop_instructions::before { content: "Photos help us give a more useful first answer."; font-size: 13px; color: #4C5E70; }
.hod-est-form .gform_drop_area .gform_button_select_files { grid-column: auto; padding: 0 !important; font: 500 13px/1.3 Jost, sans-serif !important; color: var(--blue) !important; text-decoration: underline; text-underline-offset: 3px; }
.hod-est-form .gform_drop_area .gform_button_select_files::before, .hod-est-form .gform_drop_area .gform_button_select_files svg { display: none !important; }
.hod-est-form .gfield--type-fileupload .gfield_description { margin: 4px 0 0 !important; font-size: 12px !important; color: var(--muted) !important; }

/* 1.0.2 — conformance round 2 */
/* Captions and the map label sit above their photo/iframe; keep them hit-testable (clicks still bubble to the tile). */
.hod .hod-gal-tile figcaption, .hod-foot-map-label { pointer-events: auto; }
.hod-est-form .gform_drop_area, .hod-est-form .gform_fileupload_multifile { box-shadow: none !important; outline: 0 !important; border: 0 !important; }
/* GF orbital out-ranks the checked-chip state. */
.hod-est-form .gfield--type-radio input:checked + label { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; }

/* 1.0.4 — accessibility: the frame's #1F8FD0 is ~3:1 on light bands; small text needs 4.5:1.
   Large H2 accents keep #1F8FD0 (3:1 large-text rule). */
.hod { --blue-text: #1A6FA6; }
.hod-eyebrow:not(.hod-eyebrow--dark), .hod-rule-label, .hod-blog-tag, .hod-blog-tag a, .hod-steps-note a, .hod-faq-item summary::before { color: var(--blue-text); }
.hod-swfl-copy .hod-eyebrow, .hod-steps .hod-eyebrow { color: var(--blue-text); }
/* the How It Works band's hex pattern darkens the backdrop under the dealership link */
.hod-steps-note a { color: #155A88; }

/* 1.0.6 — conformance round 3: per-section H2 sizes lost to the generic h2.hod-h2 rule */
.hod .hod-estimate h2.hod-est-title { font-weight: 700; font-size: clamp(52px, 7.4vw, 112px); line-height: .86; }
.hod .hod-ya h2.hod-ya-title { font-size: clamp(40px, 4.6vw, 68px); }
.hod .hod-why h2.hod-h2, .hod .hod-swfl h2.hod-h2, .hod .hod-steps h2.hod-h2 { font-weight: 700; line-height: .92; }
.hod-est-form input::placeholder, .hod-est-form textarea::placeholder { font-size: 17px; }

/* 1.0.7 — owner request Oct 19: a slimmer sticky header once the page scrolls (frame was 120px / 106px logo) */
.hod-is-scrolled .hod-header-row { height: 84px; }
.hod-is-scrolled .hod-brand img { height: 68px; }
.hod-inner .hod-page-content { padding-top: 124px; }
@media (max-width: 1023px) {
	.hod-is-scrolled .hod-header-row { height: 72px; }
	.hod-is-scrolled .hod-brand img { height: 58px; }
	.hod-inner .hod-page-content { padding-top: 112px; }
}
.hod-is-scrolled .hod-header-cta { height: 44px; }
.hod-is-scrolled .hod-menu-btn { height: 42px; }

/* 1.0.8 — client feedback Oct 20: new logo, wash plan sign-up, county labels on service areas */
/* The new badge (594x437, trimmed) is wider than the old square logo-400.png; these heights keep the
   same visible footprint as the old badge (about 0.75 of the old box heights). */
.hod-brand img { height: 104px; }
.hod-is-scrolled .hod-brand img, .hod-inner .hod-brand img { height: 80px; }
.hod-m-logo img { height: 54px; }
@media (max-width: 1023px) {
	.hod-brand img { height: 72px; }
	.hod-is-scrolled .hod-brand img, .hod-inner .hod-brand img { height: 62px; }
}
.hod-is-scrolled .hod-brand img { height: 64px; }
@media (max-width: 1023px) { .hod-is-scrolled .hod-brand img { height: 52px; } }

.hod-wash { background: #fff; padding: var(--sec) 0; scroll-margin-top: 90px; }
.hod-wash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px 96px; align-items: start; }
.hod-wash-copy { display: flex; flex-direction: column; gap: 28px; }
.hod .hod-wash h2.hod-wash-title { font-weight: 700; font-size: clamp(40px, 4.6vw, 68px); line-height: .92; }
.hod-wash-lead { font-size: 17px; line-height: 1.65; color: var(--body); max-width: 540px; text-wrap: pretty; }
.hod-wash-lead a, .hod-wash-note a { color: #155A88; text-decoration: underline; text-underline-offset: 3px; }
.hod-wash-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hod-wash-card { display: flex; flex-direction: column; gap: 12px; padding: 28px 24px; background: var(--mist); border: 1px solid var(--line); border-radius: 10px; }
.hod-wash-card .hod-h3 { color: var(--navy); }
.hod-wash-tag { display: flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-text); }
.hod-wash-tag::before { content: ""; width: 10px; height: 9px; background: var(--cyan); clip-path: var(--hex); flex-shrink: 0; }
.hod-wash-text { font-size: 15px; line-height: 1.55; color: var(--body); }
.hod-wash-note { font-size: 15px; color: var(--muted); }
.hod-wash-form { border: 1px solid var(--line-2); box-shadow: 0 30px 60px -36px rgba(13, 38, 63, .45); }
@media (max-width: 1023px) { .hod-wash-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .hod-wash-cards { grid-template-columns: minmax(0, 1fr); } }

.hod-area-county { flex-basis: 100%; font-family: Jost, sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .16em; line-height: 1.2; color: var(--sky); }
ul.hod-area-list a { padding: 18px 0; }

/* 1.1.0 — internal pages (Claude Design, Oct 26 2026). Page bands come from hod-pages.css; these are the homepage
   components the pages reuse (FAQ accordion, Gravity Forms card) set to the HodFaq / HodForm frame values. */
.hod-faq--inner { padding: clamp(72px, 9.7vw, 144px) 0; }
.hod-faq--white { background: #fff; }
.hod .hod-faq--inner h2.hod-h2 { font-size: clamp(40px, 4.6vw, 68px); }
.hod-faq--inner .hod-faq-intro { top: 120px; }
@media (max-width: 1100px) { .hod-faq--inner .hod-faq-grid { grid-template-columns: minmax(0, 1fr); } .hod-faq--inner .hod-faq-intro { position: static; } }
.hod-est-form--dc { padding: clamp(32px, 3.2vw, 48px) clamp(22px, 3vw, 44px); box-shadow: 0 40px 90px -50px rgba(14, 37, 64, .55); }
.hod-dc #estimate, .hod-dc #wash-plan, .hod-dc #trailer-rentals { scroll-margin-top: 90px; }

/* 1.1.3 — single post template (Blog Post frame). The frame is a spec sheet; these are its labelled values:
   lead paragraph Jost 300 24px, H2 Barlow Condensed 600 44px, body Jost 17px / 1.7 at 68ch, hex-marker lists. */
.hod-single .hod-post-excerpt p { margin: 0; }
.hod-single .hod-post-date { color: inherit; }
.hod-single .hod-post-crumb a { color: inherit; text-decoration: none; }
.hod-single .hod-post-crumb a:hover { color: #fff; }
.hod-prose { display: flex; flex-direction: column; gap: 22px; color: var(--body); font-size: 17px; line-height: 1.7; }
.hod-prose > * { margin: 0 !important; max-width: 68ch; }
.hod-prose > p:first-child { font-weight: 300; font-size: clamp(20px, 1.75vw, 24px); line-height: 1.5; color: var(--navy); }
.hod-prose h2 { margin-top: 20px !important; font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.2vw, 44px); line-height: .95; text-transform: uppercase; color: var(--navy); }
.hod-prose h3 { margin-top: 12px !important; font-family: var(--display); font-weight: 700; font-size: 26px; line-height: 1; text-transform: uppercase; color: var(--navy); }
.hod-prose a { color: #155A88; text-decoration: underline; text-decoration-color: #9FD4F5; text-underline-offset: 3px; }
.hod-prose a:hover { color: var(--navy); }
.hod-prose ul { list-style: none; padding: 0; }
.hod-prose ul li { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.hod-prose ul li:last-child { border-bottom: 1px solid var(--line); }
.hod-prose ul li::before { content: ""; width: 10px; height: 9px; flex-shrink: 0; background: var(--cyan); clip-path: var(--hex); transform: translateY(-1px); }
.hod-prose ol { padding-left: 1.4em; }
.hod-prose ol li { padding: 6px 0; }
.hod-prose figure, .hod-prose .wp-block-image { max-width: 100%; }
.hod-prose img { display: block; width: 100%; height: auto; border-radius: 0; }
.hod-prose figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }
.hod-prose blockquote { margin: 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--cyan); color: var(--navy); }
.hod-more-posts .wp-block-post-template > li { display: flex; margin: 0; }
.hod-dc-card .hod-post-card-title a { color: inherit; text-decoration: none; }
.hod-dc-card .hod-post-card-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.hod-more-posts .wp-block-post-featured-image { height: 100%; }
.hod-dc .wp-block-post-terms a { color: inherit; text-decoration: none; }
.hod-dc .wp-block-post-terms a:hover { color: var(--navy); }
.hod-single .hod-post-crumb a:hover { color: #fff; }
/* 1.1.9 — Blog page "All Articles" query (48 posts migrated Oct 27 2026). Cards reuse the frame's Start Here card classes
   (generated); these cover the core blocks the frame did not have: excerpt paragraph and pagination (44px targets). */
.hod .hod-blog-all .wp-block-post-excerpt__excerpt { margin: 0; }
.hod .hod-blog-all .wp-block-post-excerpt__more-text { display: none; }
.hod .hod-blog-pagination { margin-top: 32px; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.hod .hod-blog-pagination a, .hod .hod-blog-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: #fff; color: var(--navy); text-decoration: none; }
.hod .hod-blog-pagination .page-numbers.current { background: var(--navy); border-color: var(--navy); color: #fff; }
.hod .hod-blog-pagination a:hover, .hod .hod-blog-pagination a:focus-visible { border-color: #22A6E0; }
.hod .hod-blog-pagination .page-numbers.dots { border: 0; background: none; min-width: 0; padding: 0 4px; }