/**
 * Kestrel base layer (template.kestrel.base): document defaults, faces, links, focus, selection,
 * images and print (DESIGN_SPEC 2, 4.1, 4.3, 8, 9 and 10).
 *
 * The kit baseline in joomla.css weighs (0,0,2) and prints after this file; Reboot and a late
 * Preflight print element rules at (0,0,1). Every type, link and control rule here carries a class
 * outside :where(), and keeps the element inside :where() so later component rules still win by
 * source order: body (0,1,1), chrome links (0,1,0), prose links (0,1,2), focus ring (0,1,0) and
 * (0,2,0) on the kit hooks, which ties with the bridge's 2px offset rings and wins by order.
 * The prose typography (4a) follows the prose links.
 *
 * @copyright Copyright (C) 2026 BulaSikku Technologies Private Limited. All rights reserved.
 * @license   GNU General Public License version 2 or later
 */

/* 1. Box model and the document ------------------------------------------------------------- */

*,
::before,
::after {
    box-sizing: border-box;
}

/* Anchor jumps land 24px below the sticky header (DESIGN_SPEC 8). */
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--ts-sticky-offset, 0px) + 1.5rem);
}

/* No smooth scrolling: beats Reboot's :root rule. */
html:root {
    scroll-behavior: auto;
}

html[data-color-scheme="light"] {
    color-scheme: light;
}

html[data-color-scheme="dark"] {
    color-scheme: dark;
}

/* The board wrapper's font, colour and ground (DESIGN_SPEC 2) on every Kestrel document. */
body:is(.ts-guest, .ts-member, .ts-component, .ts-error-page, .ts-offline-page) {
    margin: 0;
    background-color: var(--ke-page);
    color: var(--ke-ink);
    font-family: var(--ke-sans);
    font-size: var(--ke-t-body);
    font-weight: 400;
    line-height: var(--ke-lh-body);
    font-optical-sizing: auto;
    font-kerning: normal;
    text-underline-offset: 3px; /* inherited by every underlined link */
    accent-color: var(--ke-accent); /* native checks, radios and ranges (DESIGN_SPEC 7.3, M2b) */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* 2. The band scope: its own ground and ink -------------------------------------------------
   tokens.css remaps the neutrals inside the band (DESIGN_SPEC 3.9, K28); text inherited from body
   is already computed, so the band repaints both. The paper scope keeps the ink and paints its fill
   in the component that owns it (PAGES.md 1.5). */

:is(.ts-footer, .ts-tone-dark, [data-ke-scope="band"]) {
    background-color: var(--ke-page);
    color: var(--ke-ink);
}

/* 3. Faces -------------------------------------------------------------------------------------
   Bricolage Grotesque on the kit's page and section heading hooks and .ke-display, never a
   synthesised bold; sizes come from the view and component rules. */

:is(.ke-display, .ts-article__title, .ts-article__pageheading, .ts-journal__title, .ts-journal__pageheading,
    .ts-archive__title, .ts-auth__title, .ts-catlist__title, .ts-finder__heading, .ts-profile__title,
    .ts-tags__title, .ts-tags-tag__pageheading, .ts-error__title, .ts-offline__title, .ts-sec__title) {
    font-family: var(--ke-display);
    font-weight: var(--ke-w-display);
    font-synthesis-weight: none;
    letter-spacing: var(--ke-track-page);
    line-height: var(--ke-lh-page);
    color: var(--ke-ink);
    text-wrap: balance;
    overflow-wrap: break-word;
}

/* Geist Mono labels (eyebrows, indexes, meta, dates, counts) with tabular figures. */
.ke-mono {
    font-family: var(--ke-mono);
    font-variant-numeric: tabular-nums;
}

/* Geist figures that align in columns (balances, sans table cells). */
.ke-num {
    font-variant-numeric: tabular-nums;
}

/* 4. Links ------------------------------------------------------------------------------------
   Accent text, ink on hover, a 1px underline 3px below the baseline. In the band --ts-link is the
   band ink; the band scopes are listed because Reboot's link colour resolves --bs-link-color-rgb
   on :root, so a plain link in the band would keep the page accent (2.4:1 on the light band). The
   kit's closed blocks already draw their links from --ts-link. */

:is(.ts-header, .ts-footer, .ts-topbar, .ts-tone-dark, [data-ke-scope="band"]) :where(a) {
    color: var(--ts-link);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--ec-dur-1) var(--ec-ease), text-decoration-color var(--ec-dur-1) var(--ec-ease);
}

:is(.ts-header, .ts-footer, .ts-topbar, .ts-tone-dark, [data-ke-scope="band"]) :where(a:hover) {
    color: var(--ts-link-hover);
}

/* Authored component links (Kestrel, kit and Bootstrap buttons, chips) keep their own colours: at
   (0,1,2) this rule would otherwise paint accent text on an accent button. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table, address, h2, h3, h4, h5, h6) :where(a:not([class~="btn"], [class*="ke-"], [class*="ts-"])) {
    color: var(--ts-link);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--ec-dur-1) var(--ec-ease), text-decoration-color var(--ec-dur-1) var(--ec-ease);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table, address, h2, h3, h4, h5, h6) :where(a:not([class~="btn"], [class*="ke-"], [class*="ts-"]):hover) {
    color: var(--ts-link-hover);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, table, h2, h3, h4) :where(code, kbd, samp),
:is(.ts-prose, .ts-prose > :is(div, section, article)) > pre {
    font-family: var(--ke-mono);
    font-variant-numeric: tabular-nums;
}

/* 4a. Prose (DESIGN_SPEC 4.3, PAGES.md 3.2) ------------------------------------------------
   Every .ts-prose: the 24px flow, headings, lists with the 8px accent square, the pull quote,
   inline figures, the info panel (a dl of div groups) and rules; the container sets the size and
   the measure. Each block spaces itself from the one before; a quote or a figure also keeps room
   after it with a bottom margin that collapses into the next block's top one. (0,1,1) and up
   beats the kit baseline's (0,0,2). Lists and the info panel style only class-less markup, so a
   component pasted into an article (a Bootstrap nav, list group or article-info dl) keeps its own
   look (M3b, K55). */

:is(.ts-prose, .ts-prose > :is(div, section, article)) > * {
    margin: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :not(:first-child) {
    margin-block-start: 1.5rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :last-child {
    margin-block-end: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4, h5, h6) {
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-list);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-list);
    letter-spacing: var(--ke-track-list);
    font-synthesis-weight: none;
    text-wrap: balance;
    overflow-wrap: break-word;
    scroll-margin-block-start: calc(var(--ts-sticky-offset, 0px) + 1.5rem);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h2 {
    font-size: var(--ke-t-prose-h2);
    font-weight: var(--ke-w-h2);
    line-height: var(--ke-lh-panel);
    letter-spacing: var(--ke-track-h2);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h4, h5, h6) {
    font-size: var(--ke-t-intro);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h3, h4, h5, h6, figure, blockquote):not(:first-child) {
    margin-block-start: 2rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > h2:not(:first-child) {
    margin-block-start: 3rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl:not([class]):not(:first-child) {
    margin-block-start: 3.5rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol):not([class]) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(ul, ol):not([class]) > li {
    position: relative;
    padding-inline-start: 1.5rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ul:not([class]) > li::before {
    content: "";
    position: absolute;
    inset-block-start: calc(0.5lh - 0.25rem);
    inset-inline-start: 0;
    inline-size: 0.5rem;
    block-size: 0.5rem;
    background-color: var(--ke-accent);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol:not([class]) {
    counter-reset: ke-prose;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > ol:not([class]) > li::before {
    content: counter(ke-prose) / "";
    counter-increment: ke-prose;
    position: absolute;
    inset-inline-start: 0;
    color: var(--ts-link);
    font-family: var(--ke-mono);
    font-size: 0.8em;
    font-weight: 600;
    line-height: inherit;
}

/* The pull quote (a figure holding a blockquote, or a bare blockquote) and inline figures. */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure, blockquote) {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-end: 2rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure:has(> blockquote), blockquote) {
    gap: 1rem;
    margin-block-end: 2.5rem;
    padding-block-start: 1.25rem;
    border-block-start: 2px solid var(--ke-accent);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure:has(> blockquote), blockquote):not(:first-child) {
    margin-block-start: 2.5rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > blockquote,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote {
    margin: 0;
    padding: 0;
    color: var(--ke-ink);
    font-family: var(--ke-display);
    font-size: var(--ke-t-quote);
    font-weight: var(--ke-w-h3);
    line-height: var(--ke-lh-list);
    letter-spacing: var(--ke-track-h3);
    font-synthesis-weight: none;
    text-wrap: balance;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > blockquote > p,
:is(.ts-prose, .ts-prose > :is(div, section, article)) > blockquote > p {
    margin: 0;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure > figcaption {
    color: var(--ke-ink-3);
    font-size: var(--ke-t-label);
    line-height: 1.5;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > figure:has(> blockquote) > figcaption {
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure, p) :where(img) {
    display: block;
    border-radius: var(--ke-r-img);
}

/* The info panel: a dl of div > dt + dd groups on paper (Article board). */
:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl:not([class]) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10.625rem, 100%), 1fr));
    gap: 1.25rem 2rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    border-radius: var(--ke-r);
    background-color: var(--ke-paper);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl:not([class]) > div {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl:not([class]) :is(dt, dd) {
    margin: 0;
    color: var(--ke-ink);
    font-size: var(--ke-t-body);
    font-weight: 600;
    line-height: var(--ke-lh-help);
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > dl:not([class]) dt {
    color: var(--ke-ink-3);
    font-family: var(--ke-mono);
    font-size: var(--ke-t-eyebrow);
    font-weight: 500;
    line-height: var(--ke-lh-label);
    letter-spacing: var(--ke-track-eyebrow);
    text-transform: uppercase;
}

:is(.ts-prose, .ts-prose > :is(div, section, article)) > hr {
    border: 0;
    border-block-start: 1px solid var(--ke-hairline);
    opacity: 1;
}

/* 5. Focus, selection and highlights (DESIGN_SPEC 9, K22) ----------------------------------
   A 2px ring with a 3px offset, never removed. The second rule ties with the bridge's .btn,
   .form-control and .nav-link rings (2px offset) inside the kit blocks and wins by source order;
   Bootstrap controls elsewhere keep the bridge's offset (kit-owned). Fields add the halo (DV2). */

:focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: var(--ke-focus-offset);
}

:is(.ts-header, .ts-footer, .ts-topbar, .ts-breadcrumbs, .ts-modlogin, .ts-modlogout, .ts-search,
    .ts-langs, .ts-pager, .ts-postlinks, .ts-auth, .ts-profile, .ts-finder, .ts-tags-filter,
    .ts-tags-pagination, .ts-catlist, .ts-offline, .ts-error__main, .ts-error__search) :focus-visible,
:is(.ts-btn, .ts-input, .ts-action, .ts-skip-link, .ts-nav-toggle, .ts-nav-close):focus-visible {
    outline: var(--ts-focus-width, 2px) solid var(--ts-focus);
    outline-offset: var(--ke-focus-offset);
}

/* Ink on the highlight tint: 14.20:1 light, 6.91:1 dark (pairs.json). */
::selection {
    background-color: var(--ke-accent-mark);
    color: var(--ke-ink);
}

/* Search highlight: the accent mark behind the inherited text, 2px corners. joomla.css paints the
   Smart Search and highlighter marks with the warning tint at (0,1,1) after this file, so the second
   rule carries their classes and the body prefix, (0,1,2). */
mark,
body :is(.js-highlight, .com-finder__results) mark {
    padding: 0 0.125rem;
    border-radius: 2px;
    background-color: var(--ke-accent-mark);
    color: inherit;
}

[hidden] {
    display: none !important;
}

/* 6. Images: never wider than the column, ratio kept; the radius belongs to the component. --- */

img,
video {
    max-inline-size: 100%;
    block-size: auto;
}

/* 7. Print (DESIGN_SPEC 10) --------------------------------------------------------------------
   Black on white in either scheme, accent text to ink, bands to white, chrome and controls
   hidden, display sizes at about 60%. Later milestones add their own pieces to the hidden list. */

@page {
    margin: 18mm 16mm;
}

@media print {
    html:root[data-color-scheme],
    :is(.ts-footer, .ts-tone-dark, [data-ke-scope]),
    .ts-row[data-ts-row="band"] {
        color-scheme: light;
        --ec-bg: #FFFFFF;
        --ec-surface: #FFFFFF;
        --ec-surface-2: #FFFFFF;
        --ec-fg: #000000;
        --ec-fg-2: #3F444C;
        --ec-border: #E2E4E8;
        --ke-page: #FFFFFF;
        --ke-paper: #FFFFFF;
        --ke-raised: #FFFFFF;
        --ke-ink: #000000;
        --ke-ink-2: #3F444C;
        --ke-ink-3: #5B6270;
        --ke-hairline: #E2E4E8;
        --ke-band: #FFFFFF;
        --ke-band-strong: #000000;
        --ke-band-ink: #000000;
        --ke-band-ink-2: #3F444C;
        --ke-band-ink-3: #5B6270;
        --ke-band-line: #E2E4E8;
        --ke-band-edge: #E2E4E8;
        --ke-accent: #000000;
        --ec-accent: #000000;
        --ec-accent-fg: #FFFFFF;
        --ec-accent-soft: #FFFFFF;
        --ke-accent-soft: #FFFFFF;
        --ke-accent-wash: #FFFFFF;
        --ke-accent-mark: #FFFFFF;
        --ts-link: #000000;
        --ts-link-hover: #000000;
        --ts-tint: #FFFFFF;
        --ts-on-tint: #000000;
        --ts-focus: #000000;
        --ke-slate: #FFFFFF;
        --ke-sand: #FFFFFF;
        --ke-sage: #FFFFFF;
        --ke-rose: #FFFFFF;
        --ke-slate-ink: #000000;
        --ke-sand-ink: #000000;
        --ke-sage-ink: #000000;
        --ke-rose-ink: #000000;
    }

    html:root {
        --ke-t-display: 32pt;
        --ke-t-lead: 30pt;
        --ke-t-page: 30pt;
        --ke-t-auth: 28pt;
        --ke-t-app: 28pt;
        --ke-t-offline: 30pt;
        --ke-t-code: 60pt;
        --ke-t-feature: 22pt;
        --ke-t-band: 22pt;
        --ke-t-h2: 18pt;
        --ke-t-quote: 16pt;
        --ke-t-prose-h2: 17pt;
        --ke-t-panel: 15pt;
        --ke-t-h3: 14pt;
        --ke-t-standfirst: 13pt;
        --ke-t-list: 13pt;
        --ke-t-dek: 12pt;
        --ke-t-intro: 12pt;
        --ke-t-article: 11pt;
        --ke-t-lede: 11pt;
        --ke-t-body: 11pt;
        --ke-t-ui: 10pt;
        --ke-t-label: 10pt;
        --ke-t-help: 9pt;
        --ke-t-eyebrow: 8pt;
        --ke-t-meta: 8pt;
        --ke-t-index: 8pt;
        --ke-t-micro: 8pt;
        --ke-lh-body: 1.5;
        --ke-lh-article: 1.5;
    }

    body:is(.ts-guest, .ts-member, .ts-component, .ts-error-page, .ts-offline-page) {
        background-color: #FFFFFF;
        color: #000000;
    }

    :is(.ts-topbar, .ts-header__nav, .ts-header__actions, .ts-header__modules, .ts-header__offcanvas,
        .ts-nav-toggle, .ts-nav-close, .ts-skip-link, .ts-pager, .ts-search, .ts-modlogin, .ts-modlogout,
        .ts-btn, .ts-postcard__media--placeholder, .ts-footer__cols, .ts-footer__legal,
        .ke-memberbar, .ke-strip, .ke-share, .ke-btn, .ke-iconbtn, .ke-backtotop, .ke-toc,
        .ke-docbar__search, .ke-error__search, .ke-error__details, .ts-article__pager, .readmore,
        .form-validate, .ts-finder__searchform, .ts-archive__form, .ts-tags-filter),
    .com-contact > h3:has(+ .com-contact__form),
    .ts-pos-breadcrumbs,
    .ts-pos-sidebar-left,
    .ts-pos-sidebar-right,
    .ts-pos-main-bottom {
        display: none !important;
    }

    body.ts-component {
        padding: 0;
    }

    .ts-header {
        position: static !important;
        box-shadow: none;
    }

    /* A 0.5pt hairline keeps the frame where a band held content. */
    :is(.ts-footer, .ts-tone-dark, [data-ke-scope]) {
        border-top: 0.5pt solid var(--ke-hairline);
        box-shadow: none;
        background-color: #FFFFFF;
    }

    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, ul, ol, dl, blockquote, figure, table, address) :where(a[href^="http"])::after {
        content: " (" attr(href) ")";
        font-size: 0.85em;
        color: #000000;
        overflow-wrap: anywhere;
    }

    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(figure, blockquote, table, pre) {
        break-inside: avoid;
    }

    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(h2, h3, h4) {
        break-after: avoid;
    }

    :is(.ts-postcard, .ts-card, .ts-panel, .ke-card) {
        break-inside: avoid;
    }

    :is(.ke-display, .ts-article__title, .ts-article__pageheading, .ts-journal__title, .ts-sec__title) {
        break-after: avoid;
    }

    :is(.ts-prose, .ts-prose > :is(div, section, article)) > :is(p, figure) :where(img) {
        max-inline-size: 100%;
        border-radius: 0;
    }
}