/* RESET */
* { margin:0; padding:0; box-sizing:border-box; }

/* BODY */
body {
    font-family: 'Lora', serif;
    color: #333;
    line-height: 1.7;
    text-align: center;
    background-image: url('../images/sienna6x93.jpg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #ffffff;
}

/* NAVIGATION */
nav {
    position: fixed;
    top:0; width:100%;
    z-index:999;
    padding:12px 0;
    text-align:center;
    background-color: rgba(255,255,255,0.85);
    backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: background-color 0.3s, padding 0.3s;
}
nav.shrink { padding:6px 0; background-color: rgba(255,255,255,0.95); }

.nav-container {
    display:flex;
    justify-content:center;
    align-items:center;
    max-width:1100px;
    margin:0 auto;
    gap:20px;
}

/* NAV MENU */
.nav-menu { 
    list-style:none; 
    display:flex; 
    gap:20px; 
}
.nav-menu a {
    text-decoration:none; 
    color:#000; 
    font-weight:bold;
    font-size:1.2rem; 
    background-color: rgba(255,255,255,0.8);
    padding:10px 20px; 
    border-radius:6px; 
    transition: all 0.3s;
    font-family:'Tw Cen MT Condensed', sans-serif;
}
.nav-menu a:hover, .nav-menu a.active { 
    background-color:#f7c6c6; 
    color:#000; 
}

/* HAMBURGER MENU */
.hamburger { display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; }
.hamburger span { display:block; width:25px; height:3px; background:#333; border-radius:3px; transition:0.3s; }

/* SECTIONS */
section {
    padding:90px 20px; 
    max-width:1100px; 
    margin:40px auto;
    background-color: rgba(255,255,255,0.9);
    border-radius:6px; 
    position:relative; 
    text-align:center;
}
section h2 { 
    margin-bottom: 25px; 
    font-family: 'Tw Cen MT Condensed', sans-serif; 
    text-transform: uppercase;
    font-size: 2.2rem;
}

/* ==========================
   HERO SECTION
========================== */
.hero {
    text-align: center;
    padding: 90px 20px;
    max-width: 1100px;
    margin: 40px auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 6px;
    position: relative;
}

/* HERO QUOTE */
.hero-quote {
    font-family: 'Lora', serif;
    font-style: italic;
    font-weight: bold;
    font-size: 2.5rem;
    color: #000;
    margin-bottom: 20px;
}

/* HERO QUOTE FADE */
.hero-text-above.fade-section {
    opacity: 0;
    transform: translateY(35px);
    transition: opacity 2s ease, transform 1.8s ease;
}
.hero-text-above.fade-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* HERO IMAGE */
.hero-image-wrapper { text-align:center; margin:20px 0; }
.hero-image { width:100%; max-width:700px; border-radius:8px; opacity:0; animation:fadeIn 1.5s forwards; }
@keyframes fadeIn { to { opacity:1; } }

/* HERO TEXT BELOW */
.hero-text-below.fade-section { opacity:0; transform:translateY(35px); transition:opacity 1.5s ease, transform 1.5s ease; }
.hero-text-below.fade-section.visible .hero-subtitle { transition-delay:0.2s; }
.hero-text-below.fade-section.visible h2 { transition-delay:0.4s; }
.hero-text-below.fade-section.visible { opacity:1; transform:translateY(0); }

.hero-text-below .hero-subtitle { font-family:'Lora', serif; font-style:italic; font-size:1.2rem; margin-bottom:15px; }
.hero-text-below h2 { font-family:'Lora', serif; font-weight:bold; font-size:1.5rem; margin-bottom:20px; }

/* HERO CTA BUTTON */
.hero-cta.fade-section { opacity:0; transform:translateY(35px); transition: opacity 1.5s ease, transform 1.5s ease 0.6s; }
.hero-cta.fade-section.visible { opacity:1; transform:translateY(0); }
.hero-cta .cta-button {
    display:inline-block;
    padding:12px 25px;
    background-color:#f7c6c6;
    color:#000;
    font-family:'Tw Cen MT Condensed', sans-serif;
    font-weight:bold;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:6px;
    transition:0.3s;
    font-size:1.2rem;
}
.hero-cta .cta-button:hover { background-color:#e69b9b; }

/* RESPONSIVE */
@media (max-width: 768px) {
    .hero-quote { font-size:2rem; }
    .hero-text-below .hero-subtitle { font-size:1rem; }
    .hero-text-below h2 { font-size:1.2rem; }
    .hero-image { max-width:90%; }

    #newsletterForm input[type="email"] { width:100%; padding:10px; }
    #newsletterForm .gdpr-consent label { font-size:0.85rem; }

    #cookieBanner { padding:12px 15px; font-size:0.9rem; }
    .cookie-buttons { flex-direction: column; }
    .cookie-buttons button { width:100%; margin-bottom:10px; }

    .nav-container { justify-content:space-between; padding:0 20px; }
    .hamburger { display:flex; }
    .nav-menu { position:absolute; top:100%; left:0; width:100%; flex-direction:column; background:rgba(255,255,255,0.95); display:none; padding:15px 0; }
    .nav-menu.active { display:flex; }
    .nav-menu li { margin:8px 0; }
}

/* ==========================
   QUOTE SECTIONS
=========================== */
.quote-section { background:transparent; padding:40px 20px; text-align:center; max-width:900px; margin:30px auto; }
.quote-section .quote { font-style:italic; font-size:1.3rem; color:#000; line-height:1.6; opacity:0; transition: opacity 1.5s ease, transform 1.5s ease; transform:translateY(20px); }
.quote-section.visible .quote { opacity:1; transform:translateY(0); }
.quote-section .quote-author { font-style:italic; font-size:1.1rem; color:#000; margin-top:10px; opacity:0; transition: opacity 1.5s ease 0.3s, transform 1.5s ease 0.3s; transform:translateY(20px); }
.quote-section.visible .quote-author { opacity:1; transform:translateY(0); }

/* SAMPLE BUTTONS */
.sample-buttons { display:flex; justify-content:center; gap:15px; margin-top:20px; }
.sample-button { display:inline-block; padding:10px 20px; background:#f7c6c6; font-family:'Tw Cen MT Condensed', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; border-radius:6px; transition:0.3s; color:#000; font-size:1.2rem; }
.sample-button:hover { background:#e69b9b; }

/* ==========================
   SIENNA'S WORLD
=========================== */
#sienna .quote-section { margin-bottom:10px; }
#sienna p:first-of-type { margin-top:5px; }
.world-image { width:100%; max-width:700px; height:auto; display:block; margin:30px auto 0; border-radius:8px; }

/* ==========================
   CHARACTER CARDS
=========================== */
.character-grid { display:flex; flex-wrap:wrap; gap:25px; justify-content:center; }
.character-card { background:#fff; width:260px; border-radius:8px; padding:18px; text-align:center; box-shadow:0 3px 10px rgba(0,0,0,0.1); transition: transform 0.3s, box-shadow 0.3s, background-color 0.3s; }
.character-card:hover { transform:translateY(-5px); box-shadow:0 6px 15px rgba(0,0,0,0.2); background-color:#f7c6c6; }
.character-card h3 { margin-bottom:10px; font-family:'Tw Cen MT Condensed', sans-serif; font-size:1.45rem; text-transform:uppercase; }
.character-card p { font-size:1rem; margin:0 0 12px 0; color:#555; line-height:1.4; }
.character-card p .italic-desc { font-style:italic; color:#a33; font-size:0.95rem; margin-bottom:4px; background-color:#fde2e2; padding:2px 6px; border-radius:4px; display:inline; }
.character-card ul { text-align:left; padding-left:20px; margin:0; list-style-type:disc; }
.character-card ul li { margin-bottom:6px; font-size:0.95rem; color:#333; }

/* BUY BUTTONS */
.buy-buttons { display:flex; justify-content:center; gap:20px; flex-wrap:wrap; margin-top:15px; }
.buy-link { display:inline-block; padding:10px 20px; background:#f7c6c6; font-family:'Tw Cen MT Condensed', sans-serif; font-weight:bold; text-transform:uppercase; text-decoration:none; border-radius:6px; transition:0.3s; color:#000; font-size:1.2rem; }
.buy-link:hover { background:#e69b9b; }
.buy-link .note { display:block; font-size:0.85rem; color:#555; margin-top:4px; font-weight:normal; text-transform:none; }
.buy-link.coming-soon { display:inline-block; padding:12px 25px; background-color:#ccc; color:#000; border-radius:6px; font-weight:bold; cursor:not-allowed; text-decoration:none; font-size:1.2rem; margin-top:20px; text-align:center; }
.buy-link.coming-soon:hover { background-color:#bbb; }
.buy-audio-container { text-align:center; width:100%; }

/* NEWSLETTER */
section#newsletter form { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
section#newsletter input[type="email"] { padding:10px; border-radius:6px; border:1px solid #ccc; font-size:1rem; }
section#newsletter button { padding:10px 20px; border:none; border-radius:6px; background:#f7c6c6; color:#000; font-family:'Tw Cen MT Condensed', sans-serif; font-weight:bold; text-transform:uppercase; font-size:1rem; cursor:pointer; transition:0.3s; }
section#newsletter button:hover { background:#e69b9b; }

/* FADE-IN */
.fade-section { opacity:0; transform:translateY(35px); transition:1s ease; }
.fade-section.visible { opacity:1; transform:translateY(0); }

/* BACK TO TOP BUTTON */
#backToTop { display:none; position:fixed; bottom:35px; right:35px; background-color:#3c5aa6; color:white; border:none; padding:12px 16px; font-size:18px; border-radius:50%; cursor:pointer; }

/* BACK TO TOP BUTTON - PINK TO MATCH SAMPLE TEXT PAGE */
#backToTop { 
    display: none; 
    position: fixed; 
    bottom: 35px; 
    right: 35px; 
    background-color: #f7c6c6;  /* pink background */
    color: #000;                 /* black arrow */
    border: none; 
    padding: 12px 16px; 
    font-size: 18px; 
    border-radius: 50%; 
    cursor: pointer; 
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    transition: background 0.3s, transform 0.3s;
}
#backToTop:hover {
    background-color: #e69b9b;   /* slightly darker pink on hover */
    transform: scale(1.1);
}

}

#backToTop:hover, .pink-back-to-top:hover {
    background-color: #ff85c1;  /* lighter pink on hover */
}


/* FOOTER */
footer { text-align:center; padding:20px; background-color: rgba(255,255,255,0.9); border-top:1px solid #ccc; margin-top:40px; }
footer .footer-links a { text-decoration:none; color:#000; margin:0 5px; }
footer .social-links { margin:15px 0; display:flex; justify-content:center; gap:15px; }
footer .social-links a img { width:32px; height:32px; transition:transform 0.3s, filter 0.3s; }
footer .social-links a:hover { transform:scale(1.1); filter: brightness(1.2); }

/* ============================
   COOKIE BANNER & MODAL
============================ */
#cookieBanner {
  display:none;
  position:fixed;
  bottom:20px;
  left:50%;
  transform:translateX(-50%);
  max-width:480px;
  width:90%;
  background-color: rgba(255,255,255,0.95);
  color:#000;
  border-radius:12px;
  padding:20px;
  font-family:'Lora', serif;
  z-index:1000;
  text-align:center;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  backdrop-filter:blur(8px);
  animation:slideUp 0.5s ease forwards;
}

#cookieBanner .cookie-inner {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
}

#cookieBanner .cookie-lang {
  display:flex;
  gap:8px;
  margin-bottom:10px;
}
#cookieBanner .cookie-lang button {
  padding:6px 12px;
  border:none;
  border-radius:6px;
  background:#f7c6c6;
  font-weight:bold;
  cursor:pointer;
  transition:0.3s;
}
#cookieBanner .cookie-lang button.active { background:#e69b9b; }

#cookieBanner p { margin-bottom:12px; font-size:0.95rem; line-height:1.4; }
#cookieBanner a { color:#f7c6c6; text-decoration:underline; font-weight:bold; }
#cookieBanner a:hover { color:#e69b9b; }

#cookieCategories {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:0.95rem;
  margin:10px 0;
}
#cookieCategories label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}
#cookieCategories input[type="checkbox"] {
  width:18px; height:18px;
  accent-color:#f7c6c6;
  cursor:pointer;
}

#cookieBanner .cookie-buttons {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
#cookieBanner .cookie-buttons button {
  padding:10px 18px;
  border:none;
  border-radius:8px;
  font-weight:bold;
  cursor:pointer;
  font-family:'Tw Cen MT Condensed', sans-serif;
  font-size:0.9rem;
  transition:0.3s;
}
#cookieBanner .cookie-buttons .accept { background-color:#f7c6c6; color:#000; }
#cookieBanner .cookie-buttons .reject { background-color:#ccc; color:#000; }
#cookieBanner .cookie-buttons .save { background-color:#f7c6c6; color:#000; }
#cookieBanner .cookie-buttons button:hover { opacity:0.85; }

@keyframes slideUp {
  0% { opacity:0; transform:translate(-50%,50px); }
  100% { opacity:1; transform:translate(-50%,0); }
}

/* MODAL (if needed for extended settings) */
.cookie-overlay { display:none; }

#cookieBannerModal .cookie-popup {
  position:relative;
  background-color: rgba(255,255,255,0.95);
  padding:25px 30px;
  border-radius:12px;
  max-width:500px;
  width:90%;
  z-index:2000;
  text-align:center;
  font-family:'Lora', serif;
  box-shadow:0 4px 15px rgba(0,0,0,0.2);
  backdrop-filter:blur(8px);
}
#cookieBannerModal .cookie-popup p { margin-bottom:15px; font-size:0.95rem; line-height:1.4; }

#cookieBannerModal #cookieCategories {
  display:flex; flex-direction:column; align-items:center; gap:8px; margin:15px 0;
  font-family:'Tw Cen MT Condensed', sans-serif; font-size:0.95rem; color:#000;
}
#cookieBannerModal #cookieCategories label { display:flex; align-items:center; gap:6px; cursor:pointer; }
#cookieBannerModal #cookieCategories input[type="checkbox"] { width:18px; height:18px; accent-color:#f7c6c6; cursor:pointer; }

#cookieBannerModal .cookie-buttons {
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap; margin-top:15px;
}
#cookieBannerModal .cookie-buttons button {
  padding:10px 20px;
  border-radius:6px;
  border:none;
  font-family:'Tw Cen MT Condensed', sans-serif;
  font-weight:bold;
  text-transform:uppercase;
  cursor:pointer;
  transition:0.3s;
  font-size:1rem;
}
#cookieBannerModal .cookie-buttons .accept { background-color:#f7c6c6; color:#000; }
#cookieBannerModal .cookie-buttons .reject { background-color:#ccc; color:#000; }
#cookieBannerModal .cookie-buttons .save { background-color:#ddd; color:#000; }
#cookieBannerModal .cookie-buttons button:hover { opacity:0.85; }