/* --- CORE PERFORMANCE --- */

/* 1. Prevent Layout Shift (CLS) and optimize image rendering */
img {
    max-width: 100%;
    height: auto;
    display: block;
    content-visibility: auto; /* Browser only renders when image is near viewport */
}

/* 2. Container containment for faster browser calculations */
.tcw-container, 
.ast-container, 
.site-content {
    contain: layout style;
}

/* 3. Ensure text is visible immediately while fonts load */
body, h1, h2, h3, h4, h5, h6 {
    font-display: swap !important;
}

/* ============================================================
   1. BLOG GRID (3-Columns)
   ============================================================ */
.page-id-729 .uagb-post-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
}

.page-id-729 .uagb-post__author, 
.page-id-729 .uagb-post__comment-count {
    display: none !important;
}

.page-id-729 .uagb-post__cta {
    background-color: #FAC775 !important;
    color: #0C3B5E !important;
    padding: 10px 20px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

.page-id-729 .uagb-post__title a {
    color: #0C3B5E !important;
    text-decoration: none !important;
    font-size: 20px !important;
}

@media (max-width: 921px) {
    .page-id-729 .uagb-post-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   2. SINGLE ARTICLE PAGES
   ============================================================ */
.single-post #primary {
    max-width: 800px !important;
    margin: 0 auto !important;
    float: none !important;
}

.single-post .ast-terms-link, 
.single-post .read-time,
.single-post .author-name,
.single-post .comments-count,
.single-post .ast-single-post-order .refer-reason-meta,
.ast-author-box {
    display: none !important;
}

.single-post .entry-title {
    color: #0C3B5E !important;
    font-size: clamp(30px, 5vw, 40px) !important;
    font-weight: 800 !important;
    text-align: center;
    margin-bottom: 20px !important;
    line-height: 1.2;
}

.single-post .ast-single-post-order .entry-meta {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    color: #FAC775 !important;
    text-align: center;
}

.single-post .post-thumb-img-content img {
    border-radius: 12px;
    margin: 0 auto;
    display: block;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.single-post .entry-content p {
    font-size: 18px !important;
    line-height: 1.8 !important;
    color: #1C1C1E !important;
    margin-bottom: 25px;
}

/* ============================================================
   3. ABOUT & CONTACT PAGES
   ============================================================ */
.page-template-default.page .entry-header {
    text-align: center;
    margin-bottom: 40px;
}

.page-template-default.page .entry-title {
    color: #0C3B5E !important;
    font-size: 42px !important;
    font-weight: 800;
}

.page-template-default.page .entry-content p {
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    margin-bottom: 25px;
}

.page-template-default.page .entry-content ul li {
    font-size: 18px;
    margin-bottom: 10px;
    list-style: none;
    position: relative;
}

.page-template-default.page .entry-content ul li::before {
    content: "✔";
    color: #FAC775;
    font-weight: bold;
    margin-right: 10px;
}

/* ============================================================
   4. JETPACK CONTACT FORM
   ============================================================ */
.wp-block-jetpack-contact-form input, 
.wp-block-jetpack-contact-form textarea {
    border: 1px solid #d1d1d1 !important;
    border-radius: 4px !important;
    padding: 12px !important;
    margin-bottom: 15px !important;
}

.wp-block-jetpack-contact-form button.wp-block-button__link {
    background-color: #FAC775 !important;
    color: #0C3B5E !important;
    font-weight: bold !important;
    border: none !important;
    padding: 12px 30px !important;
    cursor: pointer;
}

/* ============================================================
   5. UTILITY CLASSES (Grid, Lead, Disclosure)
   ============================================================ */
.tcw-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

@media (max-width: 768px) {
    .tcw-grid-2 { grid-template-columns: 1fr; }
}

.tcw-lead {
    font-size: 22px;
    color: #0C3B5E;
    font-weight: 500;
    margin-bottom: 30px;
}

.disclosure-box {
    background-color: #FFF3CD !important;
    border-left: 5px solid #FAC775;
    padding: 15px 20px !important;
    font-size: 14px !important;
    color: #664d03 !important;
    margin-bottom: 30px;
    border-radius: 4px;
}

/* --- FOOTER STYLING --- */

/* This forces the background color on all footer rows */
.site-footer .ast-builder-footer-grid-columns, 
.site-footer .site-footer-primary-section-wrapper, 
.site-footer .site-footer-below-section-wrapper {
    background-color: #0C3B5E !important;
}

.site-footer {
    background-color: #0C3B5E !important;
    padding: 20px 0 !important;
}

/* Make the footer menu links Gold and readable */
.site-footer a, 
.footer-navigation ul li a {
    color: #FAC775 !important; 
    text-decoration: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    margin: 0 12px !important;
}

.site-footer a:hover {
    color: #ffffff !important;
}

/* Center and style the copyright text */
.ast-footer-copyright, 
.ast-footer-copyright *,
.site-footer .ast-footer-site-title {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 13px !important;
}

/* Hide the Astra theme credit if it's showing in white/gold */
.ast-footer-copyright a[href*="wpastra"] {
    display: none !important;
}
/* Force Footer Rows to be Full Width */
.site-footer .ast-container, 
.site-footer .ast-builder-grid-row-container-inner {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 !important;
}

.site-footer .ast-builder-grid-row {
    max-width: 100% !important;
    width: 100% !important;
}


/* --- ARTICLE TEMPLATE STYLING --- */

/* Lead Text - Makes the intro look like a magazine */
.tcw-lead {
    font-size: 22px !important;
    line-height: 1.6 !important;
    color: #0C3B5E !important; /* Navy */
    font-weight: 500;
    margin-bottom: 30px;
    border-left: 4px solid #FAC775; /* Gold accent line */
    padding-left: 20px;
}

/* Key Takeaways Box */
.tcw-box {
    background-color: #f4f7f9 !important; /* Soft grey-blue background */
    border: 1px solid #0C3B5E;
    border-left: 10px solid #0C3B5E; /* Thick Navy border */
    padding: 25px !important;
    margin: 40px 0 !important;
    border-radius: 0 8px 8px 0;
}

.tcw-box strong {
    color: #0C3B5E;
    font-size: 20px;
    display: block;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tcw-box ul {
    margin: 0 !important;
    padding-left: 20px !important;
}

.tcw-box ul li {
    font-size: 17px !important;
    color: #333 !important;
    margin-bottom: 10px !important;
    list-style-type: square !important;
}

/* Style the H2 headers inside articles */
.entry-content h2 {
    color: #0C3B5E !important;
    font-size: 32px !important;
    font-weight: 700;
    margin-top: 50px !important;
    margin-bottom: 20px !important;
}
/* Hide Date and Comments in the Blog Grid */
.uagb-post__meta {
    display: none !important;
}

/* Fix spacing for the excerpt so it doesn't show weird code */
.uagb-post__text {
    font-size: 15px !important;
    line-height: 1.5 !important;
    color: #666 !important;
    margin-bottom: 15px !important;
}
/* Fix the stacked Logo and Menu */
.site-branding {
    max-width: 300px !important; /* Gives the site title room to stay horizontal */
    width: auto !important;
}

.main-header-bar-navigation {
    flex: 1 !important; /* Tells the menu to take up the remaining space */
    justify-content: flex-end !important;
}

/* Squeeze the menu items even more to ensure they fit */
.main-navigation .main-header-menu > .menu-item > a {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important; /* Prevents text from wrapping */
}

/* Hide that "Home" title sitting above your hero section */
.home .entry-title {
    display: none !important;
}