/*
 * Oimo blog: the oimo.com landing look (providers-tracker-ui
 * src/ui/landing-chrome.ts, design.md §8.26) on top of Ghost's Source theme.
 * Always dark: near-black canvas, a blue wash at the top, a glass menu bar,
 * Manrope 800 headings, Inter body, JetBrains Mono code, blue pill buttons.
 *
 * Plain CSS loaded after built/screen.css, so Source's own build stays as is.
 * Set Ghost's accent color to #2B59FF (Settings → Design) to match.
 */

:root {
    color-scheme: dark;
    --o-bg: #08080c;
    --o-text: #f5f5f7;
    --o-text-2: #c4c7d4;
    --o-text-3: #71717a;
    --o-blue: #2b59ff;
    --o-blue-light: #7c9bff;
    --o-overlay: rgb(255 255 255 / 0.06);
    --o-border: rgb(255 255 255 / 0.08);
    --o-border-strong: rgb(255 255 255 / 0.14);
    --o-heading: "Manrope", var(--font-sans);

    /* Source's own tokens, pinned to the landing palette. */
    --background-color: var(--o-bg);
    --ghost-accent-color: var(--o-blue);
    --color-darker-gray: var(--o-text);
    --color-primary-text: var(--o-text);
    --color-secondary-text: var(--o-text-2);
    --color-lighter-gray: var(--o-overlay);
    --color-border: var(--o-border);
    --color-dark-border: var(--o-border-strong);
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

html,
body {
    background: var(--o-bg);
    color: var(--o-text-2);
}

body {
    font-family: var(--font-sans);
    overflow-x: clip;
}

::selection {
    background: rgb(43 89 255 / 0.45);
    color: #fff;
}

:focus-visible {
    outline: 2px solid var(--o-blue-light);
    outline-offset: 2px;
}

.oimo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* The top's blue wash, as on oimo.com's blog and privacy pages. */
.gh-viewport {
    position: relative;
}

.oimo-top {
    position: absolute;
    inset: 0 0 auto;
    z-index: 0;
    height: 500px;
    background: linear-gradient(#14205a, rgb(20 32 90 / 0));
    pointer-events: none;
}

.gh-viewport > :not(.oimo-top) {
    position: relative;
    z-index: 1;
}

/* Menu bar: glass, 64px, the wordmark on the left. */
.gh-navigation {
    height: 64px;
    background: rgb(255 255 255 / 0.04);
    border-bottom: 1px solid var(--o-border);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    color: var(--o-text);
}

.gh-navigation-logo {
    display: inline-flex;
    align-items: center;
}

.gh-navigation-logo .oimo-logo {
    width: auto;
    height: 24px;
}

.gh-navigation-menu .nav a {
    padding: 8px 12px;
    border-radius: 8px;
    color: var(--o-text-2);
    font-size: 1.4rem;
    font-weight: 500;
}

.gh-navigation-menu .nav a:hover,
.gh-navigation-menu .nav-current a {
    background: var(--o-overlay);
    color: var(--o-text);
    opacity: 1;
}

.gh-navigation-members a:not(.gh-button) {
    color: var(--o-text);
    font-size: 1.4rem;
    font-weight: 500;
}

.gh-navigation-members a:not(.gh-button):hover {
    color: var(--o-blue-light);
    opacity: 1;
}

/* Buttons: the landing's blue pill. */
.gh-button,
.gh-form button,
.gh-form .gh-button {
    border: 0;
    border-radius: 100px;
    background: var(--o-blue);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.35), 0 8px 24px rgb(43 89 255 / 0.4);
    color: #fff;
    font-size: 1.4rem;
    font-weight: 500;
    transition: filter 0.15s ease;
}

.gh-button:hover,
.gh-form button:hover {
    filter: brightness(1.15);
    opacity: 1;
}

/* Email signup fields: a glass input on the dark canvas. */
.gh-form {
    border-radius: 100px;
    background: var(--o-overlay);
    box-shadow: inset 0 0 0 1px var(--o-border-strong);
}

.gh-form:hover {
    background: rgb(255 255 255 / 0.09);
}

.gh-form-input,
.gh-form-input::placeholder {
    color: var(--o-text-2);
}

/* Headings in Manrope 800, in the landing's text color. */
.is-title,
.gh-article-title,
.gh-header-title,
.gh-card-title,
.gh-featured-title,
.gh-container-title,
.gh-footer-signup-header,
.gh-content :is(h1, h2, h3, h4) {
    color: var(--o-text);
    font-family: var(--o-heading);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.gh-container-title,
.gh-featured-title {
    border-bottom-color: var(--o-border);
    color: var(--o-text-3);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.gh-article-excerpt,
.gh-header-description,
.gh-card-excerpt,
.gh-footer-signup-subhead {
    color: var(--o-text-2);
}

.gh-card-meta,
.gh-article-meta-content,
.gh-article-tag {
    color: var(--o-text-3);
}

.gh-article-tag {
    color: var(--o-blue-light);
}

/* Post cards: a glass card per post, as the old /blog index drew them. */
.gh-feed .gh-card-link,
.gh-more .gh-card-link {
    border-radius: 20px;
}

.gh-card-link:hover .gh-card-title {
    color: var(--o-blue-light);
    opacity: 1;
}

/* Article body. */
.gh-content {
    color: var(--o-text-2);
}

.gh-content > p,
.gh-content > ul,
.gh-content > ol,
.gh-content > blockquote {
    color: var(--o-text-2);
}

.gh-content strong {
    color: var(--o-text);
}

.gh-content a:not(.kg-btn):not(.kg-bookmark-container) {
    color: var(--o-blue-light);
    text-decoration: underline;
    text-decoration-color: rgb(124 155 255 / 0.4);
    text-underline-offset: 3px;
}

.gh-content a:not(.kg-btn):not(.kg-bookmark-container):hover {
    text-decoration-color: currentColor;
}

/* Code: inline on an overlay, blocks as the landing's code figure. */
.gh-content :not(pre) > code {
    padding: 1px 5px;
    border-radius: 6px;
    background: var(--o-overlay);
    color: var(--o-text);
    font-family: var(--font-mono);
    font-size: 0.875em;
}

.gh-content pre {
    padding: 16px 20px;
    border: 1px solid var(--o-border);
    border-radius: 12px;
    background: rgb(0 0 0 / 0.28);
    color: var(--o-text);
    font-family: var(--font-mono);
    font-size: 1.3rem;
    line-height: 2rem;
}

.gh-content pre code {
    background: none;
    font-size: inherit;
}

.gh-content hr,
.gh-content blockquote {
    border-color: var(--o-border-strong);
}

/* Footer: the gradient rule above it, quiet links. */
.gh-footer {
    position: relative;
    background: transparent;
    color: var(--o-text-2);
}

.gh-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 1px;
    background: linear-gradient(90deg, rgb(255 255 255 / 0), rgb(255 255 255 / 0.12), var(--o-blue-light), rgb(255 255 255 / 0.12), rgb(255 255 255 / 0));
}

.gh-footer-logo .oimo-logo {
    width: auto;
    height: 32px;
}

.gh-footer-menu .nav a {
    color: var(--o-text-2);
}

.gh-footer-menu .nav a:hover {
    color: var(--o-text);
    opacity: 1;
}

.gh-footer-signup {
    padding: 48px 40px;
    border-radius: 20px;
    background: radial-gradient(60% 90% at 50% 0, rgb(43 89 255 / 0.28), rgb(43 89 255 / 0)), rgb(20 26 43 / 0.8);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.1);
}

@media (max-width: 767px) {
    .oimo-top {
        height: 300px;
    }

    .gh-footer-signup {
        padding: 32px 20px;
    }

    .gh-navigation.is-open {
        height: auto;
        background: #0d101b;
    }
}

/* Source paints its own background behind the menu actions and the header. */
.gh-navigation-actions,
.gh-navigation.has-accent-color .gh-navigation-actions {
    background-color: transparent;
}

.gh-header,
.gh-header.is-classic {
    background: transparent;
}