/* =========================================================================
   Waddell — custom header (header.php)
   Styles the .site-header markup exactly as the original build. This is the
   full styling that pairs with the header.php you have. Self-contained: it
   defines its own variables so it doesn't depend on hero.css load order.
   ========================================================================= */

:root {
	--wh-dark:      #17140f;
	--wh-dark-2:    #201d17;
	--wh-teal:      #12594a;
	--wh-teal-dark: #0e4a3d;
	--wh-gold:      #d8b676;
	--wh-gold-dark: #c9a45f;
	--wh-cream:     #f4f1ea;
	--wh-serif:     "Cormorant Garamond", "EB Garamond", Georgia, serif;
	--wh-sans:      "Josefin Sans", Helvetica, Arial, Lucida, sans-serif;
}

/* ----------------------------- Header ----------------------------------- */
.site-header {
	position: fixed;
    z-index: 20;
    background: var(--wh-dark);
    width: 100%;
}

/* Down caret on items that have children */
.site-nav__menu .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 0.4em;
	height: 0.4em;
	margin-left: 0.5em;
	border: solid var(--wh-cream);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	transform-origin: center;
	transition: transform 0.25s ease;
	position: relative;
	top: -0.15em;
	vertical-align: middle;
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 50px;
	max-width: 1600px;
	margin: 0 auto;
	
}


.site-header__logo, .site-nav__menu, .site-nav_left{padding: 0.75rem 2rem;}
.site-header__actions .site-nav_left{display: contents;}
.site-header__logo img {max-height: 53px;padding: 0rem 1rem;width: auto;}
.site-header__logo--text {
	color: #fff;
	font-family: var(--wh-serif);
	font-size: 1.6rem;
	letter-spacing: 0.04em;
	text-decoration: none;
}

.site-nav {
	    display: flex;
    align-items: center;
    flex: 1;
    gap: 2.5rem;
    justify-content: space-between;
}

.site-nav__menu {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__menu li { position: relative; }

.site-nav__menu a, .site-nav_left a {
	color: var(--wh-cream);
	font-family: var(--wh-sans);
	font-size: 10px;
	font-weight: 300;
	letter-spacing: 2px;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 0.2s ease;
	padding: 20px 0px;
}
.site-nav__menu a:hover,
.site-nav__menu .current-menu-item > a { color: var(--wh-gold); }

/* Dropdowns */
.site-nav__menu .sub-menu {
	position: absolute;
	top: 150%;
	left: 0;
	min-width: 220px;
	margin: 0;
	padding: 0.5rem 0;
	list-style: none;
	background: var(--wh-dark-2);
	border-top: 2px solid var(--wh-gold);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
	z-index: 30;
}
.site-nav__menu .menu-item-has-children:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
.site-nav__menu .sub-menu a {
	display: block;
	padding: 0.6rem 1.4rem;
	letter-spacing: 0.1em;
}

.site-header__actions {
	display: flex;
    align-items: center;
    gap: 1.8rem;
    background: #000;
    padding-left: 30px;
}

.site-header__phone {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wh-gold);
	font-family: var(--wh-sans);
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	white-space: nowrap;
	font-size: 16px;
}

.single-post .site-nav__menu a,
.single-post .site-nav_left a,
.single-project .site-nav__menu a,
.single-project .site-nav_left a{font-family: var(--wh-sans) !important;}


.site-header__phone svg { width: 18px; height: 18px; color: var(--wh-gold); margin-top: -2px;}
.site-header__cta { white-space: nowrap; }

/* ----------------------------- Buttons ---------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 1.8rem 2.2rem;
	border: 0;
	cursor: pointer;
	font-family: var(--wh-sans);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease;
}
.btn--teal { background: var(--wh-teal); color: #fff; }
.btn--teal:hover { background: var(--wh-teal-dark); color: #fff; }
.btn--gold { background: var(--wh-gold); color: var(--wh-dark); }
.btn--gold:hover { background: var(--wh-gold-dark); color: var(--wh-dark); }

/* Toggle hidden on desktop */
.site-header__toggle{ display: none; }
.mobile-phone-cta { display: none; }
/* --------------------------- Responsive --------------------------------- */
@media only screen and ( min-width: 300px ) and ( max-width: 991px ){
	.site-header__toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		cursor: pointer;
		z-index: 999;
	}
	.site-header__logo{
		padding: 0px;
	}
	.mobile-phone-cta a.btn{padding: .8rem;margin: 5px;}
	.mobile-phone-cta {
		display: flex;
		align-items: center;
		gap: 10px;
        padding: 0px 10px;
	}
	.site-header__logo img {
    max-height: 42px;
    padding: .3em .5rem;
	}	
	#primary-nav .site-header__actions{display:none;}
	.site-header__toggle span {
		display: block;
		width: 26px;
		height: 2px;
		background: var(--wh-gold);
		transition: transform 0.25s ease, opacity 0.25s ease;
	}
	body.nav-open .site-header__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	body.nav-open .site-header__toggle span:nth-child(2) { opacity: 0; }
	body.nav-open .site-header__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	.site-nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(320px, 85vw);
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0;
		padding: 5rem 1.5rem 2rem;
		background: var(--wh-dark);
		transform: translateX(100%);
		transition: transform 0.3s ease;
		overflow-y: auto;
		z-index: 40;
	}
	body.nav-open .site-nav { transform: translateX(0); }

	.site-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}
	.site-nav__menu > li { width: 100%; border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
	.site-nav__menu a { display: block; width: 100%; padding: 0.9rem 0; }

	.site-nav__menu .sub-menu {
		position: static;
		max-height: 0;
		padding: 0 0 0 1rem;
		background: transparent;
		border: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		overflow: hidden;
		transition: max-height 0.3s ease;
	}
	.site-nav__menu .menu-item-has-children:hover > .sub-menu { max-height: 0; }
	.site-nav__menu .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }

	.site-header__actions {
		flex-direction: column;
		align-items: flex-start;
		gap: 1rem;
		width: 100%;
		margin-top: 1.25rem;
	}
	
}

@media only screen and ( max-width: 479px ) {
    .mobile-phone-cta a.btn {
        padding: .5rem;
        margin: 5px;
        font-size: 9px !important;
        width: 74px !important;
        text-wrap: auto;
        text-align: center;
        line-height: 14px;
    }
}