/* ==========================================================================
   Elm Valley Farms - split centered-logo header
   Palette sampled from the venue photography, not from a stock ramp:
     ink      #1F3347  the twilight sky in the dusk exteriors
     surface  #FBFAF7  the board-and-batten siding
     copper   #B5713A  the standing-seam roof
     sage     #7C8B72  the eucalyptus in the tablescapes
   All units px per house convention. No em dashes.
   ========================================================================== */

.evf-header {
	--evf-ink: #1F3347;
	--evf-ink-soft: #5A6B7C;
	--evf-surface: #FBFAF7;
	--evf-copper: #B5713A;
	--evf-sage: #7C8B72;
	--evf-rule: rgba(31, 51, 71, 0.12);

	/* ---- TUNING KNOBS -------------------------------------------------
	   Override any of these from Customizer > Additional CSS while you
	   are dialing things in. Customizer loads after the theme stylesheet
	   at equal specificity, so it wins on source order. Example:

	       .evf-header {
	           --evf-logo-h: 150px;
	           --evf-h: 190px;
	       }

	   Once a value is settled, promote it into this file and delete the
	   Customizer override so there is one source of truth.
	   ------------------------------------------------------------------ */
	--evf-h: 205px;              /* header height, desktop           */
	--evf-h-mobile: 215px;       /* header height, mobile            */
	--evf-logo-h: 165px;         /* logo cap, desktop                */
	--evf-logo-w: 320px;         /* logo max width, desktop          */
	--evf-logo-h-mobile: 180px;  /* logo cap, mobile                 */
	--evf-nav-font: "Parisienne", cursive;  /* nav typeface           */
	--evf-nav-size: 25px;        /* nav link size                    */
	--evf-nav-track: 0;          /* keep at 0, script strokes join   */
	--evf-nav-weight: 400;       /* nav weight                       */
	--evf-nav-case: none;        /* uppercase | none                 */
	--evf-nav-gap: 40px;         /* space between links in a half    */
	--evf-nav-pad: 100px;        /* gap between each half and logo   */
	--evf-nav-pad-mobile: 16px;  /* same gap, mobile. Keep small.    */
	--evf-max: 1360px;           /* header content max width         */

	position: sticky;
	top: 0;
	z-index: 999;
	background: var(--evf-surface);
	border-bottom: 1px solid var(--evf-rule);
	font-family: "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Admin bar keeps the sticky header from hiding under itself */
.admin-bar .evf-header {
	top: 32px;
}

.evf-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--evf-nav-pad);
	max-width: var(--evf-max);
	min-height: var(--evf-h);
	margin: 0 auto;
	padding: 0 32px;
}

/* --------------------------------------------------------------------------
   Nav halves
   -------------------------------------------------------------------------- */

.evf-nav--left {
	justify-self: end;
}

.evf-nav--right {
	justify-self: start;
}

.evf-header .evf-nav-list {
	display: flex;
	align-items: center;
	gap: var(--evf-nav-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.evf-header .evf-nav-list li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
}

.evf-header .evf-nav-list > li > a {
	display: block;
	padding: 6px 0;
	color: var(--evf-ink);
	font-family: var(--evf-nav-font);
	font-size: var(--evf-nav-size);
	font-weight: var(--evf-nav-weight);
	line-height: 1.35;
	letter-spacing: var(--evf-nav-track);
	text-transform: var(--evf-nav-case);
	text-decoration: none;
	white-space: nowrap;
	transition: color 160ms ease;
}

/* Hairline that grows from the centre. Reads as considered rather than
   as a default underline-on-hover. */
.evf-header .evf-nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -4px;
	width: 0;
	height: 1px;
	background: var(--evf-copper);
	transform: translateX(-50%);
	transition: width 200ms ease;
}

.evf-header .evf-nav-list > li > a:hover,
.evf-header .evf-nav-list > li > a:focus-visible {
	color: var(--evf-copper);
}

.evf-header .evf-nav-list > li > a:hover::after,
.evf-header .evf-nav-list > li > a:focus-visible::after,
.evf-header .evf-nav-list > li.current-menu-item > a::after,
.evf-header .evf-nav-list > li.current-menu-ancestor > a::after {
	width: 100%;
}

.evf-header .evf-nav-list > li.current-menu-item > a,
.evf-header .evf-nav-list > li.current-menu-ancestor > a {
	color: var(--evf-copper);
}

/* --------------------------------------------------------------------------
   Dropdowns, one level. This is where Pricing lives under Venue.
   -------------------------------------------------------------------------- */

.evf-header .evf-nav-list .sub-menu {
	position: absolute;
	top: 100%;
	left: 50%;
	z-index: 10;
	min-width: 208px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--evf-surface);
	border: 1px solid var(--evf-rule);
	box-shadow: 0 12px 32px rgba(31, 51, 71, 0.10);
	opacity: 0;
	visibility: hidden;
	transform: translateX(-50%) translateY(6px);
	transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.evf-header .evf-nav-list > li:hover > .sub-menu,
.evf-header .evf-nav-list > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

.evf-header .evf-nav-list .sub-menu a {
	display: block;
	font-family: "Karla", system-ui, sans-serif;
	padding: 11px 22px;
	color: var(--evf-ink);
	font-size: 14px;
	letter-spacing: 0.6px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 140ms ease, color 140ms ease;
}

.evf-header .evf-nav-list .sub-menu a:hover,
.evf-header .evf-nav-list .sub-menu a:focus-visible {
	background: rgba(124, 139, 114, 0.10);
	color: var(--evf-copper);
}

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

.evf-header__logo {
	justify-self: center;
}

.evf-logo {
	display: block;
	text-decoration: none;
	line-height: 0;
}

.evf-logo__img {
	display: block;
	width: auto;
	height: auto;
	max-height: var(--evf-logo-h);
	max-width: var(--evf-logo-w);
}

.evf-logo__text {
	display: block;
	color: var(--evf-ink);
	font-family: "Fraunces", Georgia, "Times New Roman", serif;
	font-size: 30px;
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: 0.4px;
	white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Burger, desktop-hidden
   -------------------------------------------------------------------------- */

.evf-burger {
	display: none;
	justify-self: end;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.evf-burger__bar {
	display: block;
	width: 24px;
	height: 1.5px;
	margin: 5px auto;
	background: var(--evf-ink);
	transition: transform 200ms ease, opacity 160ms ease;
}

.evf-burger[aria-expanded="true"] .evf-burger__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}

.evf-burger[aria-expanded="true"] .evf-burger__bar:nth-child(2) {
	opacity: 0;
}

.evf-burger[aria-expanded="true"] .evf-burger__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Drawer
   -------------------------------------------------------------------------- */

.evf-drawer {
	display: none;
	border-top: 1px solid var(--evf-rule);
	background: var(--evf-surface);
}

.evf-drawer[hidden] {
	display: none;
}

.evf-header .evf-drawer__list {
	margin: 0;
	padding: 8px 0;
	list-style: none;
}

.evf-header .evf-drawer__list li {
	margin: 0;
	list-style: none;
}

.evf-header .evf-drawer__list a {
	display: block;
	font-family: "Karla", system-ui, sans-serif;
	padding: 15px 24px;
	color: var(--evf-ink);
	font-size: 15px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-decoration: none;
	border-bottom: 1px solid var(--evf-rule);
}

.evf-header .evf-drawer__list .sub-menu a {
	padding-left: 44px;
	font-size: 14px;
	letter-spacing: 0.6px;
	text-transform: none;
	color: var(--evf-ink-soft);
}

.evf-drawer__foot {
	padding: 22px 24px 30px;
	text-align: center;
}

.evf-drawer__cta {
	display: block;
	padding: 16px 24px;
	background: var(--evf-copper);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.6px;
	text-transform: uppercase;
	text-decoration: none;
}

.evf-drawer__phone {
	display: inline-block;
	margin-top: 18px;
	color: var(--evf-ink-soft);
	font-size: 15px;
	letter-spacing: 0.6px;
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Breakpoints
   1180px is where four uppercase links plus a 280px logo stop fitting
   comfortably. Tune after the real logo lands.
   -------------------------------------------------------------------------- */

@media only screen and (max-width: 1180px) {

	.evf-header__inner {
		grid-template-columns: 1fr auto 1fr;
		gap: var(--evf-nav-pad-mobile);
		min-height: var(--evf-h-mobile);
		padding: 0 16px;
	}

	.evf-nav--left,
	.evf-nav--right {
		display: none;
	}

	.evf-header__logo {
		grid-column: 2;
	}

	.evf-burger {
		display: block;
		grid-column: 3;
	}

	.evf-logo__img {
		max-height: var(--evf-logo-h-mobile);
		max-width: 260px;
	}

	.evf-logo__text {
		font-size: 23px;
	}

	.evf-drawer {
		display: block;
	}

	.evf-drawer[hidden] {
		display: none;
	}
}

@media only screen and (max-width: 782px) {

	.admin-bar .evf-header {
		top: 46px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.evf-header *,
	.evf-header *::after {
		transition: none !important;
	}
}