/* ***DO NOTE DELETE files under 'upload customization files' below - it will delete the styling of the LibGuides and break their appearance!*** */
/* PLEASE DO NOT CHANGE OR REMOVE ANY CODE UNLESS FAMILIAR WITH HTML/CSS/JAVASCRIPT. */
/* Contact SpringShare support for assistance, if needed. */

/* ==========================================================================
   VARIABLES
   ========================================================================== */
:root {
    --msu-maroon: #840028;
    --msu-dark: #333333;
    --msu-gold: #EAAC00;
    --msu-maroon-dark: #72202B;
}

/* Target specific containers but exclude header */
.container:not(.header),
#s-lc-page-maincontent,
#s-lc-public-title-area {
    max-width: 1440px !important;
    margin: 0 auto !important;
    width: 100% !important;
}

/* Keep header full width */
.header {
    width: 100% !important;
    max-width: none !important;
}

.header-right {
    width: 100% !important;
}

/* MSU footer specific width */
.msu-footer .container {
    max-width: 1440px !important;
    margin: 0 auto;
    width: 100%;
}

#s-lg-guide-main {
    min-height: calc(100vh - 500px) !important; /* Subtract header + footer height */
}

/* ==========================================================================
   BASE STYLES & TYPOGRAPHY
   ========================================================================== */
/* Base resets and typography scale */
body,
html {
    font-size: 16px;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    line-height: 1.5;
}

/* Typography scale */
h1 {
    font-size: 2.5em; /* 40px */
    color: var(--msu-dark);
    font-weight: 600;
    font-style: normal;
}

h2 {
    font-size: 2em; /* 32px */
}

h3 {
    font-size: 1.75em; /* 28px */
}

h4 {
    font-size: 1.5em; /* 24px */
}

small {
    font-size: 0.875em; /* 14px */
}

/* Base link styles */
a {
    color: var(--msu-maroon);
}

/* ==========================================================================
   HEADER & NAVIGATION
   ========================================================================== */
/* Main header structure */
.header {
    display: flex;
    height: 80px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Header left section with logo */
.header-left {
    background-color: var(--msu-dark);
    width: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-left a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
}

.logo {
    height: 65px;
    max-width: 100%;
}

/* Header right section with navigation */
.header-right {
    background-color: var(--msu-maroon);
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0 20px;
}

/* Navigation menu */
.nav-menu {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    height: 100%;
    align-items: center;
}

.nav-item {
    position: relative;
    margin-left: 20px;
    height: 100%;
    display: flex;
    align-items: center;
}

/* Navigation buttons */
.nav-item > button {
    background: none;
    border: none;
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: flex;
    align-items: center;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.3s ease;
    border-radius: 1px;
    cursor: pointer;
    height: 100%;
    font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
    position: relative;
    z-index: 1001;
}

.nav-item > button:hover,
.nav-item > button:focus {
    background-color: var(--msu-maroon-dark);
    outline: 1px solid var(--msu-gold);
}

/* Dropdown arrow indicator */
.nav-item > button::after {
    content: '\f078';
    font-family: 'FontAwesome', serif;
    color: var(--msu-gold);
    font-size: 12px;
    margin-left: 5px;
}

/* Dropdown menus */
.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--msu-maroon-dark);
    min-width: 200px;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
    z-index: 1000;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.nav-item:last-child .dropdown-content {
    left: auto;
    right: 0;
}

.nav-item > button[aria-expanded="true"] + .dropdown-content {
    display: block;
}

/* Dropdown links */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 15px;
    transition: background-color 0.3s ease;
    font-family: 'Open Sans', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
        sans-serif;
}

.dropdown-content a:hover,
.dropdown-content a:focus {
    background-color: var(--msu-maroon);
    color: white;
    outline: none;
    box-shadow: inset 0 0 0 1px var(--msu-gold);
}

/* Mobile menu toggle */
.menu-toggle {
    display: none;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
/* Back to top button */
#s-lib-scroll-top {
    display: none !important;
}

.custom-back-to-top {
    display: block;
    background: transparent;
    border: 2px solid var(--msu-maroon);
    border-radius: 4px;
    width: 40px;
    height: 40px;
    text-align: center;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease, background 0.2s ease;
    cursor: pointer;
    text-decoration: none;
}

.custom-back-to-top i {
    color: var(--msu-maroon);
    font-size: 1.2em;
    line-height: 36px;
    transition: color 0.2s ease;
}

.custom-back-to-top:hover {
    background: var(--msu-maroon);
}

.custom-back-to-top:hover i {
    color: white;
}

/* ==========================================================================
   LIBGUIDES SIDE NAVIGATION FONT WEIGHT FIXES (UPDATED)
   ========================================================================== */

/* Make main section headers (blue highlighted ones) bolder */
.nav-pills.nav-stacked > li > a {
    font-weight: 600 !important;
}

/* Make sub-items (nested under main sections) lighter */
.nav-pills.nav-stacked li ul li a,
.nav-pills.nav-stacked .nav-stacked li a {
    font-weight: 400 !important;
}

/* Keep the maroon active page indicator as-is for location */
.nav-pills.nav-stacked li.active a {
    font-weight: inherit !important; /* Let it use the weight from above rules */
}

/* ==========================================================================
   SPRINGSHARE FOOTER OVERRIDES
   ========================================================================== */
/* Basic container styling for all pages */
#s-lib-footer-public {
    background: transparent !important;
    border: none !important;
    width: 100% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    position: relative;
    top: 20px;
}

/* Hide Springshare branding elements */
#s-lib-footer-brand,
#s-lib-footer-rights,
#s-lib-footer-support-link,
#s-lg-guide-header-subjects,
#s-lg-guide-header-tags {
    display: none !important;
}

/* Guide page specific styling */
.s-lib-footer-guide-info {
    padding: 10px 0;
    text-align: right !important;
}

/* Springshare footer login alignment */
#s-lib-footer-login-link {
    color: var(--msu-maroon);
    margin-left: 10px;
    float: right !important;
    display: block !important;
}

/* Target just the login container */
#s-lib-footer-login-container {
    text-align: right !important;
    float: right !important;
}

/* ==========================================================================
   MSU CUSTOM FOOTER
   ========================================================================== */
/* Main footer container */
.msu-footer {
    background-color: var(--msu-dark);
    color: white;
    padding: 16px 0 24px;  /* less top padding, keep comfy bottom padding */
    margin-top: 10px;
    border-top: 6px solid var(--msu-gold);
}

.msu-footer h3 {
    color: white;
    padding-bottom: 5px;
    margin-bottom: 15px;
    font-size: 1.3em;
    font-weight: 600;
}
/* Spacer heading in footer – keep for structure but collapse its height */
.msu-footer h3.msu-footer-spacer {
    visibility: hidden;
    margin: 0;
    padding: 0;
    height: 0;
}

/* Logo and Social Media Section */
.logo-social-container {
    max-width: 250px;
    margin-top: 18px; /* start with 18px, tweak if needed */
}

.footer-social-link {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #ffffff;
    text-align: center;
    line-height: 36px;
    margin-right: 8px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.footer-social-link i {
    color: var(--msu-dark);
    font-size: 1.2em;
    transition: color 0.2s ease;
}

.footer-social-link:hover {
    transform: translateY(-2px);
    background-color: var(--msu-maroon);
}

.footer-social-link:hover i {
    color: #ffffff !important;
}

/* Contact Info Section */
.msu-footer .contact-info {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9em;
}

.msu-footer .contact-info li {
    margin-bottom: 6px;
    display: flex;
    align-items: center;
}

.msu-footer .contact-info i {
    color: var(--msu-gold);
    margin-right: 10px;
    width: 16px;
    margin-top: 0;
}

.msu-footer .contact-info .address-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.msu-footer .contact-info a {
    color: white;
    text-decoration: none;
    position: relative;
    transition: color 0.2s ease;
}

/* Underline animation for links */
.msu-footer .contact-info a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--msu-gold);
    transition: width 0.3s ease;
}

.msu-footer .contact-info a:hover {
    color: var(--msu-gold);
}

.msu-footer .contact-info a:hover::after {
    width: 100%;
}

/* Special alignment for address */
.msu-footer .contact-info li:last-child {
    align-items: flex-start;
}

.msu-footer .contact-info li:last-child i {
    margin-top: 3px;
}

.msu-footer .contact-info .address-wrapper span {
    line-height: 1.4;
}

/* LibCal Hours Widget Styling */
.s-lc-w-today {
    width: 100%;
    color: white;
    border: none;
    font-size: 0.9em;
    margin-bottom: 0;
}

/* Table structure */
.s-lc-w-today td,
.s-lc-w-today th {
    padding: 2px 0;
    border: none;
}

/* Department sections */
.s-lc-w-location {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 4px;
    margin-top: 4px;
}

.s-lc-w-location:first-of-type {
    border-top: none;
    padding-top: 0;
    margin-top: 0;
}

.s-lc-w-location td {
    font-weight: normal;
}

.s-lc-w-department .s-lc-w-name {
    font-size: 0.9em;
    color: rgba(255, 255, 255, 0.9) !important;
}

.s-lc-w-times {
    border: none;
    font-weight: 500;
}

/* Hours widget links */
.s-lc-w-today a,
.s-lc-w-today-view-link,
.s-lc-w-today .s-lc-w-name a,
#s_lc_tdh_5807_0 a {
    color: white !important;
    text-decoration: none !important;
    position: relative;
    transition: color 0.2s ease;
}

/* Link hover effects */
.s-lc-w-today a::after,
.s-lc-w-today-view-link::after,
.s-lc-w-today .s-lc-w-name a::after,
#s_lc_tdh_5807_0 a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--msu-gold);
    transition: width 0.3s ease;
}

.s-lc-w-today a:hover,
.s-lc-w-today-view-link:hover,
.s-lc-w-today .s-lc-w-name a:hover,
#s_lc_tdh_5807_0 a:hover {
    color: var(--msu-gold) !important;
    text-decoration: none !important;
}

.s-lc-w-today a:hover::after,
.s-lc-w-today-view-link:hover::after,
.s-lc-w-today .s-lc-w-name a:hover::after,
#s_lc_tdh_5807_0 a:hover::after {
    width: 100%;
}

/* View All Hours section */
.s-lc-w-today-view-all {
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.s-lc-w-today-view-link {
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Hide unnecessary elements */
.s-lc-w-head,
.s-lc-w-btn {
    display: none;
}

/* Screen reader text handling */
.s-lc-w-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Show only the date text */
.s-lc-w-sr-only.s-lc-w-date {
    position: static;
    width: auto;
    height: auto;
    clip: auto;
    color: white;
    font-size: 0.9em;
    margin-bottom: 8px;
}

/* Footer Bottom Links - both types */
.footer-links a:not(.footer-inline-link),
.footer-inline-link {
    color: white;
    text-decoration: none !important; /* Force no default underline */
    position: relative;
}

.footer-links a:not(.footer-inline-link) {
    margin-left: 20px;
    font-size: 0.9em;
}

/* Add the underline animation for both */
.footer-links a:not(.footer-inline-link)::after,
.footer-inline-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1px;
    bottom: -2px;
    left: 0;
    background-color: var(--msu-gold);
    transition: width 0.3s ease;
}

/* Hover effects for both */
.footer-links a:not(.footer-inline-link):hover,
.footer-inline-link:hover {
    color: var(--msu-gold);
}

.footer-links a:not(.footer-inline-link):hover::after,
.footer-inline-link:hover::after {
    width: 100%;
}

/* Adds line break for address in footer */
.address-link {
    display: inline-block;
}

.address-link span {
    display: block;
}
.msu-footer-logo-wrap {
    margin-bottom: 15px;
}
/* Logo wrapper (remove old inline max-width) */
.msu-footer-logo-wrap img {
    max-width: 275px;
    height: auto;
}

/* Spacer heading used just to align the logo column */
.msu-footer-spacer {
    visibility: hidden;
    margin-bottom: -15px;
}

/* Bottom bar in footer */
.msu-footer-bottom {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #4a4a4a;
}

.msu-footer-bottom-text {
    color: white;
    font-size: 0.9em;
    margin: 0;
}

.msu-footer-bottom-left {
    text-align: left;
}

.msu-footer-bottom-right {
    text-align: right;
}

/* Date label inserted above LibCal hours */
.custom-date {
    color: #ECAC00;
    font-size: 0.85em;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ==========================================================================
   MEDIA QUERIES
   ========================================================================== */

/* Typography adjustments */
@media screen and (max-width: 768px) {
    body {
        font-size: 15px; /* Slightly smaller base size for mobile */
    }
}

/* Header and Navigation */
@media (max-width: 1200px) {
    /* Header structure */
    .header {
        flex-direction: column;
        height: auto;
    }

    .header-left,
    .header-right {
        width: 100%;
        justify-content: center;
    }

    .header-right {
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
    }

    /* Navigation menu */
    .nav-menu {
        width: 100%;
        flex-direction: column;
        display: none;
    }

    .nav-menu.active {
        display: flex;
    }

    .nav-item {
        width: 100%;
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
    }

    .nav-item > button {
        width: 100%;
        justify-content: space-between;
        padding: 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    /* Dropdown positioning */
    .nav-item:last-child .dropdown-content {
        left: 0;
        right: auto;
    }

    .dropdown-content {
        position: static;
        width: 100%;
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out;
    }

    .dropdown-content.active {
        max-height: 1000px;
        transition: max-height 0.5s ease-in;
    }

    .dropdown-content a {
        padding-left: 30px;
        background-color: rgba(0, 0, 0, 0.1);
    }

    /* Mobile menu toggle */
    .menu-toggle {
        display: block;
        background: none;
        border: none;
        color: white;
        font-size: 24px;
        padding: 10px;
        cursor: pointer;
    }
}

/* Footer Responsive Styles */
@media (max-width: 1200px) {
    /* Springshare footer adjustments */
    .s-lib-footer-guide-info {
        text-align: left;
        padding: 10px 15px;
    }

    #s-lib-footer-public {
        text-align: left !important;
    }

    #s-lib-footer-login-link {
        display: inline-block;
        margin-left: 0;
        margin-top: 5px;
    }

    .s-lib-footer-guide-info > div {
        word-break: break-word;
    }

    /* MSU Footer adjustments */
    .msu-footer {
        padding: 40px 15px;
    }

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Logo and social icons */
    .msu-footer .row > div:first-child {
        text-align: center;
    }

    .msu-footer img {
        margin: 0 auto 20px;
        display: block;
    }

    .logo-social-container {
        max-width: 275px;
        margin: 0 auto;
    }

    .social-icons-container {
        text-align: left;
        margin-top: 15px;
    }

    .msu-footer .social-icons {
        text-align: center;
        margin-bottom: 30px;
    }

    .footer-social-link {
        margin: 0 4px 10px;
    }

    /* Contact section */
    .msu-footer .contact-info {
        margin-bottom: 20px;
    }

    /* Hours widget */
    .s-lc-w-today {
        margin-top: 10px;
    }

    /* Bottom links */
    .footer-links {
        text-align: left !important;
        margin-top: 10px;
    }

    .footer-links a:not(.footer-inline-link) {
        margin-left: 0;
        margin-right: 20px;
        display: inline-block;
        margin-top: 5px;
    }
}
/* ==========================================================================
   LibGuides content sections – Library Services pattern
   ========================================================================== */

.guide-section {
    padding: 0 15px;
    margin-bottom: 40px;
}


/* Top-level section heading inside a guide tab */
.guide-section-title {
    font-family: "Roboto Slab", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--msu-dark);
    margin: 30px 0 20px;
    padding-bottom: 8px;
    border-bottom: 2px solid #862633; /* maroon underline like your original */
}

/* Intro paragraph under the section heading */
.guide-section-lede {
    margin-bottom: 30px;
}

/* Subheading like “Research Support” */
.guide-subheading {
    font-family: "Roboto Slab", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", serif;
    color: #444444;
    border-bottom: 2px solid #862633;
    padding-bottom: 8px;
    margin: 30px 0 20px;
    font-size: 1.35rem;
    font-weight: 700;
}

/* Icon list for services */
.service-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.service-list__item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.service-list__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background-color: var(--msu-dark);
    border-radius: 50%;
    text-align: center;
    margin-right: 12px;
    flex-shrink: 0;
}

.service-list__icon i {
    color: #ffffff;
    font-size: 0.9rem;
}

/* Text block next to the icon */
.service-list__body {
    line-height: 1.5;
}

/* Link label (“Get Started:”) */
.service-list__link {
    font-weight: 600;
}

/* ==========================================================================
   LIBGUIDES HEADER, BREADCRUMB & LAYOUT TWEAKS (Feb 2025)
   ========================================================================== */

/* Give the bordered LibGuides containers some breathing room */
.s-lib-side-borders {
    padding-left: 20px;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .s-lib-side-borders {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Breadcrumb legibility + spacing */
#s-lib-bc {
    font-size: 0.95rem;
    color: #555;
    margin-bottom: 0.35rem;
}

#s-lib-bc .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.35rem;
}

#s-lib-bc .breadcrumb > li + li::before {
    content: "›";
    padding: 0 0.35rem;
    color: var(--msu-dark);
}

#s-lib-bc a {
    color: var(--msu-dark);
    text-decoration: none;
}

#s-lib-bc a:hover,
#s-lib-bc a:focus {
    text-decoration: underline;
}

/* Guide title: Roboto Slab hero heading */
#s-lg-guide-header-info {
    margin-top: 0.75rem;
    margin-bottom: 1.25rem;
}

#s-lg-guide-name {
    font-family: "Roboto Slab", "Open Sans", system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", serif;
    font-size: 2.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    margin: 0 0 0.5rem;
}

/* Strong focus outline for the mobile menu toggle */
.menu-toggle:focus {
    outline: 2px solid var(--msu-gold);
    outline-offset: 2px;
}