/* EgyptRoute Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,400;1,600&family=Playfair+Display:ital,wght@0,500;0,600;0,700;0,800;1,400;1,600&family=Plus+Jakarta+Sans:wght@300;400;500;600;700&display=swap');

:root {
  --color-alabaster: #FAF8F5;
  --color-nile: #141E27;
  --color-terracotta: #C87D55;
  --color-desert: #D4A359;
  --color-sand-border: #EAE3D9;
}

html {
  scroll-behavior: smooth;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
}

body {
  background-color: #FAF8F5;
  color: #141E27;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  overflow-x: hidden;
}

/* Subtle editorial paper grain texture overlay (pure CSS) */
.bg-subtle-pattern {
  background-color: #FAF8F5;
  background-image: radial-gradient(rgba(200, 125, 85, 0.04) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Typography Enhancements */
.font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.font-cormorant {
  font-family: 'Cormorant Garamond', Georgia, serif;
}

.drop-cap:first-letter {
  float: left;
  font-family: 'Playfair Display', serif;
  font-size: 3.75rem;
  line-height: 0.8;
  padding-top: 4px;
  padding-right: 12px;
  padding-bottom: 2px;
  color: #C87D55;
  font-weight: 700;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #F3EFEA;
}
::-webkit-scrollbar-thumb {
  background: #D4A359;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C87D55;
}

/* Smooth Accordion Transitions */
.accordion-content {
  transition: max-height 0.35s ease-out, opacity 0.3s ease, margin 0.3s ease;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
}

.accordion-content.open {
  max-height: 2000px;
  opacity: 1;
}

/* Card Hover Elevation */
.editorial-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s ease;
}
.editorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 35px -10px rgba(20, 30, 39, 0.08), 0 8px 16px -6px rgba(200, 125, 85, 0.06);
  border-color: #D4A359;
}

/* Reading Progress Bar for Blog Posts */
#reading-progress {
  transform-origin: 0 50%;
  transition: transform 0.1s ease-out;
}

/* Badge styling */
.badge-gold {
  background: linear-gradient(135deg, rgba(212, 163, 89, 0.15), rgba(200, 125, 85, 0.12));
  border: 1px solid rgba(212, 163, 89, 0.35);
  color: #8C5E28;
}

/* Payhip Integration Marker Styling */
.payhip-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s ease;
}
.payhip-btn:hover {
  box-shadow: 0 10px 20px -5px rgba(200, 125, 85, 0.35);
}

/* Prose styles for blog posts */
.prose-editorial p {
  margin-bottom: 1.5rem;
  line-height: 1.82;
  font-size: 1.075rem;
  color: #2D3748;
}
.prose-editorial h2 {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.85rem;
  margin-top: 2.75rem;
  margin-bottom: 1.15rem;
  color: #141E27;
  letter-spacing: -0.01em;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #EAE3D9;
}
.prose-editorial h3 {
  font-family: 'Playfair Display', serif;
  font-weight: 600;
  font-size: 1.45rem;
  margin-top: 2rem;
  margin-bottom: 0.85rem;
  color: #1F2E3D;
}
.prose-editorial ul, .prose-editorial ol {
  margin-bottom: 1.5rem;
  padding-left: 1.35rem;
}
.prose-editorial li {
  margin-bottom: 0.5rem;
  line-height: 1.7;
}
.prose-editorial blockquote {
  border-left: 3px solid #C87D55;
  padding-left: 1.25rem;
  margin: 1.75rem 0;
  font-style: italic;
  color: #4A5568;
  background: #F8EFEA;
  padding: 1rem 1.25rem;
  border-radius: 0 0.5rem 0.5rem 0;
}