/*
Theme Name: Masonry Long Beach
Theme URI: https://masonrylongbeach.com
Author: Masonry Long Beach
Author URI: https://masonrylongbeach.com
Description: SEO-optimized FSE block theme for Masonry Long Beach. Generated from temppower-la-theme master template. Editable in the WordPress block editor and Site Editor. Includes auto-created pages, schema.org LocalBusiness markup, Cloudflare Turnstile contact form, and CallRail call tracking.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tpla
Tags: full-site-editing, block-templates, block-patterns, business, services, seo
*/

/* FSE themes use theme.json for styling. This file is required by WordPress
   for the theme header above, plus supplemental CSS that's awkward to express
   in theme.json (sticky nav, hover states, form polish, hero overlay). */

:root {
  --tpla-primary: #8A5A3B;
  --tpla-accent: #C19A7C;
  --tpla-accent-dark: #A6785A;
  --tpla-text: #111827;
  --tpla-slate: #5B6B63;
  --tpla-bg: #FAFCF8;
  --tpla-bg-soft: #F7F0E9;
  --tpla-line: #E6D5C2;
  --tpla-yellow: #F4C24A;
  --tpla-yellow-dark: #DFA825;
  --tpla-shadow: 0 6px 24px rgba(138, 90, 59, 0.10);
  --tpla-shadow-lift: 0 16px 40px rgba(138, 90, 59, 0.16);
}

/* ============================================================
   Sticky site header (the nav stays pinned to the top while scrolling)
   ============================================================ */

/* Ancestors must NOT have overflow restrictions, or sticky breaks.
   Reset any that might come from template-part wrappers. */
html, body, .wp-site-blocks, main.wp-block-group, body > .wp-site-blocks > * {
  overflow: visible !important;
}

/* Both the template-part wrapper and the inner group need sticky.
   WordPress wraps template parts in their own <header> element with the
   class .wp-block-template-part — sticky on the *outer* element is what
   keeps the bar pinned on scroll. */
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part,
.tpla-site-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
}

.tpla-site-header {
  background: var(--tpla-primary) !important;
  color: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  padding: 0 !important;
}

/* Nav row */
.tpla-nav-row {
  align-items: center;
}

/* Brand: logo + site title */
.tpla-brand {
  display: flex !important;
  align-items: center;
  gap: 0.65rem;
}
.tpla-brand__logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
  text-decoration: none;
}
.tpla-brand__logo img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 6px;
}
@media (max-width: 480px) {
  .tpla-brand__logo img { width: 32px; height: 32px; }
}
.tpla-site-header .wp-block-site-title a {
  color: #fff !important;
  text-decoration: none;
}
.tpla-site-header .wp-block-site-title a:hover {
  color: #fff !important;
  text-decoration: none;
  opacity: 0.85;
}

/* Nav links: white with underline hover state */
.tpla-site-header .wp-block-navigation,
.tpla-site-header .wp-block-navigation-item,
.tpla-site-header .wp-block-navigation a,
.tpla-site-header .wp-block-navigation .wp-block-navigation-item__content {
  color: #fff !important;
}
.tpla-site-header .wp-block-navigation a.wp-block-navigation-item__content {
  position: relative;
  padding: 0.4rem 0;
  transition: opacity 0.18s ease;
}
.tpla-site-header .wp-block-navigation a.wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--tpla-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.2s ease;
}
.tpla-site-header .wp-block-navigation a.wp-block-navigation-item__content:hover::after,
.tpla-site-header .wp-block-navigation .current-menu-item > a.wp-block-navigation-item__content::after,
.tpla-site-header .wp-block-navigation .current_page_item > a.wp-block-navigation-item__content::after {
  transform: scaleX(1);
}

/* Submenu styling
   IMPORTANT: no margin-top between the parent item and the submenu — that gap
   triggers a mouseleave on the parent <li> as the cursor crosses it and the
   menu closes before you can click anything. Keep the menu visually offset
   via internal padding instead. */
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background: #fff !important;
  border: 1px solid var(--tpla-line);
  border-radius: 8px;
  box-shadow: var(--tpla-shadow);
  padding: 0.5rem 0;
  margin-top: 0 !important;
  min-width: 240px;
}
/* A transparent bridge above the submenu so the hover area is continuous
   from the parent item down into the submenu's content. The bridge is part
   of the submenu element itself, so it does NOT change the parent <li>'s
   bounding box — that keeps Services + Locations vertically aligned with
   the other nav items. */
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 0;
  right: 0;
  height: 14px;
  background: transparent;
}
/* Normalize the trigger element: the parent of a submenu can render as a
   <button> instead of an <a>, with slightly different default styles. Reset
   those so its baseline matches the regular nav links. */
.tpla-site-header .wp-block-navigation button.wp-block-navigation-item__content,
.tpla-site-header .wp-block-navigation .wp-block-navigation-submenu__toggle {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0.4rem 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  line-height: 1;
}
/* The submenu-indicator chevron should sit on the text baseline, not float. */
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-icon {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.15rem;
}
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container a {
  color: var(--tpla-text) !important;
  padding: 0.6rem 1.1rem;
  font-weight: 500;
  font-size: 0.95rem;
}
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container a:hover {
  background: var(--tpla-bg-soft);
  color: var(--tpla-primary) !important;
}
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container a::after {
  display: none;
}
/* Stop the WP nav from auto-closing the submenu when the cursor briefly
   moves between the trigger and the submenu. We use CSS hover as a fallback
   so the menu stays open as long as either element is hovered. */
.tpla-site-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.tpla-site-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.tpla-site-header .wp-block-navigation .wp-block-navigation__submenu-container:hover {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Phone number in header — yellow CTA */
.tpla-header-phone {
  display: inline-flex;
  align-items: center;
  font-weight: 700;
}
.tpla-header-phone a,
.tpla-site-header .tpla-header-phone a.tpla-phone,
.tpla-site-header .tpla-header-phone a.callrail-phone {
  color: var(--tpla-yellow) !important;
  text-decoration: none;
  padding: 0.5rem 0.95rem;
  border: 1.5px solid var(--tpla-yellow);
  border-radius: 6px;
  font-weight: 700;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  letter-spacing: -0.005em;
}
.tpla-header-phone a:hover,
.tpla-site-header .tpla-header-phone a.tpla-phone:hover,
.tpla-site-header .tpla-header-phone a.callrail-phone:hover {
  background: var(--tpla-yellow) !important;
  color: var(--tpla-primary) !important;
  border-color: var(--tpla-yellow);
  text-decoration: none;
}
.tpla-phone {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.tpla-phone:hover { text-decoration: underline; }

/* Mobile nav button — make it pop on green background */
.tpla-site-header .wp-block-navigation__responsive-container-open svg {
  fill: #fff;
}

/* ── Mobile nav layout fixes ─────────────────────────────────────────
   Goals:
   • Brand + hamburger + yellow phone pill all fit in ONE row on phones.
   • No flex-wrap to a second line (looked broken before).
   • Below 480px, hide the long site-title text and let the logo be the
     brand mark — the title doesn't shrink enough to fit alongside the
     hamburger and the phone CTA, and wrapping is worse than dropping it.
   • Mobile-menu overlay (the fullscreen drawer the hamburger opens) gets
     the brand-primary background + white text it was supposed to have
     all along — the wp:navigation overlayBackgroundColor attr alone
     isn't enough to override WP defaults in every state. */

/* Tighten header height on smaller screens (keep yellow phone — it's the primary CTA) */
@media (max-width: 800px) {
  .tpla-site-header .tpla-nav-row { padding-top: 0.6rem; padding-bottom: 0.6rem; }
  .tpla-header-phone a {
    padding: 0.4rem 0.7rem;
    font-size: 0.9rem;
  }
}

/* Phone-sized layout: everything stays on one row */
@media (max-width: 700px) {
  .tpla-site-header .tpla-nav-row {
    flex-wrap: nowrap !important;
    gap: 0.6rem;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }
  .tpla-brand {
    min-width: 0;          /* allow the title to shrink inside the flex item */
    flex-shrink: 1;
  }
  .tpla-site-header .wp-block-site-title {
    font-size: 0.95rem !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .tpla-header-phone a {
    padding: 0.35rem 0.6rem;
    font-size: 0.85rem;
    border-width: 1px;
    white-space: nowrap;
  }
}

/* Smaller phones: drop the long site title, keep just the logo */
@media (max-width: 480px) {
  .tpla-site-header .wp-block-site-title { display: none !important; }
  .tpla-brand__logo img { width: 36px; height: 36px; }
  .tpla-site-header .tpla-nav-row {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }
  .tpla-header-phone a {
    padding: 0.32rem 0.55rem;
    font-size: 0.82rem;
  }
}

/* Hamburger toggle: white icon, no default WP button chrome */
.tpla-site-header .wp-block-navigation__responsive-container-open {
  color: #fff !important;
  background: transparent !important;
  border: 0;
  padding: 0.4rem;
  cursor: pointer;
}
.tpla-site-header .wp-block-navigation__responsive-container-open:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 4px;
}
.tpla-site-header .wp-block-navigation__responsive-container-open svg {
  fill: #fff;
  width: 24px;
  height: 24px;
}

/* ── Mobile-menu overlay (when hamburger is open) ───────────────────
   The previous rules relied on .is-menu-open as the toggle class, but
   WordPress also applies preset color classes (has-bg-background-color,
   has-text-color) that conflict. These rules win regardless: they target
   BOTH .is-menu-open and .has-modal-open, force background + text color
   inside the overlay, and make sure every list/link is visible.
   Specificity stays high enough that the WP preset classes (1 class
   each) can't override. */

.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open {
  background: var(--tpla-primary) !important;
  background-color: var(--tpla-primary) !important;
  color: #ffffff !important;
  padding: 4rem 1.5rem 2rem !important;
}

/* Force every text node inside the open overlay to white. The "*" covers
   <li>, <span>, <a>, <button>, and any wrappers WP might add later. */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open *,
.wp-block-navigation__responsive-container.has-modal-open,
.wp-block-navigation__responsive-container.has-modal-open * {
  color: #ffffff !important;
}

/* The list inside the overlay — vertical stack, full width. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.25rem !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: 480px;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
}

/* Link / button rendering inside the overlay */
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.has-modal-open a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content {
  display: block !important;
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
  padding: 0.75rem 1rem !important;
  border-radius: 6px;
  background: transparent;
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation__responsive-container.has-modal-open a:hover,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #ffffff !important;
}

/* Submenu (Services / Locations dropdowns) inside the overlay — inline,
   indented, no white-card chrome (that's the desktop dropdown look). */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container {
  position: static !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 0 0.5rem 1rem !important;
  margin: 0 !important;
  min-width: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-container a {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  padding: 0.45rem 0.75rem !important;
  color: rgba(255, 255, 255, 0.88) !important;
}

/* Submenu caret/chevron icon — white */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-icon svg {
  fill: #ffffff !important;
  stroke: #ffffff !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon,
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__submenu-icon {
  background: transparent !important;
  border: 0 !important;
  color: #ffffff !important;
}

/* Close button in the open overlay */
.wp-block-navigation__responsive-container-close {
  color: #ffffff !important;
  background: transparent !important;
  border: 0 !important;
  top: 1rem !important;
  right: 1rem !important;
  padding: 0.4rem !important;
}
.wp-block-navigation__responsive-container-close svg {
  fill: #ffffff !important;
  width: 28px;
  height: 28px;
}

/* ============================================================
   Hero (homepage)
   ============================================================ */

.tpla-hero {
  position: relative;
  isolation: isolate;
  /* Force the hero to span the full viewport width edge-to-edge,
     even when its ancestors are constrained. */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  margin-top: 0 !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}
/* Close the gap between the sticky nav and the hero. WordPress's default
   block-gap + post-content top spacing otherwise leaves a visible strip of
   page-background showing between the header and the first block. */
.wp-site-blocks > main,
main.wp-block-group,
.wp-block-post-content,
.entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.wp-block-post-content > *:first-child,
.entry-content > *:first-child {
  margin-top: 0 !important;
}
/* Dark overlay so white text reads on the photo */
.tpla-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(15, 35, 30, 0.86) 0%, rgba(138, 90, 59, 0.72) 60%, rgba(138, 90, 59, 0.6) 100%);
  z-index: -1;
}
/* Force every text element inside the hero to render light so nothing slips
   through with the theme.json's default near-black body color. */
.tpla-hero,
.tpla-hero p,
.tpla-hero li,
.tpla-hero span,
.tpla-hero a:not(.tpla-form *):not(.wp-block-button__link),
.tpla-hero h1,
.tpla-hero h2,
.tpla-hero h3 {
  color: #fff !important;
}
.tpla-hero h1.tpla-h1 {
  color: #ffffff !important;
  font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  text-wrap: balance;
}
.tpla-hero .tpla-eyebrow {
  color: var(--tpla-yellow) !important;
}
.tpla-hero .tpla-hero-callout {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92) !important;
}
.tpla-hero .tpla-hero-callout a {
  color: var(--tpla-yellow) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tpla-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tpla-hero .tpla-hero-callout a:hover {
  color: #fff !important;
  text-decoration-color: #fff;
}
.tpla-hero ul.tpla-hero-bullets {
  color: #fff !important;
}
.tpla-hero ul.tpla-hero-bullets li {
  color: #fff !important;
}
.tpla-hero ul.tpla-hero-bullets li::marker {
  color: var(--tpla-yellow);
}

/* Form lives inside the hero — but its OWN text should stay dark. Re-anchor. */
.tpla-hero .tpla-form,
.tpla-hero .tpla-form * {
  color: var(--tpla-text) !important;
}
.tpla-hero .tpla-form .tpla-form__heading { color: var(--tpla-primary) !important; }
.tpla-hero .tpla-form .tpla-form__fineprint { color: var(--tpla-slate) !important; }
.tpla-hero .tpla-form__submit { color: #fff !important; }

@media (max-width: 900px) {
  .tpla-hero { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .tpla-hero h1.tpla-h1 { font-size: 2.2rem !important; }
}

/* ============================================================
   Page hero (interior pages — slim, light)
   ============================================================ */

.tpla-page-hero h1.tpla-h1 {
  font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  text-wrap: balance;
  color: var(--tpla-primary) !important;
}
.tpla-page-hero .tpla-eyebrow {
  color: var(--tpla-accent-dark) !important;
}

@media (max-width: 900px) {
  .tpla-page-hero h1.tpla-h1 { font-size: 1.9rem !important; }
}

/* ============================================================
   Section spacing — give blocks room to breathe
   ============================================================ */

.tpla-services .tpla-service-row + .tpla-service-row {
  border-top: 1px solid var(--tpla-line);
  padding-top: 3.5rem;
}
.tpla-services .wp-block-image img {
  box-shadow: var(--tpla-shadow);
}

/* ============================================================
   Contact form (Turnstile)
   ============================================================ */

.tpla-form {
  background: #fff;
  border: 1px solid var(--tpla-line);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--tpla-shadow-lift);
  color: var(--tpla-text);
}
.tpla-form .tpla-form__heading {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tpla-primary);
}
.tpla-form > p.tpla-form__sub,
.tpla-form .sub {
  font-size: 0.95rem;
  color: var(--tpla-slate);
  margin: 0 0 1rem;
}
.tpla-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tpla-text);
  margin: 0.85rem 0 0.3rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tpla-form input[type="text"],
.tpla-form input[type="email"],
.tpla-form input[type="tel"],
.tpla-form textarea,
.tpla-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--tpla-line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.97rem;
  background: var(--tpla-bg);
  color: var(--tpla-text);
  line-height: 1.4;
}
.tpla-form textarea {
  min-height: 100px;
  resize: vertical;
}
.tpla-form input:focus,
.tpla-form textarea:focus,
.tpla-form select:focus {
  outline: none;
  border-color: var(--tpla-primary);
  box-shadow: 0 0 0 3px rgba(138, 90, 59, 0.15);
}
.tpla-form .tpla-form__hp {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.tpla-form__submit {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 1.1rem;
  padding: 0.95rem 1.4rem;
  background: var(--tpla-primary);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.06s ease;
  letter-spacing: 0.01em;
}
.tpla-form__submit:hover {
  background: var(--tpla-accent-dark);
}
.tpla-form__submit:active {
  transform: translateY(1px);
}
.tpla-form__submit:disabled,
.tpla-form__submit[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  background: var(--tpla-slate);
  position: relative;
}
.tpla-form__submit:disabled::before,
.tpla-form__submit[aria-disabled="true"]::before {
  content: '';
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  margin-right: 0.5em;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  vertical-align: -0.15em;
  animation: tpla-spin 0.9s linear infinite;
}
@keyframes tpla-spin {
  to { transform: rotate(360deg); }
}
.tpla-form__fineprint {
  font-size: 0.75rem;
  color: var(--tpla-slate);
  margin: 0.85rem 0 0;
  line-height: 1.5;
}
.tpla-form__error,
.tpla-form__success {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
}
.tpla-form__error  { background: #fde8e8; color: #8a1f1f; border: 1px solid #f5c2c2; }
.tpla-form__success { background: var(--tpla-bg-soft); color: var(--tpla-primary); border: 1px solid var(--tpla-line); }
.cf-turnstile { margin: 1rem 0 0; min-height: 65px; }

/* ============================================================
   Map embed
   ============================================================ */

.tpla-map {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: var(--tpla-bg-soft);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--tpla-shadow);
  border: 1px solid var(--tpla-line);
}
/* Footer map — smaller, contrast border on green bg. */
.tpla-site-footer .tpla-map {
  aspect-ratio: 4 / 3;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: none;
  margin-top: 0.5rem;
}
.tpla-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (max-width: 700px) {
  .tpla-map { aspect-ratio: 4 / 3; }
}

/* ============================================================
   Footer (primary green, white text)
   ============================================================ */

.tpla-site-footer,
.tpla-site-footer p,
.tpla-site-footer li,
.tpla-site-footer a,
.tpla-site-footer .wp-block-site-title a,
.tpla-site-footer h4 {
  color: #fff !important;
}
.tpla-site-footer a {
  text-decoration: none;
  transition: opacity 0.18s ease;
}
.tpla-site-footer a:hover {
  text-decoration: underline;
  opacity: 0.9;
}
.tpla-site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tpla-site-footer li {
  padding: 0.2rem 0;
  font-size: 0.95rem;
  line-height: 1.5;
}
.tpla-site-footer .tpla-phone {
  color: var(--tpla-yellow) !important;
}
.tpla-site-footer .tpla-phone:hover {
  color: #fff !important;
}

/* ============================================================
   FAQ details/summary
   ============================================================ */

.tpla-faq details {
  background: #fff;
  border: 1px solid var(--tpla-line);
  border-radius: 10px;
  padding: 1rem 1.3rem;
  margin-bottom: 0.75rem;
  transition: border-color 0.18s ease;
}
.tpla-faq details:hover { border-color: var(--tpla-accent); }
.tpla-faq summary {
  font-weight: 600;
  color: var(--tpla-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.05rem;
}
.tpla-faq summary::after { content: "+"; font-size: 1.4rem; color: var(--tpla-accent-dark); margin-left: 1rem; }
.tpla-faq details[open] summary::after { content: "−"; }
.tpla-faq details[open] { border-color: var(--tpla-accent); }
.tpla-faq summary::-webkit-details-marker { display: none; }
.tpla-faq details > p { margin-top: 0.85rem; color: var(--tpla-slate); }

/* ============================================================
   Review badges (Google + Yelp)
   ============================================================ */

.tpla-review-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  max-width: 100%;
  background: #fff;
  border: 1px solid var(--tpla-line);
  padding: 1.25rem 1.5rem;
  min-height: 180px;
  min-width: 280px;
}
.tpla-review-badge img {
  display: block;
  height: auto;
  width: auto;
  max-height: 130px;
  max-width: 100%;
  object-fit: contain;
}
.tpla-review-badges {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.tpla-review-badges .wp-block-column {
  text-align: center;
}
@media (max-width: 600px) {
  .tpla-review-badge { min-height: 140px; padding: 1rem; }
  .tpla-review-badge img { max-height: 100px; }
}

/* ============================================================
   Cards (services grid, testimonials, etc.)
   ============================================================ */

.tpla-card {
  background: #fff;
  border: 1px solid var(--tpla-line);
  border-radius: 12px;
  padding: 1.5rem;
}
.tpla-card h3 { color: var(--tpla-primary); margin-top: 0; }

/* ============================================================
   Buttons (extend block button styling)
   ============================================================ */

.wp-block-button .wp-block-button__link {
  padding: 0.9rem 1.6rem;
  font-weight: 700;
  transition: background 0.18s ease, transform 0.06s ease;
}
.wp-block-button .wp-block-button__link:hover {
  background: var(--tpla-accent-dark) !important;
}

/* ============================================================
   Section padding tightening at smaller widths
   ============================================================ */

@media (max-width: 700px) {
  section.wp-block-group {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
}

/* ============================================================
   Accessibility
   ============================================================ */

.tpla-skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: var(--tpla-primary);
  color: #fff;
  padding: 0.5rem 1rem;
  z-index: 200;
}
.tpla-skip-link:focus { top: 0; }
:focus-visible { outline: 3px solid var(--tpla-accent-dark); outline-offset: 2px; }