/* ==========================================================================
   AAW Site Header Widget
   ========================================================================== */

.aaw-header,
.aaw-header * {
	box-sizing: border-box;
}

.aaw-header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 999;
	background-color: #F7F7F7;
	transition: background-color 0.35s ease, backdrop-filter 0.35s ease,
		-webkit-backdrop-filter 0.35s ease, box-shadow 0.35s ease;
}

.aaw-header--sticky {
	position: sticky;
}

/* -------------------------------------------------------------------------
   Inner container
   ------------------------------------------------------------------------- */

.aaw-header-inner {
	position: relative;
	z-index: 2;
	max-width: 1300px;
	margin: 0 auto;
	padding: 20px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* -------------------------------------------------------------------------
   Logo
   ------------------------------------------------------------------------- */

.aaw-header-logo {
	flex: 0 0 auto;
}

.aaw-header-logo a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	outline: none;
}

.aaw-header-logo-text {
	font-size: 24px;
	font-weight: 700;
	line-height: 1;
	color: #111111;
	white-space: nowrap;
}

.aaw-header-logo img {
	display: block;
	width: 120px;
	height: auto;
}

/* -------------------------------------------------------------------------
   Primary navigation (desktop / normal state)
   ------------------------------------------------------------------------- */

.aaw-header-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
}

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

.aaw-header-nav-list a {
	display: inline-block;
	text-decoration: none;
	font-size: 15px;
	color: #3A3A3A;
	white-space: nowrap;
	opacity: 1;
	transform: translateX(0);
	transition: color 0.25s ease, opacity 0.32s ease, transform 0.38s ease;
}

.aaw-header-nav-list a:hover,
.aaw-header-nav-list a.aaw-nav-active {
	color: #111111;
}

/* Flip/slide hover text: the visible ("front") copy of the label slides up
   and out of view while an identical ("back") copy slides up from below
   into its place. Both copies live in a fixed-height, overflow-hidden box
   so only one is ever visible at a time. */
.aaw-nav-link-flip {
	position: relative;
	display: block;
	height: 1.5em;
	overflow: hidden;
}

.aaw-nav-link-text {
	display: block;
	height: 1.5em;
	line-height: 1.5em;
	transform: translateY(0);
	transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

.aaw-nav-link-text--front {
	position: relative;
}

.aaw-nav-link-text--back {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
}

.aaw-header-nav-list a:hover .aaw-nav-link-text,
.aaw-header-nav-list a:focus-visible .aaw-nav-link-text {
	transform: translateY(-100%);
}

/* Staggered "letters sliding left and fading" hide, item by item, as the
   header switches into its compact state. Reverses automatically (fading
   back in from the left) when the header returns to its normal state. */
.aaw-header--scrolled .aaw-header-nav-list a,
.aaw-header--force-compact .aaw-header-nav-list a {
	opacity: 0;
	transform: translateX(-22px);
	pointer-events: none;
}

.aaw-header-nav-list li:nth-child(1) a { transition-delay: 0s; }
.aaw-header-nav-list li:nth-child(2) a { transition-delay: 0.03s; }
.aaw-header-nav-list li:nth-child(3) a { transition-delay: 0.06s; }
.aaw-header-nav-list li:nth-child(4) a { transition-delay: 0.09s; }
.aaw-header-nav-list li:nth-child(5) a { transition-delay: 0.12s; }
.aaw-header-nav-list li:nth-child(6) a { transition-delay: 0.15s; }
.aaw-header-nav-list li:nth-child(7) a { transition-delay: 0.18s; }
.aaw-header-nav-list li:nth-child(8) a { transition-delay: 0.21s; }

/* -------------------------------------------------------------------------
   Right-side actions: search + menu toggle
   ------------------------------------------------------------------------- */

.aaw-header-actions {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	border-radius: 999px;
	background-color: transparent;
	padding: 0px 5px 0px 16px;
	transition: background-color 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.aaw-header-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background-color: transparent;
	color: #111111;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	z-index: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.aaw-header-search-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
	pointer-events: none;
}

/* Menu (hamburger) toggle - collapsed to zero width in the normal desktop
   state, smoothly grown into view (see the matched transition below) once
   the header is in its compact / scrolled state, and always shown on
   tablet & mobile (see media query below). */
.aaw-header-menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 0;
	overflow: hidden;
	border: none;
	cursor: pointer;
	background-color: #111111;
	color: #FFFFFF;
	border-radius: 30px;
	padding: 10px 0;
	margin: 0;
	opacity: 0;
	line-height: 1;
	white-space: nowrap;
	pointer-events: none;
	position: relative;
	z-index: 1;
	transition: max-width 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		padding 0.6s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s ease 0.08s,
		background-color 0.25s ease, color 0.25s ease;
}

.aaw-header-menu-text {
	font-size: 14px;
	font-weight: 500;
}

.aaw-header-menu-icon {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.aaw-header-menu-icon span {
	display: block;
	width: 16px;
	height: 2px;
	border-radius: 2px;
	background-color: currentColor;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Collapse the two hamburger bars into a single centered line when the
   dropdown panel is open (matches the reference screenshot). */
.aaw-header--menu-open .aaw-header-menu-icon span:nth-child(1) {
	transform: translateY(3px);
}

.aaw-header--menu-open .aaw-header-menu-icon span:nth-child(2) {
	opacity: 0;
	transform: translateY(-3px);
}

/* -------------------------------------------------------------------------
   Compact state — triggered on scroll (desktop) AND always on tablet/mobile
   (see .aaw-header--force-compact, toggled by JS based on viewport width).
   ------------------------------------------------------------------------- */

.aaw-header--scrolled,
.aaw-header--force-compact {
	background-color: rgba(247, 247, 247, 0.75);
}

/* The unified pill: background fades in and gains left padding so the
   search icon sits inside it, matching the "osty." reference. */
.aaw-header--scrolled .aaw-header-actions,
.aaw-header--force-compact .aaw-header-actions {
	background-color: #E4E4E4;
	padding: 5px 5px 5px 16px;
}

.aaw-header--scrolled .aaw-header-menu-toggle,
.aaw-header--force-compact .aaw-header-menu-toggle {
	max-width: 220px;
	padding: 10px 18px;
	opacity: 1;
	pointer-events: auto;
}

/* No separate slide-in keyframes: the grey pill (background-color + padding
   on .aaw-header-actions) and the Menu button (max-width on
   .aaw-header-menu-toggle) grow using plain, matched transitions instead.
   Because .aaw-header-actions is the last, right-anchored flex item in the
   header row, growing its width pushes its LEFT edge outward while its
   RIGHT edge stays pinned — so the pill and the Menu button visibly grow
   from right to left, and reverse the same way when scrolling back up /
   leaving the compact breakpoint, with no separate "pop" animation to
   fight the width change.*/

/* -------------------------------------------------------------------------
   Dropdown nav panel — a floating card anchored to the menu button that
   scales outward from that corner (top-right), so it visually reads as
   the button itself expanding down and to the left.
   ------------------------------------------------------------------------- */

.aaw-header-mobile-panel {
	position: absolute;
	top: calc(100% + 12px);
	right: 0;
	z-index: 50;
	width: 260px;
	max-width: calc(100vw - 48px);
	max-height: none;
	overflow: hidden;
	background-color: #1B1B1B;
	border-radius: 26px;
	padding: 22px 22px 18px;
	box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
	transform-origin: top right;
	transform: scale(0.35);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s ease,
		visibility 0.4s step-end;
}

.aaw-header--menu-open .aaw-header-mobile-panel {
	transform: scale(1);
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1), opacity 0.3s ease,
		visibility 0s;
}

.aaw-header-mobile-panel-label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.45);
	margin: 0 0 14px;
}

.aaw-header-mobile-nav {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.aaw-header-mobile-nav a {
	display: block;
	padding: 8px 0;
	text-decoration: none;
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	border-bottom: none;
	transition: color 0.25s ease, transform 0.25s ease;
}

.aaw-header-mobile-nav a:hover,
.aaw-header-mobile-nav a.aaw-nav-active {
	color: rgba(255, 255, 255, 0.6);
	transform: translateX(3px);
}

/* -------------------------------------------------------------------------
   Search popup — a full-screen overlay with a centered search box that
   slides up into place from the bottom of the screen.
   ------------------------------------------------------------------------- */

.aaw-header-search-panel {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background-color: rgba(10, 10, 10, 0.6);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	max-height: none;
	overflow: visible;
	transition: opacity 0.35s ease, visibility 0.35s step-end;
}

.aaw-header-search-panel.aaw-header--search-open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity 0.35s ease, visibility 0s;
}

.aaw-header-search-close {
	position: absolute;
	top: 28px;
	right: 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: none;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.12);
	color: #FFFFFF;
	cursor: pointer;
	transition: background-color 0.25s ease, transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
		opacity 0.3s ease;
	transform: translateY(24px);
	opacity: 0;
}

.aaw-header-search-close svg {
	width: 16px;
	height: 16px;
}

.aaw-header-search-close:hover {
	background-color: rgba(255, 255, 255, 0.22);
}

.aaw-header-search-panel.aaw-header--search-open .aaw-header-search-close {
	transform: translateY(0);
	opacity: 1;
	transition-delay: 0.08s;
}

.aaw-header-search-form {
	position: relative;
	width: min(600px, 100%);
	margin: 0;
	padding: 22px 26px;
	display: flex;
	align-items: center;
	gap: 12px;
	background-color: #FFFFFF;
	border-radius: 18px;
	box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
	transform: translateY(70px);
	opacity: 0;
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

.aaw-header-search-panel.aaw-header--search-open .aaw-header-search-form {
	transform: translateY(0);
	opacity: 1;
}

.aaw-header-search-input {
	flex: 1 1 auto;
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	background-color: transparent;
	font-size: 18px;
	padding: 8px 4px;
	outline: none;
	color: #111111;
}

.aaw-header-search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 4px;
}

.aaw-header-search-submit svg {
	width: 18px;
	height: 18px;
}

body.aaw-search-lock-scroll {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Tablet & mobile — always show the compact layout (image 2), regardless
   of scroll position. JS mirrors this by toggling .aaw-header--force-compact
   so the Elementor style controls bound to that class apply correctly.
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.aaw-header-nav-list a {
		opacity: 0;
		transform: translateX(-22px);
		pointer-events: none;
	}

	.aaw-header-actions {
		background-color: #E4E4E4;
		padding: 5px 5px 5px 16px;
	}

	.aaw-header-menu-toggle {
		max-width: 220px;
		padding: 10px 18px;
		opacity: 1;
		pointer-events: auto;
	}
}

@media (max-width: 480px) {
	.aaw-hide-mobile-text {
		display: none;
	}

	.aaw-header-inner {
		padding-top: 16px;
		padding-bottom: 16px;
	}
}