/*
Theme Name: CLE AI & DATA
Theme URI: https://cle-ai.com
Author: CLE AI & DATA
Description: Minimal block theme for the CLE AI & DATA community site, styled like the clay-model city on the homepage.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cle-ai
*/

/*
 * Every value here references a theme.json token so Appearance → Editor → Styles stays in
 * charge. Clay rules, to match the homepage illustration: soft rounded shapes, no hard 1px
 * borders on controls, and depth only from the settings.custom.clay shadows (raised, pressed,
 * button, ball). Sections stay bands; cards are for things you can tap or read on their own.
 */

/* overflow-x: clip, NEVER hidden. `hidden` on html/body turns them into scroll containers,
   which silently disables position: sticky sitewide (the bug that broke the old theme). */
html,
body {
	overflow-x: clip;
}

body {
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
}

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

/* Links stay ink-coloured for contrast; logo blue is the underline, thicker on hover. */
a {
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

a:hover {
	text-decoration-thickness: 3px;
}

.has-background a:where(:not(.wp-element-button)) {
	color: inherit;
}

.wp-element-button {
	cursor: pointer;
}

:where(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select),
.wp-block-search__input {
	font: inherit;
	color: inherit;
	background: var(--wp--preset--color--surface-raised);
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--clay--pressed);
	padding: var(--wp--preset--spacing--xxs) var(--wp--preset--spacing--xs);
}

.is-style-eyebrow,
.cle-eyebrow {
	width: fit-content;
	padding: 0.35em 0.95em 0.3em;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--surface-raised));
	border-radius: var(--wp--custom--clay--pill);
	box-shadow: var(--wp--custom--clay--raised);
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

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

/* Header: static, not sticky. The ticker sits beneath it and scrolls away with it. */
.cle-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

/* Laptops and up: the header and footer span the page with the same gutter as the homepage
   story, so the logo sits over the headline instead of floating in a centred column. */
@media (min-width: 1024px) {
	.wp-block-group.cle-header,
	.wp-block-group.cle-footer {
		padding-inline: var(--wp--custom--gutter);
	}

	.wp-block-group.cle-header > .cle-header__bar,
	.wp-block-group.cle-footer > .alignwide {
		max-width: none;
	}
}

.cle-header .wp-block-site-logo img {
	height: var(--wp--custom--logo-height);
	width: auto;
}

/* Header search: a plain input inside a disclosure. */
.cle-search summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}

.cle-search summary::-webkit-details-marker {
	display: none;
}

.cle-search .wp-block-search {
	margin-top: var(--wp--preset--spacing--xxs);
}

@media (min-width: 768px) {
	.cle-search {
		position: relative;
	}

	.cle-search .wp-block-search {
		position: absolute;
		right: 0;
		top: 100%;
		z-index: 20;
		width: var(--wp--custom--popover--width);
	}
}

/* Post byline ("By Name · date") and category badges, on post pages and archives. */
.cle-byline {
	color: var(--wp--preset--color--ink-soft);
	font-size: var(--wp--preset--font-size--s);
}

.cle-byline p {
	margin: 0;
}

/* No author (rare, from old imports): drop "By" and the dot rather than leave them dangling. */
.cle-byline:not(:has(.wp-block-post-author-name)) > p {
	display: none;
}

.cle-badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xxs);
}

.cle-badges a {
	padding: 0.3em 0.9em;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 800;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
	background: color-mix(in srgb, var(--wp--preset--color--accent) 22%, var(--wp--preset--color--surface-raised));
	border-radius: var(--wp--custom--clay--pill);
	box-shadow: var(--wp--custom--clay--raised);
}

.cle-badges .wp-block-post-terms__separator {
	display: none;
}

/* Post lists: separated by a rule; in a grid each post is a raised clay card. */
.wp-block-post-template > li + li {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--m);
}

.wp-block-post-template.is-layout-grid > li + li {
	border-top: 0;
	padding-top: 0;
}

.wp-block-post-template.is-layout-grid > li {
	padding: var(--wp--preset--spacing--m);
	background: var(--wp--preset--color--surface-raised);
	border-radius: var(--wp--custom--clay--card);
	box-shadow: var(--wp--custom--clay--raised);
}

.wp-block-post-featured-image img {
	border-radius: var(--wp--custom--radius);
}

/* Clay buttons: a pill with a darker lip underneath that squashes when pressed. */
.wp-element-button,
.wp-block-button__link {
	transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	filter: brightness(1.06);
}

.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(3px);
	box-shadow: var(--wp--custom--clay--button-pressed);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--m);
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--surface-raised);
	border: 0;
	box-shadow: var(--wp--custom--clay--raised);
}

.wp-block-button.is-style-outline > .wp-block-button__link:active {
	box-shadow: var(--wp--custom--clay--pressed);
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}

	.wp-element-button:hover,
	.wp-element-button:active,
	.wp-block-button__link:hover,
	.wp-block-button__link:active {
		transform: none;
	}
}

/* Sections butt together; rhythm comes from their own padding and colour bands. */
.wp-site-blocks > * + *,
.wp-block-template-part > * + * {
	margin-block-start: 0;
}