/*--------------------------------------------------------------
  Lavena — responsive.css
  Breakpoints: 360 (xs) / 768 (tablet) / 1024 (desktop) / 1440 (large).
  Most sizing is fluid via clamp(); these rules handle structure.
--------------------------------------------------------------*/

/* Extra-small phones (≤ 360px) */
@media (max-width: 360px) {
	:root {
		--lavena-gutter: 14px;
	}

	.lavena-header__greeting {
		font-size: 12px;
	}

	.lavena-bottomnav__label {
		font-size: 10.5px;
	}
}

/* Tablet (≥ 768px) */
@media (min-width: 768px) {
	.lavena-drawer {
		padding: 26px 22px;
	}

	.lavena-bottomnav {
		width: min(100% - 48px, 520px);
	}
}

/* Desktop (≥ 1024px): drawer/bottom-nav give way to inline nav. */
@media (min-width: 1024px) {
	.lavena-header {
		position: sticky;
	}

	.lavena-header__inner {
		min-height: clamp(76px, 7vw, 92px);
	}

	/* Sidebar layouts on blog templates */
	body.blog .lavena-content-wrap,
	body.archive .lavena-content-wrap,
	body.search .lavena-content-wrap {
		padding-block: 40px;
	}
}

/* Large desktop (≥ 1440px) */
@media (min-width: 1440px) {
	:root {
		--lavena-gutter: 40px;
	}
}

/* Print: strip fixed chrome */
@media print {
	.lavena-header,
	.lavena-bottomnav,
	.lavena-drawer,
	.lavena-overlay {
		display: none !important;
	}
}