/* CSS Variables */
:root {
  --nav-h: 80px;
  --bg: #fbf9f8; /* very light warm background, kept soft */
  --text: #0f1720; /* darker text for improved contrast */
  --muted: #4a5458; /* stronger muted color */
  --rose: #f2cfcf; /* slightly deeper rose */
  --lilac: hsl(261, 88%, 61%); /* richer lilac for better contrast */
  --lilac-dark: #7e5bff; /* darker lilac for hovers and accents */
  --mint: #bfe9d6; /* deeper mint for contrast */
  --mint-dark: #8fd8ad;
  --sky: #cfe7ff; /* slightly deeper sky */
  --gold: #e0c77a;
  --white: #ffffff;
  --shadow: rgba(0, 0, 0, 0.5);
  --shadow-hover: rgba(0, 0, 0, 0.15);

  /* Typography */
  --font-heading: "Playfair Display", serif;
  --font-body: "Inter", sans-serif;

  /* Spacing */
  --container-max: 1200px;
  --section-padding: 4rem 0;
  --element-gap: 2rem;
  --blue: #3e6c88;
  --green: #2ea879;
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  /* Prevent mobile browsers from automatically enlarging text (accessibility/UA zoom) */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.6;
  color: var(--text);
  background-color: var(--bg);
  overflow-x: hidden;
  /* Also apply text-size-adjust on body as a fallback */
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 700;
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
}

p {
  margin-bottom: 1.5rem;
  max-width: 65ch;
}

/* Container */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
}

/* Navigation */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  background: rgba(250, 247, 245, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(107, 107, 107, 0.1);
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}

.navbar.scrolled {
  box-shadow: 0 4px 20px var(--shadow);
}

.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-brand a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-brand a:hover {
  color: var(--lilac);
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Hamburger toggle (mobile) */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
}

.nav-toggle svg {
  display: block;
}

.nav-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--lilac);
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--lilac);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Dropdown */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-btn {
  font-family: var(--font-body);
  font-size: 18px;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.3s ease;
}

.nav-dropdown-btn:hover {
  color: var(--lilac);
}

.social-icon {
  width: 20px;
  height: 20px !important;
  fill: currentColor;
}

.nav-dropdown-content {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--white);
  border-radius: 12px;
  box-shadow: 0 8px 32px var(--shadow);
  padding: 1.5rem;
  min-width: 250px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
}

.nav-dropdown:hover .nav-dropdown-content {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-section {
  margin-bottom: 1rem;
}

.dropdown-section:last-child {
  margin-bottom: 0;
}

.dropdown-section h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.dropdown-section a {
  display: block;
  color: var(--text);
  text-decoration: none;
  padding: 0.5rem 0;
  transition: color 0.3s ease;
}

.dropdown-section a:hover {
  color: var(--lilac);
}

/* Social Icons */
.social-icons {
  display: flex;
  gap: 1rem;
}

.social-icons a {
  color: var(--muted);
  transition: color 0.3s ease;
}

.social-icons a:hover {
  color: var(--lilac);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
}

.btn-primary {
  background: var(--lilac);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--sky);
  background: var(--lilac-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(105, 85, 255, 0.15);
}

.btn-secondary {
  background: var(--mint);
  color: var(--text);
}

.btn-secondary:hover {
  background: var(--gold);
  background: var(--mint-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(34, 139, 98, 0.08);
}

.btn-outline {
  border: 2px solid var(--lilac);
  color: var(--lilac);
}

.btn-outline:hover {
  background: var(--lilac);
  color: #fff;
  transform: translateY(-2px);
}

/* Hero Section */
.hero-media {
  /* fill the hero-decoration area vertically so the image can match section height */
  height: 100%;
  width: 100%;
  display: flex;
  align-items: flex-end; /* align image base to bottom of hero area */
  justify-content: center;
  pointer-events: none; /* decorative */
}
.hero-image {
  display: block;
  /* make image fill the hero height (not cropped) and keep whole image visible */
  height: 100%;
  width: auto;
  max-width: none;
  pointer-events: none;
  object-fit: contain; /* show entire image within its container */
  object-position: center bottom; /* keep base visible */
  z-index: 1;
}

.hero-content {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4rem;
  align-items: center;
  width: 100%;
  min-height: 100dvh;
}

.hero-text {
  max-width: 600px;
}

.hero-title {
  margin-bottom: 1.5rem;
  background: linear-gradient(135deg, var(--text) 0%, var(--lilac-dark) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-subtitle {
  font-size: 1.1rem;
  color: var(--muted);
  margin-bottom: 2.5rem;
  line-height: 1.2;
}

.hero-buttons {
  display: flex;
  gap: 1.5rem;
}

/* Floating Elements */
.hero-decoration {
  /* place decoration area at the right side of the hero and align its contents to the bottom
     ensure it starts below the fixed navbar so the top of the image is not hidden */
  position: absolute;
  left: 60%;
  top: var(--nav-h);
  bottom: 0;
  height: auto;
  width: auto; /* let the decoration size itself to the image to avoid big empty gaps */
  display: flex;
  align-items: flex-end; /* align children to the base */
  justify-content: center;
  overflow: visible;
  padding-right: 1.5rem;
  z-index: 10;
}

.floating-element {
  transition: opacity 500ms ease;
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: float 8s ease-in-out infinite;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1),
              box-shadow 300ms ease,
              opacity 200ms ease,
}

.floating-element:nth-child(1) {
  width: 160px;
  height: 160px;
  /* degradado */
  background: linear-gradient(135deg, var(--lilac) 0%, var(--mint) 100%);
  top: 20%;
  left: 50%;
  animation-delay: 0s;
}

.floating-element:nth-child(2) {
  width: 200px;
  height: 200px;
  /* degradado */
  background: linear-gradient(135deg, var(--mint) 0%, var(--gold) 100%);
  top: 40%;
  right: 80%;
  animation-delay: 2s;
}

.floating-element:nth-child(3) {
  width: 180px;
  height: 180px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--sky) 100%);
  bottom: 20%;
  left: 70%;
  animation-delay: 4s;
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px) rotate(0deg) scale(1);
  }
  50% {
    transform: translateY(-40px) rotate(180deg) scale(1.1);
  }
}

/* Hover effect for floating bubbles: subtle pop + glow and pause float animation */
.floating-element:hover,
.floating-element:focus {
  opacity: 0.15;
  animation-play-state: paused;
}

/* Keyboard accessibility: allow focus with outline */
.floating-element:focus {
  outline: 3px solid rgba(126,91,255,0.18);
  outline-offset: 6px;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .floating-element {
    animation: none;
    transition: none;
    transform: none;
  }
  .floating-element:hover {
    transform: none;
    box-shadow: none;
    filter: none;
    animation-play-state: paused;
  }
}

/* About Section */
.about {
  min-height: calc(100vh - var(--nav-h));
  padding: var(--section-padding);
  background: var(--sky);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;
}

.about-image img {
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: 0 20px 40px var(--shadow);
}

.about-text h2 {
  color: var(--text);
  margin-bottom: 2rem;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
}

.social-follow {
  margin-top: 3rem;
}

.social-follow h3 {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.social-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: var(--bg);
  border-radius: 50px;
  text-decoration: none;
  color: var(--text);
  transition: all 0.3s ease;
}

.social-link:hover {
  background: var(--lilac);
  transform: translateY(-2px);
}

/* Book Sections */
.book-section {
  padding: var(--section-padding);
  position: relative;
  min-height: 100dvh;
    display: flex;
    align-items: center;
}

.luna-section {
  background: linear-gradient(135deg, var(--sky) 0%, var(--bg) 100%);
}

.terciopelo-section {
  background: linear-gradient(135deg, var(--rose) 0%, var(--bg) 100%);
}


/* Forthcoming book teaser */
.forthcoming-section {
  background: linear-gradient(180deg, rgba(190, 230, 220, 0.18) 0%, var(--white) 100%);
  padding: 3.5rem 0;
}

.book-content.teaser {
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 3rem;
}

.forthcoming-section .lead {
  font-size: 1.15rem;
  margin-bottom: 1rem;
  color: var(--text);
}

.forthcoming-section .muted {
  color: var(--muted);
  margin-bottom: 1.25rem;
}

.cover-placeholder {
  width: 100%;
  max-width: 320px;
  height: 420px;
  background: linear-gradient(135deg, var(--lilac) 0%, var(--mint) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 20px 40px var(--shadow);
}

.forthcoming-section .book-actions {
  margin-top: 1.25rem;
}

.book-content {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: center;
}

.book-content.reverse {
  grid-template-columns: 2fr 1fr;
}

.book-content.reverse .book-cover {
  order: 2;
}

.book-content.reverse .book-info {
  order: 1;
}

.book-cover img {
  width: 100%;
  max-width: 350px;
  height: auto;
  border-radius: 2px;
  box-shadow: 0 25px 50px var(--shadow);
  transition: transform 0.3s ease;
}

.book-cover img:hover {
  transform: scale(1.05);
}

.book-info h2 {
  color: var(--text);
  margin-bottom: 1.5rem;
}

.book-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 2rem;
}

.featured-verses {
  margin-bottom: 2.5rem;
}

.featured-verses h3 {
  font-size: 1.3rem;
  margin-bottom: 1.5rem;
  color: var(--text);
}

.verse {
  background: var(--white);
  padding: 1.5rem;
  border-radius: 15px;
  margin-bottom: 1rem;
  border-left: 4px solid var(--lilac-dark);
  box-shadow: 0 8px 25px var(--shadow);
}

.verse p {
  font-style: italic;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0;
}

.book-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.sample-content {
  background: var(--white);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 8px 25px var(--shadow);
  margin-top: 1rem;
}

.sample-content h4 {
  margin-bottom: 1rem;
  color: var(--text);
}

.sample-text {
  font-style: italic;
  color: var(--muted);
  line-height: 1.7;
}

/* Footer */
.footer {
  background: #0b0f13;
  color: var(--bg);
  padding: 3rem 0;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-info p {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}

.footer-social {
  display: flex;
  gap: 1rem;
}

.footer-social a {
  color: var(--bg);
  transition: color 0.3s ease;
}

.footer-social a:hover {
  color: var(--lilac);
}

/* Animations */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .hero {
    min-height: 160dvh;
  }

  .hero-decoration {
    height: 70dvh;
    left: 50vw;
    transform: translateX(-46%);
    top: calc(var(--nav-h) + 90dvh);
  }

  .floating-element {
  transition: opacity 500ms ease;
  position: absolute;
  border-radius: 50%;
  opacity: 0.8;
  animation: float 8s ease-in-out infinite;
  transition: transform 300ms cubic-bezier(.2,.9,.2,1),
              box-shadow 300ms ease,
              opacity 200ms ease,
}

.floating-element:nth-child(1) {
  width: 80px;
  height: 80px;
  /* degradado */
  background: linear-gradient(135deg, var(--lilac) 0%, var(--mint) 100%);
  top: 20%;
  left: 50%;
  animation-delay: 0s;
}

.floating-element:nth-child(2) {
  width: 100px;
  height: 100px;
  /* degradado */
  background: linear-gradient(135deg, var(--mint) 0%, var(--gold) 100%);
  top: 40%;
  right: 80%;
  animation-delay: 2s;
}

.floating-element:nth-child(3) {
  width: 90px;
  height: 90px;
  background: linear-gradient(135deg, var(--rose) 0%, var(--sky) 100%);
  bottom: 20%;
  left: 70%;
  animation-delay: 4s;
}

  .about-content {
    grid-template-columns: 1fr;
  }

  .book-content,
  .book-content.reverse {
    grid-template-columns: 1fr;
  }

  .book-content.reverse .book-cover,
  .book-content.reverse .book-info {
    order: unset;
  }
}

@media (max-width: 768px) {
  :root {
    --nav-h: 70px;
    --section-padding: 3rem 0;
  }

  .container {
    padding: 0 1.5rem;
  }

  .nav-container {
    padding: 0 1.5rem;
  }

  .nav-menu {
    gap: 1rem;
  }

  /* show hamburger */
  .nav-toggle {
    display: block;
  }

  /* mobile: hide regular menu and use panel */
  .nav-menu {
    position: fixed;
    top: var(--nav-h);
    right: 0;
    width: 85vw;
    max-width: 360px;
    height: calc(100vh - var(--nav-h));
    background: var(--white);
    transform: translateX(110%);
    transition: transform 0.28s ease;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
  gap: 1rem;
  display: flex; /* ensure visible but off-canvas */
  }

  .nav-menu a, .nav-menu .nav-dropdown, .nav-menu .social-icons {
    width: 100%;
  }

  .nav-menu.mobile-open {
    transform: translateX(0%);
  }

  .social-icons {
    display: none;
  }

  .hero-buttons {
    justify-content: center;
  }

  .book-actions {
    justify-content: center;
  }

  .social-links {
    justify-content: center;
  }

  .footer-content {
    text-align: center;
    flex-direction: column;
  }
}

@media (max-width: 480px) {
  :root {
    --nav-h: 60px;
  }

  .cover-placeholder {
    display: none;
  }

  body {
    font-size: 16px;
  }

  .nav-menu {
    gap: 0.5rem;
  }

  .nav-link {
    font-size: 0.9rem;
  }

  .nav-dropdown-content {
    right: -1rem;
    min-width: 200px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }

  .btn {
    width: 100%;
    max-width: 280px;
  }

  .book-actions {
    flex-direction: column;
    align-items: center;
  }

  .social-links {
    flex-direction: column;
    align-items: center;
  }
}

/* Mobile: show icon-only buttons and lay out social links in a single row
   We scope this to mobile breakpoints so desktop remains unchanged. */
@media (max-width: 768px) {
  .social-links {
    /* force a single row and prevent wrapping */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
    overflow-x: auto; /* allow horizontal scrolling on very small screens */
  }

  .social-link {
    /* visually hide the text (text nodes aren't wrapped) while keeping the SVG */
    font-size: 0; /* hides the label text without changing desktop rules */
    padding: 0.5rem;
    gap: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--bg);
  }

  .social-link svg {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .social-link a {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

/* Also ensure the smallest breakpoint doesn't revert to column layout */
@media (max-width: 480px) {
  .social-links {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem;
  }

  .social-link {
    gap: 0;
    font-size: 0;
    padding: 0.5rem;
    width: 40px;
    height: 40px;
  }

  .social-link svg {
    width: 18px;
    height: 18px;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  :root {
    --bg: #ffffff;
    --text: #000000;
    --muted: #333333;
  }

  .btn-primary,
  .btn-secondary {
    border: 2px solid var(--text);
  }
}

/* Designer credit styles (footer) */
.designer-credit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  font-family: 'Montserrat', cursive;
}

.designed-by {
  color: #666;
  font-weight: 400;
}

.designer-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  color: var(--blue);
  font-weight: 600;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.designer-link:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(62, 108, 136, 0.1), transparent);
  transition: left 0.6s ease;
}

.designer-link:hover:before {
  left: 100%;
}

.designer-link:hover {
  color: var(--text);
  background: linear-gradient(135deg, var(--blue), var(--green));
  box-shadow: 0 4px 15px rgba(62, 108, 136, 0.3);
  transform: translateY(-1px);
}

.designer-name {
  background: linear-gradient(135deg, var(--blue), var(--green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.designer-link:hover .designer-name {
  -webkit-text-fill-color: var(--text);
}

.designer-link .designer-external-icon {
  font-size: 0.75rem;
  opacity: 0.7;
  transition: all 0.3s ease;
}

.designer-link:hover .designer-external-icon {
  opacity: 1;
  transform: translateX(2px);
}

/* small screens: position credit under footer content */
@media (max-width: 600px) {
  .designer-credit {
    margin-top: 1rem;
    justify-content: center;
    width: 100%;
  }
}