/* ==========================================================================
   Local overrides for checklists.opquast.com
   Loaded AFTER the opquast-v2 CDN stylesheets in base_front.html, so selectors
   with equal specificity still win by cascade order. Rules here were
   originally in checklists/static/opquast-theme/css/style.css, which Phase 1
   stopped linking when the v2 CDN replaced the local theme.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Breadcrumb <ol> wrapper reset. __base_cl.html now wraps <li> items in
   <ol class="c-breadcrumb__list"> to satisfy HTML5 (element `li` not allowed
   as direct child of `nav`).

   The parent <nav class="c-breadcrumb"> uses `display: flex` (from CDN).
   Before the <ol> wrap, <li> were direct flex children — flex ignores
   inter-element whitespace, so items packed gap-free. After wrapping, the
   <ol> is the sole flex item and the <li> inside it would fall back to
   inline-block layout with ~3.6px whitespace gaps per item (breaking the
   ±1px visual-parity target).

   Fix: make the <ol> itself a flex container. <li> become direct flex
   children again (gap-free). `flex-wrap: wrap` covers the narrow-viewport
   case where the CDN switches items to display:block (≤49.99em). All other
   <ol> browser defaults (list-style, padding, margin) are neutralised so
   the wrapper is visually transparent.

   Scoped via descendant selector so it never touches other <ol> on the site.
   -------------------------------------------------------------------------- */
.c-breadcrumb > .c-breadcrumb__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   nav-top__links <ul> wrapper. Same HTML5 validity fix as the breadcrumb:
   the CDN template previously emitted <li> as direct children of <nav>,
   which Nu HTML Checker rejects. Wrapping in <ul> satisfies HTML5, and
   `display: contents` makes the <ul> transparent to the parent nav's
   flex layout so the <li> remain effective flex children (CDN rules
   `.nav-top__links li` use descendant combinators so they keep matching).
   Browser support: Chrome/Edge/Firefox/Safari 13+ — fine for our audience.
   -------------------------------------------------------------------------- */
.nav-top__links > .nav-top__links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

/* --------------------------------------------------------------------------
   Sticky certification CTA on criterion pages (#opq-sticky-sidebar).
   Mirrors the pre-v2 production appearance: hidden <hr>, compact headings,
   dark-navy pill button. The `criterion_promo` HTML is an opaque blob served
   by the SSO platform, so we restyle it from the outside.
   -------------------------------------------------------------------------- */
@media (min-width: 50em) {
    .c-opposite-toc-right {
        display: flex;
        align-items: flex-start;
        flex-direction: row-reverse;
        padding-bottom: 3rem;
    }

    #opq-sticky-sidebar {
        position: sticky;
        top: 24px;
        flex-shrink: 0;
        width: 320px;
        max-width: 320px;
        background: #FFFFFF;
        border: 1.5px solid #E1E1E1;
        border-radius: 12px;
        overflow: hidden;
        padding: 0;
        margin-top: 1rem;
    }

    .c-opposite-toc-right .c-opposite-toc__content {
        width: 72.95374%;
    }
}

@media (min-width: 72.5em) {
    #opq-sticky-sidebar {
        margin-left: 4.16667rem;
        margin-right: 0;
    }

    .c-opposite-toc-right .c-opposite-toc__content {
        width: 69.03915%;
    }
}

@media (max-width: 49.99em) {
    .c-opposite-toc-right {
        margin-bottom: 2rem;
    }

    #opq-sticky-sidebar {
        background: #F0F4F8;
        border: 1.5px solid #E1E1E1;
        border-radius: 12px;
        padding: 0;
        margin-bottom: 2rem;
        overflow: hidden;
    }
}

#opq-sticky-sidebar hr {
    display: none;
}

#opq-sticky-sidebar h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: #112f42;
    margin: 0 0 12px 0;
    line-height: 1.3;
}

#opq-sticky-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #374151;
}

#opq-sticky-sidebar li {
    padding: 4px 0;
    border-bottom: 1px solid #F0F4F8;
}

#opq-sticky-sidebar li:last-child {
    border-bottom: none;
}

#opq-sticky-sidebar .c-btn,
#opq-sticky-sidebar .l-btn {
    display: block;
    padding: 12px 16px;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.9rem;
    text-align: center;
    text-decoration: none;
    background-color: #112f42;
    border: 2px solid #D25148;
    border-radius: 50px;
    box-sizing: border-box;
    line-height: 1.3;
}

#opq-sticky-sidebar .c-btn:hover,
#opq-sticky-sidebar .l-btn:hover {
    background-color: #D25148;
}

/* --------------------------------------------------------------------------
   Criterion content spacing. The CDN `opquast-rules.css` gives `.c-rule-content`
   a top margin (--opq-spacing-lg ≈ 32px), designed for pages where the
   content follows a grid gap. On our criterion pages it stacks with the
   hero's own margin-bottom, leaving a ~72px gap before "Objectif". Scope the
   override to the criterion toc wrapper so other pages using `.c-rule-content`
   (if any appear later) keep the CDN default.
   -------------------------------------------------------------------------- */
.c-opposite-toc-right .c-rule-content {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Premium content marker (Avis de l'expert). Visible for staff/superadmin
   and certified users.
   -------------------------------------------------------------------------- */
.c-rule-premium {
    margin-top: 2rem;
    padding: 1.25rem 1.5rem;
    border: 1.5px solid #E1E1E1;
    border-left: 4px solid #D25148;
    border-radius: 8px;
    background: #FCFBF7;
}

.c-rule-premium__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #FFFFFF;
    background: #D25148;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.c-rule-premium__badge-icon {
    font-size: 0.9rem;
    line-height: 1;
}

.c-rule-premium__title {
    margin-top: 0.75rem;
}