/* ==========================================================================
   Glint Menu — Overlay Styles
   Wrapped in @layer to integrate with the theme's layer system.
   ========================================================================== */

@layer components {

	/* ---------- Overlay ---------- */
	.glintmenu-overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 0;
		height: 100svh;
		background-color: rgba(0, 0, 0, 0.95);
		overflow: hidden;
		visibility: hidden;
		opacity: 0;
		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0.4s,
			opacity 0s linear 0.4s;
		z-index: 200;
		pointer-events: none;
	}

	.glintmenu-overlay.is-open {
		width: 100vw;
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		overflow: hidden;
		transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1),
			visibility 0s linear 0s,
			opacity 0s linear 0s;
	}

	/* ---------- Close Button ---------- */
	.glintmenu-close-button {
		position: absolute;
		top: 1.5rem;
		right: 1.5rem;
		width: 44px;
		height: 44px;
		background: rgba(255, 255, 255, 0.1);
		border: none;
		border-radius: 50%;
		cursor: pointer;
		z-index: 10;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}

	.glintmenu-close-button::before,
	.glintmenu-close-button::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		background-color: #fff;
	}

	.glintmenu-close-button::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.glintmenu-close-button::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.glintmenu-close-button:hover {
		background: rgba(255, 255, 255, 0.2);
		transform: scale(1.1);
	}

	.glintmenu-close-button:focus-visible {
		outline: 2px solid #fff;
		outline-offset: 4px;
	}

	/* ---------- Grid — Desktop (>1000px) ---------- */
	.glintmenu-overlay-content {
		display: grid;
		grid-template-columns: 1fr 1.5fr 1.5fr;
		grid-template-rows: 1fr 1fr;
		width: 100%;
		height: 100%;
		gap: 8px;
		padding: 8px !important;
		box-sizing: border-box;
	}

	.glintmenu-links {
		grid-column: 1;
		grid-row: 1 / 3;
		min-height: 0;
	}

	.glintmenu-button-1 {
		grid-column: 2;
		grid-row: 1;
	}

	.glintmenu-button-2 {
		grid-column: 3;
		grid-row: 1;
	}

	.glintmenu-button-3 {
		grid-column: 2;
		grid-row: 2;
	}

	.glintmenu-button-4 {
		grid-column: 3;
		grid-row: 2;
	}

	/* ---------- Grid — Mobile (<1000px) ---------- */
	@media (max-width: 1000px) {
		.glintmenu-overlay-content {
			grid-template-columns: 1fr 1fr;
			grid-template-rows: 1fr 1fr 1fr;
		}

		.glintmenu-links {
			grid-column: 1;
			grid-row: 1 / 3;
		}

		.glintmenu-button-1 {
			grid-column: 2;
			grid-row: 1;
		}

		.glintmenu-button-2 {
			grid-column: 2;
			grid-row: 2;
		}

		.glintmenu-button-3 {
			grid-column: 1;
			grid-row: 3;
		}

		.glintmenu-button-4 {
			grid-column: 2;
			grid-row: 3;
		}
	}

	/* ---------- Navigation Links ---------- */
	/* Suppression globale des soulignements sur tous les liens du menu */
	.glintmenu-overlay a,
	.glintmenu-overlay a:focus,
	.glintmenu-overlay a:visited {
		text-decoration: none !important;
		text-decoration-line: none !important;
		color: var(--color-bg, #fbecef) !important;
	}

	.glintmenu-overlay a:hover {
		text-decoration: none !important;
		text-decoration-line: none !important;
		color: var(--color-mauve, #5c5475) !important;
	}

	.glintmenu-links {
		background-color: #1a1a1a;
		padding: 2rem 2rem 16px 2rem !important;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		height: 100%;
		border-radius: 25px;
	}

	/* Block markup: menu items are direct children of the nav panel. */
	.glintmenu-links > a {
		margin: 0;
	}

	.glintmenu-links-list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.glintmenu-links-list > li {
		margin: 0;
	}

	.glintmenu-links-list a,
	.glintmenu-links > a,
	.glintmenu-toggle-submenu {
		color: var(--color-bg, #fbecef);
		text-decoration: none;
		font-size: clamp(1rem, 1.5vw, 1.5rem);
		font-weight: 500;
		line-height: 1.3;
		transition: color 0.2s ease;
		background: none;
		border: none;
		padding: 0;
		width: 100%;
		text-align: left;
		cursor: pointer;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-family: inherit;
	}

	.glintmenu-links-list a:hover,
	.glintmenu-links > a:hover,
	.glintmenu-toggle-submenu:hover {
		color: var(--color-mauve, #5c5475);
	}

	/* ---------- Submenus ---------- */
	.glintmenu-submenu {
		padding-left: 1.5rem;
		margin-top: 0;
		display: grid;
		grid-template-rows: 0fr;
		transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	}

	.glintmenu-submenu-list {
		list-style: none;
		padding: 0;
		margin: 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.glintmenu-submenu.is-open {
		grid-template-rows: 1fr;
		margin-top: 1.5rem;
	}

	.glintmenu-submenu-list li {
		margin: 0;
	}

	.glintmenu-submenu-list a {
		font-size: 1.1rem;
		font-weight: 400;
		color: var(--color-bg, #fbecef);
		opacity: 0.85;
		line-height: 1.4;
		padding: 0.5rem 0;
		display: block;
	}

	.glintmenu-submenu-list a:hover {
		color: var(--color-mauve, #5c5475);
		opacity: 1;
	}

	.glintmenu-toggle-icon {
		transition: transform 0.3s ease;
		font-size: 1.2rem;
	}

	.glintmenu-toggle-submenu[aria-expanded="true"] .glintmenu-toggle-icon {
		transform: rotate(45deg);
	}

	/* ---------- Social Links ---------- */
	.glintmenu-social-links {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: auto;
	}

	.glintmenu-social-links a {
		color: var(--color-bg, #fbecef);
		opacity: 0.7;
		font-size: 1rem;
		text-decoration: none;
		letter-spacing: 0.05em;
	}

	.glintmenu-social-links a:hover {
		color: var(--color-mauve, #5c5475);
		opacity: 1;
	}

	/* ---------- Big Buttons ---------- */
	.glintmenu-button {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 32px !important;
		text-decoration: none;
		overflow: hidden;
		transition: transform 0.3s ease;
		transform: translateZ(0);
		border-radius: 25px;
		min-height: 0;
	}

	.glintmenu-button:hover {
		transform: scale(1.02);
	}

	/* Pattern background — hosts a per-button Game of Life canvas. */
	.glintmenu-button-pattern {
		position: absolute;
		inset: 0;
		background-color: var(--glintmenu-button-color, #333);
		border-radius: inherit;
		overflow: hidden;
	}

	/* Game of Life canvas — the brand colour is painted by the canvas itself
	   (data-bg-color), the simulation runs in white dots on top. */
	.glintmenu-gol-canvas {
		position: absolute;
		inset: 0;
		display: block;
		width: 100%;
		height: 100%;
		border-radius: inherit;
	}

	.glintmenu-button-pattern::before {
		content: "";
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.3);
		transition: opacity 0.3s ease;
		z-index: 1;
	}

	.glintmenu-button:hover .glintmenu-button-pattern::before {
		opacity: 0;
	}

	/* Button title */
	.glintmenu-button-title {
		position: relative;
		z-index: 2;
		color: #fff;
		font-family: var(--font-family-display, "Monument Extended", sans-serif) !important;
		font-size: clamp(3.5rem, 4.5vw, 5.5rem) !important;
		line-height: 1.02;
		font-weight: 700;
		margin: 0 !important;
		text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
	}

	/* Desktop: Position titles based on card location */
	@media (min-width: 1001px) {
		.glintmenu-overlay-content {
			grid-template-columns: 1fr 1.1fr 1.6fr;
			grid-template-rows: repeat(4, minmax(0, 1fr));
		}

		.glintmenu-links {
			grid-column: 1;
			grid-row: 1 / 5;
			height: 100%;
			min-height: 0;
		}

		.glintmenu-links .glintmenu-social-links,
		.glintmenu-links > .wp-block-glintmenu-social-links {
			margin-top: auto !important;
			padding-top: 1rem;
		}

		.glintmenu-button-1 {
			grid-column: 2;
			grid-row: 1;
		}

		.glintmenu-button-2 {
			grid-column: 2;
			grid-row: 2;
		}

		.glintmenu-button-3 {
			grid-column: 2;
			grid-row: 3;
		}

		.glintmenu-button-4 {
			grid-column: 2;
			grid-row: 4;
		}

		.glintmenu-gol-preview {
			grid-column: 3;
			grid-row: 1 / 5;
			position: relative;
			overflow: hidden;
			border-radius: 25px;
			background-color: #564d79;
		}

		.glintmenu-gol-preview-canvas {
			position: absolute;
			inset: 0;
			display: block;
			width: 100%;
			height: 100%;
		}

		.glintmenu-button,
		.glintmenu-feature-button {
			grid-column: 2;
			position: relative;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 0 0 2rem clamp(1rem, 1.8vw, 2.25rem) !important;
			border-radius: 0;
			text-decoration: none;
			transform: none !important;
			min-height: 0;
		}

		.glintmenu-button:hover,
		.glintmenu-feature-button:hover {
			transform: none;
		}

		.glintmenu-button-pattern {
			display: none;
		}

		.glintmenu-button-title {
			font-family: var(--wp--preset--font-family--pp-monument-normal, "PP Monument Normal", sans-serif) !important;
			font-weight: 300;
			font-size: clamp(3rem, 4vw, 5rem) !important;
			line-height: 1.02;
			text-align: left !important;
			color: var(--color-bg, #fbecef);
			text-shadow: none;
			transition: color 0.25s ease;
		}

		.glintmenu-button:hover .glintmenu-button-title,
		.glintmenu-button:focus-visible .glintmenu-button-title,
		.glintmenu-feature-button:hover .glintmenu-button-title,
		.glintmenu-feature-button:focus-visible .glintmenu-button-title {
			color: var(--glintmenu-button-color, #8b3dff);
		}

		.glintmenu-gol-preview-canvas {
			border-radius: inherit;
		}
	}

	@media (max-width: 1000px) {
		.glintmenu-gol-preview {
			display: none;
		}

		.glintmenu-button-title {
			font-size: clamp(2.25rem, 5vw, 3.25rem) !important;
		}

		.glintmenu-button-1,
		.glintmenu-button-2,
		.glintmenu-button-3,
		.glintmenu-button-4 {
			align-items: flex-start;
		
		}

		/* Boutons 1 et 3 alignés à gauche (évite conflit avec close button pour bouton 1) */
		.glintmenu-button-1,
		.glintmenu-button-3 {
			justify-content: flex-start;
		}
		.glintmenu-button-1 .glintmenu-button-title,
		.glintmenu-button-3 .glintmenu-button-title {
			text-align: left;
		}

		.glintmenu-button-2,
		.glintmenu-button-4 {
			justify-content: flex-end;
		}
		.glintmenu-button-2 .glintmenu-button-title,
		.glintmenu-button-4 .glintmenu-button-title {
			text-align: right;
		}
	}

	/* ---------- Smartphone (<640px) ---------- */
	@media (max-width: 640px) {
		.glintmenu-links {
			padding: 1rem 1rem 12px 1rem !important;
		}

		.glintmenu-links-list {
			gap: 0.75rem;
		}

		.glintmenu-links-list a,
		.glintmenu-toggle-submenu {
			font-size: 0.95rem;
		}

		.glintmenu-submenu-list a {
			font-size: 0.85rem;
			padding: 0.6rem 0;
		}

		.glintmenu-submenu-list {
			gap: 0.5rem;
		}

		.glintmenu-social-links {
			gap: 0.5rem;
			margin-top: 1rem;
		}

		.glintmenu-social-links a {
			font-size: 0.85rem;
		}

		.glintmenu-button-title {
			font-size: clamp(1.6rem, 7vw, 2.25rem) !important;
		}
	}

	/* ---------- Stagger Animation ---------- */
	@keyframes glintmenuFadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* ---------- Performance ---------- */
	.glintmenu-overlay {
		will-change: transform;
	}

	.glintmenu-overlay-content {
		contain: layout style paint;
	}

	/* ---------- Accessibility — Focus Styles ---------- */
	.glintmenu-links-list a:focus-visible,
	.glintmenu-toggle-submenu:focus-visible,
	.glintmenu-submenu-list a:focus-visible,
	.glintmenu-social-links a:focus-visible {
		outline: 2px solid #00a8ff;
		outline-offset: 4px;
		border-radius: 4px;
	}

	.glintmenu-button:focus-visible {
		outline: 3px solid #fff;
		outline-offset: 4px;
	}

	/* Skip link for keyboard users */
	.glintmenu-skip-link {
		position: absolute;
		top: -100%;
		left: 50%;
		transform: translateX(-50%);
		background: #00a8ff;
		color: #fff;
		padding: 0.75rem 1.5rem;
		border-radius: 4px;
		text-decoration: none;
		font-weight: 600;
		z-index: 10000;
		transition: top 0.2s ease;
	}

	.glintmenu-skip-link:focus {
		top: 1rem;
	}
}