/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

:root {
  --mustard: #D4A93C;
  --navy: #1F3D5B;
  --cream: #F5EFE3;
  --paper: #FCF8F1;
  --brown: #735642;
  --ink: #22384c;
  --line: rgba(31, 61, 91, 0.12);
}

html {
  scroll-behavior: smooth;
}

body {
  color: var(--ink);
  background-color: var(--cream);
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5,
.font-serif {
  font-family: "Inter", "Source Sans 3", sans-serif !important;
  letter-spacing: 0.01em;
}

p, li, blockquote {
  line-height: 1.8;
}

button,
input,
textarea,
select {
  font-family: "Inter", "Source Sans 3", sans-serif;
}

.hero-section {
  position: relative;
  background-size: cover;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: var(--cream);
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(245, 239, 227, 0.94) 0%, rgba(245, 239, 227, 0.83) 42%, rgba(245, 239, 227, 0.46) 100%);
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 1;
}

.site-nav {
  background: rgba(252, 248, 241, 0.9) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}

.site-logo {
  font-size: 1.75rem;
  letter-spacing: 0.02em;
}

section {
  position: relative;
}

section:not(#hero) {
  padding-top: 7rem !important;
  padding-bottom: 7rem !important;
}

section:not(#hero):nth-of-type(even) {
  background-color: var(--paper) !important;
}

section:not(#hero):nth-of-type(odd) {
  background-color: var(--cream) !important;
}

section h2 {
  letter-spacing: 0.08em;
}

#about .max-w-4xl,
#faq .max-w-4xl,
#signup .max-w-2xl {
  max-width: 48rem !important;
}

#about .prose,
#author .md\:col-span-2,
#faq .space-y-6,
#signup .space-y-6 {
  max-width: 42rem;
}

#behind-the-book .max-w-5xl,
#author .max-w-6xl,
#testimonials .max-w-6xl,
#faq .max-w-4xl,
#signup .max-w-2xl,
section .max-w-5xl,
section .max-w-6xl {
  position: relative;
}

#behind-the-book .bg-white,
#author .bg-white\/80,
#author .bg-white\/60,
#testimonials .bg-gradient-to-br,
#faq details,
#signup form,
section .rounded-2xl,
section .rounded-xl,
section .rounded-lg {
  box-shadow: none !important;
}

#behind-the-book .bg-white,
#testimonials .bg-gradient-to-br,
#faq details,
#author .bg-white\/80,
#author .bg-white\/60 {
  background: rgba(252, 248, 241, 0.92) !important;
  border: 1px solid var(--line);
}

#testimonials .bg-gradient-to-br,
#behind-the-book,
footer {
  background-image: none !important;
}

#testimonials .grid,
#author .grid,
#hero .hero-content {
  align-items: start;
}

#testimonials .grid > div:nth-child(2) {
  margin-top: 3rem;
}

#testimonials .grid > div:nth-child(3) {
  margin-top: 1.25rem;
}

a.inline-block.bg-mustard,
.mobile-cta,
.site-nav a.bg-mustard,
input[type="submit"] {
  background: transparent !important;
  color: var(--ink) !important;
  border: 1px solid rgba(31, 61, 91, 0.35);
  border-radius: 999px !important;
  box-shadow: none !important;
}

a.inline-block.bg-mustard:hover,
.mobile-cta:hover,
.site-nav a.bg-mustard:hover,
input[type="submit"]:hover {
  background: rgba(31, 61, 91, 0.05) !important;
  border-color: rgba(31, 61, 91, 0.65);
}

input[type="text"],
input[type="email"],
textarea,
select {
  background: rgba(252, 248, 241, 0.86) !important;
  border-color: var(--line) !important;
  border-radius: 0.9rem !important;
}

section .text-gray-800,
section .text-gray-700 {
  color: var(--ink) !important;
}

section .text-gray-600,
section .text-gray-500,
section .text-gray-400 {
  color: var(--brown) !important;
}

footer {
  background: #1F3D5B !important;
}

footer .text-gray-300 {
  color: rgba(255, 255, 255, 0.78) !important;
}

footer .text-gray-400 {
  color: rgba(255, 255, 255, 0.62) !important;
}

footer .text-mustard {
  color: var(--mustard) !important;
}

footer a,
footer svg {
  color: inherit;
}

@media (min-width: 900px) {
  #about h2,
  #behind-the-book h2,
  #author h2,
  #testimonials h2,
  #faq h2,
  #signup h2,
  section .text-center {
    text-align: left !important;
  }

  #about .max-w-4xl,
  #behind-the-book .max-w-5xl,
  #faq .max-w-4xl,
  #signup .max-w-2xl {
    margin-left: 9vw !important;
    margin-right: auto !important;
  }

  #author .max-w-6xl,
  #testimonials .max-w-6xl,
  section .max-w-5xl {
    margin-left: 7vw !important;
    margin-right: auto !important;
  }

  #hero .hero-content {
    grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.75fr);
    gap: 5rem;
  }

  #hero h1 {
    max-width: 12ch;
    font-size: clamp(4rem, 6.8vw, 6.25rem);
    line-height: 0.96;
  }

  #hero p {
    max-width: 34rem;
  }

  .hero-book-cover {
    transform: rotate(1.5deg);
    border-radius: 0.35rem !important;
    box-shadow: 0 22px 50px rgba(31, 61, 91, 0.18) !important;
  }
}

@media (max-width: 768px) {
  .site-nav {
    background: #F8F3E9;
    box-shadow: none;
    backdrop-filter: none;
  }

  .site-logo {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-size: 14px;
  }

  #hero {
    padding-top: 100px;
    padding-bottom: 120px;
    padding-left: 20px;
    padding-right: 20px;
    min-height: auto;
    align-items: flex-start;
  }

  .hero-section {
    background-position: 45% 100%;
    background-size: 112% auto;
    background-repeat: no-repeat;
    background-attachment: scroll;
  }

  .hero-content {
    gap: 16px;
  }

  #hero h1 {
    font-size: 40px;
    line-height: 1.25;
  }

  #hero p {
    font-size: 18px;
    color: #1F3D5B;
  }

  #hero form label {
    color: #1F3D5B;
  }

  #hero form input,
  #hero form textarea,
  #hero form select {
    border-radius: 14px;
    border-color: rgba(31, 61, 91, 0.15) !important;
    padding: 16px;
  }

  #hero form input {
    line-height: 1.4;
  }

  #hero form input::placeholder {
    color: rgba(31, 61, 91, 0.45);
  }

  #hero form input[type="submit"],
  #hero form button,
  #hero form .btn {
    border-radius: 14px;
    padding: 18px 20px;
  }

  .hero-book-cover {
    max-width: 80%;
    margin: 0 auto;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.08) !important;
  }
}

section:not(#hero):nth-of-type(even) {
  background-color: var(--cream) !important;
}

section:not(#hero):nth-of-type(odd) {
  background-color: #ffffff !important;
}

.text-gray-800,
.text-gray-700 {
  color: var(--navy);
}

.text-gray-600,
.text-gray-500,
.text-gray-400 {
  color: var(--brown);
}