/*
Theme Name: Jukebox Rescue
Theme URI: https://www.jukeboxrescue.com
Description: Custom dark neon theme for Jukebox Rescue — Jukebox Repair & Restoration. Child theme of Twenty Twenty-Five.
Author: Jukebox Rescue LLC
Author URI: https://www.jukeboxrescue.com
Template: twentytwentyfive
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jukebox-rescue
*/

/* ═══════════════════════════════════════════
   JUKEBOX RESCUE — CUSTOM STYLES
   Dark neon aesthetic with vintage character
   Brand Colors: #ff0eb2 #00daff #f9a507 #fafc00
   ═══════════════════════════════════════════ */

/* ── CSS VARIABLES ── */
:root {
  --jr-pink: #ff0eb2;
  --jr-cyan: #00daff;
  --jr-orange: #f9a507;
  --jr-yellow: #fafc00;
  --jr-bg-dark: #0c0810;
  --jr-bg-card: #151020;
  --jr-bg-card-hover: #1c1530;
  --jr-text-primary: #f0eee6;
  --jr-text-secondary: #a8a0b0;
  --jr-pink-glow: 0 0 20px rgba(255, 14, 178, 0.4), 0 0 60px rgba(255, 14, 178, 0.15);
  --jr-cyan-glow: 0 0 20px rgba(0, 218, 255, 0.4), 0 0 60px rgba(0, 218, 255, 0.15);
  --jr-orange-glow: 0 0 20px rgba(249, 165, 7, 0.4), 0 0 60px rgba(249, 165, 7, 0.15);
  --jr-yellow-glow: 0 0 20px rgba(250, 252, 0, 0.3), 0 0 60px rgba(250, 252, 0, 0.1);
}

/* ── GLOBAL OVERRIDES ── */
body {
  background-color: var(--jr-bg-dark) !important;
  color: var(--jr-text-primary) !important;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  line-height: 1.7;
}

/* Subtle film grain texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 128px 128px;
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4, h5, h6 {
  color: var(--jr-text-primary);
}

p {
  color: var(--jr-text-secondary);
}

a {
  color: var(--jr-cyan);
  transition: color 0.3s, text-shadow 0.3s;
}

a:hover {
  color: var(--jr-cyan);
  text-shadow: 0 0 12px rgba(0, 218, 255, 0.5);
}

/* ── HEADER / NAVIGATION ── */
.wp-site-header,
header.wp-block-template-part {
  background: rgba(12, 8, 16, 0.9) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 218, 255, 0.08);
}

.wp-block-site-title a {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.12em !important;
  color: var(--jr-pink) !important;
  text-shadow: 0 0 20px rgba(255, 14, 178, 0.5);
  text-decoration: none !important;
}

.wp-block-navigation a {
  color: var(--jr-text-secondary) !important;
  font-weight: 400 !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: color 0.3s, text-shadow 0.3s !important;
}

.wp-block-navigation a:hover,
.wp-block-navigation a:focus {
  color: var(--jr-cyan) !important;
  text-shadow: 0 0 12px rgba(0, 218, 255, 0.5);
}

/* ── FOOTER ── */
.wp-site-footer,
footer.wp-block-template-part {
  background: var(--jr-bg-dark) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* ── BUTTONS ── */
.wp-block-button.is-style-jr-primary .wp-block-button__link,
.jr-btn-primary {
  background: linear-gradient(135deg, var(--jr-pink), #d00a95) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.5rem !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: var(--jr-pink-glow);
  transition: all 0.3s;
  text-decoration: none !important;
}

.wp-block-button.is-style-jr-primary .wp-block-button__link:hover,
.jr-btn-primary:hover {
  box-shadow: 0 0 30px rgba(255, 14, 178, 0.6), 0 0 80px rgba(255, 14, 178, 0.2);
  transform: translateY(-2px);
}

.wp-block-button.is-style-jr-secondary .wp-block-button__link,
.jr-btn-secondary {
  background: transparent !important;
  color: var(--jr-cyan) !important;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 1rem 2.5rem !important;
  border: 1.5px solid var(--jr-cyan) !important;
  border-radius: 0 !important;
  transition: all 0.3s;
  text-decoration: none !important;
}

.wp-block-button.is-style-jr-secondary .wp-block-button__link:hover,
.jr-btn-secondary:hover {
  background: rgba(0, 218, 255, 0.08) !important;
  box-shadow: var(--jr-cyan-glow);
  transform: translateY(-2px);
}

/* ── HERO SECTION ── */
.jr-hero {
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

.jr-hero::before {
  content: '';
  position: absolute;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 900px;
  background: radial-gradient(ellipse, rgba(255, 14, 178, 0.07) 0%, rgba(0, 218, 255, 0.04) 30%, rgba(249, 165, 7, 0.02) 50%, transparent 70%);
  pointer-events: none;
}

.jr-hero-title {
  font-family: 'Abril Fatface', serif !important;
  font-size: clamp(2.5rem, 5vw, 4.2rem) !important;
  line-height: 1.15 !important;
  color: var(--jr-text-primary) !important;
  margin-bottom: 1rem !important;
}

.jr-hero-title .jr-accent {
  background: linear-gradient(135deg, var(--jr-pink), var(--jr-orange));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.jr-tagline {
  font-family: 'Playfair Display', serif !important;
  font-style: italic;
  font-size: 1.35rem !important;
  color: var(--jr-cyan) !important;
  text-shadow: 0 0 20px rgba(0, 218, 255, 0.3);
  margin-bottom: 0.5rem !important;
}

/* ── FLOATING LOGO ── */
.jr-logo-float {
  width: 270px;
  height: 270px;
  margin: 0 auto 2.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: jr-float 6s ease-in-out infinite;
}

.jr-logo-float::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--jr-pink), var(--jr-cyan), var(--jr-yellow), var(--jr-orange), var(--jr-pink));
  opacity: 0.35;
  filter: blur(14px);
  animation: jr-spin 12s linear infinite;
}

.jr-logo-float img {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  position: relative;
  z-index: 1;
  object-fit: cover;
}

@keyframes jr-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

@keyframes jr-spin {
  to { transform: rotate(360deg); }
}

/* ── SERVICE CARDS ── */
.jr-services-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

.jr-service-card {
  background: var(--jr-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 2.2rem 1.8rem !important;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
}

.jr-service-card:hover {
  background: var(--jr-bg-card-hover) !important;
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.jr-service-card h3 {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 600 !important;
  font-size: 1.15rem !important;
  margin-bottom: 0.7rem !important;
  color: var(--jr-text-primary) !important;
}

.jr-service-card p {
  color: var(--jr-text-secondary) !important;
  font-size: 0.92rem !important;
  line-height: 1.7 !important;
}

.jr-service-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 1rem;
}

.jr-neon-tag {
  display: inline-block;
  margin-top: 0.8rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border: 1px solid;
  opacity: 0.7;
  font-family: 'Playfair Display', serif;
  font-style: italic;
}

.jr-neon-tag-cyan { color: var(--jr-cyan); border-color: rgba(0, 218, 255, 0.4); }
.jr-neon-tag-pink { color: var(--jr-pink); border-color: rgba(255, 14, 178, 0.4); }
.jr-neon-tag-orange { color: var(--jr-orange); border-color: rgba(249, 165, 7, 0.4); }
.jr-neon-tag-yellow { color: var(--jr-yellow); border-color: rgba(250, 252, 0, 0.4); }

/* ── LEFT ACCENT BARS ON SERVICE CARDS ── */
.jr-accent-cyan { border-left: 3px solid var(--jr-cyan) !important; }
.jr-accent-yellow { border-left: 3px solid var(--jr-yellow) !important; }
.jr-accent-pink { border-left: 3px solid var(--jr-pink) !important; }
.jr-accent-orange { border-left: 3px solid var(--jr-orange) !important; }

/* ── ABOUT SIDEBAR CARDS ── */
.jr-about-card {
  background: var(--jr-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  padding: 1.8rem !important;
  position: relative;
  overflow: hidden;
}

.jr-about-card-label {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--jr-text-secondary) !important;
  margin-bottom: 0.4rem !important;
}

.jr-about-card-value {
  font-family: 'Playfair Display', serif !important;
  font-size: 1.3rem !important;
}

.jr-glow-cyan { color: var(--jr-cyan) !important; text-shadow: 0 0 15px rgba(0, 218, 255, 0.3); }
.jr-glow-orange { color: var(--jr-orange) !important; text-shadow: 0 0 15px rgba(249, 165, 7, 0.3); }
.jr-glow-pink { color: var(--jr-pink) !important; text-shadow: 0 0 15px rgba(255, 14, 178, 0.3); }

/* Top accent bars for about cards */
.jr-top-bar-cyan::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--jr-cyan); }
.jr-top-bar-orange::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--jr-orange); }
.jr-top-bar-pink::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--jr-pink); }

/* ── QUOTE SECTION ── */
.jr-quote {
  font-family: 'Playfair Display', serif !important;
  font-style: italic;
  font-size: 1.4rem !important;
  line-height: 1.65 !important;
  color: var(--jr-text-primary) !important;
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 2rem;
}

.jr-quote-mark {
  font-size: 3.5rem;
  font-family: 'Abril Fatface', serif;
  color: var(--jr-orange);
  text-shadow: var(--jr-orange-glow);
  opacity: 0.5;
  line-height: 1;
}

/* ── VINTAGE DIVIDER ── */
.jr-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 1rem 0;
  color: var(--jr-orange);
  opacity: 0.5;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-align: center;
}

/* ── SECTION LABELS ── */
.jr-section-label {
  font-family: 'Bebas Neue', sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase;
  color: var(--jr-cyan) !important;
  text-shadow: 0 0 10px rgba(0, 218, 255, 0.4);
}

.jr-section-title {
  font-family: 'Abril Fatface', serif !important;
  font-size: clamp(2rem, 4vw, 3rem) !important;
  line-height: 1.2 !important;
  color: var(--jr-text-primary) !important;
}

.jr-section-intro {
  font-size: 1.05rem !important;
  color: var(--jr-text-secondary) !important;
  max-width: 650px;
  line-height: 1.8 !important;
}

/* ── CONTACT BOX ── */
.jr-cta-box {
  background: var(--jr-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  padding: 4rem 3rem !important;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  text-align: center;
}

.jr-cta-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--jr-pink), var(--jr-cyan), var(--jr-orange), var(--jr-yellow));
}

.jr-contact-label {
  font-size: 0.7rem !important;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--jr-orange) !important;
}

/* ── GALLERY ── */
.jr-gallery-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

.jr-gallery-item {
  background: var(--jr-bg-card) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  overflow: hidden;
  transition: all 0.3s;
}

.jr-gallery-item:hover {
  border-color: rgba(0, 218, 255, 0.15) !important;
  transform: scale(1.02);
}

.jr-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.jr-gallery-item:hover img {
  transform: scale(1.05);
}

/* ── GRADIENT LINE SEPARATORS ── */
.jr-line-gradient {
  height: 2px !important;
  background: linear-gradient(90deg, transparent 5%, var(--jr-pink) 20%, var(--jr-cyan) 50%, var(--jr-orange) 80%, transparent 95%) !important;
  opacity: 0.4;
  border: none !important;
}

/* ── HIGHLIGHT TEXT ── */
.jr-highlight {
  color: var(--jr-text-primary) !important;
  font-weight: 400;
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .jr-services-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 768px) {
  .jr-services-grid {
    grid-template-columns: 1fr !important;
  }

  .jr-gallery-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}