/* ============================================================
   Freedom theme — Miami University and Slavery
   Header, navigation, hero, dropdown, footer
   ============================================================ */


/* ---- Drawer / mobile menu background ---------------------- */
.menu-drawer,
.menu-drawer__header {
    background-color: #8F1402;
}

/* ---- Dropdown / second-level navigation menu -------------- */
.main-nav .navigation > li > ul,
.main-nav .navigation > li > ul li,
.main-nav .navigation > li > ul li a,
.navigation > li > ul,
.navigation > li > ul li,
.navigation > li > ul li a {
    background-color: #A31A06 !important;
    color: #ffffff !important;
}


/* ============================================================
   GLOBAL: un-fix header, kill the body-padding gap, compact top bar.
   Applies on every page.
   ============================================================ */
.main-header {
    position: relative !important;
    z-index: auto;
    box-shadow: none;
}

body { padding-top: 0 !important; }
@media (min-width: 1024px) { body { padding-top: 0 !important; } }

.main-header__top-bar { padding-top: 4px; padding-bottom: 4px; }
.main-header__advanced-search { font-size: .68rem; }

.main-header__search-form input {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: .85rem;
    line-height: 1.3;
    height: auto;
    min-height: 0;
}

.main-header__search-form button {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
    font-size: .85rem;
}


/* ============================================================
   HERO TITLE OVERLAY + SUBTITLE - any page that has a banner.
   Scoped with :has(.banner) so non-banner pages (e.g. /item)
   keep the normal in-header title and aren't affected.
   ============================================================ */
@media (min-width: 1024px) {
    body:has(.banner).main-header--center .main-header__main-bar {
        padding-top: 0;
    }
}

body:has(.banner) .main-header__site-title {
    position: absolute;
    top: calc(100% + 290px);          /* banner is min-height 700px */
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 92vw;
    text-align: center;
    z-index: 5;                       /* below the menu drawer (z-index: 23) */
    margin: 0;
    padding: 0;
}

body:has(.banner) .main-header__site-title a {
    display: inline-block;
    position: relative;
    padding: 0 0 16px;
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    font-family: 'Noto Serif', serif;
    font-size: clamp(2.8rem, 6vw, 4.5rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: 1.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.68);
    white-space: normal;
    transition: color .2s ease, text-shadow .2s ease;
}

body:has(.banner) .main-header__site-title a::after {
    content: "";
    display: block;
    width: min(120px, 28vw);
    height: 4px;
    margin: 16px auto 0;
    background: #C41230;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: width .3s ease;
}

body:has(.banner) .main-header__site-title a:hover,
body:has(.banner) .main-header__site-title a:focus {
    color: #ffffff;
    background: transparent;
    text-decoration: none;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.75);
}

body:has(.banner) .main-header__site-title a:hover::after,
body:has(.banner) .main-header__site-title a:focus::after {
    width: 100%;
}

body:has(.banner) .banner { position: relative; }

body:has(.banner) .banner__content--center .banner__heading,
body:has(.banner) .banner__heading {
    display: inline-block;
    max-width: min(900px, 90vw);
    margin-top: clamp(155px, 22vh, 260px);
    padding: 10px 22px 10px 20px;
    color: #ffffff;
    background: rgba(0, 0, 0, 0.42);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-family: 'Noto Serif', serif;
    font-style: italic;
    font-size: clamp(1.45rem, 2.9vw, 2.25rem);
    font-weight: 600;
    line-height: 1.25;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.70);
}


/* ============================================================
   DROPDOWN MENU FIX (z-index above the banner)
   ============================================================ */
.main-navigation .navigation > li > ul {
    z-index: 100;
}


/* ============================================================
   HIDE SUBPAGE LINKS IN HOVER DROPDOWN
   ============================================================ */
.main-navigation .navigation > li > ul > li > ul {
    display: none !important;
}


/* ============================================================
   RESPONSIVE 5-COLUMN-HEAD LAYOUT IN DROPDOWN
   ============================================================ */
.main-navigation .navigation > li > ul {
    gap: 1.25rem 1.75rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    align-items: flex-start;
}

.main-navigation .navigation > li > ul > li {
    flex: 1 1 180px;
    min-width: 0;
    max-width: 240px;
}

.main-navigation .navigation > li > ul > li > a {
    display: block;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

@media (max-width: 1200px) {
    .main-navigation .navigation > li > ul { gap: 1rem; }
    .main-navigation .navigation > li > ul > li {
        flex: 1 1 150px;
        max-width: 200px;
    }
}

@media (max-width: 1024px) {
    .main-navigation .navigation > li > ul > li {
        flex: 1 1 45%;
        max-width: 48%;
    }
}


/* ============================================================
   MU Red highlight on the slogan word "Love and Honor" inside the
   banner subtitle. The <span> is injected by script.js.
   ============================================================ */
.banner__heading .mu-red {
    /* color: #C3142D; */
    font-weight: 700;
}

/* ============================================================
   #main-content — kill the excess padding the freedom theme
   reserved for a fixed header / large bottom margin.
   ============================================================ */

#main-content {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
}

@media (min-width: 768px) {
    #main-content {
        padding-top: 1.25rem !important;
        padding-bottom: 0.75rem !important;
    }
}

@media (min-width: 1024px) {
    #main-content {
        padding-top: 1.5rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* The theme's navigation.js writes `padding-top: <header height>px` onto
   <body> at scroll/resize to compensate for the (originally) fixed header.
   We unfixed the header, so that inline padding is now dead space.
   Override it with high-specificity + !important so the JS-set inline
   style still loses. */
html body,
html body.main-header--center,
html body[style] {
    padding-top: 0 !important;
}

/* The items browse page uses Minimasonry to position grid items. The
   library writes an explicit height onto the <ul.resources> container.
   That's fine — but make sure nothing under it adds more space. */
body.item.resource.browse ul.resources.resource-grid {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}

body.item.resource.browse .pagination,
body.item.resource.browse .browse-controls {
    margin-bottom: 0.5rem !important;
}

/* ============================================================
   FOOTER v6 — dark red background to match theme
   (single all-white MUL logo on dark red)
   ============================================================ */
.main-footer,
.main-footer__top,
.main-footer__bottom {
    background-color: #8F1402 !important;   /* primary theme red */
    color: #ffffff !important;
}

.main-footer__col1,
.main-footer__col2 {
    color: #ffffff;
}

/* Right-column nav links: white on red, brighter on hover */
.main-footer__col2 .navigation a,
.main-footer__col2 .navigation a:visited {
    color: #ffffff !important;
}
.main-footer__col2 .navigation a:hover,
.main-footer__col2 .navigation a:focus {
    color: #ffd9d2 !important;            /* soft warm tint on hover */
    text-decoration: underline;
}

/* Bottom row: divider, copyright, links */
.main-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.25);
}
.main-footer__copyright,
.main-footer__copyright a,
.main-footer__copyright a:visited {
    color: #f3d9d4 !important;
}
.main-footer__copyright a:hover,
.main-footer__copyright a:focus {
    color: #ffffff !important;
}

/* Social icons: invert from dark-grey to white on the red bg */
.main-footer__social-network img {
    filter: brightness(0) invert(1) !important;
    opacity: 0.9;
    transition: opacity .2s ease, filter .2s ease;
}
.main-footer__social-network a:hover img {
    opacity: 1;
    filter: brightness(0) invert(1) !important;
}

/* Safety: if the MUL logo PNG has any residual off-white anti-alias edges
   they'll blend cleanly on red — no extra rule needed since it's transparent. */


/* ============================================================
   MAIN NAV v6 — stop right-alignment squeeze on mid widths
   The freedom theme pushes the <ul.navigation> to the right edge
   and the items lose breathing room before the mobile drawer kicks in.
   Center the row and give items real padding so they don't crowd.
   ============================================================ */
.main-header__main-bar,
.main-navigation {
    justify-content: center !important;
}

.main-navigation .navigation,
.main-nav .navigation {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;   /* was: flex-end on shrink */
    align-items: center;
    gap: 0.25rem 0.75rem;                  /* breathing room between items */
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100%;
}

.main-navigation .navigation > li,
.main-nav .navigation > li {
    flex: 0 0 auto;
    margin: 0 !important;
}

.main-navigation .navigation > li > a,
.main-nav .navigation > li > a {
    padding: 0.55rem 0.9rem !important;    /* was tight; gives each item air */
    white-space: nowrap;
    line-height: 1.25;
}

/* Mid widths where items used to crowd against the right edge:
   keep them on one line as long as possible, then wrap centered. */
@media (max-width: 1200px) {
    .main-navigation .navigation > li > a,
    .main-nav .navigation > li > a {
        padding: 0.5rem 0.7rem !important;
        font-size: 0.95rem;
    }
}

@media (max-width: 1024px) {
    .main-navigation .navigation,
    .main-nav .navigation {
        gap: 0.25rem 0.5rem;
    }
    .main-navigation .navigation > li > a,
    .main-nav .navigation > li > a {
        padding: 0.45rem 0.6rem !important;
        font-size: 0.92rem;
    }
}

/* ============================================================
   FOOTER v6.1 — bigger logo, tighter vertical rhythm in nav
   ============================================================ */

/* Logo: bump every breakpoint up ~25–35% */
/* .main-footer__col1 img,
.footer_site_info img,
.footer_site_info .footer-secondary-logo {
    height: 130px !important;
    max-height: 130px !important;
    min-height: 130px !important;
} */

@media (max-width: 1024px) {
    .main-footer__col1 img,
    .footer_site_info img,
    .footer_site_info .footer-secondary-logo {
        height: 115px !important;
        max-height: 115px !important;
        min-height: 115px !important;
    }
}

@media (max-width: 820px) {
    .main-footer__col1 img,
    .footer_site_info img,
    .footer_site_info .footer-secondary-logo {
        height: 100px !important;
        max-height: 100px !important;
        min-height: 100px !important;
    }
}

@media (max-width: 640px) {
    .main-footer__col1 img,
    .footer_site_info img,
    .footer_site_info .footer-secondary-logo {
        height: 92px !important;
        max-height: 92px !important;
        min-height: 92px !important;
    }
}

/* Footer nav: kill the huge vertical gap between stacked items.
   The space comes from the theme's default <li> padding/margin plus
   a too-large row-gap on the flex container when it wraps. */
.main-footer__col2 .navigation,
.main-footer__col2 ul.navigation {
    gap: 0.15rem 1.4rem !important;        /* row-gap was 0.4rem */
}

.main-footer__col2 .navigation > li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.1 !important;
}

.main-footer__col2 .navigation > li > a {
    display: inline-block;
    margin: 0 !important;
    padding: 4px 6px !important;           /* tight, but still tappable */
    line-height: 1.1 !important;
}

/* Phone-stacked: nav becomes a vertical column — make that column tight. */
@media (max-width: 640px) {
    .main-footer__col2 .navigation,
    .main-footer__col2 ul.navigation {
        flex-direction: column;
        gap: 0.25rem 0 !important;         /* tiny vertical step */
    }
    .main-footer__col2 .navigation > li > a {
        padding: 3px 6px !important;
    }
}

/* ============================================================
   FOOTER v6.2 — kill the vertical divider, stop nav-item wrapping,
   balance the row
   ============================================================ */

/* (1) Remove the vertical line. The freedom theme paints a border on
   the column wrappers; nuke borders on every footer container. */
.main-footer,
.main-footer__top,
.main-footer__bottom,
.main-footer__top-container,
.main-footer__bottom-container,
.main-footer__col1,
.main-footer__col2,
.main-footer__col3,
.footer_site_info {
    border: 0 !important;
    box-shadow: none !important;
}
.main-footer hr,
.main-footer hr.alignfull {
    display: none !important;
    border: 0 !important;
}

/* (2) Force every footer nav item onto one line, no matter what.
   Something in the theme is letting <a> wrap on its own; lock it. */
.main-footer__col2 .navigation,
.main-footer__col2 ul.navigation {
    flex-wrap: nowrap !important;          /* keep the row together */
    justify-content: flex-end;
    gap: 0 !important;                     /* spacing handled on <a> */
}

.main-footer__col2 .navigation > li,
.main-footer__col2 .navigation > li > a {
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    max-width: none !important;
    width: auto !important;
    flex: 0 0 auto !important;
}

.main-footer__col2 .navigation > li > a {
    padding: 6px 14px !important;          /* horizontal breathing room */
    line-height: 1.2 !important;
}

/* (3) Better balance: let the nav use the available space evenly
   instead of crowding to one side with a big empty gap. */
.main-footer__top-container,
.main-footer__top-container.all-columns,
.main-footer__top-container.menu-only,
.main-footer__top-container.no-menu {
    align-items: center;
    gap: 1rem 2rem;
}

.main-footer__col2 {
    justify-content: center;               /* was flex-end */
}

/* If the row genuinely doesn't fit (very narrow desktop), allow wrap
   but still keep each item itself on one line. */
@media (max-width: 900px) {
    .main-footer__col2 .navigation,
    .main-footer__col2 ul.navigation {
        flex-wrap: wrap !important;
        gap: 0.25rem 0.5rem !important;
        justify-content: center;
    }
}

/* Phone column: tight vertical stack, no divider artifacts */
@media (max-width: 640px) {
    .main-footer__col2 .navigation,
    .main-footer__col2 ul.navigation {
        flex-direction: column;
        flex-wrap: nowrap !important;
        gap: 0.25rem 0 !important;
    }
}

/* ============================================================
   FOOTER v6.3 — override theme's max-width: 120px on the logo
   ============================================================ */
.main-footer__col1 img,
.footer_site_info img,
.footer_site_info .footer-secondary-logo {
    max-width: 20rem !important;
}

/* ============================================================
   SUBPAGE GROUPS — Rutgers-style sticky sidebar
   Auto-applies to ANY page that has <nav class="sub-menu">
   (Digital Exhibits group, Learn More group, plus any future ones).
   ============================================================ */

/* Desktop: two-column grid with sticky sidebar on the right */
@media (min-width: 900px) {
    body.page:has(#main-content > nav.sub-menu) #main-content {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 280px;
        gap: 2.5rem;
        align-items: start;
    }

    body.page:has(#main-content > nav.sub-menu) #main-content > nav.sub-menu {
        grid-column: 2;
        grid-row: 1 / span 99;
        position: sticky;
        top: 1rem;
        align-self: start;
        margin: 0;
    }

    body.page:has(#main-content > nav.sub-menu) #main-content > .blocks,
    body.page:has(#main-content > nav.sub-menu) #main-content > .site-page-pagination {
        grid-column: 1;
        min-width: 0;
    }

    /* Section label above the sidebar list */
    body.page:has(#main-content > nav.sub-menu) nav.sub-menu::before {
        content: "In this section";
        display: block;
        font-family: 'Noto Serif', serif;
        font-size: 0.78rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.10em;
        color: #8F1402;
        margin: 0 4px 0.85rem;
        padding-bottom: 0.55rem;
        border-bottom: 2px solid #8F1402;
    }
}

/* The list itself — same look on desktop and mobile */
nav.sub-menu {
    background: transparent;
    padding: 0;
    margin: 0 0 1.5rem;
}

nav.sub-menu ul.navigation {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

nav.sub-menu ul.navigation li {
    margin: 0;
    padding: 0;
    max-width: none;
}

nav.sub-menu ul.navigation li a {
    display: block;
    padding: 13px 16px;
    background: #ffffff;
    color: #2b2b2b;
    border: 1px solid #e6e6e6;
    border-left: 3px solid transparent;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .18s ease, transform .18s ease,
                box-shadow .18s ease, color .18s ease, background .18s ease;
}

nav.sub-menu ul.navigation li a:hover,
nav.sub-menu ul.navigation li a:focus {
    color: #8F1402;
    border-left-color: #8F1402;
    box-shadow: 0 4px 14px rgba(143, 20, 2, 0.10);
    transform: translateX(2px);
    text-decoration: none;
    background: #ffffff;
}

/* Current-page state (JS adds .is-current; aria-current as a fallback) */
nav.sub-menu ul.navigation li.is-current a,
nav.sub-menu ul.navigation li[aria-current="page"] a,
nav.sub-menu ul.navigation li a[aria-current="page"] {
    color: #8F1402;
    background: #fdf3f1;
    border-color: #f0c8c0;
    border-left: 3px solid #8F1402;
    font-weight: 700;
}

/* Mobile: stacked list above the content (no grid) */
@media (max-width: 899px) {
    nav.sub-menu { margin: 0 0 1.25rem; }
    nav.sub-menu ul.navigation { gap: 0.4rem; }
}

/* ============================================================
   SUBPAGE SIDEBAR v2 — brick-red cards
   ============================================================ */
nav.sub-menu ul.navigation li a {
    background: #9A2B1A;                      /* brick red */
    color: #ffffff;
    border: 1px solid #7A1F11;
    border-left: 3px solid #7A1F11;
    box-shadow: 0 1px 0 rgba(0,0,0,0.04);
}

nav.sub-menu ul.navigation li a:hover,
nav.sub-menu ul.navigation li a:focus {
    background: #8F1402;                      /* deeper red on hover */
    color: #ffffff;
    border-color: #5A0C01;
    border-left-color: #ffd9d2;               /* warm accent stripe */
    box-shadow: 0 6px 16px rgba(143, 20, 2, 0.28);
    transform: translateX(2px);
}

/* Current page — darker, with a bright cream left bar so it pops */
nav.sub-menu ul.navigation li.is-current a,
nav.sub-menu ul.navigation li[aria-current="page"] a,
nav.sub-menu ul.navigation li a[aria-current="page"] {
    background: #6E0F00;                      /* darkest red */
    color: #ffffff;
    border-color: #4A0900;
    border-left: 3px solid #F2C75C;           /* warm gold accent */
    font-weight: 700;
}

/* ============================================================
   SUBPAGE SIDEBAR v3 — fix grid-row blowup
   ============================================================ */
@media (min-width: 900px) {
    body.page:has(#main-content > nav.sub-menu) #main-content {
        grid-template-rows: auto;             /* don't pre-allocate rows */
        gap: 0 2.5rem;                        /* row-gap 0, col-gap 2.5 */
    }

    body.page:has(#main-content > nav.sub-menu) #main-content > nav.sub-menu {
        grid-column: 2;
        grid-row: 1;                          /* was: 1 / span 99 — the bug */
    }

    body.page:has(#main-content > nav.sub-menu) #main-content > .blocks {
        grid-column: 1;
        grid-row: 1;                          /* shares row 1 with sidebar */
    }

    body.page:has(#main-content > nav.sub-menu) #main-content > .site-page-pagination {
        grid-column: 1;
        grid-row: 2;                          /* below the content, left col */
        margin-top: 1.5rem;
    }
}

/* ============================================================
   SUBPAGE SIDEBAR v4 — put breadcrumb at the top, full width
   ============================================================ */
@media (min-width: 900px) {
    /* Catch any 4th+ child that I didn't explicitly place
       (breadcrumbs, anything else Omeka adds) and pin it to row 0,
       spanning both columns, so it sits above everything. */
    body.page:has(#main-content > nav.sub-menu) #main-content > .breadcrumbs,
    body.page:has(#main-content > nav.sub-menu) #main-content > nav.breadcrumbs,
    body.page:has(#main-content > nav.sub-menu) #main-content > .breadcrumb {
        grid-column: 1 / -1;                  /* span full width */
        grid-row: 1;                          /* row 1 (top) */
        margin: 0 0 1rem 0;
        background: transparent;              /* drop the gray pill */
        padding: 0;
    }

    /* Push the content + sidebar down to row 2 since breadcrumb owns row 1 */
    body.page:has(#main-content > nav.sub-menu) #main-content > nav.sub-menu {
        grid-row: 2;
    }
    body.page:has(#main-content > nav.sub-menu) #main-content > .blocks {
        grid-row: 2;
    }
    body.page:has(#main-content > nav.sub-menu) #main-content > .site-page-pagination {
        grid-row: 3;
        margin-top: 1.5rem;
    }
}

/* ============================================================
   FOOTER CONTACT v2 — own row, properly styled, doesn't squeeze nav
   ============================================================ */

/* Make the contact block its own full-width row at the bottom
   of the top container, regardless of where Freedom inserts it. */
.main-footer__top-container .footer-contact,
.main-footer__top-container > p,
.main-footer__top-container .main-footer__contact {
    flex: 1 1 100% !important;
    order: 99 !important;                       /* always last */
    width: 100% !important;
    margin: 0.4rem 0 0 !important;
    padding-top: 0.6rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    text-align: center !important;
    color: #f3d9d4 !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
}

/* Style the email link itself — white, underlined, hover lifts */
.main-footer__top-container .footer-contact a,
.main-footer__top-container .footer-contact a:visited,
.main-footer__top-container > p a,
.main-footer__top-container > p a:visited,
.main-footer__top-container .main-footer__contact a,
.main-footer__top-container .main-footer__contact a:visited {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 255, 255, 0.5) !important;
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color .2s ease, text-decoration-color .2s ease;
}

.main-footer__top-container .footer-contact a:hover,
.main-footer__top-container .footer-contact a:focus,
.main-footer__top-container > p a:hover,
.main-footer__top-container > p a:focus {
    color: #ffd9d2 !important;
    text-decoration-color: #ffd9d2 !important;
}

/* ============================================================
   FOOTER v6.4 — keep contact inline with nav, no top divider,
   stop the nav-overflow that overlaps the logo
   ============================================================ */

/* (1) Contact: sit inline as a normal flex sibling, no full-width row,
       no top divider, vertically centered with the nav. */
.main-footer__top-container .footer-contact,
.main-footer__top-container > p,
.main-footer__top-container .main-footer__contact {
    flex: 0 0 auto !important;          /* was: 1 1 100% */
    order: 0 !important;                /* was: 99 */
    width: auto !important;
    margin: 0 !important;               /* was: 0.4rem 0 0 + padding-top */
    padding: 0 !important;
    border-top: 0 !important;           /* kill the white divider line */
    text-align: left !important;
    align-self: center;                 /* line up with nav baseline */
    white-space: nowrap;                /* keep "Contact: email" together */
}

/* (2) Allow the nav row itself to wrap items as soon as it needs to,
       instead of overflowing leftward into the logo. v6.2 had
       flex-wrap: nowrap which caused the overlap you saw. */
.main-footer__col2 .navigation,
.main-footer__col2 ul.navigation {
    flex-wrap: wrap !important;         /* was: nowrap */
    justify-content: flex-end;          /* sit against right edge of col2 */
    gap: 0.25rem 1.1rem !important;
}

/* (3) Let the whole top container wrap col1 / col2 / contact onto two
       lines when there isn't horizontal room — instead of overlapping. */
.main-footer__top-container,
.main-footer__top-container.all-columns,
.main-footer__top-container.menu-only,
.main-footer__top-container.no-menu {
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.75rem 1.5rem;
}

/* (4) At medium widths where logo + nav + contact can't all share one
       line, drop contact below as a centered second line — but with
       NO top divider (per your request). */
@media (max-width: 1200px) {
    .main-footer__top-container .footer-contact,
    .main-footer__top-container > p,
    .main-footer__top-container .main-footer__contact {
        flex: 1 1 100% !important;
        text-align: center !important;
        margin-top: 0.25rem !important;
        border-top: 0 !important;       /* still no line */
    }
}


/* ============================================================
   ITEM-LINK H3s — smaller heading when it wraps an /item/ link
   Targets H3s whose link points at /s/slavery/item/NNN, on any page.
   ============================================================ */
h3:has(> a[href*="/s/slavery/item/"]),
h3:has(a[href*="/s/slavery/item/"]) {
    font-size: 0.9rem;          /* down from theme default ~1.6rem */
    line-height: 1.35;
    font-weight: 700;
    margin: 0.5rem 0 0.4rem;
    letter-spacing: 0;
text-decoration: underline;
}

/* And the link inside it — drop the underline, keep the red on hover */
h3:has(a[href*="/s/slavery/item/"]) > a,
h3:has(a[href*="/s/slavery/item/"]) a {
    color: #2b2b2b;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color .15s ease, border-color .15s ease;
}
h3:has(a[href*="/s/slavery/item/"]) > a:hover,
h3:has(a[href*="/s/slavery/item/"]) a:hover,
h3:has(a[href*="/s/slavery/item/"]) > a:focus,
h3:has(a[href*="/s/slavery/item/"]) a:focus {
    color: #8F1402;
}


#main-content a,
#main-content a:visited {
    color: #8F1402;
}

#main-content a:hover,
#main-content a:focus {
    color: #6E0F00;
}

#main-content nav.sub-menu a,
#main-content nav.sub-menu a:visited { color: #ffffff; }

#main-content nav.sub-menu a:hover,
#main-content nav.sub-menu a:focus  { color: #ffffff; }