/*
 * WP JAC Fras - moduł "mobile" (inc/modules/mobile.php).
 * 1) ikony menu mobilnego (inline SVG)  2) bounce  3) boczny odstęp tekstu na mobile
 */

:root {
	/* boczny odstęp tekstu na mobile - zmień tu, jeśli chcesz inny */
	--wp-jac-mobile-gutter: 2rem;
	/* siła i czas bounce */
	--wp-jac-bounce-time: 0.7s;
}

/* --- 1) Ikony menu --- */
.wp-jac-nav .wp-block-navigation__responsive-container-open,
.wp-jac-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp-jac-orange, #fa5f3d);
	line-height: 0;
	transform-origin: 50% 50%;
	/* niewielki oddech wokół hamburgera / X; reset stylu przycisku Choty */
	padding: 0.8rem 1rem;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.wp-jac-nav .wp-jac-icon {
	display: block;
	width: 4rem;
	height: auto;
	fill: currentColor;
}

/* --- 2) Bubble bounce --- */
@keyframes wp-jac-bounce {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.18, 0.86); }
	45%  { transform: scale(0.92, 1.1); }
	65%  { transform: scale(1.06, 0.97); }
	82%  { transform: scale(0.98, 1.02); }
	100% { transform: scale(1); }
}

/* hamburger: lekki bounce po załadowaniu (przycisk widoczny tylko na mobile) */
.wp-jac-nav .wp-block-navigation__responsive-container-open {
	animation: wp-jac-bounce var(--wp-jac-bounce-time) ease-out 0.25s 1 both;
}

/* klik w hamburger / X (klasę dodaje mobile.js) */
.wp-jac-nav .wp-jac-bounce {
	animation: wp-jac-bounce var(--wp-jac-bounce-time) ease-out 1;
}

/* motto: bounce tylko przy ładowaniu / przeładowaniu strony; narożnik przy krawędzi kontenera stoi w miejscu */
.wp-jac-bubble {
	transform-origin: 0 0;
	animation: wp-jac-bounce var(--wp-jac-bounce-time) ease-out 0.1s 1 both;
}

@media (prefers-reduced-motion: reduce) {
	.wp-jac-nav .wp-block-navigation__responsive-container-open,
	.wp-jac-nav .wp-jac-bounce,
	.wp-jac-bubble {
		animation: none;
	}
}

/* Menu mobilne (nakładka): ramki aktywnej pozycji nie mogą ściskać pozycji - odstęp między nimi i luźniejszy padding */
/* Selektory celowo długie: rdzeń WP w nakładce ustawia padding:0 i gap:inherit z wyższą specyficznością. */
.wp-jac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
.wp-jac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
	gap: 1.4rem;
}

.wp-jac-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
	display: inline-block;
	padding: 0.5rem 1.1rem;
}

/* --- 3) Boczny odstęp tekstu na mobile --- */
@media (max-width: 781px) {
	/* tekst bezpośrednio w kolumnach (WP składa je w stos poniżej 782px) */
	.wp-jac-content .wp-block-column > :is(p, h1, h2, h3, h4, h5, h6, blockquote, pre, .wp-block-buttons, .wp-block-search),
	/* tekst bezpośrednio w grupie na całą szerokość bez własnego paddingu */
	.wp-jac-content .wp-block-group.alignfull:not(.has-global-padding) > :is(p, h1, h2, h3, h4, h5, h6, blockquote, pre, .wp-block-buttons, .wp-block-search) {
		padding-left: var(--wp-jac-mobile-gutter);
		padding-right: var(--wp-jac-mobile-gutter);
	}

	/* listy mają własne wcięcie na punktory - odstęp dokładamy do wcięcia */
	.wp-jac-content .wp-block-column > :is(ul, ol),
	.wp-jac-content .wp-block-group.alignfull:not(.has-global-padding) > :is(ul, ol) {
		padding-left: calc(var(--wp-jac-mobile-gutter) + 2em);
		padding-right: var(--wp-jac-mobile-gutter);
	}
}