/*
 Theme Name:   Chaplin Child
 Theme URI:    https://orendyapp.com
 Description:  Thème enfant de Chaplin — personnalisations Orendy.
 Author:       Romuald
 Author URI:   https://orendyapp.com
 Template:     chaplin
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  chaplin-child
*/

/* Ajoutez vos styles personnalisés ci-dessous */

/* Media & Text : texte avant le média en version mobile empilée */
@media (max-width: 600px) {
	.wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
		order: -1;
	}
}

/* Colonnes : inverse l'ordre des colonnes sur mobile via classe utilitaire */
@media (max-width: 781px) {
	.wp-block-columns.reverse-on-mobile,
	.wp-block-columns.reverse-on-mobile.is-not-stacked-on-mobile {
		flex-direction: column-reverse !important;
	}
	.wp-block-columns.reverse-on-mobile > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Bloc List : chevron + espacement */
.wp-block-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 !important;
}
.wp-block-list li {
	position: relative;
	padding-left: 1.6em;
	margin: 0 0 0.9em 0 !important;
}
.wp-block-list li::before {
	content: '›';
	position: absolute;
	left: 0;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.3;
}

/* Grille de features dans Proxipage Highlight : espacement réduit */
.proxipage-highlight .wp-block-columns {
	gap: 0.5em !important;
	margin-top: 0 !important;
	margin-bottom: 0.5em !important;
}
.proxipage-highlight .wp-block-column {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* Utilitaires responsive — alignés sur le breakpoint Gutenberg (782px) */
@media (max-width: 781px) {
	.visible-desktop-only { display: none !important; }
}
@media (min-width: 782px) {
	.visible-mobile-only { display: none !important; }
}

/* Masquer le lien "Modifier" en front-end */
.post-edit-link {
	display: none !important;
}

/* Masquer le titre uniquement sur la page d'accueil */
.home .entry-title {
	display: none !important;
}


/* Masquer le texte des boutons de recherche et menu */
.search-toggle .toggle-text,
.nav-toggle .toggle-text {
	display: none !important;
}

/* Aucun soulignement sur les liens, couleur d'accentuation au survol */
a {
	text-decoration: none !important;
}
a:hover,
a:focus {
	color: var(--link-hover-color, var(--accent-color)) !important;
	text-decoration: none !important;
}

/* Liens déjà en couleur d'accentuation : passer à la couleur standard au survol */
a.color-accent:hover,
a.color-accent:focus,
.color-accent a:hover,
.color-accent a:focus,
.entry-title a:hover,
.entry-title a:focus,
.post-meta a:hover,
.post-meta a:focus,
.cat-links a:hover,
.cat-links a:focus,
.tags-links a:hover,
.tags-links a:focus,
.breadcrumbs a:hover,
.breadcrumbs a:focus {
	color: var(--link-hover-color, var(--accent-color)) !important;
}

/* Formulaire de recherche — page aucun résultat */
.no-search-results-form {
	margin-top: 3.2rem;
}

.no-search-results-form .search-form {
	align-items: stretch;
	display: flex;
	flex-wrap: nowrap;
	margin: 0 0 -.8rem -.8rem;
	max-width: 68rem;
}

.no-search-results-form .search-form label {
	align-items: stretch;
	display: flex;
	flex: 1;
	margin: 0 0 .8rem .8rem;
}

.no-search-results-form .search-form .search-field {
	width: 100%;
	padding: .8rem 1.2rem;
	border: .1rem solid var(--border-color);
	border-radius: .3rem;
	font-size: 1.7rem;
	color: var(--primary-color);
	background: var(--background-color);
}

.no-search-results-form .search-form .search-submit,
.no-search-results-form .search-form button.search-submit {
	flex-shrink: 0;
	margin: 0 0 .8rem .8rem;
}

/* Supprimer le soulignement au survol des boutons */
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.button:hover,
.button:focus {
	text-decoration: none !important;
}

.post-navigation a:hover .post-title,
.post-navigation a:focus .post-title { text-decoration: none !important; }

/* Footer 3 colonnes */

/* Mobile : 1 colonne (< 700px, margin 1rem) */
.grid.tcols-3 > .grid-item {
	width: calc( 100% - 1rem );
}

/* Tablette : 3 colonnes (700px–999px, margin 2rem) */
@media ( min-width: 700px ) {
	.grid.tcols-3 > .grid-item {
		width: calc( 33.33% - 2rem );
	}
}

/* Desktop large : 3 colonnes (>= 1000px, margin 4rem) */
@media ( min-width: 1000px ) {
	.grid.tcols-3 > .grid-item {
		width: calc( 33.33% - 4rem );
	}
}

/* Footer widgets — espacement vertical */
:root {
	--footer-widgets-spacing: 1em;
}

.footer-widgets-outer-wrapper {
	margin-top: var(--footer-widgets-spacing) !important;
	margin-bottom: var(--footer-widgets-spacing) !important;
	padding-top: var(--footer-widgets-spacing) !important;
}


/* Formulaire de recherche — hauteur uniforme champ + bouton */
.search-form {
	display: flex;
	align-items: stretch;
	gap: .6rem;
}

.search-form .search-field,
.search-form .search-submit {
	-webkit-appearance: none;
	-moz-appearance: none;
	font-size: 1.6rem !important;
	line-height: 1.5 !important;
	padding-top: .9rem !important;
	padding-bottom: .9rem !important;
	margin: 0 !important;
	box-sizing: border-box !important;
}

/* Champ de recherche — sans bordure, fond clair */
.search-form .search-field {
	border: none !important;
	background-color: var(--light-background-color) !important;
	box-shadow: none !important;
}

/* Largeur du champ de recherche */
.search-form .search-field {
	width: 50% !important;
	flex: none !important;
}


/* -----------------------------------------------
   En-tete : logo + titre/slogan cote a cote
----------------------------------------------- */
.header-titles {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	text-align: left !important;
	gap: 2.4rem !important;
}

.site-identity-text {
	align-items: flex-start;
}

/* Masquer la barre WordPress admin sur mobile */
@media (max-width: 999px) {
	#wpadminbar { display: none !important; }
	html { margin-top: 0 !important; }
}

/* Titre + icônes toujours sur la même ligne, quelle que soit la largeur */
.header-inner .section-inner {
	flex-direction: row !important;
	align-items:    center !important;
	flex-wrap:      nowrap !important;
}

.header-titles {
	flex: 1 1 0 !important;
	min-width: 0 !important;  /* permet au titre de se tronquer si nécessaire */
}

.header-navigation-wrapper {
	flex-shrink: 0 !important;
}

.site-identity-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: .25em;
}

.site-identity-name {
	display: block;
	color: var(--headings-color, var(--primary-color, #1a1b1f)) !important;
	font-size: 2.8rem;
	font-weight: var(--headings-weight, 700);
	text-transform: var(--headings-case, none);
	letter-spacing: var(--headings-spacing, normal);
	line-height: 1.2;
	text-decoration: none !important;
}

@media (min-width: 1000px) {
	.site-identity-name { font-size: 4.0rem; }
}

.site-identity-name:hover,
.site-identity-name:focus {
	color: var(--link-hover-color, var(--accent-color)) !important;
	text-decoration: none !important;
}

.site-identity-tagline {
	color: var(--primary-color, #1a1b1f);
	font-size: 1.3rem;
	line-height: 1.4;
}

.site-logo img { max-height: 5rem !important; }

/* -----------------------------------------------
   Espacement breadcrumb / titre / méta / contenu
----------------------------------------------- */
.breadcrumbs-wrapper { margin-bottom: 1rem !important; }
.post-meta-wrapper { margin-top: 1rem !important; }
.post-inner { padding-top: 3rem !important; }

/* ── Remplacement animation menu-modal Chaplin ──
   Le .menu-modal couvre tout l'écran : il gère l'overlay (fond sombre, fade).
   Seul le .menu-modal-inner (panneau réel) glisse depuis la droite.
── */

/* Overlay plein écran — toujours rendu, fond transparent par défaut */
.menu-modal {
	display:        flex          !important;
	align-items:    flex-start    !important;
	justify-content: flex-end     !important;
	top:            0             !important;
	left:           0             !important;
	right:          0             !important;
	bottom:         0             !important;
	background:     rgba(0,0,0,0) !important;
	opacity:        1             !important;
	transition:     background .28s ease !important;
	pointer-events: none          !important;
}

.menu-modal.active {
	background:     rgba(0,0,0,.45) !important;
	pointer-events: auto            !important;
}

/* Le panneau lui-même reste cliquable même avant .active */
.menu-modal .menu-modal-inner {
	pointer-events: auto !important;
}

/* Annule le margin-top que Chaplin pose pour la barre admin (cachée sur mobile) */
@media (max-width: 999px) {
	.admin-bar .menu-modal-inner { margin-top: 0 !important; }
}

/* Panneau réel — glisse depuis la droite */
.menu-modal .menu-modal-inner {
	opacity:          1                        !important;
	transform:        translateX( 100% )       !important;
	transition:       transform .28s ease-in-out !important;
	height:           100%                     !important;
	min-width:        0                        !important;
	box-shadow:       -2px 0 24px rgba(0,0,0,.15) !important;
}

.menu-modal.active .menu-modal-inner {
	transform: translateX( 0 ) !important;
}