/*
Theme Name:   Astra Child — OuterForge
Theme URI:    https://outerforge.ca/
Description:  Thème enfant d'Astra pour outerforge.ca. Les correctifs et personnalisations de code vont ici, pour survivre aux mises à jour d'Astra.
Author:       OuterForge
Author URI:   https://outerforge.ca/
Template:     astra
Version:      1.0.9
Text Domain:  astra-child
*/

/* Personnalisations CSS ci-dessous. */

/* Pastilles Pro / Pro+ : même style que dans l'extension Store Locator (sl-admin-badge). */
.of-badge {
	align-items: center;
	background: #5477a8;
	border-radius: 3px;
	box-sizing: border-box;
	color: #fff;
	display: inline-flex;
	flex: 0 0 auto;
	font-family: Inter, sans-serif;
	font-size: 12px;
	font-weight: 600;
	height: 20px;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1;
	margin-inline-start: 6px;
	padding: 0 7px;
	text-transform: none;
	unicode-bidi: plaintext;
	vertical-align: middle;
	white-space: nowrap;
}

/* Plus grande quand elle est jointe à un titre. */
h1 .of-badge,
h2 .of-badge,
h3 .of-badge,
h4 .of-badge,
.of-badge--lg {
	border-radius: 4px;
	font-size: 15px;
	height: 28px;
	padding: 0 10px;
}

/* Pastille utilisée seule comme titre (nom du forfait) : pas de marge. */
.of-badge--solo {
	margin-inline-start: 0;
}

/* ------------------------------------------------------------------
 * Menus : barre orange du plugin (#C9471F, 3 px) sous le texte.
 * Survol : la barre se déploie depuis le centre. Page active : barre fixe,
 * texte au bleu des titres du plugin. Les ancres (classe of-anchor) ne
 * sont jamais marquées actives.
 * ------------------------------------------------------------------ */
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link {
	color: rgba(255, 255, 255, .82);
	position: relative;
	transition: color .15s ease;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after {
	background: #C9471F;
	border-radius: 3px;
	bottom: 18px;
	content: "";
	height: 3px;
	inset-inline: 16px;
	position: absolute;
	transform: scaleX(0);
	transform-origin: center;
	transition: transform .18s ease;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover,
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:focus-visible {
	color: #FFFFFF;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:hover::after,
.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:focus-visible::after,
.ast-builder-menu-1 .main-header-menu > .current-menu-item:not(.of-anchor) > .menu-link::after {
	transform: scaleX(1);
}

.ast-builder-menu-1 .main-header-menu > .current-menu-item:not(.of-anchor) > .menu-link {
	color: #FFFFFF;
	font-weight: 600;
}

.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: -6px;
}

/* Menu mobile : la barre revient à la verticale, comme la colonne du plugin. */
#ast-hf-mobile-menu > .menu-item > .menu-link {
	position: relative;
}

#ast-hf-mobile-menu > .current-menu-item:not(.of-anchor) > .menu-link {
	background: rgba(255, 255, 255, .08);
	color: #FFFFFF;
	font-weight: 600;
}

#ast-hf-mobile-menu > .current-menu-item:not(.of-anchor) > .menu-link::before {
	background: #C9471F;
	border-radius: 3px;
	bottom: 8px;
	content: "";
	inset-inline-start: 0;
	position: absolute;
	top: 8px;
	width: 3px;
}

#ast-hf-mobile-menu > .of-anchor.current-menu-item > .menu-link {
	background: transparent;
	color: #FFFFFF;
	font-weight: inherit;
}

/* ------------------------------------------------------------------
 * En-tête : même bleu foncé que le pied de page, textes blancs.
 * ------------------------------------------------------------------ */
.ast-primary-header-bar,
#ast-mobile-header .ast-primary-header-bar,
.ast-mobile-header-content {
	background-color: #263448 !important;
	border-bottom-color: #263448 !important;
}

#ast-hf-mobile-menu .menu-link {
	border-color: rgba(255, 255, 255, .12) !important;
	color: #FFFFFF !important;
}

#ast-mobile-header .menu-toggle .ast-mobile-svg,
#ast-mobile-header .menu-toggle svg {
	fill: #FFFFFF !important;
}

#ast-mobile-header .menu-toggle {
	background: transparent !important;
}

/* ------------------------------------------------------------------
 * Pied de page : bleu foncé du plugin (#263448), textes blancs;
 * rangée Copyright : texte blanc sur fond noir.
 * ------------------------------------------------------------------ */
.site-primary-footer-wrap {
	background-color: #263448 !important;
	border-top: 0 !important;
}

.site-below-footer-wrap {
	background-color: #0D0D0D !important;
	border-top: 0 !important;
}

.site-below-footer-wrap,
.site-below-footer-wrap .ast-footer-copyright,
.site-below-footer-wrap .ast-footer-copyright p {
	color: #FFFFFF !important;
}

.of-ftr-logo {
	margin: 0 0 12px;
}

.of-ftr-logo img {
	display: block;
	height: auto;
	width: 190px;
}

.of-ftr-mission {
	color: #FFFFFF;
	font-size: 14px;
	line-height: 1.6;
	margin: 0;
	max-width: 420px;
}

.of-ftr-mission strong {
	color: #FFFFFF;
}

#astra-footer-menu .menu-link {
	color: #FFFFFF !important;
	position: relative;
}

#astra-footer-menu .menu-link::after {
	background: #C9471F;
	border-radius: 2px;
	bottom: -5px;
	content: "";
	height: 2px;
	inset-inline-end: 8px;
	inset-inline-start: 0;
	position: absolute;
	transform: scaleX(0);
	transition: transform .18s ease;
}

#astra-footer-menu .menu-link:hover::after,
#astra-footer-menu .menu-link:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link,
	.ast-builder-menu-1 .main-header-menu > .menu-item > .menu-link::after,
	#astra-footer-menu .menu-link::after {
		transition: none;
	}
}

/* Liens légaux de la rangée Copyright (élément HTML 2 du pied de page). */
.of-legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	justify-content: flex-end;
}

.of-legal-links a {
	color: #FFFFFF !important;
	font-size: 14px;
	position: relative;
	text-decoration: none;
}

.of-legal-links a::after {
	background: #C9471F;
	border-radius: 2px;
	bottom: -5px;
	content: "";
	height: 2px;
	inset-inline: 0;
	position: absolute;
	transform: scaleX(0);
	transition: transform .18s ease;
}

.of-legal-links a:hover::after,
.of-legal-links a:focus-visible::after {
	transform: scaleX(1);
}

@media (max-width: 921px) {
	.of-legal-links {
		justify-content: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.of-legal-links a::after {
		transition: none;
	}
}

/* ------------------------------------------------------------------
 * Pied de page : mêmes marges que le contenu des pages
 * (contenu de 1200 px, 32 px de côté; 16 px sous 768 px).
 * Sous 922 px : une seule colonne, tout centré.
 * ------------------------------------------------------------------ */
.site-primary-footer-wrap .ast-builder-grid-row,
.site-below-footer-wrap .ast-builder-grid-row {
	box-sizing: border-box;
	margin-inline: auto;
	max-width: 1264px !important; /* 1200 px de contenu + 2 × 32 px (Astra impose 1200 px) */
	padding-inline: 32px;
}

#astra-footer-menu {
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: flex-end;
}

#astra-footer-menu .menu-link {
	padding: 0 !important;
}

#astra-footer-menu .menu-link::after {
	inset-inline-end: 0;
}

@media (max-width: 921px) {
	.site-primary-footer-wrap .ast-builder-grid-row,
	.site-below-footer-wrap .ast-builder-grid-row {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 24px;
	}

	.site-primary-footer-wrap .site-footer-section,
	.site-below-footer-wrap .site-footer-section {
		align-items: center;
		justify-content: center;
		text-align: center;
	}

	.of-ftr-logo img {
		margin-inline: auto;
	}

	.of-ftr-mission,
	.ast-footer-copyright,
	.ast-footer-copyright p {
		margin-inline: auto;
		text-align: center !important;
	}

	#astra-footer-menu {
		justify-content: center;
	}

	/* Place pour le bouton « haut de page » sous les liens légaux. */
	.site-below-footer-wrap {
		padding-bottom: 76px !important;
	}
}

@media (max-width: 767px) {
	.site-primary-footer-wrap .ast-builder-grid-row,
	.site-below-footer-wrap .ast-builder-grid-row {
		padding-inline: 16px;
	}
}

/* ------------------------------------------------------------------
 * Surtitre centré (ex. « FAQ », « PRIX ») : un filet court de chaque
 * côté, de la couleur du texte. Classe ajoutée dans Elementor.
 * ------------------------------------------------------------------ */
.of-eyebrow-lines .elementor-heading-title {
	align-items: center;
	display: inline-flex;
	gap: 12px;
}

.of-eyebrow-lines .elementor-heading-title::before,
.of-eyebrow-lines .elementor-heading-title::after {
	background: currentColor;
	content: "";
	flex: none;
	height: 1px;
	width: 32px;
}