/*
Theme Name: Cloud Echo
Theme URI: https://cloudecho.uk
Author: Cloud Echo Limited
Author URI: https://cloudecho.uk
Description: A quiet, editorial block theme for Cloud Echo — a senior consultancy for complex problems. Navy, paper, and the [ce] bracket as its signature device.
Requires at least: 6.6
Tested up to: 7.0.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cloud-echo
*/

/* ---------------------------------------------------------------
   Signature device: the bracket.
   Kickers and highlighted words carry the [ce] mark's brackets.
   --------------------------------------------------------------- */

.kicker {
	display: inline-block;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
	margin-bottom: 0.25rem;
}

.kicker::before {
	content: "[\00a0";
	color: var(--wp--preset--color--magenta);
	font-weight: 600;
}

.kicker::after {
	content: "\00a0]";
	color: var(--wp--preset--color--magenta);
	font-weight: 600;
}

/* A word held in brackets inside a heading — the hero's one gesture. */
.hl-brackets::before {
	content: "[\2009";
	color: var(--wp--preset--color--magenta);
	font-weight: 400;
}

.hl-brackets::after {
	content: "\2009]";
	color: var(--wp--preset--color--magenta);
	font-weight: 400;
}

/* On navy fields, the kicker inverts to paper with the same magenta brackets. */
.has-navy-background-color .kicker {
	color: var(--wp--preset--color--paper);
}

/* ---------------------------------------------------------------
   Header & footer
   --------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--wp--preset--color--mist);
}

.site-footer a {
	color: var(--wp--preset--color--paper);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.site-footer a:hover,
.site-footer a:focus {
	text-decoration-thickness: 2px;
	color: var(--wp--preset--color--paper);
}

/* ---------------------------------------------------------------
   Quality floor
   --------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
.wp-block-button__link:focus-visible,
input:focus-visible,
textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--magenta);
	outline-offset: 3px;
	border-radius: 1px;
}

::selection {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--paper);
}

.wp-block-button__link {
	transition: background-color 0.18s ease, color 0.18s ease;
}

/* Outline button variant follows the palette. */
.is-style-outline .wp-block-button__link {
	border: 1.5px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	background: transparent;
}

.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus {
	border-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--paper);
	background: var(--wp--preset--color--purple);
}

/* ---------------------------------------------------------------
   One orchestrated moment: the hero rises on load.
   Respects reduced-motion.
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.hero-rise {
		animation: ce-rise 0.7s ease both;
	}

	.hero-rise-2 {
		animation: ce-rise 0.7s ease 0.12s both;
	}

	.hero-rise-3 {
		animation: ce-rise 0.7s ease 0.24s both;
	}

	@keyframes ce-rise {
		from {
			opacity: 0;
			transform: translateY(10px);
		}

		to {
			opacity: 1;
			transform: none;
		}
	}
}

/* ---------------------------------------------------------------
   Small refinements
   --------------------------------------------------------------- */

.wp-block-post-excerpt__excerpt {
	color: var(--wp--preset--color--ink);
}

.entry-content > p:first-of-type.lede,
.lede {
	font-family: var(--wp--preset--font-family--serif);
	font-style: italic;
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.5;
	color: var(--wp--preset--color--slate);
}