/*
 * HySoW Astra Child — Menu mobile
 * Toutes les règles sont dans @media (max-width: 921px).
 * Habillage du menu natif Astra, sans modifier son comportement JS.
 * Dépend de : style.css (tokens --hysow-*)
 */

@media (max-width: 921px) {

	/* =========================================================
	   BOUTON HAMBURGER
	   ========================================================= */

	body .ast-button-wrap {
		display: flex;
		align-items: center;
	}

	body .ast-mobile-menu-trigger-minimal {
		display:         flex;
		align-items:     center;
		justify-content: center;
		width:           44px;
		height:          44px;
		padding:         0;
		border:          2px solid transparent;
		border-radius:   50%;
		background:      transparent;
		color:           var(--hysow-color-navy);
		cursor:          pointer;
		transition:      border-color 160ms ease, background 160ms ease, color 160ms ease;
	}

	body .ast-mobile-menu-trigger-minimal:hover {
		border-color: var(--hysow-color-cyan);
		color:        var(--hysow-color-cyan);
	}

	body .ast-mobile-menu-trigger-minimal[aria-expanded="true"] {
		border-color: var(--hysow-color-navy);
		background:   var(--hysow-color-navy);
		color:        var(--hysow-color-white);
	}

	body .ast-mobile-menu-trigger-minimal:focus-visible {
		outline:        2px solid var(--hysow-color-cyan);
		outline-offset: 3px;
	}

	body .ast-mobile-menu-trigger-minimal svg {
		width:      20px;
		height:     20px;
		transition: transform 200ms ease;
	}

	/* Bascule hamburger ↔ croix via aria-expanded (géré nativement par Astra) */
	body .ast-mobile-menu-trigger-minimal .ast-close-svg {
		display: none;
	}

	body .ast-mobile-menu-trigger-minimal[aria-expanded="true"] .ast-menu-svg {
		display: none;
	}

	body .ast-mobile-menu-trigger-minimal[aria-expanded="true"] .ast-close-svg {
		display:   inline-flex;
		transform: rotate(90deg);
	}


	/* =========================================================
	   PANNEAU DU MENU
	   ========================================================= */

	body .ast-mobile-header-content {
		background: var(--hysow-color-white);
		border-top: 3px solid var(--hysow-color-cyan);
		box-shadow: 0 6px 24px rgb(29 43 98 / 12%);
	}


	/* =========================================================
	   ITEMS DE PREMIER NIVEAU
	   ========================================================= */

	body #ast-hf-mobile-menu .main-header-menu {
		margin:  0;
		padding: 0;
	}

	body #ast-hf-mobile-menu .main-header-menu > .menu-item > .menu-link {
		padding:         0.9rem 1.25rem;
		color:           var(--hysow-color-navy);
		font-size:       0.82rem;
		font-weight:     700;
		letter-spacing:  0.04em;
		text-transform:  uppercase;
		border-bottom:   1px solid var(--hysow-line);
		transition:      background 140ms ease, color 140ms ease;
		text-decoration: none;
	}

	body #ast-hf-mobile-menu .main-header-menu > .menu-item > .menu-link:hover,
	body #ast-hf-mobile-menu .main-header-menu > .current-menu-item > .menu-link {
		background: var(--hysow-color-navy-soft);
		color:      var(--hysow-color-cyan-dark);
	}

	/* Flèche sous-menu native Astra */
	body #ast-hf-mobile-menu .ast-menu-toggle {
		color:      var(--hysow-color-navy);
		border:     none;
		background: transparent;
		transition: color 140ms ease, transform 200ms ease;
	}

	body #ast-hf-mobile-menu .ast-menu-toggle[aria-expanded="true"] {
		color:     var(--hysow-color-cyan);
		transform: rotate(180deg);
	}

	body #ast-hf-mobile-menu .ast-menu-toggle svg {
		fill: currentColor;
	}


	/* =========================================================
	   SOUS-MENUS
	   ========================================================= */

	body #ast-hf-mobile-menu .sub-menu {
		background: rgb(29 43 98 / 4%);
		border:     none;
		box-shadow: none;
	}

	body #ast-hf-mobile-menu .sub-menu .menu-link {
		padding:         0.75rem 1.25rem 0.75rem 2rem;
		color:           var(--hysow-color-navy);
		font-size:       0.8rem;
		font-weight:     500;
		border-bottom:   1px solid rgb(29 43 98 / 6%);
		transition:      color 140ms ease;
		text-decoration: none;
	}

	/* Préfixe › cohérent avec le fil d'ariane */
	body #ast-hf-mobile-menu .sub-menu .menu-link::before {
		content:      "›";
		margin-right: 0.5rem;
		color:        var(--hysow-color-cyan);
		font-weight:  300;
	}

	body #ast-hf-mobile-menu .sub-menu .menu-link:hover {
		color:      var(--hysow-color-cyan-dark);
		background: transparent;
	}


	/* =========================================================
	   ACCESSIBILITÉ
	   ========================================================= */

	body #ast-hf-mobile-menu .menu-link:focus-visible,
	body .ast-mobile-menu-trigger-minimal:focus-visible {
		outline:        2px solid var(--hysow-color-cyan);
		outline-offset: -2px;
	}

} /* fin @media (max-width: 921px) */


/* =========================================================
   NAVIGATION DESKTOP (min-width: 922px)
   ========================================================= */

@media (min-width: 922px) {
	.main-header-menu .sub-menu {
		width: 280px;
	}

	.main-header-menu > .menu-item > .menu-link,
	.main-header-menu .sub-menu .menu-link {
		padding-inline: 0.9rem;
		color:          var(--wp--preset--color--hysow-navy);
		font-size:      1rem;
		font-weight:    700;
		text-transform: uppercase;
	}

	.main-header-menu > .menu-item.current-menu-item > .menu-link,
	.main-header-menu > .menu-item > .menu-link:hover,
	.main-header-menu > .menu-item > .menu-link:focus-visible {
		color: var(--wp--preset--color--hysow-cyan);
	}
}


/* =========================================================
   TABLETTE (max-width: 781px)
   ========================================================= */

@media (max-width: 781px) {
	/**********SPECIFIC**********/
	.is-mobile-center, .is-mobile-center * {
		text-align: center;
	}
	.is-mobile-left, .is-mobile-left * {
		text-align: left;
	}
	.is-mobile-fullwidth {
		width: 100%!important;
	}
	.no-mobile-border {
		border: none;
	}
	.no-mobile-margin {
		margin: 0!important;
	}
	.no-mobile-padding {
		padding: 0!important;
	}
	body .is-mobile-reverted {
		flex-direction: column-reverse;
		flex-wrap: nowrap !important;
	}
	body .is-mobile-row {
		flex-direction: row;
	}
	body .is-mobile-column {
		flex-direction: column;
	}
	body .is-mobile-justify-center {
		justify-content: center !important;
	}
	body .is-mobile-align-center {
		align-items: center !important;
	}

	.site-primary-header-wrap {
		padding-inline: 1.25rem;
	}

	.hysow-grid {
		grid-template-columns: 1fr;
	}

	.hysow-hero {
		min-height: 18rem;
		text-align: left;
	}

	.hysow-hero h1,
	.hysow-hero p {
		margin-inline: 0;
	}

	body.home .hysow-hero {
		min-height: 30rem;
	}

	.wp-block-post-template {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-widget-area #menu-top-menu-fr li a {
		font-size: .8rem;
	}
	body .highlight {
		font-size: 2.9rem;
	}
}


/* =========================================================
   FIL D'ARIANE — mobile (max-width: 640px)
   ========================================================= */

@media (max-width: 640px) {
	#fil-ariane {
		padding:   10px 16px;
		font-size: 0.78rem;
	}
}


/* =========================================================
   MOBILE (max-width: 544px)
   ========================================================= */

@media (max-width: 544px) {
	.hysow-section,
	.hysow-band {
		padding-block: clamp(3.5rem, 16vw, 5rem);
	}

	.hysow-media {
		min-height: 18rem;
	}

	.wp-block-post-template {
		grid-template-columns: 1fr;
	}
	body .highlight {
		font-size: 2.5rem;
	}
}


/* =========================================================
   ACCESSIBILITÉ MOUVEMENT RÉDUIT
   ========================================================= */

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