/* Breadcrumb trail on service pages and the blog
   (components/breadcrumbs.njk; the trail itself is built in
   src/_data/eleventyComputed.js).

   A quiet single line between the site navigation and the page: Lato at body
   size, brand blue links underlined like every link in text, and a gray
   chevron between steps. It names the pages above this one only; the h1 right
   below names this one.

   The chevron is two borders of an empty box, not a typed character, so
   screen readers never read it and forced-colors mode redraws it in the
   text color along with everything else.

   The left edge matches the heading below it, which sits in a different
   column on each kind of page:

   - Service pages: .whole_page_text_wrap's column (style.css: 768px ->
     640px, 1280px -> 1200px, 1920px -> 1440px), the one the service banners
     use (components/ee-banner.css), so "Home" sits right above the banner
     heading.
   - Posts (--post): the centered 720px article column plus the 8px inset
     that .entry-header has, or 2rem at 640px and narrower (style.css).
   - Category, tag and later blog pages, and the course pages under /learn/
     (--archive): the archive's 1240px
     column with its 20px inset (ee-blog-index.css), which works out to a
     1200px column with 20px at the sides. */
.ee-breadcrumb {
    --ee-breadcrumb-column: 100%;
    --ee-breadcrumb-inset: max(20px, (100% - var(--ee-breadcrumb-column)) / 2);
    padding: 14px var(--ee-breadcrumb-inset) 10px;
    font-family: 'Lato', sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ee-dark-gray);
}

@media only screen and (min-width: 768px) {
    .ee-breadcrumb { --ee-breadcrumb-column: 640px; }
}

@media only screen and (min-width: 1280px) {
    .ee-breadcrumb { --ee-breadcrumb-column: 1200px; }
}

@media only screen and (min-width: 1920px) {
    .ee-breadcrumb { --ee-breadcrumb-column: 1440px; }
}

.ee-breadcrumb.ee-breadcrumb--archive {
    --ee-breadcrumb-inset: max(20px, (100% - 1200px) / 2);
}

.ee-breadcrumb.ee-breadcrumb--post {
    --ee-breadcrumb-inset: calc(max(0px, (100% - 720px) / 2) + 8px);
}

@media screen and (max-width: 640px) {
    .ee-breadcrumb.ee-breadcrumb--post { --ee-breadcrumb-inset: 2rem; }
}

.ee-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ee-breadcrumb li {
    display: flex;
    align-items: center;
    margin: 0;
}

.ee-breadcrumb li + li::before {
    content: "";
    flex: none;
    width: 0.4em;
    height: 0.4em;
    margin: 0 0.8em 0 0.6em;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

/* 16px text on a 1.5 line height gives each link a 24px tall target, the
   WCAG 2.5.8 minimum, without padding that would push the chevrons apart. */
.ee-breadcrumb a {
    color: var(--ee-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.ee-breadcrumb a:hover {
    text-decoration-thickness: 2px;
}

.ee-breadcrumb a:focus-visible {
    outline: 3px solid var(--ee-blue);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Archive titles keep 56px above them (ee-blog-index.css) to clear the
   navigation. With the trail in between, that left "Home > Blog" floating
   halfway between the menu and the title; 24px ties it to the title. */
.ee-breadcrumb + #content .archive-page .page-header {
    margin-top: 24px;
}

/* Pages that open with the gray header band (category pages, the course and
   bundle pages): the trail sits on the same gray and the band follows with no
   gap, so the color changes right under the navigation, where the home
   page's blue banner starts, on every page. The trail stays outside <main>
   (skip link and F6 pass it); it is only painted to match. `~`, not `+`:
   the trail's JSON-LD <script> sits between it and #content. */
.ee-breadcrumb:has(~ #content .category-masthead) {
    background: var(--bg-light-gray);
}

.ee-breadcrumb ~ #content .archive-page .page-header.category-masthead {
    margin-top: 0;
}

.ee-breadcrumb ~ #content .category-masthead-inner {
    padding-top: 24px;
}

@media screen and (max-width: 900px) {
    .ee-breadcrumb ~ #content .category-masthead-inner {
        padding-top: 16px;
    }
}