/**
 * Vorlion Barbershop — header & footer (desktop / base styles).
 *
 * --vbp-content-width and --vbp-content-padding-* are printed inline from
 * Elementor Site Settings → Layout (see inc/elementor-layout.php).
 * Breakpoint-dependent rules live in responsive.css (compiled with Elementor breakpoints).
 */

:root {
	--vbp-content-width: 1140px;
	--vbp-content-padding-left: 10px;
	--vbp-content-padding-right: 10px;

	/* Top bar height; header.js keeps it in sync with the real height (the text can wrap on small screens). */
	--vbp-topbar-height: 56px;
	--vbp-adminbar-height: 0px;

	/* Height of the logo/menu bar; the VBP Banner pads its content by this when the header floats over it. */
	--vbp-navbar-height: 127px;

	/* Minion Pro (design font, add via Elementor → Custom Fonts or Adobe Fonts); Crimson Pro is the free look-alike fallback. */
	--vbp-font: "Minion Pro", "Minion", "Crimson Pro", Georgia, "Times New Roman", serif;

	--vbp-color-gold: #c08e2f;
	--vbp-color-gold-light: #f3d693;
	--vbp-color-gold-text: #c9a227;
	--vbp-color-black: #0d0d0d;
	--vbp-color-muted: #b0b0b0;
	--vbp-color-icon-bg: #31302d;
	--vbp-color-divider: #242424;
	--vbp-color-white: #fff;
}

/* WordPress admin bar (logged-in users) takes space above the page. */
.admin-bar {
	--vbp-adminbar-height: 32px;
}

@media (max-width: 782px) {
	.admin-bar {
		--vbp-adminbar-height: 46px;
	}
}

/* Layout container — mirrors an Elementor boxed container. */
.vbp-container {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--vbp-content-width) + var(--vbp-content-padding-left) + var(--vbp-content-padding-right));
	margin-inline: auto;
	padding-left: var(--vbp-content-padding-left);
	padding-right: var(--vbp-content-padding-right);
}

.vbp-header,
.vbp-footer {
	font-family: var(--vbp-font);
}

.vbp-header ul,
.vbp-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.vbp-header {
	position: relative;
	z-index: 100;
}

.vbp-topbar {
	background-color: var(--vbp-color-gold);
	padding: 16px 0 17px;
}

.vbp-topbar__text {
	margin: 0;
	color: #000;
	font-size: 15.83px;
	line-height: 1.43;
	text-align: center;
}

.vbp-navbar {
	background-color: var(--vbp-color-black);
	padding: 31px 0;
}

/*
 * Floats over the first page section (hero). No `top` → stays right below the top bar.
 * In the Elementor editor the PHP check only sees saved data, so a freshly dropped VBP Banner is matched with :has().
 */
.vbp-header--transparent .vbp-navbar,
.elementor-editor-active:has(.vbp-banner) .vbp-navbar {
	position: absolute;
	left: 0;
	right: 0;
	background-color: transparent;
	transition: background-color 0.2s ease;
}

.vbp-header--transparent.is-menu-open .vbp-navbar {
	background-color: var(--vbp-color-black);
}

.vbp-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.vbp-logo {
	display: inline-flex;
	flex-shrink: 0;
	line-height: 0;
}

.vbp-navbar__logo .vbp-logo__img {
	width: 207px;
	height: auto;
}

.vbp-navbar__right {
	display: flex;
	align-items: center;
	gap: clamp(24px, 7.9vw, 152px);
}

.vbp-nav__menu {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3.44vw, 66px);
}

.vbp-nav__menu a,
.vbp-mobile-nav__menu a {
	color: var(--vbp-color-white);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.43;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vbp-nav__menu a:hover,
.vbp-nav__menu a:focus-visible,
.vbp-nav__menu .current-menu-item > a,
.vbp-mobile-nav__menu a:hover,
.vbp-mobile-nav__menu a:focus-visible,
.vbp-mobile-nav__menu .current-menu-item > a {
	color: var(--vbp-color-gold-text);
}

.vbp-header__buttons {
	display: flex;
	align-items: center;
	gap: 16px;
}

.vbp-btn {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: var(--vbp-font);
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	white-space: nowrap;
	text-decoration: none;
	transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover states from the Figma button variants (Smart Animate, 0.3s). */
.vbp-btn--gold,
.vbp-btn--gold:hover,
.vbp-btn--gold:focus-visible {
	position: relative;
	isolation: isolate;
	/* No border (Figma has none): a transparent border would show the gradient as a thin rim on hover. */
	border: 0;
	background-image: linear-gradient(180deg, var(--vbp-color-gold-light) 0%, var(--vbp-color-gold) 100%);
	color: var(--vbp-color-black);
}

/* Gradients can't transition, so the light-gold hover fill fades in on a layer behind the label. */
.vbp-btn--gold::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	border-radius: inherit;
	background-color: var(--vbp-color-gold-light);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.vbp-btn--gold:hover::before,
.vbp-btn--gold:focus-visible::before {
	opacity: 1;
}

.vbp-btn--outline {
	border-color: var(--vbp-color-white);
	background-color: transparent;
	color: var(--vbp-color-white);
}

.vbp-btn--outline:hover,
.vbp-btn--outline:focus-visible {
	background-color: #fff4da;
	color: #000;
}

/* Narrow desktops: tighten the bar so logo, menu and buttons still fit on one line. */
@media (max-width: 1279px) {
	:root {
		--vbp-navbar-height: 121px;
	}

	.vbp-btn {
		width: auto;
		height: 56px;
		padding-inline: 24px;
		font-size: 16px;
	}
}

/* Mobile menu toggle + panel (shown below the tablet breakpoint, see responsive.css). */
.vbp-menu-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	width: 48px;
	height: 48px;
	padding: 12px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
}

.vbp-menu-toggle:hover,
.vbp-menu-toggle:focus {
	background: transparent;
}

.vbp-menu-toggle__bar {
	display: block;
	width: 100%;
	height: 2px;
	border-radius: 2px;
	background-color: var(--vbp-color-white);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

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

.vbp-header.is-menu-open .vbp-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

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

.vbp-mobile-panel[hidden] {
	display: none;
}

.vbp-mobile-panel {
	padding: 8px 0 32px;
	background-color: var(--vbp-color-black);
}

.vbp-mobile-nav__menu {
	display: flex;
	flex-direction: column;
}

.vbp-mobile-nav__menu li {
	border-bottom: 1px solid var(--vbp-color-divider);
}

.vbp-mobile-nav__menu a {
	display: block;
	padding: 14px 0;
	font-size: 18px;
}

.vbp-mobile-panel .vbp-header__buttons {
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

/* -------------------------------------------------------------------------
 * Page title banner (inner pages; template-parts/page-title.php)
 * Figma "About us": 1920 × 465 under the top bar, #1c1c1c + dark studio backdrop, a large
 * #191919 lion shape (1048 × 1352, 330px above the top), 70px white title. The header floats over it.
 * ---------------------------------------------------------------------- */

.vbp-page-title {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 465px;
	padding: 44px 0 0;
	overflow: hidden;
	background: #1c1c1c var(--vbp-page-title-bg) center / cover no-repeat;
	font-family: var(--vbp-font);
	text-align: center;
}

.vbp-page-title__shape {
	position: absolute;
	z-index: -1;
	top: -330px;
	left: calc(50% + 13px);
	width: 1048px;
	max-width: none;
	height: auto;
	transform: translateX(-50%);
	pointer-events: none;
}

.vbp-page-title > .vbp-container {
	position: relative;
}

.vbp-page-title__heading {
	margin: 0;
	color: var(--vbp-color-white);
	font-family: var(--vbp-font);
	font-size: 70px;
	font-weight: 600;
	line-height: 1.1;
}

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

.vbp-footer {
	position: relative;
	overflow: hidden;
	padding: 70px 0 80px;
	background-color: var(--vbp-color-black);
	color: var(--vbp-color-muted);
}

.vbp-footer__bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1920px;
	height: 1119px;
	background: url("../images/footer-bg.jpg") center / cover no-repeat;
	transform: translate(-50%, -50%) rotate(-39.47deg);
	pointer-events: none;
}

.vbp-footer > .vbp-container {
	position: relative;
}

.vbp-footer__grid {
	display: grid;
	grid-template-columns: 41.72% 30.72% minmax(0, 1fr);
}

.vbp-footer__logo .vbp-logo__img {
	width: 171px;
	height: auto;
}

.vbp-footer__text {
	max-width: 516px;
	margin: 25px 0 0;
	font-size: 20px;
	line-height: 1.28;
}

.vbp-social {
	display: flex;
	gap: 8px;
	margin: 15px 0 0 -10px !important;
}

.vbp-social__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	transition: opacity 0.2s ease;
}

.vbp-social__link:hover,
.vbp-social__link:focus-visible {
	opacity: 0.75;
}

.vbp-footer__col {
	padding-top: 10px;
}

.vbp-footer__heading {
	margin: 0 0 16px;
	color: var(--vbp-color-gold-text);
	font-family: var(--vbp-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}

.vbp-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 9.6px;
}

.vbp-footer__menu a,
.vbp-contact__text {
	color: var(--vbp-color-muted);
	font-size: 20px;
	text-decoration: none;
	transition: color 0.2s ease;
}

.vbp-footer__menu a {
	line-height: 1.28;
}

.vbp-footer__menu a:hover,
.vbp-footer__menu a:focus-visible,
.vbp-footer__menu .current-menu-item > a,
a.vbp-contact__text:hover,
a.vbp-contact__text:focus-visible {
	color: var(--vbp-color-gold-text);
}

.vbp-contact {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.vbp-contact__item {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vbp-contact__icon {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 37px;
	border-radius: 50%;
	background-color: var(--vbp-color-icon-bg);
}

.vbp-contact__text {
	max-width: 359px;
	line-height: 1.43;
}

.vbp-footer__bottom {
	margin-top: 37px;
	padding-top: 25px;
	border-top: 1px solid var(--vbp-color-divider);
}

.vbp-footer__copyright {
	margin: 0;
	font-size: 20px;
	line-height: 1.12;
	text-align: center;
}