/*
* HK header — top bar + centred logo with a split menu
*
* Markup: template-parts/site-header/hk-header.php
* Behaviour: assets/scripts/front/hk-header.js
*
* States on #masthead.hkh-header
*   (none)          overlaps the top of the page, transparent over the hero
*   .hkh-is-fixed    pinned to the viewport, compact, solid background
*   .hkh-is-hidden   pinned but slid out of view (scroll-up mode, scrolling down)
*
* Breakpoints
*   >= 1200px  full menu on both sides of the logo, button on the right
*   768-1199   burger | logo | button + call
*   <= 767     burger | logo | call; slim top bar with phone and socials
*
* Contents
*   1. Tokens
*   2. Shell
*   3. Top bar
*   4. Main bar + logo
*   5. Desktop navigation + dropdowns
*   6. Button, call, burger
*   7. Fixed state
*   8. Tablet
*   9. Mobile
*   10. Mobile menu panel additions
*   11. Motion preferences
*/

/* ---------------------------------------------------------------------------
* 1. Tokens
* ------------------------------------------------------------------------- */

.hkh-header {
	--hkh-accent: var(--primary-color, #c9962c);
	--hkh-green: var(--secondary-color, #53624e);
	--hkh-ink: #0e0d0a;
	--hkh-text: #fff;
	--hkh-muted: rgba(255, 255, 255, 0.78);
	--hkh-line: rgba(255, 255, 255, 0.14);
	--hkh-gutter: 48px;
	--hkh-topbar-h: 40px;
	/* The logo is a wide lockup (mark + wordmark, about 2.4:1), so it is sized
	* by width with a height cap rather than the other way round. */
	--hkh-main-h: 116px;
	--hkh-logo-h: 98px;
	--hkh-logo-w: 240px;
	--hkh-fixed-main-h: 88px;
	--hkh-fixed-logo-h: 70px;
	--hkh-fixed-logo-w: 172px;
	--hkh-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ---------------------------------------------------------------------------
* 2. Shell
* ------------------------------------------------------------------------- */

#masthead.hkh-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: 999;
	width: 100%;
	color: var(--hkh-text);
	font-family: var(--body-font, inherit);
	-webkit-font-smoothing: antialiased;
}

/* Keeps white text readable on light hero images, like the old header's overlay. */
#masthead.hkh-header:before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	z-index: -1;
	height: 160%;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
	content: "";
	transition: opacity 0.3s ease;
}

.admin-bar #masthead.hkh-header {
	top: 32px;
}

@media only screen and (max-width: 782px) {
	.admin-bar #masthead.hkh-header {
		top: 46px;
	}
}

#masthead.hkh-header > * {
	width: 100%;
}

.hkh-header .hkh-wrap {
	display: flex;
	align-items: center;
	width: 100%;
	max-width: 1680px;
	margin: 0 auto;
	padding: 0 var(--hkh-gutter);
}

.hkh-header a {
	color: inherit;
	text-decoration: none;
}

.hkh-header ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hkh-header li {
	margin: 0;
	padding: 0;
}

.hkh-header .hkh-icon {
	display: block;
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.hkh-header a:focus-visible,
.hkh-header button:focus-visible {
	outline: 2px solid var(--hkh-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------------------------------------------------------------------------
* 3. Top bar
* ------------------------------------------------------------------------- */

.hkh-header .hkh-topbar {
	position: relative;
	z-index: 2;
	overflow: hidden;
	border-bottom: 1px solid var(--hkh-line);
	transition: max-height 0.35s var(--hkh-ease), opacity 0.25s ease, border-color 0.25s ease;
	max-height: var(--hkh-topbar-h);
}

.hkh-header .hkh-topbar-inner {
	height: var(--hkh-topbar-h);
	font-size: 12.5px;
	letter-spacing: 0.02em;
	line-height: 1;
}

/*
* Three columns: the contact details, the statement, the links. The side
* columns share the leftover width equally, which is what keeps the middle
* group centred on the bar rather than merely following the phone number.
*/
.hkh-header .hkh-topbar-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 22px;
}

.hkh-header .hkh-topbar-start,
.hkh-header .hkh-topbar-mid,
.hkh-header .hkh-topbar-end {
	display: flex;
	align-items: center;
	min-width: 0;
}

.hkh-header .hkh-topbar-start {
	gap: 26px;
}

.hkh-header .hkh-topbar-mid {
	gap: 18px;
	justify-content: center;
}

/* Nothing in the middle: the links stay on the right all the same. */
.hkh-header .hkh-topbar-mid:empty {
	display: none;
}

.hkh-header .hkh-topbar-end {
	gap: 22px;
	justify-content: flex-end;
}

.hkh-header .hkh-topbar-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--hkh-muted);
	white-space: nowrap;
	transition: color 0.2s ease;
}

.hkh-header .hkh-topbar-item .hkh-icon {
	width: 13px;
	height: 13px;
	color: var(--hkh-accent);
}

.hkh-header a.hkh-topbar-item:hover {
	color: var(--hkh-text);
}

.hkh-header .hkh-topbar-text {
	overflow: hidden;
	text-overflow: ellipsis;
	line-height: 14px;
}

/* The accreditation line: the one claim worth a gold frame. */
.hkh-header .hkh-topbar-badge {
	padding: 5px 12px;
	border: 1px solid var(--hkh-gold-line, rgba(201, 150, 44, 0.45));
	border-radius: 999px;
	color: var(--hkh-accent);
	font-size: 11.5px;
	font-weight: 600;
	/* Capitals by style, not in the text: the translation keeps its own case,
	* and lang="tr" gives the dotted İ. */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background: rgba(201, 150, 44, 0.08);
	white-space: nowrap;
}

.hkh-header .hkh-topbar-badge .hkh-icon {
	width: 15px;
	height: 15px;
	flex: none;
}

.hkh-header .hkh-social,
.hkh-header .hkh-lang {
	display: flex;
	align-items: center;
}

.hkh-header .hkh-social {
	gap: 4px;
}

.hkh-header .hkh-topbar-blog + .hkh-social,
.hkh-header .hkh-social + .hkh-lang,
.hkh-header .hkh-topbar-blog + .hkh-lang {
	padding-left: 18px;
	border-left: 1px solid var(--hkh-line);
}

.hkh-header .hkh-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	color: var(--hkh-muted);
	transition: color 0.2s ease, background-color 0.2s ease;
}

.hkh-header .hkh-social a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--hkh-text);
}

.hkh-header .hkh-social .hkh-icon {
	width: 14px;
	height: 14px;
}

.hkh-header .hkh-lang {
	gap: 2px;
	font-size: 12px;
	letter-spacing: 0.08em;
}

.hkh-header .hkh-lang a {
	display: block;
	padding: 6px 6px;
	color: var(--hkh-muted);
}

.hkh-header .hkh-lang .is-current a,
.hkh-header .hkh-lang a:hover {
	color: var(--hkh-text);
}

/* ---------------------------------------------------------------------------
* 4. Main bar + logo
* ------------------------------------------------------------------------- */

.hkh-header .hkh-mainbar {
	position: relative;
	z-index: 3;
}

.hkh-header .hkh-mainbar-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 40px;
	height: var(--hkh-main-h);
	transition: height 0.35s var(--hkh-ease);
}

.hkh-header .hkh-side {
	display: flex;
	align-items: center;
	min-width: 0;
	height: 100%;
}

.hkh-header .hkh-side-start {
	justify-content: flex-end;
}

.hkh-header .hkh-side-end {
	justify-content: flex-start;
	gap: 28px;
}

.hkh-header .hkh-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
}

.hkh-header .hkh-logo {
	display: block;
	line-height: 0;
}

.hkh-header .hkh-logo-img {
	display: block;
	width: auto;
	max-width: var(--hkh-logo-w);
	height: var(--hkh-logo-h);
	object-fit: contain;
	transition: height 0.35s var(--hkh-ease), max-width 0.35s var(--hkh-ease);
}

.hkh-header .hkh-logo-text {
	display: block;
	font-family: var(--heading-font, inherit);
	font-size: 26px;
	line-height: 1.1;
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
* 5. Desktop navigation + dropdowns
* ------------------------------------------------------------------------- */

.hkh-header .hkh-nav {
	height: 100%;
}

.hkh-header .hkh-menu {
	display: flex;
	align-items: center;
	gap: 34px;
	height: 100%;
}

.hkh-header .hkh-menu > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 100%;
}

.hkh-header .hkh-menu > li > a {
	position: relative;
	display: flex;
	align-items: center;
	gap: 7px;
	padding: 8px 0;
	color: var(--hkh-text);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.13em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Underline, drawn from the centre. */
.hkh-header .hkh-menu > li > a:after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: var(--hkh-accent);
	content: "";
	-webkit-transform: scaleX(0);
	transform: scaleX(0);
	transition: transform 0.3s var(--hkh-ease);
}

.hkh-header .hkh-menu > li:hover > a:after,
.hkh-header .hkh-menu > li:focus-within > a:after,
.hkh-header .hkh-menu > li.current-menu-item > a:after,
.hkh-header .hkh-menu > li.current-menu-ancestor > a:after,
.hkh-header .hkh-menu > li.current-menu-parent > a:after {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}

/* Chevron for items with a submenu. */
.hkh-header .hkh-menu > li.menu-item-has-children > a > span:after {
	display: inline-block;
	width: 5px;
	height: 5px;
	margin: -3px 0 0 8px;
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
	vertical-align: middle;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	transition: transform 0.25s ease, margin 0.25s ease;
}

.hkh-header .hkh-menu > li.menu-item-has-children:hover > a > span:after,
.hkh-header .hkh-menu > li.menu-item-has-children:focus-within > a > span:after {
	margin-top: 2px;
	-webkit-transform: rotate(-135deg);
	transform: rotate(-135deg);
}

.hkh-header .hkh-menu .sub-menu {
	position: absolute;
	top: calc(100% - 14px);
	left: -24px;
	z-index: 20;
	min-width: 250px;
	padding: 14px 0;
	background: rgba(14, 13, 10, 0.97);
	border-top: 2px solid var(--hkh-accent);
	border-radius: 0 0 4px 4px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
	opacity: 0;
	visibility: hidden;
	-webkit-transform: translateY(8px);
	transform: translateY(8px);
	transition: opacity 0.22s ease, transform 0.22s var(--hkh-ease), visibility 0s linear 0.22s;
}

/* Hover bridge so the pointer can travel from the item into the panel. */
.hkh-header .hkh-menu .sub-menu:before {
	position: absolute;
	top: -16px;
	right: 0;
	left: 0;
	height: 16px;
	content: "";
}

.hkh-header .hkh-menu li:hover > .sub-menu,
.hkh-header .hkh-menu li:focus-within > .sub-menu,
.hkh-header .hkh-menu li.hkh-sub-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	-webkit-transform: translateY(0);
	transform: translateY(0);
	transition: opacity 0.22s ease, transform 0.22s var(--hkh-ease), visibility 0s;
}

/* Escape closes a submenu even though focus stays inside it. */
.hkh-header .hkh-menu > li.hkh-sub-closed > .sub-menu {
	opacity: 0;
	visibility: hidden;
}

/* The last items on the right open towards the logo, not off screen. */
.hkh-header .hkh-menu-right > li:last-child > .sub-menu {
	right: -24px;
	left: auto;
}

.hkh-header .hkh-menu .sub-menu .sub-menu {
	top: -16px;
	left: 100%;
	border-top: 0;
	border-radius: 4px;
}

.hkh-header .hkh-menu .sub-menu li {
	position: relative;
}

.hkh-header .hkh-menu .sub-menu a {
	display: block;
	padding: 10px 26px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 14px;
	letter-spacing: 0.01em;
	line-height: 1.4;
	text-transform: none;
	white-space: nowrap;
	transition: color 0.2s ease, padding 0.25s var(--hkh-ease), background-color 0.2s ease;
}

.hkh-header .hkh-menu .sub-menu a:hover,
.hkh-header .hkh-menu .sub-menu a:focus-visible,
.hkh-header .hkh-menu .sub-menu .current-menu-item > a {
	padding-left: 32px;
	background: rgba(255, 255, 255, 0.04);
	color: var(--hkh-accent);
}

/* ---------------------------------------------------------------------------
* 6. Button, call, burger
* ------------------------------------------------------------------------- */

.hkh-header .hkh-cta {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	height: 46px;
	margin-left: auto;
	padding: 0 26px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 2px;
	color: var(--hkh-text);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hkh-header .hkh-cta:hover {
	background: var(--hkh-accent);
	border-color: var(--hkh-accent);
	color: #fff;
}

.hkh-header .hkh-call {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	color: var(--hkh-text);
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hkh-header .hkh-call .hkh-icon {
	width: 17px;
	height: 17px;
}

.hkh-header .hkh-call:hover,
.hkh-header .hkh-call:active {
	background: var(--hkh-accent);
	border-color: var(--hkh-accent);
}

#masthead.hkh-header .hkh-burger {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	gap: 12px;
	min-width: 0;
	min-height: 44px;
	height: 44px;
	margin: 0 0 0 -10px;
	padding: 0 10px;
	background: none;
	border: 0;
	border-radius: 4px;
	box-shadow: none;
	color: var(--hkh-text);
	font: inherit;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

#masthead.hkh-header .hkh-burger:active {
	-webkit-transform: none;
	transform: none;
	background: rgba(255, 255, 255, 0.08);
}

.hkh-header .hkh-burger-lines {
	position: relative;
	display: block;
	width: 26px;
	height: 16px;
}

.hkh-header .hkh-burger-lines span {
	position: absolute;
	left: 0;
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 0.3s var(--hkh-ease), opacity 0.2s ease, width 0.3s var(--hkh-ease), top 0.3s var(--hkh-ease);
}

.hkh-header .hkh-burger-lines span:nth-child(1) {
	top: 0;
}

.hkh-header .hkh-burger-lines span:nth-child(2) {
	top: 7px;
	width: 70%;
}

.hkh-header .hkh-burger-lines span:nth-child(3) {
	top: 14px;
}

.hkh-header .hkh-burger:hover .hkh-burger-lines span:nth-child(2) {
	width: 100%;
}

.hkh-header .hkh-burger.toggled-on .hkh-burger-lines span:nth-child(1) {
	top: 7px;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

.hkh-header .hkh-burger.toggled-on .hkh-burger-lines span:nth-child(2) {
	opacity: 0;
}

.hkh-header .hkh-burger.toggled-on .hkh-burger-lines span:nth-child(3) {
	top: 7px;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.hkh-header .hkh-burger-label {
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
* 7. Fixed state
* ------------------------------------------------------------------------- */

#masthead.hkh-header.hkh-is-fixed {
	position: fixed;
	top: 0;
	background: rgba(14, 13, 10, 0.9);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
	-webkit-backdrop-filter: saturate(140%) blur(12px);
	backdrop-filter: saturate(140%) blur(12px);
	transition: transform 0.35s var(--hkh-ease);
}

#masthead.hkh-header.hkh-is-fixed.hkh-anim-in {
	-webkit-animation: hkh-header-in 0.4s var(--hkh-ease);
	animation: hkh-header-in 0.4s var(--hkh-ease);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	#masthead.hkh-header.hkh-is-fixed {
		background: rgba(14, 13, 10, 0.97);
	}
}

.admin-bar #masthead.hkh-header.hkh-is-fixed {
	top: 32px;
}

@media only screen and (max-width: 782px) {
	.admin-bar #masthead.hkh-header.hkh-is-fixed {
		top: 46px;
	}
}

/* Below 600px WordPress lets the admin bar scroll away. */
@media only screen and (max-width: 600px) {
	.admin-bar #masthead.hkh-header.hkh-is-fixed {
		top: 0;
	}
}

#masthead.hkh-header.hkh-is-fixed:before {
	opacity: 0;
}

#masthead.hkh-header.hkh-is-fixed .hkh-topbar {
	max-height: 0;
	opacity: 0;
	border-bottom-color: transparent;
}

#masthead.hkh-header.hkh-is-fixed .hkh-mainbar-inner {
	height: var(--hkh-fixed-main-h);
}

#masthead.hkh-header.hkh-is-fixed .hkh-logo-img {
	height: var(--hkh-fixed-logo-h);
	max-width: var(--hkh-fixed-logo-w);
}

#masthead.hkh-header.hkh-is-fixed .hkh-cta {
	height: 40px;
}

#masthead.hkh-header.hkh-is-fixed .hkh-menu .sub-menu {
	top: calc(100% - 8px);
}

#masthead.hkh-header.hkh-is-hidden {
	-webkit-transform: translateY(-110%);
	transform: translateY(-110%);
	box-shadow: none;
}

#masthead.hkh-header.hkh-is-hidden .sub-menu {
	visibility: hidden !important;
}

@-webkit-keyframes hkh-header-in {
	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
	to { -webkit-transform: translateY(0); transform: translateY(0); }
}

@keyframes hkh-header-in {
	from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
	to { -webkit-transform: translateY(0); transform: translateY(0); }
}

/* The old header hid itself while the mobile panel is open; keep that. */
body.cs-sidemenu-hide-header #masthead.hkh-header {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
* Narrow desktops: tighten before switching to the burger
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1440px) {
	.hkh-header {
		--hkh-gutter: 36px;
	}

	.hkh-header .hkh-menu {
		gap: 26px;
	}

	.hkh-header .hkh-mainbar-inner {
		column-gap: 30px;
	}

	.hkh-header .hkh-side-end {
		gap: 22px;
	}

	.hkh-header .hkh-cta {
		padding: 0 20px;
	}

	.hkh-header .hkh-topbar-text {
		display: none;
	}

	/* The badge keeps its full wording, so the e-mail gives way first —
	* it is repeated in the floating dock and in the footer anyway. */
	.hkh-header .hkh-topbar-email {
		display: none;
	}
}

@media only screen and (max-width: 1320px) {
	.hkh-header {
		--hkh-logo-h: 84px;
		--hkh-logo-w: 200px;
		--hkh-main-h: 102px;
	}

	.hkh-header .hkh-menu > li > a {
		font-size: 12px;
		letter-spacing: 0.1em;
	}

	.hkh-header .hkh-menu {
		gap: 22px;
	}
}

/* ---------------------------------------------------------------------------
* 8. Tablet
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 1199px) {
	.hkh-header {
		--hkh-gutter: 28px;
		--hkh-main-h: 100px;
		--hkh-logo-h: 78px;
		--hkh-logo-w: 190px;
		--hkh-fixed-main-h: 78px;
		--hkh-fixed-logo-h: 60px;
		--hkh-fixed-logo-w: 148px;
	}

	.hkh-header .hkh-nav {
		display: none;
	}

	#masthead.hkh-header .hkh-burger {
		display: inline-flex;
	}

	.hkh-header .hkh-side-start {
		justify-content: flex-start;
	}

	.hkh-header .hkh-side-end {
		justify-content: flex-end;
		gap: 12px;
	}

	.hkh-header .hkh-cta {
		height: 42px;
		margin-left: 0;
	}

	.hkh-header .hkh-call {
		display: inline-flex;
	}

	/* Below the desktop menu the top bar is too narrow for the full
	* accreditation line; the page itself carries it instead. */
	/* Below the desktop menu the bar is too narrow for the full licence
	* line; the tagline keeps the middle on its own. */
	.hkh-header .hkh-topbar-badge {
		display: none;
	}

	.hkh-header .hkh-topbar-text {
		display: inline-flex;
	}
}

/* ---------------------------------------------------------------------------
* 9. Mobile
* ------------------------------------------------------------------------- */

@media only screen and (max-width: 767px) {
	.hkh-header {
		--hkh-gutter: 16px;
		--hkh-topbar-h: 36px;
		--hkh-main-h: 80px;
		--hkh-logo-h: 62px;
		/* Leaves room for the burger and the call button either side. */
		--hkh-logo-w: 164px;
		--hkh-fixed-main-h: 68px;
		--hkh-fixed-logo-h: 50px;
		--hkh-fixed-logo-w: 136px;
	}

	.hkh-header .hkh-mainbar-inner {
		column-gap: 12px;
	}

	.hkh-header .hkh-topbar-inner {
		gap: 12px;
		font-size: 12px;
	}

	.hkh-header .hkh-topbar-mid,
	.hkh-header .hkh-topbar-email,
	.hkh-header .hkh-topbar-text,
	.hkh-header .hkh-topbar-badge,
	.hkh-header .hkh-topbar-blog {
		display: none;
	}

	/* With the middle gone the bar is two columns again. */
	.hkh-header .hkh-topbar-inner {
		grid-template-columns: auto 1fr;
	}

	.hkh-header .hkh-topbar-end {
		gap: 10px;
	}

	.hkh-header .hkh-topbar-blog + .hkh-social,
	.hkh-header .hkh-social + .hkh-lang,
	.hkh-header .hkh-topbar-blog + .hkh-lang {
		padding-left: 0;
		border-left: 0;
	}

	.hkh-header .hkh-social {
		gap: 0;
		margin-right: -6px;
	}

	.hkh-header .hkh-social a {
		width: 30px;
		height: 30px;
	}

	.hkh-header .hkh-cta,
	.hkh-header .hkh-burger-label {
		display: none;
	}

	#masthead.hkh-header .hkh-burger {
		width: 44px;
		justify-content: center;
		margin-left: -8px;
		padding: 0;
	}

	.hkh-header .hkh-call {
		width: 42px;
		height: 42px;
		margin-right: -2px;
	}

	#masthead.hkh-header:before {
		height: 150%;
	}
}

/* Very narrow phones: drop the phone text, keep its icon. */
@media only screen and (max-width: 359px) {
	.hkh-header .hkh-topbar-phone span {
		font-size: 11px;
	}

	.hkh-header .hkh-social a {
		width: 27px;
	}
}

/* Landscape phones: every pixel of height counts. */
@media only screen and (max-height: 500px) and (orientation: landscape) {
	.hkh-header {
		--hkh-main-h: 64px;
		--hkh-logo-h: 46px;
		--hkh-fixed-main-h: 56px;
		--hkh-fixed-logo-h: 40px;
	}
}

/* ---------------------------------------------------------------------------
* 10. Mobile menu panel additions
* ------------------------------------------------------------------------- */

/* Full width on phones: a 375px sheet with a 15px sliver of page is awkward. */
@media only screen and (max-width: 575px) {
	.hkh-header-active .sidemenu.sidemenu-native {
		max-width: 100%;
	}
}

@media only screen and (min-width: 576px) {
	.hkh-header-active .sidemenu.sidemenu-native {
		max-width: 420px;
	}
}

.hkh-header-active .sidemenu-native .cs-mm-head {
	min-height: 72px;
	padding: 14px 0;
}

.hkh-header-active .sidemenu-native .cs-mm-logo img {
	max-height: 62px;
	max-width: 210px;
}

.hkh-header-active .sidemenu-native .cs-mm-nav {
	flex: 0 0 auto;
	padding: 6px 0 22px;
}

/* Accordion: top level rows */
.hkh-header-active .sidemenu-native .cs-mm-row {
	min-height: 58px;
	gap: 12px;
}

.hkh-header-active .sidemenu-native .cs-mm-link {
	padding: 15px 0;
	font-size: 21px;
	letter-spacing: 0.01em;
	-webkit-tap-highlight-color: transparent;
}

.no-touch .hkh-header-active .sidemenu-native a.cs-mm-link:hover {
	opacity: 1;
}

.hkh-header-active .sidemenu-native .cs-mm-toggle {
	width: 40px;
	height: 40px;
	-webkit-tap-highlight-color: transparent;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.hkh-header-active .sidemenu-native .cs-mm-toggle[aria-expanded="true"] {
	background: var(--cs-mm-accent);
	border-color: var(--cs-mm-accent);
	color: #fff;
}

.hkh-header-active .sidemenu-native .cs-mm-item:has(> .cs-mm-row > .cs-mm-toggle[aria-expanded="true"]) > .cs-mm-row > .cs-mm-link {
	color: var(--cs-mm-accent);
}

/* Accordion: submenu. Spacing sits on the list items, not on the list, so the
* animated height (0 -> scrollHeight) never leaves a padding strip showing. */
.hkh-header-active .sidemenu-native .cs-mm-sub {
	position: relative;
	margin: 0 0 0 2px;
}

.hkh-header-active .sidemenu-native .cs-mm-sub:before {
	position: absolute;
	top: 4px;
	bottom: 18px;
	left: 0;
	width: 1px;
	background: var(--cs-mm-line);
	content: "";
}

.hkh-header-active .sidemenu-native .cs-mm-sub > .cs-mm-item:first-child {
	margin-top: 2px;
}

.hkh-header-active .sidemenu-native .cs-mm-sub > .cs-mm-item:last-child {
	margin-bottom: 16px;
}

.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link {
	position: relative;
	padding: 11px 0 11px 20px;
	color: rgba(255, 255, 255, 0.74);
	font-family: var(--body-font, inherit);
	font-size: 16px;
	letter-spacing: 0;
	line-height: 1.35;
}

.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link:before {
	position: absolute;
	top: 50%;
	left: -2px;
	width: 5px;
	height: 5px;
	margin-top: -2.5px;
	background: var(--cs-mm-accent);
	border-radius: 50%;
	opacity: 0;
	content: "";
	-webkit-transform: scale(0.4);
	transform: scale(0.4);
	transition: opacity 0.2s ease, transform 0.2s ease;
}

.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link:hover,
.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link:active,
.hkh-header-active .sidemenu-native .cs-mm-sub .current-menu-item > .cs-mm-row > .cs-mm-link {
	color: #fff;
}

.hkh-header-active .sidemenu-native .cs-mm-sub .current-menu-item > .cs-mm-row > .cs-mm-link:before,
.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link:active:before {
	opacity: 1;
	-webkit-transform: scale(1);
	transform: scale(1);
}

@media only screen and (max-width: 400px) {
	.hkh-header-active .sidemenu-native .cs-mm-link {
		font-size: 20px;
	}

	.hkh-header-active .sidemenu-native .cs-mm-row {
		min-height: 54px;
	}

	.hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link {
		font-size: 15.5px;
	}
}

.hkh-mm-actions {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: auto;
	padding: 22px 0 6px;
	border-top: 1px solid var(--cs-mm-line, rgba(255, 255, 255, 0.14));
}

.hkh-mm-actions a {
	color: var(--cs-mm-text, #fff);
	text-decoration: none;
}

.no-touch .sidemenu .hkh-mm-actions a:hover {
	opacity: 1;
}

.hkh-mm-actions .hkh-icon {
	display: block;
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
}

.hkh-mm-blog {
	align-self: flex-start;
	color: var(--cs-mm-muted, rgba(255, 255, 255, 0.6)) !important;
	font-size: 13px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.hkh-mm-buttons {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.hkh-mm-button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 50px;
	padding: 0 18px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.2;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hkh-mm-button:hover,
.hkh-mm-button:active {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.hkh-mm-button-primary {
	background: var(--cs-mm-accent, #c9962c);
	border-color: var(--cs-mm-accent, #c9962c);
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: 13px;
}

.hkh-mm-button-primary:hover,
.hkh-mm-button-primary:active {
	background: #b3801d;
	border-color: #b3801d;
}

.hkh-mm-email {
	display: inline-flex;
	align-items: center;
	align-self: center;
	gap: 8px;
	color: var(--cs-mm-muted, rgba(255, 255, 255, 0.6)) !important;
	font-size: 14px;
}

.hkh-mm-social {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hkh-mm-social li {
	margin: 0;
}

.hkh-mm-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--cs-mm-line, rgba(255, 255, 255, 0.14));
	border-radius: 50%;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.hkh-mm-social a:hover {
	border-color: var(--cs-mm-accent, #c9962c);
	background: rgba(255, 255, 255, 0.06);
}

/* ---------------------------------------------------------------------------
* 11. Motion preferences
* ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	#masthead.hkh-header,
	#masthead.hkh-header *,
	#masthead.hkh-header *:before,
	#masthead.hkh-header *:after {
		-webkit-animation: none !important;
		animation: none !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
* 12. Floating contact dock
*
* template-parts/site-header/hk-cta-dock.php. Left edge, vertically centred on
* desktop; each item is a circle that slides its label out on hover or focus.
* On phones only WhatsApp remains, bottom left, small.
* ------------------------------------------------------------------------- */

.hkh-dock {
	--hkh-dock-size: 48px;
	--hkh-dock-wa: #25d366;
	position: fixed;
	top: 50%;
	left: 0;
	z-index: 998;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 0 0 12px;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.hkh-dock-item {
	position: relative;
	display: flex;
	align-items: center;
	width: var(--hkh-dock-size);
	height: var(--hkh-dock-size);
	background: rgba(14, 13, 10, 0.86);
	border-radius: 999px;
	box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transition: width 0.32s var(--hk-ease, ease), background-color 0.25s ease, box-shadow 0.25s ease;
}

.hkh-dock-icon {
	display: flex;
	flex: 0 0 var(--hkh-dock-size);
	align-items: center;
	justify-content: center;
	width: var(--hkh-dock-size);
	height: var(--hkh-dock-size);
}

.hkh-dock-icon .hkh-icon {
	display: block;
	width: 19px;
	height: 19px;
}

.hkh-dock-label {
	padding-right: 20px;
	font-family: var(--body-font, inherit);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.2s ease 0.06s;
}

.hkh-dock-whatsapp {
	background: var(--hkh-dock-wa);
}

.hkh-dock-cta {
	background: var(--primary-color, #c9962c);
}

/* Hover / focus opens the item. The width is animated to a measured maximum
* rather than auto, which cannot be transitioned. */
@media (hover: hover) and (min-width: 768px) {
	.hkh-dock-item:hover,
	.hkh-dock-item:focus-visible {
		width: 230px;
		box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3);
	}

	.hkh-dock-item:hover .hkh-dock-label,
	.hkh-dock-item:focus-visible .hkh-dock-label {
		opacity: 1;
	}

	.hkh-dock-whatsapp:hover {
		background: #1fbe5a;
	}

	.hkh-dock-cta:hover {
		background: #b3801d;
	}
}

.hkh-dock-item:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media only screen and (max-width: 1099px) {
	.hkh-dock {
		--hkh-dock-size: 46px;
	}
}

/* Phones: WhatsApp only, bottom left, clear of the iOS home indicator. */
@media only screen and (max-width: 767px) {
	.hkh-dock {
		--hkh-dock-size: 46px;
		top: auto;
		bottom: 16px;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		padding-left: 14px;
		-webkit-transform: none;
		transform: none;
	}

	.hkh-dock-phone,
	.hkh-dock-cta {
		display: none;
	}

	.hkh-dock-label {
		display: none;
	}

	.hkh-dock-item {
		box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	}
}

/* The room booking bar docks to the bottom of the screen on phones. */
@media only screen and (max-width: 900px) {
	body.has-room-booking-bar .hkh-dock {
		bottom: calc(96px + env(safe-area-inset-bottom, 0px));
	}
}

/* The dock must not sit on top of the open menu panel. */
body.cs-sidemenu-open .hkh-dock {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

@media print {
	.hkh-dock {
		display: none;
	}
}

/* ---------------------------------------------------------------------------
* 13. Right to left (Arabic)
*
* The layout itself mirrors on its own — flex and grid follow the writing
* direction. What needs saying explicitly is the handful of places with a
* physical side in them, and the phone number, which a bidi algorithm happily
* reorders into nonsense unless it is isolated.
* ------------------------------------------------------------------------- */

[dir="rtl"] .hkh-header .hkh-menu > li.menu-item-has-children > a > span:after {
	margin: -3px 8px 0 0;
}

[dir="rtl"] .hkh-header .hkh-menu .sub-menu {
	right: -24px;
	left: auto;
}

[dir="rtl"] .hkh-header .hkh-menu-right > li:last-child > .sub-menu {
	right: auto;
	left: -24px;
}

[dir="rtl"] .hkh-header .hkh-menu .sub-menu .sub-menu {
	right: 100%;
	left: auto;
}

[dir="rtl"] .hkh-header .hkh-menu .sub-menu a:hover,
[dir="rtl"] .hkh-header .hkh-menu .sub-menu a:focus-visible,
[dir="rtl"] .hkh-header .hkh-menu .sub-menu .current-menu-item > a {
	padding-right: 32px;
	padding-left: 26px;
}

[dir="rtl"] #masthead.hkh-header .hkh-burger {
	margin: 0 -10px 0 0;
}

/* Phone numbers and addresses are read left to right even in Arabic. */
[dir="rtl"] .hkh-topbar-phone span,
[dir="rtl"] .hkh-topbar-email span,
[dir="rtl"] .hkh-dock-phone .hkh-dock-label,
[dir="rtl"] .hkh-mm-button span,
[dir="rtl"] .hkh-mm-email span {
	direction: ltr;
	unicode-bidi: isolate;
}

/* The dock belongs on the side the reader starts from. */
[dir="rtl"] .hkh-dock {
	right: 0;
	left: auto;
	padding: 0 12px 0 0;
}

@media only screen and (max-width: 767px) {
	[dir="rtl"] .hkh-dock {
		padding-right: 14px;
		padding-left: 0;
	}
}

[dir="rtl"] .hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link {
	padding-right: 20px;
	padding-left: 0;
}

[dir="rtl"] .hkh-header-active .sidemenu-native .cs-mm-sub {
	margin: 0 2px 0 0;
}

[dir="rtl"] .hkh-header-active .sidemenu-native .cs-mm-sub:before {
	right: 0;
	left: auto;
}

[dir="rtl"] .hkh-header-active .sidemenu-native .cs-mm-sub .cs-mm-link:before {
	right: -2px;
	left: auto;
}

/* ---------------------------------------------------------------------------
* The İletişim button inside the mobile menu list
*
* It used to sit under the menu, beside the phone number; the client asked for
* it one tap higher, in the list itself just above Katalog.
* ------------------------------------------------------------------------- */

.cs-mm-menu .cs-mm-cta-item {
	margin: 10px 0 6px;
	border: 0 !important;
}

.cs-mm-menu .cs-mm-cta {
	display: block;
	padding: 13px 18px !important;
	border-radius: 8px;
	background: var(--cs-mm-accent, #c9962c);
	color: #1a1305 !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-align: center;
	text-transform: uppercase;
}

.cs-mm-menu .cs-mm-cta:hover,
.cs-mm-menu .cs-mm-cta:active {
	background: #b3801d;
	color: #1a1305 !important;
}