/* Article page tweaks */

/* Nested TOC sub-items: open circle marker, smaller indent */
.custom-article .content.bg-color .table-of-contents ul {
    list-style: circle;
    padding-left: 22px;
    margin: 6px 0 6px;
}

.custom-article .content.bg-color .table-of-contents ul li {
    font-size: 16px;
    margin-top: 4px;
}

/* Smooth scroll for TOC anchor clicks, offset for the sticky navbar */
html {
    scroll-behavior: smooth;
}

.custom-article .content-title h2,
.custom-article .content h3 {
    scroll-margin-top: 100px;
}

/* Slightly wider container on article pages (default Bootstrap caps at 1140 on xl) */
@media (min-width: 1200px) {
    .custom-article > .container {
        max-width: 1280px;
    }
}

/* Tame the inherited 97px horizontal padding on .content blocks — content reads too narrow with it */
.custom-article .content,
.custom-article .content + .content {
    padding-left: 0;
    padding-right: 0;
}

/* Gray callout (.content.bg-color) keeps its inner padding so the highlight reads as a block */
.custom-article .content.bg-color {
    padding-left: 24px;
    padding-right: 24px;
}

/* Social-share column: keep default Bootstrap gutter, but center icons horizontally */
.custom-article .row > .col-md-1 .sticky-top {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    list-style: none;
}

/* Mobile: lay share icons out in a row, centered horizontally.
   Selector must match the desktop rule's specificity (4 classes) to win the cascade. */
@media (max-width: 767.98px) {
    .custom-article .row > .col-md-1 .sticky-top {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding: 0;
        margin: 0 0 20px;
        list-style: none;
        position: static;
    }

    .custom-article .row > .col-md-1 .sticky-top li {
        list-style: none;
        margin: 0;
        padding: 0;
    }
}

/* Ordered/unordered lists inside an article body: visible markers + body-text font.
   Legacy theme has a global `ul { list-style: none }` rule that kills bullets — override here.
   Exclude .table-of-contents (and its nested ul) so the legacy TOC styling stays intact. */
.custom-article .content ol,
.custom-article .content ul:not(.table-of-contents) {
    padding-left: 24px;
    margin: 12px 0 18px;
}

.custom-article .content ol {
    list-style: decimal;
}

.custom-article .content ul:not(.table-of-contents) {
    list-style: disc;
}

.custom-article .content ol > li,
.custom-article .content ul:not(.table-of-contents) > li {
    font-size: 18px;
    margin-bottom: 4px;
}

/* H3 subheadings inside an article body */
.custom-article .content h3 {
    font-family: Muli, sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #29303C;
    margin-top: 44px;
    margin-bottom: 24px;
    text-align: center;
}

/* H3 inside a 2-column layout sits left-aligned (the row gives context, no need to center) */
.custom-article .content [class*="col-"] h3 {
    text-align: left;
    margin-bottom: 12px;
}

/* Key Takeaway callout — sits right under the title */
.custom-article .content .key-takeaway {
    background: #f4f7fb;
    border-left: 4px solid #4070f4;
    padding: 18px 22px;
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    border-radius: 4px;
}

/* Image placeholder — used while real assets are pending */
.custom-article .article-image-placeholder {
    background: repeating-linear-gradient(
        45deg,
        #f0f2f5,
        #f0f2f5 12px,
        #e6e9ee 12px,
        #e6e9ee 24px
    );
    border: 1px dashed #b8c0cc;
    border-radius: 4px;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 180px;
    margin: 20px 0;
    font-style: italic;
    font-size: 14px;
}

.custom-article .article-image-placeholder.hero {
    min-height: 320px;
    font-size: 16px;
}

/* Comparison/data tables inside an article */
.custom-article .article-table {
    margin: 16px 0 24px;
    font-size: 14px;
}

.custom-article .article-table thead th {
    background: #29303C;
    color: #fff;
    border-color: #29303C;
    font-weight: 600;
    vertical-align: middle;
}

.custom-article .article-table tbody td {
    vertical-align: middle;
}

.custom-article .article-table tbody tr.highlight-row {
    background: #f4f7fb;
}

.custom-article .article-table tbody tr.highlight-row td {
    color: #29303C;
}

/* FAQ accordion — mirrors product-page accordion styling (.product-details .accordion).
   accordion.js already recognizes .faq-accordion as a scope, so smooth slide animation works out of the box. */
.custom-article .content .faq-accordion .card {
    background: transparent;
    border: none;
    border-bottom: 1px solid #dde5ee;
    border-radius: 0;
}

.custom-article .content .faq-accordion .card .card-header,
.custom-article .content .faq-accordion .card .card-header.caret {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 1.25rem 32px 1.25rem 0;
    font-size: 18px;
    font-weight: 500;
    color: #222;
    transition: color 0.2s ease;
    cursor: pointer;
    position: relative;
}

.custom-article .content .faq-accordion .card .card-header.caret .card-title {
    margin: 0;
    color: inherit;
    font-weight: inherit;
    display: block;
}

.custom-article .content .faq-accordion .card .card-header.caret:before {
    display: none;
}

.custom-article .content .faq-accordion .card .card-header.caret:after {
    content: "";
    width: 14px;
    height: 14px;
    border: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6l5 5 5-5'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.25s ease;
}

.custom-article .content .faq-accordion .card .card-header.caret[aria-expanded="true"]:after {
    transform: translateY(-50%) rotate(180deg);
}

.custom-article .content .faq-accordion .card .card-header.caret:hover {
    color: #0d44db;
}

.custom-article .content .faq-accordion .card .card-body {
    padding: 0 0 24px;
    background: transparent;
}

.custom-article .content .faq-accordion .card .card-body p {
    margin-bottom: 0;
}

/* Download Resources block (PDF download cards) */
.custom-article .download-resources {
    background: #f8fafc;
    border-radius: 10px;
    padding: 32px;
    margin: 32px 0;
}

.custom-article .download-resources .download-resources-title {
    font-family: Muli, sans-serif;
    font-weight: 700;
    font-size: 26px;
    color: #29303C;
    margin: 0 0 8px;
}

.custom-article .download-resources .download-resources-subtitle {
    color: #4E5D78;
    margin: 0 0 24px;
    font-size: 16px;
}

.custom-article .download-resources .resource-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 10px;
    padding: 18px 22px;
    margin-bottom: 12px;
    text-decoration: none;
    color: #29303C;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.custom-article .download-resources .resource-card:hover,
.custom-article .download-resources .resource-card:focus {
    border-color: #4070f4;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(64, 112, 244, 0.12);
    color: #29303C;
}

.custom-article .download-resources .resource-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background: #eef2f7;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 18px;
    color: #29303C;
}

.custom-article .download-resources .resource-icon svg {
    width: 22px;
    height: 22px;
}

.custom-article .download-resources .resource-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.custom-article .download-resources .resource-text strong {
    font-size: 17px;
    line-height: 1.3;
    color: #29303C;
}

.custom-article .download-resources .resource-text .resource-type {
    font-size: 12px;
    color: #8794a8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.custom-article .download-resources .resource-arrow {
    color: #8794a8;
    font-size: 26px;
    line-height: 1;
    margin-left: 12px;
}

/* Coating-type cards (4 full-width cards in "What Are the Main Types of Anti-Corrosion Coatings for Steel?") */
.custom-article .coating-type-cards {
    margin: 20px 0;
}

.custom-article .row > [class*="col-"] > .coating-type-cards:first-child {
    margin-top: 0;
}

.custom-article .row > [class*="col-"] > .coating-type-cards:last-child {
    margin-bottom: 0;
}

.custom-article .coating-types-row {
    margin-top: 50px;
}

.custom-article .coating-types-row + h3 {
    margin-top: 90px;
}

@media (min-width: 768px) {
    .custom-article .next-steps-row .side-image,
    .custom-article .coating-types-row .side-image {
        position: sticky;
        top: 100px;
    }

    /* Drop the trailing image margin so the sticky image's bottom edge lines up
       with the bottom of the taller text column when scrolled to the end. */
    .custom-article .coating-types-row .side-image {
        margin-bottom: 0;
    }
}

.custom-article .coating-card {
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 16px;
    box-shadow: 0 1px 6px rgba(41, 48, 60, 0.06);
}

.custom-article .coating-card:last-child {
    margin-bottom: 0;
}

.custom-article .coating-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 14px;
    text-align: left;
    color: #29303C;
}

.custom-article .coating-card h3:after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: #4070f4;
    margin-top: 8px;
    border-radius: 1.5px;
}

.custom-article .coating-card p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.custom-article .coating-card p:last-child {
    margin-bottom: 0;
}

/* Application cards (4-tile 2x2 grid in "Which Anti-Corrosion Coating Is Best...") */
.custom-article .application-cards {
    margin: 24px 0;
}

.custom-article .application-cards > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.custom-article .application-card {
    flex: 1;
    background: #fff;
    border: 1px solid #e6ecf2;
    border-radius: 10px;
    padding: 28px 30px;
    box-shadow: 0 1px 6px rgba(41, 48, 60, 0.06);
}

.custom-article .application-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 12px;
    text-align: left;
}

.custom-article .application-card p {
    font-size: 16px;
    line-height: 1.55;
    margin-bottom: 12px;
}

.custom-article .application-card ul:not(.table-of-contents) {
    padding-left: 22px;
    margin: 0 0 12px;
}

.custom-article .application-card ul:not(.table-of-contents) > li {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 6px;
}

/* Feature cards grid (e.g. "When clear finish matters" 5-tile block) */
.custom-article .feature-cards {
    margin: 20px 0;
    justify-content: center;
}

.custom-article .feature-cards > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.custom-article .feature-card {
    flex: 1;
    background: #fff;
    border-top: 3px solid #4070f4;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(41, 48, 60, 0.08);
    padding: 20px 22px;
}

.custom-article .feature-card p {
    margin: 0;
    color: #29303C;
    font-size: 15px;
    line-height: 1.55;
}

.custom-article .feature-card strong {
    color: #29303C;
}

/* CTA banner block (e.g. "Need Technical Assistance?") */
.custom-article .cta-block {
    background: #f6fafd;
    padding: 40px 30px;
    text-align: center;
    border-radius: 10px;
    margin: 32px 0;
}

.custom-article .cta-block h3 {
    font-family: Muli, sans-serif;
    font-weight: 700;
    font-size: 24px;
    color: #29303C;
    margin: 0 0 12px;
}

.custom-article .cta-block p {
    color: #4E5D78;
    margin: 0 auto 24px;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.6;
}

.custom-article .cta-block .cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 280px;
    min-height: 50px;
    padding: 6px 36px;
    line-height: 1;
    letter-spacing: 0.05em;
}

/* Article index card — hero image background for the new article */
.article-card-wrapper.anti-corrosion-coating-steel-guide {
    background:
        linear-gradient(135deg, rgba(41, 48, 60, 0.65) 0%, rgba(41, 48, 60, 0.35) 100%),
        url("/Themes/TizbiTech/Content/images/articles/anti-corrosion-coating-steel-guide/hero.webp") no-repeat 50%;
    background-size: cover;
}

.article-card-wrapper.reflective-roof-coating-commercial-guide {
    background:
        linear-gradient(135deg, rgba(41, 48, 60, 0.65) 0%, rgba(41, 48, 60, 0.35) 100%),
        url("/Themes/TizbiTech/Content/images/articles/reflective-roof-coating-commercial-guide/applied-reflective-coating.webp") no-repeat 50%;
    background-size: cover;
}

/* Rounded corners on all article-body images (hero / section / side / inline) */
.custom-article .content img,
.custom-article .content video {
    border-radius: 10px;
}

/* Hero image inside the article body */
.custom-article .content .hero-image {
    width: 100%;
    height: auto;
    margin: 0 0 24px;
}

/* Portrait hero video — center inside its column, never upscale past native width */
.custom-article .content video.hero-image {
    display: block;
    width: auto;
    max-width: 100%;
    margin: 0 auto 24px;
}

/* In-section images inside an article body */
.custom-article .content .section-image {
    width: 100%;
    height: auto;
    margin: 20px 0;
}

/* Reflective Roof article only. Scoped to this slug so other articles' .section-image
   and any future <figure> usage are untouched.
   - "How it works" proof image (.content > .section-image): floats left, text wraps around it.
   - Metal-roof figures (figure + figcaption): smaller side-by-side with temperature labels. */
.custom-article.reflective-roof-coating-commercial-guide .content > .section-image {
    float: left;
    max-width: 460px;
    margin: 4px 24px 12px 0;
    border-radius: 0;
}

.custom-article.reflective-roof-coating-commercial-guide .content:has(> .section-image),
.custom-article.reflective-roof-coating-commercial-guide .content:has(> .metal-roof-evidence) {
    display: flow-root;
}

.custom-article.reflective-roof-coating-commercial-guide .content figure {
    margin: 12px auto;
    text-align: center;
    max-width: 320px;
}

.custom-article.reflective-roof-coating-commercial-guide .content figcaption {
    margin-top: 8px;
    font-size: 14px;
    color: #555;
}

/* "Roof Types" — metal roof before/after pair floats left, two thermometer photos
   sit flush next to each other with matching height, captions below each. */
.custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence {
    margin: 16px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
}

/* Fixed figure width keeps captions wrapped within each photo's column so the
   two labels never collide horizontally with the neighbour's image/caption. */
.custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence figure {
    margin: 0;
    max-width: none;
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence img {
    height: 500px;
    width: auto;
    max-width: 100%;
    display: block;
}

/* On mobile the two photos don't fit side by side; stack them vertically and
   let each render at its natural aspect ratio (no horizontal squeeze). */
@media (max-width: 767.98px) {
    .custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    .custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence figure {
        width: 80%;
        max-width: 320px;
    }
    .custom-article.reflective-roof-coating-commercial-guide .content .metal-roof-evidence img {
        width: 100%;
        height: auto;
    }
}

/* Side-by-side text + image (used inside an article section) */
.custom-article .content .side-image {
    width: 100%;
    height: auto;
}

/* Any image rendered inside a Bootstrap column starts flush with column top */
.custom-article .content [class*="col-"] img {
    margin-top: 0;
}

.custom-article .content .row.honest-context {
    margin-top: 16px;
}

@media (max-width: 767.98px) {
    .custom-article .content .row.honest-context .side-image {
        margin-top: 16px;
    }
}