/* Sylkmerie compact mobile dropdown + visible language switcher */

.sylk-mobile-controls,
.sylk-mobile-menu,
.sylk-mobile-lang {
	display: none;
}

.sylk-desktop-navigation {
	display: contents;
}

@media (max-width: 781px) {
	/* Hide the standard WordPress navigation on phones. */
	.sylk-desktop-navigation {
		display: none !important;
	}

	/* Compact brand header: logo left, language + menu right. */
	.sylk-header-inner {
		position: relative;
		min-height: 68px !important;
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		gap: .75rem !important;
	}

	.sylk-header .wp-block-site-logo {
		margin: 0 !important;
		flex: 1 1 auto;
		min-width: 0;
	}

	.sylk-header .wp-block-site-logo img {
		width: auto !important;
		max-width: 124px !important;
		height: auto !important;
	}

	.sylk-mobile-controls {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8px;
		flex: 0 0 auto;
		margin-left: auto;
		position: relative;
		z-index: 1000;
	}

	/* EN / PL segmented pill — always visible on mobile. */
	.sylk-mobile-lang {
		display: inline-flex;
		align-items: center;
		padding: 3px;
		gap: 2px;
		border: 1px solid rgba(61, 57, 50, .24);
		border-radius: 999px;
		background: rgba(255, 253, 250, .96);
		box-sizing: border-box;
	}

	.sylk-mobile-lang__item {
		min-width: 34px;
		height: 34px;
		padding: 0 8px;
		box-sizing: border-box;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 999px;
		color: #746d64 !important;
		text-decoration: none !important;
		font-size: .72rem;
		line-height: 1;
		font-weight: 600;
		letter-spacing: .08em;
		transition: background-color .18s ease, color .18s ease;
		-webkit-tap-highlight-color: transparent;
	}

	.sylk-mobile-lang__item:hover,
	.sylk-mobile-lang__item:focus-visible {
		background: #f7f4ee;
		color: #3d3932 !important;
		outline: none;
	}

	.sylk-mobile-lang__item.is-active {
		background: #3d3932;
		color: #fffdfa !important;
	}

	/* Hamburger dropdown. */
	.sylk-mobile-menu {
		display: block;
		position: relative;
		flex: 0 0 auto;
		margin: 0;
		padding: 0;
		z-index: 1001;
	}

	.sylk-mobile-menu > summary {
		list-style: none;
	}

	.sylk-mobile-menu > summary::-webkit-details-marker {
		display: none;
	}

	.sylk-mobile-menu__toggle {
		width: 42px;
		height: 42px;
		box-sizing: border-box;
		border: 1px solid rgba(61, 57, 50, 0.42);
		border-radius: 999px;
		background: #fffdfa;
		cursor: pointer;
		display: grid;
		place-items: center;
		padding: 0;
		margin: 0;
		-webkit-tap-highlight-color: transparent;
	}

	.sylk-mobile-menu__icon {
		width: 17px;
		height: 13px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.sylk-mobile-menu__icon span {
		display: block;
		height: 1.5px;
		width: 100%;
		background: #3d3932;
		border-radius: 999px;
		transform-origin: center;
		transition: transform .18s ease, opacity .18s ease;
	}

	.sylk-mobile-menu[open] .sylk-mobile-menu__icon span:nth-child(1) {
		transform: translateY(5.75px) rotate(45deg);
	}

	.sylk-mobile-menu[open] .sylk-mobile-menu__icon span:nth-child(2) {
		opacity: 0;
	}

	.sylk-mobile-menu[open] .sylk-mobile-menu__icon span:nth-child(3) {
		transform: translateY(-5.75px) rotate(-45deg);
	}

	.sylk-mobile-menu__panel {
		position: absolute;
		top: calc(100% + 10px);
		right: 0;
		width: min(270px, calc(100vw - 32px));
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 10px;
		background: #fffdfa;
		border: 1px solid rgba(61, 57, 50, 0.16);
		border-radius: 14px;
		box-shadow: 0 18px 45px rgba(45, 42, 38, 0.14);
	}

	.sylk-mobile-menu__link {
		display: block;
		padding: 13px 14px;
		color: #3d3932 !important;
		text-decoration: none !important;
		font-size: 1rem;
		line-height: 1.25;
		border-radius: 9px;
	}

	.sylk-mobile-menu__link:hover,
	.sylk-mobile-menu__link:focus-visible {
		background: #f7f4ee;
		color: #3d3932 !important;
		outline: none;
	}

	/* Keep any old WordPress mobile overlay hidden. */
	.sylk-header .wp-block-navigation__responsive-container-open,
	.sylk-header .wp-block-navigation__responsive-container,
	.sylk-header .wp-block-navigation {
		display: none !important;
	}

	/* Mobile typography. */
	.sylk-display,
	h1.sylk-display,
	h1.wp-block-heading.sylk-display {
		/* ~38–42 px on phones: calmer, especially for longer Polish headings. */
		font-size: clamp(2.35rem, 9.5vw, 2.625rem) !important;
		line-height: 1.04 !important;
		letter-spacing: -0.012em;
	}

	.sylk-section-title,
	h2.wp-block-heading.sylk-section-title {
		font-size: clamp(1.9rem, 8vw, 2.45rem) !important;
		line-height: 1.08 !important;
	}

	.sylk-lead {
		font-size: 1rem !important;
		line-height: 1.58 !important;
	}
}

/* Very narrow phones: save a few extra pixels without hiding the language switch. */
@media (max-width: 360px) {
	.sylk-header .wp-block-site-logo img {
		max-width: 112px !important;
	}

	.sylk-mobile-controls {
		gap: 6px;
	}

	.sylk-mobile-lang__item {
		min-width: 31px;
		height: 31px;
		padding: 0 6px;
		font-size: .68rem;
	}

	.sylk-mobile-menu__toggle {
		width: 40px;
		height: 40px;
	}
}