/* 1. GLOBAL STYLES & HELPERS */
.border-custom { border: 2px solid #95bcd5; border-radius: 5px; background: #ededed; }
.textlink-custom-white, .textlink-custom-white a { color: #fff !important; }
.textlink-custom-black, .textlink-custom-black a { color: #000 !important; }
.wp-block-button__link { background-color: #fff; border-radius: 5px; }
.grey-background, .scoreboard-background { border-radius: 5px; background-color: #ededed; padding: 15px; margin: 0; }
.scoreboard-background { background-color: #95bcd5; }
.score-background { border-radius: 5px; border: solid 2px #023a5e; background-color: #fff; width:100%; height:125px; padding: 10px; }
.blue-background { border-radius: 5px; background-color: #94bcd3; padding: 15px; }
.dk-blue-background { border-radius: 5px; background-color: #023a5e; padding: 15px; }
.hide { display:none; }
.logged_in .image-upload-text { display:none; }

/* GLOBAL IMAGE FIX: Applies border-radius to EVERY image on the site */
img { 
    border-radius: 5px !important; 
}

/* THE FIX: Kills the 'Ridge' border that was flashing */
.max-width, .site-container, .site-inner { 
    border: none !important; 
    outline: none !important;
    box-shadow: none !important;
}

.overflow-container { background: #ffffff !important; }
@media (min-width: 1024px) { .overflow-container { background: #e5e5e5 !important; } }

/* 2. THE FEATURED IMAGE ENGINE */

/* Home Feed Top Post */
.blog .post:first-of-type .featured-image img, 
.archive .post:first-of-type .featured-image img {
    display: block !important;
    margin: 5px auto 15px auto !important;
    max-width: 100% !important;
    max-height: 450px !important; 
    width: auto !important; 
    object-fit: contain !important; 
    border-radius: 5px !important;
}


/* THE LOWER 6 POSTS - Newspaper Stack Fix */

@media (max-width: 767px) {
    /* 1. THE STAGE: Tighten the gap between different articles */
    .blog .post:not(:first-of-type),
    .archive .post:not(:first-of-type) {
        margin-bottom: 20px !important; /* Total distance between posts */
        padding-bottom: 0 !important;
        border-bottom: 1px solid #eee; /* Optional: adds a very faint separator line */
    }

    .blog .post:not(:first-of-type) article,
    .archive .post:not(:first-of-type) article {
        display: block !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        clear: both !important;
    }

    /* 2. THE IMAGE: Nudged for vertical centering */
    .blog .post:not(:first-of-type) .featured-image,
    .archive .post:not(:first-of-type) .featured-image {
        float: left !important;
        width: 100px !important;
        height: 130px !important;
        margin: 12px 15px 10px 0 !important; /* Top margin centers it with title */
        display: block !important;
    }

    .blog .post:not(:first-of-type) .featured-image img {
        width: 100px !important;
        height: 130px !important;
        object-fit: cover !important;
        border-radius: 5px !important;
    }

    /* 3. THE TITLE & BYLINE AREA */
    .blog .post:not(:first-of-type) .entry-header {
        float: left !important;
        width: calc(100% - 115px) !important; 
        display: block !important;
        margin: 0 !important;
    }

    .blog .post:not(:first-of-type) .entry-title {
        font-size: 18px !important; 
        line-height: 1.2 !important;
        margin: 0 0 5px 0 !important;
    }

    /* 4. THE EXCERPT: THE FIX - This stops the "wrapping" */
    .blog .post:not(:first-of-type) .entry-content,
    .archive .post:not(:first-of-type) .entry-content {
        clear: both !important; /* THE MAGIC: Forces text to start BELOW the image */
        display: block !important;
        width: 100% !important;
        padding-top: 5px !important; /* Space between top row and excerpt */
    }

    .blog .post:not(:first-of-type) .entry-content p {
        font-size: 14px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 5. Hide Clutter */
    .blog .post:not(:first-of-type) .entry-meta,
    .blog .post:not(:first-of-type) .more-link {
        display: none !important;
    }
}

/* Single Article Container Setup */
.single-post .site-inner, 
.single-post .wrap,
.single-post .site-content {
    max-width: 900px !important; 
    margin: 0 auto !important;
    background-color: #ffffff !important;
}

/* Desktop Sizing (Screens wider than 820px) */
@media (min-width: 821px) {
    .single-post .featured-image {
        position: relative !important;
        left: 50% !important;
        transform: translateX(-50%) !important; /* The Magic: Centering by force */
        
        width: 820px !important;
        max-width: 100% !important;
        display: block !important;
        margin: 0 0 20px 0 !important; /* Zero out margins so they don't fight the transform */
        float: none !important;
        background: transparent !important;
    }
    
    .single-post .featured-image img {
        display: block !important;
        margin: 0 auto !important; 
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 600px !important;
        object-fit: contain !important;
        border-radius: 5px !important;
    }
}

/* Mobile Sizing (Screens smaller than 820px) */
@media (max-width: 820px) {
    .single-post .featured-image {
        width: 100% !important;
        /* Pulls image up to close top gap, keeps 5px bottom gap */
        margin: -15px auto 5px auto !important; 
        left: 0 !important;
        transform: none !important;
        min-height: 0 !important;
        display: flex !important; /* Helps with centering non-wide images */
        justify-content: center !important;
    }
    .single-post .featured-image img {
        /* THE FIX: prevent stretching */
        width: auto !important;       /* Let it be its natural width */
        max-width: 100% !important;   /* ...but never wider than the screen */
        height: auto !important;      /* Keep aspect ratio perfect */
        max-height: 450px !important; /* Prevents portrait images from being too tall */
        object-fit: contain !important;
    }
}

/* Common Single Post Image Settings */
.single-post .featured-image {
    display: block !important;
    background-color: #fff;
}

.single-post .featured-image img {
    display: block !important;
    margin: 0 auto !important;
    border-radius: 5px !important;
}

/* --- UNIFIED CAPTION SYSTEM --- */
.featured-image + .caption, 
.wp-element-caption, 
.wp-block-image figcaption,
.wp-block-gallery figcaption,
figcaption {
    font-family: "PT Sans", sans-serif !important;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    color: black !important;
    background-color: #ededed !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; 
    text-align: left !important;   
    margin: 10px auto 25px auto !important;
    width: fit-content !important;
    max-width: 875px !important;
    box-sizing: border-box !important;
    line-height: 1.4 !important;
}

/* --- TARGETED TABLET REPAIR (Max 1149px) --- */
@media (max-width: 1149px) {
    /* 1. THE COLUMN KILLER: Force the grid to collapse */
    .content-sidebar-wrap, 
    .site-inner, 
    .wrap {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        padding: 0 !important;
        background-image: none !important; /* Kills the lines */
    }

    /* 2. THE FEED: Expand to fill the ghost sidebar space */
    #content, 
    .site-main, 
    #primary, 
    .content {
        width: 100% !important; 
        max-width: 820px !important; 
        float: none !important;
        margin: 0 auto !important;
        padding: 10px 20px !important;
        border: none !important;
    }

    /* 3. LINE REMOVAL: Targeting the specific Genesis background line containers */
    .site-inner, 
    .content-sidebar-wrap, 
    #content-sidebar-wrap {
        background: #ffffff !important; /* Paint over the line */
        border: none !important;
    }

    /* Targeted removal of vertical borders/pseudo-elements */
    .site-inner:before, .site-inner:after, 
    .content-sidebar-wrap:before, .content-sidebar-wrap:after {
        display: none !important;
        content: none !important;
    }

    /* 4. SLIDER PROTECTION: Keep the title block visible */
    .mission-slider .slide-excerpt, 
    .mission-slider .entry-header,
    .mission-slider .entry-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* 5. SIDEBAR: Force it underneath and center it */
    #sidebar-primary, 
    .sidebar, 
    .widget-area {
        float: none !important;
        width: 90% !important;
        max-width: 750px !important;
        margin: 40px auto !important;
        clear: both !important;
        display: block !important;
    }
}

/* 4. TYPOGRAPHY & MENUS */
.single-post .post-content p, .single-post .entry-content p { font-family: Georgia, serif !important; line-height: 1.6 !important; font-size: 20px !important; }
.blog .post-title, .archive .post-title { font-size: 22px !important; font-weight: bold !important; padding-left: 0 !important; }
.menu-primary { padding: 2px; border-top: 1px solid #000; border-bottom: 1px solid #000; background-color: #95bcd5; background-image: linear-gradient(#95bcd5, #ededed); }
.menu-primary ul li a { padding: 10px 15px !important; font-size: 16px !important; }

/* Ensure titles on the Article Page are large and bold */
.single-post .entry-title, 
.single-post .post-title {
    font-size: 32px !important;    /* Large headline size */
    line-height: 1.2 !important;
    font-weight: bold !important;
    margin-bottom: 15px !important;
    display: block !important;
    text-decoration: none !important;
}

/* Mobile Adjustment for Single Post Title */
@media (max-width: 767px) {
    .single-post .entry-title, 
    .single-post .post-title {
        font-size: 28px !important; /* Slightly smaller for mobile screens, but still bigger than the 20px body text */
    }
}

/* Desktop Nudge (PC ONLY) */
@media (min-width: 1150px) {
    .single-post .post-title, 
    .single-post .post-byline, 
    .single-post .entry-header {
        padding-left: 0 !important;
        margin-left: 128px !important;
        text-align: left !important;
        max-width: 875px !important;
    }
}

/* Sidebar Title Centering */
.custom_sidebar_title, #sidebar-primary h2, #sidebar-secondary h2 {
    text-align: center !important;
    text-decoration: underline !important;
    color: #000 !important;
    font-size: 20px !important;
    display: block !important;
    margin: 15px 0 10px 0 !important;
}

/* 5. CLEANUP */
.page .post-title, .page .entry-title, .page .featured-image { display: none !important; }
.wp-block-table td, .wp-block-table th { border: none; }
@media (max-width: 767px) { .hide-on-mobile { display: none; } .swap-on-mobile { display: flex !important; flex-direction: column-reverse; } }

/* Slider Fixes */
.mission-slider .excerpt, .mission-slider .slide-excerpt, .mission-slider .entry-content { display: none !important; }
.mission-slider .image-container { 
    background-size: contain !important; 
    background-repeat: no-repeat !important; 
    background-position: center !important; 
    background-color: #fff !important;
}

/* Mobile Main Menu - Targeted to Header Only */
@media (max-width: 767px){
    .site-header .menu-container {
        padding: 0px;
        border-top: 0px solid #000;
        border-bottom: 0px solid #000;
        background-color: black !important;
        background-image: none !important;
        color: white !important;
    }
    
    /* Ensures links inside the black header menu are visible */
    .site-header .menu-container a {
        color: white !important;
    }
}