/*
Theme Name: Temporary Power San Diego
Theme URI: https://sandiegotemppower.com
Author: Temporary Power San Diego
Author URI: https://sandiegotemppower.com
Description: SEO-optimized FSE block theme for Temporary Power San Diego. 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: #1B3A6B;
  --tpla-accent: #6B8FB8;
  --tpla-accent-dark: #3D5F90;
  --tpla-text: #111827;
  --tpla-slate: #5B6B63;
  --tpla-bg: #FAFCF8;
  --tpla-bg-soft: #EEF2F7;
  --tpla-line: #D5DDE8;
  --tpla-yellow: #F4C24A;
  --tpla-yellow-dark: #DFA825;
  --tpla-shadow: 0 6px 24px rgba(27, 58, 107, 0.10);
  --tpla-shadow-lift: 0 16px 40px rgba(27, 58, 107, 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 {
  /* White-on-page navbar that matches the body background. */
  background: var(--tpla-bg) !important;
  color: var(--tpla-text);
  box-shadow: 0 1px 0 rgba(27, 58, 107, 0.08);
  padding: 0 !important;
  margin-bottom: 0 !important;
}
.wp-site-blocks > header.wp-block-template-part,
header.wp-block-template-part {
  background: var(--tpla-bg);
  margin-bottom: 0 !important;
}

/* Close the blockGap WordPress applies between the sticky header and the
   hero below it. WP's root layout adds `margin-block-start: var(--wp--style--block-gap)`
   between siblings of .wp-site-blocks AND between siblings of .wp-block-post-content.
   We zero out the top edge from the header all the way down to the hero <section>. */
.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's "is-layout-constrained > * + *" rule applies block-gap as margin-block-start.
   The hero is the first child so it should be unaffected, but defensive override
   for the (header sibling → main) edge: */
.wp-site-blocks > .wp-block-template-part + main,
.wp-site-blocks > header + main {
  margin-top: 0 !important;
  margin-block-start: 0 !important;
}

/* Belt-and-suspenders: hide any background paint on the inner header group
   in case lingering WP-generated classes apply a primary background. */
.tpla-site-header.has-background,
.tpla-site-header.has-primary-background-color {
  background: var(--tpla-bg) !important;
}
.tpla-site-header .wp-block-navigation.has-background,
.tpla-site-header .wp-block-navigation.has-primary-background-color {
  background: transparent !important;
}

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

/* Brand: logo + site title */
.tpla-brand {
  display: flex !important;
  align-items: center;
  gap: 0.7rem;
}
.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: 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; }
}
.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;
}
@media (max-width: 600px) {
  .tpla-site-header .wp-block-site-title,
  .tpla-site-header .wp-block-site-title a { font-size: 1.02rem !important; }
  .tpla-site-header .wp-block-site-title a::before { display: none; }
}

/* Nav links: dark with yellow 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: var(--tpla-text) !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 — solid primary CTA against the white navbar */
.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: #fff !important;
  background: var(--tpla-primary);
  text-decoration: none;
  padding: 0.55rem 1rem;
  border: 1.5px solid var(--tpla-primary);
  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 — dark on white navbar */
.tpla-site-header .wp-block-navigation__responsive-container-open svg {
  fill: var(--tpla-primary);
}

/* 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;
  }
}
@media (max-width: 480px) {
  .tpla-site-header .wp-block-site-title { font-size: 1rem !important; }
}

/* ============================================================
   Hero (homepage) — full-width text on top, image-left + form-right below
   ============================================================ */

.tpla-hero {
  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%);
}
.tpla-hero::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;
}
.tpla-hero .tpla-hero-head .tpla-hero-lead {
  max-width: 760px;
}
.tpla-hero .tpla-eyebrow {
  color: var(--tpla-yellow) !important;
}

/* Hero image (left column, below the head) */
.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.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;
  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);
}

/* Right form column — make it match height of image col for clean alignment */
.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 (under hero)
   ============================================================ */

.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;
  border-left: 2px solid var(--tpla-yellow);
  padding-left: 0.85rem;
}
.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; }
}

/* ============================================================
   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(27, 58, 107, 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;
  cursor: default;
}
.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;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
  text-align: center;
}
.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; }