/*
Theme Name: NOP Grand Est
Theme URI: https://nopgrandest.org/
Author: NOP Grand Est
Description: Thème bloc du Nouvel Observatoire Photographique du Grand Est et de L'Événement Photographique. Palette sombre, grille à filets, Archivo condensé et IBM Plex Mono.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.2.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: nop
*/

/* ---------- Titres condensés ---------- */
h1, h2, .wp-block-site-title {
	font-stretch: 72%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
h3, h4 { font-stretch: 85%; }
.nop-hero-title { font-stretch: 68%; line-height: 0.9; }
.nop-hero-title .nop-accent,
.nop-accent { color: var(--wp--preset--color--accent); }

/* ---------- Mono (dates, lieux, légendes) ---------- */
.nop-mono,
.wp-block-post-date,
.wp-element-caption,
.wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.02em;
}

/* ---------- En-tête ---------- */
.nop-header { border-bottom: 1px solid var(--wp--preset--color--muted); }
.nop-header .wp-block-site-logo { margin: 0; line-height: 0; }
.nop-header .wp-block-navigation { font-weight: 600; }
.nop-header .wp-block-navigation a { text-decoration: none; }
.nop-header .wp-block-navigation a:hover,
.nop-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; }
/* Les autres sites (L'Événement, NOP Galerie) : regroupés après un filet */
.nop-header .wp-block-navigation .nop-nav-sites { border-left: 1px solid var(--wp--preset--color--muted); padding-left: 1.25rem; }
.wp-block-navigation__responsive-container.is-menu-open .nop-nav-sites { border-left: 0; padding-left: 0; border-top: 1px solid var(--wp--preset--color--muted); padding-top: 1rem; margin-top: 0.5rem; }

/* ---------- Liens vers un autre site (classe ajoutée dans functions.php) ---------- */
/* La flèche ↗ est un masque posé sur une espace insécable : le navigateur ne peut pas
   la séparer du dernier mot, donc la flèche ne passe jamais seule à la ligne. */
a.nop-external::after {
	content: "\00a0" / " (site externe)";
	font-family: var(--wp--preset--font-family--plex-mono); /* espace de largeur fixe (0,6 em) */
	padding-left: 0.3em;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='square'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") no-repeat right 0.02em bottom 0.28em / 0.62em 0.62em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.75' stroke-linecap='square'%3E%3Cpath d='M6 18L18 6M8 6h10v10'/%3E%3C/svg%3E") no-repeat right 0.02em bottom 0.28em / 0.62em 0.62em;
	transition: -webkit-mask-position 0.15s ease, mask-position 0.15s ease;
}
a.nop-external:hover::after,
a.nop-external:focus-visible::after { -webkit-mask-position: right -0.1em bottom 0.4em; mask-position: right -0.1em bottom 0.4em; }
a.nop-external:has(> img)::after { display: none; }
@media (prefers-reduced-motion: reduce) { a.nop-external::after { transition: none; } }

/* Bandeau croisé entre les deux sites */
.nop-crossbar { font-family: var(--wp--preset--font-family--plex-mono); font-size: 0.8125rem; }
.nop-crossbar a { color: inherit; }

/* ---------- Filets et grilles ---------- */
.nop-rule-top { border-top: 1px solid var(--wp--preset--color--muted); }
.nop-rule-y { border-top: 1px solid var(--wp--preset--color--muted); border-bottom: 1px solid var(--wp--preset--color--muted); }

/* Portes d'entrée : 3 colonnes séparées par des filets */
.nop-doors { gap: 0 !important; }
.nop-doors > .wp-block-column { padding: 2.25rem 2rem; }
.nop-doors > .wp-block-column + .wp-block-column { border-left: 1px solid var(--wp--preset--color--muted); }
.nop-doors h3 { font-size: 2.125rem; line-height: 1; font-weight: 800; margin: 0.5rem 0; }
.nop-doors h3 a { text-decoration: none; }
@media (max-width: 781px) {
	.nop-doors > .wp-block-column + .wp-block-column { border-left: 0; border-top: 1px solid var(--wp--preset--color--muted); }
}

/* Listes à filets (ateliers, éditions, programme) */
.nop-ruled-list { list-style: none; padding: 0; border-top: 1px solid var(--wp--preset--color--muted); }
.nop-ruled-list li { padding: 0.875rem 0; border-bottom: 1px solid var(--wp--preset--color--muted); }

.nop-rows > * { margin: 0 !important; padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--muted); }
.nop-rows { border-top: 1px solid var(--wp--preset--color--muted); }
.nop-rows .wp-block-columns { margin: 0; align-items: baseline; }
.nop-rows h3 { font-size: 1.875rem; font-weight: 800; line-height: 1.05; margin: 0; }

/* Cartes de lieux sur fond noir */
.nop-venue { border: 1px solid var(--wp--preset--color--muted); padding: 1.5rem; height: 100%; box-sizing: border-box; }
.nop-venue > * { margin: 0 0 0.5rem; }

/* Grille d'artistes (boucle de requête ou colonnes) */
.nop-artists .wp-block-post-title,
.nop-artists h3 { font-size: 1.25rem; font-weight: 700; text-transform: none; margin: 0.6rem 0 0.2rem; }
.nop-artists a { text-decoration: none; }

/* Boucles de requête en grille : l'image à la une ne doit pas prendre toute la hauteur de la carte */
.wp-block-post-template .wp-block-post-featured-image,
.wp-block-post-template .wp-block-post-featured-image a { height: auto; }

/* Image par défaut (functions.php) : aplat Surface, filet, logo en filigrane */
.nop-thumb-default {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
	background: var(--wp--preset--color--stone);
	border: 1px solid var(--wp--preset--color--silver);
}
.nop-thumb-default img { width: 55%; max-width: 220px; height: auto; opacity: 0.3; }
.wp-block-post-featured-image a:hover .nop-thumb-default img { opacity: 0.5; }

/* ---------- Boutons ---------- */
/* Texte foncé (fond) sur rouge et sur clair : le texte clair sur rouge #E5484D ne contraste qu'à 3:1. */
.wp-block-button.is-style-nop-accent .wp-block-button__link { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper); }
.wp-block-button.is-style-nop-accent .wp-block-button__link:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wp-block-button.is-style-nop-ink .wp-block-button__link { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wp-block-button.is-style-nop-ink .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--paper); }
.wp-block-button.is-style-nop-ghost .wp-block-button__link { background: transparent; color: currentColor; border: 1px solid currentColor; }
.wp-block-button.is-style-nop-ghost .wp-block-button__link:hover { color: var(--wp--preset--color--paper); background: var(--wp--preset--color--ink); }

/* Pastille "appel en cours" */
.nop-dot::before {
	content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 50%;
	background: var(--wp--preset--color--accent); margin-right: 10px; vertical-align: 1px;
}

/* ---------- Pagination des listes et de la recherche ---------- */
/* Grille à 3 zones fixes : précédent | numéros | suivant, même si un des liens manque (première ou dernière page). */
nav.wp-block-query-pagination {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	margin-top: var(--wp--preset--spacing--50);
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--muted);
	font-weight: 600;
}
nav.wp-block-query-pagination > .wp-block-query-pagination-previous { grid-column: 1; justify-self: start; margin: 0; }
nav.wp-block-query-pagination > .wp-block-query-pagination-numbers { grid-column: 2; display: flex; gap: 0.375rem; margin: 0; }
nav.wp-block-query-pagination > .wp-block-query-pagination-next { grid-column: 3; justify-self: end; margin: 0; }
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { text-decoration: none; white-space: nowrap; }
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover { text-decoration: underline; text-underline-offset: 6px; }
.wp-block-query-pagination-numbers .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	height: 2.75rem;
	padding: 0 0.5rem;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--plex-mono);
	text-decoration: none;
}
.wp-block-query-pagination-numbers a.page-numbers:hover { border-color: var(--wp--preset--color--ink); }
.wp-block-query-pagination-numbers .page-numbers.current { background: var(--wp--preset--color--ink); border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.wp-block-query-pagination-numbers .page-numbers.dots { border-color: transparent; min-width: 1.5rem; padding: 0; }
@media (max-width: 600px) {
	/* Numéros sur leur propre ligne, précédent/suivant en dessous */
	nav.wp-block-query-pagination { grid-template-columns: 1fr; gap: 0.75rem; }
	nav.wp-block-query-pagination > .wp-block-query-pagination-numbers { grid-column: 1 / -1; grid-row: 1; justify-self: center; }
	nav.wp-block-query-pagination > .wp-block-query-pagination-previous { grid-column: 1; grid-row: 2; }
	nav.wp-block-query-pagination > .wp-block-query-pagination-next { grid-column: 1; grid-row: 3; }
}

/* Résultats de recherche : liste à filets, titre + extrait */
.nop-search .wp-block-query-total { color: var(--wp--preset--color--ink); margin-top: 0.5rem; }
.nop-search-results { list-style: none; padding: 0; border-top: 1px solid var(--wp--preset--color--muted); }
.nop-search-results > li { margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--wp--preset--color--muted); }
.nop-search-results .wp-block-post-title { margin: 0 0 0.5rem; text-transform: none; font-stretch: 85%; }
.nop-search-results .wp-block-post-title a { text-decoration: none; }
.nop-search-results .wp-block-post-title a:hover { text-decoration: underline; text-underline-offset: 6px; }
.nop-search-results .wp-block-post-excerpt { margin: 0; max-width: 46rem; }
.nop-search-results .wp-block-post-excerpt__excerpt { margin: 0; }
/* La liste finit déjà par un filet : pas de second filet au-dessus de la pagination */
.nop-search-results + nav.wp-block-query-pagination { border-top: 0; padding-top: 0; }

/* ---------- Pied de page ---------- */
.nop-footer a { color: inherit; }
.nop-footer .wp-block-site-logo { margin-bottom: 1.25rem; line-height: 0; }

/* ---------- Accessibilité ---------- */
:where(a, button, input, .wp-block-button__link):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* Style de liste "À filets" sélectionnable dans l'éditeur */
.wp-block-list.is-style-nop-ruled { list-style: none; padding: 0; border-top: 1px solid var(--wp--preset--color--muted); }
.wp-block-list.is-style-nop-ruled li { padding: 0.875rem 0; border-bottom: 1px solid var(--wp--preset--color--muted); }