/**
 * Styly pro user-generated obsah z WYSIWYG editoru (blog články, stránky,
 * popisy produktů, popisy balíčků, atd.).
 *
 * Aplikuje se přes sdílenou třídu `.uc` nebo přes existující kontejnery
 * (`.product-description`, `.blog-content`, `.page-content`). Zrcadlí
 * vizuál, který má klient v adminu v `wysiwyg-editor`, aby výsledek
 * na webu vypadal identicky s náhledem v editoru.
 *
 * Selektor je scopovaný — aplikuje se jen uvnitř kontejneru, ne na
 * celou stránku (admin.js v editoru používá `.wysiwyg-editor` scope).
 */

/* Kontejner kde user-content žije — všechno níže je scopované. */
.uc,
.product-description,
.blog-content,
.page-content {
    line-height: 1.7;
    color: #1f2937;
}

/* ============================================================
 * TYPOGRAFIE — nadpisy, odstavce, odkazy
 * ============================================================ */
.uc h2, .product-description h2, .blog-content h2, .page-content h2 {
    font-size: 1.5rem; font-weight: 700; margin: 1.5rem 0 0.75rem;
    color: #0a1628; line-height: 1.3;
}
.uc h3, .product-description h3, .blog-content h3, .page-content h3 {
    font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 0.5rem;
    color: #0a1628;
}
.uc h4, .product-description h4, .blog-content h4, .page-content h4 {
    font-size: 1.0625rem; font-weight: 600; margin: 1rem 0 0.375rem;
    color: #475569; text-transform: uppercase; letter-spacing: 0.03em;
}
.uc p, .product-description p, .blog-content p, .page-content p {
    margin: 0.75rem 0;
}
.uc a, .product-description a, .blog-content a, .page-content a {
    color: #0095b3; text-decoration: underline;
}
.uc a:hover, .product-description a:hover, .blog-content a:hover, .page-content a:hover {
    color: #007a94;
}

/* ============================================================
 * CITACE, KÓD, ODDĚLOVAČ
 * ============================================================ */
.uc blockquote, .product-description blockquote,
.blog-content blockquote, .page-content blockquote {
    border-left: 4px solid #0095b3;
    padding: 0.875rem 1.25rem;
    margin: 1rem 0;
    background: rgba(0, 149, 179, 0.06);
    border-radius: 0 0.5rem 0.5rem 0;
    color: #374151;
    font-style: italic;
}
.uc pre, .product-description pre, .blog-content pre, .page-content pre {
    background: #0d1117;
    color: #e6edf3;
    padding: 1rem;
    border-radius: 0.5rem;
    font-family: 'SF Mono', Menlo, Monaco, Consolas, monospace;
    font-size: 0.875rem;
    overflow-x: auto;
    margin: 1rem 0;
}
.uc hr, .product-description hr, .blog-content hr, .page-content hr {
    border: none; border-top: 2px solid #e5e7eb; margin: 2rem 0;
}

/* ============================================================
 * SEZNAMY
 * ============================================================ */
.uc ul, .product-description ul, .blog-content ul, .page-content ul,
.uc ol, .product-description ol, .blog-content ol, .page-content ol {
    padding-left: 1.5rem;
    margin: 0.75rem 0;
}
.uc li, .product-description li, .blog-content li, .page-content li {
    margin-bottom: 0.375rem;
}

/* ============================================================
 * OBRÁZKY, VIDEO
 * ============================================================ */
.uc img, .product-description img, .blog-content img, .page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
    display: block;
}
.uc iframe, .product-description iframe,
.blog-content iframe, .page-content iframe {
    max-width: 100%;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* ============================================================
 * TABULKY — stejný vzhled jako v editoru, ale přizpůsobený pro light frontend
 * ============================================================ */
.uc table, .product-description table, .blog-content table, .page-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.25rem 0;
    font-size: 0.9375rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    border-radius: 0.5rem;
    overflow: hidden;
}
.uc table th, .product-description table th,
.blog-content table th, .page-content table th {
    background: #0095b3;
    color: #ffffff;
    font-weight: 700;
    text-align: left;
    padding: 0.625rem 0.875rem;
    border: 1px solid #0095b3;
}
.uc table td, .product-description table td,
.blog-content table td, .page-content table td {
    border: 1px solid #e5e7eb;
    padding: 0.625rem 0.875rem;
    text-align: left;
    min-width: 80px;
}
.uc table tr:nth-child(even) td, .product-description table tr:nth-child(even) td,
.blog-content table tr:nth-child(even) td, .page-content table tr:nth-child(even) td {
    background: #f9fafb;
}

/* ============================================================
 * PRESETOVÉ BLOKY — info / warning / success / quote / highlight
 * Zrcadlí vzhled ze editoru (wysiwyg-full.php preset buttons),
 * ale přizpůsobené pro světlé frontend theme.
 * ============================================================ */
.uc .preset-box, .product-description .preset-box,
.blog-content .preset-box, .page-content .preset-box {
    padding: 1rem 1rem 1rem 3rem;
    border-radius: 0.5rem;
    margin: 1rem 0;
    position: relative;
    line-height: 1.6;
}
.uc .preset-box::before, .product-description .preset-box::before,
.blog-content .preset-box::before, .page-content .preset-box::before {
    position: absolute;
    left: 0.875rem;
    top: 0.9375rem;
    font-size: 1.25rem;
    line-height: 1;
}

/* ℹ Info box — modrý / primary */
.uc .preset-info, .product-description .preset-info,
.blog-content .preset-info, .page-content .preset-info {
    background: rgba(0, 149, 179, 0.08);
    border: 1px solid rgba(0, 149, 179, 0.3);
    color: #0a1628;
}
.uc .preset-info::before, .product-description .preset-info::before,
.blog-content .preset-info::before, .page-content .preset-info::before {
    content: '\2139';
    color: #0095b3;
    font-weight: 700;
}

/* ⚠ Upozornění — oranžový / warning */
.uc .preset-warning, .product-description .preset-warning,
.blog-content .preset-warning, .page-content .preset-warning {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #78350f;
}
.uc .preset-warning::before, .product-description .preset-warning::before,
.blog-content .preset-warning::before, .page-content .preset-warning::before {
    content: '\26A0';
    color: #d97706;
}

/* ✓ Potvrzení — zelený / success */
.uc .preset-success, .product-description .preset-success,
.blog-content .preset-success, .page-content .preset-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #064e3b;
}
.uc .preset-success::before, .product-description .preset-success::before,
.blog-content .preset-success::before, .page-content .preset-success::before {
    content: '\2714';
    color: #10b981;
}

/* " Citace — fialový highlight */
.uc .preset-quote, .product-description .preset-quote,
.blog-content .preset-quote, .page-content .preset-quote {
    background: rgba(139, 92, 246, 0.08);
    border-left: 4px solid #8b5cf6;
    padding: 1rem 1.25rem;
    font-style: italic;
    font-size: 1.0625rem;
    color: #4c1d95;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1rem 0;
}

/* ★ Zvýraznění — gradient centered */
.uc .preset-highlight, .product-description .preset-highlight,
.blog-content .preset-highlight, .page-content .preset-highlight {
    background: linear-gradient(135deg, rgba(0, 149, 179, 0.1), rgba(139, 92, 246, 0.1));
    border: 1px solid rgba(0, 149, 179, 0.25);
    padding: 1rem 1.25rem;
    text-align: center;
    font-weight: 600;
    font-size: 1.0625rem;
    color: #0a1628;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

/* ============================================================
 * ADAPTIVITA — mobilní zobrazení
 * ============================================================ */
@media (max-width: 640px) {
    .uc h2, .product-description h2, .blog-content h2, .page-content h2 { font-size: 1.25rem; }
    .uc h3, .product-description h3, .blog-content h3, .page-content h3 { font-size: 1.125rem; }
    .uc table, .product-description table, .blog-content table, .page-content table {
        font-size: 0.8125rem;
    }
    .uc table th, .product-description table th,
    .blog-content table th, .page-content table th,
    .uc table td, .product-description table td,
    .blog-content table td, .page-content table td {
        padding: 0.5rem 0.625rem;
    }
    .uc .preset-box, .product-description .preset-box,
    .blog-content .preset-box, .page-content .preset-box {
        padding: 0.875rem 0.875rem 0.875rem 2.5rem;
    }
}