/* Phoenix Local SEO: styles for dynamic parts inside the Elementor templates.
   Uses the kit's design tokens (--color-*, --font-*) so it matches the site. */

.phx-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--color-text-invert-muted); }
.phx-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .6; }
.phx-crumbs a { color: var(--color-text-invert-muted); text-decoration: none; }
.phx-crumbs a:hover, .phx-crumbs a:focus-visible { color: var(--color-gold); text-decoration: underline; }
.phx-crumbs [aria-current] { color: var(--color-text-invert); }

.phx-prose { color: var(--color-text); }
.phx-prose > :first-child { margin-top: 0; }
.phx-prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 32px; letter-spacing: .06em; line-height: 1.1; text-transform: uppercase; color: var(--color-text); margin: 40px 0 12px; }
.phx-prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: .06em; line-height: 1.15; text-transform: uppercase; color: var(--color-text); margin: 28px 0 8px; }
.phx-prose p { margin: 0 0 16px; }
.phx-prose ul, .phx-prose ol { margin: 0 0 16px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.phx-prose ul li { position: relative; padding-left: 19px; }
.phx-prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 7px; height: 7px; border-radius: 999px; background: var(--color-ember); }
.phx-prose ol { counter-reset: phx; }
.phx-prose ol li { counter-increment: phx; position: relative; padding-left: 44px; min-height: 32px; }
.phx-prose ol li::before { content: counter(phx); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 999px; background: var(--color-ember); color: var(--color-white); font-family: var(--font-display); font-weight: 600; display: flex; align-items: center; justify-content: center; }
.phx-prose a, .phx-more { color: var(--color-ember); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.phx-prose a:hover, .phx-more:hover { color: var(--color-ember-deep); }
.phx-more { display: inline-block; margin-top: 4px; font-size: 14px; font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; }

.phx-gallery { display: grid; gap: 16px; }
.phx-media { margin: 0; }
.phx-gallery .phx-media img, .phx-gallery .phx-media video { display: block; width: 100%; height: 280px; object-fit: cover; border-radius: 10px; background: var(--color-ink); }

.phx-map { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 10px; overflow: hidden; border: 1px solid var(--color-field-line); box-shadow: 0 4px 24px 0 var(--color-shadow); background: var(--color-cream-soft); }
.phx-map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.phx-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.phx-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--color-field-line); background: var(--color-white); color: var(--color-text); font-family: var(--font-display); font-weight: 500; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; text-decoration: none; transition: all 180ms; }
.phx-chip:hover, .phx-chip:focus-visible { border-color: var(--color-ember); color: var(--color-ember); }
.phx-chip.is-current { background: var(--color-ember); border-color: var(--color-ember); color: var(--color-white); }

.phx-cards { display: flex; flex-wrap: wrap; gap: 24px; }
.phx-card { flex: 1 1 300px; display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; border: 1px solid var(--color-field-line); background: var(--color-white); box-shadow: 0 4px 24px 0 var(--color-shadow); color: var(--color-text); text-decoration: none; transition: transform 180ms, box-shadow 180ms; }
.phx-card:hover, .phx-card:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 32px 0 var(--color-shadow-strong); color: var(--color-text); }
.phx-card .phx-card-photo { width: 100%; height: 220px; object-fit: cover; display: block; }
.phx-card-body { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.phx-card-title { font-family: var(--font-display); font-weight: 600; font-size: 24px; letter-spacing: .06em; line-height: 1.05; text-transform: uppercase; }
.phx-card-text { font-size: 14px; color: var(--color-text-muted); }
.phx-card-more { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-ember); }

.phx-faqs { display: flex; flex-direction: column; gap: 12px; max-width: 860px; }
.phx-faq { border: 1px solid var(--color-field-line); border-radius: 10px; background: var(--color-white); }
.phx-faq summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 24px; position: relative; }
.phx-faq summary::-webkit-details-marker { display: none; }
.phx-faq summary::after { content: "+"; position: absolute; right: 24px; top: 50%; transform: translateY(-50%); font-family: var(--font-display); font-size: 24px; color: var(--color-ember); }
.phx-faq[open] summary::after { content: "\2212"; }
.phx-faq summary:focus-visible { outline: 2px solid var(--color-ember); outline-offset: 2px; border-radius: 10px; }
.phx-faq h3 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: .06em; line-height: 1.25; text-transform: uppercase; color: var(--color-text); }
.phx-faq p { margin: 0; padding: 0 24px 20px; color: var(--color-text-muted); }

.phx-form-card { padding: 32px; border-radius: 10px; background: var(--color-white); border: 1px solid var(--color-field-line); box-shadow: 0 4px 24px 0 var(--color-shadow); }

.phx-stack { display: flex; flex-direction: column; gap: 24px; }

@media (min-width: 1025px) {
	.phx-sticky { position: sticky; top: 24px; }
}
@media (max-width: 767px) {
	.phx-prose h2 { font-size: 26px; }
	.phx-gallery .phx-media img, .phx-gallery .phx-media video { height: 220px; }
	.phx-form-card { padding: 20px; }
	.phx-chip { padding: 0 16px; }
}

/* Desktop dropdowns (Services, Service Areas): dark panel to match the header. Mobile keeps Astra's accordion styles. */
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu { background: var(--color-ink-soft); border-top: 2px solid var(--color-ember); box-shadow: 0 12px 32px 0 var(--color-shadow-strong); }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link { color: var(--color-text-invert); border-bottom: 1px solid var(--color-ink-line); padding-top: 12px; padding-bottom: 12px; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:last-child > .menu-link { border-bottom: 0; }
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item:hover > .menu-link,
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .menu-item > .menu-link:focus-visible,
.ast-desktop .ast-builder-menu-1 .main-header-menu .sub-menu .current-menu-item > .menu-link { color: var(--color-gold); background: var(--color-ink); }
/* Keyboard: open the dropdown while focus is on the parent link or inside it. */
.ast-desktop .ast-builder-menu-1 .main-header-menu .menu-item-has-children:focus-within > .sub-menu { left: 0; right: auto; visibility: visible; opacity: 1; }
/* The extra "Service Areas" item: below 1200px Astra switches to the mobile menu (Customizer breakpoint);
   between 1200 and 1365px tighten menu spacing so the header button keeps its one-line pill shape. */
.ast-header-button-1 .ast-custom-button { white-space: nowrap; }
@media (min-width: 1200px) and (max-width: 1365px) {
	.ast-desktop .ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link { padding-left: 11px; padding-right: 11px; }
}
/* Pair with the astra_header_break_point filter (1199px): Astra's JS sets this body class, its CSS still uses 921px. */
.ast-header-break-point #ast-desktop-header { display: none; }
.ast-header-break-point #ast-mobile-header { display: block; }