/* --- VARIABILE CULORI --- */
:root {
  --galben-miere: #F4B400;
  --auriu: #D4AF37;
  --alb: #FFFFFF;
  --maro-deschis: #8B5A2B;
  --maro-inchis: #4A3018;
  --verde-discret: #6B8E23;
  --fundal: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
body { background-color: var(--fundal); color: var(--maro-inchis); line-height: 1.6; }
a { text-decoration: none; color: inherit; }

/* --- NAVIGARE --- */
/* --- NAVIGARE --- */
/* --- NAVIGARE --- */
header { 
    background: var(--maro-inchis); /* Maro-ul ales de tine */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    position: sticky; top: 0; z-index: 1000; 
}

.navbar { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 1rem 5%; 
    max-width: 100%; 
}

/* Aici forțăm culoarea albă pentru toate link-urile din meniu */
.nav-links a { 
    color: var(--alb) !important; 
    text-decoration: none; 
    font-weight: 500;
}

/* Efectul de hover să rămână galben pentru contrast */
.nav-links a:hover { 
    color: var(--galben-miere) !important; 
}

/* Logo-ul alb */
.logo { 
    font-size: 1.5rem; 
    font-weight: bold; 
    color: var(--auriu) !important; 
    text-decoration: none; 
}

/* Restul rămâne la fel */
.nav-links { display: flex; gap: 2rem; list-style: none; }
.nav-links a:hover { color: var(--galben-miere); }
.btn-nav { background: var(--galben-miere); color: var(--alb); padding: 0.5rem 1rem; border-radius: 5px; font-weight: bold; }
.btn-nav:hover { background: var(--auriu); }

/* --- HERO SECTION --- */
.hero {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrare implicită pentru tot ce e în Hero */
    background: #ffffff !important;
    padding: 40px 5%;
}

/* Wrapper-ul pentru logo: îl forțăm să ocupe toată lățimea și să alinieze la stânga */
.logo-wrapper {
    width: 100%;
    text-align: left;
    margin-bottom: 30px; /* Spațiu între logo și butoane */
}

/* Logo-ul propriu-zis: acum îi poți regla dimensiunea fără să afecteze butoanele */
.hero-logo {
    max-width: 1450px; /* Ajustează dimensiunea aici */
    height: auto;
}

/* Containerul butoanelor: asigură centrarea */
.hero-buttons {
    text-align: center;
}

.hero h1 { 
    color: var(--maro-inchis); /* Titlul devine maro */
    font-size: 3rem; 
    margin-bottom: 1rem; 
}

.hero p { 
    color: var(--maro-inchis); /* Și textul descriptiv devine maro */
    font-size: 1.2rem; 
    margin-bottom: 2rem; 
    max-width: 600px; 
    margin-left: auto; 
    margin-right: auto; 
}
/* Butonul principal (Galben, măricel) */
.btn-primary { 
    background: var(--galben-miere) !important; 
    color: var(--alb) !important; 
    padding: 15px 30px; 
    border-radius: 30px; 
    font-weight: bold; 
    display: inline-block; 
    margin: 10px; 
    transition: 0.3s; 
    text-decoration: none;
    border: none;
}
.btn-primary:hover { background: var(--auriu) !important; transform: translateY(-2px); }

/* Butonul secundar (Maro, cu bordură, pentru contrast) */
.btn-secondary { 
    background: transparent !important; 
    border: 2px solid var(--maro-inchis) !important; 
    color: var(--maro-inchis) !important; 
    padding: 13px 30px; 
    border-radius: 30px; 
    font-weight: bold; 
    display: inline-block; 
    margin: 10px; 
    transition: 0.3s; 
}
.btn-secondary:hover { background: var(--maro-inchis) !important; color: var(--alb) !important; }
/* --- SECȚIUNI GENERICE --- */
.section { 
    padding: 4rem 5%; 
    max-width: 1200px; 
    margin: auto; 
    text-align: center; 
    background: #ffffff !important; /* Forțăm alb curat */
}

.section h2, .section h1 { 
    color: var(--auriu); 
    font-size: 2.2rem; 
    margin-bottom: 2rem; 
}

.grid-3 { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 2rem; 
}

.card { 
    background: #ffffff !important; /* Cardul alb pe fundal alb */
    padding: 2rem; 
    border-radius: 10px; 
    box-shadow: none !important;    /* SCOATEM UMBRA - asta era "pata" */
    border: 1px solid #e0e0e0;      /* O linie subțire discretă */
    border-bottom: 4px solid var(--galben-miere); 
}

/* --- FOOTER & LEGAL --- */
footer { background: var(--maro-inchis); color: var(--alb); padding: 3rem 5% 1rem; text-align: center; }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.footer-links a { color: var(--galben-miere); font-size: 0.9rem; }

/* --- COOKIE BANNER --- */
#cookie-banner { position: fixed; bottom: 0; left: 0; width: 100%; background: var(--alb); padding: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.1); text-align: center; z-index: 9999; display: none; }
#cookie-banner button { background: var(--verde-discret); color: var(--alb); border: none; padding: 10px 20px; cursor: pointer; border-radius: 5px; margin-left: 10px; }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .hero h1 { font-size: 2rem; }
}
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Așază logo-ul și meniul unul sub altul */
        padding: 1rem;
        gap: 15px;
    }

    .nav-links {
        flex-direction: column; /* Așază link-urile pe verticală */
        gap: 10px;
        text-align: center;
    }

    .logo {
        font-size: 1.2rem; /* Micșorează puțin textul logo-ului pe mobil */
    }
}
.sectiune-aurie {
    border: 2px solid var(--auriu);
    border-radius: 15px;
    padding: 2rem;
    margin: 20px 0;
    background: #ffffff;
    
    /* Asta rezolvă centrarea textului și a titlurilor */
    text-align: center; 
    
}
/* Acest cod forțează titlurile din secțiunea ta să fie aurii și centrate */
.sectiune-aurie h1, 
.sectiune-aurie h2 {
    color: var(--auriu) !important; 
    text-align: center !important;
    font-size: 3rem; 
    margin-bottom: 2rem; /* Adaugă spațiu între titlu și restul conținutului */
}
/* Secțiune nouă pentru centrare butoane */
.centrare-buton {
    display: flex;          /* Folosim Flexbox pentru control total */
    justify-content: center; /* Centrează pe orizontală */
    padding: 20px 0;         /* Spațiu sus și jos */
    width: 100%;             /* Ocupă toată lățimea */
}


/* Dacă vrei să te asiguri că butonul arată bine */
.btn-primary {
    display: inline-block;
    padding: 15px 30px;
    text-decoration: none;
    /* ... restul stilurilor tale existente pentru buton ... */
}
.poveste-container {
    max-width: 800px; /* Limitează lățimea textului ca să fie ușor de citit */
    margin: 0 auto;   /* Centrează totul */
    line-height: 1.6; /* Spațiu între linii pentru lizibilitate */
    text-align: left; /* Textul narativ se citește mai bine aliniat la stânga */
}

.poveste-container h2, 
.poveste-container h3 {
    text-align: center; /* Titlurile rămân centrate */
}
/* Scoate spațiul gol excesiv de la ultima secțiune */
.sectiune-aurie:last-of-type {
    margin-bottom: 20px !important; 
}

/* Forțează footer-ul să stea la final dacă pagina e scurtă */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

footer {
    margin-top: auto; /* Această linie împinge footer-ul la fundul paginii */
    padding: 20px;
    text-align: center;
}
.poveste-container {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.8; /* Spațiu generos între rânduri */
    color: #444;
}

.intro-text {
    font-size: 1.2rem;
    font-weight: 500;
    color: #2c3e50;
    margin-bottom: 2rem;
}

.citat-auriu {
    border-left: 5px solid var(--auriu);
    padding-left: 20px;
    margin: 30px 0;
    font-style: italic;
    font-size: 1.2rem;
    color: var(--auriu);
    background: #fffdf5; /* O nuanță foarte fină de galben */
    padding: 20px;
}

h3 {
    color: var(--auriu);
    margin-top: 2rem;
}
.sectiune-blog-clickbait { padding: 50px 20px; background: #fffdf5; }
.titlu-mare { text-align: center; margin-bottom: 40px; color: #2c3e50; }

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}

.blog-card {
    background: white;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05);
    border-bottom: 5px solid #d4af37;
    transition: 0.4s;
}

.blog-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(212, 175, 55, 0.2); }

.emoji { font-size: 3rem; display: block; margin-bottom: 10px; }

summary {
    cursor: pointer;
    color: #d4af37;
    font-weight: bold;
    margin-top: 20px;
    outline: none;
    transition: 0.3s;
}

.continut-ascuns {
    margin-top: 20px;
    padding: 15px;
    background: #fdfaf0;
    border-radius: 10px;
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
}

/* Animație fină la deschidere */
details[open] .continut-ascuns { animation: slideDown 0.4s ease; }

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}