/*
    What styles the site's own header and footer around the Site Header and Site Footer blocks:
    the sticky header, the tenant's caption, the "Go to Tenant" link, the footer's background and
    the copyright, credit and version line at the very bottom. The menu bar and the footer's links
    are the blocks', and their CSS is in each block (FinalSprint.Web.Library/SiteChrome holds what
    a block comes with).

    The footer's line is rooted on the layout's footer inside :where(), so a theme restyles or hides
    it with an ordinary selector such as `footer a`. The class names and ids here (#versionInfo,
    #tenantCopyright, caption-wrapper) are part of what themes are built against.
*/

/* from site.css, unchanged and not rooted: the bare header and footer rules still reach any in
   page content */

/* Header Styles */
header {
    display: flex;
    flex-direction: column;
    z-index: 1030;
    position: sticky;
    top: 0;
}

.sticky-header {
    box-shadow: 0 3px 5px rgba(0,0,0,.2);
}

.caption-wrapper {
    width: 100%;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
    height: 28px;
}

.sticky-header .caption-wrapper {
    opacity: 0;
    height: 0px;
    visibility: hidden;
}

/* Floats over the top right corner instead of taking part in the page layout, so it needs nothing
   rendered for it and can't disturb a tenant's caption. */
.site-tenant-link {
    position: fixed;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--primary, #444);
    border-radius: 4px;
    background-color: var(--primary-lightest, #fff);
    color: var(--primary, #444);
    font-size: 0.75rem;
    line-height: 22px;
    text-decoration: none;
    white-space: nowrap;
    opacity: 1;
    transition: all 0.3s ease-in-out;
    z-index: 9999;
}

    .site-tenant-link:hover,
    .site-tenant-link:focus {
        background-color: var(--primary, #444);
        color: var(--primary-lightest, #fff);
        text-decoration: none;
    }

/* visibility as well as opacity, like the caption bar above - faded out on its own the link is
   still the hit target for that corner, so clicks meant for the sticky header would land on it */
.sticky-header .site-tenant-link {
    opacity: 0;
    visibility: hidden;
}

/* Footer Styles */
footer {
    background-color: var(--dark);
    color: white;
}

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

:where(.content-wrapper > footer #versionInfo) {
    display: flex;
    font-size: 0.5rem;
    justify-content: space-between;
    padding-left: 0.3em;
    padding-right: 0.3em;
}

@media (min-width: 576px) {
    :where(.content-wrapper > footer #versionInfo) {
        font-size: 0.8rem;
        padding-left: 0.5em;
        padding-right: 0.5em;
        padding-bottom: 0.5em;
    }
}

:where(.content-wrapper > footer #versionInfo) p {
    margin: 0;
}

:where(.content-wrapper > footer #versionInfo) a {
    color: white;
    text-decoration: none;
}

    :where(.content-wrapper > footer #versionInfo) a:hover {
        color: #d22956;
    }

:where(.content-wrapper > footer #tenantCopyright) {
    cursor: default;
}

    :where(.content-wrapper > footer #tenantCopyright):hover {
        color: white;
    }

@media print {
    :where(.content-wrapper > footer), :where(.content-wrapper > footer) * {
        display: none !important;
    }
}