/**
 * Vorlion Barbershop — header & footer responsive rules.
 *
 * TEMPLATE FILE: the ELEMENTOR_SCREEN_* placeholders are replaced with the breakpoints
 * from Elementor Site Settings → Layout → Breakpoints by Elementor's responsive file
 * compiler (inc/elementor-layout.php). Edit this file, not the compiled copy in uploads.
 */

/* Tablet and below */
@media (max-width: 1024px) {
	:root {
		--vbp-navbar-height: 88px;
	}

	.vbp-navbar {
		padding: 20px 0;
	}

	.vbp-navbar__logo .vbp-logo__img {
		width: 160px;
	}

	.vbp-navbar__right {
		display: none;
	}

	.vbp-menu-toggle {
		display: flex;
	}

	.vbp-page-title {
		min-height: 400px;
		padding-top: 40px;
	}

	.vbp-page-title__shape {
		top: -300px;
		width: 900px;
	}

	.vbp-page-title__heading {
		font-size: 56px;
	}

	.vbp-footer {
		padding: 56px 0 48px;
	}

	.vbp-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px 32px;
	}

	.vbp-footer__brand {
		grid-column: 1 / -1;
	}

	.vbp-footer__col {
		padding-top: 0;
	}

	.vbp-footer__bottom {
		margin-top: 40px;
	}
}

/* Mobile (Figma "Homepage mobile view", 393px) */
@media (max-width: 767px) {
	:root {
		--vbp-navbar-height: 91px;
	}

	.vbp-topbar {
		padding: 19px 0;
	}

	.vbp-topbar__text {
		max-width: 327px;
		margin-inline: auto;
		font-size: 16px;
		line-height: 1.29;
	}

	/* Logo centred, plain three-bar menu icon on the right. */
	.vbp-navbar {
		padding: 24px 0;
	}

	.vbp-navbar__inner {
		position: relative;
		justify-content: center;
	}

	.vbp-navbar__logo .vbp-logo__img {
		width: 151px;
	}

	.vbp-menu-toggle,
	.vbp-menu-toggle:hover,
	.vbp-menu-toggle:focus {
		position: absolute;
		top: 50%;
		right: var(--vbp-content-padding-right);
		gap: 5.4px;
		width: 44px;
		height: 44px;
		padding: 0 6.5px;
		border: 0;
		border-radius: 0;
		transform: translateY(-50%);
	}

	.vbp-menu-toggle__bar {
		height: 3.6px;
		border-radius: 0;
	}

	.vbp-header.is-menu-open .vbp-menu-toggle__bar:nth-child(1) {
		transform: translateY(9px) rotate(45deg);
	}

	.vbp-header.is-menu-open .vbp-menu-toggle__bar:nth-child(3) {
		transform: translateY(-9px) rotate(-45deg);
	}

	.vbp-mobile-panel .vbp-btn {
		flex: 1 1 100%;
		width: 100%;
		height: 65px;
		font-size: 20px;
	}

	/* Page title (Figma "About us mobile view": 393 × 370, 42px title, lion 682 × 882). */
	.vbp-page-title {
		min-height: 370px;
		padding-top: 0;
		background-position: 50% 40%;
		background-size: 218% auto;
	}

	.vbp-page-title__shape {
		top: -242px;
		left: 50%;
		width: 682px;
	}

	/* Figma: title box 178–200px wide, so longer titles ("Our Services") wrap onto two lines. */
	.vbp-page-title__heading {
		max-width: 200px;
		margin-inline: auto;
		font-size: 42px;
	}

	/* Footer: centred brand block, then Explore / Get in touch stacked and indented. */
	.vbp-footer {
		padding: 27px 0 19px;
	}

	.vbp-footer__bg {
		top: calc(50% - 239px);
		left: calc(50% - 29px);
		width: 2408px;
		height: 1404px;
		transform: translate(-50%, -50%) rotate(-79.37deg);
	}

	.vbp-footer__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 47px 0;
	}

	.vbp-footer__brand {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.vbp-footer__text {
		max-width: none;
		margin-top: 24px;
		font-size: 18px;
		line-height: 25.6px;
	}

	.vbp-social {
		justify-content: center;
		margin: 8px 0 0 !important;
	}

	.vbp-footer__col {
		padding: 0 0 0 23px;
	}

	.vbp-footer__col + .vbp-footer__col {
		margin-top: 5px;
	}

	.vbp-footer__col:last-child .vbp-footer__heading {
		margin-bottom: 19px;
	}

	.vbp-footer__menu a {
		font-size: 18px;
		line-height: 25.6px;
	}

	.vbp-contact {
		gap: 16px;
	}

	.vbp-contact__text {
		max-width: 210px;
		font-size: 18px;
	}

	.vbp-footer__bottom {
		margin-top: 47px;
		padding-top: 12px;
	}

	.vbp-footer__copyright {
		font-size: 18px;
		line-height: 22.4px;
	}
}

/* Desktop: the mobile panel never shows. */
@media (min-width: 1025px) {
	.vbp-mobile-panel {
		display: none !important;
	}
}