/*
Theme Name: Spectra One Child Juliette
Theme URI: https://example.com/spectra-one-child-juliette
Description: Thème enfant de Spectra One avec la palette, les tailles et les styles personnalisés de Juliette.
Author: Juliette
Template: spectra-one
Version: 1.2.1
Requires at least: 6.1
Requires PHP: 7.4
Text Domain: spectra-one-child-juliette
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* -------------------------------------------------------------------------
   Design tokens — gutters, type & section rhythm (good-css)

   Source de vérité CSS Adage = CE FICHIER (pas le champ CSS des styles globaux).
   Les !important section / remap battent volontairement les paddings & hex
   inline Spectra/Gutenberg. On pourra les retirer quand l’éditeur utilisera
   uniquement les presets / spacing tokens.
--------------------------------------------------------------------------- */

:root {
	--adage-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--adage-gutter: clamp(1rem, 4vw, 1.5rem);
	--adage-section-space: clamp(2.5rem, 6vw, 5rem);
	--adage-section-space-tight: clamp(1.5rem, 4vw, 3rem);
	--adage-stack-gap: clamp(1rem, 2.5vw, 1.5rem);
	--adage-layout-stack: 56.25rem; /* 900px — tablette → 1 col */
	--adage-tracking: 0.0625em;
	--adage-hero-min-block: 80vh;
	--adage-accent-bar: 0.875rem; /* 14px */
	--adage-font-display-lg: clamp(2rem, 4vw + 1rem, 3.4375rem); /* ~55px */
	--adage-font-display-md: clamp(1.75rem, 3vw + 1rem, 2.5rem); /* ~40px */
}

/* Align root padding with the same gutter (theme.json also references this). */
.wp-site-blocks {
	padding-inline: var(--adage-gutter);
}

/* -------------------------------------------------------------------------
   Page sections — one gutter, one vertical rhythm
--------------------------------------------------------------------------- */

.wp-block-post-content > :is(.wp-block-group, section, header) {
	box-sizing: border-box;
	margin-block: 0 !important;
	padding-block: var(--adage-section-space) !important;
}

/* Non–full-bleed: rely on root gutter only (avoid double inset). */
.wp-block-post-content > :is(.wp-block-group, section, header):not(.alignfull) {
	padding-inline: 0 !important;
}

/* Full-bleed: re-apply the same gutter after WP alignfull negative margins. */
.wp-block-post-content > .alignfull {
	padding-inline: var(--adage-gutter) !important;
}

/* Hero (min-height / #accueil): slightly tighter block start. */
.wp-block-post-content > #accueil,
.wp-block-post-content > .wp-block-group[style*="min-height"] {
	padding-block-start: var(--adage-section-space-tight) !important;
	padding-block-end: var(--adage-section-space) !important;
}

/* Same-background neighbors — shorten the shared edge. */
.wp-block-post-content > .has-background + .has-background {
	padding-block-start: var(--adage-section-space-tight) !important;
}

/* Stack rhythm inside common flex columns */
.wp-block-post-content .is-layout-flex.wp-block-group,
.wp-block-post-content [class*="spectra"].is-layout-flex {
	gap: var(--adage-stack-gap);
}

.wp-block-post-content .is-layout-flow > :is(h1, h2, h3, h4, p, ul, ol, figure) {
	margin-block: 0;
}

.wp-block-post-content .is-layout-flow > :is(h1, h2, h3, h4, p, ul, ol, figure) + * {
	margin-block-start: var(--adage-stack-gap);
}

.wp-block-post-content .is-layout-flow > :is(h1, h2, h3) + * {
	margin-block-start: calc(var(--adage-stack-gap) * 0.65);
}

/* -------------------------------------------------------------------------
   Inline hex / px → palette & tokens
   (ne modifie pas le contenu Gutenberg ; remappe seulement le rendu)
--------------------------------------------------------------------------- */

:where(
	[style*="background-color:#f5f2e9"],
	[style*="background-color: #f5f2e9"],
	[style*="background-color:#f7f1e8"],
	[style*="background-color: #f7f1e8"]
) {
	background-color: var(--wp--preset--color--color-background-cream) !important;
}

:where(
	[style*="background-color:#f1e8dc"],
	[style*="background-color: #f1e8dc"]
) {
	background-color: var(--wp--preset--color--color-background-sand) !important;
}

:where(
	[style*="background-color:#2c2c2a"],
	[style*="background-color: #2c2c2a"]
) {
	background-color: var(--wp--preset--color--color-brand-olive) !important;
}

:where(
	[style*="--spectra-background-color: #f1e8dc"],
	[style*="--spectra-background-color:#f1e8dc"]
) {
	--spectra-background-color: var(--wp--preset--color--color-background-sand);
}

:where(
	[style*="--spectra-background-color: #2c2c2a"],
	[style*="--spectra-background-color:#2c2c2a"]
) {
	--spectra-background-color: var(--wp--preset--color--color-brand-olive);
}

:where(
	[style*="--spectra-text-color: #b3884b"],
	[style*="--spectra-text-color:#b3884b"]
) {
	--spectra-text-color: var(--wp--preset--color--color-brand-gold);
}

:where(
	[style*="color:#b3884b"],
	[style*="color: #b3884b"]
) {
	color: var(--wp--preset--color--color-brand-gold) !important;
}

:where(
	[style*="color:#2c2c2a"],
	[style*="color: #2c2c2a"]
) {
	color: var(--wp--preset--color--color-brand-olive) !important;
}

:where([style*="font-size:55px"], [style*="font-size: 55px"]) {
	font-size: var(--adage-font-display-lg) !important;
}

:where([style*="font-size:40px"], [style*="font-size: 40px"]) {
	font-size: var(--adage-font-display-md) !important;
}

:where([style*="letter-spacing:1px"], [style*="letter-spacing: 1px"]) {
	letter-spacing: var(--adage-tracking) !important;
}

:where([style*="min-height:80vh"], [style*="min-height: 80vh"]) {
	min-height: var(--adage-hero-min-block);
}

:where([style*="border-width:14px"], [style*="border-width: 14px"]) {
	border-width: var(--adage-accent-bar) !important;
}

/* -------------------------------------------------------------------------
   Tablet / mobile layout — one column below 900px
--------------------------------------------------------------------------- */

@media (width < 56.25rem) {
	.wp-block-post-content .is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	/* Prevent minmax(20rem) auto-fit from keeping 2 cramped columns. */
	.wp-block-post-content .is-layout-grid > * {
		grid-column: 1 / -1 !important;
	}
}

/* -------------------------------------------------------------------------
   Interaction / motion — good-css
--------------------------------------------------------------------------- */

:where(a, button, .wp-block-button__link, .wp-element-button):focus-visible {
	outline: max(2px, 0.08em) solid currentColor;
	outline-offset: 0.25em;
}

@media (prefers-reduced-motion: no-preference) {
	:where(.wp-block-button__link, .wp-element-button, button) {
		transition:
			transform 160ms var(--adage-ease-out, ease-out),
			background-color 160ms var(--adage-ease-out, ease-out),
			color 160ms var(--adage-ease-out, ease-out);
	}

	:where(.wp-block-button__link, .wp-element-button, button):active {
		transform: scale(0.97);
	}
}