/* 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 */
body {
    /* Set the requested solid background color (Reddish Brown) */
    background-color: #a84309; 
    
    /* Apply the Josefin Sans font family */
    font-family: 'Josefin Sans', sans-serif !important;
    /* Set base font size */
    font-size: 25px;
    /* Default text color set to white for maximum contrast/readability */
    color: #ffffff;
}

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

/* 4. Link Styling (Light text on dark background - for areas with #a84309 background) */
a:not(.button) {
    color: #ffffff;
    text-decoration: underline;
}

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

/* 5. Omeka-Specific Content (Item Names, Metadata, Sidebar) */

/* Item List elements (titles) - WHITE on dark background by default */
.item .title a,
.item .resource-title a {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: underline;
}

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

/* Metadata Labels (e.g., "Creator", "Date") */
.metadata-label,
.property-label {
    color: #f7f7f7 !important;
    font-weight: bold;
}

/* Metadata Values (the actual item data) */
.metadata-value,
.property-value,
.value {
    color: #ffffff !important;
}

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

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

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

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

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

/* Dropdown/Select Elements (Faceted Browse) */
select,
select option {
    background-color: #ffffff !important;
    color: #a84309 !important;
    border: 1px solid #a84309;
}

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

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

/* 6. High Contrast Zone (White Background, Dark Text) */

/* Apply white background to main content containers and navigation */
.site-content,
.main-content,
#content,
.navigation,
.header-area {
    background-color: #ffffff !important;
}

/* Ensure text elements inside white zones are dark (#a84309) */
.site-content, 
.main-content, 
#content, 
.navigation, 
.header-area {
    color: #a84309 !important;
}

.site-content h1, 
.site-content h2, 
.site-content h3,
.site-content h4,
.site-content h5,
.site-content h6,
.site-content p, 
.site-content li,
.site-content span,
.site-content strong,
.site-content em,
.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.main-content h5,
.main-content h6,
.main-content p,
.main-content li,
.main-content span,
.main-content strong,
.main-content em,
#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6,
#content p,
#content li,
#content span,
#content strong,
#content em {
    color: #a84309 !important;
}

/* Navigation links in white areas */
.navigation li a,
.navigation a {
    color: #a84309 !important;
    text-decoration: none;
    font-weight: 600;
}

.navigation li a:hover,
.navigation a:hover {
    color: #7b3306 !important;
    text-decoration: underline;
}

/* Links inside white zones should be darker for contrast */
.site-content a:not(.button),
.main-content a:not(.button),
#content a:not(.button) {
    color: #7b3306 !important;
    text-decoration: underline;
}

.site-content a:not(.button):hover,
.main-content a:not(.button):hover,
#content a:not(.button):hover {
    color: #a84309 !important;
}

/* Item titles and resource names within white content areas */
.site-content .item .title a,
.site-content .item .resource-title a,
.main-content .item .title a,
.main-content .item .resource-title a,
#content .item .title a,
#content .item .resource-title a {
    color: #7b3306 !important;
    font-weight: 700;
}

.site-content .item .title a:hover,
.site-content .item .resource-title a:hover,
.main-content .item .title a:hover,
.main-content .item .resource-title a:hover,
#content .item .title a:hover,
#content .item .resource-title a:hover {
    color: #a84309 !important;
}

/* Metadata within white content areas */
.site-content .metadata-label,
.site-content .property-label,
.main-content .metadata-label,
.main-content .property-label,
#content .metadata-label,
#content .property-label {
    color: #7b3306 !important;
    font-weight: bold;
}

.site-content .metadata-value,
.site-content .property-value,
.site-content .value,
.main-content .metadata-value,
.main-content .property-value,
.main-content .value,
#content .metadata-value,
#content .property-value,
#content .value {
    color: #a84309 !important;
}

/* Buttons in white areas */
.site-content .button,
.site-content button,
.site-content input[type="submit"],
.main-content .button,
.main-content button,
.main-content input[type="submit"],
#content .button,
#content button,
#content input[type="submit"] {
    background-color: transparent;
    color: #a84309 !important;
    border: 2px solid #a84309;
}

.site-content .button:hover,
.site-content button:hover,
.site-content input[type="submit"]:hover,
.main-content .button:hover,
.main-content button:hover,
.main-content input[type="submit"]:hover,
#content .button:hover,
#content button:hover,
#content input[type="submit"]:hover {
    background-color: rgba(168, 67, 9, 0.1);
    border-color: #7b3306;
    color: #7b3306 !important;
}
/* 7. Timeline Block Styling (Dark background with white text) */
.block-template-timeline,
.timeline-block,
.block.timeline {
    background-color: #a84309 !important;
    padding: 20px;
}

.block-template-timeline *,
.timeline-block *,
.block.timeline *,
.block-template-timeline h1,
.block-template-timeline h2,
.block-template-timeline h3,
.block-template-timeline h4,
.block-template-timeline h5,
.block-template-timeline h6,
.block-template-timeline p,
.block-template-timeline span,
.block-template-timeline li,
.block-template-timeline .metadata-label,
.block-template-timeline .metadata-value,
.timeline-block h1,
.timeline-block h2,
.timeline-block h3,
.timeline-block h4,
.timeline-block h5,
.timeline-block h6,
.timeline-block p,
.timeline-block span,
.timeline-block li,
.block.timeline h1,
.block.timeline h2,
.block.timeline h3,
.block.timeline h4,
.block.timeline h5,
.block.timeline h6,
.block.timeline p,
.block.timeline span,
.block.timeline li {
    color: #ffffff !important;
}

/* Timeline links */
.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;
}

/* 8. Footer Styling (Dark text on white background) */
.site-footer,
.site-footer *,
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer span,
.site-footer li,
.site-footer strong,
.site-footer em,
footer,
footer *,
footer h1,
footer h2,
footer h3,
footer h4,
footer h5,
footer h6,
footer p,
footer span,
footer li,
footer strong,
footer em {
    color: #a84309 !important;
    background-color: #ffffff !important;
}

/* Footer links - dark on white background */
.site-footer a,
footer a {
    color: #7b3306 !important;
    text-decoration: underline;
}

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

/* 9. Custom Banner Styling (Responsive Layouts) */

/* Hero Banner Class */
.hero-banner {
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* Main Banner Styling - Responsive */
.my-banner {
    /* IMPORTANT: Replace this placeholder URL with your actual banner image URL */
    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: #333333; 
    width: 100%;
    text-align: center;
    padding: 20px 0;
}

/* 10. RESPONSIVE IMAGE OPTIMIZATION */

/* Universal image responsive rules - prevents deformation */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Ensure images within content areas are responsive */
.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/Resource thumbnails */
.item-thumbnail img,
.resource-thumbnail img,
.media-thumbnail img {
    max-width: 100%;
    height: auto !important;
    width: 100%;
    object-fit: cover;
}

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

/* Image containers to prevent overflow */
.item-image,
.resource-image,
.media-render,
figure,
.image-container {
    max-width: 100%;
    overflow: hidden;
}

.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;
}

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

/* Image blocks in Omeka */
.block-attachments img,
.media-list img {
    max-width: 100%;
    height: auto !important;
}

/* 11. Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    /* Reduce base font size for mobile */
    body {
        font-size: 18px;
    }
    
    /* Reduce banner padding on mobile */
    .hero-banner,
    .my-banner {
        padding: 15px 0;
        background-size: cover;
        min-height: 200px;
    }
    
    /* Ensure content areas have proper padding on mobile */
    .site-content,
    .main-content,
    #content {
        padding: 15px;
        overflow-x: hidden;
    }
    
    /* Make buttons more touch-friendly */
    .button, 
    button, 
    input[type="submit"] {
        padding: 12px 20px;
        font-size: 16px;
    }
    
    /* Adjust input fields for mobile */
    input[type="text"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px;
        padding: 10px;
        width: 100%;
        box-sizing: border-box;
    }
    
    /* Stack navigation items if needed */
    .navigation li {
        display: block;
        margin: 5px 0;
    }
    
    /* Mobile-specific image adjustments */
    img {
        max-width: 100%;
        height: auto !important;
    }
    
    /* Prevent large images from breaking layout */
    .item img,
    .resource img,
    .media img {
        width: 100%;
        height: auto !important;
        max-width: 100%;
    }
    
    /* Grid layouts stack on mobile */
    .item-grid,
    .resource-grid {
        display: block;
    }
    
    .item-grid .item,
    .resource-grid .resource {
        width: 100%;
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 480px) {
    /* Further reduce font size for small phones */
    body {
        font-size: 16px;
    }
    
    /* Make banner even more compact on small screens */
    .hero-banner,
    .my-banner {
        padding: 10px 0;
        min-height: 150px;
    }
    
    /* Tighter spacing for small screens */
    .site-content,
    .main-content,
    #content {
        padding: 10px;
    }
    
    /* Ensure all images are mobile-friendly */
    img {
        max-width: 100% !important;
        height: auto !important;
        width: auto !important;
    }
    
    /* Thumbnails take full width on very small screens */
    .item-thumbnail,
    .resource-thumbnail,
    .media-thumbnail {
        width: 100%;
        margin: 0 0 10px 0;
    }
}