/* ==========================================================================
   MODERN BEATRICES ARCHIVE — custom.css
   ========================================================================== */

/* 1. FONT IMPORT
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Cormorant+SC:wght@300;400;600&family=EB+Garamond:ital,wght@0,400;1,400&display=swap');


/* 2. GLOBAL RESET — establish base before anything else
   ========================================================================== */
html {
    background-color: #7a2e12 !important;
}

body {
    background-color: #7a2e12 !important;
    font-family: 'Josefin Sans', sans-serif !important;
    font-size: 18px !important;
    color: #ffffff !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* General content areas inherit red */
.site-content,
.main-content,
#content,
main,
#main,
.page,
.site,
#site {
    background-color: #7a2e12 !important;
}

/* Text defaults for content */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff !important;
}
p, span, li, dt, dd, blockquote {
    color: #ffffff !important;
}
div, section, article {
    color: #ffffff !important;
}

/* Content links */
a {
    color: #ffffff !important;
    text-decoration: underline !important;
}
a:hover {
    color: #caa84a !important;
    text-decoration: underline !important;
}


/* 3. HEADER — dark, elegant, full override
   ========================================================================== */

/* ── Dark background on everything inside the header ── */
#site-header, .site-header, header, body > header,
#site-header *, .site-header *, header * {
    background-color: #0f0602 !important;
    color: #f5f0e8 !important;
}

/* ── Header shell ── */
#site-header, .site-header, header, body > header {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    border-bottom: 1px solid rgba(212,175,90,0.25) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.6) !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    overflow: hidden !important;
}

/* ── Single row: logo left, nav right ── */
#site-header .container, .site-header .container,
header .container, #site-header > div, .site-header > div {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    height: 68px !important;
    min-height: 68px !important;
    background-color: #0f0602 !important;
}

/* ── Logo ── */
.site-title, #site-title,
.site-title a, #site-title a {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 1.17rem !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: #f5f0e8 !important;
    text-decoration: none !important;
    background-color: transparent !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}
.site-title a:hover, #site-title a:hover { color: #caa84a !important; }

.site-title img, #site-title img, header img {
    max-height: 38px !important;
    width: auto !important;
    background-color: transparent !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* ── KILL the hamburger button every way possible ── */
button.mobile-nav-button, button.nav-toggle, button.menu-toggle,
.mobile-nav-button, .nav-toggle, .menu-toggle,
#mobile-menu-toggle, .sidebar-toggle, .nav-open-button,
[class*="mobile-nav"], [class*="nav-toggle"],
[class*="menu-toggle"], [class*="hamburger"],
[id*="mobile-menu"], [id*="nav-toggle"],
[aria-label="Toggle navigation"], [aria-label="Menu"],
[aria-label="Open menu"], [aria-label="Close menu"],
header button:not([type="submit"]) {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* ── Nav — ALWAYS a visible horizontal row ── */
/* Override any JS-injected display:none or visibility:hidden */
.navigation, #site-nav, .site-nav, header nav, .header-nav,
.navigation[style], #site-nav[style], header nav[style] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: 68px !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
    background-color: transparent !important;
    flex: 1 !important;
    justify-content: flex-end !important;
}

.navigation ul, #site-nav ul, header nav ul,
.navigation > ul, #site-nav > ul,
.navigation ul[style], #site-nav ul[style] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: transparent !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: 68px !important;
    max-height: none !important;
    transform: none !important;
}

.navigation ul li, #site-nav ul li, header nav ul li {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: transparent !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* ── Nav links ── */
.navigation ul li a, #site-nav ul li a, header nav ul li a,
.navigation a, .site-nav a {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.94rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: rgba(244,237,224,0.78) !important;
    text-decoration: none !important;
    background-color: transparent !important;
    padding: 0 1rem !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.2s, border-color 0.2s !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.navigation ul li a:hover, #site-nav ul li a:hover, header nav ul li a:hover {
    color: #caa84a !important;
    text-decoration: none !important;
    border-bottom-color: rgba(212,175,90,0.5) !important;
}
.navigation li.active a, .navigation li.current a,
#site-nav li.active a, #site-nav li.current a {
    color: #caa84a !important;
    border-bottom-color: #caa84a !important;
}

/* ── Search ── */
header form, header form * { background-color: transparent !important; }
header input[type="search"], header input[type="text"] {
    background-color: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(212,175,90,0.25) !important;
    color: #f5f0e8 !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.88rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.38rem 0.75rem !important;
    outline: none !important;
    margin-left: 1rem !important;
}
header input::placeholder { color: rgba(244,237,224,0.3) !important; }
header input[type="search"]:focus {
    border-color: rgba(212,175,90,0.55) !important;
}
header button[type="submit"], header input[type="submit"] {
    display: inline-flex !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    background-color: rgba(212,175,90,0.12) !important;
    border: 1px solid rgba(212,175,90,0.28) !important;
    color: #caa84a !important;
    padding: 0.38rem 0.65rem !important;
    font-size: 0.98rem !important;
    cursor: pointer !important;
}

a[href*="item/search"] {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    color: rgba(212,175,90,0.45) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
}
a[href*="item/search"]:hover { color: #caa84a !important; }

/* Search bar in header */
#search,
.header-search,
#header-search,
header form,
header form * {
    background-color: transparent !important;
}

header input[type="search"],
header input[type="text"],
.header-search input {
    background-color: rgba(255,255,255,0.07) !important;
    border: 1px solid rgba(212,175,90,0.3) !important;
    color: #f5f0e8 !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.91rem !important;
    letter-spacing: 0.1em !important;
    padding: 0.4rem 0.8rem !important;
    outline: none !important;
}
header input::placeholder,
.header-search input::placeholder {
    color: rgba(244,237,224,0.3) !important;
}
header input:focus {
    border-color: rgba(212,175,90,0.6) !important;
}

header button[type="submit"],
.header-search button,
header input[type="submit"] {
    background-color: rgba(212,175,90,0.15) !important;
    border: 1px solid rgba(212,175,90,0.3) !important;
    color: #caa84a !important;
    padding: 0.4rem 0.7rem !important;
    font-size: 1.04rem !important;
    cursor: pointer !important;
}
header button[type="submit"]:hover {
    background-color: rgba(212,175,90,0.3) !important;
}

/* Advanced search link */
a[href*="item/search"],
.advanced-search-link,
#advanced-search {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.81rem !important;
    letter-spacing: 0.14em !important;
    color: rgba(212,175,90,0.5) !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    background-color: transparent !important;
}
a[href*="item/search"]:hover {
    color: #caa84a !important;
}

/* Gold hairline beneath header */
#site-header::after,
.site-header::after,
header::after {
    content: '' !important;
    display: block !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, rgba(212,175,90,0.3) 20%, rgba(212,175,90,0.3) 80%, transparent) !important;
}


/* 4. FOOTER
   ========================================================================== */

/* ── Dark background on everything inside the footer ── */
#site-footer,
.site-footer,
footer,
body > footer,
#site-footer *,
.site-footer *,
footer * {
    background-color: #000000 !important;
    color: rgba(244,237,224,0.45) !important;
}

/* ── Footer shell — full width, clipped, no bleed ── */
#site-footer,
.site-footer,
footer,
body > footer {
    border-top: 1px solid rgba(212,175,90,0.2) !important;
    padding: 2.5rem 2rem !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}

/* ── Footer inner container — full width ── */
#site-footer .container,
.site-footer .container,
footer .container,
#site-footer > div,
.site-footer > div,
footer > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    background-color: #000000 !important;
}

/* ── Footer links ── */
#site-footer a,
.site-footer a,
footer a {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    color: rgba(244,237,224,0.4) !important;
    text-decoration: none !important;
    background-color: transparent !important;
    transition: color 0.2s !important;
}
#site-footer a:hover,
.site-footer a:hover,
footer a:hover {
    color: #caa84a !important;
    text-decoration: none !important;
}

/* ── Footer list — forced horizontal row ── */
#site-footer ul,
.site-footer ul,
footer ul,
#site-footer ul[style],
.site-footer ul[style],
footer ul[style] {
    list-style: none !important;
    margin: 0 0 1.2rem 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem 2rem !important;
    height: auto !important;
    width: 100% !important;
}

/* ── Footer list items — inline, no stacking ── */
#site-footer ul li,
.site-footer ul li,
footer ul li {
    display: inline-flex !important;
    background-color: transparent !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Footer text / copyright */
#site-footer p,
.site-footer p,
footer p {
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: rgba(244,237,224,0.22) !important;
    background-color: transparent !important;
    margin: 0.4rem 0 0 0 !important;
    line-height: 1.8 !important;
}


/* 5. CONTENT — red pages
   ========================================================================== */

/* Make sure content divs don't bleed lighter shades */
.container,
.site-content .container,
#content .container,
main .container {
    background-color: #7a2e12 !important;
}

.item.resource,
.item.resource *,
.resource-list,
.resource-list *,
.item-list,
.item-list * {
    background-color: #7a2e12 !important;
    color: #ffffff !important;
}

.item.resource a,
.resource-list a,
.item-list a {
    color: #ffffff !important;
    background-color: transparent !important;
}
.item.resource a:hover,
.resource-list a:hover {
    color: #caa84a !important;
}

.item.show *,
.resource.show *,
#item-show *,
#resource-show * {
    background-color: #7a2e12 !important;
    color: #ffffff !important;
}

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

.metadata-label, .property-label, .element-label {
    color: #f7f7f7 !important;
    font-weight: bold !important;
    background-color: transparent !important;
}
.metadata-value, .property-value, .value, .element-text {
    color: #ffffff !important;
    background-color: transparent !important;
}
.metadata *, .property *, #metadata *, #properties *,
.item-metadata *, .resource-metadata * {
    color: #ffffff !important;
    background-color: transparent !important;
}

aside, aside *,
.sidebar, .sidebar *,
.block, .block *,
.block-content, .block-content * {
    background-color: #7a2e12 !important;
    color: #ffffff !important;
}
aside a, .sidebar a, .block a, .block-content a {
    color: #ffffff !important;
    text-decoration: underline !important;
    background-color: transparent !important;
}
aside a:hover, .sidebar a:hover, .block a:hover {
    color: #caa84a !important;
}

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


/* 6. FORMS
   ========================================================================== */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
textarea {
    background-color: #561f0c !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
}
input::placeholder, textarea::placeholder {
    color: rgba(255,255,255,0.5) !important;
}
select, select option {
    background-color: #561f0c !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.4) !important;
}

/* Content page buttons */
.button, button, input[type="submit"], .btn {
    background-color: transparent !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.6) !important;
    padding: 8px 18px !important;
    font-family: 'Cormorant SC', Georgia, serif !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: border-color 0.2s, color 0.2s !important;
}
.button:hover, button:hover,
input[type="submit"]:hover, .btn:hover {
    border-color: #caa84a !important;
    color: #caa84a !important;
    background-color: rgba(212,175,90,0.08) !important;
}


/* 7. PAGINATION & TABLES
   ========================================================================== */
.pagination, .pagination * {
    background-color: #7a2e12 !important;
    color: #ffffff !important;
}
.pagination a {
    border: 1px solid rgba(255,255,255,0.5) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    padding: 4px 10px !important;
    background-color: transparent !important;
}
.pagination a:hover {
    color: #caa84a !important;
    border-color: #caa84a !important;
}
.pagination .current {
    background-color: #561f0c !important;
}

table, th, td, thead, tbody, tfoot, tr {
    background-color: #7a2e12 !important;
    color: #ffffff !important;
    border-color: rgba(255,255,255,0.3) !important;
}


/* 8. MAP (Leaflet)
   ========================================================================== */
.leaflet-container {
    height: 500px !important;
    width: 100% !important;
    border: 1px solid rgba(212,175,90,0.4) !important;
    overflow: hidden !important;
}
.leaflet-pane, .leaflet-pane *,
.leaflet-tile, .leaflet-zoom-animated {
    background-color: transparent !important;
}
.leaflet-control-zoom a, .leaflet-bar a {
    background-color: rgba(255,255,255,0.85) !important;
    color: #333 !important;
}
.leaflet-control-attribution {
    background-color: rgba(255,255,255,0.7) !important;
    color: #333 !important;
}
.leaflet-popup-content-wrapper,
.leaflet-popup-content,
.leaflet-popup-content * {
    background-color: #ffffff !important;
    color: #7a2e12 !important;
}
.leaflet-tooltip, .leaflet-tooltip * {
    background-color: #ffffff !important;
    color: #7a2e12 !important;
    border-color: #7a2e12 !important;
}
.marker-cluster div, .marker-cluster span {
    background-color: #ffffff !important;
    color: #7a2e12 !important;
    font-weight: 700 !important;
}
.leaflet-interactive, .leaflet-overlay-pane svg path {
    stroke: #7a2e12 !important;
    fill: #7a2e12 !important;
    fill-opacity: 0.3 !important;
}


/* 9. IMAGES
   ========================================================================== */
img {
    max-width: 100% !important;
    height: auto !important;
    background-color: transparent !important;
}
a img {
    border: 0 !important;
    background-color: transparent !important;
}
.item-thumbnail img, .resource-thumbnail img {
    width: 100% !important;
    object-fit: cover !important;
}


/* 10. HERO — protect from global overrides
   ========================================================================== */
.mba-wrap, .mba-hero, .mba-content,
.mba-eyebrow, .mba-title, .mba-it,
.mba-desc, .mba-ctas, .mba-scroll,
.mba-orn, .mba-scroll-line,
.mba-grid, .mba-card, .mba-card-bg,
.mba-card-fade, .mba-card-body,
.mba-card-name, .mba-card-label,
.mba-card-arrow, .mba-title-em,
.mba-btn-p, .mba-btn-s,
.mba-scroll-label {
    background-color: transparent !important;
    color: inherit !important;
}

/* Re-apply the specific hero backgrounds */
.mba-hero {
    background: linear-gradient(to bottom,
        #7a2e12 0%,
        #5a2004 40%,
        #1a0800 75%,
        #000000 100%) !important;
    min-height: 100vh !important;
    position: relative !important;
}
.mba-grid {
    background-color: #000000 !important;
}
.mba-card {
    background: linear-gradient(135deg, #1a0800 0%, #110705 100%) !important;
}
.mba-card:hover {
    background: linear-gradient(135deg, #2a1000 0%, #140804 100%) !important;
}
.mba-btn-p {
    background-color: #7a2e12 !important;
    border: 1px solid #7a2e12 !important;
    color: #f5f0e8 !important;
}
.mba-btn-p:hover {
    background-color: #8a2235 !important;
    border-color: #8a2235 !important;
    color: #f5f0e8 !important;
    text-decoration: none !important;
}
.mba-btn-s {
    border: 1px solid rgba(212,175,90,0.55) !important;
    color: #caa84a !important;
}
.mba-btn-s:hover {
    background-color: rgba(184,144,42,0.14) !important;
    border-color: #caa84a !important;
    color: #caa84a !important;
    text-decoration: none !important;
}
.mba-title { color: #f5f0e8 !important; }
.mba-title-em { color: #caa84a !important; }
.mba-it { color: rgba(244,237,224,0.5) !important; }
.mba-desc { color: rgba(244,237,224,0.78) !important; }
.mba-eyebrow { color: #caa84a !important; }
.mba-orn { color: rgba(184,144,42,0.7) !important; }
.mba-card-name { color: #f5f0e8 !important; }
.mba-card-name em { color: rgba(244,237,224,0.4) !important; }
.mba-card-label { color: rgba(212,175,90,0.6) !important; }
.mba-card-arrow { color: rgba(212,175,90,0.4) !important; }
.mba-scroll-label { color: rgba(244,237,224,0.28) !important; }


/* 11. NAVIGATION — always visible, never hamburger
   ========================================================================== */

/* Hide the hamburger button at ALL screen sizes */
.mobile-nav-button,
.nav-toggle,
.menu-toggle,
.hamburger,
#mobile-menu-toggle,
button.nav-toggle,
button.mobile-nav-button,
[class*="hamburger"],
[class*="mobile-nav"],
[class*="menu-toggle"],
[aria-label="Toggle navigation"],
[aria-label="Menu"] {
    display: none !important;
    visibility: hidden !important;
}

/* Force the nav list to always show as a flex row */
.navigation,
#site-nav,
.site-nav,
header nav {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    transform: none !important;
}

.navigation ul,
#site-nav ul,
header nav ul,
.navigation > ul {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    transform: none !important;
    background-color: transparent !important;
}

/* Responsive — shrink gracefully, never collapse to hamburger
   ========================================================================== */

/* Medium: slightly smaller links */
@media (max-width: 1100px) {
    .navigation ul li a,
    #site-nav ul li a,
    header nav ul li a {
        font-size: 0.86rem !important;
        padding: 0 0.85rem !important;
        letter-spacing: 0.12em !important;
    }
}

/* Tablet: logo + nav stack into two rows */
@media (max-width: 900px) {
    #site-header .container,
    .site-header .container,
    header .container,
    #site-header > div:first-child,
    .site-header > div:first-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 0.4rem 1rem !important;
        min-height: auto !important;
        height: auto !important;
        gap: 0 !important;
    }

    .site-title, #site-title {
        padding: 0.4rem 0 !important;
    }

    /* Nav full-width second row */
    .navigation, #site-nav, header nav {
        width: 100% !important;
        height: auto !important;
        border-top: 1px solid rgba(212,175,90,0.12) !important;
    }

    .navigation ul, #site-nav ul, header nav ul {
        flex-wrap: wrap !important;
        width: 100% !important;
        height: auto !important;
    }

    .navigation ul li a,
    #site-nav ul li a,
    header nav ul li a {
        font-size: 0.78rem !important;
        letter-spacing: 0.1em !important;
        padding: 0 0.7rem !important;
        height: 34px !important;
        border-bottom: none !important;
        border-right: 1px solid rgba(212,175,90,0.08) !important;
    }

    .navigation ul li:last-child a,
    #site-nav ul li:last-child a {
        border-right: none !important;
    }
}

/* Small mobile: tighten further */
@media (max-width: 600px) {
    .navigation ul li a,
    #site-nav ul li a,
    header nav ul li a {
        font-size: 0.70rem !important;
        letter-spacing: 0.06em !important;
        padding: 0 0.5rem !important;
        height: 36px !important;
    }

    #site-footer, .site-footer, footer {
        padding: 2rem 1.2rem !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #site-footer ul, .site-footer ul, footer ul {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 1.2rem !important;
        height: auto !important;
    }
    #site-footer ul li, .site-footer ul li, footer ul li {
        display: inline-flex !important;
    }
}

@media (max-width: 400px) {
    body { font-size: 15px !important; }

    .navigation ul li a,
    #site-nav ul li a,
    header nav ul li a {
        font-size: 0.62rem !important;
        letter-spacing: 0.04em !important;
        padding: 0 0.4rem !important;
    }
}


/* 12. BLOCK INLINE WHITE BACKGROUNDS — last-resort catch
   ========================================================================== */
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background:#ffffff"],
[style*="background: #ffffff"],
[style*="background:white"],
[style*="background: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background-color:#ffffff"],
[style*="background-color: #ffffff"],
[style*="background-color:white"],
[style*="background-color: white"] {
    background-color: #7a2e12 !important;
}