/*
Theme Name: Candy Shorts Uncensored
Theme URI: https://candyshortsuncensored.com
Author: Candy Shorts Uncensored
Description: Independent editorial guide and Candy AI affiliate. Crimson dark theme with fixed sidebar, poster grid and FAQ blocks.
Version: 1.0.0
License: GNU General Public License v2 or later
Text Domain: csu
*/

/* ============================== Tokens ============================== */
:root {
	--csu-bg:        #140a0e;
	--csu-bg-2:      #1d0f15;
	--csu-panel:     #241019;
	--csu-panel-2:   #2e1420;
	--csu-line:      #3a1c29;
	--csu-ink:       #f6e9ee;
	--csu-muted:     #c39aa8;
	--csu-dim:       #8f6675;
	--csu-crimson:   #d81b52;
	--csu-crimson-2: #ff2d6b;
	--csu-crimson-d: #9c0f38;
	--csu-gold:      #f4c76b;
	--csu-radius:    14px;
	--csu-radius-s:  9px;
	--csu-shadow:    0 18px 46px rgba(0,0,0,.5);
	--csu-sidebar:   264px;
	--csu-maxw:      1120px;
	--csu-font:      "Sora", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--csu-font);
	background: var(--csu-bg);
	color: var(--csu-ink);
	line-height: 1.62;
	font-size: 17px;
	overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: var(--csu-crimson-2); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.18; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(1.9rem, 4.5vw, 3rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2.05rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1.05em; }
hr { border: 0; border-top: 1px solid var(--csu-line); margin: 2.4rem 0; }

/* ============================== Shell ============================== */
.csu-shell { display: flex; min-height: 100vh; }

.csu-side {
	width: var(--csu-sidebar);
	flex: 0 0 var(--csu-sidebar);
	background: linear-gradient(180deg, var(--csu-bg-2), var(--csu-bg));
	border-right: 1px solid var(--csu-line);
	padding: 22px 18px 30px;
	position: sticky; top: 0; height: 100vh;
	overflow-y: auto;
}
.csu-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; }
.csu-brand__mark {
	width: 40px; height: 40px; border-radius: 11px; flex: 0 0 40px;
	display: grid; place-items: center; font-weight: 800; font-size: 15px; letter-spacing: .5px;
	color: #fff; background: linear-gradient(135deg, var(--csu-crimson-2), var(--csu-crimson-d));
	box-shadow: 0 6px 16px rgba(216,27,82,.4);
}
.csu-brand__name { font-weight: 800; font-size: 1.02rem; color: var(--csu-ink); line-height: 1.1; }
.csu-brand__name span { display: block; font-weight: 500; font-size: .72rem; color: var(--csu-dim); letter-spacing: .3px; }
.csu-side__tag { font-size: .78rem; color: var(--csu-muted); margin: 12px 2px 18px; }

.csu-nav { list-style: none; margin: 0 0 18px; padding: 0; }
.csu-nav li { margin: 1px 0; }
.csu-nav a {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 12px; border-radius: var(--csu-radius-s);
	color: var(--csu-muted); font-weight: 600; font-size: .93rem;
}
.csu-nav a:hover { background: var(--csu-panel); color: var(--csu-ink); text-decoration: none; }
.csu-nav a.is-active { background: var(--csu-panel-2); color: #fff; box-shadow: inset 3px 0 0 var(--csu-crimson-2); }
.csu-nav__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--csu-crimson); opacity: .6; flex: 0 0 6px; }

.csu-side__cta { margin-top: 8px; }
.csu-side__disc { margin-top: 20px; font-size: .72rem; color: var(--csu-dim); border-top: 1px solid var(--csu-line); padding-top: 14px; }
.csu-side__disc a { color: var(--csu-muted); }

/* ============================== Main ============================== */
.csu-main { flex: 1 1 auto; min-width: 0; }
.csu-wrap { max-width: var(--csu-maxw); margin: 0 auto; padding: 0 clamp(16px, 4vw, 40px); }
.csu-section { padding: 44px 0; }
.csu-section--tight { padding: 26px 0; }

/* Top bar (mobile) */
.csu-topbar {
	display: none; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 16px; border-bottom: 1px solid var(--csu-line);
	background: var(--csu-bg-2); position: sticky; top: 0; z-index: 40;
}
.csu-burger {
	appearance: none; background: var(--csu-panel); border: 1px solid var(--csu-line);
	color: var(--csu-ink); width: 42px; height: 40px; border-radius: 10px; font-size: 20px; cursor: pointer;
}

/* ============================== Buttons ============================== */
.csu-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: .96rem;
	cursor: pointer; border: 1px solid transparent; text-align: center; line-height: 1;
}
.csu-btn:hover { text-decoration: none; }
.csu-btn--go {
	color: #fff;
	background: linear-gradient(135deg, var(--csu-crimson-2), var(--csu-crimson-d));
	box-shadow: 0 10px 26px rgba(216,27,82,.4);
	width: 100%;
}
.csu-btn--go:hover { filter: brightness(1.07); }
.csu-btn--ghost {
	color: var(--csu-ink); background: var(--csu-panel-2); border-color: var(--csu-line);
}
.csu-btn--ghost:hover { background: var(--csu-panel); }
.csu-btn--sm { padding: 9px 15px; font-size: .85rem; }
.csu-btnrow { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.csu-btnrow .csu-btn--go { width: auto; }

/* ============================== Hero ============================== */
.csu-hero { position: relative; border-radius: var(--csu-radius); overflow: hidden; box-shadow: var(--csu-shadow); border: 1px solid var(--csu-line); }
.csu-hero__media { position: relative; aspect-ratio: 16/8; background: #000; }
.csu-hero__media img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.csu-hero__grad { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,10,14,.94) 0%, rgba(20,10,14,.7) 45%, rgba(20,10,14,.35) 100%); }
.csu-hero__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 4vw, 48px); max-width: 640px; }
.csu-hero__kicker { color: var(--csu-crimson-2); font-weight: 700; font-size: .82rem; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 10px; }
.csu-hero h1 { margin-bottom: .35em; }
.csu-hero__lede { color: var(--csu-muted); font-size: 1.06rem; margin-bottom: 1.3em; }
.csu-hero__link { position: absolute; inset: 0; z-index: 3; text-indent: -9999px; overflow: hidden; }
.csu-hero__cta { position: relative; z-index: 4; }

/* ============================== Cards / grid ============================== */
.csu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 18px; }
.csu-grid--3 { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.csu-card {
	background: var(--csu-panel); border: 1px solid var(--csu-line); border-radius: var(--csu-radius);
	overflow: hidden; display: flex; flex-direction: column; transition: transform .16s ease, border-color .16s ease;
}
.csu-card:hover { transform: translateY(-3px); border-color: var(--csu-crimson-d); }
.csu-card__poster { position: relative; aspect-ratio: 3/4; background: var(--csu-bg-2); overflow: hidden; }
.csu-card__poster img { width: 100%; height: 100%; object-fit: cover; }
.csu-card__badge {
	position: absolute; top: 9px; left: 9px; z-index: 2;
	background: rgba(216,27,82,.92); color: #fff; font-size: .68rem; font-weight: 700;
	padding: 4px 8px; border-radius: 999px; letter-spacing: .4px;
}
.csu-card__lic {
	position: absolute; top: 9px; right: 9px; z-index: 2;
	background: rgba(20,10,14,.82); color: var(--csu-gold); font-size: .66rem; font-weight: 700;
	padding: 4px 8px; border-radius: 999px; border: 1px solid rgba(244,199,107,.35);
}
.csu-card__body { padding: 12px 13px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.csu-card__title { font-weight: 700; font-size: .98rem; line-height: 1.25; }
.csu-card__meta { font-size: .78rem; color: var(--csu-dim); display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.csu-card__meta b { color: var(--csu-muted); font-weight: 600; }
.csu-chip { display: inline-block; font-size: .72rem; color: var(--csu-muted); background: var(--csu-panel-2); border: 1px solid var(--csu-line); padding: 2px 8px; border-radius: 999px; }

/* Creator card (portrait, with hover loop) */
.csu-crea { position: relative; border-radius: var(--csu-radius); overflow: hidden; border: 1px solid var(--csu-line); background: #000; aspect-ratio: 3/5; }
.csu-crea img, .csu-crea video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.csu-crea video { opacity: 0; transition: opacity .3s ease; }
.csu-crea:hover video { opacity: 1; }
.csu-crea__cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 30px 14px 13px; background: linear-gradient(180deg, transparent, rgba(10,4,7,.92)); }
.csu-crea__name { font-weight: 800; font-size: 1.02rem; color: #fff; }
.csu-crea__sub { font-size: .76rem; color: var(--csu-muted); }
.csu-crea__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: rgba(20,10,14,.8); color: var(--csu-gold); font-size: .66rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; border: 1px solid rgba(244,199,107,.3); }

/* ============================== Question boxes ============================== */
.csu-qboxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.csu-qbox { background: var(--csu-panel); border: 1px solid var(--csu-line); border-left: 3px solid var(--csu-crimson); border-radius: var(--csu-radius-s); padding: 18px 18px 16px; }
.csu-qbox h3 { color: #fff; font-size: 1.02rem; margin-bottom: .4em; }
.csu-qbox p { color: var(--csu-muted); font-size: .92rem; margin: 0; }

/* ============================== Prose ============================== */
.csu-prose { max-width: 760px; }
.csu-prose h2 { margin-top: 1.7em; }
.csu-prose h3 { margin-top: 1.4em; color: #fff; }
.csu-prose ul, .csu-prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.csu-prose li { margin: .3em 0; }
.csu-prose blockquote { margin: 1.4em 0; padding: 12px 18px; border-left: 3px solid var(--csu-crimson); background: var(--csu-panel); border-radius: 0 var(--csu-radius-s) var(--csu-radius-s) 0; color: var(--csu-muted); }
.csu-prose table { width: 100%; border-collapse: collapse; margin: 1.3em 0; font-size: .93rem; }
.csu-prose th, .csu-prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--csu-line); }
.csu-prose th { color: #fff; background: var(--csu-panel); }

/* ============================== FAQ ============================== */
.csu-faq { max-width: 800px; }
.csu-faq details { background: var(--csu-panel); border: 1px solid var(--csu-line); border-radius: var(--csu-radius-s); margin-bottom: 10px; padding: 0 18px; }
.csu-faq summary { cursor: pointer; padding: 15px 0; font-weight: 650; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: var(--csu-ink); }
.csu-faq summary::-webkit-details-marker { display: none; }
.csu-faq summary::after { content: "+"; color: var(--csu-crimson-2); font-size: 1.4rem; font-weight: 400; line-height: 1; }
.csu-faq details[open] summary::after { content: "\2013"; }
.csu-faq details[open] summary { border-bottom: 1px solid var(--csu-line); }
.csu-faq__a { padding: 14px 0 18px; color: var(--csu-muted); font-size: .96rem; }
.csu-faq__a p:last-child { margin-bottom: 0; }

/* ============================== Editorial verdict ============================== */
.csu-verdict { background: linear-gradient(135deg, var(--csu-panel-2), var(--csu-panel)); border: 1px solid var(--csu-line); border-radius: var(--csu-radius); padding: 24px; display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.csu-score { text-align: center; }
.csu-score__num { font-size: 2.8rem; font-weight: 800; color: #fff; line-height: 1; }
.csu-score__num span { font-size: 1.1rem; color: var(--csu-dim); }
.csu-score__stars { color: var(--csu-gold); letter-spacing: 2px; margin-top: 6px; font-size: 1rem; }
.csu-score__label { font-size: .74rem; color: var(--csu-dim); text-transform: uppercase; letter-spacing: 1px; margin-top: 4px; }
.csu-verdict__body h3 { margin-top: 0; }
.csu-verdict__body p { color: var(--csu-muted); margin-bottom: 0; font-size: .96rem; }

/* Stat tiles */
.csu-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.csu-stat { background: var(--csu-panel); border: 1px solid var(--csu-line); border-radius: var(--csu-radius-s); padding: 18px; text-align: center; }
.csu-stat__n { font-size: 2rem; font-weight: 800; color: var(--csu-crimson-2); line-height: 1; }
.csu-stat__l { font-size: .8rem; color: var(--csu-muted); margin-top: 6px; }

/* CSS bar chart (no libraries) */
.csu-bars { display: flex; flex-direction: column; gap: 10px; max-width: 620px; margin: 1.4em 0; }
.csu-bar { display: grid; grid-template-columns: 130px 1fr 48px; align-items: center; gap: 12px; font-size: .86rem; }
.csu-bar__k { color: var(--csu-muted); }
.csu-bar__track { background: var(--csu-panel); border: 1px solid var(--csu-line); border-radius: 999px; height: 18px; overflow: hidden; }
.csu-bar__fill { height: 100%; background: linear-gradient(90deg, var(--csu-crimson-d), var(--csu-crimson-2)); border-radius: 999px; }
.csu-bar__v { color: var(--csu-ink); font-weight: 600; text-align: right; }

/* ============================== Section head ============================== */
.csu-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; }
.csu-shead h2 { margin: 0; }
.csu-shead a { font-size: .88rem; font-weight: 600; color: var(--csu-muted); }
.csu-eyebrow { color: var(--csu-crimson-2); font-weight: 700; font-size: .78rem; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 8px; }

/* ============================== Notices ============================== */
.csu-notice { background: var(--csu-panel); border: 1px solid var(--csu-line); border-left: 3px solid var(--csu-gold); border-radius: var(--csu-radius-s); padding: 14px 16px; font-size: .9rem; color: var(--csu-muted); margin: 1.4em 0; }
.csu-notice b { color: var(--csu-ink); }

/* ============================== Footer ============================== */
.csu-footer { border-top: 1px solid var(--csu-line); background: var(--csu-bg-2); margin-top: 40px; }
.csu-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; padding: 40px 0 26px; }
.csu-footer h4 { color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; }
.csu-footer ul { list-style: none; margin: 0; padding: 0; }
.csu-footer li { margin: 6px 0; }
.csu-footer a { color: var(--csu-muted); font-size: .9rem; }
.csu-footer__disc { border-top: 1px solid var(--csu-line); padding: 20px 0 40px; font-size: .78rem; color: var(--csu-dim); }
.csu-footer__disc p { margin: 0 0 .6em; max-width: 900px; }

/* ============================== Age gate ============================== */
.csu-age { position: fixed; inset: 0; z-index: 9999; background: rgba(10,4,7,.97); display: none; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(6px); }
.csu-age.is-on { display: flex; }
.csu-age__card { background: var(--csu-panel); border: 1px solid var(--csu-line); border-radius: var(--csu-radius); max-width: 440px; padding: 32px 28px; text-align: center; box-shadow: var(--csu-shadow); }
.csu-age__card h2 { color: #fff; }
.csu-age__card p { color: var(--csu-muted); font-size: .95rem; }
.csu-age__row { display: flex; gap: 12px; margin-top: 20px; }
.csu-age__row .csu-btn { flex: 1; }

/* ============================== Utilities ============================== */
.csu-lead { font-size: 1.12rem; color: var(--csu-muted); }
.csu-center { text-align: center; }
.csu-mt0 { margin-top: 0; }
.csu-scrim { display: none; }

/* ============================== Responsive ============================== */
@media (max-width: 900px) {
	.csu-footer__grid { grid-template-columns: 1fr 1fr; }
	.csu-verdict { grid-template-columns: 1fr; text-align: center; }
}
@media (max-width: 820px) {
	.csu-topbar { display: flex; }
	.csu-side {
		position: fixed; top: 0; left: 0; z-index: 60; height: 100vh;
		transform: translateX(-100%); transition: transform .25s ease;
		box-shadow: var(--csu-shadow);
	}
	.csu-side.is-open { transform: translateX(0); }
	.csu-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.6); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
	.csu-scrim.is-on { opacity: 1; pointer-events: auto; }
}
@media (max-width: 560px) {
	body { font-size: 16px; }
	.csu-hero__media { aspect-ratio: 3/4; }
	.csu-footer__grid { grid-template-columns: 1fr; }
	.csu-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
}

/* ============================== Page head / creator head ============================== */
.csu-pagehead { max-width: 820px; margin-bottom: 26px; }
.csu-pagehead h1 { margin-bottom: .3em; }
.csu-pagehead .csu-lead { margin-bottom: 0; }
@media (max-width: 620px) {
	.csu-creator-head { grid-template-columns: 1fr !important; }
	.csu-creator-head .csu-crea { max-width: 220px; }
}