/*
Theme Name: LUCAS Info
Theme URI: https://lukas.local/
Author: LUCAS Device Guide
Author URI: https://lukas.local/
Description: Independent, plain-language information about the LUCAS mechanical chest compression device. A block theme with no build step: theme.json, block templates and patterns, self-hosted open-licensed fonts, original SVG illustrations.
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lucas-info
Tags: block-patterns, full-site-editing, one-column, wide-blocks, custom-colors, editor-style, accessibility-ready

Fonts: Source Sans 3 and Source Serif 4 by Adobe, SIL Open Font License 1.1 (see assets/fonts/).
*/

/* ---------------------------------------------------------------------------
   Everything token-like lives in theme.json. This file only holds the pieces
   theme.json cannot express: the timeline component, block styles that need
   pseudo-elements, and print styles.
   --------------------------------------------------------------------------- */

/* Timeline ---------------------------------------------------------------- */

.lucas-timeline {
	--lucas-timeline-rail: 1.75rem;
	position: relative;
	padding-left: calc(var(--lucas-timeline-rail) + 1rem);
}

.lucas-timeline::before {
	content: "";
	position: absolute;
	top: 0.4em;
	bottom: 0.4em;
	left: calc(var(--lucas-timeline-rail) / 2 - 1px);
	width: 2px;
	background: var(--wp--preset--color--line);
}

.lucas-timeline > .wp-block-group {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--40);
}

.lucas-timeline > .wp-block-group::before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: calc(-1rem - var(--lucas-timeline-rail) / 2 - 0.4rem);
	width: 0.8rem;
	height: 0.8rem;
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	border: 2px solid var(--wp--preset--color--primary);
	box-sizing: border-box;
}

.lucas-timeline > .wp-block-group.is-milestone::before {
	background: var(--wp--preset--color--primary);
}

.lucas-timeline > .wp-block-group > .wp-block-heading {
	margin-top: 0;
}

.lucas-timeline .lucas-timeline__year {
	font-family: var(--wp--preset--font-family--sans);
	font-weight: 600;
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--small);
	margin: 0 0 0.25rem;
}

/* Block styles ------------------------------------------------------------ */

/* Group: card */
.wp-block-group.is-style-card {
	background: var(--wp--preset--color--base-2);
	border-radius: 4px;
	padding: var(--wp--preset--spacing--40);
	height: 100%;
}

.wp-block-group.is-style-card > .wp-block-heading {
	margin-top: 0;
}

/* Group: notice (disclaimer, caution) */
.wp-block-group.is-style-notice {
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--base-2);
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--small);
	border-radius: 0 4px 4px 0;
}

/* Group: key facts panel */
.wp-block-group.is-style-facts {
	border: 1px solid var(--wp--preset--color--line);
	border-top: 3px solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--40);
	border-radius: 4px;
}

.wp-block-group.is-style-facts > .wp-block-heading {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--large);
}

/* Paragraph: lede */
.wp-block-paragraph.is-style-lede,
p.is-style-lede {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-2);
	max-width: 40ch;
}

/* List: references */
.wp-block-list.is-style-references {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-2);
	padding-left: 2.25rem;
}

.wp-block-list.is-style-references li {
	margin-bottom: 0.6rem;
	overflow-wrap: anywhere;
}

.wp-block-list.is-style-references li:target {
	background: var(--wp--preset--color--primary-2);
	outline: 0.5rem solid var(--wp--preset--color--primary-2);
}

/* In-text citation links */
a.lucas-cite {
	text-decoration: none;
	font-size: 0.75em;
	vertical-align: super;
	line-height: 0;
	padding: 0 0.1em;
}

/* Feature grid: link cards */
.lucas-feature .wp-block-heading a {
	text-decoration: none;
	color: inherit;
}

.lucas-feature .wp-block-heading a:hover,
.lucas-feature .wp-block-heading a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lucas-feature .wp-block-image {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* Hero --------------------------------------------------------------------- */

.lucas-hero {
	background: var(--wp--preset--color--base-2);
	background-image: linear-gradient(180deg, var(--wp--preset--color--base-2) 0%, var(--wp--preset--color--base) 100%);
}

.lucas-hero .wp-block-image {
	margin: 0;
}

.lucas-hero h1 {
	max-width: 18ch;
}

/* Navigation overlay ------------------------------------------------------- */

.wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--30);
}

/* Skip link visibility (core injects it) ---------------------------------- */

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	outline: 3px solid var(--wp--preset--color--accent);
}

/* Reduced motion ----------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Print -------------------------------------------------------------------- */

@media print {
	header.wp-block-group,
	footer.wp-block-group,
	.wp-block-navigation,
	.wp-block-buttons {
		display: none !important;
	}

	body {
		font-size: 11pt;
		color: #000;
	}

	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		color: #444;
	}

	a.lucas-cite::after,
	.wp-block-navigation a::after {
		content: "";
	}

	.wp-block-details {
		break-inside: avoid;
	}

	.wp-block-details summary {
		list-style: none;
	}

	.wp-block-details:not([open]) > *:not(summary) {
		display: block;
	}
}

/* Keep the footer at the bottom on short pages ---------------------------- */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}