/* ==========================================================================
   1. Core Layout Styling (Original Design Framework)
   ========================================================================== */
body { 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
    line-height: 1.7; 
    color: #333; 
    max-width: 100%; 
    margin: 0 auto; 
    padding: 0px; 
    overflow-x: hidden; 
}

/* Fixed post-card constraints to prevent expansion blowout */
.post-card { 
    display: flex; 
    gap: 20px; 
    margin-bottom: 30px; 
    border-bottom: 1px solid #eee; 
    padding-bottom: 20px; 
    width: 100%;
    box-sizing: border-box;
}

/* Unified post-card image rule: explicit constraints */
.post-card img { 
    width: 350px;        /* Set baseline default footprint width */
    max-width: 100%;    /* Prevent it from surpassing screen on smaller sizes */
    height: 220px;      /* Set standard unified height */
    object-fit: cover;  /* Crop cleanly without horizontal or vertical tearing */
    border-radius: 6px; 
    flex-shrink: 0;     /* Force layout framework to respect image dimensions */
}

/* Enforce internal word wrapping boundaries on post text container */
.post-card-content {
    flex: 1;
    min-width: 0;        /* CRITICAL: Safely stops flexbox from breaking bounds with text strings */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.featured-hero { width: 100%; height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 20px; }
.badge { background: #0073aa; color: #fff; padding: 3px 8px; border-radius: 3px; font-size: 12px; text-decoration: none; margin-right: 5px; }
.cta-btn { display: inline-block; background: #ff5a5f; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px; font-weight: bold; margin: 15px 0; }

/* GLOBAL FLOATING FIXES (Moved out of media query so it works on Desktop!) */
.entry-content h3 {
    display: block !important;
    overflow: visible !important;
    clear: none !important;
}

.wp-caption img,
.entry-content .wp-caption img,
img.size-full,
h3 img,h2 img  { 
    display: inline-block !important; /* Allows text to wrap naturally around the image framework */
    float: left !important;            /* Forces image alignment to the left side */
    margin-right: 15px !important;    /* Clean spacing cushion on the right */
    margin-bottom: 10px !important;   /* Clean spacing cushion underneath */
    padding: 10px !important;         /* Generates balanced spacing around the asset */
    max-width: 100% !important;        /* Keeps the width from breaking mobile bounds */
    height: auto !important;          /* Maintains aspect ratio consistency during scaling */
    border-radius: 6px !important; 
    box-sizing: border-box !important;
}

/* ==========================================================================
   2. Responsive Top Banner & Menu CSS Rules
   ========================================================================== */
#top-bar-wrap {
    background: #222222;
    color: #ffffff;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
#top-bar {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
#top-bar-content {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.top-bar-menu {
    list-style: none;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    padding: 8px 20px;
    gap: 15px;
}
.top-bar-menu li {
    display: inline-block;
}
.top-bar-menu a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}
.top-bar-menu a:hover {
    color: #ff5a5f;
}
.top-bar-menu .highlite a {
    color: #ff5a5f;
    font-weight: bold;
}
.top-bar-menu .highlitenoshade a {
    color: #555555;
    pointer-events: none;
}

/* ==========================================================================
   3. Responsive Layout Structural Setup
   ========================================================================== */
#site-header { 
    background: #b22222 !important;
    border-bottom: 2px solid rgba(0,0,0,0.1); 
    padding: 10px 20px; 
    width: 100%; 
    box-sizing: border-box;
    position: relative;
}
#site-header-inner { 
    display: flex; 
    width: 100%; 
    max-width: 1400px; 
    margin: 0 auto;
    justify-content: space-between; 
    align-items: center; 
}
.site-branding { display: flex; align-items: center; }
.wpex-hidden { display: none; }

/* Archive layout core structural rules */
main, .archive-container { 
    max-width: 1400px; 
    margin: 0 auto; 
    padding: 20px; 
    box-sizing: border-box;
    width: 100%;
}

.content-layout-row {
    display: flex;
    gap: 30px;
    width: 100%;
    box-sizing: border-box;
    align-items: flex-start;
}

.main-feed-column {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important; /* This is the most crucial property for flexbox children */
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}
.site-sidebar {
    width: 300px;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* ==========================================================================
   4. Desktop Navigation Rules & Hover Interactions
   ========================================================================== */
.main-navigation-ul { list-style: none; display: flex; margin: 0; padding: 0; align-items: center; }
.main-navigation-ul li { margin-left: 5px; }

.main-navigation-ul a { 
    color: #ffffff; 
    text-decoration: none; 
    font-size: 15px; 
    font-weight: 500; 
    padding: 10px 15px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation-ul a:hover { 
    background-color: #801818 !important; 
    color: #fffdfd;
}

/* Fixed: Desktop Current Menu Item highlighting rules */
.main-navigation-ul li.current-menu-item > a,
.main-navigation-ul li.current_page_item > a,
.main-navigation-ul li.current-menu-item a .link-inner,
.main-navigation-ul li.current_page_item a .link-inner {
    background-color: #333333 !important;
    color: #ffffff !important;
}

.main-navigation-ul li.current-menu-item > a:hover,
.main-navigation-ul li.current_page_item > a:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

.main-navigation-ul a .link-inner {
    display: block;
    width: 100%; 
    padding: 0;
    box-sizing: border-box;
    border-radius: 0;
}

.search-toggle-li svg { width: 16px; height: 16px; fill: #ffffff; vertical-align: middle; display: inline-block; }

/* ==========================================================================
   5. Hidden Mobile Mechanics Structural Setup
   ========================================================================== */
.mobile-menu-toggle { display: none; cursor: pointer; flex-direction: column; gap: 5px; z-index: 1001; }
.mobile-menu-toggle span { width: 25px; height: 3px; background-color: #ffffff; border-radius: 2px; transition: 0.3s; }
#menu-checkbox { display: none; }

/* ==========================================================================
   6. Responsive Breakpoint Layout: Screen Limits under 960px wide
   ========================================================================== */
@media screen and (max-width: 960px) {
    #top-bar-wrap {
        display: none !important;
    }

    .mobile-menu-toggle { display: flex; }
    
    /* Responsive layout adjustment to handle rows dropping vertically */
    .content-layout-row {
        flex-direction: column;
        gap: 20px;
    }
    
    .site-sidebar {
        width: 100%;
    }
    
    /* Structural optimization for post elements on mobile viewport width */
    .post-card {
        flex-direction: column; /* Stack article image above content text blocks */
        gap: 15px;
    }
    
    .post-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 9;
    }
    
    /* Forces all variations of the main article containers to fit perfectly */
    .main-article-column, 
    #main-article-column,
    .entry-content,
    main, 
    .site-content { 
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        float: none !important;
        margin: 0 auto !important;
        padding: 12px !important;
        box-sizing: border-box !important;
        display: block !important;
        clear: both !important;
    }
    
    /* TARGET THE WP CAPTION CONTAINERS */
    .entry-content .wp-caption,
    .main-article-column .wp-caption,
    .wp-caption.alignleft,
    .wp-caption.alignright {
        display: block !important;
        width: 50% !important;
        max-width: 50% !important;
        min-width: 50% !important;
        height: auto !important;
        box-sizing: border-box !important;
        margin-bottom: 15px !important;
        font-size: 11px !important;
        line-height: 1.3 !important;
        text-align: center !important;
    }

    /* Maintain true alternate alignment layouts on mobile screens */
    .wp-caption.alignleft {
        float: left !important;
        margin-right: 15px !important;
        margin-left: 0 !important;
    }
    .wp-caption.alignright {
        float: right !important;
        margin-left: 15px !important;
        margin-right: 0 !important;
    }
    
    /* FORCE the images locked inside caption blocks to match fluid scale rules */
    .wp-caption img,
    .entry-content .wp-caption img,
    img.size-full { 
        display: block !important;
        float: none !important;
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 100% !important;
        height: auto !important; 
        aspect-ratio: auto !important;
        margin: 0 auto 4px auto !important;
        border-radius: 6px !important; 
        box-sizing: border-box !important;
    }

    #site-navigation-wrap {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #b22222;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        z-index: 1000;
        box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    }

    .main-navigation-ul { flex-direction: column; width: 100%; padding: 10px 0; align-items: stretch; }
    .main-navigation-ul li { margin: 0; width: 100%; }
    
    .main-navigation-ul a { 
        display: block !important; 
        padding: 0;
        width: 100%;
        color: #ffffff; 
        text-decoration: none; 
        font-size: 15px; 
        font-weight: 500;
        border-bottom: 1px solid rgba(255,255,255,0.05);
    }

    .main-navigation-ul a:hover .link-inner {
        background-color: #801818 !important;
        color: #ffffff !important;
    }
    
    .main-navigation-ul li.current-menu-item > a,
    .main-navigation-ul li.current_page_item > a,
    .main-navigation-ul li.current-menu-item a .link-inner,
    .main-navigation-ul li.current_page_item a .link-inner {
        background-color: #333333 !important;
        color: #ffffff !important;
    }
    
    .main-navigation-ul a .link-inner {
        display: block;
        width: 100%; 
        padding: 0px 25px;
        box-sizing: border-box;
        border-radius: 0;
    }

    /* Burger Trigger Toggle Mechanism via Pure CSS Checked States */
    #menu-checkbox:checked ~ #site-header-inner #site-navigation-wrap { max-height: 500px; }
    
    /* Burger Icon State Transformations */
    #menu-checkbox:checked ~ #site-header-inner .mobile-menu-toggle span:nth-child(1) { transform: rotate(-45deg) translate(-5px, 6px); }
    #menu-checkbox:checked ~ #site-header-inner .mobile-menu-toggle span:nth-child(2) { opacity: 0; }
    #menu-checkbox:checked ~ #site-header-inner .mobile-menu-toggle span:nth-child(3) { transform: rotate(45deg) translate(-5px, -6px); }
}

/* ==========================================================================
   7. Sidebar Element Layout Framework
   ========================================================================== */
.sidebar-widget {
    margin-bottom: 30px;
    box-sizing: border-box;
}

.sidebar-widget.adsense-widget {
    background: #fafafa;
    border: 1px dashed #ddd;
    padding: 15px;
    text-align: center;
}

.sidebar-widget .adsense-label {
    display: block;
    color: #bbb;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.sidebar-widget .adsense-render-frame {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-widget.resource-links-widget {
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.sidebar-widget.resource-links-widget h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 15px 0;
    border-left: 4px solid #b22222;
    padding-left: 10px;
}

.sidebar-widget.resource-links-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 2;
}

.sidebar-widget.resource-links-widget ul a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.sidebar-widget.resource-links-widget ul a:hover {
    color: #b22222;
}

/* ==========================================================================
   Archive Specific Layout Details & Pagination (v2 Updates)
   ========================================================================== */
.archive-header {
    margin-bottom: 30px;
}
.archive-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 5px;
    color: #111;
}
.archive-desc {
    color: #777;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 0;
}

/* Post Card Badge details */
.post-card-content .badge {
    display: inline-block;
    background: #f4f4f4;
    color: #b22222;
    padding: 3px 8px;
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 3px;
}
.post-card-content h3 {
    margin: 5px 0;
    font-size: 20px;
    line-height: 1.4;
}
.post-card-content h3 a {
    color: #111;
    text-decoration: none;
    font-weight: bold;
    transition: color 0.2s ease;
}
.post-card-content h3 a:hover {
    color: #b22222;
}
.post-card-content .post-date {
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
}
.post-card-content .post-excerpt {
    color: #555;
    font-size: 14px;
    margin: 0;
    line-height: 1.6;
}
.post-card-content .no-preview {
    color: #aaa;
    font-style: italic;
}

/* ==========================================================================
   Entry Content Overflow Guard
   ========================================================================== */
.entry-content {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.entry-content img,
.entry-content video,
.entry-content embed,
.entry-content object {
    max-width: 100% !important;
    height: auto !important;
}

.entry-content iframe {
    max-width: 100%;
}

.video-container iframe,
.map-container iframe {
    width: 100% !important;
    max-width: 100% !important;
}

.entry-content table {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content pre,
.entry-content code {
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
    overflow-x: auto;
}

.entry-content a {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Modern Pagination Framework */
.custom-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 40px 0 20px 0;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}
.custom-pagination a,
.custom-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    background: #f7f7f7;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-sizing: border-box;
}
.custom-pagination a:hover {
    background: #b22222;
    color: #fff;
    border-color: #b22222;
}
.custom-pagination .active-page {
    background: #b22222;
    color: #fff;
    border-color: #b22222;
    cursor: default;
}
.custom-pagination .disabled-nav {
    color: #ccc;
    background: #fafafa;
    border-color: #eaeaea;
    cursor: not-allowed;
    pointer-events: none;
}
.custom-pagination .pagination-dots {
    color: #999;
    background: transparent;
    border: none;
    min-width: 24px;
    padding: 0;
    cursor: default;
}

/* ==========================================================================
   Post Meta Tables (Nutshell / Contact tabs) - Responsive Fix
   ========================================================================== */
.meta-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}
.meta-table tr {
    border-bottom: 1px solid #eee;
}
.meta-table tr:last-child {
    border-bottom: none;
}
.meta-table td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.meta-table td.label-cell {
    width: 30%;
    font-weight: bold;
    white-space: nowrap;
}
.meta-table td.value-cell {
    width: 70%;
}

@media screen and (max-width: 600px) {
    .meta-table tr {
        display: block;
        padding-bottom: 6px;
    }
    .meta-table td.label-cell,
    .meta-table td.value-cell {
        display: block;
        width: 100%;
        white-space: normal;
        padding: 4px 10px;
    }
    .meta-table td.label-cell {
        padding-top: 14px;
        padding-bottom: 2px;
    }
}

/* Site Footer Layout Styles */
.site-footer {
    background: #333333;
    color: #999999;
    margin-top: 60px;
    padding: 30px 20px;
    border-top: 1px solid #eeeeee;
    text-align: center;
    font-size: 14px;
}

.site-footer .footer-container {
    max-width: 1200px;
    margin: 0 auto;
}

.site-footer .footer-nav {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

.site-footer .footer-nav a {
    color: #cccccc;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

.site-footer .footer-nav a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.site-footer .footer-copyright {
    margin: 10px 0 0 0;
    color: #777777;
}

/* Tab Container */
.new-tabs-container { display: flex; flex-wrap: wrap; margin-top: 20px; }
.new-tabs-container input { display: none; }
.new-tabs-container label {
    padding: 10px 20px; cursor: pointer; background: #eee;
    margin-right: 5px; border-radius: 5px 5px 0 0; font-weight: bold;color:red;
}
.new-tabs-container label:hover { background: #ddd; }

/* Hide content by default */
.tab-content { display: none; width: 100%; padding: 20px; background: white; border: 1px solid #ddd; }

/* Show content when radio is checked */
#tab1-radio:checked ~ #content1,
#tab2-radio:checked ~ #content2,
#tab3-radio:checked ~ #content3 { display: block; }

/* Active label styling */
#tab1-radio:checked ~ label[for="tab1-radio"],
#tab2-radio:checked ~ label[for="tab2-radio"],
#tab3-radio:checked ~ label[for="tab3-radio"] { background: white; border: 1px solid #ddd; border-bottom: none; color:red;}
.showregular{ width:728px;margin:0 auto;margin-bottom:25px; }
.showsmaller{display: none;}
@media only screen and (max-width: 360px), only screen and (max-device-width: 360px) {
        .showregular{display: none;}
        .showsmaller{display: inline; width:300px;margin:0 auto;margin-bottom:25px; }
    }
    
/* Container Setup */
.top-bar-menu { list-style: none; display: flex; gap: 20px; }
.has-dropdown { position: relative; }

/* Dropdown Hidden by Default */
.dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #333;
    min-width: 200px;
    z-index: 999;
}

/* Desktop Hover */
.has-dropdown:hover .dropdown { display: block; }

/* Mobile Handling */
.mobile-toggle { display: none; cursor: pointer; color: white; padding: 10px; }
.hidden-checkbox { display: none; }

@media screen and (max-width: 960px) {
    .mobile-toggle { display: block; text-align: center; }
    .top-bar-menu { 
        display: none; /* Hidden until checkbox is checked */
        flex-direction: column;
        width: 100%;
    }
    #top-bar-checkbox:checked ~ .top-bar-menu { display: flex; }
    
    .dropdown {
        position: static; /* Dropdown stays in flow on mobile */
        display: block;
        background: #444;
        padding-left: 20px;
    }
}