/*
Theme Name: Elite Plumbing Kadence Child
Theme URI: https://eliteplumbingrapidcity.com
Description: Kadence child theme for Elite Plumbing Rapid City (Rapid City, SD). Includes Exact Site Clone template that mirrors the Galveston static site design with Rapid City branding. Business data lives in elite-plumbing-site-core.
Author: Elite Plumbing Rapid City
Template: kadence
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: elite-plumbing-kadence-child
*/

/* ==========================================================================
   BRAND DESIGN TOKENS
   Palette per /docs/design-system.md. Kadence Customizer/Global Palette
   should mirror these values in wp-admin; they are duplicated here as CSS
   custom properties only for the handful of things the Kadence Customizer
   cannot express (sticky bar, urgent-CTA pulse, focus outline).
   ========================================================================== */
:root {
  --eps-navy: #0B1F33;
  --eps-blue: #086CB8;
  --eps-aqua: #1498A5;
  --eps-orange: #F59E0B;
  --eps-off-white: #F7FAFC;
  --eps-border: #DCE5EC;
  --eps-text: #17212B;
  --eps-text-muted: #52616B;
  --eps-white: #FFFFFF;
  --eps-radius: 10px;
  --eps-radius-sm: 6px;
  --eps-shadow: 0 2px 10px rgba(11, 31, 51, 0.08);
  --eps-shadow-lg: 0 10px 30px rgba(11, 31, 51, 0.14);
  --eps-max-width: 1200px;
}

/* Respect reduced-motion preference site-wide (assignment: reduced-motion support) */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   ACCESSIBILITY — skip link, focus states
   ========================================================================== */
.eps-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--eps-blue);
  color: var(--eps-white);
  padding: 10px 18px;
  z-index: 100000;
  border-radius: 0 0 var(--eps-radius-sm) 0;
  font-weight: 600;
  text-decoration: none;
}
.eps-skip-link:focus {
  top: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--eps-orange);
  outline-offset: 2px;
}

/* ==========================================================================
   UTILITY BAR (top strip) — set via Kadence Header Builder where possible;
   these rules only style the row so it matches brand navy without needing a
   template override.
   ========================================================================== */
.eps-utility-bar {
  background: var(--eps-navy);
  color: var(--eps-off-white);
  font-size: 0.875rem;
}
.eps-utility-bar a {
  color: var(--eps-off-white);
  text-decoration: underline;
}
.eps-utility-bar a:hover {
  color: var(--eps-orange);
}

/* ==========================================================================
   MOBILE STICKY CONVERSION BAR (fallback for when Hooked Elements /
   Theme Kit Pro are unavailable — see inc/sticky-bar.php)
   ========================================================================== */
.eps-sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  display: none;
  gap: 1px;
  background: var(--eps-border);
  box-shadow: 0 -4px 16px rgba(11, 31, 51, 0.18);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

@media (max-width: 782px) {
  .eps-sticky-bar {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  /* Prevent the bar from covering form submit buttons or cookie notices */
  body {
    scroll-padding-bottom: 64px;
  }
}

.eps-sticky-bar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
}

.eps-sticky-bar .eps-sticky-call {
  background: var(--eps-navy);
  color: var(--eps-white);
}

.eps-sticky-bar .eps-sticky-request {
  background: var(--eps-orange);
  color: var(--eps-navy);
}

/* ==========================================================================
   URGENT / EMERGENCY CTA ACCENT
   Used sparingly, never as the only signal of urgency (also uses text +
   icon, not color alone).
   ========================================================================== */
.eps-urgent-cta {
  border: 2px solid var(--eps-orange);
  border-radius: var(--eps-radius);
  background: var(--eps-off-white);
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */
.eps-breadcrumbs {
  font-size: 0.85rem;
  color: var(--eps-text-muted);
  padding: 0.75rem 0;
}
.eps-breadcrumbs a {
  color: var(--eps-blue);
  text-decoration: none;
}
.eps-breadcrumbs a:hover {
  text-decoration: underline;
}
.eps-breadcrumbs [aria-current="page"] {
  color: var(--eps-text);
  font-weight: 600;
}

/* ==========================================================================
   VERIFY-BEFORE-PUBLISH ADMIN MARKER
   Only ever visible to logged-in editors (see class-eps-verification.php),
   never to site visitors.
   ========================================================================== */
.eps-verify-flag {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.35rem 0.75rem;
  background: #FDE68A;
  color: #7A5B00;
  border: 1px dashed #B45309;
  border-radius: var(--eps-radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

/* ==========================================================================
   CARD / SECTION RESTRAINT (per design system: subtle shadow, restrained
   radius, no heavy skeuomorphism)
   ========================================================================== */
.eps-card {
  background: var(--eps-white);
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius);
  box-shadow: var(--eps-shadow);
}

/* Container width guard so Kadence Row Layout content never exceeds the
   design system's max width even if a content editor forgets to set it. */
.eps-max-width {
  max-width: var(--eps-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* ==========================================================================
   TOP UTILITY BAR (rendered by inc/utility-bar.php)
   ========================================================================== */
.eps-utility-bar-inner {
  max-width: var(--eps-max-width);
  margin: 0 auto;
  padding: 0.5rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  align-items: center;
}

/* ==========================================================================
   SECTION / HERO / CARD / CTA — generated content sections from the
   site-core plugin's block builder (class-eps-block-builder.php)
   ========================================================================== */
.eps-section,
.eps-hero,
.eps-cta-band,
.eps-form-section {
  padding: 3rem 0;
}

.eps-section-alt {
  background: var(--eps-off-white);
}

.eps-hero {
  background: linear-gradient(135deg, var(--eps-navy) 0%, var(--eps-blue) 100%);
  color: var(--eps-white);
}
.eps-hero-h1,
.eps-hero p {
  color: var(--eps-white);
}
.eps-hero-h1 {
  font-size: clamp(2.125rem, 4vw + 1rem, 3.375rem);
  margin-bottom: 1rem;
}
.eps-hero-intro {
  font-size: 1.125rem;
  max-width: 65ch;
  opacity: 0.95;
}
.eps-hero-ctas {
  margin-top: 1.5rem;
}

.eps-urgent-cta {
  padding: 2rem;
}

.eps-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.5rem;
}
.eps-card {
  padding: 1.5rem;
}
.eps-card-icon {
  font-size: 1.5rem;
  margin-right: 0.5rem;
}

.eps-cta-band {
  background: var(--eps-navy);
  color: var(--eps-white);
  text-align: center;
  border-radius: var(--eps-radius);
}
.eps-cta-band h2 {
  color: var(--eps-white);
}
.eps-cta-band .wp-block-buttons {
  justify-content: center;
}

.eps-icon-list {
  list-style: none;
  padding-left: 0;
}
.eps-icon-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.eps-icon-list-mark {
  color: var(--eps-aqua);
  font-weight: 700;
}

.eps-trust-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  list-style: none;
}

.eps-faq-list details.eps-faq-item {
  border-bottom: 1px solid var(--eps-border);
  padding: 1rem 0;
}
.eps-faq-list summary {
  cursor: pointer;
  font-weight: 600;
}

.eps-image-placeholder {
  background: var(--eps-off-white);
  border: 1px dashed var(--eps-border);
  border-radius: var(--eps-radius);
  padding: 3rem 1.5rem;
  text-align: center;
  color: var(--eps-text-muted);
}
.eps-image-placeholder-alt {
  font-size: 0.85rem;
}

.eps-testimonial-placeholder {
  padding: 2rem;
  border: 1px dashed var(--eps-border);
  border-radius: var(--eps-radius);
  text-align: center;
  color: var(--eps-text-muted);
}

.eps-center {
  text-align: center;
  justify-content: center;
}

/* Forms */
.eps-form p {
  margin-bottom: 1rem;
}
.eps-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.eps-form input,
.eps-form select,
.eps-form textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--eps-border);
  border-radius: var(--eps-radius-sm);
  font-size: 1rem;
}
.eps-hp-field {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.eps-form-status-error {
  background: #FDECEC;
  border: 1px solid #C0392B;
  color: #7A2020;
  padding: 0.75rem 1rem;
  border-radius: var(--eps-radius-sm);
}

.eps-verify-block {
  padding: 1rem 0;
}