/**
 * Contextual in-content link — `.op-content-link`
 *
 * The ONE treatment for a link that sits inside body copy (a funnel/journal
 * cross-link, an in-prose "read more" line). Chrome links (header, footer,
 * breadcrumbs), buttons/pills and consent-row links keep their own component
 * styling and MUST NOT carry this class.
 *
 * Why it exists: the theme had no shared content-link class. Every page sheet
 * either invented its own gold (#946009, #8F5E0A, #9c6408, var(--ct-link)) or
 * shipped nothing at all, so a template-emitted bare `<a>` fell through to
 * Bootstrap's unlayered `a { color: var(--bs-link-color) }` and rendered
 * browser-blue — reported live on /camp/ (the Salvador guide line). The
 * design-system base rule (design-system-2.0/main.css, @layer base) cannot
 * win that: an unlayered declaration beats every layered one regardless of
 * specificity. This sheet is unlayered on purpose.
 *
 * Colour: --sys-color-cta-gold (#9c6408, ~4.9:1 on white) is the only gold the
 * canon allows for text at body size; --sys-color-primary (#B7780D, 3.5:1) is
 * explicitly forbidden for body text (design-system-2.0/main.css, SD-QB-A11Y).
 * Hover deepens to --sys-color-gold-deep (#7a5c11, ~6.6:1).
 *
 * Specificity note: the selector is doubled (0,2,0) on purpose. Page sheets
 * scope bare-element rules such as `.contact-page a { color: inherit;
 * text-decoration: none }` and `.journal-index a { color: var(--jr-gold) }`
 * at 0,1,1; several of those sheets are enqueued from inside their template
 * and therefore print AFTER this one, so an equal-specificity selector would
 * lose on source order. Doubling wins deterministically without !important.
 *
 * @package Opanije
 */

.op-content-link.op-content-link {
    color: var(--sys-color-cta-gold, #9c6408);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 150ms ease, text-decoration-color 150ms ease;
}

.op-content-link.op-content-link:visited {
    color: var(--sys-color-cta-gold, #9c6408);
}

.op-content-link.op-content-link:hover,
.op-content-link.op-content-link:active {
    color: var(--sys-color-gold-deep, #7a5c11);
    text-decoration-thickness: 2px;
}

.op-content-link.op-content-link:focus-visible {
    outline: 2px solid var(--sys-color-primary, #B7780D);
    outline-offset: 2px;
    border-radius: 2px;
}

/**
 * Dark-surface variant — `.op-content-link--on-dark`
 *
 * Most call sites sit on a light surface (cream/white bands) and take the base
 * treatment above. One does not: the /course/ graduation bridge puts the paid-
 * course upsell inside `.cm-band--grad` (background --sys-color-ink #231F19),
 * where the base --sys-color-cta-gold #9c6408 measures 3.31:1 and the hover
 * --sys-color-gold-deep #7a5c11 is worse at 2.63:1 — both below the SD-QB-A11Y
 * AA floor of 4.5:1 for body-size text.
 *
 * Per this file's original note, the dark pairing is --sys-color-gold-bright
 * (#EBC65A), which measures 9.96:1 on that ink. Hover shifts within the gold
 * family to --sys-color-primary-light (#E0A92B, 7.71:1 — still AA) rather than
 * to cream, because the band's own body copy is rgba(244,238,225,.84) and a
 * cream hover would read as ordinary prose. The focus ring moves to gold-bright
 * too; the base --sys-color-primary ring is only 4.45:1 on this ink.
 *
 * Specificity is tripled (0,3,0) so it beats the base 0,2,0 rule regardless of
 * where a page sheet lands in source order. Add it via the emitter's `class`
 * attribute — `opanije_contextual_link( $url, $label, array( 'class' =>
 * 'op-content-link--on-dark' ) )` — never by hand-writing the anchor.
 */

.op-content-link.op-content-link.op-content-link--on-dark,
.op-content-link.op-content-link.op-content-link--on-dark:visited {
    color: var(--sys-color-gold-bright, #EBC65A);
}

.op-content-link.op-content-link.op-content-link--on-dark:hover,
.op-content-link.op-content-link.op-content-link--on-dark:active {
    color: var(--sys-color-primary-light, #E0A92B);
    text-decoration-thickness: 2px;
}

.op-content-link.op-content-link.op-content-link--on-dark:focus-visible {
    outline-color: var(--sys-color-gold-bright, #EBC65A);
}

@media (prefers-reduced-motion: reduce) {
    .op-content-link.op-content-link {
        transition: none;
    }
}