/* ============================================================
   wikiaura-theme.css — WikiAURA sitewide theme.

   System: "Modernist" (see /opt/services/Doc-l-Aura/Logo Wikiaura
   requis.zip → design_handoff_wikiaura_logo/README.md + ds-modernist.css,
   the design handoff this file implements token-for-token), composed in
   the spirit of anthropic.com: plain wordmark + text nav, warm light
   ground, bold grotesk headlines, flat sober blocks, no gradients, no
   soft shadows, no rounded corners.

   Color and font-size VALUES (--body-bg, --btnbg, --h1size, etc) live in
   index.php, NOT here -- Joomla always renders the WebAssetManager's
   inline <style> blocks after every linked stylesheet regardless of
   registration order, so a :root override in a linked file can never
   beat Cassiopeia's own inline color/font blocks. See the comment above
   the addInlineStyle() call in index.php, which is the actual source of
   truth for the palette and type scale. This file carries everything
   else: @font-face, and selectors nothing else touches.
   ============================================================ */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Archivo-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Archivo-SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/Archivo-ExtraBold.woff2') format('woff2');
}

:root {
    --font-display: 'Archivo', system-ui, sans-serif;
    --cassiopeia-font-family-body: 'Archivo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ---- Modernist tokens not covered by Cassiopeia's own --body-bg
       etc vars: text-secondary, hairline dividers, flat surface. ---- */
    --wa-text-secondary: color-mix(in srgb, var(--body-color) 65%, transparent);
    --wa-divider: color-mix(in srgb, var(--body-color) 22%, transparent);
    --wa-surface: color-mix(in srgb, var(--body-color) 6%, var(--body-bg));

    /* ---- The three blades of the mark, for the rare spot that wants a
       named brand color instead of the interactive --link-color/--btnbg
       (which are already violet -- see index.php). Cyan in particular is
       spent sparingly (one "featured" marker, see journal-claude.css),
       not as a second general-purpose accent. ---- */
    --wa-violet: rgb(91, 33, 240);
    --wa-blue: rgb(46, 99, 255);
    --wa-cyan: rgb(20, 214, 214);
}

/* ---- Display typography: Archivo 800, tight tracking, on real headings
   only. ---- */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3 {
    font-family: var(--font-display);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
}

h6, .h6 {
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body {
    font-size: 15px;
    line-height: 1.55;
}

/* ---- Flat, sober components: no radius, no soft shadow, hairline
   borders instead -- the Modernist system's central rule (radius 0
   "partout", 2px ink dividers "jamais affinés"). ---- */
*,
*::before,
*::after {
    border-radius: 0 !important;
}

.btn-primary,
.btn.btn-primary {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: 0.01em;
    text-transform: none;
    box-shadow: none !important;
}

/* ---- Header: flat, flush with the page ground, single hairline rule
   underneath -- no gradient plate, no inset shadow (anthropic.com's nav
   sits directly on the page, not on a distinct bar). ---- */
.container-header {
    background: var(--headerbg) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-bottom: 2px solid var(--wa-divider);
}

.brand-logo img {
    max-height: 44px;
    width: auto;
    height: auto;
}

/* ---- Footer: same flat treatment, no gradient. ---- */
.container-footer {
    background: var(--footerbg) !important;
    background-image: none !important;
}

/* ---- Sidebar modules: hairline border instead of soft card shadow. ---- */
.uk-card,
.card {
    background: var(--wa-surface) !important;
    border: 2px solid var(--wa-divider) !important;
    box-shadow: none !important;
}

/* ---- Single article view: the same flat bordered block as a Journal
   Claude card, so clicking "Lire l'entree complete" lands on a page that
   still reads as the same system rather than bare Cassiopeia defaults. ---- */
.com-content-article.item-page {
    background: var(--wa-surface);
    border: 2px solid var(--wa-divider);
    padding: 2rem 2.25rem;
}

.com-content-article.item-page .page-header,
.com-content-article.item-page > h1:first-child {
    font-size: var(--h1size);
}