/* ==============================================
   JAGUAR BOOKS — MODERN UI ENHANCEMENT 2025
   Premium Design System
   ============================================== */

/* --- GOOGLE FONTS IMPORT --- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* --- CSS CUSTOM PROPERTIES (Design Tokens) --- */
:root {
  --jb-primary: #8B1A1A;
  --jb-primary-dark: #6B1010;
  --jb-primary-light: #C0392B;
  --jb-gold: #C9A84C;
  --jb-gold-light: #F0D080;
  --jb-dark: #1A1A2E;
  --jb-dark2: #16213E;
  --jb-white: #FFFFFF;
  --jb-off-white: #FAF8F5;
  --jb-light-gray: #F4F1EC;
  --jb-text: #2C2C2C;
  --jb-text-muted: #6B6B6B;
  --jb-border: rgba(0,0,0,0.08);
  --jb-shadow-sm: 0 2px 12px rgba(0,0,0,0.08);
  --jb-shadow-md: 0 8px 32px rgba(0,0,0,0.12);
  --jb-shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  --jb-shadow-card: 0 4px 24px rgba(139,26,26,0.10);
  --jb-radius: 16px;
  --jb-radius-sm: 8px;
  --jb-radius-lg: 24px;
  --jb-transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
  --jb-font-heading: 'Playfair Display', Georgia, serif;
  --jb-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ==============================================
   1. GLOBAL BASE STYLES
   ============================================== */
body {
  font-family: var(--jb-font-body) !important;
  color: var(--jb-text) !important;
  background-color: var(--jb-white) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* ==============================================
   2. HEADER / NAVIGATION — Glassmorphism
   ============================================== */
.elementor-elementor-52,
header .elementor {
  position: sticky;
  top: 0;
  z-index: 1000;
}

header,
.site-header {
  background: rgba(139,26,26,0.92) !important;
  backdrop-filter: blur(20px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 30px rgba(0,0,0,0.25) !important;
  transition: var(--jb-transition) !important;
}

/* Nav links */
.hfe-nav-menu .hfe-menu-item,
.hfe-nav-menu a {
  font-family: var(--jb-font-body) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  letter-spacing: 0.03em !important;
  color: rgba(255,255,255,0.90) !important;
  transition: var(--jb-transition) !important;
  position: relative;
  padding: 6px 2px !important;
}

.hfe-nav-menu .hfe-menu-item::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 2px;
  background: var(--jb-gold);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.hfe-nav-menu .hfe-menu-item:hover::after,
.hfe-nav-menu .current-menu-item .hfe-menu-item::after {
  width: 100%;
}

.hfe-nav-menu .hfe-menu-item:hover {
  color: var(--jb-gold-light) !important;
}

/* Active menu item */
.hfe-nav-menu .current-menu-item a {
  color: var(--jb-gold-light) !important;
}

/* ==============================================
   3. HERO SECTION — Cinematic Upgrade
   ============================================== */

/* Hero overlay — richer gradient */
.elementor-widget-slides .swiper-slide::before,
.elementor-slides-wrapper .swiper-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(26,10,10,0.88) 0%,
    rgba(100,15,15,0.70) 45%,
    rgba(139,26,26,0.20) 75%,
    transparent 100%
  ) !important;
  z-index: 1;
  pointer-events: none;
}

/* Hero content positioning */
.elementor-widget-slides .elementor-slide-content {
  position: relative;
  z-index: 2;
}

/* Hero heading — premium serif */
.elementor-slide-heading,
.elementor-widget-slides h2,
.elementor-widget-slides h1 {
  font-family: var(--jb-font-heading) !important;
  font-weight: 800 !important;
  font-size: clamp(36px, 4.5vw, 68px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: #FFFFFF !important;
  text-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
  margin-bottom: 20px !important;
}

/* Hero description */
.elementor-slide-description,
.elementor-widget-slides p {
  font-family: var(--jb-font-body) !important;
  font-size: clamp(16px, 1.4vw, 20px) !important;
  font-weight: 300 !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.88) !important;
  letter-spacing: 0.01em !important;
  max-width: 580px;
  margin-bottom: 36px !important;
}

/* Hero CTA button — primary */
.elementor-slide-button,
.elementor-widget-slides .elementor-button {
  font-family: var(--jb-font-body) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.04em !important;
  padding: 16px 36px !important;
  border-radius: 50px !important;
  background: linear-gradient(135deg, var(--jb-gold) 0%, #B8830A 100%) !important;
  color: #1A1A1A !important;
  border: none !important;
  box-shadow: 0 6px 24px rgba(201,168,76,0.40) !important;
  transition: var(--jb-transition) !important;
  text-transform: uppercase !important;
}

.elementor-slide-button:hover,
.elementor-widget-slides .elementor-button:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 36px rgba(201,168,76,0.55) !important;
  background: linear-gradient(135deg, var(--jb-gold-light) 0%, var(--jb-gold) 100%) !important;
}

/* ==============================================
   4. SECTION HEADINGS — Elegant Typography
   ============================================== */
h1, h2, h3, h4 {
  font-family: var(--jb-font-heading) !important;
}

.elementor-heading-title {
  font-family: var(--jb-font-heading) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  line-height: 1.2 !important;
}

/* Section label (small caps above heading) */
.elementor-widget-heading .elementor-heading-title[style*="color: #C9A84C"],
.elementor-heading-title[class*="subheading"] {
  font-family: var(--jb-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.15em !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
}

/* ==============================================
   5. LATEST RELEASE SECTION — Premium Card
   ============================================== */

/* The white section wrapper */
.elementor-section:has(.elementor-heading-title:contains("Latest")),
section:has(h2:contains("Latest Release")) {
  background: var(--jb-off-white) !important;
}

/* Book cover image — hover lift */
.elementor-widget-image img {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.4s ease !important;
  border-radius: 8px !important;
}

.elementor-widget-image img:hover {
  transform: translateY(-8px) rotate(-1deg) !important;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25) !important;
}

/* Latest Release book description */
.elementor-widget-text-editor p,
.elementor-text-editor p {
  font-family: var(--jb-font-body) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
  color: var(--jb-text-muted) !important;
}

/* ==============================================
   6. BUTTONS — Modern Pill Buttons
   ============================================== */

/* Primary CTA button */
.elementor-button[href*="publish"],
.elementor-button.elementor-size-md,
.woocommerce a.button,
.elementor-button {
  font-family: var(--jb-font-body) !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  border-radius: 50px !important;
  transition: var(--jb-transition) !important;
  padding: 14px 32px !important;
  font-size: 14px !important;
  text-transform: uppercase !important;
}

/* Purchase Now button */
a.elementor-button[style*="background"],
.elementor-button-wrapper:first-of-type .elementor-button {
  background: linear-gradient(135deg, var(--jb-primary) 0%, var(--jb-primary-light) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 6px 20px rgba(139,26,26,0.35) !important;
}

a.elementor-button[style*="background"]:hover,
.elementor-button-wrapper:first-of-type .elementor-button:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 12px 32px rgba(139,26,26,0.50) !important;
}

/* Outline button */
.elementor-button-wrapper:last-of-type .elementor-button,
.elementor-button[style*="border"] {
  border: 2px solid var(--jb-primary) !important;
  color: var(--jb-primary) !important;
  background: transparent !important;
  box-shadow: none !important;
}

.elementor-button-wrapper:last-of-type .elementor-button:hover {
  background: var(--jb-primary) !important;
  color: white !important;
  transform: translateY(-3px) !important;
}

/* ==============================================
   7. "WHY PUBLISH" SECTION — Modern Cards
   ============================================== */

/* Section background */
.features-section-wrapper {
  background: linear-gradient(135deg, #6B1010 0%, #8B1A1A 40%, #A52020 100%) !important;
  border-radius: 0 !important;
  position: relative;
  overflow: hidden;
}

.features-section-wrapper::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(201,168,76,0.12) 0%, transparent 70%);
  pointer-events: none;
}

/* Feature cards */
.features-section-wrapper .elementor-widget-icon-box,
.features-section-wrapper .elementor-column > .elementor-widget-wrap {
  background: rgba(255,255,255,0.07) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: var(--jb-radius) !important;
  padding: 32px 24px !important;
  text-align: center !important;
  transition: var(--jb-transition) !important;
  margin: 8px !important;
}

.features-section-wrapper .elementor-icon-box-wrapper:hover,
.features-section-wrapper .elementor-column > .elementor-widget-wrap:hover {
  background: rgba(255,255,255,0.13) !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0,0,0,0.3) !important;
  border-color: rgba(201,168,76,0.35) !important;
}

/* Card icons */
.features-section-wrapper .elementor-icon-box-icon {
  margin-bottom: 16px !important;
}

.features-section-wrapper .elementor-icon-box-icon i,
.features-section-wrapper .elementor-icon {
  font-size: 42px !important;
  background: linear-gradient(135deg, var(--jb-gold) 0%, #E8C050 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 8px rgba(201,168,76,0.4));
}

/* Card titles */
.features-section-wrapper .elementor-icon-box-title a,
.features-section-wrapper .elementor-icon-box-title {
  font-family: var(--jb-font-heading) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: #FFFFFF !important;
  margin-bottom: 10px !important;
  letter-spacing: -0.01em !important;
}

/* Card text */
.features-section-wrapper .elementor-icon-box-description {
  font-family: var(--jb-font-body) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  color: rgba(255,255,255,0.72) !important;
}

/* ==============================================
   8. UPCOMING RELEASES — Modern Book Cards
   ============================================== */

/* Book cards */
.elementor-widget-loop-carousel .elementor-loop-item,
.elementor-posts-container .elementor-post {
  border-radius: var(--jb-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--jb-shadow-card) !important;
  transition: var(--jb-transition) !important;
  background: white !important;
}

.elementor-widget-loop-carousel .elementor-loop-item:hover,
.elementor-posts-container .elementor-post:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 48px rgba(139,26,26,0.20) !important;
}

/* Coming soon badge */
.elementor-button[style*="#"],
.coming-soon-badge,
span[class*="badge"] {
  background: linear-gradient(135deg, var(--jb-gold) 0%, #B8830A 100%) !important;
  color: #1A1A1A !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  padding: 6px 14px !important;
  box-shadow: 0 4px 12px rgba(201,168,76,0.35) !important;
}

/* ==============================================
   9. CTA SECTION — "Ready to Publish" Banner
   ============================================== */

/* CTA section modern redesign */
.elementor-section:has(.elementor-button:contains("Start Publishing")):not(:first-child) {
  background: linear-gradient(135deg, var(--jb-off-white) 0%, #EDE9E3 100%) !important;
  border-radius: var(--jb-radius-lg) !important;
  margin: 40px 60px !important;
  padding: 60px !important;
  box-shadow: var(--jb-shadow-sm) !important;
  border: 1px solid rgba(139,26,26,0.08) !important;
}

/* ==============================================
   10. ABOUT SECTION — Editorial Style
   ============================================== */

.elementor-heading-title[style*="Empowering"],
.elementor-heading-title:contains("Empowering") {
  font-family: var(--jb-font-heading) !important;
  font-size: clamp(28px, 3vw, 48px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
  background: linear-gradient(135deg, var(--jb-primary) 0%, var(--jb-gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ==============================================
   11. PRODUCTS GRID — WooCommerce Cards
   ============================================== */

/* Product cards */
.woocommerce ul.products li.product,
.elementor-loop-container .e-loop-item {
  border-radius: var(--jb-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--jb-shadow-sm) !important;
  transition: var(--jb-transition) !important;
  border: 1px solid var(--jb-border) !important;
  background: white !important;
}

.woocommerce ul.products li.product:hover,
.elementor-loop-container .e-loop-item:hover {
  transform: translateY(-6px) !important;
  box-shadow: var(--jb-shadow-md) !important;
  border-color: rgba(139,26,26,0.15) !important;
}

/* Product titles */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.elementor-widget-woocommerce-product-title h2,
.elementor-widget-woocommerce-product-title h3 {
  font-family: var(--jb-font-heading) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--jb-text) !important;
  line-height: 1.3 !important;
}

/* Product price */
.woocommerce-Price-amount,
.price ins,
.price {
  font-family: var(--jb-font-body) !important;
  font-weight: 700 !important;
  font-size: 20px !important;
  color: var(--jb-primary) !important;
}

/* Add to cart buttons */
.woocommerce a.add_to_cart_button,
.woocommerce .single_add_to_cart_button {
  background: linear-gradient(135deg, var(--jb-primary) 0%, var(--jb-primary-light) 100%) !important;
  border: none !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  font-size: 13px !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  transition: var(--jb-transition) !important;
  color: white !important;
}

.woocommerce a.add_to_cart_button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(139,26,26,0.40) !important;
}

/* ==============================================
   12. SECTION DIVIDERS & SPACING
   ============================================== */

/* Elegant divider line */
.elementor-divider-separator {
  border-color: var(--jb-gold) !important;
  opacity: 0.5;
}

/* Section spacing */
.elementor-section {
  padding-top: 80px !important;
  padding-bottom: 80px !important;
}

.elementor-section.elementor-section-full_width {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ==============================================
   13. FOOTER — Dark Elegant
   ============================================== */

footer,
.site-footer,
.elementor-location-footer .elementor {
  background: linear-gradient(135deg, #0D0505 0%, #1A0808 50%, #1A1A2E 100%) !important;
  color: rgba(255,255,255,0.75) !important;
}

footer h1, footer h2, footer h3, footer h4,
footer .elementor-heading-title {
  font-family: var(--jb-font-heading) !important;
  color: white !important;
  font-weight: 700 !important;
}

footer a {
  color: rgba(255,255,255,0.65) !important;
  transition: color 0.2s ease !important;
}

footer a:hover {
  color: var(--jb-gold-light) !important;
}

/* Footer copyright */
footer p, footer .elementor-text-editor p {
  color: rgba(255,255,255,0.50) !important;
  font-size: 13px !important;
}

/* ==============================================
   14. SCROLL ANIMATIONS
   ============================================== */

/* Fade-up animation for sections */
@keyframes jb-fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes jb-scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes jb-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* Apply to key sections */
.elementor-section:not(.elementor-section-full_width) {
  animation: jb-fadeUp 0.7s cubic-bezier(0.4,0,0.2,1) both;
}

/* Stagger feature cards */
.features-section-wrapper .elementor-column:nth-child(1) { animation-delay: 0.05s; }
.features-section-wrapper .elementor-column:nth-child(2) { animation-delay: 0.15s; }
.features-section-wrapper .elementor-column:nth-child(3) { animation-delay: 0.25s; }
.features-section-wrapper .elementor-column:nth-child(4) { animation-delay: 0.35s; }
.features-section-wrapper .elementor-column:nth-child(5) { animation-delay: 0.45s; }
.features-section-wrapper .elementor-column:nth-child(6) { animation-delay: 0.55s; }

/* ==============================================
   15. "NEW RELEASE" BADGE — Modern
   ============================================== */

/* The New Release ribbon */
.elementor-section:has(.elementor-heading-title:contains("Latest")) > .elementor-container {
  position: relative;
}

/* ==============================================
   16. GLOBAL POLISH
   ============================================== */

/* Selection color */
::selection {
  background: var(--jb-primary);
  color: white;
}

/* Focus styles */
a:focus, button:focus, input:focus {
  outline: 2px solid var(--jb-gold);
  outline-offset: 3px;
}

/* Links */
a {
  transition: color 0.2s ease, opacity 0.2s ease;
}

/* Images */
img {
  max-width: 100% !important;
  height: auto !important;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--jb-primary); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--jb-primary-light); }

/* ==============================================
   17. PUBLISHING SERVICES SECTION
   ============================================== */

/* Service cards */
.elementor-icon-list-item {
  transition: var(--jb-transition) !important;
  padding: 8px 0 !important;
}

.elementor-icon-list-item:hover {
  transform: translateX(6px) !important;
}

.elementor-icon-list-item .elementor-icon-list-icon {
  color: var(--jb-gold) !important;
}

.elementor-icon-list-item .elementor-icon-list-text {
  font-family: var(--jb-font-body) !important;
  font-size: 15px !important;
  color: var(--jb-text) !important;
}

/* ==============================================
   18. SECTION BACKGROUND ACCENTS
   ============================================== */

/* Alternating section backgrounds */
.elementor-section:nth-child(even):not(.elementor-section-full_width) {
  background-color: var(--jb-off-white) !important;
}

/* ==============================================
   19. MOBILE OPTIMIZATION (PRESERVE EXISTING)
   ============================================== */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

@media (max-width: 1024px) {
  .elementor-element-e2a1a35 .e-con-inner,
  header .e-con-inner {
    overflow: hidden !important;
    max-width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
  }

  .elementor-element-6b2673d {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 60% !important;
  }

  .elementor-element-0a0ec38 {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    overflow: visible !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
  }

  .elementor-element-6623895 {
    flex: 0 0 auto !important;
    width: auto !important;
    order: 3 !important;
  }

  .hfe-nav-menu__layout-horizontal,
  nav.hfe-nav-menu__layout-horizontal {
    display: none !important;
  }

  .hfe-nav-menu__toggle {
    display: flex !important;
    visibility: visible !important;
    align-items: center !important;
    cursor: pointer !important;
  }

  .hfe-nav-menu-icon {
    visibility: visible !important;
    display: inline-block !important;
  }

  .hfe-nav-menu,
  .hfe-nav-menu .elementor-widget-container {
    width: auto !important;
    overflow: visible !important;
  }

  .elementor-section {
    padding-top: 50px !important;
    padding-bottom: 50px !important;
  }
}

.swiper-container.mySwiper, .mySwiper {
  overflow: hidden !important;
  max-width: 100% !important;
}

.elementor-loop-container.swiper,
.elementor-loop-container {
  overflow: hidden !important;
}

@media (max-width: 768px) {
  .elementor-column { width: 100% !important; }
  .elementor-section .elementor-row { flex-wrap: wrap !important; }
  h1 { font-size: 28px !important; }
  h2 { font-size: 24px !important; }
  h3 { font-size: 20px !important; }
  .elementor-heading-title { font-size: 24px !important; }
  .elementor-button, .elementor-widget-button a, .woocommerce a.button {
    padding: 14px 24px !important;
    font-size: 14px !important;
    min-height: 48px !important;
  }
  .elementor-section { padding-top: 40px !important; padding-bottom: 40px !important; }
}

@media (max-width: 1024px) {
  .e-con, .e-con-inner { overflow: hidden !important; }
  .elementor-element-0a0ec38, .elementor-element-0a0ec38 > *, .hfe-nav-menu { overflow: visible !important; }
}

.sbi-screenreader {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
}