/**
 * Theme Name: Débrouillards 2026
 * Theme URI:         https://www.lespetitsdebrouillards-idf.org
 * Description:       Le thème officiel des Petits Débrouillards Île-de-France depuis 2026.
 * Version:           1.2.0
 * Author:            Starlight
 * Author URI:        https://starlight116.github.io
 * Tags:              block-patterns, full-site-editing, education, four-columns
 * Text Domain:       debrouillards-2026
 * Domain Path:       /assets/lang
 * Tested up to:      7.0
 * Requires at least: 7.0
 * Requires PHP:      8.5
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

:root {
	/* Shared page gutters and outer spacing, taken from the home compositions. */
	--debrouillards-page-content-padding: max(24px, 2.8vw);
	--debrouillards-page-hero-padding: max(24px, 6.9vw);
	--debrouillards-page-hero-top: 76px;
	--debrouillards-page-hero-bottom: 70px;
	--debrouillards-page-bottom: 80px;
	--debrouillards-paragraph-font-weight: 300;
	--debrouillards-background-start: #e2edf2;
	--debrouillards-background-end: #ffffff;
	--debrouillards-background-fade-start: 450px;
	--debrouillards-background-fade-end: 1100px;
	--debrouillards-page-background: linear-gradient(
		180deg,
		var(--debrouillards-background-start) 0,
		var(--debrouillards-background-start) var(--debrouillards-background-fade-start),
		var(--debrouillards-background-end) var(--debrouillards-background-fade-end)
	);
}

/* One continuous page background, shared by every template and editor canvas. */
.wp-site-blocks,
.editor-styles-wrapper {
	background-color: var(--debrouillards-background-end);
	background-image: var(--debrouillards-page-background);
	background-repeat: no-repeat;
}

@media (max-width: 781px) {
	:root {
		--debrouillards-background-fade-start: 650px;
		--debrouillards-background-fade-end: 1500px;
	}
}

/* Make every enabled interactive control clearly identifiable as clickable. */
:where(
	a[href],
	button:not(:disabled),
	input[type="button"]:not(:disabled),
	input[type="submit"]:not(:disabled),
	input[type="reset"]:not(:disabled),
	input[type="checkbox"]:not(:disabled),
	input[type="radio"]:not(:disabled),
	select:not(:disabled),
	label[for],
	summary,
	[role="button"]:not([aria-disabled="true"]),
	[role="link"]:not([aria-disabled="true"]),
	.lpd-clickable-block
) {
	cursor: pointer;
}

:where(
	button:disabled,
	input:disabled,
	select:disabled,
	[aria-disabled="true"]
) {
	cursor: not-allowed;
}

/*
 * Keep anchored headings visible below the sticky site header.
 */
h2[id] {
	scroll-margin-block-start: 9rem;
}

.wp-site-blocks > .wp-block-template-part + h1 {
	margin-block-start: 0;
}

/*
 * Let the closing training callout on "Toutes nos animations" paint through
 * the page gutters without changing the size or alignment of its contents.
 */
body.page-id-275
	.wp-block-post-content
	> .wp-block-group.has-green-background-color {
	box-shadow: 0 0 0 100vmax var(--wp--preset--color--green);
	clip-path: inset(0 -100vmax);
}

body.page-id-275
	.wp-block-post-content
	> .wp-block-group.has-green-background-color
	+ .wp-block-columns {
	margin-block-start: 24px;
}

/*
 * Keep a 12px rhythm between consecutive paragraph blocks without changing
 * the spacing around headings, media or other blocks.
 */
.wp-block-paragraph + .wp-block-paragraph {
	margin-block-start: 12px;
}

/*
 * Optional Columns block style with a vertical rule between adjacent
 * columns. Removing the horizontal gap lets the internal padding keep the
 * rule visually centered without changing the outer alignment of the block.
 */
.wp-block-columns.is-style-separateurs-verticaux {
	--debrouillards-column-separator-spacing: clamp(12px, 2vw, 24px);
	--debrouillards-column-separator-width: 10px;

	column-gap: 0;
}

.wp-block-columns.is-style-separateurs-verticaux.is-not-stacked-on-mobile
	> .wp-block-column {
	box-sizing: border-box;
	padding-inline: var(--debrouillards-column-separator-spacing);
}

.wp-block-columns.is-style-separateurs-verticaux.is-not-stacked-on-mobile
	> .wp-block-column:first-child {
	padding-inline-start: 0;
}

.wp-block-columns.is-style-separateurs-verticaux.is-not-stacked-on-mobile
	> .wp-block-column:last-child {
	padding-inline-end: 0;
}

.wp-block-columns.is-style-separateurs-verticaux.is-not-stacked-on-mobile
	> .wp-block-column:not(:first-child) {
	border-inline-start: var(--debrouillards-column-separator-width) solid
		var(
			--debrouillards-column-separator-color,
			var(--wp--preset--color--dark-blue)
		);
}

@media (min-width: 782px) {
	.wp-block-columns.is-style-separateurs-verticaux:not(.is-not-stacked-on-mobile)
		> .wp-block-column {
		box-sizing: border-box;
		padding-inline: var(--debrouillards-column-separator-spacing);
	}

	.wp-block-columns.is-style-separateurs-verticaux:not(.is-not-stacked-on-mobile)
		> .wp-block-column:first-child {
		padding-inline-start: 0;
	}

	.wp-block-columns.is-style-separateurs-verticaux:not(.is-not-stacked-on-mobile)
		> .wp-block-column:last-child {
		padding-inline-end: 0;
	}

	.wp-block-columns.is-style-separateurs-verticaux:not(.is-not-stacked-on-mobile)
		> .wp-block-column:not(:first-child) {
		border-inline-start: var(--debrouillards-column-separator-width) solid
			var(
				--debrouillards-column-separator-color,
				var(--wp--preset--color--dark-blue)
			);
	}
}

/*
 * Keep the site chrome full-width while giving every
 * top-level content block a consistent gutter, regardless of the template
 * being used (page, index, single, archive or 404).
 */
.wp-site-blocks
	> :where(
		:not(.wp-block-template-part):not(.search-results-page)
	) {
	box-sizing: border-box;
	padding: var(--debrouillards-page-content-padding);
}

/*
 * The post editor uses the post-content block as its canvas instead of the
 * wp-site-blocks wrapper used on the front end and in the Site Editor.
 */
body.editor-styles-wrapper .is-root-container.wp-block-post-content {
	box-sizing: border-box;
	padding: var(--debrouillards-page-content-padding);
}

/* Page compositions can remove this padding and use the same tokens inside. */
.wp-site-blocks > .wp-block-post-content,
body.editor-styles-wrapper .is-root-container.wp-block-post-content {
	padding-block: var(--debrouillards-page-hero-top) var(--debrouillards-page-bottom);
}

/* Native pages use the same title inset as the home hero. */
.wp-block-post-content > h1:first-child {
	margin-block-start: 0;
	margin-inline: calc(var(--debrouillards-page-hero-padding) - var(--debrouillards-page-content-padding));
}

/*
 * Keep the full-bleed Wikidébrouillard callout inside the viewport. Its block
 * Reset its fixed inline geometry inside nested layouts, then extend only a
 * top-level instance through the actual responsive page gutters.
 */
.wp-block-post-content
	.lpd-clickable-block.lpd-composition-svg-copy__columns.has-custom-css {
	left: auto;
	width: 100%;
	max-width: 100%;
}

.wp-block-post-content
	> .lpd-clickable-block.lpd-composition-svg-copy__columns.has-custom-css {
	left: calc(var(--debrouillards-page-content-padding) * -1);
	width: calc(100% + (2 * var(--debrouillards-page-content-padding)));
	max-width: none;
}

/*
 * Search uses its own wrapper, so its results receive the
 * standard content gutter.
 */
.search-results-page > .wp-block-query {
	box-sizing: border-box;
	padding-inline: var(--debrouillards-page-content-padding);
}

@media (max-width: 1100px) and (min-width: 782px) {
	:root {
		--debrouillards-page-hero-padding: 40px;
	}
}

@media (max-width: 781px) {
	:root {
		--debrouillards-page-content-padding: 24px;
		--debrouillards-page-hero-padding: 24px;
		--debrouillards-page-hero-top: 38px;
		--debrouillards-page-hero-bottom: 54px;
		--debrouillards-page-bottom: 64px;
	}
}

.lpd-clickable-block {
	position: relative;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease;
}

.lpd-clickable-block:hover {
	transform: translateY(-2px);
}

.lpd-clickable-block__link {
	color: inherit;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

.lpd-clickable-block:focus-visible,
.lpd-clickable-block__link:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 4px;
}

/* Map color presets saved by older pages to the current theme palette. */
:root {
	--wp--preset--color--pastel-purple: var(--wp--preset--color--purple);
	--wp--preset--color--pastel-pink: var(--wp--preset--color--pink);
	--wp--preset--color--pastel-yellow: var(--wp--preset--color--yellow);
	--wp--preset--color--pastel-green: var(--wp--preset--color--green);
	--wp--preset--color--neon-red: var(--wp--preset--color--red);
	--wp--preset--color--neon-pink: var(--wp--preset--color--pink);
	--wp--preset--color--neon-orange: var(--wp--preset--color--orange);
	--wp--preset--color--neon-yellow: var(--wp--preset--color--yellow);
	--wp--preset--color--neon-green: var(--wp--preset--color--green);
	--wp--preset--color--neon-blue: var(--wp--preset--color--light-blue);
}

.has-pastel-purple-color { color: var(--wp--preset--color--purple) !important; }
.has-pastel-purple-background-color { background-color: var(--wp--preset--color--purple) !important; }
.has-pastel-purple-border-color { border-color: var(--wp--preset--color--purple) !important; }

.has-pastel-pink-color { color: var(--wp--preset--color--pink) !important; }
.has-pastel-pink-background-color { background-color: var(--wp--preset--color--pink) !important; }
.has-pastel-pink-border-color { border-color: var(--wp--preset--color--pink) !important; }

.has-pastel-yellow-color { color: var(--wp--preset--color--yellow) !important; }
.has-pastel-yellow-background-color { background-color: var(--wp--preset--color--yellow) !important; }
.has-pastel-yellow-border-color { border-color: var(--wp--preset--color--yellow) !important; }

.has-pastel-green-color { color: var(--wp--preset--color--green) !important; }
.has-pastel-green-background-color { background-color: var(--wp--preset--color--green) !important; }
.has-pastel-green-border-color { border-color: var(--wp--preset--color--green) !important; }

.has-neon-red-color { color: var(--wp--preset--color--red) !important; }
.has-neon-red-background-color { background-color: var(--wp--preset--color--red) !important; }
.has-neon-red-border-color { border-color: var(--wp--preset--color--red) !important; }

.has-neon-pink-color { color: var(--wp--preset--color--pink) !important; }
.has-neon-pink-background-color { background-color: var(--wp--preset--color--pink) !important; }
.has-neon-pink-border-color { border-color: var(--wp--preset--color--pink) !important; }

.has-neon-orange-color { color: var(--wp--preset--color--orange) !important; }
.has-neon-orange-background-color { background-color: var(--wp--preset--color--orange) !important; }
.has-neon-orange-border-color { border-color: var(--wp--preset--color--orange) !important; }

.has-neon-yellow-color { color: var(--wp--preset--color--yellow) !important; }
.has-neon-yellow-background-color { background-color: var(--wp--preset--color--yellow) !important; }
.has-neon-yellow-border-color { border-color: var(--wp--preset--color--yellow) !important; }

.has-neon-green-color { color: var(--wp--preset--color--green) !important; }
.has-neon-green-background-color { background-color: var(--wp--preset--color--green) !important; }
.has-neon-green-border-color { border-color: var(--wp--preset--color--green) !important; }

.has-neon-blue-color { color: var(--wp--preset--color--light-blue) !important; }
.has-neon-blue-background-color { background-color: var(--wp--preset--color--light-blue) !important; }
.has-neon-blue-border-color { border-color: var(--wp--preset--color--light-blue) !important; }


/* Shared design rules for native blocks, compositions and the editor. */
/* Keep all links and their nested labels free of underlines in every state. */
:where(.wp-site-blocks, .editor-styles-wrapper) a,
:where(.wp-site-blocks, .editor-styles-wrapper) a * {
    text-decoration: none !important;
}

:where(.wp-site-blocks, .editor-styles-wrapper) img {
    max-width: 100%;
    height: auto;
}
:where(h1, h2, h3, h4, h5, h6) { overflow-wrap: anywhere; }
.wp-block-button.is-style-outline > .wp-block-button__link {
    border: 2px solid currentColor;
    background: transparent;
    color: var(--wp--preset--color--pink);
    padding: 16px 38px;
}
.wp-element-button:hover, .wp-block-button__link:hover { filter: brightness(0.92); }
.wp-element-button:focus-visible, .wp-block-button__link:focus-visible {
    outline: 3px solid var(--wp--preset--color--black);
    outline-offset: 5px;
}
@media (max-width: 1100px) and (min-width: 782px) {
    :root {
        --wp--preset--font-size--xxx-large: 56px;
        --wp--preset--font-size--xx-large: 40px;
        --wp--preset--font-size--x-large: 28px;
    }
}
@media (max-width: 781px) {
    :root {
        --wp--preset--font-size--xxx-large: 40px;
        --wp--preset--font-size--xx-large: 30px;
        --wp--preset--font-size--x-large: 24px;
        --wp--preset--font-size--large: 20px;
        --wp--preset--font-size--medium: 20px;
        --wp--preset--font-size--button: 22px;
        --wp--preset--font-size--eyebrow: 14px;
    }
    body { line-height: 1.25; }
    .wp-element-button, .wp-block-button__link { padding: 16px 26px; }
    .wp-block-button.is-style-outline > .wp-block-button__link { padding: 14px 24px; }
}