/* =====================================================
   NOVAZORIA PREMIUM — Dark Luxury Override
   
   Файл: assets/css/front-premium.css
   
   Підключення у functions.php:
   
   add_action('wp_enqueue_scripts', function() {
       if ( is_front_page() || is_home() ) {
           wp_enqueue_style(
               'novazoria-premium',
               get_template_directory_uri() . '/assets/css/front-premium.css',
               ['novazoria-main'],
               '2.0.0'
           );
       }
   }, 20);
   
   ===================================================== */

/* ─────────────────────────────────────────────────────
   1. CSS VARIABLES — Dark Gold Palette
   ───────────────────────────────────────────────────── */
body.home,
body.page-template-front-page {
  --bg-primary:    #08080d;
  --bg-secondary:  #0e0e16;
  --bg-card:       #13131e;
  --bg-card-hover: #1a1a2a;

  --text-primary:  #eae6e0;
  --text-secondary:#a09a92;
  --text-muted:    #6a655f;

  --accent:        #c9a96e;
  --accent-light:  #d4b67a;
  --accent-glow:   rgba(201, 169, 110, 0.10);
  --accent-border: rgba(201, 169, 110, 0.20);

  --border:        rgba(201, 169, 110, 0.08);
  --border-strong: rgba(201, 169, 110, 0.18);

  --shadow-card:   0 8px 40px rgba(0, 0, 0, 0.4);
  --shadow-glow:   0 0 50px rgba(201, 169, 110, 0.08);

  --gold-gradient:  linear-gradient(135deg, #c9a96e 0%, #e8d5a8 50%, #c9a96e 100%);

  background: var(--bg-primary);
  color: var(--text-primary);
}


/* ─────────────────────────────────────────────────────
   2. HEADER — transparent on top, dark glass on scroll
   ───────────────────────────────────────────────────── */
body.home .site-header,
body.page-template-front-page .site-header {
  background: transparent;
  border-bottom-color: transparent;
}

body.home .site-header.scrolled,
body.page-template-front-page .site-header.scrolled {
  background: rgba(8, 8, 13, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom-color: var(--border);
}

body.home .site-logo,
body.page-template-front-page .site-logo {
  color: var(--text-primary);
}

body.home .nav-menu a,
body.page-template-front-page .nav-menu a {
  color: var(--text-secondary);
}

body.home .nav-menu a:hover,
body.page-template-front-page .nav-menu a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}

body.home .nav-hamburger span,
body.page-template-front-page .nav-hamburger span {
  background: var(--text-primary);
}

/* Mobile menu dark */
body.home .nav-mobile,
body.page-template-front-page .nav-mobile {
  background: rgba(8, 8, 13, 0.98);
}

body.home .nav-mobile-menu a,
body.page-template-front-page .nav-mobile-menu a {
  color: var(--text-secondary);
}

body.home .nav-mobile-menu a:hover,
body.page-template-front-page .nav-mobile-menu a:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.04);
}


/* ─────────────────────────────────────────────────────
   3. HERO — cinematic, editorial
   ───────────────────────────────────────────────────── */
body.home .hero,
body.page-template-front-page .hero {
  min-height: 100vh;
  background: var(--bg-primary);
  padding: 140px 0 100px;
}

/* Replace grid with subtle radial */
body.home .hero-bg-grid,
body.page-template-front-page .hero-bg-grid {
  background-image: none;
  background: radial-gradient(ellipse 60% 50% at 40% 45%, rgba(201, 169, 110, 0.04) 0%, transparent 70%);
  mask-image: none;
  -webkit-mask-image: none;
}

body.home .hero-glow,
body.page-template-front-page .hero-glow {
  background: radial-gradient(circle, rgba(201, 169, 110, 0.06) 0%, transparent 60%);
  width: 800px;
  height: 800px;
}

/* Badge */
body.home .hero-badge,
body.page-template-front-page .hero-badge {
  background: rgba(201, 169, 110, 0.08);
  border-color: rgba(201, 169, 110, 0.2);
  color: var(--accent);
}

body.home .hero-badge-dot,
body.page-template-front-page .hero-badge-dot {
  background: var(--accent);
}

@keyframes pulse-gold {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(201, 169, 110, 0.4); }
  50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(201, 169, 110, 0); }
}

body.home .hero-badge-dot,
body.page-template-front-page .hero-badge-dot {
  animation: pulse-gold 2s infinite;
}

/* Title — gold accent */
body.home .hero h1,
body.page-template-front-page .hero h1 {
  color: var(--text-primary);
  font-weight: 800;
}

body.home .hero h1 .accent,
body.page-template-front-page .hero h1 .accent {
  color: var(--accent);
}

body.home .hero-desc,
body.page-template-front-page .hero-desc {
  color: var(--text-secondary);
}

/* Stats */
body.home .hero-stats,
body.page-template-front-page .hero-stats {
  border-top-color: var(--border);
}

body.home .hero-stat-num,
body.page-template-front-page .hero-stat-num {
  color: var(--accent);
}

body.home .hero-stat-label,
body.page-template-front-page .hero-stat-label {
  color: var(--text-muted);
}

/* Buttons */
body.home .btn-primary,
body.page-template-front-page .btn-primary {
  background: var(--accent);
  color: #08080d;
  font-weight: 700;
}

body.home .btn-primary:hover,
body.page-template-front-page .btn-primary:hover {
  background: var(--accent-light);
  box-shadow: 0 8px 32px rgba(201, 169, 110, 0.30);
}

body.home .btn-secondary,
body.page-template-front-page .btn-secondary {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

body.home .btn-secondary:hover,
body.page-template-front-page .btn-secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}


/* ─────────────────────────────────────────────────────
   4. SECTION LABELS & TITLES
   ───────────────────────────────────────────────────── */
body.home .section-label,
body.page-template-front-page .section-label {
  color: var(--accent);
}

body.home .section-label::before,
body.page-template-front-page .section-label::before {
  background: var(--accent);
}

body.home h2,
body.page-template-front-page h2 {
  color: var(--text-primary);
}

body.home p,
body.page-template-front-page p {
  color: var(--text-secondary);
}


/* ─────────────────────────────────────────────────────
   5. COURSES SECTION
   ───────────────────────────────────────────────────── */
body.home .courses-section,
body.page-template-front-page .courses-section {
  background: var(--bg-secondary);
}

body.home .course-card,
body.page-template-front-page .course-card {
  background: var(--bg-card);
  border-color: var(--border);
}

body.home .course-card:hover,
body.page-template-front-page .course-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card), var(--shadow-glow);
  background: var(--bg-card-hover);
}

body.home .course-card-thumb,
body.page-template-front-page .course-card-thumb {
  background: linear-gradient(135deg, var(--bg-card-hover) 0%, rgba(201, 169, 110, 0.05) 100%);
}

body.home .course-badge,
body.page-template-front-page .course-badge {
  background: var(--accent);
  color: #08080d;
  font-weight: 700;
}

body.home .course-badge.free,
body.page-template-front-page .course-badge.free {
  background: #2a7f4f;
  color: #fff;
}

body.home .course-meta,
body.page-template-front-page .course-meta {
  color: var(--text-muted);
}

body.home .course-card h3,
body.page-template-front-page .course-card h3 {
  color: var(--text-primary);
}

body.home .course-card-footer,
body.page-template-front-page .course-card-footer {
  border-top-color: var(--border);
}

body.home .course-price,
body.page-template-front-page .course-price {
  color: var(--accent);
}

body.home .course-price.free,
body.page-template-front-page .course-price.free {
  color: #4ade80;
}

/* "Усі курси" button */
body.home .courses-section .btn-secondary,
body.page-template-front-page .courses-section .btn-secondary {
  border-color: var(--accent-border);
  color: var(--accent);
}

body.home .courses-section .btn-secondary:hover,
body.page-template-front-page .courses-section .btn-secondary:hover {
  background: var(--accent);
  color: #08080d;
  border-color: var(--accent);
}


/* ─────────────────────────────────────────────────────
   6. ABOUT SECTION
   ───────────────────────────────────────────────────── */
body.home .about-section,
body.page-template-front-page .about-section {
  background: var(--bg-primary);
}

body.home .about-image,
body.page-template-front-page .about-image {
  background: var(--bg-card);
  border-radius: 4px;
  overflow: hidden;
}

/* Subtle gold border on image */
body.home .about-image-wrap::after,
body.page-template-front-page .about-image-wrap::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid var(--accent-border);
  border-radius: 4px;
  pointer-events: none;
}

body.home .about-image-wrap,
body.page-template-front-page .about-image-wrap {
  position: relative;
}

body.home .about-card-float,
body.page-template-front-page .about-card-float {
  background: var(--bg-card);
  border-color: var(--accent-border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

body.home .about-card-float .num,
body.page-template-front-page .about-card-float .num {
  color: var(--accent);
}

body.home .about-card-float .label,
body.page-template-front-page .about-card-float .label {
  color: var(--text-muted);
}

body.home .about-tag,
body.page-template-front-page .about-tag {
  background: transparent;
  border-color: var(--border-strong);
  color: var(--text-secondary);
}

body.home .about-tag:hover,
body.page-template-front-page .about-tag:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}


/* ─────────────────────────────────────────────────────
   7. TESTIMONIALS
   ───────────────────────────────────────────────────── */
body.home .testimonials-section,
body.page-template-front-page .testimonials-section {
  background: var(--bg-secondary);
}

body.home .testimonial-card,
body.page-template-front-page .testimonial-card {
  background: var(--bg-card);
  border-color: var(--border);
}

body.home .testimonial-card:hover,
body.page-template-front-page .testimonial-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-glow);
}

body.home .testimonial-stars span,
body.page-template-front-page .testimonial-stars span {
  color: var(--accent);
}

body.home .testimonial-text,
body.page-template-front-page .testimonial-text {
  color: var(--text-secondary);
}

body.home .testimonial-text::before,
body.page-template-front-page .testimonial-text::before {
  color: var(--accent);
}

body.home .testimonial-author,
body.page-template-front-page .testimonial-author {
  border-top-color: var(--border);
}

body.home .testimonial-avatar,
body.page-template-front-page .testimonial-avatar {
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  color: #08080d;
}

body.home .testimonial-name,
body.page-template-front-page .testimonial-name {
  color: var(--text-primary);
}

body.home .testimonial-role,
body.page-template-front-page .testimonial-role {
  color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────
   8. FAQ
   ───────────────────────────────────────────────────── */
body.home .faq-section,
body.page-template-front-page .faq-section {
  background: var(--bg-primary);
}

body.home .faq-item,
body.page-template-front-page .faq-item {
  background: var(--bg-card);
  border-color: var(--border);
}

body.home .faq-item.active,
body.page-template-front-page .faq-item.active {
  border-color: var(--accent-border);
}

body.home .faq-question,
body.page-template-front-page .faq-question {
  color: var(--text-primary);
}

body.home .faq-question:hover,
body.page-template-front-page .faq-question:hover {
  color: var(--accent);
}

body.home .faq-icon,
body.page-template-front-page .faq-icon {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

body.home .faq-item.active .faq-icon,
body.page-template-front-page .faq-item.active .faq-icon {
  background: var(--accent);
  border-color: var(--accent);
  color: #08080d;
}

body.home .faq-answer-inner,
body.page-template-front-page .faq-answer-inner {
  color: var(--text-secondary);
}


/* ─────────────────────────────────────────────────────
   9. BLOG SECTION (on front page)
   ───────────────────────────────────────────────────── */
body.home .blog-section,
body.page-template-front-page .blog-section {
  background: var(--bg-secondary);
}

body.home .blog-section .blog-card,
body.page-template-front-page .blog-section .blog-card {
  background: var(--bg-card);
  border-color: var(--border);
}

body.home .blog-section .blog-card:hover,
body.page-template-front-page .blog-section .blog-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-card);
}

body.home .blog-category,
body.page-template-front-page .blog-category {
  color: var(--accent);
}

body.home .blog-section .blog-card h3,
body.page-template-front-page .blog-section .blog-card h3 {
  color: var(--text-primary);
}

body.home .blog-meta,
body.page-template-front-page .blog-meta {
  border-top-color: var(--border);
  color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────
   10. CTA BANNER
   ───────────────────────────────────────────────────── */
body.home .cta-section,
body.page-template-front-page .cta-section {
  background: var(--bg-primary);
}

body.home .cta-inner,
body.page-template-front-page .cta-inner {
  background: linear-gradient(135deg, var(--bg-card) 0%, rgba(201, 169, 110, 0.06) 100%);
  border-color: var(--accent-border);
}

body.home .cta-inner::before,
body.page-template-front-page .cta-inner::before {
  background: radial-gradient(circle, rgba(201, 169, 110, 0.08) 0%, transparent 70%);
}

body.home .cta-inner h2,
body.page-template-front-page .cta-inner h2 {
  color: var(--text-primary);
}

body.home .cta-inner p,
body.page-template-front-page .cta-inner p {
  color: var(--text-secondary);
}


/* ─────────────────────────────────────────────────────
   11. FOOTER — dark variant
   ───────────────────────────────────────────────────── */
body.home .site-footer,
body.page-template-front-page .site-footer {
  background: #060609;
  border-top-color: var(--border);
}

body.home .footer-brand p,
body.page-template-front-page .footer-brand p {
  color: var(--text-muted);
}

body.home .footer-col h4,
body.page-template-front-page .footer-col h4 {
  color: var(--text-primary);
}

body.home .footer-links a,
body.page-template-front-page .footer-links a {
  color: var(--text-muted);
}

body.home .footer-links a:hover,
body.page-template-front-page .footer-links a:hover {
  color: var(--accent);
}

body.home .footer-social a,
body.page-template-front-page .footer-social a {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

body.home .footer-social a:hover,
body.page-template-front-page .footer-social a:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-glow);
}

body.home .footer-bottom,
body.page-template-front-page .footer-bottom {
  border-top-color: var(--border);
  color: var(--text-muted);
}


/* ─────────────────────────────────────────────────────
   12. TYPOGRAPHY REFINEMENT — Premium feel
   ───────────────────────────────────────────────────── */

/* Import premium fonts */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400&display=swap');

body.home .hero h1,
body.page-template-front-page .hero h1 {
  font-family: 'Cormorant Garamond', var(--font-display), serif;
  font-weight: 700;
  letter-spacing: -0.03em;
}

body.home .hero h1 .accent,
body.page-template-front-page .hero h1 .accent {
  font-style: italic;
}

body.home .about-content h2,
body.page-template-front-page .about-content h2 {
  font-family: 'Cormorant Garamond', var(--font-display), serif;
}


/* ─────────────────────────────────────────────────────
   13. LUXURY MICRO-DETAILS
   ───────────────────────────────────────────────────── */

/* Gold line accent above sections */
body.home .courses-section::before,
body.home .testimonials-section::before,
body.home .blog-section::before,
body.page-template-front-page .courses-section::before,
body.page-template-front-page .testimonials-section::before,
body.page-template-front-page .blog-section::before {
  content: '';
  display: block;
  width: 60px;
  height: 1px;
  background: var(--accent);
  margin: 0 auto;
  opacity: 0.4;
  position: relative;
  top: 0;
}

/* Subtle noise texture overlay */
body.home::after,
body.page-template-front-page::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.015;
  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.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Course card top gold line on hover */
body.home .course-card::after,
body.page-template-front-page .course-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0;
  transition: opacity 0.3s;
}

body.home .course-card,
body.page-template-front-page .course-card {
  position: relative;
  overflow: hidden;
}

body.home .course-card:hover::after,
body.page-template-front-page .course-card:hover::after {
  opacity: 1;
}

/* Testimonial card — subtle gold accent */
body.home .testimonial-card::before,
body.page-template-front-page .testimonial-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 24px;
  right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
}

body.home .testimonial-card,
body.page-template-front-page .testimonial-card {
  position: relative;
}


/* ─────────────────────────────────────────────────────
   14. ABOUT IMAGE — editorial diagonal crop
   ───────────────────────────────────────────────────── */
body.home .about-image,
body.page-template-front-page .about-image {
  border-radius: 0;
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
}

body.home .about-image img,
body.page-template-front-page .about-image img {
  filter: grayscale(0.1) contrast(1.05);
}

body.home .about-image-wrap::after,
body.page-template-front-page .about-image-wrap::after {
  clip-path: polygon(5% 0%, 100% 0%, 95% 100%, 0% 100%);
  border-radius: 0;
}


/* ─────────────────────────────────────────────────────
   15. LEARNPRESS BUTTONS — gold on dark
   ───────────────────────────────────────────────────── */
body.home .learn-press button,
body.home .learn-press .button,
body.home .lp-button,
body.page-template-front-page .learn-press button,
body.page-template-front-page .learn-press .button,
body.page-template-front-page .lp-button {
  background: var(--accent) !important;
  color: #08080d !important;
  border-color: var(--accent) !important;
}

body.home .learn-press button:hover,
body.home .lp-button:hover,
body.page-template-front-page .learn-press button:hover,
body.page-template-front-page .lp-button:hover {
  background: var(--accent-light) !important;
  border-color: var(--accent-light) !important;
}