/**
 * Blog: blog-grid cards, single-post article layout (single.php), Blocksy's native post-title/hero styling for blog posts.
 */

.blog-card {
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 16px rgba(15, 44, 76, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(15, 99, 161, 0.12);
    border-color: var(--rect-blue-3);
}

.blog-img-wrapper {
    position: relative;
    /* The blog-grid block renders this as an <a> so the whole thumbnail links to the
       article; without an explicit display the inline default would collapse the box. */
    display: block;
    width: 100%;
    height: 210px;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.blog-body {
    padding: 1.8rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.blog-title {
    font-family: var(--vosges-font-display);
    font-size: 1.5rem;
    color: #0F2C4C;
    margin: 0.5rem 0 1rem 0;
    line-height: 1.35;
}

.blog-desc {
    font-size: 0.95rem;
    color: #4A6A8A;
    line-height: 1.65;
    margin: 0 0 2rem 0;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn-read-article {
    position: relative;
    z-index: 6; /* above .blog-title a::after, the whole-card-click overlay */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 0.5rem 1rem;
    background-color: var(--rect-blue-3);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 13.5px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(45, 153, 235, 0.25);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-read-article:hover {
    background-color: var(--rect-blue-4);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(15, 99, 161, 0.3);
    color: #FFFFFF; /* beats Blocksy's default a:hover color */
}

/* Reads as a heading, not a default-blue underlined anchor. */
.blog-title a {
    color: inherit;
    text-decoration: none;
}

.blog-card:hover .blog-title a {
    /* Field cards' titles never change color on hover — beats Blocksy's own
       default a:hover color so this stays consistent with them. */
    color: inherit;
}

.blog-empty-state {
    text-align: center;
    color: #4A6A8A;
    font-size: 0.95rem;
}

.blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 3rem;
}

.blog-pagination-numbers {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.blog-pagination-arrow,
.blog-pagination-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 0.6rem;
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    color: #0F2C4C;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.blog-pagination-arrow:hover,
.blog-pagination-number:hover {
    border-color: var(--rect-blue-3);
    color: var(--rect-blue-4);
}

.blog-pagination-number.is-current {
    background: var(--rect-blue-3);
    border-color: var(--rect-blue-3);
    color: #FFFFFF;
    cursor: default;
}

.blog-pagination-number.is-current:hover {
    color: #FFFFFF;
}

.blog-pagination-arrow.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

@media (max-width: 480px) {
    .blog-pagination-numbers {
        gap: 0.25rem;
    }

    .blog-pagination-arrow,
    .blog-pagination-number {
        min-width: 34px;
        height: 34px;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   Certificates, Partnerships, Article Detail & Product Page components
   ========================================================================== */

/* Hero Stats Row & Quick Badges */
.hero-stats-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin: 1.5rem 0;
    justify-content: center;
}

.hero-stat-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.4rem 1rem;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: #0F2C4C;
    box-shadow: 0 4px 12px rgba(15, 44, 76, 0.04);
    backdrop-filter: blur(8px);
}

.hero-stat-chip svg {
    color: var(--rect-blue-4);
    flex-shrink: 0;
}

/* Certificates & Quality Standards Section */
.certificates-section {
    padding: 5rem 1.5rem;
    background-color: #F4F9FD;
    border-bottom: 1px solid #D1E4F5;
}

.certs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    max-width: 1280px;
    margin: 2.5rem auto 0 auto;
}

.cert-card {
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-top: 3px solid var(--rect-blue-3);
    border-radius: 4px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.cert-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(15, 44, 76, 0.12);
    border-top-color: var(--rect-blue-4);
}

.cert-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.cert-icon-box {
    width: 48px;
    height: 48px;
    background: #E6F2FC;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--rect-blue-4);
}

.cert-issuer-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--rect-blue-4);
    background: #E6F2FC;
    padding: 0.3rem 0.6rem;
    border-radius: 3px;
}

.cert-title {
    font-family: var(--vosges-font-display);
    font-size: 1.25rem;
    color: #0F2C4C;
    margin: 0.5rem 0;
}

.cert-desc {
    font-size: 0.9rem;
    color: #4A6A8A;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.btn-cert-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.5rem 1rem;
    border: 1px solid var(--rect-blue-4);
    border-radius: 4px;
    color: var(--rect-blue-4);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    width: fit-content;
}

.btn-cert-pdf:hover {
    background: var(--rect-blue-4);
    color: #FFFFFF;
}

/* Partnerships & Clients Section */
.partners-section {
    padding: 5rem 1.5rem;
    background-color: #FFFFFF;
    border-bottom: 1px solid #D1E4F5;
}

.partners-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    max-width: 1280px;
    margin: 2.5rem auto 0 auto;
}

.partner-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.partner-card:hover {
    transform: translateY(-4px);
    border-color: var(--rect-blue-3);
    box-shadow: 0 10px 25px rgba(15, 44, 76, 0.08);
}

.partner-type-tag {
    font-size: 11px;
    font-weight: 600;
    color: #4A6A8A;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
    display: block;
}

.partner-name {
    font-family: var(--vosges-font-display);
    font-size: 1.15rem;
    color: #0F2C4C;
    margin: 0.2rem 0;
}

.partner-region {
    font-size: 0.85rem;
    color: #0F63A1;
    font-weight: 500;
}

/* Article Detail Scroll-to-Section Navigation Layout */
.article-grid-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 3rem;
    max-width: 1240px;
    margin: 0 auto;
    align-items: start;
}

.article-sticky-toc {
    position: sticky;
    top: 100px;
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 1.5rem;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.05);
}

.toc-title {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--rect-blue-4);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid #E6F2FC;
}

.toc-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.toc-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #4A6A8A;
    text-decoration: none;
    padding: 0.4rem 0.6rem;
    border-radius: 3px;
    transition: all 0.2s ease;
}

.toc-link:hover,
.toc-link.active {
    color: var(--rect-blue-4);
    background: #E6F2FC;
    font-weight: 600;
}

/* Opt-in accordion look for Rank Math's TOC block. Not applied automatically — add
   "toc-accordion" in the block's own Additional CSS Class(es) field (block editor,
   Advanced panel) on whichever posts should get it. Collapsed by default; .is-open
   (toggled by the heading click handler in site.js, which only wires up blocks
   carrying this class) reveals the heading list. See editor-only.css and
   assets/js/editor-toc-accordion.js for the block-editor-canvas version of this
   interaction (site.js never runs inside the editor's iframe).
   box-sizing/max-width are defensive: Rank Math's own block-width/alignment controls
   (or a plugin update to its markup) shouldn't ever be able to push this wider than its
   parent. Deliberately does NOT set font-size/color/font-family/etc. on the heading —
   those stay fully controlled by Rank Math's own block settings; the chevron uses
   currentColor for the same reason. Targets the heading via "> :first-child" rather
   than "h2" because Rank Math's "Heading Tag" setting can render it as any of h1–h6
   (always the block's first child, with <nav> always second) — hardcoding h2 here is
   exactly what broke the arrow/layout when that setting was changed. Likewise doesn't
   assume ul/li markup — Rank Math's "List Style" setting can render either <ul><li> or
   <div><div>, so nav's item container is targeted structurally via "> *", not by tag
   name. */
.toc-accordion {
    box-sizing: border-box;
    max-width: 100%;
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 1.25rem 1.75rem;
    margin-bottom: 2.5rem;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.05);
    /* site.js binds the click-to-toggle to the whole card, not just the heading — a
       precise small arrow was hard to hit, especially on touch. cursor is inherited by
       nav's links too, which is harmless since they'd show pointer anyway. */
    cursor: pointer;
    user-select: none;
}

.toc-accordion > :first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
}

.toc-accordion > :first-child::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.toc-accordion.is-open > :first-child::after {
    transform: rotate(-135deg);
}

.toc-accordion nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.35s ease;
}

.toc-accordion.is-open nav {
    max-height: 1200px;
    opacity: 1;
    margin-top: 1rem;
}

.toc-accordion nav > * {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.toc-accordion nav a {
    display: block;
    font-size: 0.95rem;
    color: #037df6;
    text-decoration: none;
    padding: 0.3rem 0;
    overflow-wrap: break-word;
}

.toc-accordion nav a:hover {
    text-decoration: underline;
}

/* Opt-in accordion for Rank Math's FAQ block — add "faq-accordion" as an Additional CSS
   Class on the block. Each question (.rank-math-list-item) is its own accordion item,
   toggled by site.js; only one stays open at a time. Selectors use Rank Math's fixed
   .rank-math-question/.rank-math-list-item classes rather than tag names, since "List
   Style"/"Title Wrapper" block settings change the actual tags rendered. Editor canvas
   stays force-expanded instead (see editor-only.css) so RichText fields stay editable. */
.faq-accordion .rank-math-list-item {
    box-sizing: border-box;
    max-width: 100%;
    list-style: none;
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.faq-accordion .rank-math-list-item:last-child {
    margin-bottom: 0;
}

.faq-accordion .rank-math-question {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 1rem 1.25rem;
    cursor: pointer;
    user-select: none;
}

.faq-accordion .rank-math-question::after {
    content: '';
    flex-shrink: 0;
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.25s ease;
}

.faq-accordion .rank-math-list-item.is-open .rank-math-question::after {
    transform: rotate(-135deg);
}

/* Collapse/expand via CSS Grid's grid-template-rows 0fr/1fr trick (not a JS-measured
   max-height — avoids animation-speed and padding-clipping bugs a pixel-based approach
   hits). Needs two nested wrappers, built by site.js since Rank Math doesn't render them:
     .rank-math-answer (grid) > .rank-math-answer-inner (overflow:hidden, min-height:0)
       > .rank-math-answer-content (padding)
   Padding must live on the inner-most wrapper, not on .rank-math-answer-inner itself —
   overflow:hidden + min-height:0 let a grid item ignore its CHILDREN's size, but an
   element's own padding always counts toward its minimum size regardless, so padding on
   the same element that's being collapsed would stop it reaching 0.
   editor-only.css overrides .rank-math-answer directly, since site.js (and so these
   wrappers) never runs in the block editor canvas. */
.faq-accordion .rank-math-answer {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows 0.25s ease, opacity 0.2s ease;
}

.faq-accordion .rank-math-list-item.is-open .rank-math-answer {
    grid-template-rows: 1fr;
    opacity: 1;
}

.faq-accordion .rank-math-answer-inner {
    overflow: hidden;
    min-height: 0;
}

.faq-accordion .rank-math-answer-content {
    padding: 0 1.25rem 1.25rem 1.25rem;
}

.faq-accordion .rank-math-answer-content p:last-child {
    margin-bottom: 0;
}

.article-section-block {
    scroll-margin-top: calc(var(--header-h) + 28px);
    margin-bottom: 3rem;
    background: #FFFFFF;
    border: 1px solid #CBDFF0;
    border-radius: 4px;
    padding: 2.5rem;
    box-shadow: 0 8px 25px rgba(15, 44, 76, 0.06);
}

.article-section-block h2 {
    font-family: var(--vosges-font-display);
    font-size: 1.8rem;
    color: #0F2C4C;
    margin-top: 0;
    margin-bottom: 1.2rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.presentation-download-card {
    background: linear-gradient(135deg, #E6F2FC, #FFFFFF);
    border: 1px solid #2D99EB;
    border-inline-start: 5px solid #0F63A1;
    border-radius: 4px;
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.presentation-info h4 {
    margin: 0 0 0.4rem 0;
    font-size: 1.2rem;
    color: #0F2C4C;
}

.presentation-info p {
    margin: 0;
    font-size: 0.9rem;
    color: #4A6A8A;
}

.btn-download-pdf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0.8rem 1.5rem;
    background-color: var(--rect-blue-4);
    color: #FFFFFF;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}

.btn-download-pdf:hover {
    background-color: var(--rect-blue-3);
    transform: translateY(-2px);
}

/* Product Page Layout & Sticky Section Bar */
.product-hero-header {
    background: #E6F2FC;
    border-bottom: 1px solid #D1E4F5;
    padding: 3.5rem 1.5rem 2.5rem 1.5rem;
}

.product-sticky-nav {
    position: sticky;
    top: var(--header-h);
    background: #FFFFFF;
    border-bottom: 1px solid #D1E4F5;
    z-index: 990;
    box-shadow: 0 4px 15px rgba(15, 44, 76, 0.05);
}

.product-nav-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    gap: 2rem;
    overflow-x: auto;
}

.product-nav-tab {
    padding: 1rem 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #4A6A8A;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.product-nav-tab:hover,
.product-nav-tab.active {
    color: var(--rect-blue-4);
    border-bottom-color: var(--rect-blue-4);
}

.principle-diagram-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.principle-step-card {
    background: #F8FAFC;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 1.5rem;
    position: relative;
}

.step-number {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: var(--rect-blue-4);
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 4px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    margin-bottom: 0.8rem;
}

.home-contact-section {
    padding: 0 1rem !important;
    background: #E6F2FC !important;
    border-top: 1px solid #C8E0F7;
}

/* Makes the whole blog card clickable via .blog-title a's ::after overlay,
   not just the title text or Read More button. */
.blog-card {
    position: relative;
    cursor: pointer;
}

.blog-card .blog-title a::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
}

/* Resets Fluent Forms' own wrapper spacing so it doesn't add extra space inside
   .rbm-form-container. Applies to all 3 language forms. */
.rbm-form-container .fluentform,
.rbm-form-container .frm-fluent-form,
.rbm-form-container form,
.rbm-form-container fieldset,
.rbm-form-container .ff-el-input--content {
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

@media (max-width: 900px) {
    .rbm-form-container {
        padding: 1.75rem !important;
    }
}

@media (max-width: 700px) {
    .rbm-form-container .ff-t-container {
        flex-direction: column;
        gap: 1.5rem;
    }
}

@media (max-width: 480px) {
    .rbm-form-container {
        padding: 1.25rem !important;
    }
}

.rbm-input,
.rbm-select,
.rbm-textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14.5px;
    color: #0F2C4C;
    background: #F8FAFC;
    box-sizing: border-box;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.rbm-input:focus,
.rbm-select:focus,
.rbm-textarea:focus {
    outline: none;
    border-color: var(--rect-blue-3);
    background: #FFFFFF;
}

.rbm-file-zone {
    border: 2px dashed #CBDFF0;
    border-radius: 4px;
    padding: 1.5rem;
    text-align: center;
    background: #F8FAFC;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rbm-file-zone:hover {
    background: #E6F2FC;
    border-color: var(--rect-blue-3);
}

/* ==================== Blog Article Layout (single.php) ====================
   Ported from irrigation.html's page-local inline styles; reuses the site's
   existing tokens instead of redeclaring its own :root. */

.article-hero {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #D1E4F5;
    padding: 2.2rem 3% 1.8rem 3%;
    color: #0F2C4C;
}

/* Full-width breakout, independent of Blocksy's Post Structure setting. Blocksy's
   own .alignfull mechanism doesn't reach posts using plain .ct-container (sidebar/
   "none" structure) — confirmed live: full-width in the editor, boxed on the real
   page. This viewport-width breakout works regardless of which container Blocksy chose. */
.wp-block-vosges-blog-hero.alignfull {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.article-hero-bg-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
    display: block;
}

.article-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 52%, rgba(255, 255, 255, 0.85) 75%, rgba(255, 255, 255, 0.30) 100%);
}

.article-hero-container {
    position: relative;
    z-index: 2;
    /* --vosges-hero-content-width is set inline per post to match the article's
       width; 1400px is the fallback (e.g. the block editor). */
    max-width: var(--vosges-hero-content-width, 1400px);
    margin: 0 auto;
}

.article-category-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.4);
    border-radius: 4px;
    color: #0D9488;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.75rem;
}

.article-main-title {
    font-family: var(--vosges-font-display);
    font-size: 2.4rem;
    line-height: 1.25;
    color: #0F2C4C;
    font-weight: 700;
    margin: 0 0 0.6rem 0;
    max-width: 850px;
}

.article-lead-text {
    font-size: 1.08rem;
    color: #33597D;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 1rem 0;
    max-width: 800px;
}

.article-meta-bar {
    font-size: 0.88rem;
    color: #4A6A8A;
    display: flex;
    gap: 1.8rem;
    border-top: 1px solid #D1E4F5;
    padding-top: 0.75rem;
    max-width: 800px;
}

.article-meta-bar strong {
    color: #0F2C4C;
}

.meta-primary-val {
    color: #0F63A1;
    font-weight: 700;
}

.article-body-section {
    padding: 1.2rem 3% 3rem 3%;
    background-color: #F5F9FD;
}

.article-layout-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2.2rem;
    align-items: start;
}

.article-container {
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 2.2rem 2.8rem;
    box-shadow: 0 8px 24px rgba(15, 44, 76, 0.04);
}

.article-right-sidebar {
    position: sticky;
    top: 86px;
    background: #FFFFFF;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    padding: 1.6rem 1.4rem;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.03);
}

.sidebar-heading {
    font-family: var(--vosges-font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: #0F2C4C;
    margin: 0 0 1rem 0;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #2D99EB;
}

.related-links-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.related-sidebar-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #D1E4F5;
}

.related-sidebar-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.related-thumb {
    width: 84px;
    height: 62px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #D1E4F5;
    flex-shrink: 0;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.related-sidebar-item:hover .related-thumb {
    transform: scale(1.05);
    border-color: #2D99EB;
}

.related-content {
    flex: 1;
    min-width: 0;
}

.related-text-link {
    font-family: var(--vosges-font-display);
    font-size: 1.02rem;
    font-weight: 700;
    color: #0F2C4C;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.related-text-link:hover {
    color: #2D99EB;
}

.related-text-link svg {
    width: 14px;
    height: 14px;
    color: #2D99EB;
    flex-shrink: 0;
    transition: transform 0.2s ease, color 0.2s ease;
}

.related-text-link:hover svg {
    transform: translateX(3px);
    color: #0F63A1;
}

.related-text-desc {
    font-size: 0.82rem;
    color: #4A6A8A;
    margin: 0.25rem 0 0 0;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.section-block {
    margin-bottom: 3rem;
    padding-bottom: 2.5rem;
    border-bottom: 1px solid #D1E4F5;
}

.section-block:last-of-type,
.section-block.no-divider {
    border-bottom: none !important;
    margin-bottom: 1.5rem !important;
    padding-bottom: 0 !important;
}

.article-heading {
    font-family: var(--vosges-font-display);
    font-size: 1.9rem;
    color: #0F2C4C;
    margin: 0 0 1.2rem 0;
    line-height: 1.3;
}

.article-subheading {
    font-family: var(--vosges-font-display);
    font-size: 1.4rem;
    color: #0F63A1;
    margin: 1.8rem 0 0.8rem 0;
}

.article-p {
    font-size: 1.05rem;
    color: #0F2C4C;
    line-height: 1.7;
    margin: 0 0 1.25rem 0;
}

.article-list {
    color: #0F2C4C;
    font-size: 1.02rem;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    padding-inline-start: 1.3rem;
}

.article-list li {
    margin-bottom: 0.7rem;
}

.problem-callout-box {
    background: #FEF2F2;
    border-inline-start: 4px solid #DC2626;
    padding: 1.6rem;
    border-radius: 4px;
    margin: 2rem 0;
}

.problem-callout-box h4 {
    font-family: var(--vosges-font-display);
    color: #991B1B;
    margin: 0 0 0.6rem 0;
    font-size: 1.25rem;
}

.problem-callout-box p {
    color: #7F1D1D;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
}

.solution-callout-box {
    background: #F0FDF4;
    border-inline-start: 4px solid #0D9488;
    padding: 1.6rem;
    border-radius: 4px;
    margin: 2rem 0;
}

.solution-callout-box h4 {
    font-family: var(--vosges-font-display);
    color: #065F46;
    margin: 0 0 0.6rem 0;
    font-size: 1.25rem;
}

.solution-callout-box p {
    color: #064E3B;
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.6;
}

.feature-media-block {
    margin: 2.2rem 0;
    text-align: center;
}

.feature-media-block img {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid #D1E4F5;
    box-shadow: 0 6px 20px rgba(15, 44, 76, 0.08);
}

.feature-media-caption {
    font-size: 0.88rem;
    color: #4A6A8A;
    margin-top: 0.75rem;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    margin-top: 0;
}

.benefit-icon {
    width: 20px;
    height: 20px;
    color: #0D9488;
    flex-shrink: 0;
    margin-top: 3px;
}

.benefit-content h5 {
    font-family: var(--vosges-font-body);
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F2C4C;
    margin: 0 0 0.3rem 0;
}

.benefit-content p {
    font-size: 0.95rem;
    color: #4A6A8A;
    margin: 0;
    line-height: 1.55;
}

.contact-form-wrapper {
    margin-top: 3.5rem;
    padding-top: 3rem;
    border-top: 2px solid #D1E4F5;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group-full {
    grid-column: span 2;
}

.form-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0F2C4C;
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--vosges-font-body);
    font-size: 0.95rem;
    color: #0F2C4C;
    background-color: #F5F9FD;
    border: 1px solid #D1E4F5;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: #2D99EB;
    box-shadow: 0 0 0 3px rgba(45, 153, 235, 0.2);
    background-color: #FFFFFF;
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-submit-btn {
    width: 100%;
    padding: 1rem;
    font-size: 1.05rem;
}

.form-success-banner {
    display: none;
    padding: 1.2rem;
    background: #F0FDF4;
    border: 1px solid #86EFAC;
    border-radius: 4px;
    color: #166534;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    margin-top: 1.5rem;
}

@media (max-width: 992px) {
    .article-layout-grid {
        grid-template-columns: 1fr;
    }

    .article-right-sidebar {
        position: static;
    }
}

@media (max-width: 768px) {
    .problem-media-gallery,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .form-group-full {
        grid-column: span 1;
    }

    .article-main-title {
        font-size: 2.1rem;
    }

    /* Cancels the 1rem side inset 06-page-overrides.css gives .ct-container at this
       width, so the article card runs edge-to-edge instead of sitting in a 16px band. */
    .article-container {
        margin-left: -1rem;
        margin-right: -1rem;
        padding: 1.5rem 1.1rem;
    }

    .article-body-section {
        padding: 1.2rem 1rem 3rem 1rem;
    }

    .article-lead-text {
        font-size: 1rem;
    }

    .article-heading {
        font-size: 1.5rem;
    }

    .article-subheading {
        font-size: 1.2rem;
    }

    .article-p {
        font-size: 0.98rem;
    }

    .article-list {
        font-size: 0.96rem;
    }

    .article-meta-bar {
        font-size: 0.82rem;
        gap: 1.2rem;
    }

    .problem-callout-box h4,
    .solution-callout-box h4 {
        font-size: 1.1rem;
    }

    .problem-callout-box p,
    .solution-callout-box p {
        font-size: 0.92rem;
    }

    .benefit-content h5 {
        font-size: 0.98rem;
    }

    .benefit-content p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .article-container {
        padding: 1.25rem 0.9rem;
    }

    .article-body-section {
        padding: 1rem 0.75rem 2.5rem 0.75rem;
    }

    .article-main-title {
        font-size: 1.6rem;
    }

    .article-lead-text {
        font-size: 0.94rem;
    }

    .article-heading {
        font-size: 1.3rem;
    }

    .article-subheading {
        font-size: 1.1rem;
    }

    .article-p,
    .article-list {
        font-size: 0.92rem;
    }
}

.benefit-item {
    position: relative;
}

.benefit-item::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 3px;
    background-color: #0D9488;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* ==================== Blocksy native Post Title / hero (single.php) ====================
   Blog posts use Blocksy's own Post Title/hero system (Customizer -> Post types ->
   Single Post) instead of a duplicate custom title block — these rules just bring its
   fonts/colors in line. Background/overlay stay on Blocksy's own Customizer controls. */

.hero-section .page-title {
    font-family: var(--vosges-font-display);
    font-weight: 700;
}

.hero-section[data-type="type-2"] .page-title {
    color: #FFFFFF;
}

.hero-section[data-type="type-2"] .page-description {
    color: #E6F2FC;
    font-size: 1.08rem;
    line-height: 1.6;
}

.hero-section[data-type="type-1"] .page-description {
    color: #4A6A8A;
    font-size: 1.05rem;
    line-height: 1.6;
}

.hero-section .entry-meta .meta-categories a {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.85rem;
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.4);
    border-radius: 4px;
    color: #0D9488;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-decoration: none;
}

.hero-section[data-type="type-2"] .entry-meta .meta-categories a {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #FFFFFF;
}

.hero-section[data-type="type-2"] .entry-meta {
    color: #CBD5E1;
}

.hero-section[data-type="type-2"] .entry-meta a {
    color: #CBD5E1;
}