/* ================================================================
   GEO Product Enhancements — Clinical Data, FAQ, Button, Animation
   ================================================================ */

/* ===== Clinical Data Grid ===== */
.corpiva-geo-data {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.8rem;
    margin: 1.5rem 0;
}
.corpiva-geo-data__item {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.5rem;
    padding: 1rem 0.8rem;
    text-align: center;
}
.corpiva-geo-data__val {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--dt-main-color);
    line-height: 1.2;
}
.corpiva-geo-data__label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: #555;
    margin-top: 0.2rem;
    line-height: 1.3;
}
.corpiva-geo-data__src {
    display: block;
    font-size: 0.65rem;
    color: #999;
    font-style: italic;
    margin-top: 0.15rem;
}

/* ===== FAQ Section ===== */
.corpiva-geo-faq {
    margin: 2rem 0 3rem;
    clear: both;
    width: 100%;
}
.corpiva-geo-faq__title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1.2rem;
    color: var(--dt-secondary-color);
}
.corpiva-geo-faq__item {
    border: 1px solid #e8e8e8;
    border-radius: 0.6rem;
    margin-bottom: 0.5rem;
    overflow: hidden;
    background: #fff;
}
.corpiva-geo-faq__q {
    padding: 1rem 1.2rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--dt-secondary-color);
    line-height: 1.4;
    gap: 1rem;
    transition: background 0.2s;
    user-select: none;
}
.corpiva-geo-faq__q:hover {
    background: rgba(var(--dt-main-rgb), 0.03);
}
.corpiva-geo-faq__icon {
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background: rgba(var(--dt-main-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    color: var(--dt-main-color);
    transition: transform 0.3s;
    line-height: 1;
}
.corpiva-geo-faq__item.open .corpiva-geo-faq__icon {
    transform: rotate(45deg);
}
.corpiva-geo-faq__a {
    display: none;
    padding: 0 1.2rem 1rem;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.7;
}
.corpiva-geo-faq__a p {
    margin: 0;
}

/* ===== Contact Button ===== */
.corpiva-geo-contact-wrap .dt-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* ===== Product Meta — hide category line, tighten spacing ===== */
.single-product .product_meta .posted_in {
    display: none !important;
}
.single-product .product_meta {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: none !important;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
    .corpiva-geo-data {
        grid-template-columns: repeat(2, 1fr);
    }
    .corpiva-geo-faq__q {
        font-size: 0.88rem;
        padding: 0.8rem 1rem;
    }
    .corpiva-geo-faq__a {
        font-size: 0.85rem;
        padding: 0 1rem 0.8rem;
    }
}
@media (max-width: 480px) {
    .corpiva-geo-data {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .corpiva-geo-data__val {
        font-size: 1.1rem;
    }
    .corpiva-geo-data__item {
        padding: 0.7rem 0.5rem;
    }
}

/* ================================================================
   Phase 2 — Product Comparison Page & Buying Guide Page
   ================================================================ */

/* ===== Comparison Table ===== */
.dt-compare-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.8rem;
    border: 1px solid #eaeaea;
    background: #fff;
}
.dt-compare-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 720px;
}
.dt-compare-table th,
.dt-compare-table td {
    border: 1px solid #eaeaea;
    padding: 1.2rem 1.4rem;
    vertical-align: top;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}
.dt-compare-table thead th {
    background: var(--dt-secondary-color);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    text-align: center;
    white-space: nowrap;
}
.dt-compare-table tbody tr:nth-child(even) {
    background: #fafafa;
}
.dt-compare-col-product {
    min-width: 220px;
}
.dt-compare-product-cell {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.dt-compare-thumb {
    flex: 0 0 80px;
}
.dt-compare-thumb img {
    width: 80px;
    height: auto;
    border-radius: 0.4rem;
    border: 1px solid #eaeaea;
    display: block;
}
.dt-compare-info {
    flex: 1;
}
.dt-compare-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--dt-secondary-color);
    margin: 0 0 0.3rem;
    line-height: 1.3;
}
.dt-compare-name a {
    color: inherit;
    text-decoration: none;
}
.dt-compare-name a:hover {
    color: var(--dt-main-color);
}
.dt-compare-price {
    display: block;
    font-weight: 700;
    color: var(--dt-main-color);
    font-size: 0.95rem;
    margin-bottom: 0.3rem;
}
.dt-compare-short {
    font-size: 0.8rem;
    color: #888;
    margin: 0 0 0.6rem;
    line-height: 1.5;
}
.dt-compare-view {
    font-size: 0.75rem;
    padding: 0.45rem 1.1rem;
}

/* ===== Buying Guide ===== */
.dt-guide-content {
    max-width: 900px;
    margin: 0 auto;
}
.dt-guide-content h2 {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--dt-secondary-color);
    margin: 3rem 0 1rem;
    line-height: 1.3;
}
.dt-guide-content p {
    color: #555;
    line-height: 1.8;
    margin-bottom: 1rem;
}
.dt-guide-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 1.5rem 0;
    border-radius: 0.8rem;
    border: 1px solid #eaeaea;
    background: #fff;
}
.dt-guide-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 560px;
}
.dt-guide-table th,
.dt-guide-table td {
    border: 1px solid #eaeaea;
    padding: 1rem 1.2rem;
    text-align: left;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
    vertical-align: top;
}
.dt-guide-table thead th {
    background: rgba(var(--dt-main-rgb), 0.08);
    color: var(--dt-secondary-color);
    font-weight: 700;
}
.dt-guide-table tbody tr:nth-child(even) {
    background: #fafafa;
}
.dt-guide-list {
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}
.dt-guide-list li {
    position: relative;
    padding: 0.7rem 0 0.7rem 2.2rem;
    color: #555;
    line-height: 1.6;
    font-size: 0.95rem;
    border-bottom: 1px dashed #eee;
}
.dt-guide-list li:last-child {
    border-bottom: none;
}
.dt-guide-list li::before {
    content: "\f058";
    font-family: "Font Awesome 5 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.8rem;
    color: var(--dt-main-color);
}
.dt-guide-cta {
    margin-top: 4rem;
    padding: 3rem 2rem;
    background: var(--dt-secondary-color);
    border-radius: 1rem;
}
.dt-guide-cta h2 {
    color: #fff;
    margin-top: 0;
}
.dt-guide-cta p {
    color: rgba(255, 255, 255, 0.75);
    max-width: 600px;
    margin: 0 auto 1.5rem;
}

/* ===== Phase 2 Responsive ===== */
@media (max-width: 767px) {
    .dt-compare-table {
        min-width: 640px;
    }
    .dt-compare-thumb {
        flex-basis: 60px;
    }
    .dt-compare-thumb img {
        width: 60px;
    }
    .dt-guide-content h2 {
        font-size: 1.4rem;
    }
    .dt-guide-table {
        min-width: 480px;
    }
    .dt-guide-cta {
        padding: 2rem 1.2rem;
    }
}

/* ================================================================
   Page Header Breadcrumb (site-breadcrumb.php) — standalone styling
   The header now shows only the breadcrumb (no H1), so the list needs
   its own presentable style. Matches the dt_pagetitle dark background.
   ================================================================ */
.dt_pagetitle-content {
    position: relative;
    z-index: 1;
}
.dt_pagetitle-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: #fff;
}
.dt_pagetitle-menu li {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
}
.dt_pagetitle-menu li a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.3s;
}
.dt_pagetitle-menu li a:hover,
.dt_pagetitle-menu li a:focus {
    color: var(--dt-main-color);
}
/* Separator between Home / Pages */
.dt_pagetitle-menu li:first-child::after {
    content: "/";
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
}
.dt_pagetitle-menu .dt_pagetitle-menu-item {
    color: #fff;
}
@media (max-width: 480px) {
    .dt_pagetitle-menu {
        font-size: 0.95rem;
        gap: 0.5rem;
    }
    .dt_pagetitle-menu li {
        gap: 0.5rem;
    }
}

/* ================================================================
   Blog Page — left sidebar (categories + featured)
   Card grid uses native .dt_posts--one (homepage style), no custom
   card CSS needed. Only the sidebar needs its own styling.
   ================================================================ */
.dt-blog-aside__block {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 0.6rem;
    padding: 1.8rem 1.6rem;
    margin-bottom: 1.6rem;
}
.dt-blog-aside__title {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--dt-secondary-color);
    margin: 0 0 1.2rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid #eee;
}
.dt-blog-aside__nav {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dt-blog-aside__nav li {
    border-bottom: 1px dashed #eee;
}
.dt-blog-aside__nav li:last-child {
    border-bottom: none;
}
.dt-blog-aside__nav a {
    display: block;
    padding: 0.8rem 0;
    color: #555;
    text-decoration: none;
    font-size: 1.25rem;
    transition: color 0.3s, padding-left 0.3s;
}
.dt-blog-aside__nav a:hover,
.dt-blog-aside__nav a:focus {
    color: var(--dt-main-color);
    padding-left: 0.5rem;
}
/* Featured posts */
.dt-blog-aside__featured {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.dt-blog-aside__feat-item {
    display: flex;
    gap: 0.8rem;
    align-items: center;
    text-decoration: none;
}
.dt-blog-aside__feat-thumb {
    flex: 0 0 70px;
}
.dt-blog-aside__feat-thumb img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 0.4rem;
    display: block;
}
.dt-blog-aside__feat-info {
    flex: 1;
    min-width: 0;
}
.dt-blog-aside__feat-title {
    display: block;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--dt-secondary-color);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    transition: color 0.3s;
}
.dt-blog-aside__feat-item:hover .dt-blog-aside__feat-title {
    color: var(--dt-main-color);
}
.dt-blog-aside__feat-date {
    display: block;
    font-size: 0.95rem;
    color: #999;
    margin-top: 0.2rem;
}

/* Blog responsive */
@media (max-width: 991px) {
    .dt-blog-aside {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        margin-bottom: 2rem;
    }
    .dt-blog-aside__block {
        margin-bottom: 0;
    }
}
@media (max-width: 767px) {
    .dt-blog-aside {
        grid-template-columns: 1fr;
    }
}

/* ================================================================
   Blog card thumbnail — fixed window ratio (Customizer selectable)
   The image fills the window via object-fit:cover, so all cards in a
   row stay the same height regardless of each post's original ratio.
   The native hover scale is kept (scale works on the img itself, so it
   stays consistent with the theme's zoom effect).
   ================================================================ */
.blog-thumb-4_3 .dt_post_item .image {
    aspect-ratio: 4 / 3;
}
.blog-thumb-1_1 .dt_post_item .image {
    aspect-ratio: 1 / 1;
}
.blog-thumb-16_9 .dt_post_item .image {
    aspect-ratio: 16 / 9;
}
.blog-thumb-4_3 .dt_post_item .image img,
.blog-thumb-1_1 .dt_post_item .image img,
.blog-thumb-16_9 .dt_post_item .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Auto ratio keeps original behaviour — no changes needed */

/* ================================================================
   Blog cards — fine-tuning (only on the Blog page, body classes)
   1. Smaller card title
   2. No-image placeholder keeps the same window size
   3. Uniform, tidy card alignment
   ================================================================ */
/* 1. Smaller card title + tighter spacing inside the card */
.blog-thumb-4_3 .dt_post_item .title,
.blog-thumb-1_1 .dt_post_item .title,
.blog-thumb-16_9 .dt_post_item .title {
    font-size: 1.6rem;
    line-height: 1.35;
    margin-bottom: 0.8rem;
}
.blog-thumb-4_3 .dt_post_item .content p,
.blog-thumb-1_1 .dt_post_item .content p,
.blog-thumb-16_9 .dt_post_item .content p {
    font-size: 1.4rem;
}
.blog-thumb-4_3 .dt_post_item .catetag,
.blog-thumb-1_1 .dt_post_item .catetag,
.blog-thumb-16_9 .dt_post_item .catetag {
    font-size: 1.3rem;
}
.blog-thumb-4_3 .dt_post_item .meta,
.blog-thumb-1_1 .dt_post_item .meta,
.blog-thumb-16_9 .dt_post_item .meta {
    font-size: 1.3rem;
}

/* 2. No-image placeholder — keeps the window at the same ratio */
.dt-post-noimg {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0f0f0;
}
.dt-post-noimg__placeholder {
    font-size: 3.5rem;
    color: #ccc;
    display: flex;
}
.blog-thumb-4_3 .dt-post-noimg,
.blog-thumb-1_1 .dt-post-noimg,
.blog-thumb-16_9 .dt-post-noimg {
    width: 100%;
}

/* 3. Uniform card alignment — cards in a row equal height */
.blog-thumb-4_3 #dt_blog_page .dt_post_item,
.blog-thumb-1_1 #dt_blog_page .dt_post_item,
.blog-thumb-16_9 #dt_blog_page .dt_post_item {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.blog-thumb-4_3 #dt_blog_page .dt_post_item .image,
.blog-thumb-1_1 #dt_blog_page .dt_post_item .image,
.blog-thumb-16_9 #dt_blog_page .dt_post_item .image {
    flex-shrink: 0;
}
.blog-thumb-4_3 #dt_blog_page .dt_post_item .inner,
.blog-thumb-1_1 #dt_blog_page .dt_post_item .inner,
.blog-thumb-16_9 #dt_blog_page .dt_post_item .inner {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.blog-thumb-4_3 #dt_blog_page .dt_post_item .inner .content,
.blog-thumb-1_1 #dt_blog_page .dt_post_item .inner .content,
.blog-thumb-16_9 #dt_blog_page .dt_post_item .inner .content {
    margin-top: auto;
}

/* Mobile: keep title readable but not huge */
@media (max-width: 767px) {
    .blog-thumb-4_3 .dt_post_item .title,
    .blog-thumb-1_1 .dt_post_item .title,
    .blog-thumb-16_9 .dt_post_item .title {
        font-size: 1.5rem;
    }
}