/* ==========================================================================
   Premium Polish — Design Overlay for Idaho Solar Cleaning
   Layers on top of existing Tailwind CSS. "Premium Corporate" aesthetic.
   ========================================================================== */

/* --- Typography: Playfair Display for headings --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800;900&display=swap');

h1, h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  letter-spacing: -0.03em !important;
}

/* --- Color Deepening: override CSS custom properties --- */
:root {
  --brand-primary: #0284c7;
  --brand-primary-light: #38bdf8;
  --brand-primary-dark: #0369a1;
  --brand-secondary: #020617;
}

/* Override Tailwind-generated color utility classes */
.bg-navy-900 {
  background-color: #020617 !important;
}

.bg-primary-500 {
  background-color: #0284c7 !important;
}

.bg-primary-600 {
  background-color: #0369a1 !important;
}

.text-primary-500 {
  color: #0284c7 !important;
}

.text-primary-400 {
  color: #38bdf8 !important;
}

.text-primary-600 {
  color: #0369a1 !important;
}

.text-primary-700 {
  color: #0c4a6e !important;
}

.bg-primary-100 {
  background-color: #e0f2fe !important;
}

.bg-primary-50 {
  background-color: #f0f9ff !important;
}

.border-primary-400 {
  border-color: #38bdf8 !important;
}

.from-navy-900 {
  --tw-gradient-from: #020617 var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.via-navy-900 {
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #020617 var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-navy-900\/40 {
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / .4) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-navy-900\/60 {
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / .6) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

.via-navy-900\/80 {
  --tw-gradient-to: rgb(2 6 23 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), rgb(2 6 23 / .8) var(--tw-gradient-via-position), var(--tw-gradient-to);
}

/* --- Glassmorphism Header --- */
.header-float .header-inner {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.4) inset;
}

.header-float.scrolled .header-inner {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(32px) saturate(200%);
  -webkit-backdrop-filter: blur(32px) saturate(200%);
  border: 1px solid rgba(2, 132, 199, 0.1);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.08),
    0 0 0 1px rgba(2, 132, 199, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.5) inset;
}

/* --- Card Hover: subtle shadow enhancement only, no transforms --- */
.group.bg-white.rounded-3xl:hover {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

/* --- Button Hover: subtle shadow lift, no glows --- */
.btn-primary:hover,
.btn-secondary:hover,
.btn-white:hover,
a[href="/contact/"].bg-white:hover,
a[href="/contact/"].bg-primary-500:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

/* --- Section Spacing: fluid, universal breathing room --- */

/* Base: generous padding on ALL main content sections */
#main-content > section {
  padding-top: clamp(4rem, 8vw, 7rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

/* Large content sections (homepage) get even more room */
#main-content > section[class*="py-32"] {
  padding-top: clamp(5rem, 10vw, 9rem) !important;
  padding-bottom: clamp(5rem, 10vw, 9rem) !important;
}

/* CTA accent sections — tighter, they're accent bands */
#main-content > section[class*="bg-primary-500"] {
  padding-top: clamp(4rem, 7vw, 6rem) !important;
  padding-bottom: clamp(4rem, 7vw, 6rem) !important;
}

/* Hero / first sections use their own padding — don't override */
#main-content > section:first-child {
  padding-top: unset !important;
  padding-bottom: unset !important;
}

/* Thin trust-bar / accent-strip sections keep their compact padding */
#main-content > section[class*="py-4"],
#main-content > section[class*="py-6"] {
  padding-top: revert !important;
  padding-bottom: revert !important;
}

/* Blog image sections with no py-* class — don't inject padding */
#main-content > section:not([class*="py-"]) {
  padding-top: revert !important;
  padding-bottom: revert !important;
}

/* Space below section headers */
#main-content > section .mb-16 {
  margin-bottom: 4rem !important;
}

#main-content > section .mb-24 {
  margin-bottom: 5.5rem !important;
}

/* --- Floating Badge Enhancement --- */
.shadow-float {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.2),
    0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Glass effect for the absolute positioned badge ("30% Efficiency Restored") */
.absolute.bg-primary-500.rounded-3xl {
  backdrop-filter: blur(8px) saturate(150%);
  -webkit-backdrop-filter: blur(8px) saturate(150%);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* --- Ghost Numbers: static decorative element --- */
.ghost-number {
  font-size: 4.5rem !important;
  opacity: 0.04;
}

/* --- Stats Section on Dark Background: static styling only --- */
.bg-navy-900 .grid-cols-2 > div {
  padding: 1.5rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.02);
}

/* --- Subtle image zoom in service cards --- */
.group img {
  transition: transform 0.3s ease !important;
}

/* Reduce scale from 1.05 to 1.02 — subtle, not jumpy */
.group:hover img {
  --tw-scale-x: 1.02 !important;
  --tw-scale-y: 1.02 !important;
}

/* --- Shadow Image Enhancement --- */
.shadow-image {
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.12),
    0 10px 24px rgba(0, 0, 0, 0.08) !important;
}

/* --- FAQ item hover: subtle only --- */
.faq-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* --- Footer subtle refinement --- */
footer.bg-navy-900 {
  background-color: #020617 !important;
}

/* --- Floating call button: clean shadow, no glow/scale --- */
a.fixed.bg-primary-500.rounded-full {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

a.fixed.bg-primary-500.rounded-full:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* --- Back to top button: clean, no glow --- */
#back-to-top {
  transition: background-color 0.2s ease !important;
}

/* --- Dropdown menu refinement --- */
.group .bg-white.rounded-2xl.shadow-lg {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.08),
    0 4px 12px rgba(0, 0, 0, 0.04) !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* --- Hero section subtle text shadow --- */
.h-screen h1 {
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.15);
}

/* --- Reduced Motion: respect user preference --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .group:hover img {
    transform: none !important;
  }
}