/* ruleframe.ai overrides
/* ------------------------------------------------------------

Loaded after Source's built/screen.css, so it only needs the
selectors it changes. Not part of the gulp build.

1. Variables
2. Labels
3. Homepage intro
4. Post list
5. Article
6. Content types
7. Content conventions

*/

/* 1. Variables
/* ---------------------------------------------------------- */

:root {
    /* One colour per content type: section bar, card band, type label, social cards
       (keep in sync with TYPE_COLORS in pipeline/ruleframe_pipeline/social.py) */
    --rf-notes: #1f3a5f;
    --rf-research: #1d6b6b;
    --rf-essays: #6b3654;
    --rf-rule: 1px solid var(--color-border);
    --rf-rule-strong: 1px solid var(--color-darker-gray);
    --rf-label-size: 1.15rem;
    --rf-label-spacing: 0.08em;
}

/* 2. Labels
/* ---------------------------------------------------------- */

/* Type labels sit in small sans caps, in the text color rather than the accent */
.gh-card-tag,
.gh-article-tag,
.rf-section-name {
    font-family: var(--font-sans);
    font-size: var(--rf-label-size);
    font-weight: 600;
    letter-spacing: var(--rf-label-spacing);
    text-transform: uppercase;
}

.gh-card-tag {
    display: block;
    margin-bottom: 8px;
    color: var(--color-secondary-text);
}

.gh-article-tag {
    color: var(--rf-type-color, var(--color-secondary-text));
}

.gh-article-tag:hover {
    color: var(--color-darker-gray);
    opacity: 1;
}

/* Assessment badges (partials/assessment.hbs): verdicts, fact kinds, study type, evidence strength */
:root {
    --rf-good: #2f6b3a;
    --rf-warn: #8a5a00;
    --rf-bad: #a12a2a;
}

/* Dark site background (Source sets has-light-text) */
:root.has-light-text {
    --rf-good: #7fc48c;
    --rf-warn: #e0b45a;
    --rf-bad: #ef8a8a;
}

.rf-article-labels,
.gh-card-tag:has(.rf-badge) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.rf-badge {
    display: inline-block;
    padding: 1px 6px;
    border: 1px solid currentColor;
    border-radius: 3px;
    color: var(--color-secondary-text);
    font-family: var(--font-sans);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: var(--rf-label-spacing);
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.rf-badge--good {
    color: var(--rf-good);
}

.rf-badge--warn {
    color: var(--rf-warn);
}

.rf-badge--bad {
    color: var(--rf-bad);
}

/* Logo (partials/logo.hbs): monogram tile plus wordmark */
.rf-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

.rf-logo-mark {
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    fill: var(--rf-notes);
}

.rf-logo-mark text {
    fill: #fff;
    font-family: var(--font-serif);
    font-size: 17px;
    font-weight: 600;
}

.rf-logo-mark .rf-logo-rule {
    fill: #fff;
}

.rf-logo-tld {
    color: var(--color-secondary-text);
    font-weight: 500;
}

/* 3. Homepage intro
/* ---------------------------------------------------------- */

.rf-intro {
    margin-top: clamp(32px, 4vw, 56px);
}

/* Same 16-column grid as the post list, so the intro lines up with it */
.rf-intro-inner {
    display: grid;
    grid-template-columns: repeat(16, 1fr);
    column-gap: var(--grid-gap);
}

.rf-intro-inner > * {
    grid-column: 4 / span 10;
}

/* With images the post list is wider, so the intro widens to match */
.rf-intro.has-images .rf-intro-inner > * {
    grid-column: 3 / span 12;
}

/* The card grid runs full width, and so does the intro above it */
.rf-intro.is-grid .rf-intro-inner > * {
    grid-column: 1 / -1;
}

.rf-intro.is-grid .rf-intro-statement {
    max-width: 920px;
}

@media (max-width: 1199px) {
    .rf-intro-inner {
        display: block;
    }
}

.rf-intro-statement {
    font-size: clamp(3rem, 1.8vw + 2.4rem, 4.4rem);
    font-weight: 450;
    line-height: 1.2;
    letter-spacing: -0.012em;
}

.rf-sections {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 20px;
}

/* Section pills: filled in the type colour */
.rf-section {
    padding: 6px 14px;
    border-radius: 999px;
    background-color: var(--rf-type-color);
    color: #fff;
    font-family: var(--font-sans);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: var(--rf-label-spacing);
    text-transform: uppercase;
}

.rf-section:hover {
    opacity: 0.85;
}

/* The intro is short now, so the post list follows closely */
.rf-intro ~ .gh-container {
    margin-top: 40px;
}

/* 4. Post list
/* ---------------------------------------------------------- */

.gh-container-title {
    border-bottom: var(--rf-rule-strong);
}

.gh-card-title {
    font-weight: 500;
}

.gh-container.is-list .gh-card-excerpt {
    max-width: 640px;
    margin-top: 8px;
    font-size: 1.6rem;
    line-height: 1.5;
}

.gh-card-meta {
    font-family: var(--font-sans);
    font-size: 1.25rem;
    color: var(--color-secondary-text);
}

/* Fallback tile for posts without a feature image */
.rf-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-lighter-gray);
    border: var(--rf-rule);
}

.rf-tile-label {
    font-family: var(--font-serif);
    font-size: 2.2rem;
    font-style: italic;
    color: var(--color-secondary-text);
}

/* Ghost marks these cards no-image; lay them out like image cards */
.gh-container.is-list .gh-card:has(.rf-tile) .gh-card-link {
    padding-block: 0;
}

.gh-container.is-list .gh-card:has(.rf-tile) .gh-card-wrapper {
    max-width: 600px;
}

.gh-container.is-list .gh-card:has(.rf-tile) .gh-card-title {
    --factor: 1.05;
}

.rf-type-research .rf-tile {
    background-color: color-mix(in srgb, var(--ghost-accent-color) 8%, transparent);
}

.rf-type-essays .rf-tile {
    background-color: var(--color-darker-gray);
}

.rf-type-essays .rf-tile-label {
    color: var(--color-white);
}

/* Mobile: small square thumbnail beside the text instead of a stacked full-width
   image; the fallback tile only repeats the type label, so it is dropped */
@media (max-width: 767px) {
    .gh-container.is-list .gh-card-link {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .gh-container.is-list .gh-card-image {
        order: 2;
        width: 88px;
        aspect-ratio: 1;
    }

    .gh-container.is-list .rf-tile {
        display: none;
    }
}

/* Notes are short reads, so they sit a step smaller in the list */
.gh-container.is-list .rf-type-notes .gh-card-title {
    --factor: 1.05;
}

/* 4.1. Card grid (Post feed style = Grid) */

/* Listing pages sit on a light ground so the white cards read as cards */
body:is(.home-template, .tag-template, .author-template, .paged) {
    --background-color: #f4f4f1;
}

.gh-container.is-grid:not(.has-sidebar) :is(.gh-container-title, .gh-main, .gh-more) {
    grid-column: 1 / -1;
}

.gh-container.is-grid .gh-feed {
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    overflow: visible;
}

@media (max-width: 1199px) {
    .gh-container.is-grid .gh-feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 899px) {
    .gh-container.is-grid .gh-feed {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .gh-container.is-grid .gh-feed {
        display: grid;
        grid-template-columns: 1fr;
    }
}

/* Source draws hairlines between grid items; cards replace them */
.gh-container.is-grid .gh-card::before,
.gh-container.is-grid .gh-card::after {
    display: none;
}

.gh-container.is-grid .gh-card {
    display: flex;
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 20px rgb(0 0 0 / 0.04);
    transition: box-shadow 0.2s ease;
}

.gh-container.is-grid .gh-card:hover {
    box-shadow: 0 2px 4px rgb(0 0 0 / 0.08), 0 12px 28px rgb(0 0 0 / 0.08);
}

.gh-container.is-grid .gh-card-link {
    flex-grow: 1;
    gap: 0;
}

.gh-container.is-grid .gh-card-image {
    aspect-ratio: 16 / 9;
}

.gh-container.is-grid .rf-tile {
    border: 0;
    border-bottom: var(--rf-rule);
}

.gh-container.is-grid .gh-card-wrapper {
    display: flex;
    flex-direction: column;
    padding: 22px 24px 0;
}

.gh-container.is-grid .gh-card-tag {
    color: var(--rf-type-color, var(--ghost-accent-color));
}

.gh-container.is-grid .gh-card-title {
    font-size: 2rem;
    font-weight: 600;
    line-height: 1.2;
}

.gh-container.is-grid .gh-card-excerpt {
    margin-top: 10px;
    font-size: 1.5rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}

/* Type band on top of each card, instead of an image: a solid strip in the
   type colour. The social cards made by the publisher
   (pipeline/ruleframe_pipeline/social.py) use the same colours. */
.rf-band {
    display: block;
    flex-shrink: 0;
    height: 5px;
    background-color: var(--rf-type-color, var(--color-darker-gray));
}

.gh-container.is-grid .gh-card .gh-card-meta {
    margin: auto -24px 0;
    padding: 14px 24px;
    border-top: var(--rf-rule);
}

/* Space between the last text block and the meta footer */
.gh-container.is-grid .gh-card-wrapper > :nth-last-child(2) {
    margin-bottom: 20px;
}

/* Featured posts: a wider card filled with the type colour, with a larger title. Only on listing
   pages; in "Read more" under a post they stay normal cards. */
body:not(.post-template) .gh-container.is-grid .gh-card.featured {
    grid-column: span 2;
    min-height: 340px;
    background-color: var(--rf-type-color, var(--ghost-accent-color));
    color: #fff;
}

@media (max-width: 576px) {
    body:not(.post-template) .gh-container.is-grid .gh-card.featured {
        grid-column: auto;
        min-height: 0;
    }
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured .gh-card-wrapper {
    padding: 32px 36px 0;
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured {
    --rf-good: #7fc48c;
    --rf-warn: #e0b45a;
    --rf-bad: #ef8a8a;
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured :is(.gh-card-link, .gh-card-title-link, .gh-card-tag, .rf-badge:not([class*="--"])) {
    color: #fff;
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured .gh-card-title {
    max-width: 22ch;
    font-size: clamp(2.4rem, 1.4vw + 1.6rem, 3.4rem);
    line-height: 1.12;
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured .gh-card-excerpt {
    max-width: 52ch;
    margin-top: 14px;
    font-size: 1.7rem;
    color: rgb(255 255 255 / 0.72);
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured .gh-card-meta {
    margin-inline: -36px;
    padding-inline: 36px;
    border-top-color: rgb(255 255 255 / 0.18);
    color: rgb(255 255 255 / 0.65);
}

body:not(.post-template) .gh-container.is-grid .gh-card.featured .rf-band {
    background-color: rgb(0 0 0 / 0.35);
}


/* 5. Article
/* ---------------------------------------------------------- */

.gh-article-title {
    font-weight: 500;
}

.gh-article-excerpt {
    color: var(--color-secondary-text);
}

.gh-content a {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.gh-content blockquote:not([class]) {
    padding-left: 20px;
    border-left: 2px solid var(--color-darker-gray);
    font-style: italic;
}

/* 6. Content types
/* ---------------------------------------------------------- */

.rf-type-notes {
    --rf-type-color: var(--rf-notes);
}

.rf-type-research {
    --rf-type-color: var(--rf-research);
}

.rf-type-essays {
    --rf-type-color: var(--rf-essays);
}

/* Notes: compact header, the source bookmark gets the visual weight */
.rf-type-notes .gh-article-title {
    --factor: 0.8;
}

/* Convention: a note opens with a "Source: ..." paragraph or a bookmark card */
.rf-type-notes .gh-content > p:first-child {
    padding: 14px 0;
    border-block: var(--rf-rule);
    font-family: var(--font-sans);
    font-size: 1.5rem;
    line-height: 1.5;
}

.rf-type-notes .gh-content > .kg-bookmark-card:first-child {
    margin-bottom: 8px;
}

/* Research summaries: a hairline frame around the findings, references set small */
.rf-type-research .gh-content > #key-findings {
    padding-top: 20px;
    border-top: var(--rf-rule-strong);
}

.rf-type-research .gh-content > #key-findings:first-child {
    margin-top: 0;
}

.rf-type-research .gh-content > #key-findings + :is(ul, ol) {
    padding: 20px 24px 20px 44px;
    background-color: var(--color-lighter-gray);
}

/* Essays: the drop cap is enabled in post.hbs */
.rf-type-essays .gh-article-title {
    --factor: 1.25;
}

/* 7. Content conventions
/* ---------------------------------------------------------- */

/* Ghost gives headings an id from their text, so "References",
   "Methodology" and "Limitations" headings can be styled by id */
.gh-content > :is(#references, #sources) ~ :is(ol, ul) {
    font-family: var(--font-sans);
    font-size: 1.4rem;
    line-height: 1.5;
    color: var(--color-secondary-text);
}

.gh-content > :is(#references, #sources) ~ :is(ol, ul) li + li {
    margin-top: 6px;
}

.gh-content > :is(#references, #sources, #methodology, #limitations) {
    padding-top: 16px;
    border-top: var(--rf-rule);
    font-family: var(--font-sans);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: var(--rf-label-spacing);
    text-transform: uppercase;
}