/* ==========================================================================
   Community Answers (com_communityanswers) · extension bridge · Studio community kit
   --------------------------------------------------------------------------
   Sections 1-5 are kit-owned and byte-identical in Vesper, Quorum and Mimeo.
   Edit them in template-studio/kit/community/tpl/media/css/ext/communityanswers.css
   and run sync-kit.mjs for all three templates. Section 6 belongs to the template.

   Loaded by PageContext::useExtension('communityanswers') on pages that mount
   the Q&A app (option com_communityanswers, or the com_communityanswers.site
   asset) and by the chromes around mod_ca_* modules. Bootstrap stays ON here:
   the app's utilities are layered and !important, so Bootstrap cannot reach
   them.

   Colours come from the app's own "follow template" mode
   (appearance.theme_mode=follow-template, theme_preset=civic): it reads the 21
   --template-* names that every template declares in tokens.css (L4). This file
   adds what that chain leaves out: text on filled buttons, radii, shadows and
   the Bootstrap Reboot containment.

   App root: #ca-root.com-communityanswers[data-ca-theme][data-ca-mode]
   (isolation: isolate; its dialogs are position: fixed inside it).
   ========================================================================== */

/* 1. Variable map ----------------------------------------------------------- */

/* Shape and depth from the template. 1,1,0 beats the presets' 0,2,0 blocks. */
#ca-root.com-communityanswers {
    --ca-radius-md: var(--ec-btn-radius);
    --ca-radius-lg: var(--ec-radius);
    --ca-radius-xl: var(--ec-radius);
    --ca-radius-2xl: var(--ec-radius);
    --ca-shadow-sm: var(--ec-shadow);
    --ca-shadow-md: var(--ec-shadow);
    --ca-shadow-lg: var(--ts-overlay-shadow);
}

/* The app hard-codes white text on its filled buttons. The primary fill is the
   template link colour (--template-link-color), so its text is the ground; the
   danger fill takes the danger tint as text (the status pairs are AA both ways). */
#ca-root .ca-button--primary {
    --ca-button-fg: var(--ec-bg);
}

#ca-root .ca-button--danger {
    --ca-button-fg: var(--ts-danger-bg);
}

/* Eight places (brand mark, Ask buttons, active navigation, sign-in links, the
   bounty hero icon) pair bg-accent / bg-bounty with the layered !important
   utility .text-white, which no selector can beat. It reads --color-white,
   though: pointing that at the ground gives every one of them the AA text of
   the link-colour (and warning) fill. Nothing else in the app uses it. */
#ca-root.com-communityanswers {
    --color-white: var(--ec-bg);
}

/* The bounty badge prints its expiry at a hardened 65% opacity in the bounty
   colour on the bounty tint (measured 2.7:1 light, 4.1:1 dark); the body colour
   under the same opacity stays above 4.5:1 on the warning tint. */
#ca-root .ca-bounty-badge-expiry {
    color: var(--ec-fg);
}

/* 2. Containment ------------------------------------------------------------ */

/* Bootstrap Reboot is unlayered, so it beats the app's layered Preflight on
   every element the app leaves without a utility class. 0,0,1 and loaded after
   Reboot: restores the app's reset; every app class rule still wins. */
:where(.com-communityanswers) :is(h1, h2, h3, h4, h5, h6) {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

:where(.com-communityanswers) :is(p, ul, ol, dl, blockquote, figure, pre) {
    margin: 0;
}

:where(.com-communityanswers) :is(ul, ol) {
    padding: 0;
}

:where(.com-communityanswers) a {
    color: inherit;
    text-decoration: none;
}

:where(.com-communityanswers) label {
    display: revert;
}

/* 3. Leak neutralisers ------------------------------------------------------ */

/* None. Every Community Answers selector is scoped to .com-communityanswers
   (measured: zero computed-style changes outside #ca-root). */

/* 4. Default module markup -------------------------------------------------- */

/* The six mod_ca_* "lite" modules print an inline <style> in the body (0,1,0,
   later than the head). html .ca-lite-* (0,1,1 and up) wins without
   !important. They inherit the chrome's text colour; these rules give them the
   template's rules, muted text, radii and a real primary action. */
html .ca-lite-module {
    --ca-lite-border: var(--ec-border);
    --ca-lite-muted: var(--ec-fg-2);
}

html .ca-lite-title {
    color: var(--ec-fg);
    overflow-wrap: anywhere;
}

html .ca-lite-title:hover {
    color: var(--ts-link);
}

html .ca-lite-meta,
html .ca-lite-date,
html .ca-lite-empty,
html .ca-lite-description {
    color: var(--ec-fg-2);
}

html .ca-lite-ranked-item::before {
    color: var(--ec-fg-2);
    font-variant-numeric: tabular-nums;
}

html .ca-lite-chip {
    min-block-size: 2rem;
    border-color: var(--ec-border);
    border-radius: var(--ec-btn-radius);
    background: var(--ec-surface-2);
    color: var(--ec-fg);
}

html .ca-lite-chip:hover {
    border-color: var(--ts-control);
    text-decoration: none;
}

html .ca-lite-chip-count {
    color: var(--ec-fg-2);
    font-variant-numeric: tabular-nums;
}

html .ca-lite-ask-cta {
    border-color: var(--ec-border);
    border-radius: var(--ec-radius);
    background: var(--ec-surface);
}

html .ca-lite-ask-cta h3 {
    font-weight: 700;
}

html .ca-lite-ask-cta p {
    color: var(--ec-fg-2);
}

html .ca-lite-button {
    align-items: center;
    min-block-size: 44px;
    padding-inline: 1rem;
    border-color: var(--ts-link);
    border-radius: var(--ec-btn-radius);
    background: var(--ts-link);
    color: var(--ec-bg);
}

html .ca-lite-button:hover {
    border-color: var(--ts-link-hover);
    background: var(--ts-link-hover);
    color: var(--ec-bg);
    text-decoration: none;
}

/* 5. Page frame ------------------------------------------------------------- */

/* App mode already gives the app the full content width and a static header
   (its sticky top bar and z-50 dialogs live inside an isolated root). The root
   is transparent so the template ground shows around the app shell. */
#ca-root.com-communityanswers {
    background-color: transparent;
}

/* @ts-kit section-6 begin: 6. Design skin (template-owned; sync-kit.mjs keeps everything between these two markers) */
/* @ts-kit section-6 end */