/*
Theme Name:  H.E.L.P.
Theme URI:   https://help-consulting.be
Description: Bespoke block theme for H.E.L.P. — Health Education Learning Partnership. Training for healthcare professionals in therapeutic patient education, reflective practice and teaching methodology.
Version:     1.0.0
Author:      H.E.L.P.
Author URI:  https://help-consulting.be
Requires at least: 6.7
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: help-consulting
Domain Path: /languages
Tags:        blog, one-column, block-patterns, full-site-editing, accessibility-ready, translation-ready
*/

/*
 * This file holds ONLY what theme.json cannot express. Anything expressible
 * as a preset, a style or a section style belongs in theme.json, where it is
 * editable in the site editor and renders identically in the editor canvas.
 * See docs/specs/04-design-system.md §12.2.
 *
 * No colour, size or spacing literal below: CSS reads the generated custom
 * properties so there is still one source of truth.
 */

/* -------------------------------------------------------------------------
 * Reduced motion. theme.json cannot express a media query at all.
 * ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* -------------------------------------------------------------------------
 * Skip link. Must be the first focusable element and visible on focus.
 * ---------------------------------------------------------------------- */
.hc-skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none;
	border-bottom-right-radius: var(--wp--custom--radius--md);
	transform: translateY(-101%);
}

.hc-skip-link:focus {
	transform: translateY(0);
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--base);
	outline-offset: calc(var(--wp--custom--focus--offset) * -1);
	color: var(--wp--preset--color--base);
}

/* -------------------------------------------------------------------------
 * Focus. theme.json reaches buttons and links; these are the elements it
 * does not, plus the inversion needed on the primary band.
 * ---------------------------------------------------------------------- */
:where(.wp-site-blocks *:focus-visible) {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
}

.is-style-section-primary :where(*:focus-visible) {
	outline-color: var(--wp--preset--color--surface);
}

/* -------------------------------------------------------------------------
 * Text wrapping. No theme.json equivalent.
 * ---------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
blockquote, figcaption, caption {
	text-wrap: balance;
}

p, li {
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
 * Sticky header with a translucent background. The opaque colour is the
 * fallback where backdrop-filter is unsupported.
 * ---------------------------------------------------------------------- */
.hc-header {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--wp--preset--color--base);
}

@supports (backdrop-filter: blur(8px)) {
	.hc-header {
		background: color-mix(in srgb, var(--wp--preset--color--base) 94%, transparent);
		backdrop-filter: blur(8px);
	}
}

/* -------------------------------------------------------------------------
 * Card hover. The lift is the design's only motion.
 * ---------------------------------------------------------------------- */
.hc-card {
	transition: transform var(--wp--custom--transition--base),
	            box-shadow var(--wp--custom--transition--base);
}

.hc-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--preset--shadow--medium);
}

/* -------------------------------------------------------------------------
 * Contact Form 7. Third-party markup we do not own — see
 * docs/specs/04-design-system.md §9.
 * ---------------------------------------------------------------------- */
.wpcf7-form p {
	margin-block: 0 var(--wp--preset--spacing--50);
}

.wpcf7-form label {
	display: block;
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
}

.wpcf7-form .wpcf7-form-control {
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--surface);
	border-radius: var(--wp--custom--radius--md);
}

.wpcf7-form .wpcf7-form-control:focus {
	outline: var(--wp--custom--focus--width) solid var(--wp--preset--color--primary);
	outline-offset: var(--wp--custom--focus--offset);
}

.wpcf7-form .wpcf7-submit {
	width: auto;
	padding: 15px 28px;
	font-weight: 700;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--primary);
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	cursor: pointer;
}

.wpcf7-form .wpcf7-submit:hover {
	background: var(--wp--preset--color--primary-dark);
}

.wpcf7-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	align-items: flex-start;
	font-weight: 400;
}

.wpcf7-form input[type="checkbox"] {
	width: 22px;
	height: 22px;
	flex: none;
	accent-color: var(--wp--preset--color--primary);
}

.wpcf7-form .wpcf7-not-valid {
	background: var(--wp--preset--color--base);
	border-color: var(--wp--preset--color--error);
	border-width: 2px;
}

.wpcf7-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--error);
}

.wpcf7-form .wpcf7-response-output {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 20px 24px;
	border: 0;
	border-left: 4px solid var(--wp--preset--color--error);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--base);
	box-shadow: var(--wp--preset--shadow--soft);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7-form.sent .wpcf7-response-output {
	border-left-color: var(--wp--preset--color--success);
}

/* Theme-owned hooks woven into the form markup. */
.hc-form-note,
.hc-form-hint {
	font-size: var(--wp--preset--font-size--x-small);
}

.hc-required {
	color: var(--wp--preset--color--error);
	font-weight: 700;
}

.hc-form-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--wp--preset--spacing--50);
}

.hc-form-actions {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
	flex-wrap: wrap;
}

/* -------------------------------------------------------------------------
 * Links. The design underlines nothing in the chrome; article prose does
 * underline, so colour is not the only signal where it matters most.
 * ---------------------------------------------------------------------- */
.wp-block-post-content > p a,
.wp-block-post-content > ul a,
.wp-block-post-content > ol a,
.wp-block-post-content > .wp-block-quote a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
	text-decoration-thickness: 1px;
}

/* -------------------------------------------------------------------------
 * The header search is an icon, not a filled control.
 * ---------------------------------------------------------------------- */
.hc-header .wp-block-search__button {
	border: 0;
	box-shadow: none;
}

/* -------------------------------------------------------------------------
 * Equal-height cards in a grid. The design aligns every card in a row.
 * ---------------------------------------------------------------------- */
.wp-block-group.is-layout-grid > .wp-block-group,
.wp-block-post-template.is-layout-grid > li > .wp-block-group {
	height: 100%;
}

/* -------------------------------------------------------------------------
 * Hero: the notice card overlaps the image's lower-left corner, as drawn.
 * Block layout has no overlap primitive, so this is CSS.
 * ---------------------------------------------------------------------- */
.hc-hero-media {
	position: relative;
}

@media (min-width: 782px) {
	.hc-hero-notice {
		position: absolute;
		left: calc(var(--wp--preset--spacing--40) * -1);
		bottom: var(--wp--preset--spacing--60);
		max-width: 17rem;
	}
}

@media (max-width: 781px) {
	.hc-hero-notice {
		margin-top: var(--wp--preset--spacing--40);
	}
}

/* -------------------------------------------------------------------------
 * Section head: capped so the "see everything" link sits beside the heading
 * rather than wrapping below it, as the design draws.
 * ---------------------------------------------------------------------- */
.hc-section-head {
	max-width: var(--wp--style--global--content-size);
}

/* The call-to-action heading is capped in width, not in height. */
.hc-cta-title {
	max-width: 45rem;
	margin-inline: auto;
}

/* In an equal-height card, the date sits at the bottom rather than leaving
 * the gap under it. */
.hc-card > .wp-block-post-date {
	margin-top: auto;
}

/* -------------------------------------------------------------------------
 * Narrow screens: the call-to-action panel's own padding plus the root
 * padding left the heading about 270px to wrap in, which broke it into five
 * lines. Give the panel back its width below the tablet breakpoint.
 * ---------------------------------------------------------------------- */
@media (max-width: 600px) {
	.hc-cta-title {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

/* -------------------------------------------------------------------------
 * Full-bleed bands touch. The global block gap is right for prose and wrong
 * between coloured sections, where it shows as a white stripe. Zeroed at the
 * site root, where no block attribute can reach.
 * ---------------------------------------------------------------------- */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/*
 * Two adjacent full-bleed blocks always touch, wherever they are stacked.
 * Expressed on the blocks rather than on their container, because the post
 * editor renders page content without knowing which template will wrap it —
 * a container rule would be right on the front end and wrong in the editor.
 */
.alignfull + .alignfull {
	margin-block-start: 0;
}

/* -------------------------------------------------------------------------
 * The hero badge is a paragraph that must shrink to its text. `display` is
 * not a block attribute, so writing it inline would be dropped on load and
 * the block would fail validation — it belongs here.
 * ---------------------------------------------------------------------- */
.hc-badge {
	display: inline-block;
	width: auto;
}