/*
Theme Name: Spark Automations
Theme URI: https://sparkautomations.co.uk
Description: Spark Automations child theme based on Astra. Dark, electric design for sparkautomations.co.uk. Edit this file to update global styles.
Author: Dan Kerfoot
Author URI: https://sparkautomations.co.uk
Template: astra
Version: 1.0.0
Text Domain: spark-automations
Tags: dark, automation, business
*/

/* =============================================
   SPARK AUTOMATIONS — MASTER THEME
   Edit variables below to update sitewide
   ============================================= */

:root {
  --black: #080810;
  --dark: #0d0d1a;
  --card: #111122;
  --cyan: #00d4ff;
  --cyan-dim: rgba(0,212,255,0.12);
  --cyan-glow: rgba(0,212,255,0.4);
  --orange: #ff6b1a;
  --orange-dim: rgba(255,107,26,0.12);
  --orange-glow: rgba(255,107,26,0.3);
  --white: #f0f4ff;
  --muted: rgba(240,244,255,0.5);
  --border: rgba(0,212,255,0.18);
  --border-orange: rgba(255,107,26,0.3);
}

/* ---- RESET ASTRA DEFAULTS ---- */
body {
  background: var(--black) !important;
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
}

/* Remove Astra's white backgrounds */
.site-content,
.ast-container,
.entry-content,
#content,
.ast-article-single,
.post-page-content,
.site-main {
  background: var(--black) !important;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4, h5,
.entry-title,
.ast-archive-title {
  font-family: 'Rajdhani', sans-serif !important;
  letter-spacing: 0.02em !important;
  line-height: 1.15 !important;
  color: var(--white) !important;
}

/* Override Astra heading sizes */
h1, .entry-title { font-size: clamp(2rem, 4.5vw, 3.8rem) !important; font-weight: 700 !important; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem) !important; font-weight: 700 !important; }
h3 { font-size: clamp(1.15rem, 2vw, 1.5rem) !important; font-weight: 700 !important; }
h4 { font-size: 1.1rem !important; font-weight: 700 !important; }

/* Hero headline specifically */
.spark-hero h1 {
  font-size: clamp(2rem, 4.5vw, 3.8rem) !important;
}

p {
  color: var(--muted);
  line-height: 1.75;
}

p strong { color: var(--white); }

a { color: var(--cyan); }
a:hover { color: var(--white); }

/* ---- REMOVE ASTRA PAGE TITLE ---- */
.ast-archive-description,
.page-title,
.ast-page-title-wrap,
.entry-header .entry-title,
.ast-single-post-order .entry-header {
  display: none !important;
}

/* ---- ASTRA HEADER OVERRIDE ---- */
.main-header-bar,
#masthead,
.site-header,
.ast-desktop-header,
.ast-primary-header-bar {
  background: transparent !important;
  border-bottom: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 100 !important;
  padding: 0.8rem 2rem !important;
  transition: all 0.4s ease !important;
  box-shadow: none !important;
}

.main-header-bar.scrolled,
.site-header.scrolled,
#masthead.scrolled {
  background: rgba(8,8,16,0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* Logo */
.site-logo-img,
.custom-logo,
.ast-site-identity img {
  max-height: 46px !important;
  width: auto !important;
}

.site-title a,
.ast-site-title-wrap a,
.site-branding a {
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.3rem !important;
  font-weight: 700 !important;
  color: var(--cyan) !important;
  letter-spacing: 0.1em !important;
  text-decoration: none !important;
}

/* Nav links */
.main-navigation a,
.ast-nav-menu > li > a,
#site-navigation a {
  color: var(--muted) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 0.82rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: color 0.3s !important;
  background: transparent !important;
}

.main-navigation a:hover,
.ast-nav-menu > li > a:hover,
.ast-nav-menu > li:hover > a {
  color: var(--cyan) !important;
  background: transparent !important;
}

/* Hide old Reservation button from previous theme */
.ast-nav-menu li a[href*="reservation"],
.ast-nav-menu li a[href="#"] {
  display: none !important;
}

/* Last nav item styled as CTA button */
.ast-nav-menu > li:last-child > a {
  border: 1px solid var(--cyan) !important;
  color: var(--cyan) !important;
  padding: 0.4rem 1rem !important;
  border-radius: 4px !important;
  background: transparent !important;
}
.ast-nav-menu > li:last-child > a:hover {
  background: var(--cyan-dim) !important;
}

/* Mobile nav */
.ast-mobile-menu-trigger-fill,
.ast-mobile-menu-trigger span,
.menu-toggle span { background: var(--cyan) !important; }
.ast-header-break-point .main-navigation,
.ast-mobile-popup-wrapper { background: rgba(8,8,16,0.98) !important; }
.ast-header-break-point .main-navigation ul li a { border-bottom: 1px solid var(--border) !important; padding: 0.9rem 1.5rem !important; }

/* ---- FOOTER OVERRIDE ---- */
.site-footer,
#colophon,
.footer-bar-wrap {
  background: var(--black) !important;
  border-top: 1px solid var(--border) !important;
  color: var(--muted) !important;
}

.ast-footer-copyright,
.ast-small-footer {
  color: var(--muted) !important;
  font-size: 0.82rem !important;
}

/* ---- LAYOUT ---- */
.ast-container,
.site-content .ast-container {
  max-width: 1100px !important;
}

/* Padding for fixed header */
.site-content,
.ast-above-header-bar + .main-header-bar + .content-above {
  padding-top: 80px !important;
}

/* ---- CIRCUIT BACKGROUND ---- */
.circuit-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image:
    linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
  z-index: 0;
}

/* ---- BUTTONS ---- */
.btn-primary,
.wp-block-button__link,
.wpcf7-submit {
  display: inline-block !important;
  background: var(--cyan) !important;
  color: var(--black) !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 0.9rem 2.2rem !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  border: none !important;
  cursor: pointer !important;
  transition: all 0.3s !important;
}

.btn-primary:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 0 30px var(--cyan-glow) !important;
  color: var(--black) !important;
}

.btn-secondary {
  display: inline-block;
  background: transparent;
  color: var(--cyan);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border-radius: 4px;
  text-decoration: none;
  border: 1px solid var(--cyan);
  transition: all 0.3s;
}

.btn-secondary:hover {
  background: var(--cyan-dim);
  transform: translateY(-2px);
  color: var(--cyan);
}

.btn-orange {
  display: inline-block;
  background: var(--orange);
  color: var(--black);
  font-family: 'Rajdhani', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border-radius: 4px;
  text-decoration: none;
  border: none;
  transition: all 0.3s;
}

.btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px var(--orange-glow);
  color: var(--black);
}

/* ---- CARDS ---- */
.spark-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  transition: all 0.35s;
}

.spark-card:hover {
  border-color: var(--cyan);
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,212,255,0.08);
}

.spark-card.featured {
  border-color: rgba(0,212,255,0.45);
  background: linear-gradient(135deg, var(--card) 0%, rgba(0,212,255,0.04) 100%);
}

/* ---- SECTION UTILITIES ---- */
.section-dark {
  background: var(--dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.section-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 0.85rem;
}

.section-padding {
  padding: 6rem 2rem;
}

/* ---- BADGES ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.35rem 0.9rem;
  border-radius: 100px;
}

.badge-cyan {
  background: var(--cyan-dim);
  border: 1px solid rgba(0,212,255,0.35);
  color: var(--cyan);
}

.badge-orange {
  background: var(--orange-dim);
  border: 1px solid var(--border-orange);
  color: var(--orange);
}

/* ---- FEATURE LIST ---- */
.feature-list { list-style: none; margin-top: 1rem; }

.feature-list li {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 0.4rem 0 0.4rem 1.4rem;
  position: relative;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.feature-list li:last-child { border-bottom: none; }

.feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--cyan);
}

/* ---- PRICE TAG ---- */
.price-tag {
  font-family: 'Rajdhani', sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--orange);
  line-height: 1;
  margin: 0.75rem 0;
}

/* ---- CTA STRIP ---- */
.cta-strip {
  background: var(--dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 5rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.cta-strip::before {
  content: '';
  position: absolute;
  top: -50%; left: 50%;
  transform: translateX(-50%);
  width: 700px; height: 700px;
  background: radial-gradient(ellipse, rgba(0,212,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* ---- ANIMATIONS ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ---- WORDPRESS BLOCK EDITOR OVERRIDES ---- */
.wp-block-group { background: transparent !important; }
.wp-block-separator { border-color: var(--border) !important; }
.wp-block-quote { border-left-color: var(--cyan) !important; background: var(--card) !important; }

/* ---- WPCF7 FORM STYLES ---- */
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
  background: var(--dark) !important;
  border: 1px solid var(--border) !important;
  border-radius: 4px !important;
  color: var(--white) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  padding: 0.8rem 1rem !important;
  width: 100% !important;
}

.wpcf7-form input:focus,
.wpcf7-form textarea:focus {
  border-color: var(--cyan) !important;
  outline: none !important;
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .section-padding { padding: 4rem 1.25rem; }

  .ast-nav-menu-container,
  .main-navigation {
    background: rgba(8,8,16,0.98) !important;
  }
}