/**
 * Header Styles — SIFARA Systems
 * Glassmorphism pill-shaped header, exact match to design file.
 *
 * @package Skavend
 */

/* ==========================================
   Header Shell — glassmorphism pill
   ========================================== */
/* #masthead qualifier: the parent theme (hello-elementor) ships its own
   `.site-header { position: relative; }` in header-footer.css, which can
   load after this file and win on equal specificity. The ID guarantees
   this rule always wins regardless of load order. */
#masthead.site-header {
	box-sizing: border-box;
	position: fixed !important;
	top: 14px;
	left: 50%;
	transform: translateX(-50%);
	z-index: var(--z-header, 9999);
	width: 90%;
	max-width: none;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 12px 11px 20px;
	border-radius: 999px;
	background: linear-gradient(180deg, rgba(248,241,231,.94), rgba(245,237,226,.82));
	border: 1px solid rgba(255,255,255,.65);
	box-shadow:
		0 1px 0 rgba(255,255,255,.75) inset,
		0 -1px 0 rgba(150,125,90,.12) inset,
		0 18px 36px rgba(10, 48, 36, 0.14),
		0 40px 70px rgba(10, 48, 36, 0.08);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transform-style: preserve-3d;
	transition:
		top var(--transition-base, .3s ease),
		box-shadow var(--transition-base, .3s ease),
		background var(--transition-base, .3s ease),
		transform var(--transition-base, .3s ease),
		backdrop-filter var(--transition-base, .3s ease);
	will-change: transform, box-shadow;
}

/* 3D settling effect on scroll */
#masthead.site-header.is-scrolled {
	top: 10px;
	background: linear-gradient(180deg, rgba(250,245,237,.98), rgba(247,240,229,.96));
	box-shadow:
		0 1px 0 rgba(255,255,255,.92) inset,
		0 -1px 0 rgba(150,125,90,.18) inset,
		0 28px 54px rgba(6, 44, 33, 0.24),
		0 12px 24px rgba(6, 44, 33, 0.12),
		0 2px 0 rgba(193, 154, 107, 0.22);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transform: translateX(-50%) translate3d(0, 2px, 24px) scale(0.993);
}

@media (prefers-reduced-motion: reduce) {
	.site-header { transition: none; }
}

.header-container {
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	position: relative;
}

body.is-mobile-nav-open {
	overflow: hidden;
}

/* ==========================================
   Brand — monogram + name + tagline
   ========================================== */
.brand-logo {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-shrink: 0;
	text-decoration: none;
	color: inherit;
}

.brand-logo:hover {
	text-decoration: none;
	color: inherit;
}

.brand-logo__monogram {
	font: 700 38px/1 'Playfair Display', Georgia, serif;
	color: #0a3d2d;
	letter-spacing: -0.16em;
	padding-right: 8px;
}

.brand-logo__text {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.brand-logo__name {
	font: 600 25px/1 'Playfair Display', Georgia, serif;
	color: #12241d;
	letter-spacing: 0.005em;
	white-space: nowrap;
}

.brand-logo__tagline {
	font-size: 12px;
	color: #b07f45;
	letter-spacing: 0.005em;
	white-space: nowrap;
}

/* Custom logo image */
.brand-logo__image {
	display: block;
	height: auto;
	max-height: 48px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* ==========================================
   Navigation
   ========================================== */
.header-nav {
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 4px;
}

button.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: #0a3d2d;
	border-radius: 999px;
	transition: background 0.18s ease;
}

button.menu-toggle:hover {
	background: rgba(255, 255, 255, 0.72);
}

.menu-toggle__icon {
	display: block;
	width: 24px;
	height: 24px;
}

.menu-toggle__icon--close {
	display: none;
}

button.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open {
	display: none;
}

button.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close {
	display: block;
}

.nav-menu {
	display: flex;
	align-items: center;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.nav-menu > li {
	position: relative;
}

.nav-menu > li > a {
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	color: #2c3b35;
	padding: 12px 14px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.nav-menu > li > a:hover {
	color: #0a4132;
	background: rgba(255,255,255,.78);
	box-shadow:
		0 1px 0 rgba(255,255,255,.92) inset,
		0 7px 15px rgba(46,60,52,.1);
	transform: translateY(-1px);
	text-decoration: none;
}

.nav-menu > li > a:active {
	transform: translateY(1px);
	box-shadow: 0 2px 5px rgba(46,60,52,.14) inset;
}

/* Active / current page */
.nav-menu > li.current-menu-item > a,
.nav-menu > li.current_page_item > a,
.nav-menu > li.current-menu-ancestor > a {
	position: relative;
	color: #0c3527;
	font-weight: 600;
	padding-bottom: 16px;
	background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(239,230,216,.74));
	box-shadow:
		0 1px 0 rgba(255,255,255,.96) inset,
		0 7px 15px rgba(46,60,52,.11);
}

.nav-menu > li.current-menu-item > a::after,
.nav-menu > li.current_page_item > a::after,
.nav-menu > li.current-menu-ancestor > a::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 6px;
	transform: translateX(-50%);
	width: 30px;
	height: 3px;
	border-radius: 3px;
	background: #0a3d2d;
}

/* Dropdown sub-menus */
.nav-menu ul {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 210px;
	list-style: none;
	margin: 6px 0 0;
	padding: 8px 0;
	background: rgba(255,255,255,.97);
	border-radius: 12px;
	box-shadow: 0 12px 32px rgba(10,61,45,.14);
	z-index: 100;
}

.nav-menu li:hover > ul,
.nav-menu li:focus-within > ul {
	display: block;
}

.nav-menu ul a {
	display: block;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 500;
	color: #2c3b35;
	text-decoration: none;
	transition: background 0.15s ease;
}

.nav-menu ul a:hover {
	background: rgba(11,66,50,.06);
	color: #0a3d2d;
	text-decoration: none;
}

/* ==========================================
   CTA Button
   ========================================== */
.header-cta-wrap {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.header-cta {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	height: 56px;
	padding: 0 22px;
	border-radius: 999px;
	background: linear-gradient(180deg, #0b4232, #07301f);
	color: #f4e6cf;
	font-size: 16px;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 14px 28px rgba(6,50,38,.24);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.header-cta:hover {
	transform: translateY(-2px);
	color: #fbf1e0;
	text-decoration: none;
	box-shadow:
		0 1px 0 rgba(255,255,255,.22) inset,
		0 18px 34px rgba(6,50,38,.3);
}

.header-cta:active {
	transform: translateY(1px);
	box-shadow: 0 2px 6px rgba(3,32,24,.5) inset;
}

.header-cta svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

/* ==========================================
   Responsive — 1280px
   ========================================== */
@media (max-width: 1280px) {
	.site-header {
		padding: 10px 12px 10px 16px;
		margin-top: 16px;
		gap: 10px;
	}

	.brand-logo__monogram {
		font-size: 30px;
	}

	.brand-logo__name {
		font-size: 20px;
	}

	.nav-menu > li > a {
		font-size: 14px;
		padding: 10px 12px;
	}

	.nav-menu > li.current-menu-item > a,
	.nav-menu > li.current_page_item > a {
		padding-bottom: 14px;
	}

	.header-cta {
		height: 48px;
		padding: 0 18px;
		font-size: 14px;
		gap: 10px;
	}

	.header-cta svg {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================
   Responsive — 1024px
   ========================================== */
@media (max-width: 1024px) {
	.site-header {
		gap: 8px;
	}

	.brand-logo__name {
		font-size: 18px;
	}

	.brand-logo__tagline {
		font-size: 10px;
	}

	.nav-menu > li > a {
		padding: 8px 10px;
		font-size: 13px;
	}
}

/* ==========================================
   Responsive — 768px (mobile)
   ========================================== */
@media (max-width: 768px) {
	#masthead.site-header {
		top: 10px;
		width: calc(100% - 24px);
		max-width: none;
		padding: 10px 12px;
		border-radius: 20px;
		gap: 8px;
	}

	.header-container {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		grid-template-areas:
			"logo toggle cta"
			"nav nav nav";
		align-items: center;
		column-gap: 10px;
		row-gap: 0;
	}

	.brand-logo {
		grid-area: logo;
		gap: 8px;
		min-width: 0;
	}

	.brand-logo__image {
		max-height: 40px;
		max-width: 132px;
	}

	.brand-logo__monogram {
		font-size: 26px;
		padding-right: 4px;
	}

	.brand-logo__name {
		font-size: 17px;
	}

	.brand-logo__tagline {
		display: none;
	}

	button.menu-toggle {
		grid-area: toggle;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
	}

	.header-cta-wrap {
		grid-area: cta;
	}

	.header-nav {
		grid-area: nav;
		display: none;
		width: 100%;
		margin: 10px 0 0;
		flex-direction: column;
		background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(246,239,228,.92));
		border-radius: 16px;
		padding: 14px 10px;
		box-shadow: 0 12px 36px rgba(46,60,52,.18);
		border: 1px solid rgba(255,255,255,.75);
	}

	.header-nav.active {
		display: flex;
	}

	.nav-menu {
		flex-direction: column;
		gap: 4px;
		width: 100%;
	}

	.nav-menu > li > a {
		width: 100%;
		text-align: center;
		padding: 12px 14px;
		font-size: 15px;
	}

	.nav-menu > li.current-menu-item > a,
	.nav-menu > li.current_page_item > a {
		padding-bottom: 12px;
	}

	.nav-menu > li.current-menu-item > a::after,
	.nav-menu > li.current_page_item > a::after {
		display: none;
	}

	.nav-menu ul {
		position: static;
		box-shadow: none;
		background: transparent;
		margin: 0;
		padding: 0 0 0 16px;
	}

	.header-cta {
		padding: 0 14px;
		height: 42px;
		font-size: 13px;
		gap: 8px;
	}

	.header-cta svg {
		width: 18px;
		height: 18px;
	}
}

/* ==========================================
   Responsive — 480px
   ========================================== */
@media (max-width: 480px) {
	#masthead.site-header {
		width: calc(100% - 16px);
		padding: 8px 10px;
		gap: 6px;
	}

	.brand-logo__image {
		max-height: 36px;
		max-width: 118px;
	}

	.brand-logo__monogram {
		font-size: 22px;
	}

	.brand-logo__name {
		font-size: 15px;
	}

	.header-cta span {
		display: none;
	}

	.header-cta {
		padding: 0 12px;
		height: 38px;
		gap: 0;
	}

	button.menu-toggle {
		padding: 4px;
	}
}