/*
Theme Name: Santa Barbara Generators
Theme URI: https://santabarbaragenerators.com
Author: Santa Barbara Generators
Author URI: https://santabarbaragenerators.com
Description: SEO-optimized FSE block theme for Santa Barbara Generators (santabarbaragenerators.com). Six services on flat URLs, auto-created pages, schema.org LocalBusiness markup, Cloudflare Turnstile contact form, CallRail call tracking.
Version: 2.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: #8C8C7A;
  --tpla-accent: #B7B7A8;
  --tpla-accent-dark: #70705F;
  --tpla-text: #1C1A17;
  --tpla-slate: #6E6E62;
  --tpla-bg: #FAFAF6;
  --tpla-bg-soft: #ECECE3;
  --tpla-line: #DADAD1;
  --tpla-yellow: #F4C24A;
  --tpla-yellow-dark: #DFA825;
  --tpla-shadow: 0 6px 24px rgba(140, 140, 122, 0.10);
  --tpla-shadow-lift: 0 16px 40px rgba(140, 140, 122, 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: site title in the footer (the nav uses the wordmark SVG) */
.tpla-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem;
  line-height: 1;
}
.tpla-brand .wp-block-site-title,
.tpla-brand .wp-block-site-title a {
  margin: 0;
  line-height: 1.05;
  font-family: Arial, Helvetica, sans-serif !important;
}
.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;
}
@media (max-width: 480px) {
  .tpla-brand .wp-block-site-title { font-size: 1.25rem !important; }
}

/* 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: shrink the brand a bit so title, nav toggle, and phone fit on one row */
@media (max-width: 480px) {
  .tpla-site-header .wp-block-site-title { font-size: 0.9rem !important; }
  .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;
  /* Navy to match the brand palette — the green/brown stops here were left
     over from the theme this was ported from. Slightly lighter than before
     so the pole silhouette reads through it while white text stays legible. */
  background: linear-gradient(120deg, rgba(58, 58, 48, 0.78) 0%, rgba(112, 112, 95, 0.58) 55%, rgba(140, 140, 122, 0.38) 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);
}
/* Hide hero bullets on mobile — the form + H1 + lead already fill the hero. */
@media (max-width: 780px) {
  .tpla-hero ul.tpla-hero-bullets { display: none !important; }
}

/* 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(140, 140, 122, 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: 8px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.5rem;
  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: 0.97rem;
}
/* The question is a real <h3> so the page outline stays correct, but it must not
   pick up theme.json's heading size, weight or margins — that is what made the
   FAQ rows tower over the rest of the page. */
.tpla-faq summary h3 {
  font: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
  letter-spacing: normal;
  line-height: 1.35;
}
.tpla-faq summary::after { content: "+"; font-size: 1.1rem; line-height: 1; color: var(--tpla-accent-dark); margin-left: 0.9rem; }
.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.6rem;
  color: var(--tpla-slate);
  font-size: 0.93rem;
  line-height: 1.55;
  max-width: 78ch;
}

/* ============================================================
   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; }


/* ============================================================
   Sections ported from the master template (2026-08-16 rebuild):
   trust strip, service briefs, project portfolio, in-content link note.
   ============================================================ */

/* ============================================================
   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);
}

/* 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; } }

/* ---------------------------------------------------------------------------
   Services grid — shared by the home page and the city pages.
   Every service renders as an identical card (icon, H2, summary, exact-match
   link). There is deliberately no per-service photography here; imagery on
   these pages lives in the sections above and below instead.
--------------------------------------------------------------------------- */
.tpla-service-briefs {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.5rem;
	margin-top: 0.5rem;
	align-items: stretch;
}

/* Wide screens run a six-track grid so a card can span 2 (three per row) and
   the last pair can span 3 (two per row, full width). Eight services in a plain
   three-column grid leave a hole in the final row. The
   :nth-child(7):nth-last-child(2) guard means the wide pair only kicks in when
   there are exactly eight cards, so a different service count still tiles. */
@media (min-width: 1100px) {
	.tpla-service-briefs { grid-template-columns: repeat(6, 1fr); }
	.tpla-service-brief  { grid-column: span 2; }
	.tpla-service-brief:nth-child(7):nth-last-child(2),
	.tpla-service-brief:nth-child(7):nth-last-child(2) ~ .tpla-service-brief {
		grid-column: span 3;
	}
	/* Seven services tile as 3 + 3 + a lone card sitting in a two-track gap.
	   :last-child restricts this to a set of exactly seven, so the eight-card
	   rule above and any other count are untouched. `width: 100%` is doing real
	   work here: WordPress's constrained-layout rule sets `margin-inline: auto
	   !important` on every child, and an auto-margined grid item centres at its
	   content width instead of stretching, so spanning the tracks alone left
	   the card inset on both sides. */
	.tpla-service-brief:nth-child(7):last-child {
		grid-column: 1 / -1;
		width: 100%;
	}
}

/* Same idea in the two-column layout between 640px and 1100px: the seventh
   card would otherwise sit alone in half a row. */
@media (min-width: 641px) and (max-width: 1099px) {
	.tpla-service-brief:nth-child(7):last-child {
		grid-column: 1 / -1;
		width: 100%;
	}
}

@media (max-width: 640px) {
	.tpla-service-briefs { grid-template-columns: 1fr; }
}

/* The grid is a wp:group with a constrained layout, so WordPress emits
   `> * + * { margin-block-start: <blockGap> }` and a content-size max-width for
   its children. In a grid that pushes every card except the first down inside
   its own track, leaving the rows visibly ragged. The doubled class outranks
   the generated rule without needing !important. */
.tpla-service-briefs.tpla-service-briefs > * {
	margin-block: 0;
	margin-inline: 0;
	max-width: none;
}

.tpla-service-brief {
	border: 1px solid var(--wp--preset--color--line, #DADAD1);
	border-top: 3px solid var(--tpla-primary, #8C8C7A);
	border-radius: 10px;
	padding: 1.25rem 1.35rem 1.4rem;
	background: #fff;
	display: flex;
	flex-direction: column;
}

/* The card is a wp:group with a constrained layout, which gives every child
   `margin-inline: auto`. Inside a flex column that both centres and shrink-wraps
   them, so the icon and heading drifted to the middle while the body copy stayed
   left. Reset the inline margins and the card reads as one left-aligned block. */
.tpla-service-brief > * {
	margin-inline: 0;
	max-width: none;
	width: 100%;
}

.tpla-service-brief h2 {
	line-height: 1.2;
}

/* Push the link to the bottom edge so cards of differing copy length still
   line their calls-to-action up across a row. */
.tpla-service-brief > p:last-child {
	margin-top: auto;
	padding-top: 0.6rem;
}

.tpla-service-brief__icon {
	line-height: 1;
}

/* ---------------------------------------------------------------------------
   In-content link note — a plain paragraph of body copy carrying the internal
   links. Styled only enough to separate it from the section above.
--------------------------------------------------------------------------- */
.tpla-home-link-note p {
	max-width: 68ch;
	color: var(--tpla-slate, #6E6E62);
}

.tpla-home-link-note a {
	color: var(--tpla-accent-dark, #70705F);
	text-decoration: underline;
	text-underline-offset: 2px;
}