/* ==========================================================================
   1. CORE GOOGLE FONTS PIPELINE (FIXED URL)
   ========================================================================== */
@import url('https://googleapis.com');

/* ==========================================================================
   2. TEXT & CONTENT SIZING (ISOLATED TO ARTICLES & BUILDER ADDONS)
   ========================================================================== */
.com-content-article p,
.com-content-article li,
.item-content p,
.item-content li,
.sppb-addon-text,
.sppb-addon-text-block,
div[class*="sppb-addon-text"] p {
    font-family: 'Inter', sans-serif !important;
    font-size: 1.15rem !important;
    line-height: 1.7 !important;
    color: #333333 !important;
}

h1, h2, h3, h4,
.page-header h1,
.page-header h2,
.sppb-addon-title,
.sppb-addon-heading,
.com-content-category-blog__item h2 a {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   3. DESKTOP TITLE SCALE FIXES (TAMES THE "HUGE" HEADINGS)
   ========================================================================== */
@media (min-width: 992px) {
    h1, .page-header h1, .com-content-article h1, .com-content-article .page-header h1 {
        font-size: 2.0rem !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
    .com-content-category-blog__item h2, 
    .com-content-category-blog__item h2 a, 
    .sppb-addon-title {
        font-size: 1.45rem !important;
        line-height: 1.3 !important;
        color: #111111 !important;
    }
}

/* ==========================================================================
  /* ==========================================================================
   4. INTERNAL PAGES - NEWS & EVENTS 2-COLUMN GRID (COMPLETE WITH HOVER & FIXED PADDING)
   ========================================================================== */
.blog-items {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
}

/* 2. Format each individual event and news card container wrapper cleanly with a visible base tint */
.com-content-category-blog__item {
    display: flex !important;
    flex-direction: column !important;
    background: #f1f5f9 !important; /* Matches the homepage light-gray base color */
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important; /* Matches the homepage rounded corners */
    padding: 20px !important;      /* Expanded internal card padding to stop edge-stretching */
    margin-bottom: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Premium Hover Transformation: Glides upward, turns orange, and creates a glow shadow */
.com-content-category-blog__item:hover {
    transform: translateY(-5px) !important;
    background-color: #ef9e2b !important; /* Seamlessly matches your #ef9e2b brand orange */
    border-color: #d98216 !important;
    box-shadow: 0 12px 20px -3px rgba(239, 158, 43, 0.3) !important;
}

/* Crucial Inner-Page Color Inversion: Forces all typography elements to turn white on hover */
.com-content-category-blog__item:hover h2,
.com-content-category-blog__item:hover h2 a,
.com-content-category-blog__item:hover .article-info,
.com-content-category-blog__item:hover .article-info dd,
.com-content-category-blog__item:hover .article-info span,
.com-content-category-blog__item:hover a {
    color: #ffffff !important;
}

/* Global Hyperlink Clean-Up: Permanently removes the underlines from your title links */
.com-content-category-blog__item h2 a,
.com-content-category-blog__item h2 a:hover {
    text-decoration: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Wipes out text leaks, double images, and captions on your News/Events listings */
.com-content-category-blog__item .item-content img,
.com-content-category-blog__item .item-content [class*="image"],
.com-content-category-blog__item .item-content [class*="sppagebuilder"] img,
.com-content-category-blog__item .item-content figcaption,
.com-content-category-blog__item .item-content .sppagebuilder-addon-image-caption,
.com-content-category-blog__item .item-content span.image-caption,
.com-content-category-blog__item .item-content p,
.com-content-category-blog__item .item-content div:not(.page-header) {
    display: none !important;
    visibility: hidden !important;
}

.blog .items-more,
.blog div[class*="items-more"] {
    display: none !important;
    visibility: hidden !important;
}

.com-content-category-blog + .pagination {
    grid-column: span 2 !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 20px !important;
}

/* ==========================================================================
   5. HOMEPAGE NATIVE NEWSFLASH 2-COLUMN GRID OVERRIDE (IMAGE UN-HIDER)
   ========================================================================== */

/* Target the Newsflash container and force a clean 2-column grid layout */
.mod-articlesnews, 
div.mod-articlesnews,
.mod-articlesnews__item {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
    margin: 30px 0 !important;
}

/* Format each individual Newsflash block into a clean card with a visible base tint */
.mod-articlesnews > div,
div.mod-articlesnews > div,
.mod-articlesnews__item > div {
    display: flex !important;
    flex-direction: column !important;
    background: #f1f5f9 !important; /* Slightly darker, clear light-gray base color */
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 20px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease !important;
}

/* Premium Hover Transformation: Turns the card orange and lifts smoothly without ticking */
.mod-articlesnews > div:hover,
div.mod-articlesnews > div:hover,
.mod-articlesnews__item > div:hover {
    transform: translateY(-5px) !important; /* Smoothly glides upward */
    background-color: #ef9e2b !important; /* Turns beautiful accent orange */
    border-color: #d98216 !important;     /* Darkens border slightly to match */
    box-shadow: 0 12px 20px -3px rgba(239, 158, 43, 0.3) !important; /* Dynamic orange shadow glow */
}

/* Crucial Polish: Changes text link colors to white on hover so they stay readable against the orange background */
.mod-articlesnews > div:hover h4,
div.mod-articlesnews > div:hover h4 a,
.mod-articlesnews > div:hover a,
.mod-articlesnews > div:hover .readmore {
    color: #ffffff !important;
}

/* BYPASS SECTION 4: Explicitly force the homepage Newsflash images to display */
.mod-articlesnews img,
div.mod-articlesnews img,
.mod-articlesnews__item img,
.mod-articlesnews [class*="-img"] img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    height: 240px !important;
    object-fit: cover !important;
    margin-bottom: 15px !important;
}

/* Tame the Newsflash title font sizing, line spacing, and header styles */
.mod-articlesnews h4,
div.mod-articlesnews h4,
.mod-articlesnews a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 1.3rem !important; /* Smaller, clean, professional scale */
    font-weight: 600 !important;
    color: #111111 !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    margin-top: 5px !important;
    margin-bottom: 10px !important;
}

/* Style the Readmore links cleanly at the bottom of each block card */
.mod-articlesnews .readmore,
.mod-articlesnews a.readmore {
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-top: auto !important;
    color: #0d6efd !important;
    display: block !important;
}


/* ==========================================================================
   6. MOBILE RESPONSIVE ADAPTIVE BALANCING
   ========================================================================== */
@media (max-width: 768px) {
    .blog-items, .mod-articlesnews, div.mod-articlesnews {
        grid-template-columns: 1fr !important;
    }
    body, p, li, .sppb-addon-text {
        font-size: 1rem !important;
    }
    h1, .page-header h1 {
        font-size: 1.6rem !important;
    }
    h2, .com-content-category-blog__item h2, .com-content-category-blog__item h2 a, .sppb-addon-title, .mod-articlesnews h4 {
        font-size: 1.22rem !important;
    }
}

/* ==========================================================================
   7. FINAL HEADER COMPRESSION, LOGO CORRECTION & BOUNDARY PADDING
   ========================================================================== */

@media (min-width: 992px) {
    /* 1. Target the main header and apply symmetry parameters */
    header.header {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        /* Matches your site's standard side padding margins */
        padding-left: 40px !important; 
        padding-right: 40px !important; 
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        height: auto !important; /* Forces the row height to collapse naturally */
    }

    /* 2. Lock the logo wrapper strictly to its true measurements (Stops Stretching) */
    header.header .navbar-brand,
    header.header div[class*="brand"],
    header.header a.brand {
        margin-left: 0 !important;
        padding-left: 0 !important;
        display: flex !important;
        align-items: center !important;
        flex: 0 0 300px !important; /* Locks width track to match your logo */
        max-width: 300px !important;
        height: 82px !important; /* Locks height track to match your logo */
    }

    /* Forces the raw graphic image to render at its accurate proportions */
    header.header .navbar-brand img,
    header.header [class*="brand"] img {
        width: 300px !important;
        height: 82px !important;
        max-width: 100% !important;
        object-fit: contain !important; /* Prevents visual distortion */
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Pull the menu container wrapper straight up to the top right side */
    header.header .header-settings,
    header.header div[class*="navbar"],
    header.header .mod-menu {
        margin-left: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* 4. Force individual menu links to display horizontally */
    header.header ul.mod-menu {
        display: flex !important;
        flex-direction: row !important;
        gap: 25px !important; 
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 5. Surgically overrides Cassiopeia's default background color to your new deep navy tint */
    header.header, 
    .header {
        background-color: #1c324a !important;
        background: #1c324a !important;
    }

}

/* ==========================================================================
   8. IN-ARTICLE IMAGE CAPTION CORRECTIONS
   ========================================================================== */

/* Targets native Joomla figcaptions and SP Page Builder's specific caption wrappers inside full articles */
figcaption,
.image-caption,
span.image-caption,
.sppagebuilder-addon-image-caption,
.sppb-addon-image-caption,
.img_caption p,
.img_caption .caption {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;      /* Shrunk down cleanly (smaller than your main article text) */
    line-height: 1.4 !important;
    color: #666666 !important;         /* Professional muted charcoal gray color */
    font-style: italic !important;     /* Classical elegant italic format style */
    text-align: center !important;     /* Centers the text right underneath the graphic image */
    display: block !important;
    margin-top: 8px !important;
    margin-bottom: 15px !important;
}

/* ==========================================================================
   9. SPECIFIC SP PAGE BUILDER H6 IMAGE CAPTION CORRECTION
   ========================================================================== */

/* Targets BOTH h4 and h6 tags acting as image captions inside your article body rows */
h6.sppb-addon-title,
h4.sppb-addon-title,
.sppb-addon-single-image h6.sppb-addon-title,
.sppb-addon-single-image h4.sppb-addon-title,
div[class*="sppb-addon"] h6.sppb-addon-title,
div[class*="sppb-addon"] h4.sppb-addon-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 0.9rem !important;       /* Drastically shrinks both headings down below reading scale */
    font-weight: 400 !important;        /* Wipes out the heavy bold title weight completely */
    line-height: 1.4 !important;
    color: #666666 !important;          /* Premium, uniform muted charcoal gray color */
    font-style: italic !important;      /* Changes both headers into a classic caption italic look */
    text-align: center !important;      /* Centers the text right underneath your secondary article image */
    margin-top: 8px !important;
    margin-bottom: 25px !important;
}