/*
Theme Name: QuatreA
Theme URI: https://quatrea.fr
Description: Thème enfant de Twenty Twenty-Four pour le site de l'Association Amoureux d'Art en Auvergne (QuatreA). Socle simple et administrable depuis Gutenberg / Site Editor, préparant progressivement l'identité visuelle de QuatreA (couleurs, typographies, espacements) via theme.json.
Author: QuatreA
Template: twentytwentyfour
Requires at least: 6.4
Requires PHP: 7.0
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quatrea
*/

/*
Twenty Twenty-Four est un thème 100% bloc : la quasi-totalité du design
(couleurs, typographies, tailles, espacements, styles des blocs) est
pilotée par theme.json plutôt que par du CSS écrit à la main.

Avant d'ajouter une règle ici, vérifier si elle peut être obtenue via
theme.json (settings / styles) ou via les réglages de blocs natifs.

Les deux règles ci-dessous n'ont pas d'équivalent natif :
- le header sticky (le support "position" des blocs dépend d'un identifiant
  généré par l'éditeur, peu fiable dans un template écrit à la main) ;
- le seuil de bascule du menu mobile, qui est fixé en dur à 600px dans le
  bloc Navigation de WordPress et ne peut être modifié que par CSS.
*/

/* Header en position sticky, toujours visible en haut de page au scroll. */
header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.img-article img{
	object-fit:contain !important;
}

/*
Seuil du menu mobile du bloc Navigation : 880px au lieu des 600px imposés
par défaut par WordPress. Sous 880px, le menu se replie en icône + panneau
plein écran (comportement natif "overlayMenu: mobile").
Technique documentée par le cœur de WordPress / Gutenberg pour ce cas précis.
*/
@media (min-width: 880px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: none !important;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: block !important;
	}
}
@media (min-width: 600px) {
	.wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}


/*
Menu du header (barre horizontale desktop uniquement) : chaque lien occupe
toute la hauteur du header (marge négative verticale égale au padding du
header, compensée par un padding identique pour que le texte ne bouge pas)
et reçoit un padding horizontal. Au survol / focus, les couleurs s'inversent.

Important : le panneau du menu mobile (".is-menu-open") réutilise la même
structure HTML que la barre horizontale. On exclut donc explicitement ce
contexte avec ":not(.is-menu-open)", sinon ces marges négatives pensées pour
la barre desktop viennent aussi écraser l'espacement des liens dans le
panneau mobile ouvert.
*/
.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content {
	margin-top: calc(var(--wp--preset--spacing--40) * -1);
	margin-bottom: calc(var(--wp--preset--spacing--40) * -1);
	padding-top: var(--wp--preset--spacing--40);
	padding-bottom: var(--wp--preset--spacing--40);
	padding-left: var(--wp--preset--spacing--30);
	padding-right: var(--wp--preset--spacing--30);
}
.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:hover,
.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--bleu-nuit);
	background-color: var(--wp--preset--color--blanc-casse);
	text-decoration:none;
}

main.accueil {
	margin-block-start:0;
}

.shadow{
	text-shadow: 2px 2px 2px rgba(33, 31, 29, 1);
}

/* Gap horizontal nul uniquement sur la barre desktop (voir commentaire
ci-dessus) : dans le panneau mobile, on veut au contraire un espacement
vertical confortable entre les liens. */
.wp-block-navigation__responsive-container:not(.is-menu-open) ul{
	gap:0;
}

/*
Menu mobile ouvert : le bloc Navigation étant réglé en "justifyContent:
right" pour coller le menu à droite sur desktop, WordPress réutilise par
défaut ce même réglage pour aligner le contenu du panneau mobile (via la
variable --navigation-layout-justification-setting). Résultat sans ce
correctif : les liens du menu mobile restent collés en haut à droite au
lieu d'être centrés dans l'écran. On force donc le centrage et un espace
vertical confortable ici, propre au panneau mobile.
*/
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	--navigation-layout-justification-setting: center;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: var(--wp--preset--spacing--40);
}
/*
Sous-menus du menu principal (desktop).

Le bloc Navigation gère nativement l'ouverture au survol / au focus, donc
ce n'est pas ce mécanisme qui pose problème. Le bug venait d'ailleurs :

1) la règle plus haut (« chaque lien occupe toute la hauteur du header »)
   cible tous les `.wp-block-navigation-item__content`, y compris ceux des
   sous-menus. Ses marges négatives, pensées uniquement pour la barre
   horizontale, faisaient déborder et se chevaucher les liens du sous-menu
   au lieu de les empiler proprement.
2) le sous-menu n'avait ensuite aucun habillage propre (fond, largeur,
   espacement), donc même correctement positionné il restait peu lisible.

On corrige donc les deux : on annule le hack pour les liens de sous-menu,
puis on habille le panneau qui s'affiche sous l'élément parent.
*/

/* 1) Annule le hack « pleine hauteur » à l'intérieur d'un sous-menu.
Sélecteur plus spécifique que la règle d'origine pour être sûr de primer. */
.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	margin-top: 0;
	margin-bottom: 0;
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
	white-space: nowrap;
}

/* 2) Habillage du panneau de sous-menu, affiché sous son parent au survol
ou au focus. Limité au desktop (même seuil que le reste du header) et
exclu du panneau mobile plein écran, qui a sa propre logique d'accordéon. */
@media (min-width: 880px) {
	.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation-item.has-child {
		position: relative;
	}
	.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
		top: 100%;
		left: 0;
		margin-top: 16px;
		min-width: 240px;
		padding: 0;
		background-color: var(--wp--preset--color--blanc-casse);
		color: var(--wp--preset--color--bleu-nuit);
		border: 1px solid rgba(33, 31, 29, 0.12);
		border-radius: 4px;
		box-shadow: 0 4px 16px rgba(33, 31, 29, 0.12);
	}
	.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.site-header-sticky .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background-color: var(--wp--preset--color--blanc-casse);
		color: var(--wp--preset--color--bleu-nuit);
		padding-left: calc(var(--wp--preset--spacing--40) - 3px);
		text-decoration: none;
	}
}

@media (max-width: 879px) {
	.wp-block-navigation__responsive-container ul,
	.wp-block-navigation__responsive-container ul li,
	.wp-block-navigation__responsive-container ul li a,
	.wp-block-navigation__responsive-container ul li a span	{
		width:100%;
	}

	.wp-block-navigation__responsive-container ul li a{
		text-align:left;
	}
	.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .wp-block-navigation__container{
		gap:0;
	}
	.wp-block-navigation__responsive-container ul li a {
		display: block;
        padding: 10px 0 !important;
        border-bottom: 1px solid var(--wp--preset--color--blanc-casse);
	}
	
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus {
		outline: 0;
		outline-offset: 0;
	}
	/*
	Sous-menus repliés par défaut dans le panneau mobile : ouverts uniquement
	lorsque le lien parent a été cliqué (voir assets/js/mobile-menu.js, qui
	ajoute/retire la classe "quatrea-submenu-open" sur l'item parent avec
	preventDefault() pour empêcher le lien de naviguer).
	*/
	.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .has-child .wp-block-navigation__submenu-container{
		width:100%;
		padding:0;
		display:none;
	}
	.wp-block-navigation__responsive-container.is-menu-open:where(:not(.disable-default-overlay)) .wp-block-navigation__responsive-container-content .has-child.quatrea-submenu-open .wp-block-navigation__submenu-container{
		display:block;
	}

	/*
	Chevron indiquant qu'un item a des enfants dans le panneau mobile.
	On masque l'icône native du bloc Navigation (dont le marquage/comportement
	diffère entre la barre desktop et l'overlay mobile) et on la remplace par
	un chevron CSS pur, positionné sur le lien parent lui-même. Il pivote de
	"vers le bas" à "vers le haut" quand quatrea-submenu-open est présent
	(voir assets/js/mobile-menu.js).
	*/
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
		display: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		position: relative;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 4px;
		width: 9px;
		height: 9px;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: translateY(-70%) rotate(45deg);
		transition: transform 0.2s ease;
		pointer-events: none;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child.quatrea-submenu-open > .wp-block-navigation-item__content::after {
		transform: translateY(-30%) rotate(225deg);
	}
	
	:root :where(.wp-block-navigation a:where(:not(.wp-element-button)):hover){
		text-decoration:none;
	}
	.wp-block-navigation__submenu-container span.wp-block-navigation-item__label{
		padding-left:5%;
	}
	.img-article img{
		height:300px !important;
	}
}