/* Responsive layout layer. Loaded last so it wins over bootstrap-min.css (v2.3.1) and styles.css.
   Never edit bootstrap*.css; all layout overrides belong here. */

:root {
    --gutter: clamp(12px, 2vw, 30px);
    --shell-max: 1200px;
    --shell-pad: clamp(10px, 2vw, 15px) clamp(1vw,calc(1.25vh + 1.25vw), 70px) clamp(50px,calc(2.5vh + 2.5vw), 70px) clamp(1vw,calc(1.25vh + 1.25vw), 70px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
}

img,
video {
    height: auto;
}

input,
select,
textarea {
    max-width: 100%;
}

/* Bootstrap 2 sizes controls as content-box (20px + 8px padding + border = 30px);
   the global border-box above would otherwise shrink them to 20px. */
input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="hidden"]),
select,
.uneditable-input {
    min-height: 30px;
}

textarea {
    min-height: 60px;
}


/* ---------- Page shell ---------- */

#container {
    width: 100%;
    max-width: var(--shell-max);
    padding: var(--shell-pad);
}

/* Bootstrap 2 pins .container to 940px; the shell already handles centring and max width. */
.container {
    width: auto;
    max-width: 100%;
    margin-inline: auto;
}


/* ---------- Legacy Bootstrap 2 grid re-expressed as CSS Grid ---------- */

.row,
.row-fluid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--gutter);
    margin-left: 0;
}

/* Bootstrap's clearfix pseudo-elements would otherwise become stray grid items. */
.row::before,
.row::after,
.row-fluid::before,
.row-fluid::after {
    content: none;
    display: none;
}

.row > [class*="span"],
.row-fluid > [class*="span"] {
    float: none;
    margin-left: 0;
    width: auto;
    min-width: 0;
    min-height: 0;
}

.row > .span1,  .row-fluid > .span1  { grid-column: span 1; }
.row > .span2,  .row-fluid > .span2  { grid-column: span 2; }
.row > .span3,  .row-fluid > .span3  { grid-column: span 3; }
.row > .span4,  .row-fluid > .span4  { grid-column: span 4; }
.row > .span5,  .row-fluid > .span5  { grid-column: span 5; }
.row > .span6,  .row-fluid > .span6  { grid-column: span 6; }
.row > .span7,  .row-fluid > .span7  { grid-column: span 7; }
.row > .span8,  .row-fluid > .span8  { grid-column: span 8; }
.row > .span9,  .row-fluid > .span9  { grid-column: span 9; }
.row > .span10, .row-fluid > .span10 { grid-column: span 10; }
.row > .span11, .row-fluid > .span11 { grid-column: span 11; }
.row > .span12, .row-fluid > .span12 { grid-column: span 12; }

/* Tablet: halves, then full width for anything wider than a half. */
@media (max-width: 991px) {
    .row > .span1,  .row-fluid > .span1,
    .row > .span2,  .row-fluid > .span2,
    .row > .span3,  .row-fluid > .span3,
    .row > .span4,  .row-fluid > .span4,
    .row > .span5,  .row-fluid > .span5 {
        grid-column: span 6;
    }

    .row > .span6,  .row-fluid > .span6,
    .row > .span7,  .row-fluid > .span7,
    .row > .span8,  .row-fluid > .span8,
    .row > .span9,  .row-fluid > .span9,
    .row > .span10, .row-fluid > .span10,
    .row > .span11, .row-fluid > .span11,
    .row > .span12, .row-fluid > .span12 {
        grid-column: span 12;
    }
}

@media (max-width: 767px) {
    .row > [class*="span"],
    .row-fluid > [class*="span"] {
        grid-column: 1 / -1;
    }
}


/* ---------- Masthead ---------- */

.masthead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "brand   utility  utility"
        "brand   nav      search"
        "tagline tagline  tagline"
        "staff   staff    staff";
    align-items: center;
    column-gap: 0;
    row-gap: 0.5rem;
    margin-bottom: 1.5rem;
}

/* column-gap is 0 so the search bar can sit flush against the nav strip. */
.utility-nav,
.masthead .navbar {
    margin-left: 1rem;
}

.brand      { grid-area: brand; }
.utility-nav{ grid-area: utility; }
.masthead .navbar { grid-area: nav; margin: 0; }
.site-search{ grid-area: search; }
#tagline    { grid-area: tagline; }
.staff-tools{ grid-area: staff; }

/* Lets the two menus sit in their own header grid areas while still collapsing together on mobile. */
#site-nav {
    display: contents;
    input {
        font-size: unset;
    }
}
#site-nav :is(.catalog-dropdown, .nav-link) {
    font-size: 1rem;
}

.brand img {
    max-width: 90%;
}

.masthead .utility-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0.15rem;
    margin: 0;
    list-style: none;
}

.masthead .utility-nav > li {
    float: none;
    margin: 0;
}

.masthead .utility-nav .catalog-dropdown > .dropdown-toggle {
    color: hsl(120, 100%, 25%);
    font-weight: 800;
}

#logout-btn {
    border: none;
    color: darkred;
    background-color: transparent;
    border-radius: 5px;
    text-decoration: none;
    padding: 4px 10px;
}

.masthead .primary-nav {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    list-style: none;
}

.masthead .primary-nav > li {
    float: none;
}

.site-search {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.site-search [name="q"] {
    width: 100%;
    min-width: 0;
    margin: 0;
}

.site-search [type="image"] {
    width: auto;
    flex: none;
}

/* Large screens: the search reads as the right-hand end of the menu strip. */
@media (min-width: 992px) {
    .masthead .navbar,
    .site-search {
        align-self: stretch;
    }

    .masthead .navbar .navbar-inner {
        height: 100%;
        display: flex;
        align-items: center;
        border-right: 0;
        border-radius: 4px 0 0 4px;
    }

    .site-search {
        padding: 0 12px 0 6px;
        background-image: linear-gradient(to bottom, #ffffff, #e3e3e3);
        border: 1px solid #d4d4d4;
        border-left: 0;
        border-radius: 0 4px 4px 0;
    }

    .site-search [name="q"] {
        max-width: 154px;
    }
}

.staff-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0;
    list-style: none;
}

.staff-tools button {
    font-weight: bold;
}

.staff-tools li:first-child button { color: red; }
.staff-tools li:last-child button  { color: maroon; }
.staff-tools form { margin: 0; }

.nav-toggle {
    display: none;
    grid-area: toggle;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(to bottom, #ffffff, #e3e3e3);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    padding: 20px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
    display: block;
    width: 20px;
    height: 2px;
    background: #690000;
}

.nav-toggle-bars {
    position: relative;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
    content: "";
    position: absolute;
    left: 0;
}

.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after  { top: 6px; }


@media (max-width: 991px) {
    .masthead {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "brand  toggle"
            "search search"
            "nav    nav"
            "tagline tagline"
            "staff  staff";
        align-items: center;
    }

    .nav-toggle {
        display: flex;
    }

    /* Both menus collapse together into the one panel. */
    #site-nav {
        display: block;
        grid-area: nav;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.2s ease;
    }

    #site-nav.is-open {
        max-height: 80vh;
        overflow-y: auto;
    }

    .masthead .utility-nav,
    .masthead .primary-nav {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
    }

    .masthead .utility-nav > li > a,
    .masthead .primary-nav > li > a {
        display: block;
        padding: 0.6rem 0.8rem;
    }

    .masthead .navbar {
        margin-top: 0.5rem;
    }

    /* Submenus expand inline rather than overlaying. */
    #site-nav .dropdown-menu {
        position: static;
        display: none;
        float: none;
        width: auto;
        box-shadow: none;
        border: 0;
        margin: 0;
        background: transparent;
    }

    #site-nav .dropdown.open > .dropdown-menu {
        display: block;
    }

    #site-nav .dropdown-menu > li > a {
        padding-left: 2rem;
    }
}


/* ---------- Footer ---------- */

footer {
    position: relative;
    width: auto;
    font-size: 90%;
    background-color: #690000;
    text-align: center;
    color: #fff;
    padding: 1rem clamp(12px, 3vw, 24px);
}

footer a:link,
footer a:active,
footer a:visited {
    color: #fff;
    text-decoration: none;
}

footer a:hover {
    color: #fff;
    text-decoration: underline;
}

.footer-inner {
    max-width: var(--shell-max);
    margin-inline: auto;
}

@media (max-width: 991px) {
    /* span1 blocks in the footer are layout spacers with no content. */
    footer .row > .span1 {
        display: none;
    }

    footer .row {
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        row-gap: 1.5rem;
        text-align: center;
    }

    footer .memberships.row {
        grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
        align-items: center;
        justify-items: center;
    }

    footer .row > [class*="span"] {
        grid-column: auto;
    }
}


/* ---------- Pages ---------- */

.masthead form {
    margin: 0;
}

/* Long author/topic names must not push the multi-column blocks wider than their frame. */
.css-columns,
.css-columns a,
.topic-list li {
    overflow-wrap: break-word;
    margin-block-end: clamp(0.25rem, calc(1vw + 1vh), 0.5rem);
}

.css-columns > * {
    break-inside: avoid;
}

/* Bootstrap gives lists a 25px left margin, which overflows .css-columns' 100% width. */
.topic-list {
    margin-left: 0;
    padding-left: 0;
}

/* Cart: side-scrolls rather than stacking, so rows stay readable. */
.table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.shopping-cart {
    width: 100%;
    min-width: 600px;
}

.cart-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.cart-item-thumb {
    flex: none;
    width: 85px;
    padding-top: 5px;
}

.cart-item-thumb img {
    max-width: 75px;
    max-height: 120px;
}

.cart-item-detail {
    min-width: 0;
}

.cart-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

@media (max-width: 767px) {
    /* cart.css lays this out as three fixed-percentage flex columns. */
    #checkout-header {
        display: block;
        text-align: center;
    }

    #checkout-header > div:nth-of-type(1),
    #checkout-header > div:nth-of-type(2),
    #checkout-header > div:nth-of-type(3) {
        width: auto;
        margin: 0 0 0.75rem 0;
    }

    #order_processing_buttons {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.5rem;
    }
}

/* Search/topic results stay two-up on tablets, unlike the general collapse rule. */
@media (min-width: 768px) and (max-width: 991px) {
    .row > .span6:has(.book_result) {
        grid-column: span 6;
    }
}

/* Home page: slides share one grid cell so the outgoing and incoming slides
   crossfade in place instead of stacking and pushing each other down. */
#slideshow {
    display: grid;
    position: relative;
    height: auto;
    min-height: 140px;
}

#slideshow > div {
    grid-area: 1 / 1;
    height: auto;
    min-height: 140px;
}

/* The cover image carries an inline max-width in px; keep its cap but never overflow narrow screens. */
.lightbox-gallery img {
    max-width: min(350px, 100%) !important;
}

/* Book page: the Related Books rule only makes sense while it sits beside the details column. */@media (max-width: 991px) {
    .related {
        margin-left: 0;
        border-left: 0;
    }

    .book_result .caption {
        float: none;
    }
}