/*
Theme Name: NVAQ
Theme URI: https://avironnouvelleaquitaine.fr
Description: Thème de blocs de la Ligue Nouvelle-Aquitaine d'Aviron. Couleurs, polices et mises en forme se règlent depuis Apparence > Éditeur ; le menu depuis Apparence > Menus.
Author: Ligue Nouvelle-Aquitaine d'Aviron
Version: 2.4.0
Requires at least: 6.7
Tested up to: 7.1
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nvaq
*/

/* ===========================================================================
 *  Cette feuille est volontairement minuscule.
 * ===========================================================================
 *
 *  Tout le reste de l'apparence du site se règle dans l'interface :
 *
 *    - couleurs, polices, tailles de texte -> Apparence > Éditeur > Styles
 *    - fond, marges, bordures d'un bloc    -> panneau de droite dans
 *                                             l'éditeur, bloc sélectionné
 *    - entrées du menu                     -> Apparence > Menus
 *
 *  Il ne reste ici que deux choses qu'aucun réglage de bloc ne sait
 *  exprimer : la disposition du menu, et la suppression d'un blanc sous le
 *  contenu.
 *
 *  Les couleurs ci-dessous ne sont pas écrites en dur : ce sont les
 *  variables de la palette du thème. Changer « Bleu Ligue » dans Styles
 *  change aussi le menu, sans toucher à ce fichier.
 *
 *  Cette feuille est chargée à la fois sur le site et dans l'éditeur, pour
 *  que ce que vous construisez ressemble à ce qui sera publié.
 * ======================================================================== */

/* --- Le menu du site ---------------------------------------------------- */

.nvaq-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.6rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nvaq-menu a {
	color: var(--wp--preset--color--contraste);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.nvaq-menu a:hover,
.nvaq-menu a:focus-visible,
.nvaq-menu .current-menu-item > a,
.nvaq-menu .current-menu-ancestor > a {
	color: var(--wp--preset--color--primaire);
}

/* Un sous-menu : replié, il se déploie au survol et au clavier. */

.nvaq-menu .menu-item-has-children {
	position: relative;
}

.nvaq-menu .sub-menu {
	position: absolute;
	top: 100%;
	z-index: 20;
	display: none;
	min-width: 13rem;
	margin: 0.6rem 0 0;
	padding: 0.8rem 1.1rem;
	list-style: none;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--base-2);
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba(21, 25, 44, 0.12);
}

/*
 * Le sous-menu est décalé de 0,6 rem vers le bas, pour ne pas coller au mot.
 * Sans précaution, la souris traverse cet espace vide et le survol se perd :
 * le menu se referme avant d'être atteint. Ce rectangle invisible comble le
 * trou. Il n'existe que pendant le survol, donc il ne gêne jamais les clics
 * sur le reste de la page.
 */

.nvaq-menu .menu-item-has-children::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 19;
	display: none;
	width: 13rem;
	height: 0.8rem;
}

.nvaq-menu .menu-item-has-children:hover::after,
.nvaq-menu .menu-item-has-children:focus-within::after {
	display: block;
}

.nvaq-menu .menu-item-has-children:hover > .sub-menu,
.nvaq-menu .menu-item-has-children:focus-within > .sub-menu {
	display: grid;
	gap: 0.55rem;
}

/* Message visible des seuls administrateurs tant qu'aucun menu n'est assigné. */

.nvaq-menu-absent {
	margin: 0;
	color: var(--wp--preset--color--contraste-2);
	font-size: var(--wp--preset--font-size--small);
}

/* En colonne : disposition choisie dans le panneau « Styles » du bloc Menu. */

.wp-block-nvaq-menu.is-style-vertical .nvaq-menu {
	flex-direction: column;
	gap: 0.55rem;
}

.wp-block-nvaq-menu.is-style-vertical .nvaq-menu a {
	text-transform: none;
	letter-spacing: 0;
}

/* --- Le blanc entre le contenu et le pied de page ----------------------- */

/*
 * WordPress met un écart entre les grands blocs d'une page. Entre le dernier
 * bloc du contenu et le pied de page, cet écart se voit comme une bande
 * blanche. Ces deux lignes la suppriment.
 */

.wp-site-blocks > footer {
	margin-block-start: 0;
}