/**
 * Beacon — theme styles. Mobile-first, conversion-first, WCAG 2.1 AA.
 * Component classes only; global tokens live in theme.json.
 */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
:where(body) { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
/* Cap prose line-length on text blocks, NOT on the post-content container —
   capping the container strangles full-bleed sections placed inside a page. */
:where(.beacon-prose) { max-width: 70ch; }
:where(.wp-block-post-content) > :where(p, h2, h3, h4, ul, ol, blockquote) { max-width: 70ch; }

a { text-underline-offset: 0.15em; }
:where(a):focus-visible,
:where(button, .wp-element-button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--brand);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Buttons: comfortable tap targets everywhere (>=48px tall). */
.wp-element-button, .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s ease, transform .18s cubic-bezier(.22,1,.36,1), box-shadow .18s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 2px solid var(--wp--preset--color--line-strong); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--brand); background: transparent; }
.beacon-btn-lg .wp-block-button__link { font-size: 1.15rem; padding: 1rem 1.6rem; border-radius: 12px; }
/* On-dark outline button — beat the is-style-outline base rule's dark text. */
.wp-block-button.is-style-outline.beacon-btn-onbrand .wp-block-button__link,
.beacon-btn-onbrand .wp-block-button__link { border-color: rgba(255,255,255,.55); color: #fff; }
.wp-block-button.is-style-outline.beacon-btn-onbrand .wp-block-button__link:hover,
.beacon-btn-onbrand .wp-block-button__link:hover { border-color: #fff; color: #fff; background: rgba(255,255,255,.12); }

/* ---------- Header ---------- */
.beacon-topbar { font-size: .9rem; }
.beacon-topbar a { color: inherit; text-decoration: none; }
.beacon-topbar a:hover { text-decoration: underline; }
.beacon-brand a { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.35rem; letter-spacing: -0.02em; color: var(--wp--preset--color--contrast); text-decoration: none; }
.beacon-nav { border-bottom: 1px solid var(--wp--preset--color--line); position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px); }
/* Align header content (full-bleed bg, inset content) with the wide body
   content at every width — the bg stays edge-to-edge, the content lines up
   with the hero/sections. */
.beacon-topbar, .beacon-nav { padding-inline: max(clamp(1.25rem, 5vw, 2.5rem), calc((100% - var(--wp--style--global--wide-size, 1200px)) / 2)); }
/* Sticky nav clears the WordPress admin bar for logged-in users (32px desktop,
   46px ≤782px, and the bar stops being fixed under 600px). */
body.admin-bar .beacon-nav { top: 32px; }
@media (max-width: 782px) { body.admin-bar .beacon-nav { top: 46px; } }
@media (max-width: 600px) { body.admin-bar .beacon-nav { top: 0; } }
.beacon-menu a { color: var(--wp--preset--color--contrast); }
.beacon-menu a:hover { color: var(--wp--preset--color--brand); }
.beacon-nav-cta .beacon-btn-phone .wp-block-button__link { font-variant-numeric: tabular-nums; }

/* Hide the desktop nav phone button on small screens (sticky bar covers it). */
@media (max-width: 900px) {
	.beacon-topbar-hours { display: none; }
	.beacon-nav-cta .beacon-btn-phone { display: none; }
}
@media (max-width: 600px) {
	/* Phones: the hamburger + the sticky Call/Text bar carry the CTAs, so drop
	   the header quote button (WP's layout style needs an override to lose). */
	.beacon-header .beacon-nav-cta { display: none !important; }
}

/* ---------- Hero ---------- */
.beacon-hero { background:
	radial-gradient(60% 60% at 85% 0%, color-mix(in srgb, var(--wp--preset--color--brand) 8%, transparent), transparent 70%),
	radial-gradient(50% 50% at 0% 100%, color-mix(in srgb, var(--wp--preset--color--action) 6%, transparent), transparent 70%); }
.beacon-hero-kicker { display: inline-block; font-weight: 700; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--wp--preset--color--action); background: var(--wp--preset--color--action-soft); padding: .35rem .7rem; border-radius: 999px; margin: 0 0 1rem; }
/* When the kicker itself carries the centered alignment (intro headers, bold
   hero), the pill is inline-block so text-align can't move it — make it a
   fit-content block centered by auto margins. */
.beacon-hero-kicker.has-text-align-center { display: block; width: fit-content; margin-inline: auto; }
.beacon-hero-h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 3.8rem); line-height: 1.03; }
.beacon-hero-sub { max-width: 44ch; }
.beacon-trusttrio { gap: 1.5rem; row-gap: .6rem; }
.beacon-trust { font-size: .95rem; color: var(--wp--preset--color--muted); }
.beacon-trust b { color: var(--wp--preset--color--contrast); }
.beacon-stars { color: var(--wp--preset--color--gold); letter-spacing: 1px; }

/* ---------- Quote form ---------- */
.beacon-form { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 18px; padding: clamp(1.4rem, 3vw, 2rem); box-shadow: 0 30px 60px -35px rgba(16,38,43,.45), 0 2px 8px -4px rgba(16,38,43,.2); }
.beacon-form-title { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.4rem; margin: 0; }
.beacon-form-sub { color: var(--wp--preset--color--muted); margin: .25rem 0 1.1rem; font-size: .95rem; }
.beacon-field { display: block; margin-bottom: .8rem; }
.beacon-field > span { display: block; font-size: .82rem; font-weight: 600; color: var(--wp--preset--color--muted); margin-bottom: .3rem; }
.beacon-field input, .beacon-field textarea { width: 100%; padding: .8rem .9rem; font-size: 1.0625rem; border: 1.5px solid var(--wp--preset--color--line-strong); border-radius: 10px; background: var(--wp--preset--color--panel); color: var(--wp--preset--color--contrast); transition: border-color .15s, background .15s; }
.beacon-field input:focus, .beacon-field textarea:focus { border-color: var(--wp--preset--color--brand); background: #fff; outline: 3px solid color-mix(in srgb, var(--wp--preset--color--brand) 45%, transparent); outline-offset: 1px; }
.beacon-field-row { display: grid; grid-template-columns: 1fr 100px; gap: .8rem; }
.beacon-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.beacon-form-submit { width: 100%; min-height: 52px; margin-top: .3rem; border: 0; border-radius: 12px; background: var(--wp--preset--color--action); color: #fff; font-family: var(--wp--preset--font-family--body); font-weight: 700; font-size: 1.1rem; cursor: pointer; transition: background-color .18s, transform .18s cubic-bezier(.22,1,.36,1); }
.beacon-form-submit:hover { background: var(--wp--preset--color--action-press); transform: translateY(-1px); }
.beacon-form-fine { font-size: .78rem; color: var(--wp--preset--color--muted); margin: .8rem 0 0; text-align: center; }

/* Lead status flags (?lead=ok / error). */
.beacon-lead-flag { max-width: 720px; margin: 1rem auto 0; padding: .9rem 1.1rem; border-radius: 12px; text-align: center; font-weight: 600; }
.beacon-lead-flag.is-ok { background: color-mix(in srgb, var(--wp--preset--color--ok) 14%, #fff); color: #0c5c38; }
.beacon-lead-flag.is-error { background: var(--wp--preset--color--action-soft); color: var(--wp--preset--color--action-press); }

/* ---------- Cards / sections ---------- */
.beacon-card { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; transition: transform .2s cubic-bezier(.22,1,.36,1), box-shadow .2s ease, border-color .2s; }
.beacon-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -28px rgba(16,38,43,.4); border-color: var(--wp--preset--color--line-strong); }
.beacon-card-link a { color: var(--wp--preset--color--action); font-weight: 600; text-decoration: none; }
.beacon-card-link a:hover { text-decoration: underline; }

.beacon-why-item .beacon-check { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: color-mix(in srgb, var(--wp--preset--color--brand) 12%, #fff); color: var(--wp--preset--color--brand); margin-bottom: .7rem; }
.beacon-why-item h3 { margin: 0 0 .3rem; }

.beacon-step { position: relative; padding-top: .5rem; text-align: center; }
.beacon-step-num { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wp--preset--color--action); color: #fff; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.3rem; margin-bottom: .8rem; }

.beacon-review { background: #fff; border: 1px solid var(--wp--preset--color--line); border-radius: 16px; }
.beacon-review .beacon-stars { font-size: 1.05rem; margin: 0 0 .4rem; }
.beacon-review-by { margin: 1rem 0 0; }
.beacon-review-agg { color: var(--wp--preset--color--muted); margin: 0; }
.beacon-review-agg strong { color: var(--wp--preset--color--contrast); }

/* ---------- FAQ (native details) ---------- */
.beacon-faq-item { border: 1px solid var(--wp--preset--color--line); border-radius: 12px; background: #fff; margin-bottom: .6rem; overflow: hidden; }
.beacon-faq-q { cursor: pointer; padding: 1.05rem 1.2rem; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.beacon-faq-q::-webkit-details-marker { display: none; }
.beacon-faq-q::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--brand); transition: transform .2s; }
.beacon-faq-item[open] .beacon-faq-q::after { transform: rotate(45deg); }
.beacon-faq-a { padding: 0 1.2rem 1.15rem; }
.beacon-faq-a p { margin: 0; color: var(--wp--preset--color--muted); }

/* ---------- Areas ---------- */
.beacon-area { gap: .55rem; padding: .85rem 1rem; border: 1px solid var(--wp--preset--color--line); border-radius: 12px; }
.beacon-area-pin { color: var(--wp--preset--color--brand); display: inline-flex; }

/* ---------- Contact ---------- */
.beacon-contact-phone a { color: var(--wp--preset--color--action); font-family: var(--wp--preset--font-family--display); font-weight: 600; text-decoration: none; }

/* ---------- Footer ---------- */
.beacon-footer a { color: var(--wp--preset--color--on-dark); text-decoration: none; opacity: .88; }
.beacon-footer a:hover { opacity: 1; text-decoration: underline; }
.beacon-footer .beacon-brand a { color: var(--wp--preset--color--on-dark); }
.beacon-foot-h { text-transform: uppercase; letter-spacing: .06em; opacity: .7; margin-bottom: .6rem; }
.beacon-foot-list { list-style: none; margin: 0; padding: 0; line-height: 2; }
.beacon-copyright { opacity: .6; }

/* ---------- Sticky mobile call bar ---------- */
.beacon-callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: none; grid-template-columns: 1fr auto; gap: 1px; background: var(--wp--preset--color--line-strong); box-shadow: 0 -6px 24px -10px rgba(16,38,43,.35); }
.beacon-callbar a { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 60px; text-decoration: none; font-weight: 700; font-size: 1.05rem; }
.beacon-callbar-call { background: var(--wp--preset--color--action); color: #fff; }
.beacon-callbar-text { background: var(--wp--preset--color--surface-dark); color: #fff; padding: 0 1.3rem; }
@media (max-width: 767px) {
	.beacon-callbar { display: grid; }
	body { padding-bottom: 60px; } /* reserve space → CLS = 0 */
	/* Keep scrolled-to / anchored elements clear of the fixed bar so nothing is
	   left obscured beneath it. */
	html { scroll-padding-bottom: 76px; }
}

/* ---------- Motion ---------- */
.beacon-callbar { animation: beacon-rise .4s cubic-bezier(.22,1,.36,1) both; }
@keyframes beacon-rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.beacon-callbar { animation: none; }
}

/* ============================================================
   Polish pass (v0.1.1) — spacing, alignment, mobile tightening
   ============================================================ */

/* No stray gaps between the top-level header / main / footer bands — each
   provides its own padding, so the full-bleed colour sections meet flush. */
.wp-site-blocks > * + * { margin-block-start: 0 !important; }

/* Anchor jumps (e.g. #quote) clear the sticky header. */
:where(section, main, [id]) { scroll-margin-top: 96px; }
#quote { scroll-margin-top: 110px; }

/* Cards in a grid: equal height + push the "Call →" link to the bottom so
   every card's CTA lines up. */
.beacon-card { display: flex; flex-direction: column; height: 100%; }
.beacon-card-link { margin-top: auto; padding-top: .6rem; margin-bottom: 0; }
.beacon-why-item, .beacon-step, .beacon-review { height: 100%; }
.beacon-review { display: flex; flex-direction: column; }
.beacon-review-by { margin-top: auto; }

/* Centered section intros shouldn't stretch the full 1200px. */
.beacon-lead { max-width: 54ch; margin-inline: auto; }

/* Header: let the nav breathe and wrap gracefully before the mobile overlay. */
.beacon-nav { gap: 1rem; }
.beacon-brand a { display: inline-block; max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.beacon-menu { gap: .3rem 1.35rem; }
@media (max-width: 1100px) { .beacon-topbar-hours { display: none; } }

/* Hero: tidy vertical rhythm + full-width tap targets on phones. */
.beacon-hero-cols { align-items: start; }
.beacon-hero-cols > .wp-block-column:last-child { align-self: center; }
@media (max-width: 600px) {
	.beacon-trusttrio { gap: .5rem; }
	.beacon-trust { font-size: .9rem; }
}
@media (max-width: 767px) {
	/* The hero Call/Text buttons duplicate the always-visible sticky bar (which
	   also overlaps them), so drop them on mobile — the form is the hero CTA.
	   !important beats WP's .wp-block-buttons.is-layout-flex display. */
	.beacon-hero .beacon-hero-cta,
	.beacon-hero-centered .beacon-hero-cta,
	.beacon-hero-photo .beacon-hero-cta { display: none !important; }
	/* Inline tap-to-call buttons in body content duplicate the sticky call bar on
	   mobile (and can land beneath it); hide them there — the bar carries Call. */
	.beacon-hide-sm { display: none !important; }
}
@media (max-width: 782px) {
	/* Extra breathing room once the hero form drops below the copy. */
	.beacon-hero-cols { row-gap: var(--wp--preset--spacing--40); }
}

/* Footer columns don't crowd when they stack. */
@media (max-width: 781px) { .beacon-footer-cols { gap: 2rem; } }

/* Reviews header (title + rating) wraps with air on small screens. */
@media (max-width: 640px) { .beacon-review-agg { margin-top: .4rem; } }

/* Tighten the gap between a centered section heading and its intro line. */
.beacon-hero + *, .wp-block-group > h2.has-text-align-center { margin-top: 0; }

/* Inline form validation (replaces the native bubble). */
.beacon-field input.is-invalid, .beacon-field textarea.is-invalid { border-color: var(--wp--preset--color--action); background: color-mix(in srgb, var(--wp--preset--color--action-soft) 60%, #fff); }
.beacon-field-err { display: block; margin-top: .3rem; color: var(--wp--preset--color--action-press); font-size: .8rem; font-weight: 600; }

/* ============================================================
   Polish-gate fixes (v0.1.4) — from the rendered audit
   ============================================================ */

/* Skip link: off-screen (not clipped text), visible on focus. Uses !important
   to beat core's !important screen-reader clip. */
a.skip-link, #wp-skip-link { position: absolute !important; left: -9999px !important; top: auto !important; width: auto !important; height: auto !important; clip: auto !important; clip-path: none !important; }
a.skip-link:focus, #wp-skip-link:focus { position: fixed !important; left: 1rem !important; top: 1rem !important; z-index: 100000; padding: .7rem 1.1rem; background: var(--wp--preset--color--contrast); color: #fff; border-radius: 10px; font-weight: 700; text-decoration: none; }

/* Contrast: darker kicker text on the soft pill; solid buttons keep white text
   even inside dark sections; outline button on the brand CTA is white. */
.beacon-hero-kicker { color: var(--wp--preset--color--action-press); }
.wp-block-button:not(.is-style-outline) .wp-block-button__link { color: #fff; }
.beacon-cta .wp-block-button.is-style-outline .wp-block-button__link { color: #fff; border-color: rgba(255,255,255,.6); }

/* Touch targets (≥44px comfortable minimum). */
.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.beacon-brand a { min-height: 44px; display: inline-flex; align-items: center; }
.beacon-card-link a { display: inline-flex; align-items: center; min-height: 44px; }

/* Footer nav links: comfortable tap height on mobile. */
.beacon-foot-list a { display: inline-flex; align-items: center; min-height: 44px; }

/* Exact-column grids: fill the wide content so a fixed set of items reads as a
   centered group, instead of WP's auto-fill leaving an empty trailing column. */
.beacon-3up, .beacon-2up, .beacon-4up { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
/* The grid gap owns spacing; cancel WP's flow block-gap margin that would
   otherwise push every item but the first down inside its own grid cell. */
.beacon-3up > *, .beacon-2up > *, .beacon-4up > * { margin-block-start: 0; margin-block-end: 0; }
.beacon-3up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.beacon-2up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.beacon-4up { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) {
	.beacon-3up, .beacon-4up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) { .beacon-3up, .beacon-2up { grid-template-columns: 1fr; } }

/* ---------- Stats band ---------- */
.beacon-stat { text-align: center; }
.beacon-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem); line-height: 1; color: var(--wp--preset--color--brand); margin: 0 0 .35rem; letter-spacing: -0.02em; }

/* ---------- Before/after gallery ---------- */
.beacon-gallery-tile { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; display: flex; align-items: flex-end; border: 1px solid var(--wp--preset--color--line); background:
	linear-gradient(135deg, color-mix(in srgb, var(--wp--preset--color--brand) 14%, var(--wp--preset--color--panel)), var(--wp--preset--color--panel)); }
.beacon-gallery-tile::after { content: ""; position: absolute; inset: 0; background:
	repeating-linear-gradient(45deg, transparent 0 22px, color-mix(in srgb, var(--wp--preset--color--ink) 4%, transparent) 22px 44px); }
.beacon-gallery-tile span { position: relative; z-index: 1; margin: .8rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 700; letter-spacing: .02em; background: rgba(255,255,255,.92); color: var(--wp--preset--color--ink); box-shadow: 0 2px 10px -4px rgba(16,38,43,.5); }

/* ---------- Hero: bold centered (dark) variation ---------- */
.beacon-hero-centered { background:
	radial-gradient(75% 95% at 50% -5%, color-mix(in srgb, var(--wp--preset--color--brand) 32%, transparent), transparent 62%),
	radial-gradient(60% 70% at 100% 100%, color-mix(in srgb, var(--wp--preset--color--action) 16%, transparent), transparent 60%),
	var(--wp--preset--color--surface-dark); }
.beacon-hero-centered .beacon-hero-h1 { max-width: 18ch; margin-inline: auto; }
.beacon-hero-centered .beacon-hero-sub-center { max-width: 52ch; margin-inline: auto; }
.beacon-hero-centered .beacon-trusttrio-center { justify-content: center; }
.beacon-hero-centered .beacon-trust { color: #b9c7c4; }
.beacon-hero-centered .beacon-trust b { color: #fff; }

/* ---------- Hero: photo background variation ---------- */
.beacon-hero-photo { position: relative; background:
	linear-gradient(180deg, rgba(16,38,43,.66), rgba(16,38,43,.80)),
	var(--beacon-hero-img) center / cover no-repeat;
	background-color: var(--wp--preset--color--surface-dark); }
.beacon-hero-h1-photo { color: #fff; max-width: 20ch; margin-inline: auto; }
.beacon-hero-sub-photo { color: #e7eeec; max-width: 54ch; margin-inline: auto; }
.beacon-hero-photo .beacon-trusttrio-photo .beacon-trust { color: #cdd9d6; }
.beacon-hero-photo .beacon-trusttrio-photo .beacon-trust b { color: #fff; }

/* ---------- Gallery: real photos ---------- */
.beacon-gallery-img { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--panel); margin: 0; }
.beacon-gallery-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.beacon-gallery-img:hover img { transform: scale(1.04); }

/* Photo hero — split (headline + form) variant: left-align the copy. */
.beacon-hero-photo-split .beacon-hero-h1-photo { margin-inline: 0; max-width: 16ch; }
.beacon-hero-photo-split .beacon-hero-sub-photo { margin-inline: 0; max-width: 46ch; }
.beacon-hero-photo-split .beacon-trusttrio-photo { justify-content: flex-start; }