/*
   SchoolMissionModern — site-wide breadcrumb
   Source baseline: current Dropbox copy of breadcrumb-shell.css

   Design rules:
   - One generated breadcrumb for the whole site.
   - Page-specific/legacy breadcrumb markup is hidden in place.
   - No shadow, border, gradient, spacer, or extra-height band below it.
   - The page starts immediately after the breadcrumb row.
*/

:root {
    --sm-breadcrumb-edge: 16px;
    --sm-breadcrumb-width: 1080px;
    --sm-breadcrumb-header-height: 0px;
}

.site-breadcrumb-host {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    position: relative;
    z-index: 90;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
}

.site-breadcrumb-host .site-breadcrumb:not(.sitewide-breadcrumb),
.site-breadcrumb-host .worksheets-breadcrumb,
.site-breadcrumb-host .lp-breadcrumb,
.site-breadcrumb-host .lesson-breadcrumb,
.site-breadcrumb-host .tech-breadcrumb,
.site-breadcrumb-host .breadcrumbheader,
body .site-breadcrumb:not(.sitewide-breadcrumb),
body .worksheets-breadcrumb,
body .lp-breadcrumb,
body .lesson-breadcrumb,
body .tech-breadcrumb,
body .breadcrumbheader {
    display: none !important;
}

body.has-site-breadcrumb .site-main,
.site-main {
    padding-top: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Existing spacing for pages that DO have a breadcrumb. */
[class$="-page"]:has([class*="-hero"]),
.sm-page:has([class*="-hero"]) {
    padding-top: 50px !important;
}

/* Landing pages without a breadcrumb use the same visual gap as Contact Us. */
body:not(.has-site-breadcrumb) [class$="-page"]:has([class*="-hero"]),
body:not(.has-site-breadcrumb) .sm-page:has([class*="-hero"]) {
    padding-top: 26px !important;
}

/* Contact Us has a -24px top margin, so 50px padding produces the same
   effective 26px visual gap as the other breadcrumb-free landing pages. */
body:not(.has-site-breadcrumb) .contact-page {
    padding-top: 50px !important;
}

.sitewide-breadcrumb {
    display: block;
    width: 100%;
    margin: 0 !important;
    padding: 8px max(var(--sm-breadcrumb-edge), calc((100vw - var(--sm-breadcrumb-width)) / 2)) !important;
    box-sizing: border-box;
    background: #fff !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #68727d;
    font-family: inherit;
    font-size: 0.86rem;
    line-height: 1.4;
    text-align: left;
}

.sitewide-breadcrumb-item {
    display: inline;
}

.sitewide-breadcrumb-item + .sitewide-breadcrumb-item::before {
    content: "\203A";
    display: inline-block;
    margin: 0 9px;
    color: #a0a8b0;
}

.sitewide-breadcrumb a {
    color: #2b63aa;
    text-decoration: none !important;
}

.sitewide-breadcrumb a:hover,
.sitewide-breadcrumb a:focus {
    color: #245590;
    text-decoration: underline !important;
}

.sitewide-breadcrumb-current {
    color: #68727d;
}

.site-breadcrumb-host.is-condensed .sitewide-breadcrumb {
    position: fixed !important;
    top: var(--sm-breadcrumb-header-height) !important;
    left: 0 !important;
    width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    padding-left: max(var(--sm-breadcrumb-edge), calc((100vw - var(--sm-breadcrumb-width)) / 2)) !important;
    padding-right: max(var(--sm-breadcrumb-edge), calc((100vw - var(--sm-breadcrumb-width)) / 2)) !important;
    box-sizing: border-box !important;
    background: rgba(255,255,255,.98) !important;
    border: 0 !important;
    box-shadow: 0 2px 8px rgba(25,66,105,.08) !important;
    z-index: 1000;
    font-size: 13px !important;
    line-height: 1.35 !important;
}

@media (max-width: 760px) {
    :root {
        --sm-breadcrumb-edge: 10px;
        --sm-breadcrumb-width: 760px;
    }

    .sitewide-breadcrumb {
        padding-left: var(--sm-breadcrumb-edge) !important;
        padding-right: var(--sm-breadcrumb-edge) !important;
    }

    .site-breadcrumb-host.is-condensed .sitewide-breadcrumb {
        padding-left: var(--sm-breadcrumb-edge) !important;
        padding-right: var(--sm-breadcrumb-edge) !important;
    }

    /* Existing mobile spacing for pages that DO have a breadcrumb. */
    [class$="-page"]:has([class*="-hero"]),
    .sm-page:has([class*="-hero"]) {
        padding-top: 32px !important;
    }

    /* Breadcrumb-free landing pages use the same visual spacing as Contact Us. */
    body:not(.has-site-breadcrumb) [class$="-page"]:has([class*="-hero"]),
    body:not(.has-site-breadcrumb) .sm-page:has([class*="-hero"]) {
        padding-top: 32px !important;
    }

    /* Contact Us keeps its existing -24px offset, so 56px gives a 32px gap. */
    body:not(.has-site-breadcrumb) .contact-page {
        padding-top: 56px !important;
    }
}