/* ==========================================================================
   TheatresDB light-theme layer (v11.70)
   Loaded after refine.css. Every rule is scoped to html[data-theme=light], so
   dark mode is untouched.

   Why this file exists
   Most templates were written dark-first with hard-coded colours (#fff,
   rgba(255,255,255,.x), #0f0f13 ...). In light mode that produced white text
   on cream, dark panels with no matching text colour, and invisible labels.
   Rather than edit ~300 rules across 20 templates, this layer fixes them in
   one place using the theme's own tokens.

   Specificity: template <style> blocks load after this file, so selectors here
   use an `html[data-theme=light]` prefix (one id-free class + attribute + type)
   to win without !important. !important is used only where PHP writes an
   inline style="" attribute that has to be overridden.

   Sections
   A. Tokens + "dark islands" (heroes / diagrams that stay dark in both themes)
   B. Header + footer
   C. Home
   D. Cities page
   E. Theatre page
   F. Screen page
   G. Blog post, CineLog
   ========================================================================== */

/* ── A. Tokens ─────────────────────────────────────────────────────────── */
html[data-theme=light]{
    --lt-ink-2:#3a424a;      /* body copy: 9:1 on white, 7.9:1 on cream      */
    --lt-dim:#6b747d;        /* quiet labels: 4.8:1 on white, 4.2:1 on cream */
    --lt-tint:rgba(0,0,0,.045);
    --lt-indigo:#4338ca;     /* indigo text on light surfaces                */
}

/* Dark islands
   Page heroes and the illustrated hall diagram are dark in BOTH themes (like
   the "All Theatres in India" banner). Inside them every token is put back to
   its dark-mode value, so anything that reads var(--text), var(--gold),
   var(--bg-card)... (buttons, "Specs verified", report link, pills) renders
   exactly as it does in dark mode. */
html[data-theme=light] .th-hero,
html[data-theme=light] .sp-top,
html[data-theme=light] .sp-unified-card{
    --text:#f1efe9;
    --text-muted:#9aa4ac;
    --text-dim:#6b767f;
    --white:#f1efe9;
    --on-dark:#f1efe9;
    --bg-card:#161b1f;
    --bg-card2:#222a30;
    --input-bg:#222a30;
    --border:#2b343b;
    --border-hi:#5d6a73;
    --shadow:rgba(0,0,0,.65);
    --gold:#F4C24B;
    --gold-lt:#FFD97A;
    --gold-dk:#C99A2E;
    --gold-dark:#C99A2E;
    --on-gold:#17130a;
    --premium:#4DB3F0;
    --premium-dk:#1673AE;
    --premium-amber:#4DB3F0;
    --premium-amber-dk:#1673AE;
    color:var(--text);
    color-scheme:dark;
}

/* ── B. Header + footer ────────────────────────────────────────────────── */
/* The "moon" glyph sat 35% opaque on a pale track and read as a stray "C". */
html[data-theme=light] .hdr-icon-moon{color:#5c6570;opacity:.75}

/* ── C. Home ───────────────────────────────────────────────────────────── */
/* Section headings were #fff (the generic h2 rule only rescued some). */
html[data-theme=light] .ht-section-title{color:var(--text)}
html[data-theme=light] .ht-section-title span{color:var(--gold)}
html[data-theme=light] .ht-section-sub{color:var(--text-muted)}

/* Amber links/icons used the dark-mode yellow (#F4C24B = 1.8:1 on cream). */
html[data-theme=light] .tr-trend-icon,
html[data-theme=light] .tr-view-all,
html[data-theme=light] .blog-gc-read,
html[data-theme=light] .blog-show-more-btn,
html[data-theme=light] .uth-view-all{color:var(--gold)}
html[data-theme=light] .blog-show-more-btn{
    background:color-mix(in srgb,var(--gold) 8%,transparent);
    border-color:color-mix(in srgb,var(--gold) 38%,transparent);
}

/* Trending theatres / screens: header sits on the page, panel becomes a
   normal light card like the Spotlight and Shortlist cards below it. */
html[data-theme=light] .trside-title{color:var(--text)}
html[data-theme=light] .trside-title span{color:var(--gold)}
html[data-theme=light] .trside-title .trside-purple,
html[data-theme=light] .trside-purple{color:var(--text-muted)!important}
html[data-theme=light] .trside-sub{color:var(--text-muted)}
html[data-theme=light] .trside-icon--gold{
    background:color-mix(in srgb,var(--gold) 14%,transparent);
    border-color:color-mix(in srgb,var(--gold) 38%,transparent);
    color:var(--gold);
}
html[data-theme=light] .trside-icon--purple{
    background:var(--bg-card2);
    border-color:var(--border);
    color:var(--text-muted);
}

html[data-theme=light] .trl-panel,
html[data-theme=light] .trl-panel--theaters,
html[data-theme=light] .trl-panel--screen{
    background:var(--bg-card);
    border-color:var(--border);
    box-shadow:0 14px 32px -22px var(--shadow);
}
html[data-theme=light] .trl-panel::before,
html[data-theme=light] .trl-panel--theaters::before,
html[data-theme=light] .trl-panel--screen::before{
    background:linear-gradient(90deg,var(--gold),transparent);
}
html[data-theme=light] .trl-panel-header,
html[data-theme=light] .trl-row{border-bottom-color:var(--border)}
html[data-theme=light] .trl-row:last-child{border-bottom:none}
html[data-theme=light] .trl-row:hover{
    background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%);
}
html[data-theme=light] .trl-bg-num{-webkit-text-stroke-color:rgba(0,0,0,.07)}
html[data-theme=light] .trl-row:hover .trl-bg-num{-webkit-text-stroke-color:color-mix(in srgb,var(--gold) 28%,transparent)}
html[data-theme=light] .trl-rank{color:var(--lt-dim)}
html[data-theme=light] .trl-row:first-of-type .trl-rank,
html[data-theme=light] .trl-row:nth-of-type(1) .trl-rank{color:var(--gold)}
html[data-theme=light] .trl-avatar{background:var(--bg-card2)}
html[data-theme=light] .trl-avatar--icon{
    background:color-mix(in srgb,var(--ac,var(--gold)) 14%,var(--bg-card));
    color:var(--text-muted);
}
html[data-theme=light] .trl-initials{color:var(--text-muted)}
html[data-theme=light] .trl-name{color:var(--text)}
html[data-theme=light] .trl-meta{color:var(--text-muted)}
html[data-theme=light] .trl-sub{color:var(--lt-dim)}
html[data-theme=light] .trl-rating{color:var(--gold)}
html[data-theme=light] .trl-rating svg{fill:var(--gold)}
html[data-theme=light] .trl-side-tag{
    background:var(--lt-tint);
    border-color:var(--border);
    color:var(--text-muted);
}
/* PHP writes inline colours for screen names / tech labels / tags (white,
   #19AECC, #94a3b8). Match on the inline value and swap for AA colours. */
html[data-theme=light] .trl-name[style*="#fff" i]{color:var(--text)!important}
html[data-theme=light] .trl-name[style*="19aecc" i],
html[data-theme=light] .trl-tech-label[style*="19aecc" i]{color:var(--premium)!important}
html[data-theme=light] .trl-name[style*="94a3b8" i],
html[data-theme=light] .trl-tech-label[style*="94a3b8" i]{color:#566170!important}
html[data-theme=light] .trl-tag[style*="25,174,204"]{
    background:color-mix(in srgb,var(--premium) 12%,transparent)!important;
    color:var(--premium)!important;
    border-color:color-mix(in srgb,var(--premium) 35%,transparent)!important;
}
html[data-theme=light] .trl-tag:not([style*="25,174,204"]){
    background:var(--lt-tint)!important;
    color:#566170!important;
    border-color:var(--border)!important;
}

/* Screens Worth the Drive: pastel slate/cyan labels were tuned for black cards. */
html[data-theme=light] .spot-scard[style*="19AECC" i] .spot-scard-type,
html[data-theme=light] .spot-scard[style*="19AECC" i] .spot-scard-sub{color:var(--premium)!important}
html[data-theme=light] .spot-scard:not([style*="19AECC" i]) .spot-scard-type,
html[data-theme=light] .spot-scard:not([style*="19AECC" i]) .spot-scard-sub{color:#4d5a69!important}
html[data-theme=light] .spot-scard{border-color:var(--border)}
html[data-theme=light] .spot-scard:hover{border-color:var(--border-hi)}
html[data-theme=light] .spot-scard-num{-webkit-text-stroke-color:rgba(0,0,0,.1)}

/* "Browse all theatres" banner: white text on a pale-gold wash. */
html[data-theme=light] .ht-all-theaters-cta{
    background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 12%,var(--bg-card)) 0%,var(--bg-card) 100%);
    border-color:color-mix(in srgb,var(--gold) 32%,var(--border));
}
html[data-theme=light] .ht-cta-left{color:var(--text-muted)}
html[data-theme=light] .ht-cta-title{color:var(--text)}
html[data-theme=light] .ht-cta-sub{color:var(--text-muted)}
html[data-theme=light] .ht-cta-btn{box-shadow:0 6px 18px -8px rgba(148,98,0,.45)}

/* Blog cards: translucent-white surface + white title = invisible on cream. */
html[data-theme=light] .blog-gc{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .blog-gc:hover{border-color:color-mix(in srgb,var(--gold) 45%,var(--border))}
html[data-theme=light] .blog-gc-img-placeholder{background:linear-gradient(135deg,var(--bg-card2),var(--bg-card))}
html[data-theme=light] .blog-gc-date{color:var(--lt-dim)}
html[data-theme=light] .blog-gc-title{color:var(--text)}
html[data-theme=light] .blog-gc:hover .blog-gc-title{color:var(--gold)}
html[data-theme=light] .blog-gc-excerpt{color:var(--text-muted)}

/* CineLog feed */
html[data-theme=light] .clf-review{color:var(--lt-ink-2)}

/* ── D. Cities page ────────────────────────────────────────────────────── */
/* "Cover" sits on the dark hero; the light-mode brown-gold is too dim there. */
html[data-theme=light] .cities-hero h1 em{color:#F4C24B}
/* Hero stays dark (like every other page hero). Everything below it was dark
   hard-coded; it now follows the theme. */
html[data-theme=light] .cities-featured-card{
    background:var(--bg-card);
    border-color:var(--border);
    border-top:2px solid var(--gold);
    box-shadow:0 12px 28px -20px var(--shadow);
}
html[data-theme=light] .cities-featured-card:hover{border-color:color-mix(in srgb,var(--gold) 50%,var(--border));border-top-color:var(--gold)}
html[data-theme=light] .cities-featured-rank{color:var(--lt-dim)}
html[data-theme=light] .cities-featured-name{color:var(--text)}
html[data-theme=light] .cities-featured-count{color:var(--gold)}

html[data-theme=light] .cities-jumpbar a{
    background:var(--bg-card);
    border-color:var(--border);
    color:var(--text-muted);
}
html[data-theme=light] .cities-jumpbar a:hover{color:var(--text);border-color:var(--border-hi)}
html[data-theme=light] .cities-jumpbar a .n{color:var(--lt-dim)}

html[data-theme=light] .cities-search-wrap svg{color:var(--lt-dim)}
html[data-theme=light] .cities-search-wrap input{
    background:var(--bg-card);
    border-color:var(--border);
    color:var(--text);
}
html[data-theme=light] .cities-search-wrap input::placeholder{color:var(--lt-dim)}
html[data-theme=light] .cities-search-wrap input:focus{border-color:var(--gold)}

html[data-theme=light] .state-group-title{color:var(--text)}
html[data-theme=light] .state-group-count{color:var(--text-muted)}
html[data-theme=light] .state-city-list{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .state-city-row:hover{background:rgba(0,0,0,.03)}
html[data-theme=light] .state-city-mono{background:var(--bg-card2);color:var(--text-muted)}
html[data-theme=light] .state-city-row:hover .state-city-mono{
    color:var(--gold);
    background:color-mix(in srgb,var(--gold) 14%,transparent);
}
html[data-theme=light] .state-city-row-name{color:var(--text)}
html[data-theme=light] .state-city-row-count{color:var(--text-muted)}
html[data-theme=light] .state-city-row-arrow{color:var(--lt-dim)}
html[data-theme=light] .state-city-row:hover .state-city-row-arrow{color:var(--gold)}
html[data-theme=light] .cities-empty{color:var(--text-muted)}

/* ── E. Theatre page ───────────────────────────────────────────────────── */
/* Hero is an island (section A). Everything below it: */
html[data-theme=light] .th-section-title{color:var(--text)}
html[data-theme=light] .th-about-text,
html[data-theme=light] .th-about-text p,
html[data-theme=light] .th-about-text ul,
html[data-theme=light] .th-about-text ol,
html[data-theme=light] .th-about-section .rank-math-faq-item p{color:var(--lt-ink-2)}
html[data-theme=light] .th-about-text h3,
html[data-theme=light] .th-about-section .rank-math-faq-item h3{color:var(--text)}
html[data-theme=light] .th-about-section .rank-math-faq-item{border-bottom-color:var(--border)}

html[data-theme=light] .th-pc-label-pro{color:#3f6b4a}
html[data-theme=light] .th-pros .th-pc-dot{background:#3f6b4a}
html[data-theme=light] .th-pc-label-con{color:#b91c1c}

html[data-theme=light] .th-gallery-viewall{
    background:var(--bg-card);
    border-color:var(--border);
    color:var(--text);
}
html[data-theme=light] .th-gallery-viewall:hover{border-color:var(--gold);color:var(--gold)}

/* Sidebar cards (info, amenities, rating, book, map) */
html[data-theme=light] .th-info-card{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .th-info-card-title,
html[data-theme=light] .th-info-label{color:var(--text-muted)}
html[data-theme=light] .th-info-val{color:var(--text)}
html[data-theme=light] .th-info-icon{background:color-mix(in srgb,var(--gold) 12%,var(--bg-card2))}
html[data-theme=light] .th-amenity-tag{background:var(--lt-tint);color:var(--lt-ink-2)}
html[data-theme=light] .th-book-card{
    background:color-mix(in srgb,var(--gold) 9%,var(--bg-card));
    border-color:color-mix(in srgb,var(--gold) 32%,var(--border));
}
html[data-theme=light] .th-map-wrap{border-color:var(--border)}
html[data-theme=light] .th-map-actions{background:var(--bg-card);border-top-color:var(--border)}
html[data-theme=light] .th-map-btn:not(.th-map-btn-primary){
    background:var(--bg-card2);
    border-color:var(--border);
    color:var(--text);
}
html[data-theme=light] .th-map-btn:not(.th-map-btn-primary):hover{border-color:var(--gold);color:var(--gold)}

/* Reviews */
html[data-theme=light] .th-review-card,
html[data-theme=light] .th-review-form,
html[data-theme=light] .th-no-reviews{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .th-reviewer-name{color:var(--text)}
html[data-theme=light] .th-review-text{color:var(--lt-ink-2)}
html[data-theme=light] .th-review-collapsed::after{background:linear-gradient(transparent,var(--bg-card))}
html[data-theme=light] .th-form-field input,
html[data-theme=light] .th-form-field textarea{
    background:#faf7f0;
    border-color:var(--border);
    color:var(--text);
}
html[data-theme=light] .th-star:not(.active):not(:hover){color:rgba(0,0,0,.22)}
html[data-theme=light] .th-write-review-btn{
    background:var(--bg-card);
    border-color:var(--border);
    color:var(--text-muted);
}
html[data-theme=light] .th-write-review-btn:hover{border-color:var(--gold);color:var(--gold)}

/* Nearby theatres */
html[data-theme=light] .th-nearby-card{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .th-nearby-card:hover{border-color:color-mix(in srgb,var(--gold) 55%,var(--border))}
html[data-theme=light] .th-nearby-name{color:var(--text)}
html[data-theme=light] .th-nearby-meta span{background:var(--lt-tint)}

/* Now playing + showtimes */
html[data-theme=light] .th-np-card{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .th-np-card:hover{border-color:var(--border-hi)}
html[data-theme=light] .th-np-title{color:var(--text)}
html[data-theme=light] .th-np-tag{background:var(--lt-tint);color:var(--text-muted)}
html[data-theme=light] .th-np-format{background:rgba(99,102,241,.12);color:var(--lt-indigo)}
html[data-theme=light] .th-np-dur,
html[data-theme=light] .th-np-screen,
html[data-theme=light] .th-np-upcoming-notice{color:var(--text-muted)}
html[data-theme=light] .th-np-live{color:#b91c1c}
html[data-theme=light] .np-date-tab{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .np-date-tab:hover{border-color:var(--border-hi)}
html[data-theme=light] .np-dt-num{color:var(--text)}
html[data-theme=light] .np-no-shows{background:var(--bg-card2);color:var(--text-muted)}
html[data-theme=light] .np-show-row{border-bottom-color:var(--border)}
html[data-theme=light] .np-show-title{color:var(--text)}
html[data-theme=light] .np-cert{background:rgba(0,0,0,.07);color:var(--text-muted)}
html[data-theme=light] .np-show-meta,
html[data-theme=light] .np-show-screen{color:var(--text-muted)}
html[data-theme=light] .np-show-meta span{background:var(--lt-tint)}
html[data-theme=light] .np-fmt{background:rgba(99,102,241,.12)!important;color:var(--lt-indigo)!important}
html[data-theme=light] .np-time-btn:not(:hover){color:#2f6b45}
html[data-theme=light] .np-date-strip::-webkit-scrollbar-thumb{background:var(--border-hi)}
/* inline hairline in the spec table */
html[data-theme=light] tr[style*="255,255,255"]{border-top-color:var(--border)!important}

/* ── F. Screen page ────────────────────────────────────────────────────── */
/* The accent hues (#19AECC cyan, #1BBB93 mint ...) are 2-3:1 as text on cream.
   --acc-ink is the same hue darkened, used wherever the accent is text. */
html[data-theme=light] .sp-main{--acc-ink:color-mix(in srgb,var(--acc) 62%,#000)}

/* Stat row under the diagram */
html[data-theme=light] .sp-stat{border-bottom-color:var(--border)}
html[data-theme=light] .sp-stat-l,
html[data-theme=light] .sp-ar-tag{color:var(--text-muted)}
html[data-theme=light] .sp-stat-v{color:var(--text)}

/* Spec cards */
html[data-theme=light] .sp-specs-heading{color:var(--text);border-bottom-color:var(--border)}
html[data-theme=light] .sp-spec-card{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .sp-spec-card--hero{
    background:color-mix(in srgb,var(--acc) 8%,var(--bg-card));
    border-color:color-mix(in srgb,var(--acc) 38%,var(--border));
}
html[data-theme=light] .sp-spec-card:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--border))}
html[data-theme=light] .sp-spec-label{color:var(--text-muted)}
html[data-theme=light] .sp-spec-value,
html[data-theme=light] .sp-spec-value--hero{color:var(--text)}
html[data-theme=light] .sp-spec-icon[style*="255,255,255"]{color:var(--text-muted)!important}
html[data-theme=light] .sp-spec-icon[style*="--acc"]{color:var(--acc-ink)!important}

/* Best viewing rows, notes, feature badges */
html[data-theme=light] .sp-best-rows{
    background:color-mix(in srgb,var(--acc) 6%,var(--bg-card));
    border-color:color-mix(in srgb,var(--acc) 28%,var(--border));
}
html[data-theme=light] .sp-br-star{color:var(--acc-ink)}
html[data-theme=light] .sp-br-label,
html[data-theme=light] .sp-br-tip{color:var(--text-muted)}
html[data-theme=light] .sp-br-val{color:var(--text)}
html[data-theme=light] .sp-notes{color:var(--lt-ink-2);border-top-color:var(--border)}
html[data-theme=light] .sp-why-head{color:var(--text-muted)}
html[data-theme=light] .sp-why-badge{background:var(--lt-tint);color:var(--lt-ink-2)}
html[data-theme=light] .sp-why-badge--3d::before,
html[data-theme=light] .sp-why-badge--led::before{background:rgba(0,0,0,.3)}

/* Other screens */
html[data-theme=light] .sp-section-title{color:var(--text);border-bottom-color:var(--border)}
html[data-theme=light] .sp-other-card{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .sp-other-card:hover{border-color:color-mix(in srgb,var(--acc) 50%,var(--border))}
html[data-theme=light] .sp-other-name{color:var(--text)}
html[data-theme=light] .sp-other-icon{background:var(--lt-tint);border-color:var(--border);color:var(--text-muted)}
html[data-theme=light] .sp-other-card:hover .sp-other-icon{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 40%,transparent)}
html[data-theme=light] .sp-pill-proj{color:var(--lt-indigo);border-color:rgba(99,102,241,.4)}
html[data-theme=light] .sp-pill-sound{color:#0f766e;border-color:rgba(20,184,166,.5)}
html[data-theme=light] .sp-other-arrow{color:var(--gold);background:color-mix(in srgb,var(--gold) 10%,transparent);border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
html[data-theme=light] .sp-other-card:hover .sp-other-arrow{background:var(--gold);border-color:var(--gold);color:#fff}

/* Rating block */
html[data-theme=light] .sp-rating-section{background:var(--bg-card);border-color:var(--border)}
html[data-theme=light] .sp-rating-header,
html[data-theme=light] .sp-rating-bars{border-bottom-color:var(--border)}
html[data-theme=light] .sp-rating-title{color:var(--text)}
html[data-theme=light] .sp-avg-num,
html[data-theme=light] .sp-avg-stars,
html[data-theme=light] .sp-rbar-val{color:var(--acc-ink)}
html[data-theme=light] .sp-avg-count,
html[data-theme=light] .sp-rbar-label,
html[data-theme=light] .sp-rf-label{color:var(--text-muted)}
html[data-theme=light] .sp-rbar-track{background:rgba(0,0,0,.08)}
html[data-theme=light] .sp-rf-cat-label{color:var(--text)}
html[data-theme=light] .sr-star:not(.lit):not(:hover){color:rgba(0,0,0,.2)}
html[data-theme=light] .sr-star:hover,
html[data-theme=light] .sr-star.lit{color:var(--acc-ink)}
html[data-theme=light] .sp-rf-input{background:#faf7f0;border-color:var(--border);color:var(--text)}
html[data-theme=light] .sp-rf-input::placeholder{color:var(--lt-dim)}
html[data-theme=light] .sp-rf-input:focus{border-color:var(--acc-ink)}
/* white label on bright #F4C24B was ~1.6:1 — use the light-mode amber */
html[data-theme=light] .sp-rf-btn,
html[data-theme=light] .sp-btn-bms{background:var(--gold);color:var(--on-gold)}
html[data-theme=light] .sp-rf-success{color:#2f6b45;background:rgba(47,107,69,.08);border-color:rgba(47,107,69,.25)}
html[data-theme=light] .sp-rf-error{color:#b91c1c!important}

/* Reviews */
html[data-theme=light] .sp-reviews{border-top-color:var(--border)}
html[data-theme=light] .sp-review{background:var(--bg-card2);border-color:var(--border)}
html[data-theme=light] .sp-review-ava,
html[data-theme=light] .sp-review-profile-link,
html[data-theme=light] .sp-review-stars{color:var(--acc-ink)}
html[data-theme=light] .sp-review-name{color:var(--text)}
html[data-theme=light] .sp-review-time{color:var(--text-muted)}
html[data-theme=light] .sp-review-text{color:var(--lt-ink-2)}

/* Plan your visit */
html[data-theme=light] .sp-cta{
    background:color-mix(in srgb,var(--acc) 7%,var(--bg-card));
    border-color:var(--border);
}
html[data-theme=light] .sp-cta-label{color:var(--acc-ink)}
html[data-theme=light] .sp-cta-desc{color:var(--text)}
html[data-theme=light] .sp-btn-outline{color:var(--text-muted);border-color:var(--border-hi)}
html[data-theme=light] .sp-btn-outline:hover{border-color:var(--acc-ink);color:var(--acc-ink)}
html[data-theme=light] .sp-btn-district{color:var(--lt-indigo);border-color:rgba(99,102,241,.5)}

/* ── G. Blog post, CineLog ─────────────────────────────────────────────── */
html[data-theme=light] .post-title,
html[data-theme=light] .related-posts h2,
html[data-theme=light] .related-card-title{color:var(--text)}
html[data-theme=light] .post-content{color:var(--lt-ink-2)}
html[data-theme=light] .post-content h2,
html[data-theme=light] .post-content h3,
html[data-theme=light] .post-content h4{color:var(--text)}
html[data-theme=light] .related-card:hover .related-card-title{color:var(--gold)}

html[data-theme=light] .cl-sugg-title{color:var(--text)}
html[data-theme=light] .cl-suggestion:hover{background:rgba(0,0,0,.04)}