/* ============================================
   Header
   ============================================ */

.site-header {
	position: relative;
}

.site-header-container {
	margin-block-start: 0 !important;
}

/* Columns */
.site-header .wp-block-column {
	flex-grow: 0 !important;
	flex-shrink: 1 !important;
	flex-basis: auto !important;
	width: auto !important;
}

/* Nav links (block navigation + classic per-language menu) */
.site-header .wp-block-navigation a,
.site-header .sukha-classic-menu a {
	color: var(--wp--preset--color--terracotta) !important;
	text-decoration: none;
	font-size: 1.05rem;
	font-weight: 400;
	letter-spacing: -.05em;
	transition: font-size 0.2s ease;
	word-break: keep-all;
	white-space: nowrap;
}

.site-header .wp-block-navigation a:hover,
.site-header .wp-block-navigation .current-menu-item > a,
.site-header .sukha-classic-menu a:hover,
.site-header .sukha-classic-menu .current-menu-item > a {
	/*color: var(--wp--preset--color--terracotta);*/
	font-size: 1.1rem;
}

/* Classic menu list — mirror the former block navigation's horizontal row.
   wp_nav_menu() outputs <ul class="sukha-classic-menu">; the block nav used a
   centered flex row (justifyContent:center, flexWrap:nowrap). Note: the block
   nav's mobile overlay ("hamburger") is not reproduced here — mobile nav is a
   follow-up (see STATE.md [Post-Phase-4] decision). */
.site-header .sukha-classic-menu {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	column-gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .sukha-classic-menu li {
	margin: 0;
}

/* Header CTA buttons — rendered as a classic menu, not core/button blocks.
   [sukha_menu location="cta-retreats|cta-rentals" class="cta-buttons"] outputs
   <ul class="cta-buttons"> so Polylang swaps label + link per language (see
   STATE.md CTA-menu decision). Styling is positional to keep the back office to
   two locations: every item defaults to the sage fill; the FIRST item is the
   terracotta "Book" CTA with the white-circle arrow (ported from buttons.css
   is-style-cta). The Book item must stay first in each cta-retreats menu — if an
   editor reorders it, the two pill styles swap (cosmetic only, links unaffected). */
.site-header .cta-buttons {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	column-gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-header .cta-buttons li {
	margin: 0;
}

/* Base pill — default sage fill (was the is-style-fill "Rentals" button) */
.site-header .cta-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.05rem;
	padding: 0.5rem 1.125rem;
	min-height: 3rem;
	border-radius: 2rem;
	color: var(--wp--preset--color--white);
	background-color: var(--wp--preset--color--sage);
	text-decoration: none;
	transition: transform 0.3s ease;
	word-break: keep-all;
	white-space: nowrap;
}

.site-header .cta-buttons a:hover {
	transform: scale(0.95);
}

/* First item — terracotta CTA with the white-circle arrow (is-style-cta) */
.site-header .cta-buttons li:first-child a {
	column-gap: .75rem;
	padding-left: .5rem;
	background-color: var(--wp--preset--color--terracotta);
}

/* The white circle container for the arrow */
.site-header .cta-buttons li:first-child a::before {
	content: "";
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	background-color: var(--wp--preset--color--white);
	border-radius: 50%;
}

/* Inner arrow — inherits the terracotta background via mask */
.site-header .cta-buttons li:first-child a::after {
	content: "";
	position: absolute;
	left: 1.5rem;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.5rem;
	height: 1.5rem;
	background-color: inherit;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12L20 12M20 12L14 18M20 12L14 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 12L20 12M20 12L14 18M20 12L14 6' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Language Switcher */
.site-header nav[role='navigation'],
.site-header .lang-switcher {
	vertical-align: baseline;
    position: absolute;
	z-index: 1;
	top: 2.5%;
    right: 2.5%;
	overflow:hidden;

	display: inline-flex;
	column-gap: .3rem;
	align-items: center;
	border: 1px none #cccccc;
    background-color: var(--wp--preset--color--white);
    opacity: 1;
    outline-offset: 0px;
    color: var(--brand--dark-brown);
    border-radius: 20px;
    outline: 3px #14110f;
	padding: 0;
    transition: all .2s;
    box-shadow: 0 0 12px 3px #0003;

	transition: width 2s ease-in-out, height 2s ease-in-out; 
}

.site-header nav[role='navigation']:hover,
.site-header .lang-switcher:hover {
	border-color: #d0d0d0;
}

/* The Down Arrow (Chevron) */
.site-header nav[role='navigation']::after,
.site-header .lang-switcher::after {
	content: "";
	display: inline-block;
	position: absolute;
	width: 6px;
	height: 6px;
	border-right: 2px solid #333;
	border-bottom: 2px solid #333;
	transform: rotate(45deg); /* Creates the chevron shape */
	top: 15px;
	right: 10px;
}

.site-header .wp-block-polylang-language-switcher {
	margin:0;
	padding:0;
	list-style: none;
}

.site-header .wp-block-polylang-language-switcher .lang-item {
	display:none;
}

.site-header .wp-block-polylang-language-switcher .lang-item + .lang-item {
	border-top: 1px solid #e0e0e0;
}

.site-header .wp-block-polylang-language-switcher .lang-item.current-lang {
	display:block;
	font-weight: 500;
}

.site-header .wp-block-polylang-language-switcher .lang-item a {
	display: flex;
	align-items: center;
	column-gap: .6rem;
	text-decoration: none;
	padding: 10px 25px 10px 10px;
}

.site-header .wp-block-polylang-language-switcher .lang-item span {
	display: none;
	flex-grow: 1;
	margin: 0 !important;
}

.site-header .wp-block-polylang-language-switcher .lang-item img {
	height: 20px !important;
	width: 20px !important;
	border-radius: 50%;
	display: flex;
}

/* Hover menu */
.site-header nav[role='navigation']:hover .wp-block-polylang-language-switcher .lang-item,
.site-header nav[role='navigation']:hover .wp-block-polylang-language-switcher .lang-item span {
	display: block;
}

.site-header nav[role='navigation']:hover .wp-block-polylang-language-switcher .lang-item.current-lang a {
	background-color: #f9f9f9;
}

/* ============================================
   Responsive — header nav (mobile hamburger)
   Header menus render inside <div class="sukha-nav"> (toggle="true") with a
   hamburger <button>. assets/js/header-nav.js adds `has-js` and toggles
   `.is-open`. Desktop: menu inline, button hidden. Mobile + JS: button shows,
   menu collapses to a dropdown panel. No JS: menu stays visible inline.
   ============================================ */

/* Toggle hidden by default (desktop, and the no-JS fallback where the menu
   simply stays inline). Reset the button's native chrome. */
.site-header .sukha-nav__toggle {
	display: none;
	padding: 0;
	border: 0;
	background: none;
}

@media (max-width: 900px) {
	/* Collapse to a hamburger only when JS can operate it (progressive
	   enhancement); without JS the menu stays visible inline. */
	.has-js .site-header .sukha-nav {
		display: flex;
		justify-content: flex-end;
	}

	.has-js .site-header .sukha-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		cursor: pointer;
	}

	/* Hamburger bars — the span plus its two pseudo-elements */
	.has-js .site-header .sukha-nav__bars,
	.has-js .site-header .sukha-nav__bars::before,
	.has-js .site-header .sukha-nav__bars::after {
		content: "";
		display: block;
		width: 1.6rem;
		height: 2px;
		background-color: var(--wp--preset--color--terracotta);
		transition: transform .2s ease, background-color .2s ease;
	}

	.has-js .site-header .sukha-nav__bars {
		position: relative;
	}

	.has-js .site-header .sukha-nav__bars::before {
		position: absolute;
		top: -7px;
	}

	.has-js .site-header .sukha-nav__bars::after {
		position: absolute;
		top: 7px;
	}

	/* Menu hidden until toggled open */
	.has-js .site-header .sukha-nav .sukha-classic-menu {
		display: none;
	}

	.has-js .site-header .sukha-nav.is-open .sukha-classic-menu {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		row-gap: 1rem;
		column-gap: 0;

		position: absolute;
		top: 100%;
		right: 2.5%;
		left: 2.5%;
		z-index: 20;

		margin: 0;
		padding: 1.25rem 1.5rem;
		background-color: var(--wp--preset--color--white);
		border-radius: 1rem;
		box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	}

	/* Morph the bars into an X while open */
	.has-js .site-header .sukha-nav.is-open .sukha-nav__bars {
		background-color: transparent;
	}

	.has-js .site-header .sukha-nav.is-open .sukha-nav__bars::before {
		transform: translateY(7px) rotate(45deg);
	}

	.has-js .site-header .sukha-nav.is-open .sukha-nav__bars::after {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Keep the logo sensible on small screens */
	.site-header .wp-block-site-logo {
		max-width: 170px;
	}

	.site-header .wp-block-site-logo img {
		width: 100%;
		height: auto;
	}
}