/* --- FINAL BRAND IDENTITY STYLE - 24 Aug 2025 --- */

/* --- Modern CSS Reset & Global Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { 
    scroll-behavior: smooth; 
    -webkit-text-size-adjust: 100%;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

input, button, textarea, select {
    font: inherit;
}

:root {
    /* New Brand Colors */
    --brand-bg: #FDF8E8; /* Light Cream */
    --brand-card-bg: #FFFFFF;
    --brand-text: #4a4a4a; /* Dark Charcoal */
    --brand-red: #d92047;
    --brand-gold: #f39c12;
    --brand-teal: #008599;
    --brand-border: #eeeeee;

    /* Main Site Variables */
    --bg-color: var(--brand-bg);
    --card-color: var(--brand-card-bg);
    --text-color: var(--brand-text);
    --accent-red: var(--brand-red);
    --accent-blue: var(--brand-teal); /* Using teal for links now */
    --accent-gold: var(--brand-gold);
    --input-bg: #fdf5e0;
    --input-text: #5c5c5c;
    --shadow-color-1: rgba(0,0,0,0.08);
    --shadow-color-2: #ffffff;
    --inset-shadow-dark: rgba(0,0,0,0.1);
    --inset-shadow-light: rgba(255,255,255,0.7);
    --content-page-bg: var(--brand-bg);
    --content-card-bg: var(--brand-card-bg);
    --content-text-color: var(--brand-text);
    --content-border-color: var(--brand-border);
    --footer-bg: #f8f9fa;
    --footer-text-color: #6c757d;
    --header-bg: rgba(253, 248, 232, 0.85); /* Semi-transparent cream */
    
    /* Article Page Specific */
    --article-bg: var(--brand-card-bg);
    --article-text: var(--brand-text);
    --article-accent: var(--brand-teal);
    --article-border: var(--brand-border);
}

body {
    font-family: 'Lato', sans-serif;
    padding-top: 60px;
    background-color: var(--content-page-bg);
    color: var(--content-text-color);
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
}

.main-header{position:fixed;top:0;left:0;width:100%;height:60px;background-color:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:flex;justify-content:space-between;align-items:center;padding:0 clamp(15px,4vw,30px);box-shadow:0 2px 10px rgba(0,0,0,.1);transition:background-color .3s ease}
.header-logo{font-family:'Lobster',cursive;font-size:1.5rem;color:var(--brand-text);text-decoration:none;flex-shrink:0; display: flex; align-items: center;}
.header-nav{display:none}.header-nav a{font-family:'Poppins',sans-serif;color:var(--brand-text);text-decoration:none;margin-left:25px;font-size:1rem;font-weight:500;transition:color .2s ease}.header-nav a:hover{color:var(--accent-red)}.mobile-nav-toggle{display:block;background:none;border:none;color:var(--brand-text);font-size:1.8rem;cursor:pointer;z-index:1002}.mobile-nav-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--header-bg);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:1001;opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s .3s}.mobile-nav-overlay.nav-open{opacity:1;visibility:visible;transition:opacity .3s ease}.mobile-nav-overlay a{font-family:'Poppins',sans-serif;color:var(--brand-text);text-decoration:none;font-size:1.5rem;margin:15px 0;transition:color .2s ease}.mobile-nav-overlay a:hover{color:var(--accent-red)}

.hero-section{display:flex;justify-content:center;align-items:center;padding:40px 20px;background-color:var(--bg-color);position:relative;overflow:hidden;transition:background-color .3s ease;min-height:calc(100vh - 60px)}.calculator-wrapper{width:100%;max-width:420px;position:relative;z-index:1;display:flex;flex-direction:column}.state-container{width:100%;background:var(--card-color);border-radius:30px;box-shadow:10px 10px 20px var(--shadow-color-1);border:1px solid var(--brand-border);flex-direction:column;align-items:center;text-align:center;transition:opacity .3s ease;overflow:hidden;flex-grow:1;display:flex}#input-state{justify-content:center;padding:clamp(20px,4vh,30px) clamp(20px,5vw,30px);gap:10px}.calculating #input-state{display:none}#result-state{display:none;justify-content:space-between;padding:0}.calculating #result-state{display:flex}

h1{font-family:'Lobster',cursive;color:var(--brand-text);font-size:clamp(1.8rem,7vw,2.5rem);margin:0 0 10px 0;font-weight:normal}.pulsing-heart{font-size:2rem;margin:0;animation:pulse-normal 1.5s infinite ease-in-out;flex-shrink:0}.pulsing-heart.active{animation:pulse-active .5s infinite ease-in-out}.person-input-group{width:100%}.input-title-label{font-family:'Dancing Script',cursive;font-size:clamp(1.3rem,5vw,1.5rem);font-weight:700;color:var(--brand-text);margin-bottom:5px;display:block;text-shadow:none;}

.name-input,.date-input{font-family:'Lato',sans-serif;width:100%;padding:12px;border:1px solid #ddd;border-radius:15px;font-size:1rem;text-align:center;background:var(--input-bg);color:var(--text-color);transition:all .3s ease;box-shadow:inset 2px 2px 5px rgba(0,0,0,0.05);}.name-input:focus,.date-input:focus{outline:none;border-color:var(--accent-red);box-shadow:0 0 0 3px rgba(217, 32, 71, 0.2);}

.name-input{margin-bottom:5px}.optional-text{font-size:.85rem;color:var(--input-text);margin:2px 0 8px 0;display:block}.error-message{color:#f85149;font-size:.8rem;height:1rem;display:block;margin-bottom:5px}.name-input::placeholder{color:var(--input-text);opacity:.7}

.button{width:100%;font-family:'Poppins',sans-serif;background-color:var(--accent-red);color:white;padding:14px 10px;border:none;border-radius:50px;font-size:clamp(1rem,4vw,1.1rem);font-weight:600;cursor:pointer;transition:all .3s ease,transform .1s ease;margin-top:15px;box-shadow:0 4px 15px rgba(217, 32, 71, 0.25);}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px rgba(217, 32, 71, 0.3);}.button:active:not(:disabled){transform:scale(.98)}.button:disabled{background-color:#E0A7B3;opacity:.8;cursor:not-allowed;box-shadow:none}

#result-state{border-top:5px solid var(--accent-red)}.result-main-content{width:100%;overflow-y:auto;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px clamp(20px,5vw,30px)}.result-actions{flex-shrink:0;width:100%;display:flex;flex-direction:column;gap:10px;padding:15px clamp(20px,5vw,30px) 20px;background:var(--card-color);border-top:1px solid var(--brand-border);transition:background-color .3s ease}

#result-emoji{font-size:clamp(2.2rem,7vw,2.5rem);height:2.8rem}#result-names{font-size:clamp(1.2rem,4.5vw,1.4rem);margin:5px 0;font-weight:600}#result-score{font-size:clamp(3.5rem,12vw,4rem);margin:2px 0 8px 0;font-weight:700;color:var(--brand-text); font-family:'Playfair Display', serif;}#result-message{font-family:'Poppins',sans-serif;font-weight:700;font-size:clamp(1rem,4vw,1.15rem);margin:0 0 8px 0;letter-spacing:.5px}#result-advice{font-size:clamp(1rem,3.5vw,1.1rem);line-height:1.6;opacity:.9;padding:0 10px;font-family:'Lato',sans-serif;font-weight:400;color:var(--brand-text)}
#loveStoryContainer{background-color:rgba(0,0,0,.02);border-radius:15px;padding:15px;margin-top:15px;display:none;text-align:left;font-style:italic;border-left:3px solid var(--brand-teal)}#loveStoryText{margin:0;font-size:.95rem;line-height:1.5}.social-share{margin-bottom:10px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}.social-icon{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;text-decoration:none;color:white!important;font-size:1.2rem;transition:transform .2s ease}.social-icon:hover{transform:scale(1.15)}.si-x{background-color:#14171A}.si-facebook{background-color:#1877F2}.si-whatsapp{background-color:#25D366}.si-instagram{background:radial-gradient(circle at 30% 107%,#fdf497 0%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%)}.si-sms{background-color:#48C9B0}.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}.button-grid .button{margin-top:0;font-size:1rem}#loveStoryBtn{background-color:#8e44ad}#copyBtn{background-color:#27ae60}#downloadBtn{background-color:var(--brand-teal)}#tryAgainBtn{background-color:var(--accent-red)}.progress-container{position:absolute;bottom:0;left:0;width:100%;height:10px;background-color:var(--input-bg);border-bottom-left-radius:30px;border-bottom-right-radius:30px;display:none}.progress-bar{width:0;height:100%;background-color:var(--brand-teal);border-radius:inherit}.calculating .progress-bar{animation:load 1.2s ease-out forwards}.calculating .progress-container{display:block}.engagement-message{font-family:'Lato',sans-serif;font-weight:600;font-size:clamp(.9rem,3vw,1rem);opacity:.9;margin:10px 0 0 0;transition:color .5s ease}#flames-result{font-family:'Poppins',sans-serif;font-weight:600;font-size:clamp(1.2rem,4vw,1.4rem);margin:5px 0 10px 0;padding:5px 15px;border-radius:20px;color:#fff;text-shadow:1px 1px 2px rgba(0,0,0,.5);display:none}.flames-love{background-color:#e91e63}.flames-friendship{background-color:#4caf50}.flames-marriage{background-color:#9c27b0}.flames-affection{background-color:#2196f3}.flames-enemy{background-color:#b71c1c}.flames-sibling{background-color:#ff9800}

/* --- Enhanced Calculator Result Styles --- */
#result-breakdown {
    width: 100%;
    margin-top: 20px;
    padding: 15px;
    background-color: rgba(0,0,0,0.02);
    border-radius: 15px;
    border-top: 2px solid var(--brand-border);
    text-align: left;
}
#result-breakdown h4 {
    font-family: 'Playfair Display', serif;
    color: var(--brand-teal);
    margin-bottom: 10px;
    text-align: center;
    font-size: 1.2rem;
}
.breakdown-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 0.95rem;
}
.breakdown-icon {
    font-size: 1.5rem;
    color: var(--accent-gold);
    flex-shrink: 0;
    width: 30px;
    text-align: center;
}
.breakdown-text strong {
    color: var(--brand-text);
}
.breakdown-text {
    color: var(--input-text);
}
/* --- End Enhanced Styles --- */


.content-wrapper{padding:50px 20px;width:100%}.content-section{background-color:var(--content-card-bg);max-width:800px;margin:0 auto 30px auto;padding:clamp(20px,5vw,40px);border-radius:16px;border:1px solid var(--content-border-color);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);transition:background-color .3s ease,border-color .3s ease}.content-section h2{font-family:'Playfair Display',serif;font-weight:700;font-size:clamp(1.5rem,5vw,1.8rem);color:var(--brand-text);margin:0 0 25px 0;border-bottom:3px solid var(--accent-red);padding-bottom:10px}.content-section h3{font-family:'Playfair Display',serif;font-weight:700;color:var(--accent-gold);margin-top:25px;margin-bottom:15px}.content-section a{color:var(--brand-teal)}.content-section .article-summary-list{list-style:none;padding-left:0}.content-section .article-summary-list li{background-color:rgba(0,0,0,.02);padding:15px;border-radius:8px;margin-bottom:15px;border-left:3px solid var(--brand-teal);transition:transform .2s ease}.content-section .article-summary-list li:hover{transform:translateY(-3px)}.content-section .article-summary-list a{font-weight:bold;font-size:1.1rem;text-decoration:none}.content-section .article-summary-list a:hover{text-decoration:underline}.content-section .article-summary-list p{margin-top:5px;margin-bottom:0;padding-left:0;border-left:none;opacity:.8}

.page-footer{text-align:center;padding:30px 20px 40px 20px;background-color:var(--footer-bg);color:var(--footer-text-color);transition:background-color .3s ease,color .3s ease}.page-footer a{color:var(--brand-teal);text-decoration:none}.page-footer .disclaimer-text{margin-top:15px;font-size:.85rem;opacity:.8;max-width:800px;margin-left:auto;margin-right:auto}

@keyframes pulse-normal{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}@keyframes pulse-active{0%,100%{transform:scale(1.1)}50%{transform:scale(1.3)}}@keyframes load{from{width:0}to{width:100%}}@keyframes result-fade-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.calculating #result-emoji,.calculating #result-names,.calculating #result-score,.calculating #flames-result,.calculating #result-message,.calculating #result-advice,.calculating .social-share,.calculating .button-grid, .calculating #result-breakdown{animation:result-fade-in .6s ease-out forwards;opacity:0}.calculating #result-emoji{animation-delay:.2s}.calculating #result-names{animation-delay:.3s}.calculating #result-score{animation-delay:.4s}.calculating #flames-result{animation-delay:.5s}.calculating #result-message{animation-delay:.6s}.calculating #result-advice{animation-delay:.7s}.calculating .social-share{animation-delay:.7s}.calculating .button-grid{animation-delay:.7s}.calculating #result-breakdown{animation-delay:.8s}

body.article-page{background-color:var(--article-bg)}
body.article-page .content-section{background-color:var(--article-bg);color:var(--article-text);border-color:var(--article-border);line-height:1.8}

body.article-page .content-section h1,
body.article-page .content-section h2 {
    font-family:'Playfair Display',serif;
    font-size:clamp(2rem,6vw,2.8rem);
    color: var(--article-accent);
    border-bottom:2px solid var(--article-accent);
    margin-bottom: 25px;
}

body.article-page .content-section h3{font-family:'Playfair Display',serif;color:var(--article-text);font-weight:700}
body.article-page .content-section a{color:var(--article-accent);text-decoration:none;font-weight:600;border-bottom:1px dotted var(--article-accent)}
body.article-page .content-section a:hover{background-color:#f1f1f1}
body.article-page .main-header .header-logo img {
    filter: none; /* Ensure logo is full color on article pages */
}
body.article-page .main-header .header-nav a,
body.article-page .main-header .mobile-nav-toggle {
    color: var(--brand-text);
}

.article-featured-image {
    width: 100%;
    border-radius: 12px;
    margin-bottom: 25px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
    background-color: var(--brand-border);
}


@media (max-width:400px){.button-grid .button{font-size:.9rem}}@media (max-width:360px){.button-grid{grid-template-columns:1fr}}@media (min-width:600px){.content-wrapper{padding:60px 40px}.page-footer{padding-left:40px;padding-right:40px}}

@media (min-width: 768px) {
    .mobile-nav-toggle { display: none; }
    .header-nav { display: flex; align-items: center; }
    .hero-section { padding: 60px 40px; }
}

@media (min-width:1024px){.content-section{max-width:850px}
body.article-page .content-section h1,
body.article-page .content-section h2 {
    font-size:clamp(2.2rem,4vw,3rem);
}
.page-footer .disclaimer-text,.content-section p,.content-section ul,.content-section ol{font-size:1.05rem}}

/* --- Author Bio Box --- */
.author-bio {
    margin-top: 40px;
    padding: 20px;
    background-color: rgba(0,0,0,0.02);
    border-radius: 12px;
    border: 1px solid var(--content-border-color);
    display: flex;
    align-items: center;
    gap: 20px;
}
.author-bio div {
    flex: 1; 
    min-width: 0;
}
body.article-page .author-bio a {
    border-bottom: none;
}
.author-bio img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background-color: var(--content-border-color);
}
.author-bio p.author-name {
    font-weight: bold;
    font-size: 1.2rem;
    margin-bottom: 5px;
    color: var(--accent-gold);
    text-align: left; /* Keep title left-aligned */
}

/* --- Related Articles Section --- */
.related-articles {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--content-border-color);
}
.related-articles h3 {
    margin: 0 0 20px 0;
    font-family: 'Playfair Display', serif;
    color: var(--article-text);
}
.related-articles ul {
    list-style: none;
    padding-left: 0;
}
.related-articles li {
    margin-bottom: 10px;
}

/* --- CTA Box --- */
body.article-page .cta-box {
    background-color: #f8f9fa; 
    border: 1px solid #e9ecef;
    border-left: 5px solid var(--accent-red);
    max-width: 90%;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    padding: 25px;
    border-radius: 8px;
    text-align: center;
}
body.article-page .cta-box p {
    color: var(--article-text);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 15px;
}
.cta-box .button {
    display: inline-block;
    width: auto;
    padding: 12px 30px;
    text-decoration: none;
    margin-top: 0;
}

.content-section a.button,
body.article-page .cta-box a.button {
    color: white;
    border-bottom: none; 
}
.content-section a.button:hover {
    background-color: var(--brand-red);
}

/* --- QUIZ STYLES --- */
.quiz-container { text-align: center; }
.question { margin-bottom: 30px; }
.quiz-options { list-style: none; padding: 0; margin-top: 15px; display: flex; flex-direction: column; gap: 10px; }
.quiz-option { background-color: var(--brand-card-bg); border: 2px solid var(--brand-border); border-radius: 12px; padding: 15px; cursor: pointer; transition: all 0.2s ease; font-weight: 600; }
.quiz-option:hover { background-color: var(--brand-bg); border-color: var(--brand-red); transform: translateY(-2px); }
.quiz-result { text-align: center; padding: 30px; border: 2px solid var(--brand-teal); border-radius: 15px; background-color: #f8f9fa; }
.quiz-result h3 { color: var(--brand-red); font-family: 'Playfair Display', serif; }
#quiz-start, #quiz-questions, #quiz-result-container { display: block; }
.hidden { display: none !important; }

/* --- QUOTE OF THE DAY STYLES --- */
#quote-of-the-day {
    text-align: center;
    border-top: 2px solid var(--brand-border);
    border-bottom: 2px solid var(--brand-border);
    padding: 30px 20px;
    background-color: rgba(255, 255, 255, 0.5);
}
#quote-of-the-day p {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    font-style: italic;
    color: var(--brand-text);
    margin-bottom: 10px;
}
#quote-of-the-day cite {
    font-style: normal;
    font-weight: bold;
    color: var(--brand-red);
}