@import url("./raven-theme.css");

html {
    scroll-padding-top: 5rem;
}

html[data-bs-theme="light"],
html[data-bs-theme="dark"] {
    --bs-body-bg: var(--raven-bg);
    --bs-body-color: var(--raven-ink);
    --bs-body-font-family: var(--raven-font-sans);
    --bs-border-color: var(--raven-line);
    --bs-border-color-translucent: var(--raven-line);
    --bs-link-color: var(--raven-accent);
    --bs-link-hover-color: var(--raven-accent-strong);
    --bs-code-color: var(--raven-accent-strong);
    --bs-secondary-color: var(--raven-muted);
    --bs-tertiary-bg: var(--raven-surface-raised);
    --bs-border-radius: 0.7rem;
    --bs-border-radius-lg: var(--raven-radius);
}

html[data-bs-theme="light"] {
    --bs-body-color-rgb: 41, 35, 52;
    --bs-body-bg-rgb: 247, 246, 250;
    --bs-link-color-rgb: 116, 71, 216;
    --bs-link-hover-color-rgb: 93, 50, 189;
}

html[data-bs-theme="dark"] {
    --bs-body-color-rgb: 242, 237, 247;
    --bs-body-bg-rgb: 16, 14, 21;
    --bs-link-color-rgb: 175, 145, 255;
    --bs-link-hover-color-rgb: 192, 168, 255;
}

body {
    background:
        radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--raven-accent) 8%, transparent), transparent 34rem),
        var(--raven-bg);
    color: var(--raven-ink);
    font-family: var(--raven-font-sans);
    line-height: 1.65;
}

body > header {
    border-color: var(--raven-line) !important;
    background: var(--raven-header-bg) !important;
    backdrop-filter: blur(16px);
}

.navbar {
    min-height: 4.5rem;
}

.navbar .navbar-brand {
    gap: 0.7rem;
    color: var(--raven-ink);
    font-weight: 750;
    letter-spacing: -0.02em;
}

.navbar .navbar-brand #logo {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.78rem;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--raven-accent) 28%, transparent);
}

.navbar .nav-link {
    color: var(--raven-muted);
    font-weight: 600;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
    color: var(--raven-accent);
}

.navbar .search input,
.toc form.filter input {
    border-color: var(--raven-line);
    background: color-mix(in srgb, var(--raven-surface) 88%, transparent);
}

body > main {
    gap: clamp(1rem, 3vw, 3rem);
}

article {
    min-width: 0;
    color: var(--raven-ink);
}

article h1,
article h2,
article h3,
article h4 {
    color: var(--raven-ink);
    font-weight: 720;
    letter-spacing: -0.025em;
}

article h1 {
    margin-bottom: 1.3rem;
    font-size: clamp(2.2rem, 5vw, 3.4rem);
}

article h2 {
    margin-top: 2.5rem;
    padding-bottom: 0.45rem;
    border-bottom: 1px solid var(--raven-line);
}

article a {
    text-decoration-color: color-mix(in srgb, var(--raven-accent) 38%, transparent);
    text-underline-offset: 0.18em;
}

article code,
.toc code,
.affix code {
    border-radius: 0.35rem;
    background: var(--raven-code-bg);
    color: var(--raven-accent-strong);
    font-family: var(--raven-font-mono);
}

article pre {
    overflow: hidden;
    border: 1px solid var(--raven-line);
    border-radius: 0.9rem;
    background: var(--raven-code-bg);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--raven-ink) 5%, transparent);
}

article pre > code,
article pre > code.hljs {
    overflow-x: auto;
    background: transparent;
    color: var(--raven-code-fg);
    font-family: var(--raven-font-mono);
}

/* VS Code Light+ syntax colors. Raven's brand accent stays outside code. */
.hljs-keyword,
.hljs-literal,
.hljs-symbol {
    color: var(--raven-syntax-keyword) !important;
}

.hljs-built_in,
.hljs-type {
    color: var(--raven-syntax-type) !important;
}

.hljs-title.function,
.hljs-title.function.invoke {
    color: var(--raven-syntax-function) !important;
}

.hljs-string,
.hljs-meta .hljs-string {
    color: var(--raven-syntax-string) !important;
}

.hljs-number {
    color: var(--raven-syntax-number) !important;
}

.hljs-comment,
.hljs-quote {
    color: var(--raven-syntax-comment) !important;
}

.hljs-meta,
.hljs-doctag {
    color: var(--raven-syntax-meta) !important;
}

.hljs-error,
.hljs-invalid {
    color: var(--raven-syntax-invalid) !important;
}

.toc,
.affix {
    color: var(--raven-muted);
}

.toc a,
.affix a {
    color: var(--raven-muted);
}

.toc a:hover,
.toc a:focus,
.toc a.active,
.affix a:hover,
.affix a:focus,
.affix a.active {
    color: var(--raven-accent);
}

.toc li.active > a {
    font-weight: 700;
}

.breadcrumb {
    --bs-breadcrumb-item-active-color: var(--raven-muted);
}

.alert {
    border: 1px solid var(--raven-line);
    border-left: 4px solid var(--raven-accent);
    border-radius: 0.8rem;
    background: color-mix(in srgb, var(--raven-accent-soft) 72%, var(--raven-surface));
    color: var(--raven-ink);
}

article table {
    --bs-table-bg: color-mix(in srgb, var(--raven-surface) 90%, transparent);
    --bs-table-border-color: var(--raven-line);
    overflow: hidden;
    border-color: var(--raven-line);
    border-radius: 0.7rem;
}

article thead {
    --bs-table-bg: var(--raven-surface-raised);
}

.contribution,
.next-article {
    border-color: var(--raven-line) !important;
}

.next-article a {
    color: var(--raven-accent);
    font-weight: 650;
}

body > footer {
    border-color: var(--raven-line) !important;
    background: color-mix(in srgb, var(--raven-surface) 75%, transparent);
    color: var(--raven-muted) !important;
}

body[data-yaml-mime="ManagedReference"] article h1[data-uid],
body[data-yaml-mime="ApiPage"] article h1[data-uid] {
    color: var(--raven-ink);
}

body[data-yaml-mime="ManagedReference"] article .facts,
body[data-yaml-mime="ApiPage"] article .facts {
    padding: 0.9rem 1rem;
    border: 1px solid var(--raven-line);
    border-radius: 0.75rem;
    background: var(--raven-surface-raised);
}

body:has(.raven-hero) > main {
    display: block;
    max-width: 100%;
    padding-right: 0;
    padding-left: 0;
}

body:has(.raven-hero) .breadcrumb,
body:has(.raven-hero) .affix {
    display: none;
}

body:has(.raven-hero) article {
    max-width: none;
    padding: 0;
}

.raven-hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(32rem, 1.1fr);
    gap: clamp(2.5rem, 7vw, 7rem);
    align-items: center;
    width: min(90rem, calc(100% - 3rem));
    min-height: min(46rem, calc(100vh - 4.5rem));
    margin: 0 auto;
    padding: 5rem 0;
}

.raven-eyebrow {
    margin: 0 0 1rem;
    color: var(--raven-accent);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.raven-hero h1 {
    max-width: 13ch;
    margin: 0;
    font-size: clamp(3.3rem, 6.5vw, 6.4rem);
    line-height: 0.96;
    letter-spacing: -0.06em;
}

.raven-hero h1 span {
    color: var(--raven-accent);
}

.raven-hero-lead {
    max-width: 43rem;
    margin: 1.75rem 0 0;
    color: var(--raven-muted);
    font-size: clamp(1.08rem, 1.6vw, 1.3rem);
    line-height: 1.65;
}

.raven-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.raven-button {
    display: inline-flex;
    gap: 0.6rem;
    align-items: center;
    justify-content: center;
    padding: 0.78rem 1.15rem;
    border: 1px solid var(--raven-line);
    border-radius: 0.65rem;
    background: var(--raven-surface);
    color: var(--raven-ink);
    font-weight: 700;
    text-decoration: none;
}

.raven-button:hover {
    border-color: var(--raven-accent);
    color: var(--raven-accent);
}

.raven-button-primary {
    border-color: var(--raven-accent);
    background: var(--raven-accent);
    color: white;
}

.raven-button-primary:hover {
    background: var(--raven-accent-strong);
    color: white;
}

.raven-preview-note {
    margin-top: 1rem;
    color: var(--raven-muted);
    font-size: 0.84rem;
}

.raven-hero-code {
    overflow: hidden;
    border: 1px solid var(--raven-line);
    border-radius: 1.15rem;
    background: var(--raven-code-bg);
    box-shadow: 0 2rem 6rem color-mix(in srgb, var(--raven-accent) 18%, transparent);
    transform: rotate(0.6deg);
}

.raven-code-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--raven-line);
    color: var(--raven-muted);
    font-family: var(--raven-font-mono);
    font-size: 0.78rem;
}

.raven-code-dots {
    color: var(--raven-accent);
    letter-spacing: 0.25rem;
}

.raven-hero-code pre {
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.raven-hero-code pre code {
    padding: clamp(1.2rem, 3vw, 2rem);
    font-size: clamp(0.78rem, 1.1vw, 0.98rem);
    line-height: 1.75;
}

.raven-code-slide[hidden] {
    display: none;
}

.raven-carousel-controls {
    display: flex;
    gap: 0.4rem;
    padding: 0.7rem;
    border-top: 1px solid var(--raven-line);
    background: color-mix(in srgb, var(--raven-surface-raised) 72%, var(--raven-code-bg));
}

.raven-carousel-controls button {
    padding: 0.36rem 0.68rem;
    border: 1px solid transparent;
    border-radius: 0.45rem;
    background: transparent;
    color: var(--raven-muted);
    font-size: 0.75rem;
    font-weight: 700;
}

.raven-carousel-controls button:hover {
    color: var(--raven-ink);
}

.raven-carousel-controls button[aria-selected="true"] {
    border-color: color-mix(in srgb, var(--raven-accent) 35%, var(--raven-line));
    background: var(--raven-accent-soft);
    color: var(--raven-accent);
}

.raven-carousel-controls button:focus-visible {
    outline: 2px solid var(--raven-accent);
    outline-offset: 2px;
}

.raven-home-intro {
    padding: 6rem max(1.5rem, calc((100% - 70rem) / 2));
    background: color-mix(in srgb, var(--raven-surface) 88%, transparent);
    text-align: center;
}

.raven-home-intro h2 {
    margin: 0;
    border: 0;
    font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.raven-home-intro > p:last-child {
    max-width: 54rem;
    margin: 1.25rem auto 0;
    color: var(--raven-muted);
    font-size: 1.12rem;
}

.raven-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    width: min(70rem, calc(100% - 3rem));
    margin: 0 auto;
    padding: 5rem 0 7rem;
}

.raven-feature-card {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
    min-height: 12rem;
    padding: 1.5rem;
    border: 1px solid var(--raven-line);
    border-radius: 0.9rem;
    background: var(--raven-surface);
    color: var(--raven-muted);
    text-decoration: none;
    transition: border-color 140ms ease, transform 140ms ease;
}

.raven-feature-card:hover {
    border-color: var(--raven-accent);
    color: var(--raven-muted);
    transform: translateY(-3px);
}

.raven-feature-card strong {
    color: var(--raven-ink);
    font-size: 1.18rem;
}

.raven-card-kicker {
    color: var(--raven-accent);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    .raven-hero {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .raven-feature-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767.98px) {
    .navbar {
        min-height: 4rem;
    }

    article h1 {
        font-size: 2.25rem;
    }

    .raven-hero {
        width: min(100% - 2rem, 42rem);
        padding: 3.5rem 0;
    }

    .raven-hero h1 {
        font-size: clamp(2.8rem, 13vw, 4.2rem);
    }
}