/*
Theme Name: Magasin Général d'Hochlag
Theme URI: https://lemagasingeneraldhochlag.ca
Author: Le Magasin Général d'Hochlag
Author URI: https://lemagasingeneraldhochlag.ca
Description: Thème WordPress natif par blocs (Full Site Editing) du Magasin Général d'Hochlag — épicerie, Joe Café et bar laitier dans Hochelaga. Palette et typographie tirées du design system « Joe le ranchero ». Aucun constructeur de pages : tout est modifiable dans l'éditeur Gutenberg.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 0.1.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mgh
Tags: full-site-editing, block-patterns, blog, e-commerce, one-column, custom-colors, custom-menu, editor-style
*/

/* ============================================================
   MGH — CSS minimal.
   Presque tout vit dans theme.json. On ne met ici que ce que
   theme.json ne sait pas exprimer : états de survol, animation
   d'enfoncement des boutons, et les 4 styles de blocs maison.
   Objectif performance : ce fichier reste sous 4 Ko.
   ============================================================ */

/* --- Le bouton « autocollant » s'enfonce dans le papier au clic --- */
.wp-block-button__link {
	transition:
		transform 120ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 120ms cubic-bezier(0.2, 0.7, 0.3, 1),
		background-color 120ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-block-button__link:active {
	transform: translate(4px, 4px);
	box-shadow: none !important;
}

/* Bouton secondaire (contour) : fond crème, texte encre */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: var(--wp--preset--color--blanc);
	color: var(--wp--preset--color--encre);
	border-color: var(--wp--preset--color--encre);
	box-shadow: var(--wp--preset--shadow--autocollant);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--pin-pale);
	color: var(--wp--preset--color--encre);
}

/* --- Navigation : pastille verte au survol --- */
.wp-block-navigation .wp-block-navigation-item__content {
	padding: 0.5rem 0.875rem;
	border-radius: 999px;
	transition: background-color 120ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__content {
	background-color: var(--wp--preset--color--pin-pale);
	color: var(--wp--preset--color--pin);
}

/* ============================================================
   STYLES DE BLOCS MAISON
   (visibles dans l'éditeur, onglet « Styles » d'un bloc)
   ============================================================ */

/* Carte autocollant — contour d'encre + ombre dure, se soulève au survol */
.is-style-mgh-carte {
	background-color: var(--wp--preset--color--blanc);
	border: 2.5px solid var(--wp--preset--color--encre);
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--autocollant);
	padding: var(--wp--preset--spacing--40);
	transition:
		transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.is-style-mgh-carte:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--encre);
}

/* Carte autocollant verte — même carte, fond vert pin, texte crème */
.is-style-mgh-carte-pin {
	background-color: var(--wp--preset--color--pin);
	color: var(--wp--preset--color--papier);
	border: 2.5px solid var(--wp--preset--color--encre);
	border-radius: 22px;
	box-shadow: var(--wp--preset--shadow--autocollant);
	padding: var(--wp--preset--spacing--40);
	transition:
		transform 200ms cubic-bezier(0.2, 0.7, 0.3, 1),
		box-shadow 200ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

.is-style-mgh-carte-pin:hover {
	transform: translate(-2px, -2px);
	box-shadow: 6px 6px 0 var(--wp--preset--color--encre);
}

.is-style-mgh-carte-pin :where(h1, h2, h3, h4, h5, h6) {
	color: var(--wp--preset--color--papier);
}

/* Titre de carte de menu — filet d'encre sous le titre */
.is-style-mgh-titre-menu {
	border-bottom: 2.5px solid var(--wp--preset--color--encre);
	padding-bottom: 0.75rem;
	color: var(--wp--preset--color--pin);
}

.is-style-mgh-carte-pin .is-style-mgh-titre-menu {
	border-bottom-color: rgba(251, 246, 236, 0.3);
}

/* Bande de section — filets d'encre en haut et en bas, pleine largeur */
.is-style-mgh-bande {
	border-top: 2.5px solid var(--wp--preset--color--encre);
	border-bottom: 2.5px solid var(--wp--preset--color--encre);
}

/* Surtitre — petit label en majuscules précédé d'un tiret tomate */
.is-style-mgh-surtitre {
	font-family: var(--wp--preset--font-family--texte);
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--tomate);
	line-height: 1.4;
}

.is-style-mgh-surtitre::before {
	content: "";
	display: inline-block;
	width: 1.25rem;
	height: 2px;
	margin-right: 0.6rem;
	vertical-align: middle;
	background-color: currentColor;
}

/* Titre script « Joe » — Pacifico, jamais en majuscules */
.is-style-mgh-script {
	font-family: var(--wp--preset--font-family--script);
	text-transform: none;
	letter-spacing: 0;
	line-height: 1.15;
	color: var(--wp--preset--color--pin);
}

/* Badge / pastille — pour les étiquettes « Local », « Saveur du mois » */
.is-style-mgh-badge {
	display: inline-block;
	background-color: var(--wp--preset--color--ambre);
	color: var(--wp--preset--color--encre);
	border: 2px solid var(--wp--preset--color--encre);
	border-radius: 999px;
	padding: 0.3rem 0.9rem;
	font-size: var(--wp--preset--font-size--petit);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	line-height: 1.4;
}

/* --- Accessibilité : anneau de focus visible partout --- */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 3px solid var(--wp--preset--color--ambre);
	outline-offset: 2px;
}

/* --- Respect de « réduire les animations » (réglage système) --- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}