/*
Theme Name: Bibliothèque numérique
Theme URI: https://bibliothequenumerique.fr/
Author: BiblioSUD
Description: Thème du catalogue bibliothequenumerique.fr. Sobre, éditorial, construit en blocs natifs : la fiche bristol comme motif, Spectral et Atkinson Hyperlegible, une encre et un rouge de rubrique.
Version: 0.4.0
Requires at least: 7.0
Tested up to: 7.1
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bn
*/

/* Mise en page générale --------------------------------------------------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	font-kerning: normal;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--rubric);
	outline-offset: 3px;
	border-radius: 2px;
}

/* Sur le bandeau encre, le rouge de rubrique ne se distingue pas du fond
   (2,3:1) : le contour passe au papier (15:1). */
.bn-band-ink :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--wp--preset--color--paper);
}
.bn-band-ink :where(input[type="checkbox"], input[type="radio"]):focus-visible {
	box-shadow: 0 0 0 2px var(--wp--preset--color--ink);
}

/* Identifiants et adresses longues sans espace : coupés plutôt que de faire
   défiler la page (zoom à 400 %, petits écrans). */
code {
	overflow-wrap: anywhere;
}
pre {
	overflow-x: auto;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

::selection {
	background: var(--wp--preset--color--rule);
}

/* En-tête ------------------------------------------------------------------ */

.bn-header {
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.bn-header .bn-header__bar {
	min-height: 72px;
	padding-block: 12px;
}
.bn-brand {
	gap: 12px;
	min-width: 0;
	text-decoration: none;
}
.bn-brand svg {
	flex: none;
	display: block;
}
.bn-header .wp-block-navigation a {
	padding: 12px 0;
}
.bn-header .wp-block-navigation a[aria-current] {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}
/* Sur tablette, la navigation passe sur deux lignes sans grand écart entre elles. */
.bn-header .wp-block-navigation .wp-block-navigation__container {
	row-gap: 0;
}
.bn-header__space {
	margin: 0;
}
/* Rangé à droite, même seul sur sa ligne. */
.bn-header .bn-header__sub > .bn-header__space {
	margin-inline-start: auto;
}
.bn-header__space a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.bn-header__space a:hover,
.bn-header__space a[aria-current] {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.bn-header .wp-block-navigation__responsive-container-open,
.bn-header .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
	align-items: center;
}
.bn-header .wp-block-navigation__responsive-container-open svg,
.bn-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

/* Pages par public et espace des référents, sous la barre principale : la
   barre garde ainsi la marque et la navigation sur une ligne en bureau. */
.bn-header > .bn-header__sub {
	margin-block-start: 0;
	padding-block: 0 8px;
	align-items: center;
}
.bn-audiences {
	font-size: var(--wp--preset--font-size--small);
	align-items: center;
}
.bn-audiences__label {
	margin: 0;
	color: var(--wp--preset--color--muted);
}
.bn-audiences__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bn-audiences__list a {
	display: inline-block;
	line-height: 44px;
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--line);
	text-underline-offset: 4px;
}
.bn-audiences__list a:hover {
	color: var(--wp--preset--color--rubric);
	text-decoration-color: currentColor;
}
.bn-audiences__list a[aria-current] {
	font-weight: 700;
	text-decoration-color: currentColor;
	text-decoration-thickness: 2px;
}

@media (max-width: 599px) {
	.bn-header .bn-header__bar {
		flex-wrap: nowrap;
	}
	.bn-header .bn-header__bar {
		min-height: 64px;
		gap: 12px;
	}
	.bn-header .wp-block-site-title {
		font-size: 1.125rem;
	}
	/* Sur téléphone, l'espace des référents est dans le pied de page. */
	.bn-header__space {
		display: none;
	}
	.bn-audiences__label {
		display: none;
	}
	.bn-audiences__list {
		gap: 0 16px;
	}
	/* Libellés courts : « réseau culturel », « CDI collège ». */
	.bn-audiences__more {
		display: none;
	}
	.bn-audiences__list a::first-letter {
		text-transform: uppercase;
	}
}

/* Accueil ------------------------------------------------------------------ */

.bn-hero .bn-hero__title {
	max-width: 13em;
	font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.75rem);
}

/* Portes par public, sous la recherche : visibles sans défiler. */
.bn-doors {
	margin-top: 28px;
	align-items: center;
}
.bn-doors__label {
	margin: 0;
	font-weight: 700;
}
.bn-doors__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bn-doors__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: 4px;
	background: var(--wp--preset--color--white);
	font-weight: 700;
	text-decoration: none;
}
.bn-doors__list a:hover {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}
.bn-lead {
	font-size: 1.1875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--muted);
	max-width: 34em;
}
.bn-examples,
.bn-caption {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.bn-band-white {
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.bn-band-ink a:not(.wp-element-button) {
	color: var(--wp--preset--color--paper);
}
.bn-band-ink .wp-block-list {
	line-height: 1.9;
}
.bn-band-ink h3 {
	font-style: italic;
	font-weight: 400;
	font-size: 1.375rem;
	color: var(--wp--preset--color--night-muted);
}
.bn-section-head {
	align-items: baseline !important;
}

.wp-block-button.is-style-outline-light .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--paper);
	border-color: var(--wp--preset--color--night-muted);
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-on-ink .wp-block-button__link {
	background: var(--wp--preset--color--paper);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--paper);
}

/* Fiche ressource ---------------------------------------------------------- */

.bn-resource__tagline {
	font-family: var(--wp--preset--font-family--serif);
	font-size: clamp(1.3125rem, 1.1rem + .8vw, 1.625rem);
	line-height: 1.35;
	color: #3a4555;
	max-width: 30em;
}
.bn-resource__tagline:empty {
	display: none;
}
.bn-resource__body {
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1.25rem;
	line-height: 1.65;
	max-width: 36em;
}
.bn-resource__body h2,
.bn-resource__body h3 {
	font-size: 1.375rem;
	margin-top: 2em;
}
.bn-resource__body ul {
	padding-left: 1.25em;
}

/* Contenu des pages -------------------------------------------------------- */

/* Un seul bord gauche : la largeur de contenu (720 px) donne déjà la mesure. */
.is-layout-constrained > .bn-lead {
	max-width: var(--wp--style--global--content-size);
}

/* L'intertitre se rattache à sa section : plus d'espace au-dessus qu'en
   dessous. La règle de mise en page du cœur pose le même écart partout. */
.wp-block-post-content > h2 {
	margin-block-start: var(--wp--preset--spacing--40);
	font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.875rem);
}
.wp-block-post-content > h3 {
	margin-block-start: 1.75rem;
}
.wp-block-post-content > :is(h2, h3) + * {
	margin-block-start: 0.5rem;
}
.wp-block-post-content > :is(h2, h3):first-child {
	margin-block-start: 0;
}

/* Pied de page ------------------------------------------------------------- */

.bn-footer {
	border-top: 1px solid var(--wp--preset--color--line);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}
.bn-footer a {
	color: var(--wp--preset--color--muted);
}
.bn-footer .wp-block-navigation a {
	padding: 10px 0;
	text-decoration: underline;
}

@media (max-width: 781px) {
	.bn-hero .wp-block-columns {
		gap: 48px;
	}
	.bn-hero .bn-lead {
		font-size: var(--wp--preset--font-size--medium);
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}