/*
Theme Name: psychic-tarot-reading-onlinenet-theme
Author: WP Net Control
Version: 1.0.0
Text Domain: psychic-tarot-reading-onlinenet-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root{--color-primary:#1A0A2E;--color-secondary:#3D1A6E;--color-accent:#D4A843;--color-bg:#110820;--color-bg-alt:#1A0F30;--color-text:#E0D8F0;--color-text-light:#A098B0;--color-border:#2E1E4E;--color-success:#4caf50;--color-danger:#ef5350;--font-heading:'Cinzel', serif;--font-body:'Crimson Text', serif;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--shadow-sm:0 1px 4px rgba(0,0,0,0.4);--shadow-md:0 4px 20px rgba(61,26,110,0.3);--shadow-lg:0 8px 40px rgba(212,168,67,0.15);--spacing-xs:4px;--spacing-sm:8px;--spacing-md:16px;--spacing-lg:32px;--spacing-xl:64px;--transition:0.3s ease}

body{font-family:var(--font-body)!important;background-color:var(--color-bg);color:var(--color-text);line-height:1.7}
h1,h2,h3,h4,h5,h6,.wp-block-heading{font-family:var(--font-heading)!important;color:var(--color-accent);font-weight:500;line-height:1.2;letter-spacing:0.08em;text-transform:uppercase}
h1{font-size:clamp(1.8rem,4.5vw,3rem);letter-spacing:0.12em}
h2{font-size:clamp(1.5rem,3.5vw,2.2rem)}
h3{font-size:clamp(1.2rem,2.5vw,1.6rem)}
p{font-size:1.1rem;font-weight:400}
a{color:var(--color-accent);text-decoration:none;transition:all var(--transition)}
a:hover{color:#E8C060;text-shadow:0 0 10px rgba(212,168,67,0.4)}
header.wp-block-template-part{background:rgba(17,8,32,0.95);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0;backdrop-filter:blur(12px)}
.wp-block-site-title a{font-family:var(--font-heading)!important;color:var(--color-accent)!important;font-size:1.4rem;letter-spacing:0.12em;text-transform:uppercase}
.wp-block-navigation a{color:var(--color-text);font-weight:400;padding:var(--spacing-sm) var(--spacing-md);transition:all var(--transition);font-family:var(--font-heading);font-size:0.85rem;letter-spacing:0.06em;text-transform:uppercase}
.wp-block-navigation a:hover{color:var(--color-accent)}
.wp-element-button,.wp-block-button__link{background:transparent!important;color:var(--color-accent)!important;font-family:var(--font-heading)!important;font-weight:600;padding:var(--spacing-md) var(--spacing-lg);border-radius:var(--radius-sm);border:2px solid var(--color-accent)!important;transition:all var(--transition);font-size:0.95rem;letter-spacing:0.1em;text-transform:uppercase}
.wp-element-button:hover,.wp-block-button__link:hover{background:var(--color-accent)!important;color:var(--color-primary)!important;box-shadow:0 0 30px rgba(212,168,67,0.4),inset 0 0 20px rgba(212,168,67,0.1);transform:translateY(-2px)}
.wp-block-cover{min-height:650px;padding:var(--spacing-xl)}
.wp-block-cover .wp-block-cover__background{background:radial-gradient(ellipse at top center,#2A1050 0%,var(--color-primary) 60%,#0A0418 100%)!important}
.wp-block-group{padding:var(--spacing-lg)}
.wp-block-columns{gap:var(--spacing-lg)}
.wp-block-image img{border-radius:var(--radius-md);box-shadow:0 4px 24px rgba(61,26,110,0.4);border:2px solid rgba(212,168,67,0.3)}
.wp-block-quote{border-left:3px solid var(--color-accent);padding:var(--spacing-lg);background:rgba(61,26,110,0.15);border-radius:0 var(--radius-md) var(--radius-md) 0}
.wp-block-quote cite{color:var(--color-accent);font-weight:600;font-family:var(--font-heading);letter-spacing:0.05em;text-transform:uppercase;font-size:0.85rem}
.wp-block-separator{border-top:none;height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);margin:var(--spacing-xl) auto;opacity:0.4}
input[type="text"],input[type="email"],textarea,select{width:100%;padding:var(--spacing-md);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-family:var(--font-body);background:rgba(26,15,48,0.8);color:var(--color-text);transition:border-color var(--transition)}
input:focus,textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 2px rgba(212,168,67,0.15),0 0 16px rgba(212,168,67,0.1)}
footer.wp-block-template-part{background:linear-gradient(180deg,var(--color-bg-alt) 0%,#0A0418 100%);color:var(--color-text);padding:var(--spacing-xl) var(--spacing-lg);border-top:1px solid var(--color-border)}
footer.wp-block-template-part a{color:var(--color-accent)}
footer.wp-block-template-part a:hover{color:#E8C060}
.tarot-hero-title{font-family:var(--font-heading)!important;font-size:clamp(2rem,5vw,3.2rem);color:var(--color-accent)!important;text-align:center;letter-spacing:0.15em;text-transform:uppercase;text-shadow:0 0 40px rgba(212,168,67,0.3)}
.tarot-hero-subtitle{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(224,216,240,0.8)!important;text-align:center;font-family:var(--font-body);font-style:italic;max-width:600px;margin:0 auto var(--spacing-lg)}
.tarot-section{padding:var(--spacing-xl) var(--spacing-lg);max-width:1100px;margin:0 auto}
.tarot-section-alt{background:var(--color-bg-alt);padding:var(--spacing-xl) var(--spacing-lg)}
.tarot-card{background:rgba(26,15,48,0.6);border:2px solid rgba(212,168,67,0.25);border-radius:var(--radius-lg);padding:var(--spacing-xl);transition:all var(--transition);position:relative;overflow:hidden}
.tarot-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,rgba(212,168,67,0.05) 0%,transparent 50%,rgba(61,26,110,0.1) 100%);pointer-events:none}
.tarot-card:hover{border-color:var(--color-accent);box-shadow:0 0 30px rgba(212,168,67,0.2),0 0 60px rgba(61,26,110,0.15);transform:translateY(-4px)}
.tarot-testimonial{background:rgba(61,26,110,0.15);padding:var(--spacing-xl);margin:var(--spacing-lg) 0;border-radius:var(--radius-lg);border:1px solid rgba(212,168,67,0.2);position:relative}
.tarot-testimonial::before{content:'✦';font-size:1.5rem;color:var(--color-accent);opacity:0.4;position:absolute;top:var(--spacing-md);left:var(--spacing-md)}
.tarot-cta-section{background:linear-gradient(135deg,#0A0418 0%,var(--color-secondary) 50%,#0A0418 100%);color:#fff;padding:var(--spacing-xl);text-align:center;position:relative;overflow:hidden;border-top:1px solid rgba(212,168,67,0.2);border-bottom:1px solid rgba(212,168,67,0.2)}
.tarot-cta-section h2{color:var(--color-accent)!important;position:relative;z-index:1}
.tarot-cta-section p{color:rgba(224,216,240,0.85);position:relative;z-index:1;max-width:550px;margin:0 auto var(--spacing-lg)}
.tarot-ornate{border:1px solid rgba(212,168,67,0.3);padding:var(--spacing-xs);border-radius:var(--radius-sm)}
.tarot-ornate>*{border:1px solid rgba(212,168,67,0.15);border-radius:var(--radius-sm);padding:var(--spacing-lg)}
.tarot-gold-line{height:1px;background:linear-gradient(90deg,transparent,var(--color-accent),transparent);margin:var(--spacing-xl) auto;border:none;opacity:0.4}
@media(max-width:781px){.wp-block-columns{flex-direction:column!important}.wp-block-column{flex-basis:100%!important}}
@media(max-width:600px){.wp-element-button,.wp-block-button__link{width:100%;text-align:center;display:block}.wp-block-cover{min-height:500px}}
@media(prefers-reduced-motion:reduce){*{transition-duration:0.01ms!important}}

/* ============================================
   FRONT PAGE TEMPLATE STYLES
   ============================================ */

/* Navigation */
.nav{background:rgba(17,8,32,0.95);border-bottom:1px solid var(--color-border);padding:var(--spacing-md) 0;backdrop-filter:blur(12px);position:sticky;top:0;z-index:100}
.nav-brand a{font-family:var(--font-heading)!important;color:var(--color-accent)!important;font-size:1.3rem;letter-spacing:0.12em;text-transform:uppercase;text-decoration:none}
.main-navigation .menu li a{color:var(--color-text);font-family:var(--font-heading);font-size:0.82rem;letter-spacing:0.06em;text-transform:uppercase;padding:8px 14px;transition:all var(--transition);text-decoration:none}
.main-navigation .menu li a:hover,.main-navigation .menu li.current-menu-item a{color:var(--color-accent)}
.nav-link{display:inline-block}

/* Hero Section */
.hero{
  min-height:600px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--spacing-xl) var(--spacing-lg);
  background:
    linear-gradient(180deg, rgba(17,8,32,0.3) 0%, rgba(17,8,32,0.6) 50%, var(--color-bg) 100%),
    url('/wp-content/uploads/2026/03/hero-bg.webp') center/cover no-repeat;
  position:relative
}
.hero h1{margin-bottom:var(--spacing-md)}
.hero p{font-size:clamp(1.05rem,2vw,1.3rem);color:rgba(224,216,240,0.8);font-style:italic;max-width:600px;margin:0 auto var(--spacing-lg)}

/* Buttons */
.btn{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:600;
  padding:14px 32px;
  border-radius:var(--radius-sm);
  font-size:0.95rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  text-decoration:none;
  transition:all var(--transition);
  cursor:pointer
}
.btn-primary{background:var(--color-accent);color:var(--color-primary)!important;border:2px solid var(--color-accent)}
.btn-primary:hover{background:#E8C060;box-shadow:0 0 30px rgba(212,168,67,0.5);transform:translateY(-2px)}
.btn-outline{background:transparent;color:var(--color-accent)!important;border:2px solid var(--color-accent)}
.btn-outline:hover{background:var(--color-accent);color:var(--color-primary)!important;transform:translateY(-2px)}
.btn:not(.btn-primary):not(.btn-outline){background:var(--color-accent);color:var(--color-primary)!important;border:2px solid var(--color-accent)}
.btn:not(.btn-primary):not(.btn-outline):hover{background:#E8C060;box-shadow:0 0 30px rgba(212,168,67,0.5);transform:translateY(-2px)}

/* Sections */
.section{padding:var(--spacing-xl) var(--spacing-lg);max-width:1200px;margin:0 auto}
.section-title{text-align:center;margin-bottom:var(--spacing-xl)}
.section-title h2{margin-bottom:var(--spacing-sm)}
.section-title p{color:var(--color-text-light);font-style:italic;font-size:1.05rem}
.section-alt{
  background:
    linear-gradient(135deg, rgba(61,26,110,0.2) 0%, rgba(17,8,32,0.95) 100%),
    url('/wp-content/uploads/2026/03/testimonial-bg.webp') center/cover no-repeat;
  padding:var(--spacing-xl) 0
}

/* Card Grid */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:var(--spacing-lg);
  max-width:1200px;
  margin:0 auto
}

/* Cards */
.card{
  background:rgba(26,15,48,0.6);
  border:2px solid rgba(212,168,67,0.2);
  border-radius:var(--radius-lg);
  padding:var(--spacing-lg);
  transition:all var(--transition);
  position:relative;
  overflow:hidden
}
.card::before{
  content:'';position:absolute;top:0;left:0;right:0;bottom:0;
  background:linear-gradient(135deg,rgba(212,168,67,0.04) 0%,transparent 50%,rgba(61,26,110,0.08) 100%);
  pointer-events:none
}
.card:hover{border-color:var(--color-accent);box-shadow:0 0 30px rgba(212,168,67,0.15);transform:translateY(-4px)}
.card h3 a{text-decoration:none}

/* Icon Circle */
.icon-circle{
  width:56px;height:56px;
  border-radius:50%;
  background:rgba(212,168,67,0.12);
  border:1px solid rgba(212,168,67,0.3);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;
  color:var(--color-accent)
}

/* Testimonials */
.testimonial{
  background:rgba(61,26,110,0.15);
  padding:var(--spacing-lg);
  border-radius:var(--radius-lg);
  border:1px solid rgba(212,168,67,0.15);
  position:relative
}
.testimonial p{font-size:1.1rem;line-height:1.8;color:var(--color-text);font-style:italic}
.testimonial .author{margin-top:var(--spacing-md);display:flex;align-items:center;gap:12px}
.testimonial .author strong{color:var(--color-accent);font-family:var(--font-heading);letter-spacing:0.05em;text-transform:uppercase;font-size:0.85rem}
.testimonial .author span{color:var(--color-text-light);font-size:0.85rem}

/* CTA Section */
.cta-section{
  background:
    linear-gradient(135deg, rgba(10,4,24,0.85) 0%, rgba(61,26,110,0.7) 50%, rgba(10,4,24,0.85) 100%),
    url('/wp-content/uploads/2026/03/cta-bg.webp') center/cover no-repeat;
  color:#fff;
  padding:var(--spacing-xl) var(--spacing-lg);
  text-align:center;
  border-top:1px solid rgba(212,168,67,0.2);
  border-bottom:1px solid rgba(212,168,67,0.2)
}
.cta-section h2{margin-bottom:var(--spacing-sm)}
.cta-section p{color:rgba(224,216,240,0.85);max-width:550px;margin:0 auto var(--spacing-lg)}

/* Readers Section */
.readers-section{
  background:
    linear-gradient(180deg, var(--color-bg) 0%, rgba(26,15,48,0.4) 50%, var(--color-bg) 100%),
    url('/wp-content/uploads/2026/03/about-section.webp') center/cover no-repeat;
  padding:var(--spacing-xl) 0
}
.reader-card{
  background:rgba(26,15,48,0.7);
  border:2px solid rgba(212,168,67,0.2);
  border-radius:var(--radius-lg);
  padding:var(--spacing-lg);
  text-align:center;
  transition:all var(--transition);
  backdrop-filter:blur(8px)
}
.reader-card:hover{border-color:var(--color-accent);box-shadow:0 0 40px rgba(212,168,67,0.2);transform:translateY(-4px)}
.reader-avatar{
  width:120px;height:120px;
  border-radius:50%;
  border:3px solid rgba(212,168,67,0.4);
  object-fit:cover;
  margin:0 auto var(--spacing-md);
  display:block;
  box-shadow:0 0 20px rgba(212,168,67,0.2)
}
.reader-card h3{font-size:1.1rem;margin-bottom:4px}
.reader-role{color:var(--color-accent);font-family:var(--font-heading);font-size:0.8rem;letter-spacing:0.08em;text-transform:uppercase;margin-bottom:var(--spacing-md)}
.reader-card p{font-size:0.95rem;color:var(--color-text-light);line-height:1.6}
.reader-specialties{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:var(--spacing-md)}
.reader-specialties span{
  background:rgba(212,168,67,0.1);
  border:1px solid rgba(212,168,67,0.25);
  color:var(--color-accent);
  font-size:0.75rem;
  padding:4px 12px;
  border-radius:20px;
  font-family:var(--font-heading);
  letter-spacing:0.05em;
  text-transform:uppercase
}
.reader-rating{color:var(--color-accent);font-size:0.9rem;margin-top:var(--spacing-sm)}
.reader-rating .stars{letter-spacing:2px}

/* How It Works */
.how-section{
  background:
    linear-gradient(135deg, rgba(17,8,32,0.92) 0%, rgba(26,15,48,0.9) 100%),
    url('/wp-content/uploads/2026/03/how-it-works.webp') center/cover no-repeat;
  padding:var(--spacing-xl) 0
}
.step-card{text-align:center;position:relative}
.step-number{
  width:48px;height:48px;
  border-radius:50%;
  background:var(--color-accent);
  color:var(--color-primary);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto var(--spacing-md);
  box-shadow:0 0 20px rgba(212,168,67,0.3)
}
.step-card h3{font-size:1rem;margin-bottom:8px}
.step-card p{color:var(--color-text-light);font-size:0.95rem}

/* Footer */
.footer{
  background:linear-gradient(180deg,var(--color-bg-alt) 0%,#0A0418 100%);
  color:var(--color-text);
  padding:var(--spacing-xl) var(--spacing-lg);
  border-top:1px solid var(--color-border)
}
.footer a{color:var(--color-accent)}
.footer a:hover{color:#E8C060}
.footer-brand{font-family:var(--font-heading);color:var(--color-accent);font-size:1.2rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:var(--spacing-md)}
.footer-links{display:flex;flex-wrap:wrap;gap:var(--spacing-md);list-style:none;padding:0}
.footer-links li a{color:var(--color-text-light);font-size:0.9rem}
.footer-links li a:hover{color:var(--color-accent)}
.site-info{color:var(--color-text-light);font-size:0.85rem}

/* Mobile Menu */
@media(max-width:768px){
  .site-header-inner{flex-wrap:wrap}
  .menu-toggle{display:block!important;color:var(--color-accent)!important;font-size:1.8rem!important}
  #site-navigation{display:none;width:100%;order:3}
  #site-navigation.toggled{display:block}
  #site-navigation .menu{flex-direction:column;padding:var(--spacing-md) 0!important}
  .hero{min-height:450px;padding:var(--spacing-lg)}
  .card-grid{grid-template-columns:1fr}
}