/*
 Theme Name:   PrintForge 3D Child
 Theme URI:    https://yoursite.com
 Description:  PrintForge 3D — Divi Child Theme. Futuristic dark aesthetic with cyan & magenta neon accents. Edit freely in Divi Builder.
 Author:       PrintForge 3D
 Author URI:   https://yoursite.com
 Template:     Divi
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  printforge-divi-child
*/

/* ============================================================
   PRINTFORGE 3D — GLOBAL DESIGN TOKENS
   Mirrors the original React/Tailwind site exactly.
   ============================================================ */

:root {
  /* ── Brand Colors ── */
  --pf-cyan:          hsl(185, 100%, 50%);   /* #00f5ff  — primary accent */
  --pf-magenta:       hsl(320, 100%, 60%);   /* #ff33cc  — secondary accent */
  --pf-cyan-dim:      hsl(185, 80%, 40%);    /* hover / muted cyan */
  --pf-cyan-10:       hsla(185, 100%, 50%, 0.10);
  --pf-cyan-20:       hsla(185, 100%, 50%, 0.20);
  --pf-magenta-10:    hsla(320, 100%, 60%, 0.10);

  /* ── Background & Surface ── */
  --pf-bg:            hsl(220, 20%, 4%);     /* near-black navy */
  --pf-card:          hsl(220, 18%, 8%);
  --pf-card-border:   hsl(220, 15%, 12%);
  --pf-muted:         hsl(220, 15%, 12%);
  --pf-muted-fg:      hsl(220, 10%, 55%);

  /* ── Foreground ── */
  --pf-fg:            hsl(210, 20%, 98%);    /* white */
  --pf-fg-muted:      hsl(220, 10%, 70%);

  /* ── Typography ── */
  --pf-font-display:  'Space Grotesk', sans-serif;
  --pf-font-body:     'Inter', system-ui, sans-serif;
  --pf-font-mono:     'JetBrains Mono', monospace;

  /* ── Radius ── */
  --pf-radius:        0.75rem;
  --pf-radius-lg:     1rem;
  --pf-radius-xl:     1.5rem;

  /* ── Transitions ── */
  --pf-transition:    all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body,
body.et_pb_pagebuilder_layout.et_full_width_page {
  background-color: var(--pf-bg) !important;
  color: var(--pf-fg) !important;
  font-family: var(--pf-font-body) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--pf-bg); }
::-webkit-scrollbar-thumb { background: var(--pf-muted); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: hsla(185, 100%, 50%, 0.5); }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.et_pb_text h1, .et_pb_text h2,
.et_pb_text h3, .et_pb_text h4 {
  font-family: var(--pf-font-display) !important;
  color: var(--pf-fg) !important;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

p, li,
.et_pb_text p {
  font-family: var(--pf-font-body) !important;
  color: var(--pf-fg-muted) !important;
  line-height: 1.65;
}

/* Gradient headings — apply class .pf-gradient-text */
.pf-gradient-text,
.pf-gradient-text * {
  background: linear-gradient(135deg, var(--pf-cyan) 0%, var(--pf-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Mono code labels */
.pf-mono {
  font-family: var(--pf-font-mono) !important;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ============================================================
   LINKS & GLOBAL OVERRIDES
   ============================================================ */

a, .et_pb_more_button {
  color: var(--pf-cyan);
  transition: var(--pf-transition);
}
a:hover { color: var(--pf-magenta); }

/* ============================================================
   DIVI CONTAINER OVERRIDES
   ============================================================ */

#page-container,
.et_pb_section,
.et-l--body {
  background-color: transparent !important;
}

.et_pb_row {
  max-width: 1280px !important;
}

/* Force dark backgrounds on all Divi sections unless overridden */
.et_pb_section {
  background-color: var(--pf-bg) !important;
}

/* ============================================================
   NAVIGATION / HEADER
   ============================================================ */

#main-header,
.et-fixed-header {
  background: hsla(220, 20%, 4%, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid var(--pf-card-border) !important;
  box-shadow: none !important;
}

/* Logo text */
#logo,
.et_pb_logo {
  font-family: var(--pf-font-display) !important;
}

/* Nav links */
#top-menu a,
#top-menu > li > a {
  font-family: var(--pf-font-body) !important;
  color: var(--pf-fg-muted) !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.025em !important;
  transition: var(--pf-transition) !important;
  padding: 0 1rem !important;
}

#top-menu a:hover,
#top-menu > li:hover > a,
#top-menu > li.current-menu-item > a {
  color: var(--pf-cyan) !important;
}

/* Mobile menu */
#et_mobile_nav_menu a {
  color: var(--pf-fg) !important;
  font-family: var(--pf-font-body) !important;
}

/* ============================================================
   BUTTONS — PRIMARY
   ============================================================ */

.et_pb_button,
a.et_pb_button,
.et_pb_promo_button,
input[type="submit"],
button[type="submit"] {
  font-family: var(--pf-font-body) !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: var(--pf-cyan) !important;
  color: var(--pf-bg) !important;
  border: none !important;
  border-radius: var(--pf-radius) !important;
  padding: 0.75rem 1.75rem !important;
  cursor: pointer !important;
  transition: var(--pf-transition) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 0 0 20px hsla(185, 100%, 50%, 0.3) !important;
}

.et_pb_button::after { display: none !important; }

.et_pb_button:hover,
a.et_pb_button:hover {
  background: var(--pf-magenta) !important;
  color: var(--pf-fg) !important;
  box-shadow: 0 0 30px hsla(320, 100%, 60%, 0.4) !important;
  transform: translateY(-2px) !important;
}

/* Secondary / outline button — add class .pf-btn-outline in Divi */
.pf-btn-outline.et_pb_button,
a.pf-btn-outline.et_pb_button {
  background: transparent !important;
  border: 1px solid var(--pf-card-border) !important;
  color: var(--pf-fg) !important;
  box-shadow: none !important;
}
.pf-btn-outline.et_pb_button:hover {
  border-color: var(--pf-cyan) !important;
  color: var(--pf-cyan) !important;
  box-shadow: 0 0 15px var(--pf-cyan-10) !important;
}

/* ============================================================
   CARDS
   ============================================================ */

/* Apply .pf-card to any Divi module wrapper */
.pf-card,
.et_pb_blurb.pf-card,
.et_pb_pricing_table.pf-card {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius-lg) !important;
  padding: 1.5rem !important;
  transition: var(--pf-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pf-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--pf-cyan-10), transparent 50%, var(--pf-magenta-10));
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.pf-card:hover::before { opacity: 1; }

.pf-card:hover {
  border-color: hsla(185, 100%, 50%, 0.3) !important;
  transform: translateY(-4px) !important;
  box-shadow: 0 20px 60px hsla(220, 20%, 0%, 0.4) !important;
}

/* ============================================================
   SECTION HELPERS
   ============================================================ */

/* Dark card section bg */
.pf-section-card {
  background: var(--pf-card) !important;
}

/* Glow overlay behind hero sections */
.pf-glow-bg::before {
  content: '';
  position: absolute;
  top: -20%;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  background: radial-gradient(
    ellipse at center,
    hsla(185, 100%, 50%, 0.15) 0%,
    hsla(320, 100%, 60%, 0.08) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Grid pattern overlay — add to any section */
.pf-grid-pattern {
  background-image:
    linear-gradient(var(--pf-card-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--pf-card-border) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* Section labels above headings */
.pf-section-label {
  font-family: var(--pf-font-mono) !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: var(--pf-cyan) !important;
  border: 1px solid var(--pf-cyan-20) !important;
  background: var(--pf-cyan-10) !important;
  padding: 0.25rem 0.75rem !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin-bottom: 1rem !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.pf-hero {
  min-height: 100vh !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  background: var(--pf-bg) !important;
  overflow: hidden !important;
}

.pf-hero-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/images/hero-bg.png');
  background-size: cover;
  background-position: center;
  opacity: 0.25;
  z-index: 0;
}

.pf-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsla(220, 20%, 4%, 0.4) 0%,
    var(--pf-bg) 100%
  );
  z-index: 1;
}

.pf-hero .et_pb_row {
  position: relative;
  z-index: 2;
}

/* Hero badge */
.pf-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--pf-cyan-20);
  background: var(--pf-cyan-10);
  padding: 0.375rem 1rem;
  border-radius: 999px;
  font-family: var(--pf-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--pf-cyan);
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

/* Hero title */
.pf-hero-title {
  font-family: var(--pf-font-display) !important;
  font-size: clamp(2.5rem, 7vw, 5rem) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.03em !important;
  color: var(--pf-fg) !important;
  margin-bottom: 1.5rem !important;
}

.pf-hero-title span {
  background: linear-gradient(135deg, var(--pf-cyan) 0%, var(--pf-magenta) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pf-hero-subtitle {
  font-size: 1.125rem !important;
  color: var(--pf-fg-muted) !important;
  line-height: 1.65 !important;
  max-width: 520px;
  margin-bottom: 2.5rem !important;
}

/* Hero stats row */
.pf-stat-block {
  border-top: 1px solid var(--pf-card-border);
  padding-top: 2rem;
  margin-top: 2rem;
}

.pf-stat-number {
  font-family: var(--pf-font-display) !important;
  font-size: 2rem !important;
  font-weight: 700 !important;
  color: var(--pf-cyan) !important;
  line-height: 1 !important;
}

.pf-stat-label {
  font-size: 0.75rem !important;
  color: var(--pf-muted-fg) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

/* ============================================================
   FEATURES SECTION
   ============================================================ */

.pf-features-section {
  background: var(--pf-card) !important;
}

.pf-feature-icon {
  width: 3rem;
  height: 3rem;
  background: var(--pf-cyan-10);
  border: 1px solid var(--pf-cyan-20);
  border-radius: var(--pf-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-cyan);
  margin-bottom: 1rem;
}

/* ============================================================
   PRODUCT CARDS
   ============================================================ */

.pf-product-card {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius-lg) !important;
  overflow: hidden !important;
  transition: var(--pf-transition) !important;
}

.pf-product-card:hover {
  border-color: hsla(185, 100%, 50%, 0.3) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 25px 50px hsla(220, 20%, 0%, 0.5) !important;
}

.pf-product-image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.pf-product-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  font-family: var(--pf-font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
}

.pf-badge-new {
  background: var(--pf-cyan-10);
  border: 1px solid var(--pf-cyan-20);
  color: var(--pf-cyan);
}

.pf-badge-hot {
  background: hsla(320, 100%, 60%, 0.1);
  border: 1px solid hsla(320, 100%, 60%, 0.2);
  color: var(--pf-magenta);
}

.pf-product-price {
  font-family: var(--pf-font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--pf-cyan) !important;
}

.pf-product-price-old {
  font-size: 0.9rem;
  color: var(--pf-muted-fg);
  text-decoration: line-through;
}

/* ============================================================
   PRICING TABLES
   ============================================================ */

.pf-pricing-card {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius-xl) !important;
  padding: 2rem !important;
  transition: var(--pf-transition) !important;
}

.pf-pricing-card.pf-featured {
  border-color: var(--pf-cyan) !important;
  box-shadow: 0 0 40px var(--pf-cyan-10) !important;
  background: linear-gradient(135deg, var(--pf-card), hsl(220,18%,10%)) !important;
}

.pf-pricing-price {
  font-family: var(--pf-font-display) !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  color: var(--pf-fg) !important;
  line-height: 1 !important;
}

.pf-pricing-price .currency {
  font-size: 1.5rem;
  vertical-align: top;
  margin-top: 0.5rem;
  display: inline-block;
}

.pf-pricing-period {
  color: var(--pf-muted-fg) !important;
  font-size: 0.875rem !important;
}

.pf-check-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pf-card-border);
  color: var(--pf-fg-muted) !important;
  font-size: 0.9rem !important;
}

.pf-check-icon {
  color: var(--pf-cyan);
  flex-shrink: 0;
}

/* ============================================================
   TESTIMONIALS
   ============================================================ */

.pf-testimonial {
  background: var(--pf-card) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius-lg) !important;
  padding: 1.5rem !important;
  position: relative !important;
}

.pf-testimonial-quote {
  font-size: 3rem;
  color: var(--pf-cyan);
  line-height: 1;
  font-family: var(--pf-font-display);
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.pf-testimonial-text {
  color: var(--pf-fg-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  font-style: italic !important;
}

.pf-avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 2px solid var(--pf-cyan);
  object-fit: cover;
}

.pf-star {
  color: hsl(45, 100%, 60%);
  font-size: 0.875rem;
}

/* ============================================================
   NEWSLETTER / CTA SECTION
   ============================================================ */

.pf-cta-section {
  background: linear-gradient(135deg,
    var(--pf-card) 0%,
    hsl(220, 18%, 10%) 100%) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius-xl) !important;
  position: relative !important;
  overflow: hidden !important;
}

.pf-cta-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 500px;
  height: 500px;
  background: radial-gradient(ellipse, var(--pf-cyan-10) 0%, transparent 70%);
  pointer-events: none;
}

.pf-newsletter-input {
  background: var(--pf-bg) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius) !important;
  color: var(--pf-fg) !important;
  font-family: var(--pf-font-body) !important;
  font-size: 0.9rem !important;
  padding: 0.75rem 1rem !important;
  width: 100% !important;
  outline: none !important;
  transition: var(--pf-transition) !important;
}

.pf-newsletter-input:focus {
  border-color: var(--pf-cyan) !important;
  box-shadow: 0 0 0 3px var(--pf-cyan-10) !important;
}

.pf-newsletter-input::placeholder {
  color: var(--pf-muted-fg) !important;
}

/* Divi email opt-in override */
.et_pb_newsletter_form input[type="text"],
.et_pb_newsletter_form input[type="email"] {
  background: var(--pf-bg) !important;
  border: 1px solid var(--pf-card-border) !important;
  border-radius: var(--pf-radius) !important;
  color: var(--pf-fg) !important;
  padding: 0.75rem 1rem !important;
}

.et_pb_newsletter_form input[type="text"]:focus,
.et_pb_newsletter_form input[type="email"]:focus {
  border-color: var(--pf-cyan) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--pf-cyan-10) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */

#main-footer,
.et_pb_section.pf-footer {
  background: var(--pf-card) !important;
  border-top: 1px solid var(--pf-card-border) !important;
}

#main-footer .footer-widget h4,
#main-footer .footer-widget h3,
.et_pb_widget_area_title {
  font-family: var(--pf-font-display) !important;
  color: var(--pf-fg) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 1rem !important;
}

#main-footer .footer-widget ul li,
#main-footer .footer-widget p,
.et_pb_widget li,
.et_pb_widget p {
  color: var(--pf-muted-fg) !important;
  font-size: 0.875rem !important;
  font-family: var(--pf-font-body) !important;
  line-height: 1.8 !important;
}

#main-footer .footer-widget ul li a,
.et_pb_widget li a {
  color: var(--pf-muted-fg) !important;
  transition: var(--pf-transition) !important;
  text-decoration: none !important;
}

#main-footer .footer-widget ul li a:hover,
.et_pb_widget li a:hover {
  color: var(--pf-cyan) !important;
}

/* Bottom bar */
#footer-bottom,
.et_pb_bottom_bar {
  background: var(--pf-bg) !important;
  border-top: 1px solid var(--pf-card-border) !important;
  color: var(--pf-muted-fg) !important;
  font-size: 0.8rem !important;
  font-family: var(--pf-font-body) !important;
}

#footer-bottom a,
.et_pb_bottom_bar a {
  color: var(--pf-cyan) !important;
}

/* Footer logo / brand */
.pf-footer-brand {
  font-family: var(--pf-font-display) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--pf-fg) !important;
}

.pf-footer-brand span {
  color: var(--pf-cyan);
}

/* Footer social icons */
.pf-social-icon {
  width: 2.25rem;
  height: 2.25rem;
  background: var(--pf-muted);
  border: 1px solid var(--pf-card-border);
  border-radius: var(--pf-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pf-muted-fg);
  font-size: 0.875rem;
  transition: var(--pf-transition);
  text-decoration: none;
}

.pf-social-icon:hover {
  background: var(--pf-cyan-10);
  border-color: var(--pf-cyan-20);
  color: var(--pf-cyan);
}

/* ============================================================
   ANIMATIONS
   ============================================================ */

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

@keyframes pf-pulse-glow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

@keyframes pf-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pf-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pf-animate-float   { animation: pf-float 6s ease-in-out infinite; }
.pf-animate-glow    { animation: pf-pulse-glow 2s ease-in-out infinite; }
.pf-animate-slide-up{ animation: pf-slide-up 0.8s ease-out forwards; }
.pf-animate-fade-in { animation: pf-fade-in 0.8s ease-out forwards; }

/* Stagger helpers */
.pf-delay-100 { animation-delay: 0.1s; }
.pf-delay-200 { animation-delay: 0.2s; }
.pf-delay-300 { animation-delay: 0.3s; }
.pf-delay-400 { animation-delay: 0.4s; }

/* ============================================================
   UTILITY CLASSES (use via Divi CSS Class field)
   ============================================================ */

.pf-text-center { text-align: center !important; }
.pf-mt-0  { margin-top: 0 !important; }
.pf-mb-0  { margin-bottom: 0 !important; }
.pf-py-lg { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.pf-py-xl { padding-top: 8rem !important; padding-bottom: 8rem !important; }

/* Divider line */
.pf-divider {
  border: none !important;
  border-top: 1px solid var(--pf-card-border) !important;
  margin: 2rem 0 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 980px) {
  .pf-hero-title { font-size: clamp(2rem, 6vw, 3rem) !important; }
}

@media (max-width: 767px) {
  .et_pb_row { padding: 0 1rem !important; }
}