/*
 * pumas-overrides.css
 * RULE: Dark background = white/gold text. Light background = dark text.
 * No exceptions. Uses !important to win specificity wars against plugin CSS.
 */

/* ── DESIGN TOKENS ── */
:root {
  --slate-dark:   #1A3550;
  --slate-blue:   #2D5986;
  --accent:       #C4A882;
  --accent-hover: #B5956A;
  --white:        #ffffff;
  --off-white:    #F8F7F5;
  --text-dark:    #111827;
  --text-body:    #374151;
  --text-muted:   #6B7280;
  --text-on-dark: #CBD5E1;
  --nav-h:        80px;
}

/* ── PAGE FADE-IN (replaces harsh transitions) ── */
body { animation: pageFade 0.35s ease both; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* Kill any plugin page-transition flash */
[class*="PageTransition"],
[class*="page-transition"],
[data-page-transition] {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ──────────────────────────────────────────────────────
   DARK BACKGROUND SECTIONS
   White/gold text on anything dark-colored
────────────────────────────────────────────────────── */

/*
  Target by known dark bg colors.
  Using attribute + style selectors AND class selectors.
*/
[style*="background: #1A3550"],
[style*="background:#1A3550"],
[style*="background: #1a3550"],
[style*="background: #2D5986"],
[style*="background: #2d5986"],
[style*="background-color: #1A3550"],
[style*="background-color: #1a3550"],
.bg-dark,
.dark-bg,
[class*="dark-section"],
[class*="darkSection"] {
  --section-mode: dark;
}

/* Stats bar - always dark background with light text */
[class*="StatsBar"],
[class*="stats-bar"],
[id*="stats"],
[class*="stats"] {
  background: var(--slate-dark) !important;
  color: var(--white) !important;
}
[class*="StatsBar"] *,
[class*="stats-bar"] *,
[id*="stats"] *,
[class*="stats"] * {
  color: var(--white) !important;
}
/* Numbers in stats → gold */
[class*="StatsBar"] [class*="number"],
[class*="StatsBar"] [class*="count"],
[class*="StatsBar"] [class*="value"],
[class*="stats"] [class*="number"],
[class*="stats"] [class*="count"],
[class*="stats"] strong {
  color: var(--accent) !important;
}

/* WhyUs / Why Us section */
[class*="WhyUs"],
[class*="why-us"],
[id="why-us"] {
  background: var(--slate-dark) !important;
}
[class*="WhyUs"] *,
[class*="why-us"] *,
[id="why-us"] * {
  color: var(--text-on-dark) !important;
}
[class*="WhyUs"] h1,
[class*="WhyUs"] h2,
[class*="WhyUs"] h3,
[class*="WhyUs"] h4,
[class*="why-us"] h1,
[class*="why-us"] h2,
[class*="why-us"] h3,
[class*="why-us"] h4,
[id="why-us"] h1,
[id="why-us"] h2,
[id="why-us"] h3,
[id="why-us"] h4 {
  color: var(--white) !important;
}
[class*="WhyUs"] [class*="eyebrow"],
[class*="why-us"] [class*="eyebrow"] {
  color: var(--accent) !important;
}

/* CTA Section */
[class*="CTASection"],
[class*="cta-section"],
[id="final-cta"],
[class*="finalCta"] {
  background: var(--slate-dark) !important;
}
[class*="CTASection"] *,
[class*="cta-section"] *,
[id="final-cta"] *,
[class*="finalCta"] * {
  color: var(--text-on-dark) !important;
}
[class*="CTASection"] h1,
[class*="CTASection"] h2,
[class*="CTASection"] h3,
[class*="cta-section"] h1,
[class*="cta-section"] h2,
[class*="cta-section"] h3,
[id="final-cta"] h1,
[id="final-cta"] h2,
[id="final-cta"] h3 {
  color: var(--white) !important;
}

/* FAQ section (regardless of background) */
[class*="FAQ"] h1,
[class*="FAQ"] h2,
[class*="FAQ"] h3,
[class*="faq"] h1,
[class*="faq"] h2,
[class*="faq"] h3,
[id="faq"] h1,
[id="faq"] h2,
[id="faq"] h3 {
  color: var(--text-dark) !important; /* FAQs are usually on white */
}
/* But if FAQ is on dark, force white */
[class*="FAQ"].bg-dark h2,
[class*="FAQ"].bg-dark h3,
[class*="FAQ"].bg-dark button,
[class*="FAQ"].bg-dark p {
  color: var(--white) !important;
}

/* Service cards - h3 color set by inline style on each card; no override needed */

/* Location cards - h3 color set by inline style on each card; no override needed */

/* Footer - always dark, always white text. Target only the page-level footer. */
body > footer,
#site-footer,
[class*="site-footer"],
[class*="SiteFooter"],
[class*="PageFooter"] {
  background: var(--slate-dark) !important;
  color: var(--text-on-dark) !important;
}
body > footer *,
#site-footer *,
[class*="site-footer"] *,
[class*="SiteFooter"] *,
[class*="PageFooter"] * {
  color: var(--text-on-dark) !important;
}
body > footer h1, body > footer h2, body > footer h3, body > footer h4,
#site-footer h1, #site-footer h2, #site-footer h3, #site-footer h4 {
  color: var(--white) !important;
}
body > footer a:hover,
#site-footer a:hover { color: var(--accent) !important; }

/* PSIP section */
[id*="psip"],
[class*="psip"],
[class*="PSIP"] {
  background: var(--slate-dark) !important;
  color: var(--text-on-dark) !important;
}
[id*="psip"] *,
[class*="psip"] *,
[class*="PSIP"] * {
  color: var(--text-on-dark) !important;
}
[id*="psip"] h1,
[id*="psip"] h2,
[id*="psip"] h3,
[class*="psip"] h1,
[class*="psip"] h2,
[class*="psip"] h3,
[class*="PSIP"] h2,
[class*="PSIP"] h3 {
  color: var(--white) !important;
}

/* Grain / gradient mesh overlays - keep them very subtle */
[class*="GrainOverlay"],
[class*="grain"],
[class*="GradientMesh"],
[class*="gradient-mesh"] {
  opacity: 0.03 !important;
  pointer-events: none !important;
}

/* ──────────────────────────────────────────────────────
   LIGHT BACKGROUND SECTIONS - dark text
────────────────────────────────────────────────────── */

/* Services grid / index page */
[class*="ServicesGrid"],
[class*="services-grid"] {
  background: var(--off-white) !important;
}
[class*="ServicesGrid"] h1,
[class*="ServicesGrid"] h2,
[class*="ServicesGrid"] h3,
[class*="services-grid"] h1,
[class*="services-grid"] h2,
[class*="services-grid"] h3 {
  color: var(--text-dark) !important;
}
[class*="ServicesGrid"] p,
[class*="services-grid"] p {
  color: var(--text-body) !important;
}

/* ──────────────────────────────────────────────────────
   GLOBAL EYEBROW / ACCENT CONSISTENCY
────────────────────────────────────────────────────── */
.eyebrow,
[class*="eyebrow"],
[class*="Eyebrow"],
[class*="label"],
[class*="Label"] {
  color: var(--accent) !important;
  font-family: 'Montserrat', sans-serif !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}

/* ──────────────────────────────────────────────────────
   CTA BUTTONS - enforce gold background = dark navy text
────────────────────────────────────────────────────── */
/*
  Gold-background CTA buttons - always white text.
  The * rule also covers <span> and <svg> children inside buttons
  which would otherwise inherit grey from section wildcard rules.
*/
.btn-primary,
a.btn-primary,
button.btn-primary,
[class*="btn-primary"],
.btn-white,
a.btn-white,
button.btn-white {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover,
a.btn-primary:hover,
.btn-white:hover,
a.btn-white:hover {
  background: var(--accent-hover) !important;
  color: var(--white) !important;
}
/* Children (<span>, <svg>) inside gold buttons must also be white */
.btn-primary *,
a.btn-primary *,
button.btn-primary *,
[class*="btn-primary"] *,
.btn-white *,
a.btn-white *,
button.btn-white * {
  color: var(--white) !important;
}

/* Any element with explicit gold/tan inline background - dark text */
[style*="background: #C4A882"],
[style*="background:#C4A882"],
[style*="background: #B5956A"],
[style*="background:#B5956A"] {
  color: var(--slate-dark) !important;
}

/* ──────────────────────────────────────────────────────
   HERO - ensure nav-height offset is zero (transparent nav)
────────────────────────────────────────────────────── */
#hero {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* ──────────────────────────────────────────────────────
   SECTION SPACING - smooth flow, no harsh jumps
────────────────────────────────────────────────────── */
main > section + section {
  border-top: none !important;
}

/* Breadcrumb on dark pages */
nav[aria-label*="breadcrumb"] a,
[class*="Breadcrumb"] a {
  color: var(--text-on-dark) !important;
  opacity: 0.75;
  text-decoration: none;
}
nav[aria-label*="breadcrumb"] [aria-current="page"],
[class*="Breadcrumb"] [aria-current="page"] {
  color: var(--accent) !important;
  opacity: 1;
}

/* ──────────────────────────────────────────────────────
   DESIGN ELEVATION: Visual refinements
   Added as a single block to avoid disturbing earlier rules.
   Order matters: typography → patterns → spacing.
────────────────────────────────────────────────────── */

/* === 4. TYPOGRAPHY REFINEMENT === */
h1 {
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
}
h2 {
  letter-spacing: -0.02em !important;
  line-height: 1.12 !important;
}
h3 {
  letter-spacing: -0.01em !important;
}
.eyebrow,
[class*="eyebrow"] {
  letter-spacing: 0.18em !important;
  font-size: 10px !important;
}

/* Stronger body text contrast (only outside dark sections: see overrides below) */
p {
  color: #374151;
  line-height: 1.75;
}

/* === 1. CONCRETE GRAIN TEXTURE: dark sections === */
[style*="background: #1A3550"],
[style*="background:#1A3550"],
[style*="background: linear-gradient(135deg,#1A3550"],
[style*="background:linear-gradient(135deg,#1A3550"],
section[class*="dark"],
.bg-slate-dark,
footer {
  position: relative;
}

section[class*="dark"]::before,
footer::before,
[style*="background: #1A3550"]::before,
[style*="background:#1A3550"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
  opacity: 0.04;
  mix-blend-mode: overlay;
}
/* Make sure direct content sits above the grain layer */
section[class*="dark"] > *,
footer > * {
  position: relative;
  z-index: 1;
}

/* === 2. DOT GRID PATTERN: light sections === */
section[class*="light"],
.bg-off-white,
[style*="background: #F8F7F5"],
[style*="background:#F8F7F5"] {
  background-image: radial-gradient(circle, rgba(45,89,134,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* === 3. GOLD ACCENT RULE on every eyebrow === */
.eyebrow::before,
[class*="eyebrow"]::before {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: #C4A882;
  margin: 0 auto 12px;
}
/* Reusable utility class for manual placement */
.section-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: #C4A882;
  margin: 0 auto 20px;
}

/* === 5. SECTION SPACING: consistent vertical rhythm === */
main > section {
  padding-top: clamp(72px, 8vw, 120px) !important;
  padding-bottom: clamp(72px, 8vw, 120px) !important;
}
@media (max-width: 640px) {
  main > section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
}

/* ──────────────────────────────────────────────────────
   FINAL POLISH PASS
   Micro-details that separate good from premium.
────────────────────────────────────────────────────── */

/* === STAT NUMBERS: broad selector pattern === */
.stat-num,
.hero-stat-num,
[class*="stat-number"],
[class*="stat-num"]:not([class*="stat-num-label"]) {
  font-size: clamp(52px, 6vw, 80px) !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
}
.stat-label,
.hero-stat-label,
[class*="stat-label"] {
  font-size: 12px !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
/* Light vs dark backgrounds for the label */
[style*="background:#1A3550"] .stat-label,
[style*="background: #1A3550"] .stat-label,
[style*="background:#0d1f2d"] .stat-label,
[class*="dark"] .stat-label,
.hero-stat-label {
  color: rgba(255, 255, 255, 0.65) !important;
}
[style*="background:#F8F7F5"] .stat-label,
[style*="background: #F8F7F5"] .stat-label,
[style*="background:white"] .stat-label,
[style*="background: white"] .stat-label,
[class*="light"] .stat-label {
  color: #6B7280 !important;
}
/* Unit suffix styling: render any inline span inside a stat number at 60% */
.stat-num .unit,
.hero-stat-num .unit,
[class*="stat-num"] sup,
[class*="stat-num"] .suffix {
  font-size: 60% !important;
  font-weight: 700 !important;
  vertical-align: super;
  margin-left: 2px;
  letter-spacing: 0;
}

/* === BUTTONS: refined hover === */
.btn-primary,
.btn-cta,
a.btn-primary,
button.btn-primary {
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}
.btn-primary:hover,
.btn-cta:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(196, 168, 130, 0.35) !important;
}

.btn-outline,
.btn-ghost,
a.btn-outline,
button.btn-outline {
  transition: all 0.2s ease !important;
}
.btn-outline:hover,
.btn-ghost:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  background: rgba(196, 168, 130, 0.08) !important;
}

/* === CARD HOVER STATES: generic fallback === */
.feature-card,
.usp-card,
.problem-card,
.psip-card,
.testi-card,
.process-card,
.why-card,
.gallery-item,
.related-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.feature-card:hover,
.usp-card:hover,
.problem-card:hover,
.psip-card:hover,
.testi-card:hover,
.process-card:hover,
.why-card:hover,
.gallery-item:hover,
.related-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.10);
}

/* === STANDALONE SECTION PHOTOS === */
.skip-image,
.finish-image,
.article-hero-img-wrap img,
.calendar-card,
.book-card.calendar-card {
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

/* === LOCATION SIDEBAR PHOTO CAPTION === */
.sidebar-photo {
  position: relative;
}
.sidebar-photo-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(10, 22, 35, 0.78);
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 8px 14px;
  text-align: center;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 2;
}

/* === GOLD LINK TREATMENTS === */
a[style*="color:#A6803C"],
a[style*="color: #A6803C"],
.gold-link,
a.text-accent,
.loc-content a,
.testi-name + a {
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s ease;
}
a[style*="color:#A6803C"]:hover,
a[style*="color: #A6803C"]:hover,
.gold-link:hover {
  text-decoration: underline;
  text-decoration-color: rgba(196, 168, 130, 0.5);
  text-decoration-thickness: 1px;
}

/* === FOOTER REFINEMENT === */
footer {
  border-top: 1px solid rgba(196, 168, 130, 0.2) !important;
}
footer h3 {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  color: #C4A882 !important;
}

/* ──────────────────────────────────────────────────────
   PREMIUM DEPTH: patterns, decorative SVG, fades
   Uses pseudo-elements where possible to avoid clobbering
   existing inline `style="background:..."` declarations.
────────────────────────────────────────────────────── */

:root {
  --rebar-pattern: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23C4A882' stroke-width='0.4' stroke-opacity='0.12'%3E%3Cline x1='0' y1='30' x2='60' y2='30'/%3E%3Cline x1='30' y1='0' x2='30' y2='60'/%3E%3Ccircle cx='30' cy='30' r='2' fill='%23C4A882' fill-opacity='0.08'/%3E%3Ccircle cx='0' cy='0' r='2' fill='%23C4A882' fill-opacity='0.08'/%3E%3Ccircle cx='60' cy='0' r='2' fill='%23C4A882' fill-opacity='0.08'/%3E%3Ccircle cx='0' cy='60' r='2' fill='%23C4A882' fill-opacity='0.08'/%3E%3Ccircle cx='60' cy='60' r='2' fill='%23C4A882' fill-opacity='0.08'/%3E%3C/g%3E%3C/svg%3E");
  --aggregate-pattern: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%232D5986' fill-opacity='0.04'%3E%3Ccircle cx='10' cy='10' r='2'/%3E%3Ccircle cx='30' cy='10' r='1.5'/%3E%3Ccircle cx='20' cy='25' r='2.5'/%3E%3Ccircle cx='5' cy='30' r='1'/%3E%3Ccircle cx='35' cy='28' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* === Rebar grid pattern on dark sections (layered via ::after so we
   don't clobber the inline gradient backgrounds) === */
.cta-section,
.why-us-section,
.stats-bar,
section.psip,
section[class*="dark"],
[id="hero"][data-variant="home"],
footer {
  position: relative;
}
.cta-section::after,
.why-us-section::after,
.stats-bar::after,
section.psip::after,
section[class*="dark"]::after,
[id="hero"][data-variant="home"]::after,
footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--rebar-pattern);
  background-size: 60px 60px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}
/* Make sure existing content sits above the rebar overlay */
.cta-section > *,
.why-us-section > *,
.stats-bar > *,
section.psip > *,
[id="hero"][data-variant="home"] > * {
  position: relative;
  z-index: 2;
}

/* === Aggregate dot pattern on light service/FAQ/testimonial sections === */
.services-section,
.faq,
.testimonials,
.testi,
.problem,
.skip,
.finish,
.process,
.gallery {
  position: relative;
}
.services-section::after,
.faq::after,
.testimonials::after,
.testi::after,
.problem::after,
.skip::after,
.finish::after,
.process::after,
.gallery::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--aggregate-pattern);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
  opacity: 0.7;
}
.services-section > *,
.faq > *,
.testimonials > *,
.testi > *,
.problem > *,
.skip > *,
.finish > *,
.process > *,
.gallery > * {
  position: relative;
  z-index: 1;
}

/* === Gradient fade transitions === */
/* Gold accent strip above CTA / final-cta sections */
.cta-section::before,
[id="final-cta"]::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C4A882, transparent);
  z-index: 3;
}
/* Gold accent strip below the homepage hero */
[id="hero"][data-variant="home"]::before {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #C4A882 40%, #C4A882 60%, transparent);
  z-index: 3;
}

/* === Eyebrow gradient line: replaces the earlier solid line === */
.eyebrow::before,
[class*="eyebrow"]::before {
  content: '' !important;
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #C4A882, transparent) !important;
  margin: 0 auto 12px !important;
}

/* Reusable section-cap utility */
.section-cap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 0 0 8px;
}
.section-cap::before,
.section-cap::after {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C4A882);
}
.section-cap::after {
  background: linear-gradient(90deg, #C4A882, transparent);
}

/* StatsBar photo background removed: was washing out the numbers */

/* === Mobile sanity guards === */
@media (max-width: 640px) {
  /* Hero clearance under the sticky/transparent header */
  #hero[data-variant="home"] .hero-body {
    padding-top: 110px !important;
  }
  /* Stats bar 2x2 grid */
  .stats-bar .grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Decorative rebar already hidden < 1024px in component */
}