/* =========================
   MOFFETT LIBRARY UI LAYER
   - WorldCat Discovery search box
   - Index and 'Get started' panels
   - Library-specific link/quick link patterns
   ========================= */

/* =========================
   WorldCat Discovery (library catalog)
   ========================= */
 #discovery-search-box, #discovery-search-box * {
     box-sizing: border-box !important;
     margin: 0;
     padding: 0;
     text-align: left 
}
 #discovery-search-box .material-tab {
     display: inline-block;
     user-select: none;
     cursor: pointer;
     background-color: #840028;
     color: #fff;
     min-width: 1.5rem;
     padding: .5em;
     box-sizing: border-box;
     border-radius: .25em .25em 0 0;
     margin-right: .4em;
     z-index: 2 
}
 #discovery-search-form {
     position: 'relative';
     width: auto;
     padding: 1.25em 2em 2em;
     background-color: #333333 !important;
     color: #fff !important;
     z-index: 1;
     line-height: initial 
}
 #discovery-search-box .material-tab.active-tab {
     background-color: #333333 !important;
     color: #fff !important 
}
 #discovery-index-container {
     position: relative;
     height: 3em;
     background-color: white;
     color: white 
}
 #discovery-index-container:after {
     content: '\f078';
     display: block;
     font-family: 'FontAwesome', sans-serif;
     position: absolute;
     top: 0;
     right: .5em;
     line-height: 3em;
     z-index: 5 
}
 #discovery-index-container #discovery-search-select {
     position: relative;
     z-index: 10;
     height: 100%;
     min-width: initial;
     font-size: 1em;
     padding: 0 2em 0 1em;
     background-color: transparent;
     border-top: 1px solid #ccc;
     border-right: 0;
     border-bottom: 1px solid #ccc;
     border-left: 1px solid #ccc;
     border-image: initial;
     border-radius: 0;
     -webkit-appearance: none;
     -moz-appearance: none 
}
select::-ms-expand {
    display: none;
}

/* =========================================
   MOFFETT LIBRARY HOMEPAGE — CUSTOM STYLES
   (accessibility-first, CMS-safe cards)
   ========================================= */

/* =========================
   THEME DIAL (edit these only)
   ========================= */
:root {
    /* Colors */
    --msu-maroon: #840028;
    --msu-gold: #eaac00;
    --text-dark: #333333;

    /* Badge theme (REST state) — white tile with hairline border */
    --badge-bg: #ffffff;
    --badge-border: #e8e8e8;
    --badge-border-w: 1px;

    /* Shape + sizing */
    --badge-radius: 10px;

    /* Desktop (compact to prevent wraps) */
    --tile-size-d: 36px;
    --glyph-size-d: 18px;
    --gap-d: 9px;

    /* Tablet + Mobile (roomy) */
    --tile-size-m: 48px;
    --glyph-size-m: 24px;
    --gap-m: 12px;
}

/* =========================
   ACCESSIBILITY-SAFE RESETS
   ========================= */
main a {
    text-shadow: none !important;
    box-shadow: none !important;
}
main a:focus:not(:focus-visible) {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
*, *::before, *::after {
    text-shadow: none !important;
}

/* =========================
   HOVER ARTIFACT CLEANUP
   ========================= */
main a:hover,
main a:active {
    border: none !important;
    box-shadow: none !important;
    background-image: none !important;
}
main .icon-link-list a,
main .icon-link-list a:hover,
main .icon-link-list a:active {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* =========================
   CLICKABLE CARDS (wrapper)
   ========================= */
.shadow-box-hover {
    max-width: 680px !important;   /* was 600px — a bit wider on big screens */
    width: 100% !important;
    margin: 0 auto 20px auto !important;
    display: block !important;
}

/* Single breakpoint: below 768px, just fill the column */
@media (max-width: 768px) {
    .shadow-box-hover {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 0 15px 0 !important;
    }
}
.shadow-box-hover:focus-within,
.shadow-box-hover:hover {
    outline: 4px solid var(--msu-gold) !important;
}

/* =========================
   WORLDCAT DISCOVERY IMAGE
   (simple image card)
   ========================= */
.worldcat-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

.worldcat-image-link {
    display: block;
}

.worldcat-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    border: 2px solid var(--msu-gold);
    border-radius: 0;
}

/* =========================
   FEATURE CARDS (hero tiles)
   CMS-safe single hit area
   ========================= */
.card-wrap {
    position: relative;
    display: block;
    isolation: isolate; /* keep focus ring pseudo-element above inner content */
}
.card-hit {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-decoration: none !important;
    color: inherit !important;
}

/* Card shell */
.card {
    position: relative;
    height: 225px;
    background: #333333;
    overflow: hidden;
    padding: 20px;
    border-radius: 0;
    box-sizing: border-box;
    border: 1px solid #e8e8e8; /* remove if you don’t want the edge */
}

/* Media layer */
.card__media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}
.card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Scrim layer (above image, below text) */
.card-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}
.card-scrim--dark {
    background: linear-gradient(
        180deg,
        rgba(34, 34, 34, 0.6) 0%,
        rgba(34, 34, 34, 0.88) 30%,
        rgba(34, 34, 34, 0.98) 100%
    );
}
.card-scrim--maroon {
    background: linear-gradient(
        180deg,
        rgba(132, 0, 40, 0.7) 0%,
        rgba(132, 0, 40, 0.9) 30%,
        rgba(109, 0, 33, 0.98) 100%
    );
}
/* Flat variants */
.card-scrim--dark-flat {
    background: rgba(34, 34, 34, 0.99);
}
.card-scrim--maroon-flat {
    background: rgba(109, 0, 33, 0.99);
}

/* Text layer */
.card__content {
    position: relative;
    z-index: 3;
    color: #fff;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Eyebrow */
.card__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
}
.card__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--msu-gold);
}
.card__badge i {
    color: #222222 !important;
}

/* Title + sub */
.card__title {
    margin: 0 0 8px 0;
    font-size: 22pt;
    line-height: 1;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
}
.card__title-accent {
    color: var(--msu-gold);
}
.card__sub {
    margin: 0;
    font-size: 12pt;
    font-weight: 400;
    color: #fff;
}

/* Hover parity ring (mouse) */
.card-wrap:hover .card {
    box-shadow: 0 0 0 4px var(--msu-gold) !important;
    outline: none !important;
}

/* Optional: subtle image zoom (respects motion prefs) */
@media (prefers-reduced-motion: no-preference) {
    .card__img {
        transition: transform 0.25s ease;
    }
    .card-wrap:hover .card__img {
        transform: scale(1.03);
    }
}

/* Tablet/mobile font tweak only */
@media (max-width: 1141px) {
    .card__title {
        font-size: 22pt;
    }
    .card__sub {
        font-size: 12pt;
    }
}

/* =========================
   LINK COLUMNS (roomier)
   ========================= */

/* Column heading underline */
.link-column-heading {
    position: relative !important;
    display: block !important;
    margin: 0 0 15px 0 !important;
    padding-bottom: 6px !important; /* space for rule */
    color: var(--text-dark) !important;
    font-family: sans-serif !important;
    font-size: 16pt !important;
    font-weight: 700 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: inset 0 -3px 0 0 var(--msu-gold) !important;
}

/* Icon list */
.icon-link-list {
    line-height: 200% !important;
    list-style: none !important;
    padding-left: 0 !important;
    margin-top: 0 !important;
}
.icon-link-list li {
    margin-bottom: 8px !important;
}

/* Single-link pattern: icon + label */
.icon-link-list a {
    font-size: 12.25pt !important;
    color: var(--text-dark) !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--gap-d) !important;
    line-height: 1.4 !important;
    padding: 4px 2px !important;
    min-height: 44px !important;
    flex-wrap: nowrap !important;
}

/* Focus-visible ring */
main .icon-link-list a:focus-visible {
    outline: 3px solid var(--msu-gold) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* Badge at rest */
.icon-link-list .icon {
    display: inline-grid !important;
    place-items: center !important;
    width: var(--tile-size-d) !important;
    height: var(--tile-size-d) !important;
    min-width: var(--tile-size-d) !important;
    min-height: var(--tile-size-d) !important;
    border-radius: var(--badge-radius) !important;
    background: var(--badge-bg) !important;
    color: var(--msu-maroon) !important;
    border: var(--badge-border-w) solid var(--badge-border) !important;
    line-height: 0 !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.06s ease !important;
}
.icon-link-list .icon i,
.icon-link-list .icon svg {
    color: currentColor !important;
    fill: currentColor !important;
    font-size: var(--glyph-size-d) !important;
}

/* Hover/focus badge */
.icon-link-list a:hover .icon,
.icon-link-list a:focus-visible .icon {
    background: var(--msu-maroon) !important;
    color: #ffffff !important;
    border-color: var(--msu-maroon) !important;
}

/* Optional micro-interaction */
@media (prefers-reduced-motion: no-preference) {
    .icon-link-list a:hover .icon {
        transform: translateY(-1px) !important;
    }
}

/* =========================
   SOCIAL ICON ROW
   ========================= */
.social-icon-row {
    display: flex !important;
    gap: 8px !important;
    margin-top: 0 !important;
    line-height: 1 !important;
}
.social-icon-row li {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}
.social-icon-row a {
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    outline-offset: 2px !important;
}
.social-icon-row a:hover,
.social-icon-row a:focus:not(:focus-visible) {
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.social-icon-row .icon-circle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #333333 !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: 2px solid transparent !important; /* no ring at rest */
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}
.social-icon-row .icon-circle i {
    font-size: 20px !important;
    color: #f5f5f5 !important;
}
main .social-icon-row a:hover .icon-circle,
main .social-icon-row a:focus-visible .icon-circle {
    background-color: var(--msu-maroon) !important;
    border-color: var(--msu-gold) !important;
}
main .social-icon-row a:focus-visible {
    outline: 4px solid var(--msu-gold) !important;
}

/* =========================
   QUICK LINKS LIST (chevrons)
   ========================= */
.quick-links-list {
    padding-bottom: 10px !important;
}
.quick-links-list li {
    margin-bottom: 10px !important;
    font-weight: normal !important;
}
.quick-links-list .fa-chevron-right {
    color: var(--msu-maroon) !important;
    margin-right: 6px !important;
    font-size: 14pt !important;
}
.quick-links-list2 .fa-chevron-right {
    color: var(--msu-maroon) !important;
    margin-right: 6px !important;
    font-size: 14pt !important;
}
/* Base link */
.quick-links-list a {
    display: inline-block !important;
    min-height: 44px !important; /* touch target parity */
    padding: 6px 2px !important;
    text-decoration: none !important;
    color: inherit !important;
}
/* Keyboard focus ring */
main .quick-links-list a:focus-visible {
    outline: 3px solid var(--msu-gold) !important;
    outline-offset: 2px !important;
    border-radius: 4px !important;
}

/* =========================
   SCREEN READER ONLY TEXT
   ========================= */
.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================
   RESPONSIVE LAYOUT
   ========================= */
@media (max-width: 1141px) {
    .msu-col-1-4,
    .msu-col-1-3,
    .msu-col-1-2,
    .msu-col-2-3 {
        width: 100% !important;
        max-width: 100% !important;
        flex-basis: 100% !important;
        margin-bottom: 30px !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .msu-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Keep roomy badge sizes on smaller screens */
    .icon-link-list a {
        gap: var(--gap-m) !important;
        flex-wrap: wrap !important;
    }
    .icon-link-list .icon {
        width: var(--tile-size-m) !important;
        height: var(--tile-size-m) !important;
        min-width: var(--tile-size-m) !important;
        min-height: var(--tile-size-m) !important;
    }
    .icon-link-list .icon i,
    .icon-link-list .icon svg {
        font-size: var(--glyph-size-m) !important;
    }
}

/* =========================
   MOTION SAFETY
   ========================= */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* =========================
   BULLETPROOF KEYBOARD RING FOR CARDS
   ========================= */
.card-wrap:focus-within::after {
    content: "";
    position: absolute;
    inset: -4px; /* draw outside the card edge */
    border: 4px solid var(--msu-gold);
    border-radius: 0;
    pointer-events: none;
    z-index: 10; /* above everything inside */
}
/* Remove the thin default focus ring from the full-card link */
.card-hit:focus,
.card-hit:focus-visible {
    outline: none !important;
}

/* =========================
   LOWER, CONSISTENT UNDERLINE
   (icon columns + quick links)
   ========================= */
.icon-link-list a:hover .icon + span,
.icon-link-list a:focus-visible .icon + span,
.quick-links-list a:hover > span,
.quick-links-list a:focus-visible > span {
    color: var(--msu-maroon) !important;
    text-decoration: none !important; /* disable native underline */
    display: inline-block !important; /* needed for padding + inset line */
    padding-bottom: 4px !important;
    box-shadow: inset 0 -2px 0 0 currentColor !important; /* crisp line */
}

/* =========================
   GET STARTED – LINKED SUBHEADINGS
   ========================= */
.library-subheading {
    margin: 6px 0 6px !important;
    font-family: sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
}
main .library-subheading a {
    color: inherit !important;
    text-decoration: none !important;
    padding-bottom: 3px !important;
    /* faint rule at rest, same tone as other subtle borders */
    box-shadow: inset 0 -1px 0 0 var(--badge-border) !important;
    transition: color 0.15s ease, box-shadow 0.15s ease;
}
main .library-subheading a:hover {
    color: var(--msu-maroon) !important;
    box-shadow: inset 0 -2px 0 0 currentColor !important;
    text-decoration: none !important;
}
main .library-subheading a:focus-visible {
    outline: 2px solid var(--msu-gold) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
    color: var(--msu-maroon) !important;
    box-shadow: inset 0 -2px 0 0 currentColor !important;
    text-decoration: none !important;
}
.library-subheading .ext-icon {
    font-size: 0.8em;
    color: var(--msu-gold);
    margin-left: 6px;
    vertical-align: baseline;
    transition: color 0.15s ease;
}

/* Icon sits *inside* the link now */
main .library-subheading a:hover .ext-icon,
main .library-subheading a:focus-visible .ext-icon {
    color: var(--msu-maroon) !important;
}

/* =========================
   GET STARTED – KICKER LABELS
   ========================= */
.library-kicker {
    margin: 10px 0 14px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--msu-maroon) !important;
    text-transform: uppercase;
    letter-spacing: 0.09em;
}
main .not-prose p + .library-kicker {
    margin-top: 16px !important;
}

/* =========================
   OPTIONAL EYEBROW PATTERN
   (available for future use)
   ========================= */
.library-eyebrow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0 10px !important;
}
.library-eyebrow__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--badge-radius);
    background: var(--msu-gold);
    color: #222222;
}
.library-eyebrow__badge i {
    font-size: 16px;
    line-height: 1;
}
.library-eyebrow__label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--msu-maroon);
}

/* =========================
   DATABASES PANEL
   ========================= */
.database-panel {
    margin-top: 10px;
    margin-bottom: 20px;
    padding: 16px 18px;
    border-radius: 4px;
    background: #ececec; /* slightly darker neutral */
    border-left: 8px solid var(--msu-maroon);
}

/* H3 inside the panel, styled as icon + label */
.database-panel__title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap; /* label can wrap, badge stays fixed */
    margin: 0 0 8px; /* slightly tighter */
    font-family: sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
}

/* Label takes remaining space */
.database-panel__label {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    font-size: 15px;
    color: var(--msu-maroon);
    flex: 1 1 auto;
}

/* Gold badge */
.database-panel__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--badge-radius);
    background: var(--msu-gold);
    color: #222222;
    flex: 0 0 30px; /* no shrink, fixed width */
}
.database-panel__badge i {
    font-size: 16px;
    line-height: 1;
}

/* Panel body spacing */
.database-panel p {
    margin: 0 0 8px;
}

.database-panel .library-kicker {
    margin: 6px 0 8px !important;
}

.database-panel .quick-links-list {
    margin-bottom: 0 !important;
}

/* On narrow screens, top-align the badge with first line of text */
@media (max-width: 600px) {
    .database-panel__title {
        align-items: flex-start;
    }

    .database-panel__badge {
        margin-top: 2px;
    }
}

.icon-link-list.quick-links-list2 {
  display: block;        /* in case the base style uses flex */
  column-count: 2;       /* two visual columns */
  column-gap: 2rem;      /* adjust spacing between columns */
}

.icon-link-list.quick-links-list2 li {
  break-inside: avoid;   /* keep each item from splitting between columns */
}

@media (max-width: 768px) {
  .icon-link-list.quick-links-list2 {
    column-count: 1;     /* back to a single column on smaller screens */
  }
}