/* ==========================================================================
   Hakan Interiors – minimal header
   Logo · Work · Explore the Map · About · Contact · [START A PROJECT WITH US]
   ========================================================================== */

:root {
	--hakan-accent: #60211A;
	--hakan-accent-dark: #361F1C;
	--hakan-text: #3c3950;
}

/* ---- Horizontal menu (TheGem adds .no-responsive while the full menu is shown) ---- */
#site-header #primary-menu.no-responsive {
	display: inline-flex;
	align-items: center;
}

#site-header #primary-menu.no-responsive > li > a {
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.12em;
	padding-left: 18px;
	padding-right: 18px;
	background: transparent;
}

/* ---- Link hover (TheGem's defaults barely differ from the link colour) ---- */
#site-header #primary-menu.no-responsive > li:not(.hakan-header-cta) > a {
	transition: color .25s ease;
}

/* White sticky header: burgundy */
#site-header #primary-menu.no-responsive > li:not(.hakan-header-cta):hover > a {
	color: var(--hakan-accent);
}

/* Transparent header over the espresso heroes: sand */
#site-header:not(.shrink) .header-colors-light:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li:not(.hakan-header-cta):hover > a {
	color: #B2A591;
}

/* ---- Primary button ---- */
#site-header #primary-menu.no-responsive > li.hakan-header-cta {
	margin-left: 22px;
}

#site-header #primary-menu.no-responsive > li.hakan-header-cta > a {
	display: inline-block;
	padding: 0 24px;
	line-height: 44px;
	height: 46px;
	margin: 0;
	border: 1px solid var(--hakan-accent);
	border-radius: 0;
	color: #fff;
	background: var(--hakan-accent);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Hover: sand fill with espresso text – stands out on both the espresso (transparent) and white (sticky) header.
   The last selector matches TheGem's light-header hover rule, which would otherwise turn the text burgundy. */
#site-header #primary-menu.no-responsive > li.hakan-header-cta > a:hover,
#site-header #primary-menu.no-responsive > li.hakan-header-cta > a:focus,
#site-header .header-colors-light #primary-menu.no-responsive > li.hakan-header-cta > a:hover,
#site-header:not(.shrink) .header-colors-light:not(.header-layout-fullwidth_hamburger) #primary-menu.no-responsive > li.hakan-header-cta:hover > a {
	background: #B2A591;
	border-color: #B2A591;
	color: var(--hakan-accent-dark);
}

/* Keep the button solid burgundy on light/transparent header variants too */
#site-header .header-colors-light #primary-menu.no-responsive > li.hakan-header-cta > a {
	border-color: var(--hakan-accent);
	color: #fff;
}

/* The CTA is a button, not a menu item: no active/hover underline states */
#site-header #primary-menu.no-responsive > li.hakan-header-cta > a:before,
#site-header #primary-menu.no-responsive > li.hakan-header-cta > a:after {
	display: none;
}

/* ---- Mobile menu (.responsive): keep the CTA visible as a full-width button ---- */
#primary-navigation.responsive #primary-menu li.hakan-header-cta > a {
	margin: 15px 20px;
	padding: 14px 20px !important;
	text-align: center;
	background: var(--hakan-accent) !important;
	color: #fff !important;
	text-transform: uppercase !important;
	letter-spacing: 0.14em;
	font-size: 13px;
	font-weight: 600;
}