/**
 * Bootstrap...👎
 */
/* Reset */
svg {
    vertical-align: -.125em;
}

/* Breadcrumb Nav */
.mb-4, .my-4 {
  margin-bottom: 1rem !important;
}

.mt-4, .my-4 {
  margin-top: 1rem !important;
}

/* Footer */
#jmulibSiteFooter p {
    margin-bottom: 0;
}


/**
 * FontAwesome...👎
 */
/* Actions dropdown */
.dropdown-item.menuUndo .fa-stack {
    line-height: 1.5;
    height: auto;
    width: auto;
    padding-left: 16px;
}


/**
 * Skip to main
 */
.skip-link-main {
    position: absolute;
    transform: translateY(-140%);
}


/**
 * Cookie Consent
 */
:root {
    --cc-btn-primary-bg: var(--jmulib-color-purple);
    --cc-btn-primary-border-color: var(--jmulib-color-purple);
    --cc-btn-primary-hover-bg: color-mix(in srgb, var(--jmulib-color-purple), var(--jmulib-button-lighter));
    --cc-btn-primary-hover-border-color: var(--jmulib-color-purple);
}

html.show--consent body > :not(#cc-main) {
    filter: blur(3px);
    opacity: 0.25;
    pointer-events: none;
}

#cc-main {
    .cm__title, h2  {
        font-family: var(--jmulib-font-family-heading);
        font-size: var(--jmulib-font-size-xl-fluid);
        line-height: var(--jmulib-line-height-xl-fluid);
        font-weight: 400;
    }

    .cm__desc, p {
        color: var(--jmulib-color-font-base);
        font-size: var(--jmulib-font-size-md-fluid);
        line-height: var(--jmulib-line-height-md-fluid);
    }
    
    .cm__btn, button {
        font-size: var(--jmulib-font-size-md-fluid);

        &:is(:hover,:focus-visible) {
            outline: 0.1875rem solid var(--jmulib-color-purple);
            outline-offset: 0.25rem;
        }
    }
}


/**
 * Typography
 */
main :is(details, ol, ul, p) {
    margin-bottom: 1rem
}


/**
 * Breadcrumb and Page Navs
 */
#navBreadcrumb > ol:has(#breadcrumbAccountDashboard) > #breadcrumbLogIn,
#pageNavMenu:has(#logOutMenuItem) > #logInMenuItem {
    display: none;
}


/**
 * ILL Logo
 */
img.ill-logo {
    width: 200px;

    @media (width < 600px) {
        display: none;
    }
}


/**
 * Buttons
 */
button:focus-visible {
    outline: .1875rem solid var(--jmulib-color-purple);
}

.jmulib-button.jmulib-button-secondary {
    background-color: var(--jmulib-color-gray-dark);
    border-color: var(--jmulib-color-gray-dark);

    &:not(:disabled):not([aria-disabled]):is(:hover,:focus-visible) {
        background-color: color-mix(in srgb,var(--jmulib-color-gray-dark),var(--jmulib-button-lighter))
    }
}

.btn {
    text-decoration: none;
}

.btn-link {
    border-radius: 0;
    color: var(--jmulib-color-purple-bright);
    padding: 0;
    text-decoration: underline 1px;
    text-underline-offset: 2px;

    &:hover {
        color: var(--jmulib-color-purple-bright);
        text-decoration: underline 3px;
    }

    &:focus {
        outline: 0.1875rem solid var(--jmulib-color-purple);
        outline-offset: 0.25rem;
    }
}

.btn-primary {
    background-color: var(--jmulib-color-purple-bright);
    border-color: var(--jmulib-color-purple-bright);

    &:is(:hover,:focus)&:not(.disabled) {
        background-color: color-mix(in srgb, var(--jmulib-color-purple-bright), black 20%);
        border-color: color-mix(in srgb, var(--jmulib-color-purple-bright), black 20%);
    }
}

.btn-primary:is(.focus, :focus):not(.disabled) {
  box-shadow: 0 0 0 .2rem rgba(102,0,255,.5);
}

/* Log In/Dashboard CTA Buttons */
#ctaButton:has(#ctaAccountDashboard) > #ctaLogIn {
    display: none;
}


/**
 * Details
 */
details[open] summary {
    margin-bottom: 1.125rem;
}


/**
 * Forms
 */
main form {

    input:not([type="button"]),
    select,
    textarea {
        max-width: 600px;
    }

    input[type="checkbox"]:disabled {
        filter: invert(98%) brightness(4);
    }

    .field-desc {
        display: block;
        margin: -0.5rem 0 0.5rem;
    }

    .req {
        color: var(--jmulib-color-red-bright);
    }

    .small-notes {
        font-weight: normal;
    }
}


/**
 * Tables
 */
.table thead th,
.table td {
    border: 1px solid var(--jmulib-color-gray-medium);
    padding: .375em .75em;
}


/**
 * Banners: alert and status messages
 */
.ill-banner:has(span) {
    border-left-width: 5px;
    border-left-style: solid;
    margin-bottom: 1rem;
    padding: 1rem;

    &.ill-banner-alert {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 1rem;
        background-color: var(--jmulib-color-red-light);
        border-left-color: var(--jmulib-color-red-bright);
    }

    &.ill-banner-status {
        background-color: var(--jmulib-color-blue-light);
        border-left-color: var(--jmulib-color-blue-dark);
    }
}


/**
 * Dashboard
 */
/* Hide due date if transaction status is Request Sent*/
.due-date-hidden[data-status="Request Sent"] {
    display: none;
}


/**
 * Notification Preferences
 */
#notificationPreferences {
    fieldset {
        margin-bottom: 1.5rem;
        overflow-x: auto;
    }

    .scrollable {
        display: grid;
        grid-template-columns: 1fr auto auto;
        margin: 0.5rem 0 1.25rem;
        max-width: 600px;
        min-width: 400px;

        > * {
            padding: .5625rem;
        }

        > div {
            padding-right: 1rem;
        }

        > div:nth-of-type(even) {
            background: var(--jmulib-color-gray-extra-light);

            + label {
                background: var(--jmulib-color-gray-extra-light);

                + label {
                    background: var(--jmulib-color-gray-extra-light);
                }
            }
        }
    }

    label {
        margin-bottom: 0;

        &.notification-type {
            border-bottom: 2px solid var(--jmulib-color-font-base);
            column-gap: 0.5rem;
            display: flex;
            font-weight: 700;
        
            &:first-of-type {
                padding-right: 1rem;
                grid-column-start: 2;
            }
        }
    }
}


/**
 * Requests Lists
 */
.requests-list {
    display: flex;
    flex-direction: column;
    row-gap: 2rem;
}

.h4.card-title {
  font-size: clamp(1.125rem,.5vw + .938rem,1.375rem);
  line-height: clamp(1.631rem,.45vw + 1.462rem,1.856rem);
  margin-bottom: 1rem;
  margin-top: 0;
}

.h5.card-subtitle {
    font-size: clamp(1rem,.25vw + .906rem,1.125rem);
    font-size: var(--jmulib-font-size-md-fluid);
    line-height: clamp(1.6rem,.175vw + 1.534rem,1.688rem);
    line-height: var(--jmulib-line-height-md-fluid);
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.card-title a {
    display: block;
}

#main-electronic-delivery,
#main-renew-checked-out-items {
    margin-bottom: 4rem;
}


/**
 * Request Information Template
 */
.transaction-title {
    text-wrap: balance;
    text-align: right;
}


/**
 * Illiad Footer
 */
.foot {
    background-color: var(--jmulib-color-gray-extra-light);
    border-top: 1px solid var(--jmulib-color-gray-medium);
    font-size: var(--jmulib-font-size-sm-fluid);
    line-height: var(--jmulib-line-height-sm-fluid);
    margin: 3rem auto 0;
    max-width: var(--jmulib-container-wide);
    padding: 1rem;
    text-align: center;
    width: var(--jmulib-container-width);
}


/**
 * Utilities
 */
.scroll-x {
    overflow-x: auto;
}