/* Epion Article Reference Sync 1.6.2 — SAFE REGRESSION FIX.
 * Native article-* classes from the approved Epion article template are authoritative.
 * The plugin styles only plain legacy markup marked with epion-auto-* classes.
 * No post content, WPGlobus segment or DOM order is rewritten. */

.epion-reference-root {
    --epion-reference-blue: #0876e8;
    --epion-reference-text: #15191d;
    --epion-reference-line: #dfe5ea;
    --epion-reference-blue-panel: #eef6ff;
    --epion-reference-warning: #fff4ee;
    --epion-reference-warning-line: #efb398;
}

/* Typography only. This does not change block structure. */
body.epion-reference-active.epion-reference-typography-page .blog-single,
body.epion-reference-active.epion-reference-typography-page .article-summary-section,
body.epion-reference-active.epion-reference-typography-page .article-toc,
body.epion-reference-active.epion-reference-typography-page .article-consultation-context,
body.epion-reference-active.epion-reference-typography-page .article-primary-service,
body.epion-reference-active.epion-reference-typography-page .article-faq,
body.epion-reference-active.epion-reference-typography-page .article-lead-form,
body.epion-reference-active.epion-reference-typography-page .blog-single-author-container,
body.epion-reference-active.epion-reference-typography-page .blog-single__related,
.epion-reference-typography,
.epion-reference-typography p,
.epion-reference-typography li,
.epion-reference-typography td,
.epion-reference-typography figcaption {
    font-family: "Noto Sans HK", Arial, sans-serif !important;
}

body.epion-reference-active.epion-reference-typography-page h1,
body.epion-reference-active.epion-reference-typography-page h2,
body.epion-reference-active.epion-reference-typography-page h3,
body.epion-reference-active.epion-reference-typography-page h4,
body.epion-reference-active.epion-reference-typography-page h5,
body.epion-reference-active.epion-reference-typography-page h6,
body.epion-reference-active.epion-reference-typography-page th,
body.epion-reference-active.epion-reference-typography-page button,
body.epion-reference-active.epion-reference-typography-page ._button,
.epion-reference-typography h1,
.epion-reference-typography h2,
.epion-reference-typography h3,
.epion-reference-typography h4,
.epion-reference-typography h5,
.epion-reference-typography h6,
.epion-reference-typography th,
.epion-reference-typography button,
.epion-reference-typography ._button {
    font-family: "Apercu Pro", Arial, sans-serif !important;
}

/* Fallback headings only. Approved theme classes remain untouched. */
.epion-reference-root h2.epion-reference-section-heading:not(.article-section-title) {
    position: relative;
    margin-bottom: 22px !important;
    font-weight: 400 !important;
}
.epion-reference-root h2.epion-reference-section-heading:not(.article-section-title)::before {
    display: block;
    width: 38px;
    height: 3px;
    margin: 0 0 14px;
    background: var(--epion-reference-blue);
    content: "";
}
.epion-reference-root h3.epion-reference-subheading:not(.article-subsection-title) {
    padding-left: 14px !important;
    border-left: 3px solid var(--epion-reference-blue) !important;
}

/*
 * AUTO number cards.
 * These selectors never target native .article-step-list or .article-reason-list,
 * so the reference article keeps its own article-step/article-reason counters.
 */
.epion-reference-root .epion-auto-number-cards {
    counter-reset: epion-auto-card;
    padding: 0 !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-number-cards > li {
    position: relative;
    counter-increment: epion-auto-card;
    margin: 0 !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-number-cards > li::marker {
    content: "";
}
.epion-reference-root .epion-auto-number-cards > li::after {
    position: absolute;
    right: 16px;
    bottom: 10px;
    color: #dfe4e8;
    font-family: "Apercu Pro", Arial, sans-serif;
    font-size: 50px;
    line-height: 1;
    content: counter(epion-auto-card);
    pointer-events: none;
}
.epion-reference-root .epion-auto-number-cards--steps {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 800px;
    margin: 26px auto 34px !important;
    border-top: 1px solid var(--epion-reference-line);
    border-left: 1px solid var(--epion-reference-line);
}
.epion-reference-root .epion-auto-number-cards--steps > li {
    min-width: 0;
    min-height: 132px;
    padding: 26px 68px 48px 24px !important;
    background: #fff;
    border-right: 1px solid var(--epion-reference-line);
    border-bottom: 1px solid var(--epion-reference-line);
    overflow-wrap: anywhere;
}
.epion-reference-root .epion-auto-number-cards--reasons {
    display: grid !important;
    grid-template-columns: repeat(var(--epion-card-columns, 3), minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 28px 0 34px !important;
}
.epion-reference-root .epion-auto-number-cards--reasons > li {
    min-width: 0;
    min-height: 190px;
    padding: 26px 24px 58px !important;
    background: #fff;
    border: 1px solid #e3e8ec;
    box-shadow: 0 4px 15px rgba(28, 46, 61, 0.06);
    overflow-wrap: anywhere;
}

/* AUTO panels. Native .article-cost-list/.article-list classes remain authoritative. */
.epion-reference-root .epion-auto-panel {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 34px !important;
    margin: 20px 0 26px !important;
    padding: 24px 30px 25px 54px !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-panel > li {
    position: relative;
    min-width: 0;
    margin: 0 !important;
    padding-left: 18px !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-panel > li::marker {
    content: "";
}
.epion-reference-root .epion-auto-panel > li::before {
    position: absolute;
    top: .72em;
    left: 0;
    width: 6px;
    height: 6px;
    background: var(--epion-reference-blue);
    content: "";
    transform: translateY(-50%);
}
.epion-reference-root .epion-auto-panel--recommendation {
    background: var(--epion-reference-blue-panel) !important;
    border-left: 3px solid var(--epion-reference-blue) !important;
}
.epion-reference-root .epion-auto-panel--warning {
    background: var(--epion-reference-warning) !important;
    border-left: 3px solid var(--epion-reference-warning-line) !important;
}
.epion-reference-root .epion-auto-panel--warning > li::before {
    width: 10px;
    height: 1px;
    background: #dd7348;
}
.epion-reference-root .epion-auto-panel--cost {
    background: #fff !important;
    border: 1px solid var(--epion-reference-line) !important;
}

/* AUTO price section for legacy articles that do not already use article-content-section--price. */
.epion-reference-root .epion-auto-price-section {
    position: relative;
    z-index: 0;
    padding-top: 52px !important;
    padding-bottom: 52px !important;
    border-top: 0 !important;
}
.epion-reference-root .epion-auto-price-section::before {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    background: #f4f6f8;
    content: "";
}
.epion-reference-root .epion-auto-price-list {
    width: 100% !important;
    max-width: 800px !important;
    margin: 26px auto 32px !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid var(--epion-reference-line) !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-price-list > li {
    margin: 0 !important;
    padding: 17px 22px !important;
    background: #fff !important;
    border-bottom: 1px solid var(--epion-reference-line) !important;
    font-weight: 600 !important;
    list-style: none !important;
}
.epion-reference-root .epion-auto-price-list > li:last-child {
    border-bottom: 0 !important;
}
.epion-reference-root .epion-auto-price-list > li::before,
.epion-reference-root .epion-auto-price-list > li::marker {
    display: none !important;
    content: "" !important;
}

/* Bare legacy tables only. Gutenberg/native wrappers keep article-improvements.css. */
.epion-reference-root table.epion-auto-table {
    width: 100% !important;
    min-width: var(--epion-table-min-width, 640px) !important;
    margin: 28px 0 36px !important;
    border: 1px solid var(--epion-reference-line) !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    table-layout: auto !important;
}
.epion-reference-root table.epion-auto-table th,
.epion-reference-root table.epion-auto-table td {
    padding: 16px 18px !important;
    border-right: 1px solid var(--epion-reference-line) !important;
    border-bottom: 1px solid var(--epion-reference-line) !important;
    vertical-align: top !important;
    text-align: left !important;
    line-height: 1.55 !important;
    overflow-wrap: break-word;
}
.epion-reference-root table.epion-auto-table th:last-child,
.epion-reference-root table.epion-auto-table td:last-child {
    border-right: 0 !important;
}
.epion-reference-root table.epion-auto-table tr:last-child > th,
.epion-reference-root table.epion-auto-table tr:last-child > td {
    border-bottom: 0 !important;
}
.epion-reference-root table.epion-auto-table tbody tr:nth-child(odd) td {
    background: #f6f8fa !important;
}
.epion-reference-root table.epion-auto-table tbody tr:nth-child(even) td {
    background: #fff !important;
}
.epion-reference-root table.epion-auto-table:not(.epion-auto-table--price) thead th,
.epion-reference-root table.epion-auto-table:not(.epion-auto-table--price) tbody tr:first-child > th {
    color: #fff !important;
    background: var(--epion-reference-blue) !important;
    border-right-color: rgba(255,255,255,.3) !important;
    border-bottom-color: var(--epion-reference-blue) !important;
    font-family: "Apercu Pro", Arial, sans-serif !important;
    font-weight: 500 !important;
}
.epion-reference-root table.epion-auto-table--price {
    min-width: 0 !important;
    table-layout: fixed !important;
}
.epion-reference-root table.epion-auto-table--price th,
.epion-reference-root table.epion-auto-table--price td {
    color: var(--epion-reference-text) !important;
    background: #fff !important;
    font-weight: 600 !important;
}
.epion-reference-root table.epion-auto-table--price th {
    width: 72% !important;
}
.epion-reference-root table.epion-auto-table--price td {
    width: 28% !important;
    text-align: right !important;
    white-space: nowrap;
}

/*
 * Block seams.
 * 1) .article-faq.row has a native margin-top: 64px. It is unwanted when FAQ
 *    directly follows the primary-service or consultation block.
 * 2) legacy .wp-content-area has padding-bottom: 50px. When FAQ is its final
 *    element, that padding becomes a visible white stripe before the next block.
 */
body.epion-reference-active .wrapper.wp-content-area > .epion-seam-before-faq {
    margin-bottom: 0 !important;
}
body.epion-reference-active .wrapper.wp-content-area > .article-faq.epion-seam-faq {
    margin-top: 0 !important;
    border-top: 0 !important;
}
body.epion-reference-active .wrapper.wp-content-area.epion-seam-faq-last {
    padding-bottom: 0 !important;
}

@media (max-width: 700px) {
    .epion-reference-root .epion-auto-number-cards--steps,
    .epion-reference-root .epion-auto-number-cards--reasons,
    .epion-reference-root .epion-auto-panel {
        grid-template-columns: 1fr !important;
    }
    .epion-reference-root .epion-auto-number-cards--steps > li,
    .epion-reference-root .epion-auto-number-cards--reasons > li {
        min-height: 0;
    }
    .epion-reference-root table.epion-auto-table--price {
        min-width: 0 !important;
    }
}

/*
 * Profile doctor image in the primary-service block.
 * The legacy theme renders the portrait noticeably smaller than the card itself.
 * This is a purely visual override: no HTML, doctor data or card order is changed.
 */
body.epion-reference-active .article-primary-service__doctor-card .article-primary-service__doctor-image {
    display: block !important;
    box-sizing: border-box !important;
    width: 176px !important;
    max-width: calc(100% - 24px) !important;
    height: auto !important;
    aspect-ratio: auto !important;
    margin: 0 auto 18px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
body.epion-reference-active .article-primary-service__doctor-card .article-primary-service__doctor-image img {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    object-fit: cover !important;
    object-position: center top !important;
}

@media (max-width: 700px) {
    body.epion-reference-active .article-primary-service__doctor-card .article-primary-service__doctor-image {
        width: 156px !important;
        max-width: calc(100% - 20px) !important;
        margin-bottom: 16px !important;
        padding: 0 !important;
    }
}