/* ============================================================
 * features.css — newsp-hybrid v3.0.0
 * Single source of truth: brand effects, dark/light toggle,
 * blockquote, post-tag-list, scroll-logo, satire identity.
 * ============================================================ */

/* ── BRAND COLOURS (referenced by JS too) ───────────────── */
:root{
    --brand-g1:#F545A2;
    --brand-g2:#CF2E84;
    --brand-g3:#9B4DB8;
    --brand-g4:#5E9DBA;
}

/* ── RAINBOW TEXT-LINK HOVER ────────────────────────────── */
a:not(.unstyled-link):not(.no-brand-hover):not(button):not(.kg-btn):not(.button):not(.navbar-link):not(.footer-link):not(.section-heading-button):hover{
    background:var(--brand-gradient-text,linear-gradient(90deg,#F545A2 0%,#CF2E84 30%,#9B4DB8 65%,#5E9DBA 100%));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    transition:all .3s ease;
}
/* Restore solid colour for elements that should not get gradient */
.section-heading a:hover,.navbar-link:hover,.footer-link:hover,
.tag-pill:hover,.post-tag-primary:hover,.post-tag-secondary:hover,
button:hover,.button:hover,.kg-btn:hover,.kg-header-card-button:hover,
.a11y-fab:hover,.theme-toggle-btn:hover,.wc-city:hover{
    background:none;-webkit-background-clip:unset;background-clip:unset;
    -webkit-text-fill-color:unset;color:inherit;
}

/* ── IMAGE HOVER — gray darken only ────────────────────── */
/* (Image hover rules live in layout.css — no duplication here) */

/* ── DARK/LIGHT MODE TOGGLE ─────────────────────────────── */
.theme-toggle-btn{
    display:flex;align-items:center;justify-content:center;gap:7px;
    cursor:pointer;background:none;border:none;padding:0;
    color:var(--text-color);font-family:var(--font2);font-size:16px;
    line-height:1;white-space:nowrap;transition:opacity .2s ease;outline:none;
}
.theme-toggle-btn:hover{opacity:.7}
.theme-toggle-btn:focus-visible{outline:2px solid var(--text-color);outline-offset:3px}
.theme-toggle-track{
    position:relative;width:38px;min-width:38px;height:20px;border-radius:10px;
    background-color:var(--text-color);transition:background-color .3s ease;flex-shrink:0;
}
.theme-toggle-thumb{
    position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;
    background-color:var(--background-color);
    transition:transform .3s ease,background-color .3s ease;pointer-events:none;
}
html .theme-toggle-thumb,html[data-theme="dark"] .theme-toggle-thumb{transform:translateX(0)}
html[data-theme="light"] .theme-toggle-thumb{transform:translateX(18px)}
.theme-toggle-icon{width:16px;height:16px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.theme-toggle-icon svg{width:16px;height:16px;fill:var(--text-color);transition:opacity .2s ease}
.icon-sun{display:none}.icon-moon{display:flex}
html[data-theme="light"] .icon-sun{display:flex}
html[data-theme="light"] .icon-moon{display:none}
.theme-toggle-wrapper{display:flex;align-items:center}
@media(max-width:991px){
    .theme-toggle-btn{font-size:0;gap:5px}
    .theme-toggle-track{width:34px;height:18px}
    .theme-toggle-thumb{width:12px;height:12px}
    html[data-theme="light"] .theme-toggle-thumb{transform:translateX(16px)}
}

/* ── BLOCKQUOTE ─────────────────────────────────────────── */
.post-content blockquote:not(.kg-blockquote-alt){
    position:relative;
    margin:2em 0;
    padding:1.4em 2em 1.4em 2.2em;
    font-family:var(--font2,'EB Garamond'),serif;
    font-style:italic;
    font-size:clamp(16px,1.4vw,22px);
    line-height:1.55;
    color:var(--text-color);
    background-color:rgba(245,69,162,.06);
    border-left:none;
    box-shadow:4px 0 0 var(--brand-g4,#5E9DBA) inset,-4px 0 0 transparent inset;
    overflow:hidden;
}
.post-content blockquote:not(.kg-blockquote-alt)::before{
    content:'"';
    position:absolute;top:-10px;right:12px;
    font-family:var(--font4,'Chomsky'),serif;
    font-size:120px;line-height:1;
    color:var(--brand-g1,#F545A2);opacity:.18;
    pointer-events:none;
}
/* Brand gradient left bar via background trick */
.post-content blockquote:not(.kg-blockquote-alt)::after{
    content:'';
    position:absolute;top:0;left:0;bottom:0;width:4px;
    background:var(--brand-gradient,linear-gradient(180deg,#F545A2,#CF2E84,#9B4DB8,#5E9DBA));
}
/* Alt blockquote (Ghost "Alt Quote" card) */
.post-content blockquote.kg-blockquote-alt{
    text-align:center;
    padding:1.2em 2em;
    font-family:var(--font2),serif;
    font-style:italic;
    font-size:clamp(15px,1.3vw,20px);
    line-height:1.5;
    border:none;
    position:relative;
}
.post-content blockquote.kg-blockquote-alt::before{
    content:'';
    position:absolute;top:0;left:10%;right:10%;height:2px;
    background:var(--brand-gradient);
}
.post-content blockquote.kg-blockquote-alt::after{
    content:'';
    position:absolute;bottom:0;left:10%;right:10%;height:2px;
    background:var(--brand-gradient);
}
/* Dark mode blockquote */
html[data-theme="dark"] .post-content blockquote:not(.kg-blockquote-alt){
    background-color:rgba(245,69,162,.04);
}
@media(max-width:991px){
    .post-content blockquote:not(.kg-blockquote-alt){font-size:clamp(14px,2.2vw,19px);padding:1.2em 1.4em 1.2em 1.8em}
}
@media(max-width:479px){
    .post-content blockquote:not(.kg-blockquote-alt){font-size:15px;padding:1em 1em 1em 1.4em}
}

/* ── POST TAG LIST (article header) ─────────────────────── */
.post-tag-list{
    display:flex;flex-wrap:wrap;gap:8px;
    list-style:none;padding:0;margin:0 0 18px 0;
}
.post-tag-list li{display:inline-flex}
/* Primary tags (1st and 2nd) */
.post-tag-primary{
    display:inline-block;
    padding:5px 14px;
    font-family:var(--font2);
    font-size:clamp(13px,1.1vw,17px);
    font-weight:600;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--text-color);
    background:transparent;
    border:1.5px solid transparent;
    background-clip:padding-box;
    position:relative;
    transition:all .25s ease;
    text-decoration:none;
}
.post-tag-primary::before{
    content:'';
    position:absolute;inset:0;
    border-radius:inherit;
    padding:1.5px;
    background:var(--brand-gradient);
    -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.post-tag-primary:hover{
    background:var(--brand-gradient)!important;
    -webkit-background-clip:unset!important;
    background-clip:unset!important;
    -webkit-text-fill-color:#fff!important;
    color:#fff!important;
}
/* Secondary tags (3rd–5th) */
.post-tag-secondary{
    display:inline-block;
    padding:3px 10px;
    font-family:var(--font1);
    font-size:clamp(10px,0.8vw,13px);
    letter-spacing:.03em;
    text-transform:uppercase;
    color:var(--text-color);
    border:1px solid var(--border,rgba(128,128,128,.3));
    opacity:.65;
    transition:all .25s ease;
    text-decoration:none;
}
.post-tag-secondary:hover{
    opacity:1;
    border-color:var(--brand-g1,#F545A2);
    background:none!important;
    -webkit-text-fill-color:unset!important;
    color:var(--text-color)!important;
}
@media(max-width:479px){
    .post-tag-primary{font-size:12px;padding:4px 10px}
    .post-tag-secondary{font-size:10px;padding:3px 8px}
}

/* ── SCROLL LOGO ─────────────────────────────────────────── */
.logo-wrapper{
    transition:opacity .3s ease,transform .3s ease;
    will-change:opacity,transform;
}
.logo-hidden .logo-wrapper{
    opacity:0;
    transform:translateY(-100%);
    pointer-events:none;
}
/* Prevent layout shift when logo hides */
.navbar-logo-area{min-height:var(--logo-min-height,40px)}

/* ── SATIRE PAGE IDENTITY (WCAG AAA compliant) ─────────── */
/*
 * Contrast ratios verified:
 *   Dark mode:  #FFD700 vs #111111 = 13.46:1  (AAA ✓)
 *               #FFD700 vs #000000 = 14.97:1  (AAA ✓)
 *               #111111 on #FFD700 = 13.46:1  (AAA ✓)
 *   Light mode: #5C3A00 vs #f4f2ee =  9.12:1  (AAA ✓)
 *               #111111 on #FFD700 = 13.46:1  (AAA ✓)
 *               Yellow used as bg/border only in light mode — never as text.
 */

/* ── Satire CSS variables ── */
body.is-satire,
body.theme-satire,
.post--satire {
    /* Dark mode defaults (dark is the theme default) */
    --satire-accent: #FF1493;
    --satire-accent-text: #FF1493;
    --satire-warning: #FFD60A;
    --satire-accent-bg: #FFD60A;
    --satire-banner-text: #111111;
    --satire-section-color: #FF1493;
    --satire-border: #FFD60A;
}

/* ── Light mode overrides ── */
html[data-theme="light"] body.is-satire,
html[data-theme="light"] .post--satire {
    --satire-accent: #FF1493;
    --satire-accent-text: #C40073;
    --satire-warning: #FFD60A;
    --satire-accent-bg: #FFF1A6;
    --satire-banner-text: #111111;
    --satire-section-color: #C40073;
    --satire-border: #FF1493;
}

/* ── Satire identity banner ── */
.satire-identity-banner {
    background: repeating-linear-gradient(
        45deg,
        var(--satire-accent) 0px,
        var(--satire-accent) 12px,
        var(--satire-warning) 12px,
        var(--satire-warning) 24px
    );
    color: var(--satire-banner-text);
    padding: 12px 42px;
    font-family: var(--font3);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    text-align: center;
    border-bottom: 3px solid var(--satire-accent);
    /* Ensure banner text is always legible */
    text-shadow: none;
}

.satire-identity-banner strong {
    background: linear-gradient(90deg, var(--satire-accent), color-mix(in srgb, var(--satire-warning) 88%, white 12%));
    color: #111111;
    padding: 3px 14px;
    margin: 0 8px;
    /* 13.46:1 contrast in both modes — AAA */
}

/* ── Satire section headings ── */
body.is-satire .section-heading,
.post--satire .section-heading {
    border-color: var(--satire-border);
    color: var(--satire-section-color);
}

/* ── Satire article-level accent elements ── */
.post--satire .post-tag-primary,
.post--satire .post-tag-secondary {
    border-color: var(--satire-border);
    color: var(--satire-accent-text);
}

.post--satire .post-tag-primary:hover,
.post--satire .post-tag-secondary:hover {
    background: linear-gradient(90deg, var(--satire-accent), color-mix(in srgb, var(--satire-warning) 88%, white 12%));
    color: #111111;
}

/* ── Satire blockquote accent ── */
.post--satire .post-content blockquote:not(.kg-blockquote-alt) {
    background-color: color-mix(in srgb, var(--satire-warning) 18%, transparent);
    box-shadow: 4px 0 0 var(--satire-accent) inset, -4px 0 0 transparent inset;
}

/* ── Satire article header accent line ── */
.post--satire .post-header {
    border-top: 3px solid var(--satire-accent);
}

/* ── Satire column grid (tag page) ── */
body.is-satire .column-layout-grid {
    grid-template-columns: 1fr 1fr;
}

@media (max-width: 991px) {
    body.is-satire .column-layout-grid { grid-template-columns: 1fr; }
}

/* ── Satire article disclaimer label ── */
.satire-disclaimer {
    display: inline-block;
    background: linear-gradient(90deg, var(--satire-accent), color-mix(in srgb, var(--satire-warning) 88%, white 12%));
    color: #111111;
    font-family: var(--font3);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-bottom: 8px;
    /* #111 on #FFD700 = 13.46:1 — AAA in both modes */
}