/* ============================================================
   NAVBAR — nav-link & nav-brand hover states
   ============================================================ */

/* Default (transparent navbar): hover stays white, underline is white */
.nav-link:hover { color: #ffffff !important; }
.nav-link::after { background-color: #ffffff; }

/* Scrolled (white navbar): restore forest hover & underline */
#navbar.nav-scrolled .nav-link:hover { color: #1E3A2F !important; }
#navbar.nav-scrolled .nav-link::after { background-color: #1E3A2F !important; }

/* ============================================================
   BASE — shared across all pages
   ============================================================ */
html { scroll-behavior: smooth; }

body { font-family: 'Lora', serif; background: #F8F5F0; color: #1F2937; }

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

.text-gradient-gold {
  background: linear-gradient(135deg, #D97706, #F0CC55);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ============================================================
   SCROLL REVEAL
   ============================================================ */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }

.hero-fade { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; }
.hero-fade.visible { opacity: 1; transform: translateY(0); }

/* ============================================================
   DIVIDERS
   ============================================================ */
.divider-wave { display: block; width: 100%; line-height: 0; }
.divider-wave svg { width: 100%; height: 48px; }
@media (min-width: 768px) { .divider-wave svg { height: 64px; } }
@media (min-width: 1024px) { .divider-wave svg { height: 80px; } }

.divider-ornament { display: flex; align-items: center; justify-content: center; padding: 1rem 0; gap: 0.75rem; }
.divider-ornament .line { width: 4rem; height: 1px; background: linear-gradient(to var(--dir, right), transparent, #1E3A2F30); }
@media (min-width: 768px) { .divider-ornament .line { width: 6rem; } }

/* ============================================================
   SHARED UTILITY
   ============================================================ */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.testimonial-slide { transition: opacity 0.5s ease, transform 0.5s ease; }
.chip-active { background: #1E3A2F !important; color: #F5F0E6 !important; }

/* ============================================================
   HOME PAGE — index.html
   ============================================================ */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(12px); }
}
.scroll-indicator { animation: scrollBounce 2.5s ease-in-out infinite; }

/* ============================================================
   ABOUT PAGE — about.html
   ============================================================ */
.timeline-line { position: relative; }
.timeline-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #D97706, #1E3A2F30);
  transform: translateX(-50%);
}
@media (max-width: 767px) { .timeline-line::before { display: none; } }

/* ============================================================
   BLOG DETAIL PAGE — blog-detail.html
   ============================================================ */
.blog-content p { font-size: 1.0625rem; line-height: 1.9; color: #374151; margin-bottom: 1.6rem; }
.blog-content h2 { font-size: 1.75rem; font-weight: 700; color: #1E3A2F; margin-top: 2.75rem; margin-bottom: 1rem; }
.blog-content h3 { font-size: 1.3rem; font-weight: 700; color: #1F2937; margin-top: 2rem; margin-bottom: 0.75rem; }
.blog-content ul, .blog-content ol { margin-bottom: 1.5rem; padding-left: 1.5rem; }
.blog-content ul li { list-style: disc; font-size: 1.0625rem; line-height: 1.8; color: #374151; margin-bottom: 0.5rem; }
.blog-content ol li { list-style: decimal; font-size: 1.0625rem; line-height: 1.8; color: #374151; margin-bottom: 0.5rem; }
.blog-content strong { font-weight: 600; color: #1E3A2F; }
.blog-content blockquote { border-left: 4px solid #D97706; background: #FAF6EF; padding: 1.25rem 1.75rem; margin: 2rem 0; border-radius: 0 1rem 1rem 0; }
.blog-content blockquote p { font-family: 'Playfair Display', serif; font-size: 1.2rem; font-style: italic; color: #1E3A2F; margin: 0; line-height: 1.65; }
.blog-content hr { border: none; border-top: 1px solid #F4EDE4; margin: 2.5rem 0; }
@media (max-width: 767px) {
  .blog-content p { font-size: 1rem; line-height: 1.8; margin-bottom: 1.25rem; }
  .blog-content h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: 0.75rem; }
  .blog-content h3 { font-size: 1.15rem; }
  .blog-content blockquote { padding: 1rem 1.25rem; margin: 1.5rem 0; }
  .blog-content blockquote p { font-size: 1.05rem; }
  .blog-content ul li, .blog-content ol li { font-size: 1rem; }
}

.sticky-sidebar { position: static; }
@media (min-width: 1024px) { .sticky-sidebar { position: sticky; top: 5.5rem; } }

.toc-link { display: block; padding: 0.4rem 0.875rem; font-family: 'Lora', serif; font-size: 0.875rem; color: #6B7280; border-left: 2px solid #F4EDE4; transition: all 0.25s ease; text-decoration: none; }
.toc-link:hover, .toc-link.active { border-left-color: #D97706; color: #1E3A2F; font-weight: 600; background: #FAF6EF; border-radius: 0 0.5rem 0.5rem 0; }

/* ============================================================
   BRAIN FOG PAGE — brain-fog.html
   ============================================================ */
.week-card { border-left: 3px solid #D97706; }

/* ============================================================
   CONTACT PAGE — contact.html
   ============================================================ */
input:focus, textarea:focus, select:focus { border-color: #D97706 !important; box-shadow: 0 0 0 3px rgba(217,119,6,0.1); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-content.open { max-height: 300px; padding-top: 1rem; }
.faq-arrow { transition: transform 0.3s ease; }
.faq-arrow.open { transform: rotate(180deg); }

/* ============================================================
   DOSHA QUIZ PAGE — dosha-quiz.html
   ============================================================ */
#quizCard { transition: opacity .35s ease, transform .35s ease; }
#quizCard.fade-out { opacity: 0; transform: translateY(16px); }
#quizCard.fade-in  { opacity: 1; transform: translateY(0); }

.option-card { cursor: pointer; transition: all .25s ease; border: 2px solid transparent; }
.option-card:hover { border-color: #3A7050; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(30,58,47,.10); }
.option-card.selected { background: #1E3A2F !important; border-color: #D97706 !important; color: #F8F5F0; }
.option-card.selected .opt-letter { background: #D97706; color: #1F2937; }
.option-card.selected .opt-text { color: #F8F5F0; }

#progressFill { transition: width .5s cubic-bezier(.4,0,.2,1); }
.dosha-bar { height: 10px; border-radius: 9999px; transition: width 1.2s cubic-bezier(.4,0,.2,1); }

@keyframes resultPulse { 0%,100%{box-shadow:0 0 0 0 rgba(217,119,6,.3)} 50%{box-shadow:0 0 0 18px rgba(217,119,6,0)} }
.result-pulse { animation: resultPulse 2.5s ease-in-out infinite; }

@keyframes floatDot { 0%{transform:translateY(0) rotate(0deg);opacity:1} 100%{transform:translateY(-120px) rotate(360deg);opacity:0} }
.confetti-dot { position:absolute; border-radius:50%; animation: floatDot 2s ease-out forwards; pointer-events:none; }

/* ============================================================
   INSOMNIA PAGE — insomnia.html
   ============================================================ */
.day-marker { border-left: 3px solid #D97706; }

/* ============================================================
   WEIGHT & METABOLISM PAGE — weight-metabolism.html
   ============================================================ */
.timeline-dot::before {
  content: '';
  position: absolute;
  left: -1.25rem;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #D97706;
}

/* ============================================================
   WRITE FOR US PAGE — write-for-us.html
   ============================================================ */
.form-input {
  width: 100%; padding: 0.875rem 1.25rem;
  background: #FFFFFF; border: 1.5px solid #F4EDE4;
  border-radius: 0.875rem; font-family: 'Lora', serif; font-size: 0.9375rem;
  color: #1F2937; outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.form-input::placeholder { color: #9CA3AF; }
.form-input:focus { border-color: #D97706; box-shadow: 0 0 0 3px rgba(217,119,6,0.12); }
.form-input.error { border-color: #EF4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.10); }
.form-input.success { border-color: #3A7050; box-shadow: 0 0 0 3px rgba(58,112,80,0.10); }
.form-label { display: block; font-family: 'Lora', serif; font-size: 0.875rem; font-weight: 600; color: #1F2937; margin-bottom: 0.5rem; }
.form-label span.required { color: #D97706; margin-left: 2px; }
.form-hint { font-family: 'Lora', serif; font-size: 0.78rem; color: #9CA3AF; margin-top: 0.375rem; }
.form-error { font-family: 'Lora', serif; font-size: 0.78rem; color: #EF4444; margin-top: 0.375rem; display: none; }
.form-error.show { display: block; }

.topic-chip { cursor: pointer; padding: 0.5rem 1rem; border-radius: 2rem; font-family: 'Lora', serif; font-size: 0.8125rem; font-weight: 600; border: 1.5px solid #F4EDE4; background: #FFFFFF; color: #6B7280; transition: all 0.2s ease; user-select: none; }
.topic-chip:hover { border-color: #D97706; color: #D97706; }
.topic-chip.selected { background: #1E3A2F; border-color: #1E3A2F; color: #F5F0E6; }

.benefit-card { transition: all 0.35s ease; }
.benefit-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(30,58,47,0.12); }

.step-num { width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem; flex-shrink: 0; }

@keyframes pulse-gold { 0%,100% { box-shadow: 0 0 0 0 rgba(217,119,6,0.4); } 50% { box-shadow: 0 0 0 12px rgba(217,119,6,0); } }
.btn-submit:not(:disabled):hover { animation: pulse-gold 1.5s infinite; }

#successMsg { display: none; }
#successMsg.show { display: flex; }

.char-count { font-family: 'Lora', serif; font-size: 0.75rem; color: #9CA3AF; text-align: right; margin-top: 0.25rem; }
.char-count.warn { color: #D97706; }
.char-count.over { color: #EF4444; }

.file-drop { border: 2px dashed #F4EDE4; border-radius: 0.875rem; padding: 2rem; text-align: center; cursor: pointer; transition: all 0.25s ease; background: #FFFFFF; }
.file-drop:hover, .file-drop.dragover { border-color: #D97706; background: #FAF6EF; }
.file-drop input[type="file"] { display: none; }

/*.nav-link.active {*/
/*    color: #ffffff;*/
/*}*/

.nav-link.active::after {
    content: "";
    width: 100%;
    background-color: #ffffff;
}

.toast{
    position:fixed;
    top:30px;
    right:30px;
    width:380px;
    max-width:90vw;
    display:flex;
    align-items:center;
    gap:15px;
    padding:18px;
    background:#fff;
    border-radius:16px;
    box-shadow:0 15px 40px rgba(0,0,0,.1);
    z-index:99999;
    animation:slideIn .4s ease;
}

.toast-success{
    border-left:5px solid #2E6B4E;
}

.toast-error{
    border-left:5px solid #dc3545;
}

.toast-icon{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bold;
    color:#fff;
}

.toast-success .toast-icon{
    background:#2E6B4E;
}

.toast-error .toast-icon{
    background:#dc3545;
}

.toast-content{
    flex:1;
}

.toast-content h4{
    margin:0 0 4px;
    color:#1F4F39;
    font-size:16px;
}

.toast-content p{
    margin:0;
    color:#666;
}

.toast-close{
    border:none;
    background:none;
    font-size:22px;
    cursor:pointer;
}

@keyframes slideIn{
    from{
        opacity:0;
        transform:translateX(100%);
    }
    to{
        opacity:1;
        transform:translateX(0);
    }
}

.cwa-logo {
    width: 141px;
    height: auto;
}