/*
Theme Name: Bretauche
Theme URI: https://www.ecole-bretauche-checy.fr/
Author: École Notre Dame de la Bretauche
Description: Thème de blocs natif pour le site de l'École Notre Dame de la Bretauche.
Version: 0.1.0
Requires at least: 6.9
Requires PHP: 8.4
Text Domain: bretauche
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

:where(html) {
	scroll-behavior: smooth;
}

:where(body) {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

.bretauche-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 2px 12px rgb(0 0 0 / 10%);
}

.admin-bar .bretauche-site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.bretauche-site-header .wp-block-site-logo img {
	width: auto;
	height: clamp(54px, 7vw, 82px);
}

.bretauche-site-header .wp-block-navigation-item__content {
	text-underline-offset: 0.3em;
}

.bretauche-hero {
	position: relative;
	isolation: isolate;
	background-color: var(--wp--preset--color--green-dark);
	background-image: linear-gradient(rgb(0 0 0 / 24%), rgb(0 0 0 / 24%)), url("assets/images/chalk-01.jpg");
	background-position: center;
	background-size: cover;
}

.bretauche-hero::before {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, rgb(0 0 0 / 12%), transparent 50%, rgb(0 0 0 / 12%));
	content: "";
}

.bretauche-card {
	height: 100%;
	box-sizing: border-box;
	padding: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	box-shadow: 0 8px 26px rgb(22 65 45 / 8%);
}

.bretauche-card :where(a) {
	text-underline-offset: 0.2em;
}

.bretauche-post-card {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--base);
}

.bretauche-post-card .wp-block-post-featured-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bretauche-post-card__body {
	padding: var(--wp--preset--spacing--40);
}

.bretauche-meta {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Keep migrated legacy content inside the same readable container on every
 * page and article. Some legacy rows retain full-width block attributes even
 * though their text was designed for the old theme's centered container.
 */
.wp-block-post-content {
	box-sizing: border-box;
	width: min(100%, var(--wp--style--global--content-size, 760px));
	margin-inline: auto;
	padding-inline: clamp(1rem, 3vw, 2rem);
}

.wp-block-post-content > :where(:not(.alignfull)),
.wp-block-post-content .bretauche-migrated-row {
	box-sizing: border-box;
	max-width: var(--wp--style--global--content-size, 760px);
	margin-inline: auto;
}

.wp-block-post-content :where(p, li, h1, h2, h3, h4, h5, h6) {
	overflow-wrap: anywhere;
}

/* WordPress can propagate layout classes from malformed legacy rows to
 * inline descendants. Keep emphasis and links inline so sentences do not
 * split around bold or linked words. */
.wp-block-post-content :where(strong, em, span, a)[class*="is-layout-"] {
	display: inline !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bretauche-site-footer a {
	color: inherit;
}

.bretauche-back-to-top {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 900;
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var(--wp--preset--color--green);
	box-shadow: 0 4px 16px rgb(0 0 0 / 24%);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.bretauche-back-to-top.is-visible {
	display: inline-flex;
}

.wpcf7-form :where(label) {
	display: block;
	font-weight: 600;
}

.wpcf7-form :where(input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea, select) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin-top: 0.4rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 6px;
	background: #fff;
	font: inherit;
}

.wpcf7-form textarea {
	min-height: 10rem;
	padding: 0.75rem;
	resize: vertical;
}

.wpcf7-form input:not([type="checkbox"], [type="radio"], [type="submit"]),
.wpcf7-form select {
	padding: 0.65rem 0.75rem;
}

.wpcf7-form input[type="submit"] {
	min-height: 48px;
	padding: 0.75rem 1.4rem;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--green);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.wpcf7-form input[type="submit"]:hover {
	background: var(--wp--preset--color--green-dark);
}

@media (max-width: 781px) {
	.bretauche-site-header .wp-block-site-title {
		font-size: 1rem !important;
	}

	.bretauche-hero {
		min-height: auto !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	:where(html) {
		scroll-behavior: auto;
	}
}