/*
Theme Name: Los Angeles Temporary Power
Theme URI: https://losangelestemppower.com
Author: Los Angeles Temporary Power
Author URI: https://losangelestemppower.com
Description: SEO-optimized Full Site Editing (FSE) block theme for a Los Angeles temporary construction power provider. Editable end-to-end 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.6
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: #2F5D50;
  --tpla-accent: #7A9E7E;
  --tpla-accent-dark: #587A5D;
  --tpla-text: #111827;
  --tpla-slate: #5B6B63;
  --tpla-bg: #FAFCF8;
  --tpla-bg-soft: #EEF3EC;
  --tpla-line: #D7E0D5;
  --tpla-yellow: #F4C24A;
  --tpla-yellow-dark: #DFA825;
  --tpla-shadow: 0 6px 24px rgba(47, 93, 80, 0.10);
  --tpla-shadow-lift: 0 16px 40px rgba(47, 93, 80, 0.16);
}

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

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

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

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

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

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

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

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

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

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

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

.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(47, 93, 80, 0.72) 60%, rgba(47, 93, 80, 0.6) 100%);
  z-index: -1;
}
/* Force every text element inside the hero to render light so nothing slips
   through with the theme.json's default near-black body color. */
.tpla-hero,
.tpla-hero p,
.tpla-hero li,
.tpla-hero span,
.tpla-hero a:not(.tpla-form *):not(.wp-block-button__link),
.tpla-hero h1,
.tpla-hero h2,
.tpla-hero h3 {
  color: #fff !important;
}
.tpla-hero h1.tpla-h1 {
  color: #ffffff !important;
  font-family: ui-serif, Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  text-wrap: balance;
}
.tpla-hero .tpla-eyebrow {
  color: var(--tpla-yellow) !important;
}
.tpla-hero .tpla-hero-callout {
  margin-top: 1.5rem;
  font-size: 1.05rem;
  color: rgba(255, 255, 255, 0.92) !important;
}
.tpla-hero .tpla-hero-callout a {
  color: var(--tpla-yellow) !important;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--tpla-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.tpla-hero .tpla-hero-callout a:hover {
  color: #fff !important;
  text-decoration-color: #fff;
}
.tpla-hero ul.tpla-hero-bullets {
  color: #fff !important;
}
.tpla-hero ul.tpla-hero-bullets li {
  color: #fff !important;
}
.tpla-hero ul.tpla-hero-bullets li::marker {
  color: var(--tpla-yellow);
}

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

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

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

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

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

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

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

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

.tpla-form {
  background: #fff;
  border: 1px solid var(--tpla-line);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: var(--tpla-shadow-lift);
  color: var(--tpla-text);
}
.tpla-form .tpla-form__heading {
  margin: 0 0 0.25rem;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--tpla-primary);
}
.tpla-form > p.tpla-form__sub,
.tpla-form .sub {
  font-size: 0.95rem;
  color: var(--tpla-slate);
  margin: 0 0 1rem;
}
.tpla-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tpla-text);
  margin: 0.85rem 0 0.3rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.tpla-form input[type="text"],
.tpla-form input[type="email"],
.tpla-form input[type="tel"],
.tpla-form textarea,
.tpla-form select {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.72rem 0.85rem;
  border: 1px solid var(--tpla-line);
  border-radius: 6px;
  font: inherit;
  font-size: 0.97rem;
  background: var(--tpla-bg);
  color: var(--tpla-text);
  line-height: 1.4;
}
.tpla-form textarea {
  min-height: 100px;
  resize: vertical;
}
.tpla-form input:focus,
.tpla-form textarea:focus,
.tpla-form select:focus {
  outline: none;
  border-color: var(--tpla-primary);
  box-shadow: 0 0 0 3px rgba(47, 93, 80, 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;
  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; }