/* ============================================================
   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 css/main.css.
   ============================================================ */

/* Logo din panou (Setări → Logo & favicon). Înălțimea vine din --logo-h,
   plafonată ca imaginea să nu iasă din bara fixă de 80px a antetului. */
.logo-img {
    display: block;
    height: min(var(--logo-h, 42px), 64px);
    width: auto;
    max-width: 60vw;
    object-fit: contain;
}

/* Logo-ul din subsol, recolorat: o 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%;
    -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;
}

/* Ancorele aterizează sub bara fixă de 80px, nu ascunse de ea. */
section[id], footer[id], main[id] {
    scroll-margin-top: 92px;
}

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

.archive-main .blog-container {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

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

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

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

/* Paginația arhivelor. */
.pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2.5rem 0 1rem;
}

.pagination .page {
    display: inline-block;
    min-width: 2.5rem;
    padding: 0.5rem 0.75rem;
    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;
}

/* Categoria și etichetele articolului (legăturile spre arhive). */
.article-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

.article-category-chip:hover {
    background: rgba(255, 255, 255, 0.3);
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0 0;
    color: #64748b;
}

.article-tag {
    padding: 0.25rem 0.75rem;
    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: 4rem 0;
}

/* ============================================================
   PAGINI DE ARTICOL ȘI DE CONȚINUT
   Reguli scrise pe ELEMENTE, nu pe clase inventate: orice articol
   adăugat ulterior din panou, cu editorul vizual, primește automat
   aceeași înfățișare, fără intervenție în cod.
   ============================================================ */

/* Firimituri, în capul paginii. */
.article-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.crumb-sep {
    color: #94a3b8;
}

.crumb-current {
    color: #475569;
}

.article-header {
    padding-top: 3rem;
}

.article-meta {
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

/* Imaginea reprezentativă — niciodată decupată: își păstrează raportul. */
.article-image img {
    width: 100%;
    height: auto;
    max-width: 760px;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

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

/* Lățimea coloanei rămâne cea a temei (.article-content), ca în paginile
   statice de dinainte — nu impunem o măsură proprie. */

.article-text h2 {
    position: relative;
    padding-left: 1.15rem;
    scroll-margin-top: 110px;
}

/* Semnătura vizuală a site-ului: bara albastră din dreptul titlurilor. */
.article-text h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.28em;
    width: 6px;
    height: 1.05em;
    border-radius: 3px;
    background: #2563eb;
}

.article-text h3 {
    scroll-margin-top: 110px;
}

.article-text a {
    color: #2563eb;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.article-text a:hover {
    color: #1d4ed8;
}

.article-text ul,
.article-text ol {
    padding-left: 1.5rem;
}

.article-text li::marker {
    color: #2563eb;
    font-weight: 600;
}

/* Tabelele: aceleași colțuri și margini ca ale cardurilor de pe prima pagină. */
.article-text table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    overflow: hidden;
    font-size: 1rem;
    background: #ffffff;
}

.article-text thead th {
    background: #f8fafc;
    color: #0f172a;
    font-weight: 600;
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid #e2e8f0;
}

.article-text tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
    color: #475569;
}

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

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

/* Blocuri de cod: contrast mare, ca exemplele să se citească fără efort. */
.article-text pre {
    margin: 2rem 0;
    padding: 1.25rem 1.35rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 0.75rem;
    overflow-x: auto;
    font-size: 0.95rem;
    line-height: 1.65;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}

.article-text pre code {
    background: none;
    color: inherit;
    padding: 0;
    font-size: inherit;
}

.article-text code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
    background: #eff6ff;
    color: #1d4ed8;
    padding: 0.12em 0.4em;
    border-radius: 0.35em;
    font-size: 0.94em;
}

.article-text blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 0 0.5rem 0.5rem 0;
    color: #334155;
    font-style: italic;
}

.article-text img {
    max-width: 100%;
    height: auto;
    border-radius: 0.75rem;
    margin: 1.5rem 0;
}

.article-text hr {
    border: 0;
    border-top: 1px solid #e2e8f0;
    margin: 2.5rem 0;
}

/* Casetele cu exemple/comparații: grilă, nu coloană înghesuită. */
.article-text .cost-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin: 2rem 0;
}

.article-text .cost-item {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.article-text .cost-item h4 {
    margin-top: 0;
    color: #1d4ed8;
}

.article-text .cost-item p:last-child,
.article-text .cost-item ul:last-child {
    margin-bottom: 0;
}

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

.article-related {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid #e2e8f0;
}

.related-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1.5rem;
}

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

.related-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 1rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12);
}

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

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

.related-name {
    display: block;
    padding: 1rem 1rem 0.35rem;
    font-weight: 600;
    line-height: 1.4;
    color: #1e293b;
}

.related-meta {
    display: block;
    padding: 0 1rem 1.15rem;
    font-size: 0.85rem;
    color: #64748b;
}

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

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

/* ===================================
   Contrast — schimb între două griuri
   care există deja în paletă
   =================================== */

/*
 * Aceleași două griuri, mutate acolo unde se citesc. Pe fundal alb, #94a3b8 dă
 * 2,56:1 — sub pragul de 4,5:1; #64748b dă 4,76:1. Pe fundalul închis al
 * subsolului (#1e293b) e exact invers: #64748b dă 3,07:1, iar #94a3b8 dă 5,71:1.
 * Nu se introduce nicio culoare nouă — se folosesc cele două care erau deja
 * acolo, fiecare pe fundalul unde funcționează.
 */

/* Pe alb: gri deschis → gri mediu */
.blog-meta,
.crumb-sep {
    color: #64748b;
}

/* Pe închis: gri mediu → gri deschis */
.footer-copyright,
.footer-credit,
.legal-link {
    color: #94a3b8;
}

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

/*
 * Un singur set de numere, identic pe cumsacreatiunsite.ro, cumsafaciunsite.ro
 * și maildesk.ro:
 *
 *   cerc            52 × 52 px  (46 × 46 sub 480px)
 *   margine ecran   24 px       (16 sub 480px)
 *   spațiu între    16 px       (16 sub 480px)
 *   whatsapp        același 24 px jos și la dreapta
 *
 * Cele două cercuri din stânga au aceeași mărime și același `left`, deci și
 * același centru — de asta stau aliniate. Butonul de sus se așază la
 * 24 + 52 + 16 = 92px, adică fix un spațiu peste cel de cookie-uri.
 *
 * Poziția e fixă, nu se mai adaptează după starea consimțământului: regula
 * veche `.cookie-icon.show ~ .scroll-to-top` muta butonul din colț la 96px în
 * clipa în care apărea cel de cookie-uri, adică sărea sub ochii omului. E
 * anulată aici, nu ștearsă din main.css, ca tot ce ține de butoanele plutitoare
 * să se citească dintr-un singur loc.
 */

/*
 * `transform: none` nu e cosmetic. Ambele butoane porneau cu
 * `transform: translateY(20px)`, anulat de clasa adăugată la apariție. Dacă
 * clasa aceea lipsește sau întârzie, cercul se așază cu 20px mai jos decât
 * spune `bottom` — măsurat, exact asta se întâmpla. Apariția rămâne, doar că
 * se face din opacitate, deci poziția nu mai depinde de starea animației.
 */
.scroll-to-top,
.cookie-icon.show ~ .scroll-to-top {
    bottom: 92px;
    left: 24px;
    width: 52px;
    height: 52px;
    font-size: 1.125rem;
    transform: none;
}

.cookie-icon {
    bottom: 24px;
    left: 24px;
    transform: none;
}

.cookie-icon-btn {
    width: 52px;
    height: 52px;
    font-size: 1.25rem;
}

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

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

    .cookie-icon {
        bottom: 16px;
        left: 16px;
    }

    .cookie-icon-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;
    }
}