/* ColorJoy Pages — supercoloring.com inspired layout.
   Clean white, red/orange accent, dense image grid, compact cards. */

:root{
	--cj-primary:#e74c3c;        /* supercoloring-style red */
	--cj-primary-dark:#c0392b;
	--cj-accent:#27ae60;          /* download green */
	--cj-accent-dark:#1e8449;
	--cj-link:#2980b9;
	--cj-text:#222;
	--cj-muted:#666;
	--cj-soft:#8c8c8c;
	--cj-bg:#ffffff;
	--cj-alt:#f6f6f6;
	--cj-line:#e5e5e5;
	--cj-line-strong:#d6d6d6;
	--cj-shadow-sm:0 1px 3px rgba(0,0,0,.06);
	--cj-shadow:0 4px 14px rgba(0,0,0,.08);
	--cj-radius:6px;
	--cj-radius-lg:10px;
	--cj-font:'Open Sans','Segoe UI','Helvetica Neue',Arial,sans-serif;
	--cj-font-display:'Montserrat','Open Sans',Arial,sans-serif;
	--cj-max:1280px;
}

*,*:before,*:after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
	background:var(--cj-bg);
	color:var(--cj-text);
	font-family:var(--cj-font);
	font-size:15px;
	line-height:1.55;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden; /* guard against rare break-out scrollbars */
}

/* ===== GeneratePress container neutralizer on full-width pages ===== */
body.cj-fullwidth #page.site.grid-container,
body.cj-fullwidth #page.site.container,
body.cj-fullwidth .site.grid-container{
	max-width:100% !important;
	width:100%;
	padding-left:0 !important;
	padding-right:0 !important;
}
body.cj-fullwidth .site-content,
body.cj-fullwidth .site-content > .grid-container,
body.cj-fullwidth #primary.content-area,
body.cj-fullwidth #primary .site-main,
body.cj-fullwidth.separate-containers .inside-article,
body.cj-fullwidth.one-container .site-content,
body.cj-fullwidth .inside-content{
	max-width:none;
	width:100%;
	padding:0 !important;
	margin:0 !important;
	background:transparent;
	border:0;
	box-shadow:none;
}
body.cj-fullwidth .site-content{padding:0 !important;display:block}
body.cj-fullwidth .site-main > *:first-child{margin-top:0}
body.cj-fullwidth .site-main > *{margin-bottom:0}
/* When GP "no-sidebar" + "separate-containers" also strip article borders */
body.cj-fullwidth article.post,
body.cj-fullwidth article.page{
	background:transparent;border:0;box-shadow:none;padding:0;
}

h1,h2,h3,h4{
	font-family:var(--cj-font-display);
	color:#1a1a1a;
	line-height:1.25;
	margin:0 0 .5em;
	font-weight:700;
}
h1{font-size:clamp(1.5rem,2.5vw,2.1rem)}
h2{font-size:clamp(1.25rem,2vw,1.65rem)}
h3{font-size:1.02rem;font-weight:600}

a{color:var(--cj-link);text-decoration:none;transition:color .15s}
a:hover{color:var(--cj-primary);text-decoration:underline}

img{max-width:100%;height:auto;display:block}

.cj-main{display:block;background:var(--cj-bg);width:100%}
.cj-container{
	width:100%;
	max-width:var(--cj-max);
	margin-inline:auto;
	padding-inline:clamp(12px,2vw,20px);
}
.cj-section{padding:28px 0}
.cj-section__title{
	font-size:1.35rem;
	border-bottom:2px solid var(--cj-primary);
	padding:0 0 8px;
	margin:0 0 18px;
	display:flex;align-items:center;justify-content:space-between;
	gap:12px;
}
.cj-section__title a.cj-more{
	font-size:.85rem;font-weight:500;color:var(--cj-link);
	text-transform:none;
}

.screen-reader-text{
	position:absolute !important;width:1px;height:1px;
	padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);
	white-space:nowrap;border:0;
}

/* -------- Buttons -------- */
.cj-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:.4em;
	padding:.55em 1em;
	font-family:var(--cj-font);
	font-weight:600;font-size:.92rem;
	color:#fff;background:var(--cj-primary);
	border:1px solid var(--cj-primary);border-radius:var(--cj-radius);
	cursor:pointer;text-decoration:none;line-height:1.2;
	transition:background .15s, border-color .15s, color .15s;
}
.cj-btn:hover,.cj-btn:focus{background:var(--cj-primary-dark);border-color:var(--cj-primary-dark);color:#fff;text-decoration:none}
.cj-btn--primary{background:var(--cj-primary);border-color:var(--cj-primary)}
.cj-btn--secondary{background:#555;border-color:#555}
.cj-btn--secondary:hover{background:#333;border-color:#333}
.cj-btn--download{background:var(--cj-accent);border-color:var(--cj-accent)}
.cj-btn--download:hover{background:var(--cj-accent-dark);border-color:var(--cj-accent-dark)}
.cj-btn--ghost{background:#fff;color:var(--cj-text);border-color:var(--cj-line-strong)}
.cj-btn--ghost:hover{background:var(--cj-alt);color:var(--cj-primary);border-color:var(--cj-primary)}
.cj-btn--large{padding:.85em 1.6em;font-size:1rem}
.cj-btn--small{padding:.4em .8em;font-size:.82rem}
.cj-btn--block{display:flex;width:100%}

/* -------- Top category tabs (supercoloring style) -------- */
.cj-cat-tabs{
	background:var(--cj-alt);
	border-top:1px solid var(--cj-line);
	border-bottom:1px solid var(--cj-line);
	width:100%;
}
.cj-cat-tabs__inner{
	display:flex;
	flex-wrap:nowrap;
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
	scrollbar-width:thin;
	max-width:var(--cj-max);
	margin:0 auto;
	padding:0 16px;
}
.cj-cat-tabs__inner::-webkit-scrollbar{height:4px}
.cj-cat-tabs__inner::-webkit-scrollbar-thumb{background:var(--cj-line-strong);border-radius:2px}
.cj-cat-tabs__item{
	flex:0 0 auto;padding:10px 14px;white-space:nowrap;
	font-size:.88rem;font-weight:600;color:var(--cj-text);
	border-right:1px solid var(--cj-line);
	display:inline-flex;align-items:center;gap:6px;
	transition:background .15s, color .15s;
}
.cj-cat-tabs__item:first-child{border-left:1px solid var(--cj-line)}
.cj-cat-tabs__item:hover,.cj-cat-tabs__item:focus{
	background:#fff;color:var(--cj-primary);text-decoration:none;
}
.cj-cat-tabs__emoji{font-size:1rem}

/* -------- Hero (compact) -------- */
.cj-hero{
	background:linear-gradient(180deg,#fff 0%,var(--cj-alt) 100%);
	padding:32px 0 28px;
	border-bottom:1px solid var(--cj-line);
	width:100%;
}
.cj-hero__inner{
	display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;
	max-width:var(--cj-max);margin-inline:auto;padding-inline:16px;
}
.cj-hero__title{
	font-size:clamp(1.6rem,3vw,2.2rem);
	color:#1a1a1a;margin-bottom:.4em;
}
.cj-hero__title em{
	font-style:normal;color:var(--cj-primary);
}
.cj-hero__subtitle{
	color:var(--cj-muted);font-size:1rem;
	margin-bottom:1.1em;max-width:560px;
}
.cj-hero__mascot img{border-radius:var(--cj-radius-lg)}
.cj-hero__shapes{
	position:relative;height:180px;
	background:
		radial-gradient(circle at 20% 30%,rgba(231,76,60,.15) 0%,transparent 45%),
		radial-gradient(circle at 80% 70%,rgba(39,174,96,.12) 0%,transparent 45%),
		radial-gradient(circle at 60% 20%,rgba(41,128,185,.12) 0%,transparent 40%);
	border-radius:var(--cj-radius-lg);
}
.cj-shape{display:none}

/* -------- Search (supercoloring look) -------- */
.cj-search{
	display:flex;align-items:stretch;gap:0;
	background:#fff;
	border:2px solid var(--cj-primary);
	border-radius:var(--cj-radius);
	max-width:560px;margin-bottom:16px;
	overflow:hidden;
	box-shadow:var(--cj-shadow-sm);
}
.cj-search__input{
	flex:1;border:0;background:transparent;
	padding:.7em 1em;font-size:1rem;
	color:var(--cj-text);outline:none;
	font-family:inherit;min-width:0;
}
.cj-search__btn{
	border:0;cursor:pointer;background:var(--cj-primary);color:#fff;
	font-weight:700;padding:0 1.2em;display:inline-flex;align-items:center;gap:.4em;
	font-family:var(--cj-font);transition:background .15s;
}
.cj-search__btn:hover{background:var(--cj-primary-dark)}
.cj-search--inner{margin:0 0 20px;max-width:100%}

/* -------- Featured categories (compact strip) -------- */
.cj-categories{padding:30px 0 10px}
.cj-cat-grid{
	list-style:none;padding:0;margin:0;
	display:grid;gap:10px;
	grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
}
.cj-cat-item{display:block}
.cj-cat-card{
	display:flex;flex-direction:column;align-items:center;gap:6px;
	padding:14px 8px;text-align:center;
	background:#fff;
	border:1px solid var(--cj-line);
	border-radius:var(--cj-radius);
	color:var(--cj-text);font-weight:600;font-size:.82rem;
	transition:border-color .15s, color .15s, transform .15s;
}
.cj-cat-card:hover,.cj-cat-card:focus{
	border-color:var(--cj-primary);
	color:var(--cj-primary);
	text-decoration:none;
	transform:translateY(-1px);
}
.cj-cat-card__emoji{font-size:1.7rem;line-height:1}
.cj-cat-card__label{line-height:1.25}

/* -------- Grid / Cards (dense image-first layout, auto-fit responsive) -------- */
.cj-grid{
	display:grid;gap:12px;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.cj-card{
	background:#fff;
	border:1px solid var(--cj-line);
	border-radius:var(--cj-radius);
	overflow:hidden;
	display:flex;flex-direction:column;
	transition:border-color .15s, box-shadow .15s;
}
.cj-card:hover{border-color:var(--cj-primary);box-shadow:var(--cj-shadow-sm)}
.cj-card__link{display:block;color:inherit;text-decoration:none}
.cj-card__link:hover{text-decoration:none;color:inherit}
.cj-card__thumb{
	aspect-ratio:1/1;
	overflow:hidden;
	background:#fff;
	display:flex;align-items:center;justify-content:center;
	border-bottom:1px solid var(--cj-line);
}
.cj-card__img{
	width:100%;height:100%;object-fit:contain;
	background:#fff;
	transition:transform .3s ease;
}
.cj-card:hover .cj-card__img{transform:scale(1.03)}
.cj-card__placeholder{font-size:2.4rem;color:var(--cj-soft)}
.cj-card__title{
	padding:8px 10px 4px;
	font-size:.86rem;line-height:1.3;margin:0;
	color:var(--cj-text);font-weight:600;
	display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
	overflow:hidden;min-height:2.6em;
}
.cj-card__actions{
	display:flex;gap:5px;padding:6px 8px 8px;margin-top:auto;
}
.cj-card__actions .cj-btn{flex:1;padding:.35em .5em;font-size:.78rem}

/* -------- CTA band -------- */
.cj-cta-band{
	background:linear-gradient(135deg,var(--cj-primary) 0%,#ff7858 100%);
	padding:36px 0;
	width:100%;
}
.cj-cta-band__inner{
	text-align:center;padding:0 16px;
	max-width:var(--cj-max);margin-inline:auto;
}
.cj-cta-band__title{color:#fff;margin-bottom:18px;font-size:1.55rem}
.cj-cta-band .cj-btn{background:#fff;color:var(--cj-primary);border-color:#fff}
.cj-cta-band .cj-btn:hover{background:var(--cj-alt);color:var(--cj-primary-dark)}

/* -------- Archive / Category with sidebar -------- */
.cj-archive{padding:20px 0 50px}
.cj-archive__header{
	margin-bottom:18px;
	padding:16px 18px;
	background:var(--cj-alt);
	border-left:4px solid var(--cj-primary);
	border-radius:0 var(--cj-radius) var(--cj-radius) 0;
}
.cj-archive__title{margin-bottom:.3em;font-size:1.55rem}
.cj-archive__subtitle{
	display:inline-block;font-size:.9rem;font-weight:500;
	color:var(--cj-muted);margin-left:8px;
}
.cj-archive__desc{color:var(--cj-muted);font-size:.95rem;margin:0;max-width:820px}
.cj-archive__desc p{margin:.4em 0}

.cj-layout{
	display:grid;
	grid-template-columns:220px 1fr;
	gap:24px;
	align-items:start;
}
.cj-sidebar{
	position:sticky;top:16px;
	background:#fff;
	border:1px solid var(--cj-line);
	border-radius:var(--cj-radius);
	padding:14px;
}
.cj-sidebar__title{
	font-size:.98rem;margin:0 0 10px;
	padding-bottom:8px;border-bottom:2px solid var(--cj-primary);
}
.cj-sidebar__list{list-style:none;padding:0;margin:0}
.cj-sidebar__list li{border-bottom:1px dashed var(--cj-line)}
.cj-sidebar__list li:last-child{border-bottom:0}
.cj-sidebar__list a{
	display:flex;align-items:center;gap:8px;
	padding:7px 4px;font-size:.9rem;color:var(--cj-text);
	text-decoration:none;
}
.cj-sidebar__list a:hover,.cj-sidebar__list .current a{color:var(--cj-primary);text-decoration:none}
.cj-sidebar__emoji{font-size:1rem}

/* -------- Single -------- */
.cj-single{padding:16px 0 50px}
.cj-single__wrap{max-width:1000px;margin:0 auto}
.cj-article__header{margin-bottom:14px}
.cj-article__title{margin-bottom:6px;font-size:1.7rem}
.cj-article__meta{color:var(--cj-muted);font-size:.88rem}
.cj-article__figure{
	margin:14px 0 18px;
	border:1px solid var(--cj-line);
	border-radius:var(--cj-radius);
	overflow:hidden;
	background:#fff;
	text-align:center;
}
.cj-article__image{width:100%;max-width:720px;height:auto;margin:0 auto;display:block}
.cj-article__actions{
	display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
	margin:6px 0 24px;
	padding:14px;background:var(--cj-alt);border-radius:var(--cj-radius);
}
.cj-article__content{font-size:1rem;line-height:1.75;color:#333}
.cj-article__content p{margin:0 0 1em}

/* -------- Breadcrumbs -------- */
.cj-breadcrumbs{
	margin:10px 0 14px;font-size:.85rem;
	color:var(--cj-muted);
}
.cj-breadcrumbs__list{
	list-style:none;padding:0;margin:0;
	display:flex;flex-wrap:wrap;gap:4px 6px;
}
.cj-breadcrumbs__item{display:inline-flex;align-items:center;gap:6px}
.cj-breadcrumbs__item a{color:var(--cj-link)}
.cj-breadcrumbs__item [aria-current]{color:var(--cj-text);font-weight:600}
.cj-breadcrumbs__sep{color:var(--cj-line-strong)}

/* -------- Pagination -------- */
.cj-pagination{margin:28px 0 0;text-align:center}
.cj-pagination .nav-links{display:inline-flex;gap:4px;flex-wrap:wrap;justify-content:center}
.cj-pagination .page-numbers{
	display:inline-flex;align-items:center;justify-content:center;
	min-width:34px;height:34px;padding:0 10px;
	border:1px solid var(--cj-line-strong);border-radius:var(--cj-radius);
	background:#fff;color:var(--cj-text);font-weight:600;font-size:.9rem;
	text-decoration:none;
}
.cj-pagination .page-numbers.current,
.cj-pagination .page-numbers:hover{
	background:var(--cj-primary);color:#fff;border-color:var(--cj-primary);
}

/* -------- Related -------- */
.cj-related{margin-top:32px;padding-top:24px;border-top:1px solid var(--cj-line)}

/* -------- Empty state -------- */
.cj-empty{
	text-align:center;padding:40px 20px;font-size:1rem;color:var(--cj-muted);
	background:var(--cj-alt);border-radius:var(--cj-radius);
}

/* -------- Focus visible -------- */
a:focus-visible,button:focus-visible,input:focus-visible{
	outline:2px solid var(--cj-primary);outline-offset:2px;border-radius:4px;
}

/* -------- Print -------- */
@media print{
	.cj-hero,.cj-cat-tabs,.cj-article__actions,.cj-related,.cj-breadcrumbs,
	.cj-sidebar,header,footer,.cj-pagination,.cj-cta-band{display:none !important}
	body{background:#fff;color:#000}
	.cj-article__figure{box-shadow:none;border-radius:0;border:0}
	.cj-layout{grid-template-columns:1fr}
}