/* ============================================================
   Stiluri adăugate la legarea de panoul de administrare:
   logo din setări, arhive de blog, paginație, etichete.
   Restul temei rămâne neatins în styles.css.
   ============================================================ */

/* Logo din panou (Setări → Logo & favicon). Antetul temei folosește
   min-height, deci crește ca să încapă logoul; plafonul oprește exagerările. */
.logo-img {
    display: block;
    height: min(var(--logo-h, 42px), 120px);
    width: auto;
    max-width: 60vw;
    object-fit: contain;
}

/* Logo-ul din subsol, recolorat: mască CSS — forma logoului decupează
   culoarea aleasă în panou. NU e un <img>, deci primește propriile limite. */
.footer-logo-mask {
    display: inline-block;
    height: min(var(--logo-footer-h, 40px), 120px);
    aspect-ratio: var(--mask-ratio, 3);
    max-width: 100%;
    vertical-align: middle;
    -webkit-mask: var(--mask-url) no-repeat center / contain;
    mask: var(--mask-url) no-repeat center / contain;
}

.footer-logo-img {
    display: inline-block;
    height: min(var(--logo-footer-h, 40px), 120px);
    width: auto;
    max-width: 100%;
    object-fit: contain;
    vertical-align: middle;
}

/* Ancorele aterizează sub antetul fix, nu ascunse de el. */
section[id], footer[id], main[id] {
    scroll-margin-top: 100px;
}

/* Arhivele (/blog, /category/…, /tag/…) — grilă statică din cardurile temei. */
.archive-main {
    padding-top: 96px; /* sub antetul fix */
}

.archive-section {
    padding: 48px 0 64px;
}

.archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 32px;
    margin-top: 32px;
}

.archive-grid .blog-card {
    display: flex;
    flex-direction: column;
    height: auto;
}

.archive-empty {
    text-align: center;
    color: #64748b;
    padding: 48px 0;
}

/* Paginația arhivelor. */
.pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 40px 0 16px;
}

.pagination .page {
    display: inline-block;
    min-width: 40px;
    padding: 8px 12px;
    text-align: center;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    text-decoration: none;
    font-weight: 600;
}

.pagination .page.active,
.pagination .page:hover {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/* Eticheta-categorie din antetul articolului e acum un link spre arhivă. */
a.article-category {
    text-decoration: none;
    display: inline-block;
}

/* Etichetele articolului (legăturile spre arhivele /tag/…). */
.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 32px 0 0;
    color: #64748b;
}

.article-tag {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
    color: #1e293b;
    text-decoration: none;
    font-size: 0.9rem;
}

.article-tag:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.blog-header.notfound {
    padding: 64px 0;
}

/* ============================================================
   PAGINI DE ARTICOL ȘI DE CONȚINUT
   Reguli pe ELEMENTE, în limbajul vizual al primei pagini
   (colțuri mari, umbre generoase, albastru + chihlimbar).
   Orice articol adăugat ulterior din panou arată la fel.
   ============================================================ */

/* Bara de firimituri e „lipicioasă" în temă; acum are deasupra ei headerul
   fix de 80px, deci se oprește sub el, nu în spatele lui. */
.article-nav {
    top: 80px;
}

.nav-breadcrumb {
    flex-wrap: wrap;
    gap: 8px;
}

/*
 * Linkurile din firul Ariadnei sunt albastre lângă text gri, iar cele două
 * culori diferă cu 1,06:1 — sub pragul de 3:1. Cine nu distinge culorile nu
 * are cum să vadă că e link. Sublinierea e semnul care nu depinde de culoare.
 * Linia e subțire și decalată, ca să nu taie coada literelor „ș" și „ț".
 */
.nav-breadcrumb a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.nav-breadcrumb a:hover {
    text-decoration-thickness: 2px;
}

.article-header .article-image img {
    width: 100%;
    height: auto;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15);
}

/* Eticheta de categorie, în gradientul folosit pe cardurile de blog. */
a.article-category,
.article-category {
    display: inline-block;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    margin-bottom: 20px;
}

/* --- Tipografia conținutului --- */

/* Lățimea coloanei rămâne cea a temei (.article-content), ca înainte. */

.article-body h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 56px 0 24px;
    padding-bottom: 12px;
    border-bottom: 3px solid #2563eb;
    line-height: 1.25;
    scroll-margin-top: 110px;
}

.article-body h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 36px 0 16px;
    line-height: 1.35;
    scroll-margin-top: 110px;
}

.article-body h4 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
    margin: 26px 0 12px;
}

.article-body p {
    margin-bottom: 20px;
}

.article-body a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.article-body a:hover {
    color: #1e40af;
}

.article-body ul,
.article-body ol {
    margin: 20px 0;
    padding-left: 26px;
}

.article-body li {
    margin-bottom: 10px;
}

.article-body li::marker {
    color: #a56a07;
    font-weight: 700;
}

.article-body strong {
    color: #1f2937;
}

/* Tabelele preiau colțurile mari și umbra cardurilor din temă. */
.article-body table {
    width: 100%;
    margin: 32px 0;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.12);
    font-size: 1rem;
    background: #fff;
}

.article-body thead th {
    background: linear-gradient(135deg, #2563eb, #1e40af);
    color: #fff;
    font-weight: 600;
    text-align: left;
    padding: 14px 16px;
}

.article-body tbody td {
    padding: 14px 16px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    color: #4b5563;
}

.article-body tbody tr:last-child td {
    border-bottom: 0;
}

.article-body tbody tr:nth-child(even) {
    background: #f9fbff;
}

/* Caseta de evidențiere: în articol e un bloc, nu rândul cu pictogramă
   de pe prima pagină — altfel titlul și textul ar sta unul lângă altul. */
.article-body .highlight-box {
    display: block;
    max-width: none;
    padding: 28px 32px;
    border-radius: 16px;
    border: 1px solid #93c5fd;
    border-left: 6px solid #a56a07;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    margin: 32px 0;
}

.article-body .highlight-box h4 {
    margin: 0 0 10px;
    color: #1e40af;
    font-size: 1.15rem;
}

.article-body .highlight-box p:last-child {
    margin-bottom: 0;
}

/* Containerele moștenite din articolele vechi (venite din site-ul static)
   n-aveau nicio regulă: primesc aceeași înfățișare de panou ca restul,
   ca toate articolele să arate dintr-o bucată. */
.article-body .platform-details,
.article-body .outreach-steps,
.article-body .provider-recommendations,
.article-body .final-thought {
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    border-left: 5px solid #2563eb;
    border-radius: 12px;
    padding: 22px 26px;
    margin: 24px 0;
}

.article-body .final-thought {
    border-left-color: #a56a07;
    background: #fffbeb;
}

.article-body .platform-details > :last-child,
.article-body .outreach-steps > :last-child,
.article-body .provider-recommendations > :last-child,
.article-body .final-thought > :last-child {
    margin-bottom: 0;
}

.article-body pre {
    margin: 32px 0;
    padding: 22px 24px;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 16px;
    overflow-x: auto;
    font-size: 0.95rem;
    line-height: 1.65;
}

.article-body pre code {
    background: none;
    color: inherit;
    padding: 0;
}

.article-body code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    background: #fff7ed;
    color: #b45309;
    padding: 0.12em 0.4em;
    border-radius: 6px;
    font-size: 0.94em;
}

.article-body blockquote {
    margin: 32px 0;
    padding: 20px 26px;
    background: #f8fafc;
    border-left: 6px solid #a56a07;
    border-radius: 0 12px 12px 0;
    color: #334155;
}

.article-body img {
    max-width: 100%;
    height: auto;
    border-radius: 16px;
    margin: 24px 0;
}

.article-body hr {
    border: 0;
    border-top: 1px solid #e5e7eb;
    margin: 40px 0;
}

/* --- Componente de sub articol --- */

.article-tags {
    margin: 40px 0 0;
}

.article-cta-box {
    margin: 48px 0 0;
    padding: 36px;
    border-radius: 20px;
    background: linear-gradient(135deg, #1e40af, #2563eb);
    color: #fff;
    text-align: center;
    box-shadow: 0 20px 40px rgba(30, 64, 175, 0.25);
}

.article-cta-box h3 {
    font-size: 1.6rem;
    margin-bottom: 12px;
}

.article-cta-box p {
    margin-bottom: 24px;
    opacity: 0.92;
}

/*
 * Litera e albă, nu #1f2937: pe chihlimbarul închis textul întunecat dă 3,26:1.
 * Alb pe #a56a07 dă 4,51:1 și se potrivește cu .btn-premium, care era deja
 * alb pe chihlimbar. Dispare și saltul de culoare care se făcea la hover.
 */
.article-cta-box .btn {
    background: #a56a07;
    color: #fff;
    border: 0;
}

.article-cta-box .btn:hover {
    background: #925004;
    color: #fff;
}

.article-related {
    margin: 56px 0 0;
    padding-top: 36px;
    border-top: 1px solid #e5e7eb;
}

.related-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 24px;
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
}

.related-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.18);
}

.related-thumb {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: #f1f5f9;
}

.related-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.related-name {
    display: block;
    padding: 16px 18px 6px;
    font-weight: 700;
    line-height: 1.4;
    color: #1f2937;
}

.related-meta {
    display: block;
    padding: 0 18px 18px;
    font-size: 0.85rem;
    color: #6b7280;
}

@media (max-width: 700px) {
    .article-body table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    .article-body h2 {
        font-size: 1.6rem;
    }

    .article-cta-box {
        padding: 28px 22px;
    }
}

/* ===================================
   Butoanele plutitoare — aceleași
   valori pe toate cele trei site-uri
   =================================== */

/*
 * Același set de numere ca pe cumsacreatiunsite.ro și maildesk.ro:
 *
 *   cerc            52 × 52 px  (46 × 46 sub 480px)
 *   margine ecran   24 px       (16 sub 480px)
 *   spațiu între    16 px
 *   whatsapp        același 24 px jos și la dreapta
 *
 * `display: flex` pe container nu e decorativ: butonul dinăuntru e inline-block,
 * iar spațiul de descendent al rândului îl ridica cu 7px față de ce spunea
 * `bottom`. Cu flex, cutia butonului începe exact acolo unde scrie.
 */

/*
 * `transform: none`: butonul pornea cu `translateY(20px)`, anulat de clasa
 * adăugată la apariție. Fără clasă, cercul stă cu 20px mai jos decât spune
 * `bottom`. Apariția rămâne, dar din opacitate — poziția nu mai depinde de ea.
 */
.scroll-to-top-btn {
    bottom: 92px;              /* 24 + 52 + 16 */
    left: 24px;
    width: 52px;
    height: 52px;
    font-size: 1.125rem;
    transform: none;
}

.cookie-management-btn {
    display: flex;
    bottom: 24px;
    left: 24px;
}

.manage-btn {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
    /*
     * Pulsul rămâne, dar fără inelul de 8px al animației originale: acela ieșea
     * din cerc și mânca jumătate din spațiul de 16px, așa că pe acest site
     * distanța ar fi arătat mai mică decât pe celelalte două.
     */
    animation: cookiePulseSubtil 3s infinite;
}

@keyframes cookiePulseSubtil {
    0%, 100% {
        box-shadow: 0 4px 16px rgba(165, 106, 7, 0.35);
    }
    50% {
        box-shadow: 0 4px 22px rgba(165, 106, 7, 0.6);
    }
}

.whatsapp-widget {
    bottom: 24px;
    right: 24px;
}

@media (max-width: 480px) {
    .scroll-to-top-btn {
        bottom: 78px;          /* 16 + 46 + 16 */
        left: 16px;
        width: 46px;
        height: 46px;
        font-size: 1rem;
    }

    .cookie-management-btn {
        bottom: 16px;
        left: 16px;
    }

    .manage-btn {
        width: 46px;
        height: 46px;
        font-size: 1.125rem;
    }

    .whatsapp-widget {
        bottom: 16px;
        right: 16px;
    }

    /* Aceeași mărime pe toate trei: fiecare site îl micșora altfel (50, 55, 56). */
    .whatsapp-button {
        width: 56px;
        height: 56px;
    }
}