/* =======================================================================
   Cloudera — white-label skin (ADR-021 §5)

   Isolated, brand-owned stylesheet. Loaded LAST on the Cloudera surface so it
   wins the cascade. It overrides ONLY the brand tokens — the approved Slate
   (dark) / Paper (light) palettes keep owning the surfaces, so a tenant can
   never break the product's contrast or chrome. This is the seam the whole
   white-label layer rides on: re-skinning a company is a token swap, nothing
   structural.

   Official Cloudera brand (verified against cloudera.com's live CSS bundle,
   2026-07 rebrand values):
     orange      #FF550D   primary accent / CTAs — SOLID; cloudera.com uses no
                           gradients, so the --grad tokens below are degenerate
                           (same colour both stops) to keep their image type
     navy        #120046   midnight text/nav colour + dark canvas
     indigo      #413CC3   link/button hover
     periwinkle  #5555F9   utility-icon hover, dark-header divider
     mist        #CEDBE4   header divider / panel borders
   ======================================================================= */

:root {
    --brand-1: #ff550d; /* Cloudera orange (solid) */
    /* AA-safe text variant of --brand-1: raw #ff550d is only ~3.2:1 on white
       (fails WCAG AA for normal text). Used wherever the brand colours TEXT on a
       light surface; --brand-1 stays the fill (bg/border/accents).
       MG-1036: deepened from #c2410c (5.2:1 on white) to #b23c0b (5.9:1), same hue,
       because brand text also sits on the brand TINT (the brand chip and badge, the
       bg-primary dialog header): #c2410c was 3.98:1 on --brand-soft over the page and
       4.27:1 on --brand-tint; #b23c0b is 4.89:1 on --brand-tint over the page and
       5.26:1 over a card. --link below keeps #c2410c. */
    --brand-text: #b23c0b;
    --brand-2: #ff550d; /* same as --brand-1: solid brand, no gradient companion */
    /* REQUIRED (see tenants/_template.css): the rgb triples behind every rgba() brand tint,
       focus ring (--brand-1-rgb) and Bootstrap --bs-primary-rgb. Without these the base
       Lupo blue (62,108,255) leaks through the orange skin. #ff550d = 255, 85, 13. */
    --brand-1-rgb: 255, 85, 13;
    --brand-2-rgb: 255, 85, 13;
    --blue: #ff550d; /* legacy alias — many app components still read var(--blue) */
    /* Degenerate gradient (both stops equal): consumers use background: var(--grad)
       and expect an image value, so the token keeps its shape but renders solid. */
    --grad: linear-gradient(120deg, var(--brand-1), var(--brand-2));
    --grad-text: linear-gradient(100deg, #ff8a3d, #ff8a3d);
    --brand-soft: rgba(255, 85, 13, 0.16);

    /* Brand the hyperlink colour so anchors (file/folder names, inline links)
       follow Cloudera instead of the default blue. Paper needs a deepened
       orange — raw #ff550d is only ~3.2:1 on white (fails WCAG AA for body
       text); #c2410c is ~5.9:1. */
    --link: #c2410c;
    --link-rgb: 194, 65, 12;
    --link-hover: #9a3412;
    --link-hover-rgb: 154, 52, 18;

    /* Marketing-home palette (_shell.scss / _home.scss). The base theme keeps Lupo's
       blue→violet identity here; on a tenant we re-alias the whole --home-* set to the
       brand so the landing/home surface, nav, mobile drawer, hero CTAs and account
       dropdown follow Cloudera instead of rendering off-brand blue/purple. Token swap
       only — no structural change. */
    --home-primary: #ff550d; /* brand orange */
    --home-primary-dark: #c2410c; /* deepened brand (matches --link on Paper) */
    --home-primary-soft: rgba(255, 85, 13, 0.12); /* soft brand tint (was #dbeafe) */
    --home-accent: #ff550d; /* solid brand — CTA "gradients" render flat */
    --home-accent-deep: #c2410c; /* deeper companion for CTA hover gradients */
    --home-primary-rgb: 255, 85, 13;
    --home-accent-rgb: 255, 85, 13;
    --home-primary-dark-rgb: 194, 65, 12;
    /* Solid brand underline accent (degenerate gradient, keeps the image type). */
    --home-underline: linear-gradient(135deg, #ff550d, #ff550d);
    /* Light brand tint that reads on the fixed dark marketing sections (was #60a5fa).
       Kept as a TINT (not raw #ff550d) so text on dark stays AA. */
    --home-on-dark: #ff8a3d;
    --home-on-dark-rgb: 255, 138, 61;
}

/* Official Cloudera dark identity — a deep indigo canvas (the cloudera.com hero),
   orange kept as the single action colour, and a periwinkle ambient glow. This
   overrides the base Slate surfaces; because the base dark block maps Bootstrap's
   --bs-* surface variables onto --surface / --bg, every Bootstrap surface inherits
   the indigo automatically. Light (Paper) stays clean white, matching Cloudera's
   own light sections. */
html[data-theme="dark"] {
    --bg: #120046; /* cloudera.com midnight navy — their dark-header/hero canvas */
    --bg-2: #0c0033;
    --bg-gray: #120046;
    --surface: #1d0b55;
    --surface-2: #261463;
    --surface-3: #2f1d72;
    --border: rgba(255, 255, 255, 0.12);
    --border-2: rgba(255, 255, 255, 0.2);
    --hairline: rgba(255, 255, 255, 0.08);
    --text: #f1efff;
    --text-muted: #c2bce6;
    --text-dim: #8d84c0;
    --brand-soft: rgba(255, 85, 13, 0.2);
    --glow: 0 12px 44px rgba(85, 85, 249, 0.35); /* periwinkle #5555F9 */

    /* On the indigo canvas the warm orange reads cleanly at high contrast, so
       the link colour can stay vivid (vs the deepened Paper value above). */
    --link: #ff8a3d;
    --link-rgb: 255, 138, 61;
    --link-hover: #ffab73;
    --link-hover-rgb: 255, 171, 115;

    /* Brand text on the indigo canvas: the deepened Paper value (#c2410c) is too
       dark on the dark surfaces, so --brand-text rides the vivid orange (matching
       --link) here so brand-coloured TEXT stays readable in dark. */
    --brand-text: #ff8a3d;
}

/* The brand-soft chip text needs a brighter orange on the dark (Slate) canvas
   and the full accent on the light (Paper) canvas, mirroring how the base theme
   handles .chip.brand. */
html[data-theme="dark"] .chip.brand {
    color: #ffb382;
}

html[data-theme="light"] .chip.brand,
html[data-theme="paper"] .chip.brand {
    color: var(--brand-text);
}

/* =======================================================================
   Stage 2C — Courseware reader fidelity (SPT / ILT)

   Nudges the dual-TOC reader toward Cloudera's MkDocs-Material guide layout
   (reference: admin-238 .../exercises/guide/53-02). Cloudera-scoped — this
   sheet only loads on the Cloudera surface (or via ?brand=cloudera), so it
   cannot regress Full or other tenants. All tokens (var(--…)) so it themes
   in light + dark. FIRST PASS — pixel values to be verified against the
   reference with the app running (staging, post-merge); see
   docs/next/v5-spec/stage-2c-dual-toc-fidelity.md §C for the punch-list.
   ======================================================================= */

/* Cloudera guides are command-heavy (kubectl, cd …). Give code/command blocks
   in the courseware the monospace card treatment of the reference. Scoped to
   the rendered student-guide / document markdown so it never touches chrome. */
.markdown-content pre {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-1);
    border-radius: 8px;
    padding: 0.75rem 0.9rem;
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.5;
}

.markdown-content pre code {
    background: transparent;
    padding: 0;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    color: var(--text);
}

/* Inline code: a subtle orange chip, not a wall of colour. */
.markdown-content :not(pre) > code {
    background: var(--brand-soft);
    color: var(--brand-text);
    padding: 0.05rem 0.35rem;
    border-radius: 6px;
    font-size: 0.88em;
}

/* In-page TOC active marker reads like the reference's left accent bar. */
.activity-toc__link.is-active {
    border-left-width: 3px;
}

/* Left course-tree active item — mirror the reference's current-page treatment: a 3px
   brand accent edge, the same left-bar the in-page TOC uses above. The compensating
   padding keeps the label aligned with the non-active items (no shift). Reader-scoped +
   Cloudera-only sheet, so it can't regress chrome or other tenants. */
.activity-nav__item--current {
    border-left: 3px solid var(--brand-1);
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    padding-left: calc(0.55rem - 3px);
}

/* -- Second pass: long-form courseware polish (figures, tables, rhythm, callouts).
   All scoped to .markdown-content (the rendered guide/document body), so chrome,
   Full and other tenants are untouched. Tune against the reference on dev. -- */

/* Airy MkDocs-Material reading rhythm for long exercises. */
.markdown-content {
    line-height: 1.7;
}

.markdown-content h2,
.markdown-content h3 {
    margin-top: 1.6rem;
    margin-bottom: 0.6rem;
    line-height: 1.3;
}

.markdown-content p,
.markdown-content ul,
.markdown-content ol {
    margin-bottom: 1rem;
}

/* Screenshots/figures: framed in a soft card with a muted caption, like the reference. */
.markdown-content img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.markdown-content figure {
    margin: 1.25rem 0;
    text-align: center;
}

.markdown-content figcaption {
    margin-top: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Tables (flags / parameters): clean bordered grid with a tinted header row. */
.markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.markdown-content table th,
.markdown-content table td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.7rem;
    text-align: left;
}

.markdown-content table thead th {
    background: var(--surface-2);
    font-weight: 600;
}

/* Blockquotes read as MkDocs-style "note" callouts with the brand accent. */
.markdown-content blockquote {
    margin: 1rem 0;
    padding: 0.6rem 0.9rem;
    border-left: 3px solid var(--brand-1);
    background: var(--brand-soft);
    border-radius: 0 8px 8px 0;
    color: var(--text);
}

.markdown-content blockquote > :last-child {
    margin-bottom: 0;
}

/* =======================================================================
   cloudera.com chrome fidelity — typography, header, nav, dropdown, hero

   Specs measured from cloudera.com's live CSS bundle (2026-07): white header
   with a 2px #CEDBE4 bottom rule (dark variant: #120046 + 1px #5555F9), plain
   navy nav links (no pill/border) that hover to indigo, a white mega-menu
   panel with an uppercase eyebrow over a 50×2px orange rule, Plus Jakarta
   Sans end to end, and their signature one-square-corner block radius.

   Structural rules are scoped under html[data-brand="cloudera"] so nothing
   can leak into the unbranded Lupo shell (this sheet only loads on branded
   surfaces anyway — belt and suspenders). Raw hex is allowed here by the
   token-compliance guardrail: tenant sheets are exactly where brand hex lives.
   ======================================================================= */

/* --- Typography. cloudera.com is Plus Jakarta Sans end to end (body 400,
   headings SemiBold). The base theme already rides Jakarta for body text
   (--font), so only the heading token and the shell's hardcoded Inter needs
   re-pointing. Jakarta 400–800 is already loaded via _tokens.scss. --- */
:root {
    --font-heading: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* Bootstrap's compiled .h1–.h6 utilities hardcode Sora at class specificity
   (0,1,0), beating the h1–h6 element rule that carries the token — e.g. the
   hub's <h2 class="h4"> would render Sora next to Jakarta headings. Re-point
   them too; this sheet loads after main.css, so source order wins the tie. */
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading);
}

html[data-brand="cloudera"] .home-header,
html[data-brand="cloudera"] .home-mobile-nav,
html[data-brand="cloudera"] .home-footer {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}

/* --- Header bar: cloudera.com's white header + mist divider; their dark
   header variant on the dark theme. Kills the base dark-glass treatment. --- */
html[data-brand="cloudera"] .home-header {
    background: #ffffff;
    backdrop-filter: none;
    box-shadow: none;
    border-bottom: 2px solid #cedbe4;
}

html[data-brand="cloudera"][data-theme="dark"] .home-header {
    background: #120046;
    border-bottom: 1px solid #5555f9;
}

/* Tenant image logo (the orange wordmark PNG, natural ~150×18). */
html[data-brand="cloudera"] .home-brand__logo {
    height: 18px;
}

/* Fallback text wordmark (only shows if the logo asset is missing): navy on
   the white bar, white on the dark bar — the base rule hardcodes white. */
html[data-brand="cloudera"] .home-brand--tenant .home-brand__text {
    color: #120046;
}

html[data-brand="cloudera"][data-theme="dark"] .home-brand--tenant .home-brand__text {
    color: #ffffff;
}

/* --- Nav links (Knowledge / Learn): plain text like cloudera.com's main
   menu — no pill, no border, navy, hover indigo, no underline. The
   transparent border keeps the box metrics of the base pill so nothing
   shifts. --- */
html[data-brand="cloudera"] .home-nav__dropdown-trigger,
html[data-brand="cloudera"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain {
    border: 1px solid transparent;
    background: transparent;
    color: #120046;
    font-size: 0.94rem;
    font-weight: 500;
}

html[data-brand="cloudera"] .home-nav__dropdown-trigger:hover,
html[data-brand="cloudera"] .home-nav__dropdown-trigger:focus,
html[data-brand="cloudera"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain:hover,
html[data-brand="cloudera"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain:focus {
    background: transparent;
    border-color: transparent;
    color: #413cc3;
}

html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger,
html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain {
    color: rgba(255, 255, 255, 0.92);
}

html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger:hover,
html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger:focus,
html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain:hover,
html[data-brand="cloudera"][data-theme="dark"] .home-nav__dropdown-trigger.home-nav__dropdown-trigger--plain:focus {
    color: #9b9bfc; /* light periwinkle tint — AA on the navy bar */
}

/* --- Right-side utility controls (theme toggle, language, account, admin
   tools, hamburger): cloudera.com's borderless navy utility icons, hover
   periwinkle. --- */
html[data-brand="cloudera"] .home-theme-btn,
html[data-brand="cloudera"] .home-account__trigger,
html[data-brand="cloudera"] .home-header__toggle,
html[data-brand="cloudera"] .home-header__utility .language-switcher .btn {
    color: #120046;
    background: transparent;
    border-color: transparent;
}

html[data-brand="cloudera"] .home-theme-btn:hover,
html[data-brand="cloudera"] .home-theme-btn:focus,
html[data-brand="cloudera"] .home-account__trigger:hover,
html[data-brand="cloudera"] .home-account__trigger:focus,
html[data-brand="cloudera"] .home-header__utility .language-switcher .btn:hover,
html[data-brand="cloudera"] .home-header__utility .language-switcher .btn:focus {
    color: #5555f9;
    background: rgba(85, 85, 249, 0.08);
    border-color: transparent;
}

html[data-brand="cloudera"][data-theme="dark"] .home-theme-btn,
html[data-brand="cloudera"][data-theme="dark"] .home-account__trigger,
html[data-brand="cloudera"][data-theme="dark"] .home-header__toggle,
html[data-brand="cloudera"][data-theme="dark"] .home-header__utility .language-switcher .btn {
    color: #eef2ff;
}

html[data-brand="cloudera"][data-theme="dark"] .home-theme-btn:hover,
html[data-brand="cloudera"][data-theme="dark"] .home-theme-btn:focus,
html[data-brand="cloudera"][data-theme="dark"] .home-account__trigger:hover,
html[data-brand="cloudera"][data-theme="dark"] .home-account__trigger:focus,
html[data-brand="cloudera"][data-theme="dark"] .home-header__utility .language-switcher .btn:hover,
html[data-brand="cloudera"][data-theme="dark"] .home-header__utility .language-switcher .btn:focus {
    color: #9b9bfc;
    background: rgba(85, 85, 249, 0.16);
}

/* Hamburger lines follow the bar (base hardcodes white-on-dark-glass). */
html[data-brand="cloudera"] .home-header__toggle span {
    background: #120046;
}

html[data-brand="cloudera"][data-theme="dark"] .home-header__toggle span {
    background: #ffffff;
}

/* --- Learn dropdown: cloudera.com mega-menu language — white panel, 2px
   mist border, 10px radius, uppercase navy eyebrow over a 50×2px orange
   rule, semibold navy links that underline + go indigo on hover. The panel
   stays white in BOTH themes (as on cloudera.com), so its colours are fixed
   values, not theme tokens. --- */
html[data-brand="cloudera"] .home-nav__dropdown-menu {
    min-width: 240px;
    background: #ffffff;
    border: 2px solid #cedbe4;
    border-radius: 10px;
    padding: 0.6rem 0.55rem;
    box-shadow: 0 18px 44px rgba(18, 0, 70, 0.14);
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-header {
    color: #120046;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.45rem 0.65rem 0.5rem;
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-header::after {
    content: "";
    display: block;
    width: 50px;
    height: 2px;
    margin-top: 8px;
    background: #ff550d;
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-divider {
    border-top-color: #cedbe4;
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item {
    color: #120046;
    font-weight: 600;
    border-radius: 6px;
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item > i {
    color: #ff550d;
}

html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item:hover,
html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item:focus,
html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item:active,
html[data-brand="cloudera"] .home-nav__dropdown-menu .dropdown-item.active {
    background: transparent;
    color: #413cc3;
    text-decoration: underline;
}

/* --- cloudera.com signature block shape: rounded with ONE square corner
   (their .extend_* hero/promo blocks). Applied to the brand hero banner. --- */
html[data-brand="cloudera"] .course-hero {
    border-radius: 30px 30px 0 30px;
}