/* --- 1. GLOBAL ADJUSTMENT --- */
#main-content.container,
#container {
    /* Change 'block' to 'initial' on mobile to allow natural overflow containment */
    max-width: 95% !important;
    margin: 0 auto !important;
}

.contact-title {
    color: white;
}

/* Global container reset: Centered for Home and Item pages */
#main-content.container,
#container {
    width: 95% !important;
    max-width: 95% !important;
    padding-left: 20px;
    padding-right: 20px;
    margin: 0 auto !important;
    display: block !important; /* Forces normal stacking for non-browse pages */
}

.main-header__top-bar, 
.main-header__main-bar {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    min-height: auto !important;
}

header.main-header .main-header__site-title a {
    font-size: 2.2rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

/* --- 2. BROWSE PAGE ONLY (Side-by-Side Search & Table) --- */

/* CRITICAL: These rules ONLY trigger on the terminology table page */
.faceted-browse-page #container {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start;
    gap: 25px;
}

.faceted-browse-page #section-sidebar {
    flex: 0 0 260px !important;
    width: 260px !important;
    display: block !important;
    position: sticky !important;
    margin: 0 !important;
}


.faceted-browse-page #section-content {
    flex: 1;
    width: auto !important;
}

.facet[data-facet-id="54"] legend {
    font-weight: 700 !important;
    color: #0F204B !important;
    margin-bottom: 10px;
    float: none !important;
    display: block;
}

.facet[data-facet-id="54"] input.value {
    width: 100% !important;
    height: 45px;
    padding: 10px;
    border: 2px solid #0F204B;
    border-radius: 4px;
    box-sizing: border-box;
}

/* --- 3. DYNAMIC NO-COLLAPSE TABLE --- */

#section-content {
    /* This MUST be the only element with overflow-x: auto */
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    display: block !important; 
    -webkit-overflow-scrolling: touch;
    /* This prevents the "cutoff" by ensuring the container ignores parent padding */
    margin: 0 -25px; 
    padding: 0 25px;
}

/* 1. The Scrollable Window */
#section-content, 
.faceted-results-container {
    width: 100% !important;
    overflow-x: auto !important;
    display: block !important;
    -webkit-overflow-scrolling: touch;
}

/* 2. Force Table to expand based on content, not screen */
table.faceted-results {
    display: table !important;
    width: max-content !important; /* Forces table to be as wide as its widest content */
    min-width: 100% !important;   /* Ensures it fills the space if data is sparse */
    table-layout: auto !important; /* Let content dictate width */
    border-collapse: collapse !important;
}

/* 3. Maintain alignment across structural elements */
table.faceted-results thead { display: table-header-group !important; }
table.faceted-results tbody { display: table-row-group !important; }
table.faceted-results tr { display: table-row !important; }

table.faceted-results th, 
table.faceted-results td {
    display: table-cell !important;
    padding: 12px !important;
    vertical-align: top;
    text-align: left;
    /* Use 'min-width' with a 'vw' unit or a relative 'ch' to keep it flexible but firm */
    min-width: 25ch !important; 
}

/* 4. Prevent the "Text Squish" that causes row height exploding */
/* This ensures the columns don't get too narrow to be useful */
.faceted-results th {
    white-space: nowrap !important; /* Headers stay on one line to hold column open */
}

.faceted-results td:nth-child(2) {
    min-width: 40ch !important; /* Give the main content column more "breathing room" */
}

/* 5. Kill the Mobile-Collapse Pseudo-elements */
table.faceted-results td::before {
    content: none !important;
    display: none !important;
}

/* --- 4. HIDE UI JUNK --- */

.tablesaw-bar, .tablesaw-advance, .tablesaw-nav-btn, 
#section-sidebar-modal-toggle, .browse-controls .permalink.button,
.facets-container > legend {
    display: none !important;
}

/* --- 5. ITEM SHOW PAGE (Left-Aligned with Internal Padding) --- */

/* Align the main h1 Title to the far left */
body.item.resource.show #main-content h1,
body.item.resource.show #main-content h1 .title {
    text-align: left !important;
    display: block !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

/* The Main Metadata Box */
.metadata {
    border: 1px solid #e0e0e0;
    /* Added 30px left padding to move text away from the border */
    padding: 25px 25px 25px 35px !important; 
    border-radius: 8px;
    background-color: #fcfcfc;
    margin-top: 20px;
    margin-left: 0 !important; /* Ensure box itself is far left */
    display: block !important;
    box-sizing: border-box;
}

/* Ensure the list container starts at the very left of the padding */
.item.show dl,
.item.resource.show dl {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; 
    text-align: left !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
}

.item-sets .value {
    display: inline-block;
    border: none !important; /* This kills the blue border */
    padding: 0;
    margin-top: 5px;
}

/* Property block (The individual row) */
.item.show .property,
.item.resource.show .property {
    display: flex !important;
    flex-direction: column !important;
    margin-bottom: 30px !important;
    align-items: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.item.show .property:last-child {
    border-bottom: none;
}

/* Labels (English Term, etc.) */
.item.show dt {
    font-size: 1.1rem !important;
    color: #0F204B !important;
    margin-bottom: 8px !important;
    border-bottom: 2px solid #eeeeee;
    width: auto !important; /* Keeps underline tight to text length */
    text-align: left !important;
}

/* Values (The actual definitions) */
.item.show dd {
    font-size: 1.1rem !important;
    text-align: left !important;
    margin: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* --- 6. MOBILE STRATEGY (Layout Fixes) --- */

@media screen and (max-width: 992px) {
    .faceted-browse-page #container {
        flex-direction: column !important; 
        display: block !important;
    }

    .faceted-browse-page #section-sidebar {
        width: 100% !important;
        flex: none !important;
        position: static !important;
        margin-bottom: 20px !important;
    }

    #main-content {
        margin-top: 20px !important; /* Reduced for mobile since sidebar is now stacked */
        width: 100% !important;
        overflow-x: hidden; /* Prevents the whole website from wobbling */
    }
    
    /* Ensure the table content area is allowed to scroll */
    #section-content {
        overflow-x: auto !important;
        padding-bottom: 15px; /* Space for the scrollbar */
    }
}

/* --- CUSTOM SCROLLBAR (Makes it obvious you can scroll) --- */
#section-content::-webkit-scrollbar {
    height: 10px;
}
#section-content::-webkit-scrollbar-thumb {
    background: #0F204B; 
    border-radius: 10px;
}
#section-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* --- NON-COLLAPSING TABLE STRATEGY --- */

/* This targets the wrapper around your table */
.table-container {
    width: 100%;
    overflow-x: auto; /* Enables the horizontal scrollbar */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch; /* Momentum scrolling for iOS */
    margin-bottom: 1rem;
}

table {
    min-width: 800px; /* Forces the table to stay wide, triggering the scroll */
    border-collapse: collapse;
    width: 100%;
}

/* Optional: Style the scrollbar to make it more obvious on Desktop */
.table-container::-webkit-scrollbar {
    height: 8px;
}

.table-container::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 10px;
}

.table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* --- 7. FOOTER & UTILS --- */

.main-footer .navigation li { display: inline-block !important; }
.main-footer .navigation li a { font-size: 1.2rem !important; font-weight: 600 !important; padding: 0 15px !important; }

.page.site-page-search .block-html,
.page.site-page-search .site-page-pagination {
    text-align: center !important;
}

.block-searchForm {
    width: 100%;
    display: flex;
    justify-content: center; /* Centers the entire group */
    margin: 20px 0;
}

#search-form {
    display: flex;          /* Places input and button on the same line */
    align-items: center;    /* Vertically aligns them */
    width: 100%;
    max-width: 600px;       /* Keeps search bar from getting too wide */
}

#search-form input[type="text"] {
    flex: 1;                /* Makes input fill available space */
    height: 46px;           /* Explicit height */
    padding: 0 15px;
    border: 2px solid #0F204B;
    border-right: none;     /* Removes border between input and button */
    border-radius: 4px 0 0 4px; /* Rounds only the left corners */
    margin: 0;
}

#search-form .button {
    height: 46px;           /* Matches input height exactly */
    padding: 0 20px;
    background-color: #0F204B;
    color: white;
    border: 2px solid #0F204B;
    border-radius: 0 4px 4px 0; /* Rounds only the right corners */
    cursor: pointer;
    margin: 0;
    font-weight: bold;
    transition: background 0.2s;
}

#search-form .button:hover {
    background-color: #1a3a8a; /* Subtle hover effect */
}

/* Centering the title specifically on the Item Show page */
body.item.resource.show #main-content h1 {
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    margin-bottom: 40px !important;
}

body.item.resource.show #main-content h1 .title {
    display: inline-block !important;
    text-align: left!important;
}

body > header > div.main-header__top-bar.container > a {
    visibility: hidden;
}

/* Specific styling for the Bacteriology resource page */

/* Left-align the main title and header elements */
.item.resource.show h1, 
.main-region .metadata,
.regions-container {
    text-align: left !important;
    margin-left: 0;
    padding-left: 0;
}

/* Ensure the definition and terms don't center-align */
.value-content, 
.property dt, 
.property dd {
    text-align: left;
}

/* Add a border around the entire metadata section */
.metadata {
    border: 1px solid #e0e0e0;
    padding: 20px;
    border-radius: 8px;
    background-color: #fcfcfc;
    margin-top: 20px;
}

/* Add borders to individual property blocks (items) */
.metadata .property {
    border-bottom: 1px solid #eee;
    padding: 12px 0;
    margin-bottom: 0;
}

/* Remove the bottom border from the last item so it looks clean */
.metadata .property:last-child {
    border-bottom: none;
}

/* Optional: Add a subtle border around the Item Set (Agriculture) link */
.item-sets .value {
    display: inline-block;
    border: 1px solid var(--primary);
    padding: 2px 10px;
    border-radius: 4px;
    margin-top: 5px;
}

/* Remove centering from the parent item link at the bottom */
.media-parent-item.textcenter {
    text-align: left !important;
}