/* ═══════════════════════════════════════
   fempedia.top — Women's Health Encyclopedia
   Theme: Soft Rose + Warm Cream
   Premium design. Unique from all other sites.
   ═══════════════════════════════════════ */

/* === CSS Variables === */
:root {
    --rose: #c44569;
    --rose-dark: #a03756;
    --rose-light: #f8e4ea;
    --rose-ghost: #fdf2f5;
    --cream: #fefaf5;
    --white: #ffffff;
    --plum: #2d1b24;
    --warm-gray: #8c7b84;
    --warm-border: #e8dde0;
    --warm-border-light: #f2eaed;
    --shadow-sm: 0 2px 8px rgba(44,27,36,0.06);
    --shadow-md: 0 4px 20px rgba(44,27,36,0.08);
    --shadow-lg: 0 8px 32px rgba(44,27,36,0.10);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* === Reset === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{font-size:16px;scroll-behavior:smooth}

body{
    font-family:var(--font);
    background:var(--cream);
    color:var(--plum);
    line-height:1.7;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

main{flex:1}

a{color:var(--rose);text-decoration:none;transition:color .2s}
a:hover{color:var(--rose-dark)}

img{max-width:100%;height:auto}

/* === Header === */
.site-header{
    background:var(--white);
    border-bottom:1px solid var(--warm-border);
    position:sticky;
    top:0;
    z-index:100;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.header-inner{
    max-width:1100px;
    margin:0 auto;
    padding:14px 24px;
    display:flex;
    align-items:center;
    gap:24px;
    flex-wrap:wrap;
}

.logo-link{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:1.3rem;
    font-weight:700;
    color:var(--rose);
    letter-spacing:-0.02em;
}
.logo-icon{font-size:1.5rem}
.logo-text{color:var(--plum)}

.main-nav{
    display:flex;
    gap:4px;
    flex:1;
}
.main-nav a{
    padding:6px 14px;
    border-radius:20px;
    color:var(--warm-gray);
    font-size:.9rem;
    font-weight:500;
    transition:all .2s;
}
.main-nav a:hover,
.main-nav a.active{
    color:var(--rose);
    background:var(--rose-ghost);
}

.lang-select{
    margin-left:auto;
    padding:6px 12px;
    border:1px solid var(--warm-border);
    border-radius:20px;
    background:var(--white);
    color:var(--plum);
    font-size:.82rem;
    font-family:var(--font);
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238c7b84'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    padding-right:28px;
    min-width:100px;
}
.lang-select:focus{outline:2px solid var(--rose-light);border-color:var(--rose)}

/* === Hero (Homepage) === */
.hero{
    background:linear-gradient(135deg, var(--white) 0%, var(--rose-ghost) 50%, var(--cream) 100%);
    padding:80px 24px 60px;
    text-align:center;
}
.hero-content{max-width:700px;margin:0 auto}
.hero h1{
    font-size:2.8rem;
    font-weight:800;
    color:var(--plum);
    letter-spacing:-0.03em;
    margin-bottom:8px;
}
.hero-tagline{
    font-size:1.2rem;
    color:var(--warm-gray);
    margin-bottom:24px;
    line-height:1.6;
}

.hero-badges,.badge-row{
    display:flex;
    gap:10px;
    justify-content:center;
    flex-wrap:wrap;
}
.badge{
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:6px 14px;
    border-radius:20px;
    background:var(--rose-ghost);
    border:1px solid var(--rose-light);
    color:var(--rose-dark);
    font-size:.82rem;
    font-weight:600;
}

/* === Sections === */
.tools-section,.guides-section{
    max-width:1100px;
    margin:0 auto;
    padding:60px 24px;
}
.section-title{
    font-size:1.8rem;
    font-weight:700;
    color:var(--plum);
    margin-bottom:8px;
    letter-spacing:-0.02em;
}
.section-desc{
    color:var(--warm-gray);
    margin-bottom:32px;
    font-size:.95rem;
}

/* === Tool Cards === */
.tool-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:20px;
}
.tool-card{
    background:var(--white);
    border:1px solid var(--warm-border);
    border-radius:var(--radius);
    padding:24px;
    transition:all .3s cubic-bezier(.4,0,.2,1);
    display:block;
}
.tool-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--shadow-lg);
    border-color:var(--rose-light);
}
.tool-icon{font-size:2rem;display:block;margin-bottom:12px}
.tool-card h3{
    font-size:1.05rem;
    font-weight:700;
    color:var(--plum);
    margin-bottom:6px;
}
.tool-card p{
    font-size:.85rem;
    color:var(--warm-gray);
    line-height:1.5;
}

/* === Guide Cards === */
.guide-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:16px;
}
.guide-card{
    background:var(--white);
    border:1px solid var(--warm-border-light);
    border-radius:var(--radius-sm);
    padding:20px;
    transition:all .25s;
    display:flex;
    align-items:center;
    gap:12px;
}
.guide-card:hover{
    border-color:var(--rose-light);
    background:var(--rose-ghost);
}
.guide-icon{font-size:1.3rem}
.guide-card h4{font-size:.9rem;font-weight:600;color:var(--plum)}

/* === Tool Hero (tool pages) === */
.tool-hero{
    background:linear-gradient(135deg, var(--white), var(--rose-ghost));
    padding:60px 24px 40px;
    text-align:center;
}
.tool-hero h1{
    font-size:2.2rem;
    font-weight:800;
    color:var(--plum);
    letter-spacing:-0.02em;
    max-width:800px;
    margin:0 auto 12px;
}
.tool-desc{
    color:var(--warm-gray);
    font-size:1.05rem;
    max-width:650px;
    margin:0 auto 20px;
    line-height:1.6;
}

.tool-disclaimer{
    text-align:center;
    padding:10px 24px;
    color:var(--warm-gray);
    font-size:.82rem;
    max-width:800px;
    margin:0 auto;
}

/* === Calculator Form === */
.tool-area{
    max-width:600px;
    margin:0 auto;
    padding:40px 24px 60px;
}
.calc-form{
    background:var(--white);
    border:1px solid var(--warm-border);
    border-radius:var(--radius-lg);
    padding:32px;
    box-shadow:var(--shadow-sm);
}
.calc-row{
    margin-bottom:20px;
}
.calc-row label{
    display:block;
    font-weight:600;
    color:var(--plum);
    font-size:.9rem;
    margin-bottom:6px;
}
.calc-input{
    width:100%;
    padding:12px 16px;
    border:1px solid var(--warm-border);
    border-radius:var(--radius-sm);
    font-size:1rem;
    font-family:var(--font);
    color:var(--plum);
    background:var(--cream);
    transition:border-color .2s;
}
.calc-input:focus{
    outline:none;
    border-color:var(--rose);
    box-shadow:0 0 0 3px var(--rose-light);
}

/* === Button === */
.calc-btn{
    display:block;
    width:100%;
    padding:14px;
    background:var(--rose);
    color:var(--white);
    border:none;
    border-radius:var(--radius-sm);
    font-size:1.05rem;
    font-weight:700;
    font-family:var(--font);
    cursor:pointer;
    transition:all .25s;
    letter-spacing:0.01em;
}
.calc-btn:hover{
    background:var(--rose-dark);
    transform:translateY(-1px);
    box-shadow:0 4px 16px rgba(196,69,105,.3);
}
.calc-btn:active{transform:translateY(0)}

/* === Results === */
.calc-result{
    margin-top:24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.result-card{
    background:var(--white);
    border:1px solid var(--warm-border);
    border-radius:var(--radius-sm);
    padding:16px 20px;
    font-size:.95rem;
    color:var(--plum);
}
.result-card.highlight{
    border-color:var(--rose-light);
    background:var(--rose-ghost);
}
.result-card strong{
    display:block;
    font-size:.8rem;
    color:var(--warm-gray);
    text-transform:uppercase;
    letter-spacing:.05em;
    margin-bottom:4px;
}

/* === SEO Section === */
.seo-section{
    max-width:800px;
    margin:40px auto;
    padding:0 24px;
}
.seo-section h2{
    font-size:1.4rem;
    color:var(--plum);
    margin:32px 0 12px;
    letter-spacing:-0.01em;
}
.seo-section p{
    color:var(--warm-gray);
    line-height:1.8;
    margin-bottom:16px;
}

/* === FAQ === */
.faq-section{
    max-width:800px;
    margin:40px auto 60px;
    padding:0 24px;
}
.faq-section h2{
    font-size:1.4rem;
    color:var(--plum);
    margin-bottom:20px;
}
.faq-item{
    background:var(--white);
    border:1px solid var(--warm-border-light);
    border-radius:var(--radius-sm);
    margin-bottom:8px;
    overflow:hidden;
}
.faq-item summary{
    padding:16px 20px;
    font-weight:600;
    color:var(--plum);
    cursor:pointer;
    font-size:.95rem;
    list-style:none;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
    content:'+';
    font-size:1.2rem;
    color:var(--rose);
    font-weight:400;
}
.faq-item[open] summary::after{content:'−'}
.faq-item p{
    padding:0 20px 16px;
    color:var(--warm-gray);
    line-height:1.7;
    font-size:.9rem;
}

/* === Guide Article === */
.guide-article{
    max-width:800px;
    margin:0 auto;
    padding:60px 24px;
}
.guide-article h1{
    font-size:2.2rem;
    font-weight:800;
    color:var(--plum);
    margin-bottom:16px;
    letter-spacing:-0.02em;
}
.guide-disclaimer{
    color:var(--warm-gray);
    font-size:.85rem;
    margin-bottom:32px;
    padding:10px 16px;
    background:var(--rose-ghost);
    border-radius:var(--radius-sm);
    border-left:3px solid var(--rose-light);
}
.guide-body{line-height:1.9;color:var(--plum)}
.guide-body h3{
    font-size:1.3rem;
    color:var(--plum);
    margin:32px 0 12px;
}
.guide-body p{
    margin-bottom:16px;
    color:var(--warm-gray);
}
.guide-body strong{color:var(--plum);font-weight:600}

/* === Static Pages === */
.static-page{
    max-width:800px;
    margin:0 auto;
    padding:60px 24px;
}
.static-page h1{
    font-size:2rem;
    font-weight:800;
    color:var(--plum);
    margin-bottom:32px;
}
.static-content{line-height:1.9;color:var(--warm-gray)}
.static-content h3{
    font-size:1.2rem;
    color:var(--plum);
    margin:24px 0 10px;
}
.static-content p{margin-bottom:14px}
.static-content a{color:var(--rose)}

/* === Symptom Log === */
.symptom-log{
    max-width:600px;
    margin:40px auto;
    padding:0 24px;
}
.log-entry{
    display:flex;
    align-items:center;
    gap:12px;
    padding:10px 16px;
    background:var(--white);
    border:1px solid var(--warm-border-light);
    border-radius:var(--radius-sm);
    margin-bottom:6px;
    font-size:.88rem;
}
.log-date{color:var(--warm-gray);min-width:90px;font-size:.8rem}
.log-mood{font-size:.9rem}
.log-note{color:var(--plum);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* === Footer === */
.site-footer{
    background:var(--white);
    border-top:1px solid var(--warm-border);
    padding:40px 24px;
    margin-top:auto;
}
.footer-inner{
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}
.footer-tagline{
    font-size:1.05rem;
    color:var(--plum);
    font-weight:600;
    margin-bottom:8px;
}
.footer-disclaimer{
    font-size:.8rem;
    color:var(--warm-gray);
    margin-bottom:20px;
}
.footer-nav{
    display:flex;
    gap:20px;
    justify-content:center;
    margin-bottom:16px;
}
.footer-nav a{
    color:var(--warm-gray);
    font-size:.85rem;
}
.footer-nav a:hover{color:var(--rose)}
.footer-copy{
    font-size:.78rem;
    color:#c4b5bb;
}

/* === Cookie Bar === */
.cookie-bar{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:var(--white);
    border-top:1px solid var(--warm-border);
    padding:14px 24px;
    display:flex;
    align-items:center;
    gap:16px;
    font-size:.85rem;
    color:var(--plum);
    z-index:200;
    box-shadow:0 -4px 20px rgba(44,27,36,.08);
}
.cookie-bar button{
    padding:8px 20px;
    background:var(--rose);
    color:var(--white);
    border:none;
    border-radius:20px;
    font-size:.85rem;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
    font-family:var(--font);
}
.cookie-bar button:hover{background:var(--rose-dark)}

/* === Responsive === */
@media(max-width:768px){
    .hero h1{font-size:2rem}
    .tool-hero h1,.guide-article h1{font-size:1.6rem}
    .header-inner{padding:10px 16px;gap:8px}
    .main-nav a{padding:4px 10px;font-size:.82rem}
    .lang-select{min-width:80px;font-size:.78rem}
    .tool-grid{grid-template-columns:1fr}
    .calc-form{padding:24px}
}

@media(max-width:480px){
    .hero{padding:50px 16px 40px}
    .hero h1{font-size:1.6rem}
    .hero-tagline{font-size:1rem}
}