/* ==========================================================================
   Site theme — the bar (DOCUMENTATION_SITE_THEME.md).
   Celebration with the clock chip (C1), ported 1:1 from the approved sitting
   page (CCTHEMEBUILD pages/sitting.html: .bar, .num, .tm-chip, the .dark and
   .phone rules). Markup: templates/includes/_site_theme_bar.html.

   Loaded only while a bar renders (templates/includes/_site_theme_head.html),
   after the surface stylesheet, so it wins equal-specificity ties.

   - Colours are the approved page's own values, scoped to the bar. No token
     is added to tokens.css (DOCUMENTATION_LIGHT_DARK_THEME_SYSTEM.md: the
     token taxonomy is locked).
   - Dark mode = [data-theme="dark"] on <html>, set by the Light/Dark boot
     script. Pages without that script (terms, MCM scheduling) stay light.
   - Every inherited property the pages set differently is restated here, so
     the bar looks the same on every surface.
   ========================================================================== */

.cc-site-theme-bar {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 12px 40px;
    margin: 0;
    position: relative;
    box-sizing: border-box;
    flex: none;
    align-self: stretch;
    justify-self: stretch;
    font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 16px;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    color: #1d1d1f;
    background-color: #f8f1df;
    background-image: repeating-linear-gradient(135deg, rgba(210, 153, 34, .18) 0 1px, transparent 1px 11px);
}

.cc-site-theme-bar[hidden] {
    display: none;
}

.cc-site-theme-bar *,
.cc-site-theme-bar *::before,
.cc-site-theme-bar *::after {
    box-sizing: border-box;
}

/* The "10 / YEARS" mark */
.cc-site-theme-bar .cc-st-num {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 40px;
    line-height: .9;
    color: #b8821a;
}

.cc-site-theme-bar .cc-st-ten {
    display: block;
    width: 1.0965em;            /* the "10" inline box: both advances, -.02em spacing after each */
    height: .9em;               /* the approved line-height */
    overflow: visible;          /* the italic leans past its advance */
    fill: currentColor;
}

.cc-site-theme-bar .cc-st-num small {
    margin: 3px 0 0;
    font-family: "DM Sans", sans-serif;
    font-size: 9px;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .16em;
    color: #9a6700;
}

/* Title over subtitle */
.cc-site-theme-bar .cc-st-words {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    gap: 2px;
}

.cc-site-theme-bar .cc-st-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.cc-site-theme-bar .cc-st-sub {
    margin: 0;
    font-size: 13px;
    opacity: .82;
}

/* The clock chip (C1) */
.cc-site-theme-bar .cc-st-tm {
    flex: none;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.cc-site-theme-bar .cc-st-tm[hidden] {
    display: none;
}

.cc-site-theme-bar .cc-st-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: #fbf3dc;
    background: #1d1d1f;
}

.cc-site-theme-bar .cc-st-chip b {
    font-weight: 700;
    color: #e7bb4b;
}

.cc-site-theme-bar .cc-st-ico {
    flex: none;
    display: block;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* The button. An anchor with a filled look restates :visited and declares
   color (Pattern #34): tokens.css's a:visited would otherwise paint it gold. */
.cc-site-theme-bar .cc-st-cta,
.cc-site-theme-bar .cc-st-cta:visited {
    flex: none;
    display: inline-block;
    padding: 10px 18px;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none;
    color: #1d1d1f;
    background: #d29922;
}

.cc-site-theme-bar .cc-st-cta:hover {
    color: #1d1d1f;
    background: #c08b1d;
    text-decoration: none;
}

/* The dismiss button. The padding widens the hit area; the negative margin
   keeps the icon where the approved page draws it. */
.cc-site-theme-bar .cc-st-x {
    flex: none;
    margin: 0 -4px 0 0;
    padding: 4px;
    border: 0;
    border-radius: 6px;
    font: inherit;
    font-size: 16px;
    line-height: 1;
    color: inherit;
    background: none;
    opacity: .55;
    cursor: pointer;
}

.cc-site-theme-bar .cc-st-x:hover {
    opacity: .9;
}

.cc-site-theme-bar .cc-st-cta:focus-visible,
.cc-site-theme-bar .cc-st-x:focus-visible {
    outline: 2px solid #1d1d1f;
    outline-offset: 2px;
    opacity: 1;
}

/* Dark mode — the approved page's dark band */
[data-theme="dark"] .cc-site-theme-bar {
    color: #f1e7cf;
    background-color: #1f1a10;
    background-image: repeating-linear-gradient(135deg, rgba(210, 153, 34, .22) 0 1px, transparent 1px 11px);
}

[data-theme="dark"] .cc-site-theme-bar .cc-st-num {
    color: #e7bb4b;
}

[data-theme="dark"] .cc-site-theme-bar .cc-st-num small {
    color: #d4af37;
}

[data-theme="dark"] .cc-site-theme-bar .cc-st-chip {
    color: #1d1d1f;
    background: #d29922;
}

[data-theme="dark"] .cc-site-theme-bar .cc-st-chip b {
    color: #1d1d1f;
}

[data-theme="dark"] .cc-site-theme-bar .cc-st-cta:focus-visible,
[data-theme="dark"] .cc-site-theme-bar .cc-st-x:focus-visible {
    outline-color: #e7bb4b;
}

/* Narrow widths — two rows: mark + title + dismiss / chip + button.
   The subtitle hides. */
@media (max-width: 860px) {
    .cc-site-theme-bar {
        flex-wrap: wrap;
        gap: 6px 10px;
        padding: 8px 12px 9px;
    }

    .cc-site-theme-bar .cc-st-num {
        font-size: 26px;
    }

    .cc-site-theme-bar .cc-st-num small {
        margin-top: 2px;
        font-size: 7px;
    }

    .cc-site-theme-bar .cc-st-words {
        flex: 1 1 180px;
    }

    .cc-site-theme-bar .cc-st-title {
        font-size: 12.5px;
    }

    .cc-site-theme-bar .cc-st-sub {
        display: none;
    }

    .cc-site-theme-bar .cc-st-x {
        order: 1;
        font-size: 14px;
    }

    .cc-site-theme-bar .cc-st-tm {
        order: 2;
        flex: 1 1 auto;
        margin-left: 0;
    }

    .cc-site-theme-bar .cc-st-cta,
    .cc-site-theme-bar .cc-st-cta:visited {
        order: 3;
        margin-left: auto;
        padding: 7px 11px;
        font-size: 12px;
    }

    .cc-site-theme-bar .cc-st-chip {
        padding: 6px 9px;
        font-size: 11.5px;
    }
}

@media print {
    .cc-site-theme-bar {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Coexistence — the page around the bar, only while the bar shows.
   bar.js sets these on <html> while the bar is on screen:
     data-site-theme          the theme's style key
     --cc-site-theme-page     page top to the bar's bottom (px)
     --cc-site-theme-view     viewport top to the bar's bottom (px); 0 once
                              the bar has scrolled away
     data-site-theme-stack    the page's <body> centres its content with a
                              row flexbox (customer_auth.css; MCM scheduling)
   -------------------------------------------------------------------------- */

/* Fixed elements pinned to the top of the window move down by the bar while
   it is in view, so nothing covers it on load: the theme toggle corner
   (login, consent, email preferences, subscription confirmed, the help page),
   the lesson page's search bar, the store's cart dropdown, the login popups. */
html[data-site-theme] .cc-toggle-fixed-corner,
html[data-site-theme] .search-bar-immersive,
html[data-site-theme] .cart-dropdown-content,
html[data-site-theme] .success-popup:not(.success-popup--centered) {
    margin-top: var(--cc-site-theme-view, 0px);
}

/* Absolute elements placed from the top of the page (the help page's logo). */
html[data-site-theme] .cc-ml-logo {
    margin-top: var(--cc-site-theme-page, 0px);
}

/* A body that centres one card with a row flexbox stacks instead: the bar on
   top at full width, the card centred in the space below it. */
html[data-site-theme-stack] body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    justify-content: normal;
    justify-items: center;
    align-items: center;
}