/* ==========================================================================
   Technique syntax highlighting
   CSS classes applied by technique-highlight.js (web-tree-sitter)

   Light theme:  colours from technique-light.tmTheme.json (authoritative)
   Dark theme:   extrapolated to maintain semantic identity on dark backgrounds
   ========================================================================== */

/* Body font: Inter (rsms). Self-hosted static Regular + Bold (~111 KB / 115 KB).
   Inter ships with vertical metrics that put the baseline low in the line-box,
   so the lowercase x-height sits visibly below the icon centre in flex rows.
   ascent 80% + descent 30% (gap 0) gives ascent − descent = 0.5em, which
   shifts the baseline to where x-height middle lands on the line-box centre
   — i.e. on the icon centre when both are vertically centred. */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/Inter-Regular.woff2") format("woff2");
    ascent-override: 80%;
    descent-override: 30%;
    line-gap-override: 0%;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/Inter-Bold.woff2") format("woff2");
    ascent-override: 80%;
    descent-override: 30%;
    line-gap-override: 0%;
}
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

/* Left sidebar page links and right TOC entries are sized smaller than body
   prose by the theme; at the theme's defaults they read cramped at body-line
   with a Latin-conventional x-height. Nudge both up a step. */
.menu.sidebar a {
    font-size: 0.95rem;
}
.toc-menu a {
    font-size: 0.875rem;
}

/* Monospace font for all code blocks */
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/SourceCodePro-Regular.woff2") format("woff2");
}
@font-face {
    font-family: "Source Code Pro";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/SourceCodePro-Bold.woff2") format("woff2");
}
pre, code, tt {
    font-family: "Source Code Pro", monospace;
    line-height: 1.3;
}
/* Match code font size to surrounding prose (theme sets pre code to --text-sm) */
code {
    font-size: 0.96em;
}

/* Mobile: let code blocks scroll horizontally instead of wrapping mid-token.
   Theme has `overflow-x-auto` on pre but then `pre code { white-space: pre-wrap }`
   defeats it — override that back to `pre`. Also shrink code slightly below
   prose so fewer lines need to scroll on a phone. Trim the chunky p-6 padding
   and drop the decorative gradient ring (pre::before), which paints over code
   at the scroll-viewport edges; fall back to a lighter 1px border. */
@media (max-width: 767px) {
    pre code {
        white-space: pre;
    }
    pre, code {
        font-size: 0.85em;
    }
    pre {
        padding: 0.75rem;
        border: 1px solid rgba(0, 0, 0, 0.08);
    }
    pre::before {
        display: none;
    }
    /* Reduce outer page gutters around main content on mobile.
       index.html wraps content in `<div class="p-8 ...">` (32px) which is
       too chunky on a phone. Scope with :has() so we don't disturb other p-8. */
    div.p-8:has(> div > main.prose) {
        padding: 1rem;
    }
    /* Navbar scrolls off the top on mobile (not fixed). Reclaims ~64px of
       viewport while reading. Menu returns when user scrolls back to top. */
    .navbar.fixed {
        position: static;
    }
    .drawer-content.pt-16 {
        padding-top: 0;
    }
    /* Honor literal newlines inside section headings on mobile so a triad
       like "Write it.\nRead it.\nRun it." breaks one beat per line here,
       while collapsing back to spaces (one line) on wider viewports.
       Scoped to .hero-title (the inner span) so surrounding template
       whitespace/indentation inside the <h2> doesn't render as extra lines. */
    main.prose h2 .hero-title {
        white-space: pre-line;
    }
}

/* Code block container: light background before JS runs (FOUC mitigation) */
pre:has(> code.language-technique),
pre:has(> code[data-lang="technique"]) {
    background-color: #eeeeec;
    border-radius: 4px;
}

[data-theme="goyo-dark"] pre:has(> code.language-technique),
[data-theme="goyo-dark"] pre:has(> code[data-lang="technique"]) {
    background-color: #1a1f2e;
}

/* --- light theme (default) --- */
.technique-constructor {
    color: #3465a4;
    font-weight: bold;
} /* procedure names    – blue      */
.technique-type {
    color: #8f5902;
    font-weight: bold;
} /* forma / types      – sienna    */
.technique-variable {
    color: #729fcf;
    font-weight: bold;
} /* parameters         – sky blue  */
.technique-function {
    color: #3b5d7d;
    font-weight: bold;
} /* invocations        – dark blue */
.technique-keyword {
    color: #75507b;
    font-weight: bold;
} /* repeat/foreach/in  – purple    */
.technique-number {
    color: #ad7fa8;
    font-weight: bold;
} /* numeric literals   – lavender  */
.technique-string {
    color: #4e9a06;
    font-weight: bold;
} /* string content     – green     */
.technique-label {
    color: #60989a;
    font-weight: bold;
} /* tablet labels      – teal      */
.technique-embedded {
    color: #c4a000;
    font-weight: bold;
} /* embedded lang tag  – amber     */
.technique-variant {
    color: #f57900;
    font-weight: bold;
} /* response values    – orange    */
.technique-attribute {
    color: #000000;
    font-weight: bold;
} /* @role ^place       – black     */
.technique-title {
    color: #000000;
    font-weight: bold;
} /* title text, steps  – black     */
.technique-preproc {
    color: #75507b;
} /* metadata, # marker – purple    */
.technique-punctuation {
    color: #999999;
    font-weight: bold;
} /* structural chars   – gray      */

/* --- dark theme --- */
[data-theme="goyo-dark"] .technique-constructor {
    color: #6fa3e0;
}
[data-theme="goyo-dark"] .technique-type {
    color: #c48a1e;
}
[data-theme="goyo-dark"] .technique-variable {
    color: #93c5fd;
}
[data-theme="goyo-dark"] .technique-function {
    color: #7aafd4;
}
[data-theme="goyo-dark"] .technique-keyword {
    color: #c084d4;
}
[data-theme="goyo-dark"] .technique-number {
    color: #d4b8d0;
}
[data-theme="goyo-dark"] .technique-string {
    color: #7ac520;
}
[data-theme="goyo-dark"] .technique-label {
    color: #7ecaca;
}
[data-theme="goyo-dark"] .technique-embedded {
    color: #e8c84a;
}
[data-theme="goyo-dark"] .technique-variant {
    color: #ff9b30;
}
[data-theme="goyo-dark"] .technique-attribute {
    color: #e2e8f0;
}
[data-theme="goyo-dark"] .technique-title {
    color: #e2e8f0;
}
[data-theme="goyo-dark"] .technique-preproc {
    color: #c084d4;
}
[data-theme="goyo-dark"] .technique-punctuation {
    color: #94a3b8;
}

/* ==========================================================================
   End Technique syntax highlighting
   ========================================================================== */

/* Landing-page section headings are already positioned by their section
   wrapper's padding, so the theme's 4rem h2 margin-top (designed for prose
   article flow) just inflates the gap between sections. */
main.prose .text-center > h2 {
    margin-top: 0;
}

/* Trim the landing-page section wrappers' generous Tailwind padding.
   They come stacked (content section's bottom + features section's top),
   doubling the visual gap between sections. These values override the
   theme's py-10/md:py-16 without requiring a Tailwind rebuild. */
main.prose > div.relative {
    padding-top: 1rem;       /* 16px on mobile (was 40px) */
    padding-bottom: 1rem;
}
@media (min-width: 768px) {
    main.prose > div.relative {
        padding-top: 3rem;    /* 48px on desktop (was 64px) */
        padding-bottom: 3rem;
    }
}

/* CTA section wants a touch more breathing room above its heading —
   the boxed gradient background reads as a distinct container, so the
   trimmed 1rem feels cramped here. */
main.prose > div.relative:has(.btn-final-cta-section) {
    padding-top: 2rem;       /* 32px on mobile */
}
@media (min-width: 768px) {
    main.prose > div.relative:has(.btn-final-cta-section) {
        padding-top: 4rem;    /* 64px on desktop */
    }
}

/* Remove rounded corners on blockquotes */
blockquote {
    border-radius: 0;
}

/* Inherit text colour for emphasis (theme sets it to primary/blue) */
em {
    color: inherit;
}

/* Indent lists so bullets aren't flush with the left margin */
main ul {
    padding-left: 1.5em;
}

/* Remove paragraph margins inside list items (theme gives p my-6 = 24px) */
main ul li p,
main ol li p {
    margin-top: 0;
    margin-bottom: 0;
}

/* Disc bullet instead of triangle (theme default looks like a tree expander) */
main ul li::before {
    content: "•";
    font-size: 1.2em;
    top: -0.1em !important;
}

/* Logo left-edge alignment is set via inline style on the navbar
   in header.html (CSS override was ineffective against DaisyUI layers) */

.navbar-tagline {
    display: none;
    font-size: 1rem;
}
@media (min-width: 1024px) {
    .navbar-tagline {
        display: inline-flex;
    }
}
/* Landing page overrides the mobile-hide so the tagline shows there too. */
.navbar-tagline.navbar-tagline--always {
    display: inline-flex;
}

/* Mobile-only site-name next to the logo — matches .navbar-tagline size so
   it reads as wayfinding, not a headline. */
.navbar-title {
    font-size: 1rem;
}

/* Disable the theme's global img:hover lift */
img:hover {
    transform: none;
}

/* Hide empty footer (border-t still shows when footer_html is blank) */
footer.footer:has(p:empty) {
    display: none;
}

/* Hide the TOC heading in the right sidebar */
div.sticky > h4 {
    display: none;
}

/* Hide copy button on code blocks */
.copy-code-button {
    display: none !important;
}

/* Make the accent gradient wrap uniformly around the whole code block
   instead of appearing only as a bar at the top */
pre::before {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    padding: 2px;
    border-radius: 8px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

/* Responsive prose font size — mirrors Tailwind's text-base / md:text-lg /
   lg:text-xl scale using their standard breakpoints (768 / 1024). Goyo's
   theme-base `p { font-size: 16px }` needs overriding at each step. */
main.prose,
main.prose p {
    font-size: 1rem;        /* 16px — mobile */
}
@media (min-width: 768px) { /* md */
    main.prose,
    main.prose p {
        font-size: 1.125rem; /* 18px */
    }
}
@media (min-width: 1024px) { /* lg */
    main.prose,
    main.prose p {
        font-size: 1.25rem;  /* 20px */
    }
}
main.prose em {
    font-size: inherit;
}

/* Technique source file caption — filename label below a .tq code block.
   Selectors are scoped to `main.prose p` to override the 20px prose rule above. */
main.prose p.tq-filename {
    text-align: right;
    font-family: "Source Code Pro", monospace;
    color: #94a3b8; /* slate-400 */
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 3px 0 0 0;
    padding-right: 6px;
}
main.prose pre:has(+ p.tq-filename) {
    margin-bottom: 0;
}
main.prose p.tq-filename a {
    color: inherit;
    text-decoration: none;
}

/* The theme's main.css sets body { line-height: 1.7 }, which is a prose
   line-height pushed onto every UI element. Tighten it — prose keeps its own
   line-height via .prose, and UI elements (buttons, nav, etc.) now inherit a
   sane value instead of a 27.2px line-box around 16px glyphs. */
body {
    line-height: 1.5;
}

/* Size nav bar icons and text to match larger prose */
.lg\:menu-horizontal .icon {
    width: 1.25rem !important;
    height: 1.25rem !important;
}
.lg\:menu-horizontal .btn {
    font-size: 1rem;
}

/* Mobile drawer menu: left-align items. The desktop nav uses
   `justify-end w-full` on every button to push content right in the
   horizontal bar; in the vertical drawer that reads as awkward right-
   alignment. Flip to left-align below the lg breakpoint. Also strip the
   wrapper's `px-5` — btn's own horizontal padding is enough indent. */
@media (max-width: 1023px) {
    .drawer-side .menu .btn.justify-end,
    .drawer-side .menu.justify-end {
        justify-content: flex-start;
    }
    .drawer-side div.px-5 {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Darken the background image behind the hero text (dark theme) */
.hero-section > .relative.z-10 {
    background: rgba(0, 0, 0, 0.5);
}

/* Solid text instead of gradient fade on hero headings.
   Scoped to .hero-section so the features section keeps theme defaults. */
.hero-section .hero-title {
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
    color: #f3f4f6 !important;
}

[data-theme="goyo-light"] .hero-section .hero-description {
    color: #d1d5db !important;
}

[data-theme="goyo-light"] .hero-section .hero-badge {
    color: #e5e7eb !important;
}

/* Let the star field show through in both themes */
.hero-background {
    background: transparent !important;
}

/* Feature-card icon colour on light theme — match .technique-constructor
   (procedure declarations) instead of the theme's saturated blue-500. */
[data-theme="goyo-light"] .feature-icon {
    color: #3465a4;
}

/* And tint the tile behind the icon to match, so it doesn't clash with the
   cooler blue-500 the theme ships. Keeps the 10%/20% alpha levels from the
   original gradient + border. */
[data-theme="goyo-light"] .feature-icon-bg {
    background: linear-gradient(135deg, #3465a41a, #3465a41a);
    border: 1px solid #3465a433;
}

/* Download buttons on the Installation page — rectangular OS-icon buttons
   that point at the latest release binary. JS in that page's HTML rewrites
   the href and version label from the GitHub API on load; fallback href
   points at the /releases/latest page. */
.download-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2rem 0;
}
@media (max-width: 767px) {
    .download-buttons {
        grid-template-columns: 1fr;
    }
}
.download-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 1.25rem 1rem;
    border: 1px solid rgba(148, 163, 184, 0.3);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    transition: border-color 0.2s, background-color 0.2s;
}
.download-button:hover {
    border-color: rgba(148, 163, 184, 0.6);
    background-color: rgba(148, 163, 184, 0.06);
    text-decoration: none;
}
.download-button .fa-brands {
    font-size: 2.5rem;
    color: #8f5902;  /* technique-type sienna, light */
    margin-bottom: 0.5rem;
}
[data-theme="goyo-dark"] .download-button .fa-brands {
    color: #c48a1e;  /* technique-type sienna, dark */
}
.download-os {
    font-size: 1.5rem;
    font-weight: 600;
}
.download-arch {
    font-size: 0.875rem;
    color: #94a3b8;
    font-family: "Source Code Pro", monospace;
}