/**
* Theme Name: Mexlife Child
* Description: This is a child theme of Mexlife, generated by Merlin WP.
* Author: <a href="http://themeforest.net/user/themearc">Theme Arc</a>
* Template: mexlife
* Version: 1.0
*/

/* =============================================================
   QA-03: Inner page banner — brand navy background + white text
   ============================================================= */
.page-title.p_relative {
    background-color: #163858 !important;
}

.page-title.p_relative h1,
.page-title.p_relative .bread-crumb li,
.page-title.p_relative .bread-crumb li a,
.page-title.p_relative .bread-crumb .separator {
    color: #ffffff !important;
}

/* =============================================================
   QA-04: Remove spacing gap between inner page banner and content
   ============================================================= */
.sidebar-page-container {
    padding-top: 0 !important;
}

/* =============================================================
   Hero overlay: dark gradient on left 65% for text legibility
   ============================================================= */
.elementor-element-a0ae7f {
    position: relative;
}

.elementor-element-a0ae7f::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(12, 28, 52, 0.88) 0%,
        rgba(12, 28, 52, 0.88) 45%,
        rgba(12, 28, 52, 0.40) 65%,
        rgba(12, 28, 52, 0) 80%
    );
    z-index: 1;
    pointer-events: none;
}

.elementor-element-a0ae7f > .e-con-inner,
.elementor-element-a0ae7f > .elementor-container {
    position: relative;
    z-index: 2;
}

/* Hero body text — override theme p colour to white */
.elementor-element-3f8d31 .elementor-widget-container p {
    color: #ffffff !important;
}


/* ============================================================
   BLOG ARCHIVE — 3-Column Card Grid (Glenn Stewart Insurance)
   ============================================================ */

/* Grid wrapper */
.blog-standard-content .thm-unit-test,
.archive .blog-standard-content .thm-unit-test {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 20px;
}

/* Each post card */
.blog-standard-content .thm-unit-test > div[class*="post"] {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    display: flex;
    flex-direction: column;
}
.blog-standard-content .thm-unit-test > div[class*="post"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0,0,0,0.14);
}

/* Inner card box */
.blog-standard-content .news-block-four {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blog-standard-content .news-block-four .inner-box {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Featured image */
.blog-standard-content .news-block-four .image-box {
    width: 100%;
    overflow: hidden;
    max-height: 200px;
}
.blog-standard-content .news-block-four .image-box img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.blog-standard-content .thm-unit-test > div[class*="post"]:hover .image-box img {
    transform: scale(1.04);
}

/* Placeholder for posts without featured image */
.blog-standard-content .news-block-four .inner-box:not(:has(.image-box)) .lower-content,
.blog-standard-content div[class*="post"]:not(.has-post-thumbnail) .news-block-four .inner-box .lower-content {
    border-top: 4px solid #c9a84c;
}

/* Lower content area */
.blog-standard-content .news-block-four .lower-content {
    padding: 24px 24px 28px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Date */
.blog-standard-content .news-block-four .post-date {
    display: inline-block;
    font-size: 12px;
    color: #c9a84c;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Category pills */
.blog-standard-content .news-block-four .upper-box .post-info {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.blog-standard-content .news-block-four .upper-box .post-info li a {
    background: #0d2b4e;
    color: #fff;
    font-size: 11px;
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 500;
    transition: background 0.2s;
}
.blog-standard-content .news-block-four .upper-box .post-info li a:hover {
    background: #c9a84c;
}

/* Post title */
.blog-standard-content .news-block-four h2 {
    font-size: 17px;
    line-height: 1.4;
    margin: 0 0 12px;
    font-weight: 700;
}
.blog-standard-content .news-block-four h2 a {
    color: #0d2b4e;
    text-decoration: none;
    transition: color 0.2s;
}
.blog-standard-content .news-block-four h2 a:hover {
    color: #c9a84c;
}

/* Excerpt */
.blog-standard-content .news-block-four p {
    font-size: 14px;
    color: #555;
    line-height: 1.65;
    margin: 0 0 18px;
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

/* Read More link */
.blog-standard-content .news-block-four .link {
    margin-top: auto;
}
.blog-standard-content .news-block-four .link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #c9a84c;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s, color 0.2s;
}
.blog-standard-content .news-block-four .link a:hover {
    border-bottom-color: #c9a84c;
    color: #0d2b4e;
}
.blog-standard-content .news-block-four .link a span::after {
    content: ' →';
}

/* Blog page hero banner (reuse inner-page style) */
.blog .page-header-section,
.archive .page-header-section {
    background: linear-gradient(135deg, #0d2b4e 60%, #1a4a7a 100%);
    padding: 80px 0;
    text-align: center;
}
.blog .page-header-section h1,
.archive .page-header-section h1 {
    color: #fff;
    font-size: 42px;
    font-weight: 700;
    margin: 0;
}

/* Pagination */
.blog-standard-content .pagination,
.blog-standard-content .nav-links {
    text-align: center;
    padding: 40px 0 60px;
    grid-column: 1 / -1;
}
.blog-standard-content .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 50%;
    background: #f4f4f4;
    color: #0d2b4e;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}
.blog-standard-content .page-numbers.current,
.blog-standard-content .page-numbers:hover {
    background: #0d2b4e;
    color: #fff;
}

/* Responsive: 2 cols on tablet, 1 on mobile */
@media (max-width: 1024px) {
    .blog-standard-content .thm-unit-test,
    .archive .blog-standard-content .thm-unit-test {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 640px) {
    .blog-standard-content .thm-unit-test,
    .archive .blog-standard-content .thm-unit-test {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        padding: 40px 16px !important;
    }
    .blog-standard-content .news-block-four h2 {
        font-size: 15px;
    }
}