/* Blog article styles (blog_detail.blade.php only).

   Replaces the <style> block the importer used to paste into every blog's SEO
   scripts (13 drifted copies; App\Support\Content\LegacyBlogScripts drops them
   when the page renders). Same look, minus the justified text (it stretched
   word gaps and is hard to read), plus the `text-align: Left_inner` typo
   fixed. Temporary home until the blog page gets its own redesign, like the
   tradeshow page's tradeshow_detail.css. */

.trad_sho_detl2 .Left_inner h1,
.trad_sho_detl2 .Left_inner h2,
.trad_sho_detl2 .Left_inner h3,
.trad_sho_detl2 .Left_inner h4,
.trad_sho_detl2 .Left_inner h5,
.trad_sho_detl2 .Left_inner h6,
.trad_sho_detl2 .Left_inner p {
    margin: 0 0 20px;
}

.trad_sho_detl2 .Left_inner h2 {
    font-size: 25px;
}

.trad_sho_detl2 .Left_inner h3 {
    font-size: 22px;
    font-weight: 500;
    color: #0c1633;
}

.trad_sho_detl2 .Left_inner h4,
.trad_sho_detl2 .Left_inner h5,
.trad_sho_detl2 .Left_inner h6 {
    font-size: 18px;
    color: #0c1633;
}

.trad_sho_detl2 .Left_inner p,
.trad_sho_detl2 .Left_inner li {
    text-align: left;
}

/* lists */
.trad_sho_detl2 .Left_inner ul {
    list-style: disc;
}

.trad_sho_detl2 .Left_inner dl,
.trad_sho_detl2 .Left_inner ol,
.trad_sho_detl2 .Left_inner ul {
    margin: 0 0 16px;
    padding-inline-start: 40px;
}

.trad_sho_detl2 .Left_inner p:has(+ ul),
.trad_sho_detl2 .Left_inner h3:has(+ ul) {
    margin: 0 0 10px;
}

.trad_sho_detl2 .Left_inner ol > li:has(h3)::marker {
    font-size: 22px;
}

.trad_sho_detl2 .Left_inner li {
    font-size: 18px;
    color: #374151;
}

.trad_sho_detl2 .Left_inner strong:not(a strong) {
    color: #0c1633;
}

/* tables (the editor's <figure class="table">; API saves use the same format) */
.trad_sho_detl2 .Left_inner .table {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 20px;
}

.trad_sho_detl2 .Left_inner .table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.trad_sho_detl2 .Left_inner .table th,
.trad_sho_detl2 .Left_inner .table td {
    padding: 12px;
    border: 1px solid #c5ccd3;
    vertical-align: top;
    text-align: left;
    overflow-wrap: break-word;
}

.trad_sho_detl2 .Left_inner .table th {
    background-color: #2d557a;
    color: #fff;
    font-weight: 700;
}

.trad_sho_detl2 .Left_inner .table tr:nth-child(even) td {
    background-color: #e6edf3;
}

.trad_sho_detl2 .Left_inner .table tr:nth-child(odd) td {
    background-color: #fff;
}

/* contents links (#heading ids, HeadingIds): land below the sticky header */
.trad_sho_detl2 .Left_inner h2[id],
.trad_sho_detl2 .Left_inner h3[id] {
    scroll-margin-top: 85px;
}

/* a paragraph that is only a link ("Compare CES booth builders") → pill button
   (class added by App\Support\Content\LinkCtas; same look as the tradeshow
   page's "see all trade shows" link) */
.trad_sho_detl2 .Left_inner a.blog-link-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 22px;
    border-radius: 999px;
    border: 1.5px solid #0C2E16;
    color: #0C2E16;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    transition: background 0.25s ease, color 0.25s ease;
}
.trad_sho_detl2 .Left_inner a.blog-link-cta::after {
    content: "\2192";
    transition: transform 0.25s ease;
}
.trad_sho_detl2 .Left_inner a.blog-link-cta:hover,
.trad_sho_detl2 .Left_inner a.blog-link-cta:focus-visible {
    background: #0C2E16;
    color: #fff;
}
.trad_sho_detl2 .Left_inner a.blog-link-cta--own-arrow::after {
    content: none; /* the text already ends in an arrow */
}
.trad_sho_detl2 .Left_inner a.blog-link-cta:hover::after {
    transform: translateX(3px);
}
@media (prefers-reduced-motion: reduce) {
    .trad_sho_detl2 .Left_inner a.blog-link-cta,
    .trad_sho_detl2 .Left_inner a.blog-link-cta::after { transition: none; }
}

/* Hero photo is an <img> now (image pipeline CP5) — no CSS background (style.css's
   back_detl.avif would otherwise download for nothing). The photo sits behind the white fade
   (::before) and the text: isolation makes z-index -1 stay inside the hero. */
main.trad_sho_detl1 {
    background: #eef3f0;
    isolation: isolate;
}
main.trad_sho_detl1 > picture,
main.trad_sho_detl1 > img.hero_bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
}
main.trad_sho_detl1 > picture > img,
main.trad_sho_detl1 > img.hero_bg {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}