/* 1. Font Import (Josefin Sans from Google Fonts) */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&display=swap');

/* 2. Global Body & Background - RED EVERYWHERE */
body {
    background-color: #a84309 !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 25px;
    color: #ffffff !important;
}

/* Force red background on ALL major containers */
body *,
html,
.site-content,
.main-content,
#content,
.navigation,
.header-area,
.container,
main,
#main,
.page,
.site,
#site {
    background-color: #a84309 !important;
}

/* 3. High Contrast Text & Headings (White on red background) */
h1, h2, h3, h4, h5, h6,
p, span, strong, em, li, dt, dd, blockquote,
.site-title,
.site-tagline,
.site-header,
.container,
div,
section,
article {
    color: #ffffff !important;
}

/* 4. Link Styling (White text on red background) */
a:not(.button) {
    color: #ffffff !important;
    text-decoration: underline;
}

a:not(.button):hover {
    color: #e09867 !important;
}

/* 5. SEARCH RESULTS STYLING - WHITE TEXT ON RED BACKGROUND */

/* Force red background on all search result containers */
.items.results,
.resources.resource-list,
.item.resource,
.search-results,
.browse-results,
.item-list,
.resource-list,
ul.items,
.items-list {
    background-color: #a84309 !important;
}

/* Force white text on all search result elements */
.items.results,
.items.results *,
.items.results h1,
.items.results h2,
.items.results h3,
.items.results p,
.items.results span,
.items.results li,
.items.results div,
.resources.resource-list,
.resources.resource-list *,
.resources.resource-list li,
.resources.resource-list div,
.item.resource,
.item.resource *,
.item.resource h1,
.item.resource h2,
.item.resource h3,
.item.resource h4,
.item.resource div,
.item.resource p,
.item.resource span {
    color: #ffffff !important;
    background-color: #a84309 !important;
}

/* Search result links - white with underline */
.items.results a,
.resources.resource-list a,
.item.resource a,
.search-results a,
.browse-results a {
    color: #ffffff !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}

.items.results a:hover,
.resources.resource-list a:hover,
.item.resource a:hover,
.search-results a:hover,
.browse-results a:hover {
    color: #e09867 !important;
}

/* 6. ITEM RESOURCE PAGES - RED BACKGROUND WHITE TEXT */

/* Force red background on item show pages */
.item.show,
.resource.show,
.item-show,
.resource-show,
#item-show,
#resource-show,
.show-page,
.item-page,
.resource-page {
    background-color: #a84309 !important;
}

/* All text on item pages should be white */
.item.show *,
.resource.show *,
.item-show *,
.resource-show *,
#item-show *,
#resource-show *,
.show-page *,
.item-page *,
.resource-page * {
    color: #ffffff !important;
    background-color: #a84309 !important;
}

/* Item titles */
.item .title,
.item .title a,
.item .resource-title,
.item .resource-title a,
.resource-title,
.item-title {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: underline;
    background-color: transparent !important;
}

.item .title a:hover,
.item .resource-title a:hover {
    color: #e09867 !important;
}

/* 7. Metadata Styling (White on red) */
.metadata-label,
.property-label,
.element-label {
    color: #f7f7f7 !important;
    font-weight: bold;
    background-color: transparent !important;
}

.metadata-value,
.property-value,
.value,
.element-text {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* Metadata tables */
.metadata,
.property,
#metadata,
#properties,
.item-metadata,
.resource-metadata {
    background-color: #a84309 !important;
}

.metadata *,
.property *,
#metadata *,
#properties *,
.item-metadata *,
.resource-metadata * {
    color: #ffffff !important;
    background-color: transparent !important;
}

/* 8. Navigation - Red background white text */
.navigation,
.navigation *,
nav,
nav *,
.menu,
.menu *,
#nav,
#nav * {
    background-color: #a84309 !important;
    color: #ffffff !important;
}

.navigation li a,
.navigation a,
nav a,
.menu a {
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 600;
}

.navigation li a:hover,
.navigation a:hover,
nav a:hover,
.menu a:hover {
    color: #e09867 !important;
    text-decoration: underline;
}

/* 9. Sidebar and block content */
aside,
aside *,
.sidebar,
.sidebar *,
.block,
.block *,
.block-header,
.block-content,
.block-content ul li {
    color: #ffffff !important;
    background-color: #a84309 !important;
}

aside a,
.sidebar a,
.block-content a,
.block a {
    color: #ffffff !important;
    text-decoration: underline;
}

aside a:hover,
.sidebar a:hover,
.block-content a:hover,
.block a:hover {
    color: #e09867 !important;
}

/* 10. Forms - Input Fields and Textareas */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
    background-color: #7b3306 !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
}

input[type="text"]::placeholder,
input[type="search"]::placeholder,
input[type="email"]::placeholder,
textarea::placeholder {
    color: #cccccc !important;
}

/* Dropdown/Select Elements */
select,
select option {
    background-color: #7b3306 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}

/* 11. Button Styling */
.button, 
button, 
input[type="submit"],
.btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    padding: 8px 16px;
    border-radius: 4px;
    font-family: 'Josefin Sans', sans-serif !important;
    font-weight: 700;
}

.button:hover, 
button:hover, 
input[type="submit"]:hover,
.btn:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: #e09867 !important;
    color: #e09867 !important;
}

/* 12. Timeline Block Styling */
.block-template-timeline,
.timeline-block,
.block.timeline {
    background-color: #a84309 !important;
    padding: 20px;
}

.block-template-timeline *,
.timeline-block *,
.block.timeline * {
    color: #ffffff !important;
    background-color: transparent !important;
}

.block-template-timeline a,
.timeline-block a,
.block.timeline a {
    color: #ffffff !important;
    text-decoration: underline;
}

.block-template-timeline a:hover,
.timeline-block a:hover,
.block.timeline a:hover {
    color: #e09867 !important;
}

/* 13. Footer Styling - Red background white text */
.site-footer,
.site-footer *,
footer,
footer *,
#footer,
#footer * {
    color: #ffffff !important;
    background-color: #a84309 !important;
}

.site-footer a,
footer a,
#footer a {
    color: #ffffff !important;
    text-decoration: underline;
}

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

/* 14. Header Styling - Red background white text */
.site-header,
.site-header *,
header,
header *,
#header,
#header * {
    background-color: #a84309 !important;
    color: #ffffff !important;
}

/* 15. Custom Banner Styling */
.hero-banner {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    background-color: #a84309 !important;
}

.my-banner {
    background-image: url("https://placehold.co/1200x600/a84309/ffffff?text=Replace+This+URL"); 
    background-repeat: no-repeat;
    background-size: cover; 
    background-position: center center;
    background-color: #a84309 !important;
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* 16. RESPONSIVE IMAGE OPTIMIZATION */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

.site-content img,
.main-content img,
#content img,
.item img,
.resource img,
.media img,
article img,
.block img {
    max-width: 100%;
    height: auto !important;
    width: auto;
    object-fit: contain;
}

.item-thumbnail img,
.resource-thumbnail img,
.media-thumbnail img {
    max-width: 100%;
    height: auto !important;
    width: 100%;
    object-fit: cover;
}

.item-grid img,
.resource-grid img,
.gallery img {
    max-width: 100%;
    height: auto !important;
    object-fit: cover;
}

.item-image,
.resource-image,
.media-render,
figure,
.image-container {
    max-width: 100%;
    overflow: hidden;
    background-color: transparent !important;
}

.item-image img,
.resource-image img,
.media-render img,
figure img,
.image-container img {
    max-width: 100%;
    height: auto !important;
    width: 100%;
    object-fit: contain;
}

a img {
    max-width: 100%;
    height: auto !important;
    border: 0;
}

.block-attachments img,
.media-list img {
    max-width: 100%;
    height: auto !important;
}

/* 17. Pagination - White text on red */
.pagination,
.pagination * {
    background-color: #a84309 !important;
    color: #ffffff !important;
}

.pagination a {
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
    padding: 5px 10px;
}

.pagination a:hover {
    color: #e09867 !important;
    border-color: #e09867 !important;
}

.pagination .current {
    background-color: #7b3306 !important;
    color: #ffffff !important;
}

/* 18. Tables - White text on red */
table,
table *,
th,
td,
thead,
tbody,
tfoot {
    background-color: #a84309 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

/* 19. Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    body {
        font-size: 18px;
    }
    
    .hero-banner,
    .my-banner {
        padding: 15px 0;
        background-size: cover;
        min-height: 200px;
    }
    
    .site-content,
    .main-content,
    #content {
        padding: 15px;
        overflow-x: hidden;
    }
    
    .button, 
    button, 
    input[type="submit"] {
        padding: 12px 20px;
        font-size: 16px;
    }
    
    input[type="text"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    .navigation li {
        display: block;
        margin: 5px 0;
    }
    
    img {
        max-width: 100%;
        height: auto !important;
    }
    
    .item img,
    .resource img,
    .media img {
        width: 100%;
        height: auto !important;
        max-width: 100%;
    }
    
    .item-grid,
    .resource-grid {
        display: block;
    }
    
    .item-grid .item,
    .resource-grid .resource {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
    body {
        font-size: 16px;
    }
    
    .hero-banner,
    .my-banner {
        padding: 10px 0;
        min-height: 150px;
    }
    
    .site-content,
    .main-content,
    #content {
        padding: 10px;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    .item-thumbnail,
    .resource-thumbnail,
    .media-thumbnail {
        width: 100%;
        margin: 0 0 10px 0;
    }
}

/* 20. FINAL OVERRIDE - Ensure no white backgrounds anywhere */
* {
    background-color: inherit;
}

body, html {
    background-color: #a84309 !important;
}

/* Remove any white or light backgrounds that might slip through */
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"] {
    background-color: #a84309 !important;
}