/* ============================================================================
   matthewgoldman.com — custom layer on top of Casper 5.12.1.
   Loaded AFTER built/screen.css (see default.hbs), so plain-selector rules
   win by source order.

   Direction (2026-07-20): keep Casper's clean near-black base (Ghost accent
   stays #15171A — masthead/nav/buttons already pass AA) and add the site's
   own LOGO ORANGE (#f15c22) as accents. All colors below are WCAG AA on white.
   NOTE: these overrides assume LIGHT mode (Casper here is light-only). If dark
   mode is ever enabled, revisit --color-secondary-text / figcaption.
   ============================================================================ */

:root {
    /* Casper's meta text is #979797 = 2.92:1 on white (fails WCAG AA). Replace
       with a warm taupe that riffs off the logo orange — 7.1:1. Drives
       post-card meta, excerpts, tags, byline, pagination. */
    --color-secondary-text: #6b5348;

    /* Readable burnt-orange from the logo family. The raw logo orange #f15c22
       is only 3.34:1 as text; this is 4.86:1 — used for accent-colored TEXT. */
    --mg-orange-ink: #c9440f;
}

/* Content links carry the brand orange (Casper defaults them to the near-black
   accent). The white-link-in-dark-callout variant is more specific, so it
   still wins in its own context. */
.gh-content a {
    color: var(--mg-orange-ink);
}

/* Featured-post label → orange highlight (was the near-black accent). */
.post-card-featured {
    color: var(--mg-orange-ink);
}

/* Image captions were rgba(0,0,0,.5) = 3.95:1 (fails small-text AA) → ~8.9:1. */
figcaption {
    color: #4a4a4a;
}

/* Casper midgrey #738a94 (3.63:1) used as text for comment count + alt
   blockquote → align to the readable secondary color. */
.comments .comment-count,
.kg-blockquote-alt {
    color: var(--color-secondary-text);
}

/* Skip-to-content link — Casper ships none (WCAG 2.4.1). Targets #site-main,
   which Casper's <main> already carries. */
.gh-skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 1000;
    padding: 10px 16px;
    background: #15171a;
    color: #fff;
    border-radius: 0 0 6px 0;
    text-decoration: none;
}

.gh-skip-link:focus,
.gh-skip-link:focus-visible {
    left: 0;
}