/* =========================================================================
   Data & AI Starter — black & red theme
   =========================================================================

   Loaded after Bootstrap. One palette drives two frameworks:

     1. Bootstrap  (--bs-*)     — pages already converted
     2. Tailwind   (--color-*)  — pages not converted yet

   The Tailwind block is a TRANSITION BRIDGE. The old compiled stylesheet
   references var(--color-*) in 123 places, so re-pointing those variables
   turns every unconverted page dark too, instead of leaving it white while
   the chrome around it is black. Delete that block (and stop loading the
   Tailwind bundle) once the last template is on Bootstrap.

   Contrast: every foreground/background pair below meets WCAG 2.2 AA.
     paper   #F4F4F6 on ink-900  → 17.9:1
     muted   #A8A8B3 on ink-900  →  8.6:1
     faint   #85858F on ink-900  →  5.4:1
     red-400 #FF3546 on ink-900  →  5.5:1
     #fff    on red-500 #E01B2E  →  4.8:1
   ========================================================================= */

:root {
    /* ---- Ink (backgrounds) ---- */
    --ink-900: #08080a;   /* page canvas */
    --ink-800: #0f0f13;   /* raised band */
    --ink-700: #16161c;   /* cards */
    --ink-600: #1e1e26;   /* card hover */
    --line:    #2a2a33;   /* borders */
    --line-soft: #1c1c23;

    /* ---- Paper (foregrounds) ---- */
    --paper:       #f4f4f6;
    --paper-muted: #a8a8b3;
    --paper-faint: #85858f;

    /* ---- Red ---- */
    --red-500: #e01b2e;   /* solid fills, white text on top */
    --red-400: #ff3546;   /* text and links on dark */
    --red-300: #ff6b78;   /* hover */
    --red-tint:        rgba(224, 27, 46, .12);
    --red-tint-strong: rgba(224, 27, 46, .22);

    --radius:    14px;
    --radius-sm: 10px;

    /* Type: Space Grotesk sets headlines (technical, a little characterful,
       excellent large on dark); Manrope carries body copy (warm geometric,
       highly readable, avoids the default-Inter look); JetBrains Mono is the
       label/eyebrow face. All self-hosted variable fonts. */
    --font-display: 'Space Grotesk', 'Manrope', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

    /* =====================================================================
       Bootstrap mapping
       ===================================================================== */
    --bs-body-bg: var(--ink-900);
    --bs-body-bg-rgb: 8, 8, 10;
    --bs-body-color: var(--paper);
    --bs-body-color-rgb: 244, 244, 246;
    --bs-body-font-family: var(--font-sans);
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.6;

    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--paper-muted);
    --bs-secondary-bg: var(--ink-700);
    --bs-tertiary-color: var(--paper-faint);
    --bs-tertiary-bg: var(--ink-800);

    --bs-heading-color: var(--paper);

    --bs-border-color: var(--line);
    --bs-border-color-translucent: rgba(255, 255, 255, .09);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-lg: var(--radius);

    --bs-primary: var(--red-500);
    --bs-primary-rgb: 224, 27, 46;
    --bs-primary-text-emphasis: var(--red-300);
    --bs-primary-bg-subtle: var(--red-tint);
    --bs-primary-border-subtle: var(--red-tint-strong);

    --bs-link-color: var(--red-400);
    --bs-link-color-rgb: 255, 53, 70;
    --bs-link-hover-color: var(--red-300);
    --bs-link-hover-color-rgb: 255, 107, 120;

    --bs-code-color: var(--red-300);
    --bs-highlight-bg: var(--red-tint);

    --bs-focus-ring-color: rgba(255, 53, 70, .45);
    --bs-focus-ring-width: 3px;

    /* =====================================================================
       Tailwind bridge — REMOVE once every template is on Bootstrap
       ===================================================================== */
    --color-canvas: var(--ink-900);
    --color-surface: var(--ink-800);
    --color-subtle: var(--ink-700);
    --color-subtle-deep: var(--ink-600);

    --color-fg-default: var(--paper);
    --color-fg-muted: var(--paper-muted);
    --color-fg-faint: var(--paper-faint);
    --color-fg-on-brand: #ffffff;

    --color-link: var(--red-400);
    --color-link-hover: var(--red-300);
    --color-link-faint: var(--red-tint);
    --color-accent: var(--red-400);
    --color-highlight: var(--red-300);

    --color-border: var(--line);
    --color-border-strong: #3a3a45;

    --color-status-success: #34d399;
    --color-status-warning: #fbbf24;
    --color-status-danger: var(--red-400);

    /* Category chips, re-toned for a dark canvas. */
    --color-cat-news-bg: var(--red-tint);
    --color-cat-news-fg: var(--red-300);
    --color-cat-tips-bg: #1c1c23;
    --color-cat-tips-fg: #c8c8d2;
    --color-cat-picks-bg: rgba(251, 191, 36, .14);
    --color-cat-picks-fg: #fbbf24;
    --color-cat-tutorials-bg: rgba(52, 211, 153, .14);
    --color-cat-tutorials-fg: #34d399;
    --color-cat-courses-bg: rgba(52, 211, 153, .14);
    --color-cat-courses-fg: #34d399;
    --color-cat-exams-bg: var(--red-tint);
    --color-cat-exams-fg: var(--red-300);
    --color-cat-web-development-bg: rgba(96, 165, 250, .14);
    --color-cat-web-development-fg: #60a5fa;
    --color-cat-prompt-engineering-bg: rgba(244, 114, 182, .14);
    --color-cat-prompt-engineering-fg: #f472b6;
    --color-cat-careers-bg: rgba(251, 191, 36, .14);
    --color-cat-careers-fg: #fbbf24;
    --color-cat-healthcare-ai-bg: rgba(45, 212, 191, .14);
    --color-cat-healthcare-ai-fg: #2dd4bf;

    /* Tailwind's own font tokens, so unconverted pages match. */
    --font-sans-tw: var(--font-sans);
    --font-serif: var(--font-display);
}

/* Tailwind pre-computed these three alpha variants to fixed purple hex at
   build time, so the variable override above cannot reach them. */
.border-\[color\:var\(--color-link\)\]\/30 { border-color: var(--red-tint-strong) !important; }
.bg-\[color\:var\(--color-link\)\]\/5      { background-color: var(--red-tint) !important; }
.focus\:ring-\[color\:var\(--color-link\)\]\/20:focus { --tw-ring-color: rgba(255, 53, 70, .3) !important; }

/* Tailwind's bg-white / text-white assume a light page. On a black canvas a
   literal white panel is a flashbang; map them to the dark surfaces. Part of
   the bridge — remove with the block above. */
.bg-white { background-color: var(--ink-800) !important; }
.bg-white\/90, .bg-white\/75 { background-color: rgba(15, 15, 19, .88) !important; }


/* =========================================================================
   Base
   =========================================================================
   Everything below this point styles Bootstrap's own components through their
   documented CSS custom properties (--bs-btn-*, --bs-card-*, --bs-nav-*, …).
   There is deliberately no bespoke component layer: a card is `.card`, a chip
   is `.badge`, a button is `.btn`. The only hand-written blocks are the four
   things Bootstrap has no component for — the skip link, the mobile dock, the
   rendered-Markdown article body, and the reading-progress bar.
   ========================================================================= */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-display);
    letter-spacing: -.02em;
}

.font-mono { font-family: var(--font-mono); }

/* Bootstrap's .text-muted resolves to --bs-secondary-color, which the palette
   already points at #a8a8b3 (8.6:1). Nothing to add — use .text-muted. */

/* =========================================================================
   Buttons
   =========================================================================
   Bootstrap compiles .btn-primary's colours to literal hex, so overriding
   --bs-primary alone does not reach it. Re-declaring the component variables
   is the documented way to retheme a variant. */
.btn-primary {
    --bs-btn-bg: var(--red-500);
    --bs-btn-border-color: var(--red-500);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #c4162a;
    --bs-btn-hover-border-color: #c4162a;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #a91224;
    --bs-btn-active-border-color: #a91224;
    --bs-btn-disabled-bg: var(--red-500);
    --bs-btn-disabled-border-color: var(--red-500);
}

.btn-outline-primary {
    --bs-btn-color: var(--red-400);
    --bs-btn-border-color: var(--red-tint-strong);
    --bs-btn-hover-bg: var(--red-500);
    --bs-btn-hover-border-color: var(--red-500);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--red-500);
    --bs-btn-active-border-color: var(--red-500);
}

.btn-outline-light {
    --bs-btn-color: var(--paper);
    --bs-btn-border-color: var(--line);
    --bs-btn-hover-bg: var(--ink-600);
    --bs-btn-hover-border-color: var(--line);
    --bs-btn-hover-color: var(--paper);
    --bs-btn-active-bg: var(--ink-600);
}

/* Every control clears the 24x24 minimum of WCAG 2.2 SC 2.5.8, and the
   comfortable 44px on touch. .btn-sm is Bootstrap's smallest and lands at
   ~31px, so it only needs the touch bump. */
@media (pointer: coarse) {
    .btn, .page-link, .nav-link, .dropdown-item { min-height: 44px; }
    .btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* =========================================================================
   Cards
   ========================================================================= */
.card {
    --bs-card-bg: var(--ink-700);
    --bs-card-border-color: var(--line);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--ink-800);
    --bs-card-color: var(--paper);
    transition: border-color .18s ease, transform .18s ease;
}

/* Only cards that are a link target get the affordance. */
a.card:hover,
.card:has(a:hover),
.card:has(a:focus-visible) {
    border-color: var(--red-tint-strong);
}

.card-title a {
    color: inherit;
    text-decoration: none;
}
.card-title a:hover { color: var(--red-300); }

/* Card media. Bootstrap's .ratio gives the box; this only supplies the
   placeholder colour behind a transparent or still-loading image. */
.card-img-top,
.card-img-bottom { background-color: var(--ink-800); object-fit: cover; }

/* =========================================================================
   Navbar, offcanvas, dropdown
   ========================================================================= */
.navbar {
    --bs-navbar-color: var(--paper-muted);
    --bs-navbar-hover-color: var(--paper);
    --bs-navbar-active-color: var(--red-400);
    --bs-navbar-brand-color: var(--paper);
    --bs-navbar-brand-hover-color: var(--paper);
    --bs-navbar-toggler-border-color: var(--line);
    --bs-navbar-toggler-focus-width: var(--bs-focus-ring-width);

    /* Solid, NOT translucent-with-backdrop-filter. backdrop-filter makes an
       element a containing block for position:fixed descendants, and the
       offcanvas menu lives inside this navbar — so a blurred navbar turned the
       off-screen offcanvas into real document overflow and gave every page a
       viewport-wide horizontal scroll on mobile. */
    background-color: var(--ink-900);
}

.navbar-brand { font-family: var(--font-display); font-weight: 700; letter-spacing: -.02em; }
.navbar-brand .text-danger { color: var(--red-400) !important; }
.navbar-brand img { height: 30px; width: auto; }

.navbar-nav {
    --bs-nav-link-font-weight: 600;
    --bs-nav-link-font-size: .95rem;
}

.offcanvas {
    --bs-offcanvas-bg: var(--ink-800);
    --bs-offcanvas-color: var(--paper);
    --bs-offcanvas-border-color: var(--line);
}

.dropdown-menu {
    --bs-dropdown-bg: var(--ink-700);
    --bs-dropdown-border-color: var(--line);
    --bs-dropdown-link-color: var(--paper-muted);
    --bs-dropdown-link-hover-bg: var(--ink-600);
    --bs-dropdown-link-hover-color: var(--paper);
    --bs-dropdown-link-active-bg: var(--red-500);
}

/* =========================================================================
   Badges, breadcrumb, pagination, list group, forms
   ========================================================================= */
.badge {
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .68rem;
}

/* .text-bg-danger composes Bootstrap's danger with a computed foreground;
   ours is a flatter tint that reads as a label rather than an alert. */
.badge.text-bg-danger {
    background-color: var(--red-tint) !important;
    color: var(--red-300) !important;
}
.badge.text-bg-secondary {
    background-color: var(--ink-600) !important;
    color: var(--paper-muted) !important;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--paper-faint);
    --bs-breadcrumb-item-active-color: var(--paper-muted);
    --bs-breadcrumb-font-size: .82rem;
}

.pagination {
    --bs-pagination-bg: var(--ink-700);
    --bs-pagination-color: var(--paper-muted);
    --bs-pagination-border-color: var(--line);
    --bs-pagination-hover-bg: var(--ink-600);
    --bs-pagination-hover-color: var(--paper);
    --bs-pagination-hover-border-color: var(--line);
    --bs-pagination-active-bg: var(--red-500);
    --bs-pagination-active-border-color: var(--red-500);
    --bs-pagination-active-color: #fff;
    --bs-pagination-disabled-bg: var(--ink-800);
    --bs-pagination-disabled-color: var(--paper-faint);
    --bs-pagination-disabled-border-color: var(--line);
    --bs-pagination-focus-bg: var(--ink-600);
    --bs-pagination-focus-color: var(--paper);
}

.list-group {
    --bs-list-group-bg: var(--ink-700);
    --bs-list-group-color: var(--paper);
    --bs-list-group-border-color: var(--line);
    --bs-list-group-action-hover-bg: var(--ink-600);
    --bs-list-group-action-hover-color: var(--paper);
    --bs-list-group-active-bg: var(--red-500);
    --bs-list-group-active-border-color: var(--red-500);
}

.form-control, .form-select {
    background-color: var(--ink-800);
    border-color: var(--line);
    color: var(--paper);
}
.form-control:focus, .form-select:focus {
    background-color: var(--ink-800);
    border-color: var(--red-400);
    color: var(--paper);
    box-shadow: 0 0 0 var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.form-control::placeholder { color: var(--paper-faint); }

.accordion {
    --bs-accordion-bg: var(--ink-700);
    --bs-accordion-color: var(--paper);
    --bs-accordion-border-color: var(--line);
    --bs-accordion-btn-color: var(--paper);
    --bs-accordion-btn-bg: var(--ink-700);
    --bs-accordion-active-bg: var(--red-tint);
    --bs-accordion-active-color: var(--red-300);
}

/* =========================================================================
   Carousel
   ========================================================================= */
.carousel-caption-panel {
    background: linear-gradient(to top, rgba(8, 8, 10, .95) 12%, rgba(8, 8, 10, .55) 55%, rgba(8, 8, 10, .15));
}

/* Bootstrap's dark theme paints the indicators black-on-black, and forces
   content-box sizing so the declared height becomes height + padding. Both are
   corrected here; the 34x24 hit area meets SC 2.5.8.

   The selector has to carry the [data-bs-theme] prefix: Bootstrap's dark rule
   is more specific than a bare `.carousel-indicators [data-bs-target]`, so a
   shorter selector loses the background-color no matter what order it loads
   in — which is exactly how these went back to black. */
[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target],
.carousel-indicators [data-bs-target] {
    box-sizing: border-box;
    width: 34px;
    height: 24px;
    padding: 10px 0;
    margin: 0 4px;
    border: 0;
    opacity: 1;
    background-color: rgba(255, 255, 255, .55);
    background-clip: content-box;
}
/* Padding of 8px leaves an 8px-tall bar rather than 4px — a hairline is
   invisible over a photographic hero even at full white. */
[data-bs-theme="dark"] .carousel .carousel-indicators [data-bs-target],
.carousel-indicators [data-bs-target] { padding: 8px 0; border-radius: 4px; }

[data-bs-theme="dark"] .carousel .carousel-indicators .active,
.carousel-indicators .active { background-color: var(--red-400); }

.carousel-control-prev, .carousel-control-next { width: 8%; }
.carousel-control-prev-icon, .carousel-control-next-icon {
    background-color: rgba(8, 8, 10, .6);
    border-radius: 50%;
    padding: 1.1rem;
    background-size: 45%;
}

/* =========================================================================
   Skip link — no Bootstrap equivalent
   ========================================================================= */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1100;
    padding: .7rem 1.1rem;
    background: var(--red-500);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   Floating mobile dock
   =========================================================================
   A thumb-reachable bar pinned to the bottom on phones and tablets. It is
   built from Bootstrap's .nav, and hidden from lg up where the navbar has
   room for the same links — so nothing is mobile-only content.

   `env(safe-area-inset-bottom)` keeps it clear of the iPhone home indicator,
   and the matching body padding stops it covering the footer. */
.mobile-dock {
    position: fixed;
    z-index: 1030;
    inset: auto 0 0 0;
    background: rgba(15, 15, 19, .92);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

.mobile-dock .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .18rem;
    min-height: 56px;
    justify-content: center;
    padding: .45rem .25rem;
    color: var(--paper-muted);
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    border-top: 2px solid transparent;
}

.mobile-dock .nav-link svg { width: 21px; height: 21px; }
.mobile-dock .nav-link:hover { color: var(--paper); }
.mobile-dock .nav-link.active {
    color: var(--red-400);
    border-top-color: var(--red-500);
    background: linear-gradient(to bottom, var(--red-tint), transparent 70%);
}

@media (max-width: 991.98px) {
    body { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); }
}

/* =========================================================================
   Article body — rendered Markdown
   =========================================================================
   Bootstrap styles elements it emits, not arbitrary Markdown output, so the
   converted HTML needs its own measure and rhythm. 68ch keeps line length
   inside the 50-75 character band that reads fastest.
   ========================================================================= */
.article-body {
    max-width: 68ch;
    font-size: 1.075rem;
    line-height: 1.75;
    color: #e6e6ea;
}

.article-body > * + * { margin-top: 1.35rem; }
.article-body h2 { font-size: clamp(1.35rem, 3.4vw, 1.7rem); margin-top: 2.6rem; }
.article-body h3 { font-size: clamp(1.15rem, 3vw, 1.32rem); margin-top: 2rem; }
.article-body h2 + *, .article-body h3 + * { margin-top: .9rem; }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li + li { margin-top: .5rem; }
.article-body strong { color: #fff; }
.article-body a { text-underline-offset: .18em; }

.article-body blockquote {
    border-left: 3px solid var(--red-500);
    padding: .2rem 0 .2rem 1.15rem;
    margin-left: 0;
    color: var(--paper-muted);
    font-style: italic;
}

.article-body code {
    background: var(--ink-700);
    padding: .12em .38em;
    border-radius: 5px;
    font-size: .89em;
}
.article-body pre {
    background: var(--ink-800);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 1rem 1.15rem;
    overflow-x: auto;
}
.article-body pre code { background: none; padding: 0; }

/* Images, galleries and video embeds emitted by ContentRenderer. */
.post-figure { margin: 2rem 0; }
.post-figure img {
    width: 100%;
    height: auto;
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--ink-800);
}
.post-figure figcaption {
    margin-top: .55rem;
    font-size: .84rem;
    color: var(--paper-faint);
}

.post-gallery {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    margin: 2rem 0;
}
.post-gallery .post-figure { margin: 0; }

.post-video { margin: 2rem 0; }
.post-video__frame {
    position: relative;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: #000;
}
.post-video__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Wide tables scroll inside themselves rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; }

/* =========================================================================
   Reading progress + progressive disclosure
   ========================================================================= */
.read-progress {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: 3px;
    background: transparent;
}
.read-progress span {
    display: block;
    height: 100%;
    width: 0;
    background: var(--red-500);
}

.read-more-collapsible {
    max-height: 1800px;
    overflow: hidden;
    position: relative;
}
.read-more-collapsible::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 140px;
    background: linear-gradient(to bottom, transparent, var(--ink-900));
    pointer-events: none;
}
.read-more-collapsible.is-expanded { max-height: none; }
.read-more-collapsible.is-expanded::after { display: none; }

/* =========================================================================
   Motion
   ========================================================================= */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}