/*
Theme Name: Parks Painting
Theme URI: https://parkspainting.com
Description: Custom WordPress theme for Parks Painting (Avon, IN). One PHP template per page holding that page's copy, Settings → Site Settings tokens, Settings → Site Forms Gravity Forms slots, theme-owned schema and meta, Highway 126 blog layout.
Version: 3.6.1
Author: The Web Guys
Author URI: https://thewebguys.com
Text Domain: parks-painting
*/

/* ===== Parks Painting v3 overrides (plain CSS; theme.css/utilities.css are the base layer) ===== */
.pp-plain-list, .pp-checklist { list-style: none; margin: 0; padding: 0; }
.pp-checklist li::marker, .pp-plain-list li::marker { content: ''; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; }
.prose-content p a, .prose-content li a, .pp-closing-text a { text-decoration: underline; text-underline-offset: 3px; }
.pp-closing-text a { color: #fff; }
.pp-closing-text a:hover { color: var(--color-orange-light); }
.pp-tel { white-space: nowrap; }
.pp-badge { position: absolute; top: .5rem; left: .5rem; background: rgba(17,29,82,.85); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .5rem; border-radius: 999px; }
.pp-badge--after { background: var(--color-orange); }
.pp-pill { display: inline-block; background: var(--color-cream); color: var(--color-navy); border: 1px solid var(--color-warm-border); border-radius: 999px; padding: .25rem .75rem; font-size: .8rem; font-weight: 600; }
.pp-form-placeholder { border: 2px dashed var(--color-orange); border-radius: 1rem; background: #fff; min-height: 520px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #6B7280; padding: 2rem; }
.pp-form-slot .gform_wrapper { max-width: none; width: 100%; margin: 0; }
.pp-embed iframe { min-height: 600px; }
/* Blog post prose */
.pp-post h2, .pp-post h3 { color: var(--color-navy); margin-top: 2rem; margin-bottom: .75rem; line-height: 1.25; }
.pp-post h2 { font-size: 1.75rem; } .pp-post h3 { font-size: 1.35rem; }
.pp-post p, .pp-post li { font-size: 1.125rem; line-height: 1.75; color: #374151; }
.pp-post p { margin-bottom: 1.25rem; }
.pp-post ul, .pp-post ol { margin: 0 0 1.25rem 1.5rem; } .pp-post ul { list-style: disc; } .pp-post ol { list-style: decimal; }
.pp-post img { border-radius: .75rem; margin: 1.5rem 0; height: auto; }
.pp-post blockquote { border-left: 4px solid var(--color-orange); padding-left: 1rem; color: #4B5563; font-style: italic; margin: 1.5rem 0; }
.pp-pagination .nav-links { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.pp-pagination .page-numbers { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--color-warm-border); color: var(--color-navy); font-weight: 600; font-size: .9rem; }
.pp-pagination .page-numbers.current, .pp-pagination .page-numbers:hover { background: var(--color-orange); color: #fff; border-color: var(--color-orange); }
/* Gravity Forms 2.9 (Orbital) — brand the controls */
.gform_wrapper.gform-theme { --gf-ctrl-btn-bg-color-primary: var(--color-orange); --gf-ctrl-btn-bg-color-hover-primary: var(--color-orange-dark); --gf-ctrl-btn-border-color-primary: var(--color-orange); --gf-ctrl-btn-radius: 999px; --gf-ctrl-label-color-primary: var(--color-navy); --gf-ctrl-border-color: var(--color-warm-border); --gf-ctrl-radius: .75rem; }
.gform_wrapper .gform_footer button, .gform_wrapper .gform_footer input[type=submit] { background: var(--color-orange); color: #fff; border-radius: 999px; padding: .85rem 2rem; font-weight: 700; border: 0; }
/* Mobile call bar only below lg; it sits OUTSIDE the sticky header so it scrolls away (Peyton 2026-09-25) */
@media (min-width: 1024px) { .pp-callbar { display: none; } }
/* Peyton 2026-09-25: no phone banner (navy top bar) on mobile — phone lives in the call bar + content */
@media (max-width: 1023px) { .pp-topbar { display: none; } }
/* Grid cards never overflow at 320px */
.warm-card { min-width: 0; }
img { max-width: 100%; }
/* Utilities used by v3 templates that the hand-written utilities.css lacks */
.h-48 { height: 12rem; } .h-56 { height: 14rem; } .w-60 { width: 15rem; } .min-w-0 { min-width: 0; }
.h-\[30px\] { height: 30px; } .mb-3 { margin-bottom: .75rem; } .mt-1 { margin-top: .25rem; } .py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.space-y-8 > * + * { margin-top: 2rem; } .text-gray-200 { color: #E5E7EB; } .text-gray-400 { color: #9CA3AF; } .hover\:text-white:hover { color: #fff; }
.border-white\/40 { border-color: rgba(255,255,255,.4); } .normal-case { text-transform: none; } .tracking-normal { letter-spacing: 0; }
@media (min-width: 640px) { .sm\:h-\[40px\] { height: 40px; } }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:py-16 { padding-top: 4rem; padding-bottom: 4rem; } .md\:text-3xl { font-size: 1.875rem; line-height: 2.25rem; } }
/* Card grids: 4-up for the 8 services / 4 areas on large screens */
.pp-grid-4 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .pp-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* v3.0.2: keep portrait photos from towering over their text column */
.pp-fig-img{max-height:480px;object-fit:cover}
.pp-embed iframe{display:block}

/* v3.0.3: CTA buttons inside prose sections must not inherit link styling */
.prose-content .btn-fun,.prose-content .btn-fun:hover{color:#fff;text-decoration:none}

/* ===== v3.1.0 — Feedback Round #1 ===== */
/* Cards are links, never underlined */
.prose-content a.warm-card, .prose-content a.warm-card *, a.warm-card, a.warm-card * { text-decoration: none; }
/* Two stacked images beside long copy */
.pp-stack { display: grid; gap: 1.25rem; }
.pp-stack .pp-fig-img { max-height: 260px; }
/* Why Choose Us: image left, icon cards right */
.pp-why-img .pp-fig-img { max-height: 560px; }
.pp-why-icon { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: .75rem; background: rgba(240,127,26,.12); color: var(--color-orange); }
/* Step process */
.pp-steps { list-style: none; margin: 3rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: step; position: relative; }
@media (min-width: 640px) { .pp-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pp-steps { grid-template-columns: repeat(3, 1fr); } } /* Stage 8: 6 steps = 3×2, no orphan card */
.pp-step { position: relative; background: #fff; border: 1px solid var(--color-warm-border); border-radius: 1rem; padding: 2.5rem 1.25rem 1.25rem; text-align: center; }
.pp-step-num { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%); width: 2.4rem; height: 2.4rem; border-radius: 999px; background: var(--color-orange); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(240,127,26,.35); }
.pp-step p { font-size: .95rem; }
/* FAQ: bigger questions */
.pp-faq-q { font-size: 1.125rem; line-height: 1.5; }
/* FAQ jump pills */
.pp-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.pp-pill--link { text-decoration: none !important; color: var(--color-navy) !important; background: #fff; }
.pp-pill--link:hover { background: var(--color-orange); color: #fff !important; border-color: var(--color-orange); }
/* Gallery cards: photo lives inside the card with breathing room */
.pp-pair .pp-badge { top: .5rem; left: .5rem; }
.pp-lb { cursor: zoom-in; }
.pp-lb img { transition: transform .2s; } .pp-lb:hover img { transform: scale(1.02); }
/* Lightbox */
.pp-lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(17,29,82,.92); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.pp-lightbox[hidden] { display: none; }
.pp-lightbox figure { max-width: min(1100px, 100%); max-height: 100%; margin: 0; text-align: center; }
.pp-lightbox img { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; border-radius: .75rem; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pp-lightbox figcaption { color: #fff; margin-top: .75rem; font-size: .95rem; }
.pp-lightbox-close { position: absolute; top: 1rem; right: 1.25rem; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; cursor: pointer; }
/* Reviews embed can use the full container */
.pp-embed { margin-left: auto; margin-right: auto; }
.pp-hero-sub a { text-decoration: underline; text-underline-offset: 3px; color: #fff; } .pp-hero-sub a:hover { color: var(--color-orange-light); }

/* ===== v3.2.0 — Feedback Round #2 ===== */
/* Header stays solid white (no translucency on scroll) */
.pp-mainbar { background: #fff !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Headings always breathe before the paragraph below them */
.prose-content h2, .pp-closing h2 { margin-bottom: .75rem; }
.prose-content h3, .warm-card h3 { margin-bottom: .5rem; }
.pp-why-card h3 { margin-bottom: .25rem; }
/* H1 above the opening paragraph, centered, paint separator kept */
.pp-page-title { margin-bottom: 1.5rem; }
.pp-page-title h1 { margin: 0; line-height: 1.15; }
.pp-page-title svg { display: block; margin: .75rem auto 0; }
.pp-hero-title { margin: 0; }
/* Closing band: white or cream (never the same as the section before it); footer is navy */
.pp-closing--white { background: #fff; }
.pp-closing .pp-closing-text a { color: var(--color-orange); }
.pp-closing .pp-closing-text a:hover { color: var(--color-orange-dark); }
/* Footer */
.pp-footer-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .pp-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pp-footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.pp-footer { background: var(--color-navy); color: #fff; }
.pp-footer-logo { display: inline-block; background: #fff; border-radius: .75rem; padding: .75rem 1rem; } /* Peyton 2026-09-18: bigger footer logo (h-20) */
.pp-footer-text { color: rgba(255,255,255,.78); }
.pp-footer-link { color: rgba(255,255,255,.82); text-decoration: none; transition: color .15s; }
.pp-footer-link:hover { color: var(--color-orange-light); }
.pp-footer-h3 { font-family: 'Playfair Display', Georgia, serif; font-size: 1.125rem; font-weight: 700; color: #fff; margin: 0 0 1rem; text-decoration: none; }
a.pp-footer-h3 { margin-bottom: .6rem; } a.pp-footer-h3:hover { color: var(--color-orange-light); }
.pp-footer-ctas { display: flex; flex-direction: column; gap: .75rem; }
.pp-footer .btn-fun, .pp-footer .btn-fun:hover { text-decoration: none; }
.pp-footer-bottom { background: var(--color-navy-dark); color: rgba(255,255,255,.7); }
.pp-footer-bottom a { color: rgba(255,255,255,.85); text-decoration: underline; text-underline-offset: 3px; }
.pp-footer-bottom a:hover { color: var(--color-orange-light); }
/* Before/after cards: no caption, image fills the padded card */
.pp-pair .pb-3 { padding-bottom: .75rem; }
/* Lightbox: arrows + thumbnails */
.pp-lightbox { flex-direction: column; gap: .75rem; }
.pp-lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; border-radius: 999px; border: 0; background: rgba(255,255,255,.15); color: #fff; font-size: 1.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pp-lightbox-nav:hover { background: var(--color-orange); }
.pp-lightbox-prev { left: 1rem; } .pp-lightbox-next { right: 1rem; }
.pp-lightbox-thumbs { display: flex; gap: .5rem; overflow-x: auto; max-width: min(1100px, 100%); padding: .25rem; scrollbar-width: none; -ms-overflow-style: none; scroll-behavior: smooth; cursor: grab; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.pp-lightbox-thumbs::-webkit-scrollbar { display: none; }  /* v3.5.21: no scrollbar under the thumbs (Peyton) — strip auto-centers the active photo, wheel + drag + arrows scroll it */
.pp-lightbox-thumbs.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.pp-lightbox-thumbs.is-dragging .pp-lightbox-thumb { pointer-events: none; }
.pp-lightbox-thumb { flex: 0 0 auto; width: 84px; height: 60px; padding: 0; border: 2px solid transparent; border-radius: .5rem; overflow: hidden; background: none; cursor: pointer; opacity: .6; }
.pp-lightbox-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-lightbox-thumb.is-active, .pp-lightbox-thumb:hover { opacity: 1; border-color: var(--color-orange); }
@media (max-width: 640px) { .pp-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.1rem; } .pp-lightbox-prev { left: .4rem; } .pp-lightbox-next { right: .4rem; } .pp-lightbox-thumb { width: 64px; height: 46px; } }

/* ---- v3.3.0 (Feedback Round #3, 2026-09-18) ---- */
/* Body H1 must read larger than the H2s (H2 = text-2xl/3xl) */
.pp-page-title h1 { font-size: 2.5rem; }
@media (min-width: 768px) { .pp-page-title h1 { font-size: 3.25rem; } }

/* ---- v3.4.0 (Feedback Round #4, 2026-09-18): Other Services slider ---- */
.pp-slider { position: relative; }
.pp-slider-track { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: .5rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.pp-slider-track::-webkit-scrollbar { display: none; }
.pp-slide { flex: 0 0 100%; scroll-snap-align: start; }
@media (min-width: 640px) { .pp-slide { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (min-width: 1024px) { .pp-slide { flex-basis: calc((100% - 3rem) / 3); } }
.pp-slider-nav { display: flex; justify-content: center; gap: .75rem; margin-top: 1rem; }
.pp-slider-btn { width: 2.75rem; height: 2.75rem; border-radius: 9999px; border: 2px solid #F07F1A; background: #fff; color: #F07F1A; font-size: 1.125rem; font-weight: 700; cursor: pointer; transition: background .15s, color .15s; }
.pp-slider-btn:hover, .pp-slider-btn:focus-visible { background: #F07F1A; color: #fff; }
.pp-slider-btn[disabled] { opacity: .35; cursor: default; }

/* Stage 8 (2026-09-18): mobile drawer scrolls inside the sticky header; 44px tap targets in the header on touch widths. */
#mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.pp-menu-btn { min-width: 44px; min-height: 44px; }
@media (max-width: 1023px) { .pp-topbar-tel { min-height: 44px; } .bg-navy > .container.py-2 { padding-top: 0; padding-bottom: 0; } }

/* Peyton 2026-09-18: footer "Contact Us" outline button gets a real hover (the old hover:bg-white/10 utility was never compiled). */
.pp-footer-contact { transition: background-color .2s ease, color .2s ease, border-color .2s ease; }
.pp-footer-contact:hover, .pp-footer-contact:focus-visible { background-color: #fff; color: var(--color-navy, #1e2a78); border-color: #fff; }

/* Visually hidden, read by screen readers (mobile Call Now keeps the number for AT only — Peyton 2026-09-25). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Stage 14 v3.6.0 — #26 blog search + category browse, #40 agency credit. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.pp-search, .pp-catform { display: flex; gap: .5rem; }
.pp-search input, .pp-catform-select { flex: 1 1 auto; min-width: 0; border: 1px solid var(--color-warm-border); border-radius: .75rem; padding: .6rem .8rem; font: inherit; font-size: .9rem; color: var(--color-navy); background: #fff; }
.pp-search input:focus, .pp-catform-select:focus { outline: 2px solid var(--color-orange); outline-offset: 1px; }
.pp-search button, .pp-catform-go { flex: 0 0 auto; border: 0; border-radius: .75rem; background: var(--color-navy); color: #fff; padding: 0 .9rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; }
.pp-search button:hover, .pp-catform-go:hover { background: var(--color-orange); }
.pp-credit { margin-top: .5rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; flex-wrap: wrap; color: rgba(255,255,255,.7); }
.pp-credit-mark { display: inline-flex; color: rgba(255,255,255,.85); text-decoration: none; }
.pp-credit-mark svg { height: 14px; width: auto; display: block; }
.pp-credit-mark:hover { color: var(--color-orange-light); }