/* ==========================================================================
   Rainmaker Art — Premium Purple Theme Override
   Design system: Rainmaker Premium Purple
   Font: Plus Jakarta Sans 400/600/700/800
   ========================================================================== */

/* --- Google Font Import --- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

/* --- CSS Custom Properties --- */
:root {
  --rm-bg: #0D0B1A;
  --rm-surface: #1A1530;
  --rm-ink: #F0EDF7;
  --rm-accent: #7B2FBE;
  --rm-accent-light: #A855F7;
  --rm-accent-glow: #C084FC;
  --rm-cta-green: #4ADE80;
  --rm-muted: #9B8FBB;
  --rm-border: #2D2547;
  --rm-font: 'Plus Jakarta Sans', sans-serif;
  --rm-rounded-sm: 6px;
  --rm-rounded-md: 12px;
  --rm-rounded-lg: 20px;
  --rm-rounded-pill: 999px;
}

/* --- NOISE TEXTURE OVERLAY (site-wide) --- */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.035;
  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.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- GLOBAL BODY & BACKGROUND --- */
body,
html {
  background: linear-gradient(160deg, #0D0B1A 0%, #130F26 40%, #1A1530 100%) !important;
  background-attachment: fixed !important;
  font-family: var(--rm-font) !important;
  color: var(--rm-ink) !important;
}

/* Leverage theme overrides */
.wrapper,
#content,
.page-template-default,
body.page,
.elementor,
.elementor-section,
.elementor-element,
section,
.hero,
.section,
#home,
.slide,
.swiper-slide,
.featured {
  background-color: transparent !important;
}

/* Remove any black backgrounds */
[style*="background-color: #000"],
[style*="background-color:#000"],
[style*="background: #000"],
[style*="background:#000"],
[style*="background-color: black"],
[style*="background-color: rgb(0, 0, 0)"] {
  background-color: var(--rm-bg) !important;
}

/* --- TYPOGRAPHY --- */
h1, h2, h3, h4, h5, h6,
.title, .heading,
[class*="heading"],
[class*="title"] {
  font-family: var(--rm-font) !important;
  font-weight: 800 !important;
  color: var(--rm-ink) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.02em !important;
}

p, li, span, a, div, td, th, label, input, textarea, select, button {
  font-family: var(--rm-font) !important;
}

h1 { font-size: clamp(2.5rem, 5vw, 4rem) !important; }
h2 { font-size: clamp(2rem, 4vw, 3rem) !important; }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem) !important; }

p, li, .text, .description {
  color: var(--rm-muted) !important;
  font-weight: 400 !important;
  line-height: 1.65 !important;
}

/* Hero specific typography */
.hero h1,
.slide h1,
#home h1 {
  font-size: clamp(2.75rem, 6vw, 4.5rem) !important;
  font-weight: 800 !important;
  color: #FFFFFF !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
}

.hero h1 em,
.slide h1 em,
.hero h1 i {
  font-style: italic !important;
  color: var(--rm-accent-glow) !important;
}

/* --- HEADER / NAVBAR --- */
header,
nav,
.navbar,
.navbar-expand,
#header,
.header,
.nav-container {
  background: rgba(13, 11, 26, 0.85) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--rm-border) !important;
  font-family: var(--rm-font) !important;
}

.navbar .nav-link,
.navbar a,
nav a,
.menu-item a {
  color: var(--rm-ink) !important;
  font-family: var(--rm-font) !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.01em !important;
  transition: color 0.25s ease !important;
}

.navbar .nav-link:hover,
nav a:hover,
.menu-item a:hover {
  color: var(--rm-accent-glow) !important;
}

/* Header CTA button */
.navbar .btn,
.navbar .btn-primary,
nav .btn,
header .btn,
header .cta,
a.smooth-anchor[href="#contact"] {
  background: linear-gradient(135deg, var(--rm-accent) 0%, var(--rm-accent-light) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--rm-rounded-pill) !important;
  padding: 10px 24px !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  font-family: var(--rm-font) !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(123, 47, 190, 0.3) !important;
}

.navbar .btn:hover,
nav .btn:hover,
header .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 28px rgba(168, 85, 247, 0.45) !important;
}

/* --- CARDS & SURFACES --- */
.card,
.pricing-card,
.service-card,
[class*="card"],
.item,
.feature,
.odd,
.even {
  background: var(--rm-surface) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-lg) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.card:hover,
[class*="card"]:hover {
  border-color: rgba(168, 85, 247, 0.4) !important;
  box-shadow: 0 8px 32px rgba(123, 47, 190, 0.15) !important;
}

/* --- BUTTONS (Primary CTA) --- */
.btn-primary,
.btn-success,
button[type="submit"],
.cta-button,
input[type="submit"],
.wpcf7-submit {
  background: linear-gradient(135deg, var(--rm-accent) 0%, var(--rm-accent-light) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--rm-rounded-pill) !important;
  padding: 14px 32px !important;
  font-weight: 700 !important;
  font-family: var(--rm-font) !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: transform 0.2s ease, box-shadow 0.3s ease !important;
  box-shadow: 0 4px 20px rgba(123, 47, 190, 0.3) !important;
  letter-spacing: 0.01em !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.5) !important;
}

/* Secondary / Ghost buttons */
.btn-secondary,
.btn-outline,
.ghost-btn {
  background: transparent !important;
  color: var(--rm-accent-light) !important;
  border: 1px solid var(--rm-accent-light) !important;
  border-radius: var(--rm-rounded-pill) !important;
  font-family: var(--rm-font) !important;
  font-weight: 600 !important;
  transition: all 0.3s ease !important;
}

.btn-secondary:hover,
.btn-outline:hover {
  background: rgba(168, 85, 247, 0.1) !important;
  border-color: var(--rm-accent-glow) !important;
}

/* --- FORMS --- */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
textarea,
select,
.wpcf7-form-control,
.form-control {
  background: rgba(26, 21, 48, 0.6) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-md) !important;
  color: var(--rm-ink) !important;
  font-family: var(--rm-font) !important;
  padding: 14px 18px !important;
  font-size: 0.95rem !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--rm-accent-light) !important;
  box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.2) !important;
  outline: none !important;
}

input::placeholder,
textarea::placeholder {
  color: rgba(155, 143, 187, 0.5) !important;
}

label {
  color: var(--rm-muted) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-bottom: 6px !important;
}

/* --- FORM CARD (Multi-step router) --- */
.form-card,
.project-router,
.contact-form-wrapper,
[class*="form-wrapper"],
[class*="audit-form"],
#contact .card,
.step-form {
  background: var(--rm-surface) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-lg) !important;
  padding: 2rem !important;
  box-shadow: 0 16px 48px rgba(13, 11, 26, 0.5) !important;
}

/* --- SECTION BACKGROUNDS --- */
section,
.section,
[class*="section"] {
  position: relative;
}

/* Purple gradient for hero section */
.hero-section,
.hero,
#home,
.slide,
.swiper-slide {
  background: linear-gradient(160deg, #0D0B1A 0%, #18123A 50%, rgba(123, 47, 190, 0.15) 100%) !important;
}

/* Alternate section backgrounds */
section:nth-child(even),
.section:nth-child(even) {
  background: rgba(26, 21, 48, 0.3) !important;
}

section:nth-child(odd),
.section:nth-child(odd) {
  background: transparent !important;
}

/* --- CITY BLOCKS / LOCATION CARDS (DigitalSilk style) --- */
.city-card,
.location-card,
[class*="location"] a,
[class*="city"] a,
.local-pages a,
[class*="local"] .card {
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--rm-rounded-lg) !important;
  min-height: 220px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 1.5rem !important;
  background-size: cover !important;
  background-position: center !important;
  border: 1px solid var(--rm-border) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.city-card::before,
.location-card::before,
[class*="location"] a::before,
[class*="city"] a::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 70% !important;
  background: linear-gradient(to top, rgba(13, 11, 26, 0.95), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.city-card:hover,
.location-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(123, 47, 190, 0.2) !important;
}

/* --- TABS --- */
.tab-btn,
.nav-tabs .nav-link,
.tab-link,
[role="tab"] {
  background: transparent !important;
  color: var(--rm-muted) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-pill) !important;
  padding: 8px 20px !important;
  font-family: var(--rm-font) !important;
  font-weight: 600 !important;
  font-size: 0.85rem !important;
  transition: all 0.25s ease !important;
}

.tab-btn.active,
.tab-btn:hover,
.nav-tabs .nav-link.active,
[role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, var(--rm-accent) 0%, var(--rm-accent-light) 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
}

/* --- STATS COUNTERS --- */
.stat-number,
.counter,
[class*="stat"] strong,
[class*="metric"] {
  color: var(--rm-accent-glow) !important;
  font-weight: 800 !important;
  font-family: var(--rm-font) !important;
}

/* --- PRICING CARDS --- */
.pricing-card,
[class*="pricing"] .card,
[class*="price"] .card {
  background: var(--rm-surface) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-lg) !important;
}

.pricing-card .price,
[class*="pricing"] .amount {
  color: #FFFFFF !important;
  font-weight: 800 !important;
}

/* Best value badge */
.best-value,
.popular,
.featured-plan {
  border-color: var(--rm-accent-light) !important;
  box-shadow: 0 0 0 1px var(--rm-accent-light), 0 8px 32px rgba(123, 47, 190, 0.2) !important;
}

/* --- ACCORDION / FAQ --- */
.accordion-item,
[class*="faq"] .item,
details {
  background: var(--rm-surface) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-md) !important;
  margin-bottom: 8px !important;
}

summary,
.accordion-header,
.faq-question {
  color: var(--rm-ink) !important;
  font-weight: 600 !important;
  font-family: var(--rm-font) !important;
}

/* --- FOOTER --- */
footer,
.footer,
#footer {
  background: rgba(13, 11, 26, 0.95) !important;
  border-top: 1px solid var(--rm-border) !important;
  font-family: var(--rm-font) !important;
}

footer a,
.footer a {
  color: var(--rm-muted) !important;
  transition: color 0.25s ease !important;
}

footer a:hover,
.footer a:hover {
  color: var(--rm-accent-glow) !important;
}

footer h4,
footer h5,
footer .heading {
  color: var(--rm-ink) !important;
  font-weight: 700 !important;
}

/* --- LINKS --- */
a {
  color: var(--rm-accent-light) !important;
  transition: color 0.25s ease !important;
}

a:hover {
  color: var(--rm-accent-glow) !important;
}

/* --- DIVIDERS & BORDERS --- */
hr, .divider {
  border-color: var(--rm-border) !important;
  opacity: 0.5 !important;
}

/* --- SCROLLBAR --- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--rm-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--rm-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--rm-accent);
}

/* --- SELECTION --- */
::selection {
  background: rgba(168, 85, 247, 0.3);
  color: #FFFFFF;
}

/* --- STICKY BOTTOM BAR --- */
.sticky-bar,
.bottom-bar,
[class*="sticky-footer"],
[class*="bottom-cta"] {
  background: rgba(13, 11, 26, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border-top: 1px solid var(--rm-border) !important;
}

/* --- PORTFOLIO / WORK SECTION --- */
.portfolio-item,
.work-card,
[class*="portfolio"] .card,
[class*="case-study"] {
  border-radius: var(--rm-rounded-lg) !important;
  overflow: hidden !important;
  border: 1px solid var(--rm-border) !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.portfolio-item:hover,
.work-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 40px rgba(123, 47, 190, 0.15) !important;
}

/* --- TESTIMONIAL CARDS --- */
.testimonial,
[class*="testimonial"] .card,
.review-card {
  background: var(--rm-surface) !important;
  border: 1px solid var(--rm-border) !important;
  border-radius: var(--rm-rounded-lg) !important;
}

.stars,
.rating,
[class*="star"] {
  color: #FBBF24 !important;
}

/* --- PROCESS / HOW WE WORK STEPS --- */
.step-number,
.process-number {
  color: var(--rm-accent-glow) !important;
  font-weight: 800 !important;
  font-size: 3rem !important;
  opacity: 0.3 !important;
}

/* --- BADGE / TAG --- */
.badge,
.tag,
.label-tag {
  background: rgba(123, 47, 190, 0.15) !important;
  color: var(--rm-accent-light) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
  border-radius: var(--rm-rounded-pill) !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 4px 12px !important;
}

/* --- CHECKMARKS / TRUST INDICATORS --- */
.check-icon,
.trust-badge,
[class*="check"] svg {
  color: var(--rm-cta-green) !important;
}

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 768px) {
  h1 { font-size: 2.25rem !important; }
  h2 { font-size: 1.75rem !important; }
  h3 { font-size: 1.25rem !important; }
  
  .hero h1, .slide h1 {
    font-size: 2.5rem !important;
  }
}

/* --- Z-INDEX MANAGEMENT --- */
body > * {
  position: relative;
  z-index: 1;
}

body::before {
  z-index: 0;
}