/* Custom CSS for Cozy Home Decor Website */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Great+Vibes&display=swap');

:root {
  --bg-sand: #FAF7F2;
  --bg-sand-darker: #F3ECE2;
  --color-terracotta: #C86D51;
  --color-terracotta-hover: #B55C41;
  --color-timber: #2C221E;
  --color-sage: #8A9A86;
  --color-sage-light: #EBF0EA;
  --color-stone-muted: #78716C;
}

body {
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: var(--bg-sand);
  color: var(--color-timber);
  overflow-x: hidden;
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, .font-serif {
  font-family: 'Playfair Display', Georgia, serif;
}

.logo-cursive {
  font-family: 'Great Vibes', cursive !important;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #FAF7F2;
}
::-webkit-scrollbar-thumb {
  background: #D6CEC5;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C86D51;
}

/* Glassmorphism Navigation */
.header-glass {
  background: rgba(250, 247, 242, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(229, 222, 212, 0.8);
}

/* Pinterest Badge */
.pinterest-badge {
  background: linear-gradient(135deg, #E60023 0%, #AD081B 100%);
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pinterest-badge:hover {
  box-shadow: 0 8px 22px rgba(230, 0, 35, 0.38);
  transform: translateY(-2px);
}

/* Terracotta Primary Button */
.btn-terracotta {
  background-color: var(--color-terracotta);
  color: #ffffff;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-terracotta:hover {
  background-color: var(--color-terracotta-hover);
  box-shadow: 0 8px 20px rgba(200, 109, 81, 0.3);
  transform: translateY(-2px);
}

/* Image Card Hover Zoom Effect, Uncropped Fix, & Corner Doodles */
.img-zoom-container {
  overflow: hidden;
  position: relative;
  background-color: var(--bg-sand-darker); /* Fills empty space nicely */
}

/* Fix image cropping site-wide (shows full uncropped pic) */
.img-zoom-container img {
  width: 100% !important;
  height: auto !important;
  max-height: 80vh !important;
  object-fit: contain !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.img-zoom-container:hover img {
  transform: scale(1.03);
}



/* Hover Pin-It Button overlay */
.pin-it-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
  pointer-events: none;
}
.img-zoom-container:hover .pin-it-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Card Shadows */
.card-shadow {
  box-shadow: 0 4px 20px -2px rgba(44, 34, 30, 0.05), 0 2px 6px -1px rgba(44, 34, 30, 0.03);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-shadow:hover {
  box-shadow: 0 16px 32px -4px rgba(44, 34, 30, 0.09), 0 6px 12px -2px rgba(44, 34, 30, 0.05);
  transform: translateY(-4px);
}

/* ==========================================================================
   BLOG EDITORIAL READING LAYOUT STYLING
   ========================================================================== */

.blog-article-content {
  font-size: 1.0625rem; /* 17px reading font size */
  line-height: 1.85;
  color: #382E2B;
}

.blog-article-content p {
  margin-bottom: 1.6rem;
}

.blog-article-content h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--color-timber);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-b: 2px solid #EFEBE4;
  letter-spacing: -0.01em;
}

.blog-article-content h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-timber);
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.blog-article-content blockquote {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #5C4A43;
  padding: 1.5rem 2rem;
  margin: 2rem 0;
  background-color: #FAF2EC;
  border-left: 4px solid var(--color-terracotta);
  border-radius: 0 1rem 1rem 0;
}

.blog-article-content figure {
  margin: 2.25rem 0;
}

.blog-article-content figcaption {
  font-size: 0.8125rem;
  color: #78716C;
  text-align: center;
  margin-top: 0.6rem;
  font-style: italic;
}

.blog-article-lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.7;
  color: #4A3E39;
  border-left: 3px solid var(--color-terracotta);
  padding-left: 1.25rem;
  margin-bottom: 2rem;
}

/* Keyframes animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.5s ease-out forwards;
}

/* DIY Checkbox Styling */
.diy-checkbox:checked + label {
  text-decoration: line-through;
  color: var(--color-stone-muted);
  opacity: 0.75;
}

/* Pinterest Check-Out Button with Bloom Flowers */
.btn-pinterest-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, #FFF0F0 0%, #FFE4E1 50%, #FDDEDE 100%);
  border: 1.5px solid #F5C4C0;
  color: #E60023;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.btn-pinterest-checkout::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #E60023 0%, #AD081B 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
  border-radius: inherit;
}

.btn-pinterest-checkout:hover {
  border-color: #E60023;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(230, 0, 35, 0.18);
}

.btn-pinterest-checkout:hover::before {
  opacity: 1;
}

.btn-pinterest-checkout:hover .btn-pinterest-checkout__text {
  color: #ffffff;
}

.btn-pinterest-checkout:hover .btn-pinterest-checkout__bloom {
  filter: brightness(1.3) saturate(0.6);
  transform: scale(1.18) rotate(8deg);
}

.btn-pinterest-checkout:hover .btn-pinterest-checkout__bloom--right {
  transform: scale(1.18) rotate(-8deg);
}

.btn-pinterest-checkout__bloom {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  z-index: 1;
}

.btn-pinterest-checkout__text {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   LUXURY & ARTISTIC REDESIGN DESIGN SYSTEM
   ========================================================================== */

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

/* Typography classes */
.font-luxury {
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.font-script {
  font-family: 'Great Vibes', cursive;
}

/* Sublte Background Grain/Texture */
.bg-grain {
  position: relative;
}
.bg-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  z-index: 1;
}

/* Premium Shadows & Glassmorphic Glows */
.glass-premium {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
  background: rgba(44, 34, 30, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.glow-gold {
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15);
}
.glow-gold:hover {
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.35);
}

.glow-terracotta {
  box-shadow: 0 0 20px rgba(200, 109, 81, 0.15);
}
.glow-terracotta:hover {
  box-shadow: 0 0 35px rgba(200, 109, 81, 0.4);
}

.glow-purple {
  box-shadow: 0 0 25px rgba(138, 43, 226, 0.2);
}
.glow-purple:hover {
  box-shadow: 0 0 40px rgba(138, 43, 226, 0.5);
}

/* Hardware-Accelerated Interactive Lifting Cards */
.card-hover-lift {
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, box-shadow;
}
.card-hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 48px -12px rgba(44, 34, 30, 0.15);
}

/* Red Ribbon / Coquette Bows */
.coquette-bow-detail {
  position: relative;
}
.coquette-bow-detail::after {
  content: '୨୧';
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 24px;
  color: #c2410c; /* Ribbon red */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 10;
  animation: float 4s ease-in-out infinite;
}

/* Y2K Chrome Elements */
.y2k-chrome-accent {
  background: linear-gradient(135deg, #e2e8f0 0%, #cbd5e1 25%, #ffffff 50%, #94a3b8 75%, #e2e8f0 100%);
  background-size: 200% 200%;
  animation: chrome-shine 6s linear infinite;
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.8), 0 4px 10px rgba(148, 163, 184, 0.3);
}

@keyframes chrome-shine {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Torn-Paper Scrapbook Border */
.border-tear {
  position: relative;
  border-bottom: 3px dashed #FAF7F2;
}
.border-tear::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 8px;
  background-image: radial-gradient(circle, transparent, transparent 50%, #FAF7F2 50%, #FAF7F2);
  background-size: 16px 8px;
}

/* Postage Stamp Outline */
.postage-stamp {
  border: 12px solid #ffffff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  position: relative;
  background: #ffffff;
}
.postage-stamp::after {
  content: '';
  position: absolute;
  top: -15px; left: -15px; right: -15px; bottom: -15px;
  border: 4px dotted #FAF7F2;
  pointer-events: none;
}

/* Scrapbook Tape Effect */
.scrapbook-tape-overlay {
  position: absolute;
  top: -10px;
  left: 30%;
  width: 90px;
  height: 25px;
  background: rgba(254, 240, 138, 0.55); /* Translucent yellow tape */
  backdrop-filter: blur(1px);
  transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-left: 2px dashed rgba(0,0,0,0.1);
  border-right: 2px dashed rgba(0,0,0,0.1);
  z-index: 10;
}

/* Dark Academia Spooky/Literary Web Details */
.dark-academia-web-bg {
  background-image: radial-gradient(circle at 100% 150%, transparent 24%, rgba(200, 109, 81, 0.05) 24%, rgba(200, 109, 81, 0.05) 26%, transparent 26%),
                    radial-gradient(circle at 0% 150%, transparent 24%, rgba(200, 109, 81, 0.05) 24%, rgba(200, 109, 81, 0.05) 26%, transparent 26%);
  background-size: 40px 40px;
}

/* Animations */
@keyframes float {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-6px) rotate(2deg); }
  100% { transform: translateY(0px) rotate(0deg); }
}

.animate-float-slow {
  animation: float 6s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4)); }
  50% { filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.8)); }
}

.animate-sparkle-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

/* Custom Editorial Grids */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}