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

/* Logo din panou (Setări → Logo & favicon). Bara antetului are înălțime fixă
   de 70px, deci logoul se plafonează ca să nu iasă din ea. */
.logo-img {
    display: block;
    height: min(var(--logo-h, 42px), 56px);
    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 bara fixă de 70px, nu ascunse de ea. */
html {
    scroll-behavior: smooth;
}

section[id], footer[id], main[id] {
    scroll-margin-top: 84px;
}

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

.archive-section {
    padding-top: 48px;
    padding-bottom: 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;
    margin: 0;
}

.archive-empty {
    text-align: center;
    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 rgba(0, 0, 0, 0.15);
    color: inherit;
    text-decoration: none;
    font-weight: 600;
    background: #fff;
}

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

/* Categoria articolului, în meta din hero. */
.article-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

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

.article-tag {
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
}

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

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

/* Portofoliul de pe prima pagină (modulul Portofoliu din panou). */
.pf-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

.pf-card a {
    display: block;
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: var(--text-color, #1e293b);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pf-card a:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

/*
 * Pagina /portfolio folosește cardul de blog al temei, care are o bandă fixă de
 * 200px cu object-fit: cover. Capturile de proiect sunt 1024×768 (4:3), deci
 * cover le taia capacul laptopului sus și umbra jos.
 *
 * Caseta primește raportul imaginii, iar `contain` garantează că se vede tot —
 * inclusiv dacă se adaugă mai târziu o captură cu alt raport. Regula e limitată
 * la grila de portofoliu: cardurile de blog au coperți 1200×800, gândite exact
 * pentru banda de 200px, și rămân neatinse.
 */
.pf-page-grid .blog-image {
    height: auto;
    aspect-ratio: 4 / 3;
    background: var(--light-gray, #f8fafc);
}

.pf-page-grid .blog-image img {
    object-fit: contain;
}

.pf-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: var(--light-gray, #f8fafc);
}

.pf-card .pf-name {
    display: block;
    padding: 12px 16px;
    font-weight: 600;
    font-size: 0.95rem;
}

.pf-more-wrap {
    text-align: center;
    margin-top: 32px;
}

.pf-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 8px;
    background: var(--primary-color, #2563eb);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

.pf-more:hover {
    background: #1e40af;
}

/* ============================================================
   PAGINI DE ARTICOL ȘI DE CONȚINUT
   Reguli pe ELEMENTE, în limbajul primei pagini: Inter, colțuri de
   12px, linia albastră sub titluri, casete pe fundal foarte deschis.
   Orice articol adăugat ulterior din panou arată identic.
   ============================================================ */

/* Tema anula spațiul de sub bara fixă pe paginile de articol, pentru că
   acolo nu exista header. Acum există, deci spațiul se pune la loc. */
body.article-page {
    padding-top: 70px;
}

.article-header {
    padding: 0.75rem 0;
}

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

/* Hero-ul articolului. Fără imagine reprezentativă, textul ocupă toată
   lățimea în loc să lase o coloană goală. */
.article-hero {
    align-items: center;
    gap: 2.5rem;
}

.article-hero.no-image {
    grid-template-columns: 1fr;
}

.article-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--primary-color, #2563eb);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
}

.legal-updated {
    color: var(--secondary-color, #64748b);
    margin-top: 0.75rem;
}

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

/* Exact valorile pe care tema le folosea în articolele statice
   (vezi „.article-intro p" din style.css): 1.1rem, linie 1.7 și culoarea
   secundară. Textul rămâne la fel de fin ca înainte. */
.article-body {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--secondary-color, #64748b);
}

.article-body p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--secondary-color, #64748b);
}

/* Listele NU primesc o culoare proprie: o moștenesc de la container, iar
   listele cu stil propriu din articolele vechi (ex. .features-list) rămân
   exact cum erau. */

.article-body h2 {
    font-size: 2rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    margin: 3.5rem 0 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--primary-color, #2563eb);
    line-height: 1.3;
    scroll-margin-top: 100px;
}

.article-body h3 {
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    margin: 2.5rem 0 1rem;
    scroll-margin-top: 100px;
}

.article-body h4 {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    margin: 1.75rem 0 0.75rem;
}

.article-body p {
    margin-bottom: 1.5rem;
}

.article-body a {
    color: var(--primary-color, #2563eb);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

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

.article-body ul,
.article-body ol {
    margin: 1.5rem 0;
    padding-left: 1.6rem;
}

.article-body li {
    margin-bottom: 0.6rem;
}

.article-body li::marker {
    color: var(--primary-color, #2563eb);
    font-weight: 600;
}

.article-body strong {
    color: var(--text-color, #1e293b);
    font-weight: 600;
}

/* Tabele: aceleași colțuri și margini ca ale cardurilor din pagină. */
.article-body table {
    width: 100%;
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    background: var(--white, #fff);
    font-size: 1rem;
}

.article-body thead th {
    background: var(--light-gray, #f8fafc);
    color: var(--text-color, #1e293b);
    font-weight: 600;
    text-align: left;
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
}

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

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

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

/* Caseta „Răspuns rapid" există deja în temă; îi păstrăm stilul și în
   articolele noi, cu spațiere consecventă. */
.article-body .quick-answer {
    margin: 2.5rem 0;
}

.article-body .quick-answer p:last-child {
    margin-bottom: 0;
}

/* Containere moștenite din articolele vechi (site-ul static) — n-aveau nicio
   regulă. Primesc aceeași înfățișare de panou ca restul conținutului. */
.article-body .settings-table,
.article-body .problem-content,
.article-body .metrics-to-monitor {
    background: var(--light-gray, #f8fafc);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin: 2rem 0;
}

.article-body .settings-table h4,
.article-body .problem-content h4,
.article-body .metrics-to-monitor h3 {
    margin-top: 0;
}

.article-body .settings-table table {
    margin-top: 1rem;
    margin-bottom: 0;
    background: var(--white, #fff);
}

.article-body .settings-table > :last-child,
.article-body .problem-content > :last-child,
.article-body .metrics-to-monitor > :last-child {
    margin-bottom: 0;
}

.article-body pre {
    margin: 2rem 0;
    padding: 1.25rem 1.35rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: 12px;
    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: #eff6ff;
    color: #1d4ed8;
    padding: 0.12em 0.4em;
    border-radius: 6px;
    font-size: 0.94em;
}

.article-body blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: #f0f7ff;
    border-left: 4px solid var(--primary-color, #2563eb);
    border-radius: 0 12px 12px 0;
}

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

.article-body hr {
    border: 0;
    border-top: 1px solid var(--border-color, #e2e8f0);
    margin: 2.5rem 0;
}

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

.article-tags {
    margin-top: 2.5rem;
}

.article-cta-box {
    margin: 3rem 0 0;
    padding: 2.25rem;
    border-radius: 12px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #e2e8f0;
    text-align: center;
}

.article-cta-box h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.article-cta-box p {
    margin-bottom: 1.5rem;
    color: #cbd5e1;
}

.article-cta-box .cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.75rem;
    background: var(--primary-color, #2563eb);
    color: #fff;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease;
}

.article-cta-box .cta-button:hover {
    background: #1e40af;
}

.article-related {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

.related-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-color, #1e293b);
    margin-bottom: 1.5rem;
}

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

.related-card {
    display: flex;
    flex-direction: column;
    background: var(--white, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

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

.related-thumb {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--light-gray, #f8fafc);
}

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

.related-name {
    display: block;
    padding: 0.9rem 1rem 0.3rem;
    font-weight: 600;
    line-height: 1.4;
    color: var(--text-color, #1e293b);
}

.related-meta {
    display: block;
    padding: 0 1rem 1rem;
    font-size: 0.85rem;
    color: var(--secondary-color, #64748b);
}

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

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

    .article-hero {
        grid-template-columns: 1fr;
    }
}

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

/*
 * Același set de numere ca pe cumsacreatiunsite.ro și cumsafaciunsite.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
 *
 * Butonul rotund de cookie-uri nu e aici: îl construiește JavaScriptul, cu
 * stiluri inline, iar acelea bat orice foaie de stil. Valorile lui stau în
 * `assets/js/main.js`, în `createPermanentCookieIcon()`, și sunt aceleași.
 */

/*
 * `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 {
    bottom: 92px;              /* 24 + 52 + 16 */
    left: 24px;
    width: 52px;
    height: 52px;
    font-size: 18px;
    transform: none;
}

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

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

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

    /*
     * Singurul loc din tot proiectul unde `!important` e justificat: elementul
     * are stiluri inline puse din JavaScript, iar acelea nu pot fi întrecute
     * altfel. Valorile de bază rămân în main.js; aici doar pasul de sub 480px.
     */
    #permanentCookieIcon {
        bottom: 16px !important;
        left: 16px !important;
        width: 46px !important;
        height: 46px !important;
    }
}