/*
Theme Name: Dupo
Description: Thème enfant de Twenty Twenty-Five pour le site vitrine de Dupo, rôtisserie asiatique.
Template: twentytwentyfive
Version: 0.2.0
Text Domain: dupo
*/

/*
 * Mise en page du thème : en-tête, pied de page, sections de l'accueil. Les blocs du plugin dupo-core ont leurs propres
 * feuilles (carte, horaires, actions...). Couleurs et polices : variables de theme.json uniquement.
 * Point de bascule : 782 px (barre mobile en dessous, bouton Appeler de l'en-tête au-dessus).
 */

/* -- Contenu principal ------------------------------------------------------------------------------------------------ */
.dupo-principal {
	padding-block: 1.5rem 3rem;
}

.dupo-principal--accueil {
	padding-block-start: 0.5rem;
}

/* -- En-tête : logo et langues, navigation dessous (mobile) ; logo, navigation, langues, Appeler (desktop) ------------ */
.dupo-entete {
	padding-block: 0.75rem 0.5rem;
}

.dupo-entete .dupo-entete__rangee {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"logo langues"
		"nav nav";
	align-items: center;
	gap: 0.25rem 1rem;
}

.dupo-entete .dupo-entete__rangee > * {
	margin: 0;
}

.dupo-entete .dupo-entete__menus {
	display: contents;
}

.dupo-entete .dupo-entete__logo {
	grid-area: logo;
}

.dupo-entete .dupo-entete__logo.wp-block-site-logo img {
	display: block;
	width: auto;
	/* 72 px de haut : 48 px de large au moins (cible tactile du lien vers l'accueil). */
	height: 72px;
}

.dupo-entete .dupo-navigation {
	grid-area: nav;
	min-width: 0;
}

.dupo-entete .dupo-langues {
	grid-area: langues;
	justify-self: end;
}

/* La barre mobile n'est qu'un conteneur : son bloc Actions est fixé en bas de l'écran (feuille du bloc). */
.dupo-barre-mobile {
	display: contents;
}

/* Dans l'éditeur, la barre n'est pas fixée : elle occupe une ligne entière de l'en-tête. */
.dupo-entete .dupo-actions--barre {
	grid-column: 1 / -1;
}

.dupo-entete .dupo-entete__appeler {
	display: none;
	grid-area: appeler;
}

@media (min-width: 782px) {
	.dupo-entete {
		padding-block: 1rem;
	}

	.dupo-entete .dupo-entete__rangee {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "logo menus appeler";
		column-gap: 2rem;
	}

	.dupo-entete .dupo-entete__menus {
		display: flex;
		grid-area: menus;
		flex-wrap: wrap;
		justify-content: flex-end;
		align-items: center;
		gap: 0 2rem;
	}

	.dupo-entete .dupo-entete__logo.wp-block-site-logo img {
		height: 112px;
	}

	.dupo-entete .dupo-entete__appeler {
		display: flex;
	}
}

/* -- Sélecteur de langue (Polylang, dont la feuille donne au bloc toute la largeur et une marge aux liens) ------------ */
.dupo-langues.pll-switcher {
	width: auto;
}

.dupo-langues.pll-switcher ul {
	gap: 0 1rem;
}

.dupo-langues.pll-switcher a {
	box-sizing: border-box;
	min-height: 48px;
	min-width: 48px;
	padding: 0;
	color: var(--wp--preset--color--encre);
	font-weight: 600;
	text-decoration: none;
}

.dupo-langues.pll-switcher .current-lang a,
.dupo-langues.pll-switcher a:hover {
	color: var(--wp--preset--color--rouge);
	text-decoration: underline;
	/* !important : le thème parent impose une épaisseur de 1px à tous les liens. */
	text-decoration-thickness: 3px !important;
	text-underline-offset: 0.3em;
}

/* -- Sections de l'accueil --------------------------------------------------------------------------------------------- */
.dupo-section {
	margin-block-start: 3rem;
}

.dupo-section > h2:first-child,
.dupo-section > .dupo-carte:first-child > .dupo-carte__titre:first-child {
	margin-block-start: 0;
}

@media (min-width: 782px) {
	.dupo-section {
		margin-block-start: 5rem;
	}
}

/* Accueil : bloc des horaires centré dans la page, à la largeur de son contenu ; le texte reste aligné à gauche. */
.dupo-principal--accueil > .entry-content > .dupo-horaires {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* Le cadre du statut (Ouvert ou Fermé maintenant) est centré dans le bloc ; les lignes d'horaires restent à gauche. */
.dupo-principal--accueil > .entry-content > .dupo-horaires .dupo-horaires__statut {
	margin-inline: auto;
}

/* Accueil : hero centré (titre et boutons). La photo garde sa colonne à droite sur grand écran. */
.dupo-principal--accueil .dupo-hero__titre {
	text-align: center;
}

.dupo-principal--accueil .dupo-hero__actions {
	justify-content: center;
}

/* Les trois boutons du hero ont la largeur du plus large (Voir la carte). Mobile : largeur minimale égale à la sienne
   (9,5 rem) ; ordinateur : colonnes de largeur égale, calées sur le bouton le plus large. */
.dupo-principal--accueil .dupo-hero__actions .dupo-actions__lien {
	min-width: 9.5rem;
}

@media (min-width: 782px) {
	.dupo-principal--accueil .dupo-hero__actions {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 1fr;
		width: fit-content;
		margin-inline: auto;
	}
}

/* Accueil, ordinateur : les spécialités sur 3 colonnes (4 par défaut dans la feuille du bloc Carte). */
@media (min-width: 782px) {
	.dupo-principal--accueil .dupo-specialites .dupo-cartes {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Accueil : Riz + rôtisserie et Formules centrés dans la page, titres compris. Les plats (nom, prix, chinois, étiquette)
   restent alignés à gauche. */
.dupo-principal--accueil .dupo-formules {
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
}

.dupo-principal--accueil .dupo-formules .dupo-carte__titre {
	text-align: center;
}

/* Accueil : encadré des commandes spéciales centré, contenu compris. width: 100 % le garde à pleine largeur (dans la
   limite de max-width) quand le contenu passe en colonne flexible sous 782 px. */
.dupo-principal--accueil .dupo-encart {
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-inline: auto;
	text-align: center;
}

.dupo-principal--accueil .dupo-encart__plats {
	padding-inline-start: 0;
	list-style-position: inside;
}

.dupo-principal--accueil .dupo-encart .dupo-actions {
	justify-content: center;
}

/*
 * Accueil sous 782 px : les horaires (statut ouvert ou fermé) passent avant le hero, pour être lus sans défiler au-dessus de
 * la barre fixe, qui porte Appeler et Itinéraire (critère de la spec, mesuré avec la photo 3:2). Seul l'ordre affiché change,
 * pas celui du document ; rien ne change à partir de 782 px. La mise en page définitive viendra des maquettes (tâche 4).
 */
@media (max-width: 781.98px) {
	.dupo-principal--accueil > .entry-content {
		display: flex;
		flex-direction: column;
	}

	.dupo-principal--accueil > .entry-content > .dupo-horaires {
		order: -1;
		margin-block-start: 0;
	}

	.dupo-principal--accueil > .entry-content > .dupo-hero {
		margin-block-start: var(--wp--style--block-gap);
	}

	/* En colonne flexible, les marges ne fusionnent plus : une section vide (sans plat) ne doit pas ajouter d'espace. */
	.dupo-principal--accueil > .entry-content > :not(:has(*)) {
		margin-block-start: 0;
	}
}

/* Hero : photo 3:2, titre principal, actions. Sur grand écran, la photo passe à droite du titre (s'il y en a une). */
.dupo-hero {
	display: grid;
	gap: 1.25rem;
}

.dupo-hero > * {
	margin: 0;
}

.dupo-hero .dupo-hero__image img {
	display: block;
	width: 100%;
}

.dupo-hero .dupo-hero__titre {
	border-bottom-width: 6px;
	font-size: clamp(2.5rem, 11vw, 4.5rem);
	letter-spacing: 0.02em;
	line-height: 0.95;
	text-wrap: balance;
}

@media (min-width: 782px) {
	.dupo-hero:has(> .dupo-hero__image) {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: 1fr auto;
		column-gap: 3rem;
	}

	.dupo-hero > .dupo-hero__image {
		grid-column: 2;
		grid-row: 1 / span 2;
	}

	/* Demi-largeur : taille réglée pour que « Bussy-Saint-Georges » tienne sur une ligne. */
	.dupo-hero:has(> .dupo-hero__image) > .dupo-hero__titre {
		grid-column: 1;
		grid-row: 1;
		align-self: end;
		font-size: clamp(2.5rem, 4vw, 4rem);
	}

	.dupo-hero:has(> .dupo-hero__image) > .dupo-hero__actions {
		grid-column: 1;
		grid-row: 2;
	}
}

/* Commandes spéciales : encadré rouge, délai en étiquette. */
.dupo-encart {
	box-sizing: border-box;
	padding: 1.25rem;
	border: 3px solid var(--wp--preset--color--rouge);
	background: var(--wp--preset--color--blanc);
}

.dupo-encart > * {
	margin-block: 0;
}

.dupo-encart > * + * {
	margin-block-start: 1rem;
}

.dupo-delai {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	background: var(--wp--preset--color--rouge);
	color: var(--wp--preset--color--blanc);
	font-family: var(--wp--preset--font-family--bebas-neue);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dupo-encart__plats {
	padding-inline-start: 1.25rem;
	font-weight: 600;
}

/* Avis : le nombre d'avis en grand, lien vers la fiche Google. */
.dupo-avis .wp-block-button__link {
	font-size: var(--wp--preset--font-size--large);
}

/* Bouton du cœur : 48 px de haut au minimum. */
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-height: 48px;
}

/* -- Pied de page ------------------------------------------------------------------------------------------------------- */
.dupo-pied {
	margin-block-start: 2rem;
	padding-block: 2.5rem;
	border-top: 3px solid var(--wp--preset--color--rouge);
}

.dupo-pied__colonne > * {
	margin-block: 0;
}

.dupo-pied__colonne > * + * {
	margin-block-start: 1rem;
}

.dupo-pied__legal a {
	font-size: var(--wp--preset--font-size--medium);
}