/*
Theme Name: Culture Crisis Lab
Theme URI: https://culturecrisislab.uk
Author: ProArtsPlus
Author URI: https://www.proartsplus.co.uk
Description: Block theme for the Culture Crisis Lab, a ProArtsPlus programme. Identity by Bond & Coyne. Colours and fonts are provisional stand-ins until the final brand files are applied.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.3.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: culture-crisis-lab
Tags: block-patterns, full-site-editing, one-column, wide-blocks
*/

/* Small additions that theme.json cannot express. */

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--wp--preset--color--cobalt);
	outline-offset: 3px;
}

/* Pictograms and decorative images keep their proportions. */
.ccl-picto img,
.ccl-logo img {
	display: block;
	width: 100%;
	height: auto;
}

/* Animated logo: the script draws an SVG over the static image. */
.ccl-logo-animate {
	position: relative;
}
.ccl-logo-animate svg.ccl-dots {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}
.ccl-logo-animate.is-animating img {
	visibility: hidden;
}

/* Outline button on dark bands. */
.is-style-outline > .wp-block-button__link {
	border: 2px solid currentColor;
	background: transparent;
	color: inherit;
}
.is-style-outline > .wp-block-button__link:hover {
	background: transparent;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Placeholders that mark where something still has to be added. */
.ccl-placeholder {
	border: 2px dashed currentColor;
	border-radius: 20px;
	opacity: 0.9;
	text-align: center;
}

/* Cards in the "who it is for" grid. */
.ccl-tile {
	font-weight: 600;
}

/* Header stays tidy on small screens. */
.ccl-header .wp-block-site-logo img,
.ccl-header .ccl-logo img {
	height: 52px;
	width: auto;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none !important;
		transition: none !important;
	}
}

/* Header rule and logo sizes. */
.ccl-header {
	border-bottom: 1px solid #e6e6e2;
}
.ccl-header .ccl-logo {
	margin: 0;
}
.ccl-logo-animate {
	max-width: 680px;
	margin-block: 1.5rem 0.5rem;
}
.ccl-step {
	width: 100px;
	margin: 0;
}
.ccl-kicker {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-weight: 700;
}
.ccl-plain-list {
	list-style: none;
}
.ccl-footer-logo img {
	width: 200px;
}
.ccl-picto {
	max-width: 360px;
	margin-inline: auto;
}
.ccl-logo-animate {
	margin-bottom: 1.5rem;
}

/* Latest news (v0.2): hide the image column when a post has no featured image. */
.ccl-news-image:not(:has(img)) {
	display: none;
}
.wp-block-columns:has(> .ccl-news-image:not(:has(img))) > .wp-block-column {
	flex-basis: 100% !important;
}
.ccl-news-list .wp-block-post {
	padding-block: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--stone);
}
.ccl-news-list .wp-block-post:first-child {
	border-top: 0;
}

/* v0.3: black hero band with the looping logo. */
.ccl-hero {
	overflow: hidden;
}
.ccl-hero > .ccl-logo-loop {
	position: relative;
	max-width: 900px;
	margin-block: 2rem 0.5rem;
	margin-left: max(0px, calc((100% - 1240px) / 2)) !important;
}
.ccl-hero > .ccl-motion-wrap {
	margin-top: 0;
	margin-bottom: 1.5rem;
}
.ccl-dots-canvas {
	position: absolute;
	left: -30%;
	top: -50%;
	width: 160%;
	height: 200%;
	pointer-events: none;
	display: none;
}
.ccl-logo-loop.is-animating .ccl-dots-canvas {
	display: block;
}
.ccl-logo-loop.is-animating img {
	visibility: hidden;
}
.ccl-motion-toggle {
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: inherit;
	background: transparent;
	border: 1px solid currentColor;
	border-radius: 999px;
	padding: 0.4rem 1rem;
	min-height: 44px;
	cursor: pointer;
	opacity: 0.85;
}
.ccl-motion-toggle:hover {
	opacity: 1;
}