/*
Theme Name: principal-ssd
Theme URI: 

Author: samuel
Author URI: 
Description: Thème principal de ssd.fr
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.19.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: principal-ssd

*/
body {
	font-size: 16px;
}
/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}
strong,b {
	font-weight: 700;
}
/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/*
 * En-tête dans le flux par défaut : rien n'est jamais masqué. Quand l'en-tête porte un
 * sous-menu, assets/js/sous-menu.js le fait flotter au-dessus du premier bloc (dont le fond
 * passe derrière la barre) et ne donne à ce bloc que la marge qui lui manque. Ne pas poser
 * de marge négative fixe dans un thème enfant. z-index : barre et menus déroulants passent
 * au-dessus du contenu.
 */
header.wp-block-template-part {
	position: relative;
	z-index: 100;
	margin-bottom: 0;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
} 
.menu-newline a {
    white-space: normal; /* ou pre-wrap */
    max-width: 150px;    /* forcer le retour auto */
}

/*
 * En-tête d'article (templates/single.html, patterns/header-article-page-de-detail.php) :
 * colonne de texte à 60 %, colonne réservée à l'image mise en avant à 40 %.
 * Le bloc impose aspect-ratio:1 en style en ligne : le carré ne suit pas la hauteur du
 * texte (vide sous l'image entre 782 et 1200 px) et devient démesuré une fois empilé.
 * Ciblé par la structure plutôt que par une classe, pour valoir aussi quand le modèle
 * est enregistré en base depuis l'éditeur de site.
 */

/*
 * Le groupe parent annule la marge globale (padding 0) : sous 1200 px + marges, les
 * colonnes prenaient toute la largeur de l'écran et débordaient du bloc de contenu.
 * Vaut aussi sans image mise en avant : la colonne de droite est alors rendue vide.
 * (Pas de :has() dans un :has() : CSS l'interdit et la règle entière serait ignorée.)
 */
.wp-block-columns:has(> .wp-block-column .wp-block-post-title):is(:has(> .wp-block-column:last-child:empty), :has(> .wp-block-column:last-child > .wp-block-post-featured-image:only-child)) {
	max-width: min(var(--wp--style--global--content-size), calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)));
	margin-left: auto !important;
	margin-right: auto !important;
}
.wp-block-columns > .wp-block-column:has(> .wp-block-post-featured-image:only-child) > .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Colonnes côte à côte : l'image remplit toute la hauteur de la colonne de texte. */
@media (min-width: 782px) {
	.wp-block-columns > .wp-block-column:has(> .wp-block-post-featured-image:only-child) {
		position: relative;
		min-height: 20rem;
	}

	.wp-block-columns > .wp-block-column:has(> .wp-block-post-featured-image:only-child) > .wp-block-post-featured-image {
		position: absolute;
		inset: 0;
	}

	.wp-block-columns > .wp-block-column:has(> .wp-block-post-featured-image:only-child) > .wp-block-post-featured-image img {
		aspect-ratio: auto !important;
	}

	/*
	 * Texte (fil d'Ariane, titre, chapo) centré verticalement : la colonne (spacing-60 en
	 * haut, rien en bas) et son groupe (30 / 20 px) laissaient 120 à 140 px au-dessus et
	 * 20 px dessous. Marges symétriques ici, centrage quand l'image impose sa hauteur.
	 */
	.wp-block-columns:has(> .wp-block-column .wp-block-post-title):is(:has(> .wp-block-column:last-child:empty), :has(> .wp-block-column:last-child > .wp-block-post-featured-image:only-child)) > .wp-block-column:first-child {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: var(--wp--preset--spacing--50) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
	}

	.wp-block-columns:has(> .wp-block-column .wp-block-post-title):is(:has(> .wp-block-column:last-child:empty), :has(> .wp-block-column:last-child > .wp-block-post-featured-image:only-child)) > .wp-block-column:first-child > .wp-block-group {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	/* Marge par défaut de la liste du fil d'Ariane : 16 px de plus en haut. */
	.wp-block-columns:has(> .wp-block-column .wp-block-post-title):is(:has(> .wp-block-column:last-child:empty), :has(> .wp-block-column:last-child > .wp-block-post-featured-image:only-child)) > .wp-block-column:first-child > .wp-block-group > nav:first-child .fil-ariane {
		margin-top: 0;
	}
}

/*
 * Cadre du contenu sous l'en-tête : même largeur que les colonnes de l'en-tête.
 * Le modèle du parent garde la marge globale sur le groupe « contenu », mais les modèles
 * de /mdaa/ retouchés en base (index, single, page) la mettent à 0 : le cadre coloré
 * prenait 1200 px pleins, soit 140 px de plus que l'en-tête vers 1300 px d'écran, et
 * toute la largeur en mobile. On ramène les deux cas à la règle de l'en-tête.
 */
.wp-block-group:has(> .wp-block-columns > .wp-block-column .wp-block-post-title) + .wp-block-group:has(> .wp-block-group > .wp-block-post-content) {
	padding-left: 0 !important;
	padding-right: 0 !important;
}
.wp-block-group:has(> .wp-block-columns > .wp-block-column .wp-block-post-title) + .wp-block-group > .wp-block-group:has(> .wp-block-post-content) {
	max-width: min(var(--wp--style--global--content-size), calc(100% - var(--wp--style--root--padding-left) - var(--wp--style--root--padding-right)));
}

/* Colonnes empilées : bandeau au lieu d'un carré de la largeur de l'écran. */
@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column:has(> .wp-block-post-featured-image:only-child) > .wp-block-post-featured-image img {
		aspect-ratio: 3 / 2 !important;
	}
}