/*
Theme Name: Los Angeles Sauna
Theme URI: https://los-angeles-sauna.com
Author: Los Angeles Sauna
Author URI: https://los-angeles-sauna.com
Description: SEO-optimized FSE block theme for Los Angeles Sauna (los-angeles-sauna.com). Editable in the WordPress block editor and Site Editor. Auto-created pages, schema.org LocalBusiness markup, Cloudflare Turnstile contact form, CallRail call tracking.
Version: 1.1.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: #2C2C2A;
  --tpla-accent: #BE8A4C;
  --tpla-accent-dark: #8C6638;
  --tpla-text: #111827;
  --tpla-slate: #5B6B63;
  --tpla-bg: #FAFCF8;
  --tpla-bg-soft: #F7F1E8;
  --tpla-line: #E5D5C0;
  --tpla-yellow: #F4C24A;
  --tpla-yellow-dark: #DFA825;
  --tpla-shadow: 0 6px 24px rgba(44, 44, 42, 0.10);
  --tpla-shadow-lift: 0 16px 40px rgba(44, 44, 42, 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;
}

/* IMPORTANT: WordPress's template-part block wraps our header.html contents
   in ITS OWN <header class="wp-block-template-part"> element. That outer
   wrapper is what users actually see at the top of the page — it has no
   background by default, so the body cream bleeds through and looks white.
   We paint both the outer wrapper AND the inner .tpla-site-header dark so
   it doesn't matter which one is taller / which one wins layout. */
header.wp-block-template-part {
  background: var(--tpla-primary, #2C2C2A) !important;
  background-color: var(--tpla-primary, #2C2C2A) !important;
  color: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
}
footer.wp-block-template-part {
  background: var(--tpla-primary, #2C2C2A) !important;
  background-color: var(--tpla-primary, #2C2C2A) !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;
  /* Force the header to span the full viewport width edge-to-edge so the
     primary-color bar doesn't get pinched into a constrained content column
     with the page cream background showing on either side. Same pattern the
     hero uses. */
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !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;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !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(44, 44, 42, 0.72) 60%, rgba(44, 44, 42, 0.6) 100%);
  z-index: -1;
}
/* When the hero has a real bg image (e.g. shou-sugi-ban), dial the overlay
   way back so the texture is actually visible. The text contrast still works
   because the bg image is dark; sites without --has-bg keep the heavy overlay
   that gives the solid-color hero its richness. */
.tpla-hero.tpla-hero--has-bg::before {
  background: linear-gradient(120deg, rgba(20, 20, 18, 0.62) 0%, rgba(20, 20, 18, 0.45) 55%, rgba(20, 20, 18, 0.35) 100%);
}
/* 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);
}

/* ============================================================
   Project Portfolio (Recent Builds)
   ============================================================ */

.tpla-portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 900px) {
  .tpla-portfolio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tpla-portfolio-grid { grid-template-columns: 1fr; }
}

.tpla-portfolio-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--tpla-line);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--tpla-shadow);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.tpla-portfolio-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--tpla-shadow-lift);
}

/* The pill sits over a tall "header" zone — either a project photo when
   the niche supplies one, or a brand-color gradient fallback. Both modes
   reserve the same height so the card grid stays uniform. */
.tpla-portfolio-card:not(.tpla-portfolio-card--has-image)::before {
  content: "";
  display: block;
  height: 180px;
  background:
    linear-gradient(135deg,
      var(--tpla-primary) 0%,
      var(--tpla-accent-dark) 60%,
      var(--tpla-accent) 100%);
}
.tpla-portfolio-card__img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  object-position: center;
}
.tpla-portfolio-card__pill {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--tpla-primary);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
.tpla-portfolio-card__body {
  padding: 1.25rem 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  flex: 1;
}
.tpla-portfolio-card__location {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--tpla-accent-dark);
}
.tpla-portfolio-card__title {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--tpla-text);
}
.tpla-portfolio-card__summary {
  margin: 0;
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--tpla-slate);
}

/* ============================================================
   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(44, 44, 42, 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 background, white text)
   ============================================================ */

/* Anchor the footer background to the same CSS variable the header uses,
   so the two bars are guaranteed to render the exact same color regardless
   of WP block CSS / theme.json preset divergence. Box-shadow on the header
   was the only remaining visual cue separating the two — clearing it lets
   them read as a single brand color top + bottom. */
.tpla-site-footer {
  background: var(--tpla-primary) !important;
  background-color: var(--tpla-primary) !important;
}
.tpla-site-header {
  box-shadow: none !important;
}

.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;
  text-decoration: none !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  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-badge:hover {
  transform: translateY(-2px);
  box-shadow: var(--tpla-shadow-lift);
}
.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; }

/* ============================================================
   Site-wide design overrides (white navbar, image-left hero,
   trust strip, gap closure, mobile nav). Appended last so the
   higher specificity wins over the scaffold defaults above.
   All sites generated from this master inherit this block.
   ============================================================ */

/* White navbar that matches the body background */
.tpla-site-header,
.tpla-site-header.has-background,
.tpla-site-header.has-primary-background-color {
  background: var(--tpla-bg) !important;
  color: var(--tpla-text);
  box-shadow: 0 1px 0 rgba(27, 58, 107, 0.08);
}
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part {
  background: var(--tpla-bg);
}
.tpla-site-header .wp-block-navigation,
.tpla-site-header .wp-block-navigation.has-background,
.tpla-site-header .wp-block-navigation.has-primary-background-color {
  background: transparent !important;
}
.tpla-site-header .wp-block-site-title,
.tpla-site-header .wp-block-site-title a {
  font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.18rem !important;
  letter-spacing: -0.005em !important;
  color: var(--tpla-primary) !important;
  text-decoration: none;
  text-transform: none;
  line-height: 1.1;
}
.tpla-site-header .wp-block-site-title a { position: relative; padding-bottom: 1px; }
.tpla-site-header .wp-block-site-title a::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--tpla-yellow);
  border-radius: 1px; opacity: 0.85;
}
.tpla-site-header .wp-block-site-title a:hover {
  color: var(--tpla-primary) !important; text-decoration: none; opacity: 0.85;
}
.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: var(--tpla-text) !important;
}
.tpla-header-phone a,
.tpla-site-header .tpla-header-phone a.tpla-phone,
.tpla-site-header .tpla-header-phone a.callrail-phone {
  color: #fff !important;
  background: var(--tpla-primary) !important;
  border: 1.5px solid var(--tpla-primary) !important;
  border-radius: 6px;
  padding: 0.55rem 1rem;
  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) !important;
  text-decoration: none;
}
.tpla-site-header .wp-block-navigation__responsive-container-open {
  background: transparent !important;
  color: var(--tpla-primary) !important;
  padding: 0.45rem;
  border-radius: 6px;
}
.tpla-site-header .wp-block-navigation__responsive-container-open:hover,
.tpla-site-header .wp-block-navigation__responsive-container-open:focus-visible {
  background: rgba(27, 58, 107, 0.08) !important;
}
.tpla-site-header .wp-block-navigation__responsive-container-open svg {
  fill: var(--tpla-primary) !important;
  width: 28px; height: 28px;
}
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open,
.tpla-site-header .wp-block-navigation__responsive-container.has-modal-open {
  background: var(--tpla-bg) !important;
  color: var(--tpla-text) !important;
  padding: 1.25rem 1.5rem !important;
}
.tpla-site-header .wp-block-navigation__responsive-container-close svg {
  fill: var(--tpla-primary) !important;
  width: 28px; height: 28px;
}
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open a,
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open button {
  color: var(--tpla-text) !important;
  font-size: 1.15rem;
  font-weight: 600;
  padding: 0.6rem 0;
}
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-bottom: 1px solid var(--tpla-line);
}
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
  position: static !important;
  box-shadow: none !important;
  border: 0 !important;
  background: transparent !important;
  padding-left: 1rem !important;
  min-width: 0 !important;
}
.tpla-site-header .wp-block-navigation__responsive-container.is-menu-open a.wp-block-navigation-item__content::after {
  display: none !important;
}
.tpla-brand__logo img {
  width: 40px; height: 40px; border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.1);
}
@media (max-width: 480px) {
  .tpla-brand__logo img { width: 34px; height: 34px; }
}

/* Close blockGap between sticky header and the hero */
.wp-site-blocks > main,
.wp-site-blocks > main.wp-block-group,
.wp-site-blocks > main > .wp-block-post-content,
.wp-site-blocks > main > .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
.wp-site-blocks > main > .wp-block-post-content > *:first-child,
.wp-site-blocks > main > .entry-content > *:first-child,
.wp-site-blocks > main > *:first-child {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}
.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > header + main {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Hero — full-width head + image-left/form-right below.
   This solid-color hero applies when NO background photo is supplied. Niches
   that drop a hero-bg.jpg into assets/img get the .tpla-hero--has-bg modifier
   and skip these rules so the inline background-image actually paints. */
.tpla-hero:not(.tpla-hero--has-bg) {
  position: relative;
  isolation: isolate;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  background:
    radial-gradient(1200px 600px at 12% 0%, rgba(244, 194, 74, 0.10), transparent 60%),
    radial-gradient(900px 700px at 100% 100%, rgba(107, 143, 184, 0.18), transparent 60%),
    linear-gradient(160deg, #0F2447 0%, #1B3A6B 55%, #213f76 100%) !important;
}
.tpla-hero:not(.tpla-hero--has-bg)::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  z-index: -1;
}
.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,
.tpla-hero figcaption { 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-hero-head {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.tpla-hero .tpla-hero-head .tpla-hero-lead {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}
.tpla-hero .tpla-hero-head .tpla-hero-callout {
  text-align: center;
}
.tpla-hero .tpla-eyebrow { color: var(--tpla-yellow) !important; }
.tpla-hero .tpla-hero-figure {
  position: relative; margin: 0;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(244, 194, 74, 0.25);
  aspect-ratio: 4 / 3;
  background: rgba(255,255,255,0.05);
}
.tpla-hero .tpla-hero-figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tpla-hero .tpla-hero-figure__caption {
  position: absolute; left: 14px; bottom: 12px;
  padding: 0.35rem 0.75rem; border-radius: 999px;
  background: rgba(15, 35, 71, 0.78); backdrop-filter: blur(6px);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tpla-yellow) !important;
  border: 1px solid rgba(244, 194, 74, 0.4);
}
.tpla-hero .tpla-hero-callout {
  margin-top: 1.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.95) !important;
}
.tpla-hero .tpla-hero-callout a {
  font-size: 1.55rem;
}
@media (max-width: 600px) {
  .tpla-hero .tpla-hero-callout { font-size: 1.25rem; }
  .tpla-hero .tpla-hero-callout a { font-size: 1.3rem; }
}
.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; padding-left: 1.1rem; }
.tpla-hero ul.tpla-hero-bullets li { color: #fff !important; margin: 0.25rem 0; }
.tpla-hero ul.tpla-hero-bullets li::marker { color: var(--tpla-yellow); }
.tpla-hero .tpla-hero-form-col .tpla-form { height: 100%; }
.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; }
  .tpla-hero .tpla-hero-figure { aspect-ratio: 16 / 10; }
}

/* Trust strip */
.tpla-trust-strip {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}
.tpla-trust-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 2rem;
}
.tpla-trust-item {
  display: flex; flex-direction: column; gap: 0.1rem;
  padding: 0.25rem 0 0.25rem 0.85rem;
  border-left: 2px solid var(--tpla-yellow);
}
.tpla-trust-kicker {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tpla-accent-dark);
}
.tpla-trust-label { font-size: 1rem; font-weight: 700; color: var(--tpla-primary); line-height: 1.25; }
.tpla-trust-sub { font-size: 0.85rem; color: var(--tpla-slate); }
@media (max-width: 900px) { .tpla-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tpla-trust-grid { grid-template-columns: 1fr; } }

/* Review badges: unlinked div, no hover-lift */
.tpla-review-badge { cursor: default; }
.tpla-review-badge:hover { transform: none !important; box-shadow: none !important; }
.tpla-review-badges {
  display: flex; justify-content: center; align-items: center;
  gap: 2rem; flex-wrap: wrap; text-align: center;
}