/*
Theme Name: Thattumdalam Digital Magazine Theme
Theme URI: https://www.thattumdalam.com
Author: RRD News+ Digital Media Team
Description: Premium Luxury Amber Gold & Light Parchment Editorial Theme for Thattumdalam Digital Magazine.
Version: 2.1.1
Text Domain: thattumdalam-theme
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+Malayalam:wght@500;600;700;800;900&family=Noto+Sans+Malayalam:wght@300;400;500;600;700;800;900&family=Cinzel:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --bg-dark-hero: #11161B;
  --bg-dark-block: #171E24;
  --bg-dark-card: #1C232A;
  --bg-light-clean: #FFFFFF;
  --bg-light-section: #F8F9FA;
  --bg-light-card: #F1F3F5;
  --accent-amber: #E5A93C;
  --accent-amber-bright: #F5A623;
  --accent-amber-glow: rgba(229, 169, 60, 0.25);
  --text-white: #FFFFFF;
  --text-dark: #1F2429;
  --text-muted-dark: #6C757D;
  --text-muted-light: #A0ABBA;
  --border-dark: rgba(229, 169, 60, 0.2);
  --border-light: #E9ECEF;
  --font-serif: 'Noto Serif Malayalam', 'Cinzel', Georgia, serif;
  --font-sans: 'Noto Sans Malayalam', 'Plus Jakarta Sans', sans-serif;
}

body {
  font-family: var(--font-sans);
  background-color: var(--bg-dark-hero);
  color: var(--text-white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Section Background Rules */
.section-dark-hero {
  background-color: #11161B !important;
  background-image: 
    radial-gradient(circle at 15% 20%, rgba(229, 169, 60, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 85% 60%, rgba(20, 30, 45, 0.5) 0%, transparent 50%) !important;
}

.section-dark-navy {
  background-color: #171E24 !important;
  border-top: 1px solid rgba(229, 169, 60, 0.2);
  border-bottom: 1px solid rgba(229, 169, 60, 0.2);
  color: #FFFFFF !important;
}

.section-light-clean {
  background-color: #FFFFFF !important;
  color: #1F2429 !important;
}

.section-light-clean h1, 
.section-light-clean h2, 
.section-light-clean h3, 
.section-light-clean h4 {
  color: #1F2429 !important;
}

.section-light-clean p {
  color: #6C757D !important;
}

.section-light-bg {
  background-color: #F8F9FA !important;
  color: #1F2429 !important;
}

/* Typography & Gold Accent Text */
.title-serif {
  font-family: var(--font-serif);
}

.gold-text {
  color: #E5A93C !important;
}

.badge-amber-tag {
  background-color: rgba(229, 169, 60, 0.15) !important;
  border: 1px solid rgba(229, 169, 60, 0.4) !important;
  color: #E5A93C !important;
}

/* Buttons - High-End Editorial Styling */
.btn-amber-gold {
  background: linear-gradient(135deg, #F5A623 0%, #E5A93C 100%) !important;
  color: #11161B !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 0.85rem 2rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 6px 20px rgba(245, 166, 35, 0.3) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-amber-gold:hover {
  background: linear-gradient(135deg, #FFFFFF 0%, #F5A623 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 25px rgba(245, 166, 35, 0.45) !important;
}

.btn-white-pill {
  background-color: #FFFFFF !important;
  color: #11161B !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 0.85rem 2rem !important;
  transition: all 0.3s ease !important;
}

.btn-white-pill:hover {
  background-color: #F8F9FA !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

.btn-dark-pill {
  background-color: #11161B !important;
  color: #FFFFFF !important;
  font-weight: 800 !important;
  border-radius: 50px !important;
  padding: 0.85rem 2rem !important;
  transition: all 0.3s ease !important;
}

.btn-dark-pill:hover {
  background-color: #1F2429 !important;
  transform: translateY(-2px) !important;
}

.btn-outline-glass {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
  border-radius: 50px !important;
  padding: 0.85rem 2rem !important;
  transition: all 0.3s ease !important;
}

.btn-outline-glass:hover {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: #FFFFFF !important;
}

/* Light Feature Cards (Clean White Section) */
.light-feature-card {
  background: #FFFFFF !important;
  border: 1px solid #EAEAEA !important;
  border-radius: 16px !important;
  padding: 2rem 1.5rem !important;
  transition: all 0.35s ease !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

.light-feature-card h3 {
  color: #1F2429 !important;
}

.light-feature-card p {
  color: #6C757D !important;
}

.light-feature-card:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08) !important;
  border-color: #E5A93C !important;
}

.light-feature-icon {
  width: 52px !important;
  height: 52px !important;
  border-radius: 12px !important;
  background: #F8F9FA !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.5rem !important;
  margin-bottom: 1.25rem !important;
  border: 1px solid #E9ECEF !important;
}

/* Hero Triple Floating Book Mockups Stage */
.triple-book-stage {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  perspective: 1000px !important;
}

.book-card-mockup {
  border-radius: 12px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6) !important;
  transition: all 0.4s ease !important;
  overflow: hidden !important;
  position: relative !important;
}

.book-card-mockup.left {
  transform: rotateY(15deg) scale(0.88) !important;
  opacity: 0.85 !important;
  margin-right: -25px !important;
  z-index: 5 !important;
}

.book-card-mockup.center {
  transform: scale(1.05) !important;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(229, 169, 60, 0.3) !important;
  z-index: 20 !important;
}

.book-card-mockup.right {
  transform: rotateY(-15deg) scale(0.88) !important;
  opacity: 0.85 !important;
  margin-left: -25px !important;
  z-index: 5 !important;
}

.book-card-mockup:hover {
  transform: scale(1.08) rotateY(0deg) !important;
  z-index: 30 !important;
  opacity: 1 !important;
}

/* Carousel Track & Hide Scrollbar */
.no-scrollbar::-webkit-scrollbar {
  display: none !important;
}
.no-scrollbar {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

/* Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #11161B;
}
::-webkit-scrollbar-thumb {
  background: #E5A93C;
  border-radius: 4px;
}