/* ─────────────────────────────────────────────────────────────
   PNG to Text — content section styles
   Scoped to the feature grid + article content that renders
   below the tool (the `.png_content_section` wrapper).
   Extracted from the legacy files.master inline styles so the
   new-theme page is self-contained.
   ───────────────────────────────────────────────────────────── */

/* Layout helpers (legacy utilities the markup relies on) */
.png_content_section .lh22 { line-height: 22px; }
.png_content_section .lh24 { line-height: 24px; }
.png_content_section .lh28 { line-height: 28px; }
.png_content_section .font18 { font-size: 18px; }
.png_content_section .font22 { font-size: 22px; }
.png_content_section .fw-600 { font-weight: 600; }
.png_content_section .br_5 { border-radius: 5px; }
.png_content_section .br_10 { border-radius: 10px; }
.png_content_section .text-blue { color: #30619A; }

/* Feature grid icon.
   Height-driven sizing with auto width so square raster icons
   (e.g. translation.png, 512×512) keep their aspect ratio instead
   of being stretched into a full-width banner by `width: 100%`. */
.png_content_section .img-box {
    height: 40px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 10px;
}

/* Pro upsell panel background */
.png_content_section .pro-bg {
    background-image: url("/assets/minified/bg-black.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

/* ── Rich article content (rendered from {!! $content !!}) ── */
.png_content_section .contentManage p:has(> img) {
    text-align: center;
}

.png_content_section .contentManage p {
    margin-bottom: 0;
    margin-top: 10px;
}

.png_content_section .contentManage h2 {
    color: #0f6cd3;
    font-size: 24px;
    margin-top: 20px;
}

.png_content_section .contentManage h3 {
    font-size: 20px;
    margin-top: 20px;
}

.png_content_section .contentManage ul {
    padding-inline-start: 40px;
    list-style: disc;
}

.png_content_section .contentManage li {
    list-style: disc;
}

.png_content_section .contentManage table {
    border: 1px solid #ddd;
    border-collapse: collapse;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 25px;
}

.png_content_section .contentManage table tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.png_content_section .contentManage table td {
    border: 1px solid #ddd;
    padding: 8px;
}

@media (max-width: 767px) {
    .png_content_section .contentManage img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }

    /* Content tables carry an inline `style="width:350px"` (set in the
       rich-text editor). On small screens that fixed width overflows /
       looks cramped — force full width. !important beats the inline style. */
    .png_content_section .contentManage table {
        width: 100% !important;
    }
}

/* Never let a fixed-width content table spill past its container. */
.png_content_section .contentManage table {
    max-width: 100%;
}