/*
Theme Name: Colorection
Description: Child theme of Kadence for colorection.com. Dark by default with a light switch, in the style of the Tracking app.
Template: kadence
Version: 0.1.0
Requires at least: 7.0
Requires PHP: 8.1
Text Domain: colorection
*/

/* Colour tokens. Dark is the default; [data-theme="light"] is set by the switch. */
html:root {
	--cl-bg: #0b0f19;
	--cl-surface: #111827;
	--cl-surface-2: #0f172a;
	--cl-border: #1f2937;
	--cl-border-strong: #334155;
	--cl-text: #e5e7eb;
	--cl-text-strong: #f8fafc;
	--cl-muted: #94a3b8;
	--cl-accent: #60a5fa;
	--cl-accent-2: #2dd4bf;
	--cl-link: #93c5fd;
	--cl-radius: 10px;
	color-scheme: dark;

	/* Kadence reads its colours from these palette slots. */
	--global-palette1: var(--cl-accent);
	--global-palette2: var(--cl-accent-2);
	--global-palette3: var(--cl-text-strong);
	--global-palette4: var(--cl-text);
	--global-palette5: var(--cl-muted);
	--global-palette6: var(--cl-muted);
	--global-palette7: var(--cl-surface-2);
	--global-palette8: var(--cl-bg);
	--global-palette9: var(--cl-surface);
	--global-palette9rgb: 17, 24, 39;
}

html:root[data-theme="light"] {
	--cl-bg: #f1f5f9;
	--cl-surface: #ffffff;
	--cl-surface-2: #f8fafc;
	--cl-border: #e2e8f0;
	--cl-border-strong: #cbd5e1;
	--cl-text: #1e293b;
	--cl-text-strong: #0f172a;
	--cl-muted: #475569;
	--cl-accent: #2563eb;
	--cl-accent-2: #0d9488;
	--cl-link: #1d4ed8;
	--global-palette9rgb: 255, 255, 255;
	color-scheme: light;
}

body {
	background: var(--cl-bg);
	color: var(--cl-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

a { color: var(--cl-link); }
a:hover { color: var(--cl-accent-2); }

h1, h2, h3, h4 { color: var(--cl-text-strong); letter-spacing: -0.01em; }

/* Header: thin rule under it, gradient site title as in Tracking. */
#masthead, .site-header-row-container-inner {
	background: var(--cl-bg) !important;
}
#masthead { border-bottom: 1px solid var(--cl-border); }
.site-branding .site-title {
	font-family: inherit;
	font-weight: 700;
	letter-spacing: -0.02em;
	background: linear-gradient(90deg, #60a5fa, #2dd4bf);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent !important;
}
.site-branding .site-description { color: var(--cl-muted); }
.main-navigation .primary-menu-container > ul li.menu-item > a { color: var(--cl-text) !important; background: transparent !important; }
.main-navigation .primary-menu-container > ul li.current-menu-item > a,
.main-navigation .primary-menu-container > ul li.menu-item > a:hover { color: var(--cl-accent-2) !important; }
.header-navigation .header-menu-container ul ul.sub-menu {
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
}

/* Content boxes become cards. */
.content-bg, .entry.content-bg, .loop-entry, .widget {
	background: var(--cl-surface) !important;
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
	box-shadow: none !important;
}
.site-footer, .site-footer .site-bottom-footer-wrap, .site-footer-row-container-inner {
	background: var(--cl-bg) !important;
	border-top: 1px solid var(--cl-border);
	color: var(--cl-muted);
}
.entry-meta, .entry-meta a, .kadence-breadcrumbs, .kadence-breadcrumbs a { color: var(--cl-muted); }
.entry-taxonomies a, .cl-badge {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 2px 9px;
	border-radius: 999px;
	border: 1px solid var(--cl-border-strong);
	color: var(--cl-accent-2) !important;
	background: var(--cl-surface-2);
	text-decoration: none;
}

/* Buttons: small rounded pills. */
.wp-block-button__link, .button, button, input[type="submit"], .cl-more summary {
	border-radius: 8px;
	background: var(--cl-surface-2);
	color: var(--cl-text);
	border: 1px solid var(--cl-border-strong);
	box-shadow: none;
}
.wp-block-button__link:hover, .button:hover, button:hover { border-color: var(--cl-accent); color: var(--cl-text-strong); }

/* Home page sections. */
.cl-section {
	background: var(--cl-surface);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
	padding: 1.5rem 1.75rem;
	margin: 0 0 1.5rem;
}
.cl-section > h2:first-child { margin-top: 0; font-size: 1.35rem; }
.cl-section .cl-link {
	display: inline-block;
	margin-top: 0.5rem;
	font-weight: 600;
	text-decoration: none;
}
.cl-section .cl-link::after { content: " \2192"; }
.cl-todo {
	border: 1px dashed var(--cl-accent);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	color: var(--cl-accent);
	font-size: 0.9rem;
}

/* Latest entries on the home page. */
.entry-content ul.cl-entries, ul.cl-entries { display: grid; gap: 0.9rem; margin: 0; padding: 0; list-style: none; }
.cl-entry {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 0.9rem;
	align-items: start;
	background: var(--cl-surface-2);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
	padding: 0.75rem;
}
.cl-entry.no-thumb { grid-template-columns: 1fr; }
.cl-entry img { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; display: block; }
.cl-entry h3 { margin: 0.25rem 0 0.2rem; font-size: 1.05rem; }
.cl-entry h3 a { color: var(--cl-text-strong); text-decoration: none; }
.cl-entry h3 a:hover { color: var(--cl-accent-2); }
.cl-entry .cl-date { color: var(--cl-muted); font-size: 0.8rem; margin-left: 0.4rem; }
.cl-entry p { margin: 0; color: var(--cl-text); font-size: 0.93rem; }
.cl-more { margin-top: 0.9rem; }
.cl-more summary {
	display: inline-block;
	cursor: pointer;
	padding: 0.35rem 0.9rem;
	font-size: 0.85rem;
	list-style: none;
}
.cl-more summary::-webkit-details-marker { display: none; }
.cl-more[open] summary { margin-bottom: 0.9rem; }
.cl-more[open] summary .cl-show { display: none; }
.cl-more:not([open]) summary .cl-hide { display: none; }

/* Folding sections (Details blocks), used on the Cancer Journey page. */
.wp-block-details {
	background: var(--cl-surface-2);
	border: 1px solid var(--cl-border);
	border-radius: var(--cl-radius);
	padding: 0.9rem 1.1rem;
	margin: 0 0 1rem;
}
.wp-block-details > summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--cl-text-strong);
}
.wp-block-details[open] > summary { margin-bottom: 0.75rem; }
.wp-block-details .wp-block-details { background: var(--cl-surface); }
.wp-block-details .wp-block-details > summary { font-size: 1rem; }

/* Light/dark switch. */
.cl-theme-toggle {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 1000;
	font-size: 0.8rem;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: var(--cl-surface);
	color: var(--cl-text);
	border: 1px solid var(--cl-border-strong);
	cursor: pointer;
}

@media (max-width: 600px) {
	.cl-section { padding: 1.1rem 1rem; }
	.cl-entry { grid-template-columns: 72px 1fr; }
	.cl-entry img { width: 72px; height: 72px; }
}