/* frame.css — the site chrome shared with www.shreyasmandre.com.
 *
 * Do not hand-edit: `make sync-frame` in buildtools refetches this from
 * https://www.shreyasmandre.com/notes-frame.css. It travels with
 * header.html.in and footer.html.in, because a restyle of the website
 * changes the class names those fragments carry.
 *
 * The website itself is stock Bootstrap 5.1.3 with an empty style.css, so
 * the values below are Bootstrap's own — reproduced rather than vendored,
 * to avoid restyling every LaTeXML table and heading.
 *
 * Scope: .sm-* only. Page layout lives in layout.css.
 */

.sm-header,
.sm-footer {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans",
                 sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
}

/* ---- header ---------------------------------------------------------- */

.sm-header {
    padding: 1rem 0;                       /* Bootstrap .navbar + .py-3 */
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.sm-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .25rem 1rem;
    max-width: 1140px;                     /* Bootstrap .container at xl */
    margin: 0 auto;
    padding: 0 1rem;
}

.sm-brand {
    font-size: 1.25rem;                    /* Bootstrap .navbar-brand */
    color: rgba(0, 0, 0, .9);
    text-decoration: none;
    white-space: nowrap;
}

.sm-brand:hover { color: #0a58ca; }

/* The collapse control. The website opens its nav with
   bootstrap.bundle.min.js; these pages add no script of their own, so it is a
   checkbox and its label instead. The input stays focusable (clipped, not
   display:none) so the menu is reachable from the keyboard. */
.sm-nav-check {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

.sm-nav-burger { display: none; }

.sm-nav-burger svg { display: block; }

.sm-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 0 .25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sm-menu li { margin: 0; padding: 0; }

.sm-menu a {
    display: block;
    padding: .5rem;                        /* Bootstrap .navbar-expand-lg .nav-link */
    min-height: 44px;                      /* comfortable touch target */
    box-sizing: border-box;
    color: rgba(0, 0, 0, .55);             /* Bootstrap .navbar-light */
    text-decoration: none;
    white-space: nowrap;
}

.sm-menu a:hover,
.sm-menu a:focus { color: rgba(0, 0, 0, .7); }

/* ---- footer ---------------------------------------------------------- */

.sm-footer {
    margin-top: 3rem;
    padding: 1.5rem 1rem 2.5rem;
    border-top: 1px solid rgba(0, 0, 0, .1);
    text-align: center;
    font-size: .9rem;
    color: rgba(0, 0, 0, .65);
}

.sm-footer p { margin: .35rem 0; }

.sm-footer a { color: rgba(0, 0, 0, .75); }

.sm-footer a:hover { color: #0a58ca; }

.sm-footer-who strong { color: #212529; }

.sm-footer-legal { font-size: .85rem; }

.sm-sep { padding: 0 .5em; opacity: .5; }

.sm-social { margin-top: .9rem; }

.sm-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;                          /* touch target around a 22px icon */
    color: rgba(0, 0, 0, .65);
}

.sm-social a:hover { color: #0a58ca; }

.sm-icon { display: block; }

/* Below Bootstrap's lg breakpoint the website collapses the nav behind a
   hamburger, which needs bootstrap.bundle.min.js. Here the links simply wrap,
   packed left rather than right so they do not form a ragged staircase. No
   JavaScript is added to these pages. */
@media (max-width: 59.999rem) {
    .sm-header { padding: .5rem 0; }
    .sm-nav    { gap: 0; }

    .sm-nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: .25rem .75rem;                /* Bootstrap .navbar-toggler */
        border: 1px solid rgba(0, 0, 0, .1);
        border-radius: .25rem;
        color: rgba(0, 0, 0, .55);
        cursor: pointer;
    }

    .sm-nav-check:focus-visible + .sm-nav-burger {
        outline: 2px solid #0a58ca;
        outline-offset: 2px;
    }

    .sm-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        margin-top: .5rem;
    }

    .sm-nav-check:checked ~ .sm-menu { display: flex; }

    .sm-menu li + li { border-top: 1px solid rgba(0, 0, 0, .06); }

    .sm-menu a {
        display: flex;
        align-items: center;
        padding: .6rem .25rem;
    }
}