/*
Theme Name: World of Family
Theme URI: https://world-of-family.fr
Author: Num'Etik
Author URI: https://num-etik.fr
Description: Thème World of Family
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 8.5
Version: 1.11.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: world-of-family
Tags: block-theme, full-site-editing, block-patterns, one-column, custom-colors, custom-logo, translation-ready
*/

/*
 * Les reglages de couleurs, typographie et espacements vivent dans theme.json
 * (et styles/arcane.json pour la variation sombre). Ce fichier ne contient que
 * quelques utilitaires que theme.json ne couvre pas.
 */

/* Sur-titres en petites capitales avec interlettrage leger */
.wof-surtitre {
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.14em;
	font-weight: 600;
	color: var(--wp--preset--color--or);
}

/* Titres equilibres */
h1, h2, h3,
.wp-block-heading {
	text-wrap: balance;
}

/* Cadre « parchemin » : carte avec filet dore discret */
.wof-carte {
	border: 1px solid var(--wp--preset--color--bordure);
	box-shadow: 0 1px 0 var(--wp--preset--color--bordure-forte) inset;
}

/* Sceau : pastille ronde pour les icones maison */
.wof-sceau img {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--bordure-forte);
	border-radius: 999px;
	padding: 14px;
}

/* Separateur discret (toujours avec la classe has-alpha-channel-opacity) */
.wp-block-separator.wof-filet {
	border-color: var(--wp--preset--color--bordure-forte);
	opacity: 0.6;
}

/* Bloc details (FAQ) habille en carte */
.wof-faq .wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--bordure);
	border-radius: 12px;
	padding: 1rem 1.25rem;
}
.wof-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.2rem;
	font-weight: 600;
	cursor: pointer;
}

/* Accessibilite : focus visible coherent */
:where(a, button, input, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--or-vif);
	outline-offset: 2px;
}

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

/* Liens discrets du pied de page : intégrés, sans soulignement */
.wof-liens-discrets a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--bordure-forte);
	transition: color .15s ease, border-color .15s ease;
}
.wof-liens-discrets a:hover {
	color: var(--wp--preset--color--or);
	border-bottom-color: var(--wp--preset--color--or);
}

/* Pastilles rondes des panneaux parents / héros (rendu 100% CSS) */
.wof-pastille {
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	font-size: 1.9rem;
	line-height: 1;
	margin: 0 0 0.75rem;
	box-shadow: 0 2px 8px rgba(42, 32, 24, 0.15);
}
.wof-pastille-or {
	background: var(--wp--preset--color--or);
	color: var(--wp--preset--color--surface);
}
.wof-pastille-arcane {
	background: var(--wp--preset--color--arcane);
	color: var(--wp--preset--color--encre-douce);
}

/* Sur les fonds sombres (colonne héros, hero), les listes et liens restent lisibles */
.has-encre-douce-background-color .wp-block-list,
.has-encre-douce-background-color li {
	color: var(--wp--preset--color--encre-douce-texte);
}

/* Concept 3 : frontispice du hero, filet d'or double */
.wof-frontispice {
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(212, 166, 58, 0.35);
}


/* ============================================================
   Concept 3 : habillage global, contraste et lisibilite
   ============================================================ */

/* Rythme vertical : chaque section respire */
.wp-block-group.alignfull { position: relative; }

/* Titres de section : fleuron dore centre au-dessus des h2 centres */
h2.wp-block-heading.has-text-align-center::before {
	content: "\2726";
	display: block;
	color: var(--wp--preset--color--or);
	font-size: 1rem;
	line-height: 1;
	margin: 0 auto 0.75rem;
	opacity: 0.85;
}

/* Sur-titres : plus presents (le centrage vient de has-text-align-center) */
.wof-surtitre {
	font-size: 0.82rem;
}

/* Cartes : accent dore en haut, ombre douce, survol qui souleve */
.wof-carte {
	position: relative;
	border: 1px solid var(--wp--preset--color--bordure) !important;
	border-top: 3px solid var(--wp--preset--color--or) !important;
	box-shadow: 0 2px 10px rgba(42, 32, 24, 0.06);
	transition: transform .16s ease, box-shadow .16s ease;
}
.wof-carte:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(42, 32, 24, 0.12);
}

/* Sur fond sombre, l'ombre des cartes s'adapte */
.has-encre-douce-background-color .wof-carte {
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
}

/* Sceaux : cercle parchemin, un peu plus marque */
.wof-sceau img {
	background: var(--wp--preset--color--surface-2);
	border: 1px solid var(--wp--preset--color--bordure-forte);
	border-radius: 999px;
	padding: 16px;
	box-shadow: 0 1px 4px rgba(42, 32, 24, 0.08);
}

/* Listes : puces dorees en forme de losange */
.wp-block-list { list-style: none; padding-left: 0; }
.wp-block-list li {
	position: relative;
	padding-left: 1.6rem;
	margin-bottom: 0.5rem;
}
.wp-block-list li::before {
	content: "\25C6";
	position: absolute;
	left: 0;
	top: 0.05em;
	color: var(--wp--preset--color--or);
	font-size: 0.75em;
}
/* Sur fond sombre, puces en or vif */
.has-encre-douce-background-color .wp-block-list li::before {
	color: var(--wp--preset--color--or-vif);
}

/* FAQ : cartes plus nettes, fleche qui pivote */
.wof-faq .wp-block-details {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--bordure);
	border-left: 3px solid var(--wp--preset--color--or);
	border-radius: 12px;
	padding: 1rem 1.25rem;
	box-shadow: 0 1px 6px rgba(42, 32, 24, 0.05);
	transition: box-shadow .16s ease;
}
.wof-faq .wp-block-details[open] {
	box-shadow: 0 4px 14px rgba(42, 32, 24, 0.10);
}
.wof-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 1.2rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.wof-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.wof-faq .wp-block-details summary::after {
	content: "\203A";
	color: var(--wp--preset--color--or);
	font-size: 1.4rem;
	transition: transform .18s ease;
}
.wof-faq .wp-block-details[open] summary::after { transform: rotate(90deg); }

/* Frontispice : liseré interieur dore plus present, coins genereux */
.wof-frontispice {
	box-shadow: inset 0 0 0 1px rgba(212, 166, 58, 0.45);
	background: rgba(0, 0, 0, 0.08);
}

/* Boutons : legere elevation pour inviter au clic */
.wp-block-button__link {
	box-shadow: 0 2px 8px rgba(169, 118, 15, 0.25);
}
.wp-block-button__link:hover {
	box-shadow: 0 4px 14px rgba(169, 118, 15, 0.35);
}

/* Paragraphes : largeur de lecture confortable quand centres */
.has-text-align-center.has-moyen-font-size {
	max-width: 46ch;
	margin-left: auto;
	margin-right: auto;
}

/* Fleuron plus lumineux sur les bandes sombres */
.has-encre-douce-background-color h2.wp-block-heading.has-text-align-center::before {
	color: var(--wp--preset--color--or-vif);
}


/* Rythme : liseré discret en haut de chaque section claire, pour bien séparer les blocs empilés */
.wp-block-group.alignfull.has-base-background-color,
.wp-block-group.alignfull.has-surface-background-color,
.wp-block-group.alignfull.has-surface-2-background-color,
.wp-block-group.alignfull.has-parchemin-fonce-background-color,
.wof-split {
	border-top: 1px solid var(--wp--preset--color--bordure-forte);
}

/* ============================================================
   Journal du clan : liste et articles
   ============================================================ */

/* Lien Journal dans l'en-tete */
.wof-lien-journal {
	margin: 0;
	white-space: nowrap;
}
.wof-lien-journal a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
}
.wof-lien-journal a:hover {
	color: var(--wp--preset--color--or-vif);
	border-bottom-color: var(--wp--preset--color--or-vif);
}

/* Grille des articles */
.wof-liste-articles {
	gap: var(--wp--preset--spacing--40);
}

/* Carte d'article : accent dore, survol qui souleve */
.wof-carte-article {
	border: 1px solid var(--wp--preset--color--bordure);
	border-top: 3px solid var(--wp--preset--color--or);
	box-shadow: 0 2px 10px rgba(42, 32, 24, 0.06);
	transition: transform .16s ease, box-shadow .16s ease;
	height: 100%;
}
.wof-carte-article:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 22px rgba(42, 32, 24, 0.12);
}
.wof-carte-article .wp-block-post-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.wof-carte-article .wp-block-post-title a:hover {
	color: var(--wp--preset--color--or);
}
.wof-carte-article .wp-block-post-date {
	color: var(--wp--preset--color--or);
	font-family: var(--wp--preset--font-family--source-sans-3);
	font-variant-caps: all-small-caps;
	letter-spacing: 0.12em;
	font-weight: 600;
}
.wof-carte-article .wp-block-post-featured-image img {
	border-radius: 10px;
}

/* Pagination du journal */
.wp-block-query-pagination {
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--source-sans-3);
}
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	text-decoration: none;
	padding: 0.4rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--bordure);
	color: var(--wp--preset--color--texte-doux);
}
.wp-block-query-pagination .current {
	background: var(--wp--preset--color--or);
	border-color: var(--wp--preset--color--or);
	color: var(--wp--preset--color--surface);
}

/* ---------- Confort de lecture d'un article ---------- */
.wof-article {
	font-size: 1.12rem;
	line-height: 1.75;
}
.wof-article > * + * {
	margin-top: 1.4em;
}
.wof-article h2 {
	font-size: clamp(1.6rem, 3vw, 2rem);
	margin-top: 2.2em;
	padding-top: 0.6em;
	border-top: 1px solid var(--wp--preset--color--bordure);
}
.wof-article h3 {
	font-size: clamp(1.3rem, 2.4vw, 1.55rem);
	margin-top: 1.8em;
	color: var(--wp--preset--color--or);
}
/* Lettrine sur le premier paragraphe */
.wof-article > p:first-of-type::first-letter {
	float: left;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-size: 3.4em;
	line-height: 0.82;
	padding: 0.06em 0.12em 0 0;
	color: var(--wp--preset--color--or);
}
.wof-article a {
	color: var(--wp--preset--color--or);
	text-underline-offset: 3px;
}
.wof-article blockquote {
	border-left: 3px solid var(--wp--preset--color--or);
	background: var(--wp--preset--color--surface-2);
	border-radius: 0 10px 10px 0;
	padding: 1rem 1.25rem;
	font-family: var(--wp--preset--font-family--eb-garamond);
	font-style: italic;
	font-size: 1.15em;
}
.wof-article ul,
.wof-article ol {
	padding-left: 0;
}
.wof-article img {
	border-radius: 12px;
}
.wof-article figcaption {
	text-align: center;
	color: var(--wp--preset--color--texte-tenu);
	font-size: 0.9rem;
}

/* Categories sous le titre d'article */
.wp-block-post-terms a {
	color: var(--wp--preset--color--or-vif);
	text-decoration: none;
	border-bottom: 1px solid rgba(212, 166, 58, 0.4);
}

/* Meta d'article : date et categorie sur une meme ligne */
.wof-meta-article {
	gap: 0.9rem;
}
.wof-meta-article .wp-block-post-date,
.wof-meta-article .wp-block-post-terms {
	margin: 0;
}
.wof-meta-article .wp-block-post-terms::before {
	content: "·";
	margin-right: 0.9rem;
	color: var(--wp--preset--color--or-vif);
	opacity: 0.7;
}
.wof-meta-article a {
	color: inherit;
	text-decoration: none;
	border-bottom: none;
}
.wof-meta-article a:hover {
	text-decoration: underline;
}