/* Front-end navigation affordances owned by the core plugin.
 *
 * The menu's one call to action: Log In / Go to Portal.
 *
 * Lives in the plugin, not the theme, for two reasons. OUS_MenuSync is the
 * single source of truth for this link (a theme-side copy was written once
 * and removed as a duplicate-link bug), so its styling belongs beside it.
 * And this install's host deploys wp-content/plugins but not
 * wp-content/themes, so theme CSS is not a reliable delivery path.
 *
 * Everything resolves through var(--bh-*, <fallback>) so it themes correctly
 * on a site using our tokens and still looks deliberate on one that is not. */
.oust-nav-list .ous-menu-account-cta,
.wp-block-navigation .ous-menu-account-cta,
li.ous-menu-account-cta {
    /* Pushes it to the bottom of a column-flex menu even when other items
       are short. Harmless in a horizontal menu, where it just sits last. */
    margin-top: auto;
}
.ous-menu-account-cta > a,
.ous-menu-account-cta > a:link,
.ous-menu-account-cta > a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    /* 44px min target: this is the primary action on a phone. */
    min-height: 44px;
    padding: 10px 20px;
    border-radius: 999px;
    background: var(--bh-accent, #c0563a);
    /* Not --bh-text: that is the page foreground, which on a dark theme is
       light and would vanish on a light accent. This needs the colour that
       belongs ON the accent. */
    color: var(--bh-accent-contrast, #fff);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.ous-menu-account-cta > a:hover,
.ous-menu-account-cta > a:focus-visible {
    background: var(--bh-accent-strong, var(--bh-accent, #c0563a));
    box-shadow: var(--bh-shadow, 0 8px 20px -10px rgba(0, 0, 0, .55));
    transform: translateY(-1px);
}
.ous-menu-account-cta > a:focus-visible {
    outline: 2px solid var(--bh-accent, #c0563a);
    outline-offset: 2px;
}
.ous-menu-account-cta > a:active {
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .ous-menu-account-cta > a {
        transition: none;
    }
    .ous-menu-account-cta > a:hover,
    .ous-menu-account-cta > a:focus-visible {
        transform: none;
    }
}

/* Back-to-catalog / back-to-archive links.
 *
 * Shared because bh-courses and bh-contest render the same affordance for
 * the same reason -- a single item was a dead end -- and two copies of one
 * pattern is how they drift. Each plugin keeps its own specific class for
 * targeting; this supplies the treatment.
 *
 * Measured before this rule: 97x20 and 83x16. These are standalone
 * navigation links, not links inline in a sentence, so the WCAG 2.5.8
 * inline-text exemption does not apply to them and they need a real target. */
.ous-back-link,
.ous-back-link > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 4px 2px;
    color: var(--bh-text-dim, #6b7280);
    font-size: 14px;
    text-decoration: none;
}
/* This link is the first thing a listing-child page (a course, a
 * contest) renders into <main>, so under builder themes that float the
 * site header (position:absolute — Etch), it landed under the header,
 * overlapping the nav/hamburger. One shared token, --bh-header-clearance
 * (bh-courses/-contest read the same one), default 72px to match the
 * theme's own first-section padding; set it to 0 for a static-header
 * theme. */
.ous-back-link {
    margin-top: var(--bh-header-clearance, 72px);
    margin-bottom: 10px;
}
.ous-back-link:hover,
.ous-back-link:focus-visible,
.ous-back-link > a:hover,
.ous-back-link > a:focus-visible {
    color: var(--bh-accent, #c0563a);
    text-decoration: underline;
}
.ous-back-link:focus-visible,
.ous-back-link > a:focus-visible {
    outline: 2px solid var(--bh-accent, #c0563a);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sign-in gate — OUS_Visibility::render_login_notice(), shown by
 * bh-courses (lesson + course), bh-contest, and anywhere else that
 * gates content behind login. It rendered as bare browser-default text
 * + a stray .button link; give it a real, centred card that reads as a
 * deliberate "members only" moment, not a broken page. Tokens with
 * literal fallbacks so it still looks right on a site that hasn't
 * loaded the brand token block. */
.ous-login-required {
    box-sizing: border-box;
    max-width: 460px;
    /* px, not rem — builder themes (ACSS) set html{font-size:62.5%},
       so 1rem there is 10px and rem-based type/spacing comes out tiny */
    margin: var(--bh-header-clearance, 72px) auto 48px;
    padding: 40px 32px;
    text-align: center;
    background: var(--bh-surface, #faf8f5);
    border: 1px solid var(--bh-border, #e6e1d9);
    border-radius: var(--bh-radius, 12px);
    color: var(--bh-text, #1d2327);
}
.ous-login-required p {
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
    color: var(--bh-text, #1d2327);
}
.ous-login-required p + p {
    margin-top: 20px;
}
/* Beats the theme's own generic .button that also sits on this anchor. */
.ous-login-required .ous-login-required-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 24px;
    border: none;
    border-radius: 999px;
    background: var(--bh-accent, #c0563a);
    color: #fff;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.ous-login-required .ous-login-required-cta:hover {
    background: var(--bh-accent-strong, var(--bh-accent, #a8442c));
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.ous-login-required .ous-login-required-cta:focus-visible {
    outline: 2px solid var(--bh-accent, #c0563a);
    outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
    .ous-login-required .ous-login-required-cta {
        transition: none;
    }
    .ous-login-required .ous-login-required-cta:hover {
        transform: none;
    }
}
@media (max-width: 600px) {
    .ous-login-required {
        margin-inline: 16px;
        padding: 32px 20px;
    }
}

/* ================= Standalone ecosystem surface =================
   body.bh-standalone (OUS_MenuSync) — a course/contest/portal page the
   site owner wants to feel like "the other half of the site": the
   theme's own nav and footer are hidden and the ecosystem shows its
   own slim bar instead. Fonts and the dark background stay shared. */
body.bh-standalone > header,
body.bh-standalone > header.navigation,
body.bh-standalone > footer,
body.bh-standalone > footer.footer {
    display: none !important;
}
/* No floating theme header to clear anymore, but every ecosystem
   surface still wants breathing room below the eco-nav — this token
   already drives that top spacing on the catalog, the lesson layout
   and the portal shell, so a small value here keeps them all
   consistent instead of flush against the eco-nav's border. */
body.bh-standalone {
    --bh-header-clearance: 24px;
    background: var(--bh-bg, #170807);
}
body.bh-standalone main,
body.bh-standalone main#main {
    min-height: 100vh;
}

.bh-eco-nav {
    border-bottom: 1px solid var(--bh-border, #3D1B14);
    background: color-mix(in srgb, var(--bh-bg, #170807) 82%, #000);
}
/* The WP admin bar is position:fixed over the top of the page; the
   eco-nav is the first thing in the body flow, so it needs to start
   below it while an admin is viewing. */
body.admin-bar.bh-standalone .bh-eco-nav { margin-top: 32px; }
@media screen and (max-width: 782px) {
    body.admin-bar.bh-standalone .bh-eco-nav { margin-top: 46px; }
}
.bh-eco-nav-inner {
    max-width: 1200px;
    margin-inline: auto;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.bh-eco-nav-home {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--bh-font-display, inherit);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--bh-text-dim, #B99584);
    text-decoration: none;
    white-space: nowrap;
    transition: color .15s ease;
}
.bh-eco-nav-home:hover,
.bh-eco-nav-home:focus-visible { color: var(--bh-text, #EDDFCB); }
.bh-eco-nav-arrow { font-size: 15px; line-height: 1; }
.bh-eco-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    flex-wrap: wrap;
}
.bh-eco-nav-link {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bh-text-dim, #B99584);
    text-decoration: none;
    transition: color .15s ease, background-color .15s ease;
}
.bh-eco-nav-link:hover,
.bh-eco-nav-link:focus-visible {
    color: var(--bh-text, #EDDFCB);
    background: color-mix(in srgb, var(--bh-accent, #C1503A) 12%, transparent);
}
.bh-eco-nav-link.is-active {
    /* Accent-tinted TEXT on an accent-tint background measured 3.23:1
       elsewhere (tools/check-accent-on-tint.js). "Active" reads from
       the accent-tint fill + an accent hairline instead; the label
       keeps the full surface foreground so it stays legible. */
    color: var(--bh-text, #EDDFCB);
    background: var(--bh-accent-muted-bg, color-mix(in srgb, var(--bh-accent, #C1503A) 16%, transparent));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bh-accent, #C1503A) 45%, transparent);
}
.bh-eco-nav-link:focus-visible,
.bh-eco-nav-home:focus-visible {
    outline: 2px solid var(--bh-accent, #C1503A);
    outline-offset: 2px;
}
@media (max-width: 600px) {
    .bh-eco-nav-inner { gap: 12px; padding: 10px 16px; }
    .bh-eco-nav-links { margin-left: 0; width: 100%; }
    .bh-eco-nav-link { padding: 6px 10px; }
}