/**
 * Banner / hero styles.
 *
 * Loaded separately from the Tailwind bundle (enqueued in functions.php).
 * Brand colours (from the design tokens):
 *   ink   #1E1F1E   slate #454645   brand #119100
 *   sky   #35AFC9   cloud #F3EFE3
 *
 * Layout rules:
 *   - 1920px and up: full width, height = max(100vh, 800px) so the hero
 *     fills the viewport but never squashes below 800px tall.
 *   - Below 1920px: elements shrink/scale normally (fluid spacing).
 */

.nops-banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	color: #f3efe3; /* cloud */
	/* Fill the viewport but never below 800px; grow taller if content needs it. */
	min-height: max(100vh, 800px);
}

/* ---- Background media ---- */
.nops-banner-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.nops-banner-video,
.nops-banner-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nops-banner-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* When a video is present, the image sits behind it as a fallback/poster. */
.nops-banner-image.is-fallback {
	z-index: -1;
}

/*
 * Overlay gradients, replicated from the source SVG (1920x1091):
 *  1. Full-height: #454645 solid at the bottom fading to transparent at the
 *     top (SVG gradient bottom-to-top => CSS `to top`).
 *  2. Top band: 322px tall, #1e1f1e solid at the top fading to transparent,
 *     at 0.798 opacity (322/1091 ≈ 29.5% of height).
 * The #736660 stops in the SVG are fully transparent no-ops, so omitted.
 */
.nops-banner-overlay {
	position: absolute;
	inset: 0;
}

.nops-banner-overlay::before,
.nops-banner-overlay::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
}

/* Gradient 1 — full height, bottom-anchored #454645 */
.nops-banner-overlay::before {
	top: 0;
	bottom: 0;
	background: linear-gradient(to top, #454645 0%, rgba(69, 70, 69, 0) 100%);
}

/* Gradient 2 — top 322px band of #1e1f1e at 0.798 opacity */
.nops-banner-overlay::after {
	top: 0;
	height: 322px;
	opacity: 0.798;
	background: linear-gradient(to bottom, #1e1f1e 0%, rgba(30, 31, 30, 0) 100%);
}

/* ---- Content (heading + text) ---- */
.nops-banner-content {
	position: relative;
	z-index: 2;
	text-align: center;
	/* Heading sits 484px from the top of the banner at full scale.
	   Uses a fluid clamp so it moves up as the viewport shrinks. */
	padding-top: clamp(180px, 25.2vw, 484px);
}

.nops-banner-heading {
	margin: 0 auto;
	font-weight: 400;
	color: #f3efe3; /* cloud */
	/* 72px design size, fluid down on smaller screens. */
	font-size: clamp(2.25rem, 3.75vw, 4.5rem);
	line-height: 1.1;
}

.nops-banner-text {
	margin: 0 auto;
	max-width: 46rem;
	/* 20px design size; sits 27px below the heading. */
	margin-top: clamp(14px, 1.4vw, 27px);
	font-size: clamp(1rem, 1.04vw, 1.25rem);
	line-height: 1.6;
	color: #f3efe3; /* cloud */
}

.nops-banner-text p {
	margin: 0;
}

/* ---- Filter bar ---- */
.nops-banner-filters-wrap {
	position: relative;
	z-index: 3;
	display: flex;
	justify-content: center;
	/* 82px below the text block; scales down on smaller screens. */
	margin-top: clamp(40px, 4.3vw, 82px);
	padding: 0 24px;
}

.nops-filters {
	display: flex;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	max-width: 1430px;
	padding: 16px;
	border: 1px solid #35afc9; /* sky / blue */
	background: rgba(30, 31, 30, 0.25);
	backdrop-filter: blur(2px);
}

.nops-filters-field {
	position: relative;
	display: flex;
	align-items: center;
}

.nops-filters-field--search {
	flex: 1 1 auto;
}

.nops-filters-field--select {
	flex: 0 0 auto;
	min-width: 200px;
}

.nops-filters input,
.nops-filters select {
	width: 100%;
	height: 100%;
	min-height: 48px;
	padding: 0 44px 0 20px;
	font-family: "open-sans", sans-serif;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: #f3efe3; /* cloud */
	background: transparent;
	border: 1px solid #35afc9; /* sky */
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
}

.nops-filters input::placeholder {
	color: #f3efe3;
	opacity: 0.85;
}

.nops-filters select option {
	color: #1e1f1e; /* ink, for readable native dropdowns */
}

.nops-filters input:focus,
.nops-filters select:focus,
.nops-filters-toggle:focus,
.nops-filters-submit:focus {
	outline: 2px solid #35afc9;
	outline-offset: 2px;
}

/* Search submit arrow */
.nops-filters-submit {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

.nops-filters-submit svg {
	display: block;
}

/* Select chevron */
.nops-filters-chevron {
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	pointer-events: none;
	display: inline-flex;
}

.nops-filters-chevron svg {
	display: block;
}

/* Professional / Students toggles */
.nops-filters-toggle {
	flex: 0 0 auto;
	min-width: 140px;
	padding: 0 24px;
	min-height: 48px;
	font-family: "open-sans", sans-serif;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: #f3efe3; /* cloud */
	background: transparent;
	border: 1px solid #35afc9; /* sky */
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.nops-filters-toggle:hover,
.nops-filters-toggle.is-active {
	background: #35afc9; /* sky */
	border-color: #35afc9;
	color: #1e1f1e; /* ink */
}

/* ---- 1920px and up: lock the hero to the design intent ---- */
@media (min-width: 1920px) {
	.nops-banner {
		min-height: max(100vh, 800px);
	}

	.nops-banner-content {
		padding-top: 484px;
	}

	.nops-banner-heading {
		font-size: 72px;
	}

	.nops-banner-text {
		margin-top: 27px;
		font-size: 20px;
	}
}

/* ---- Below 1500px: two rows — search + bedrooms on row 1,
   price + professional + students on row 2. ---- */
@media (max-width: 1500px) {
	.nops-filters {
		flex-wrap: wrap;
	}

	/* Row 1: search + bedrooms */
	.nops-filters-field--search {
		flex: 1 1 calc(60% - 8px);
	}

	.nops-filters-field--select:nth-of-type(2) { /* bedrooms */
		flex: 1 1 calc(40% - 8px);
	}

	/* Row 2: price + professional + students (3 equal) */
	.nops-filters-field--select:nth-of-type(3), /* price */
	.nops-filters-toggle {
		flex: 1 1 calc(33.333% - 11px);
		min-width: 0;
	}
}

/* ---- Below 1024px: stack every field vertically. ---- */
@media (max-width: 1024px) {
	.nops-filters-field--search,
	.nops-filters-field--select,
	.nops-filters-field--select:nth-of-type(2),
	.nops-filters-field--select:nth-of-type(3),
	.nops-filters-toggle {
		flex: 1 1 100%;
	}
}

/* ---- Site header (overlays the banner) ---- */
.nops-site-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding: 0;
}

.nops-site-header-inner {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

/* Logo sits 112px from the top. */
.nops-site-header-brand {
	padding-top: 112px;
}

/* Hamburger sits 131px from the top. */
.nops-site-header-nav {
	padding-top: 131px;
}

/* On mobile/tablet the logo + hamburger sit 20px from the top. */
@media (max-width: 1024px) {
	.nops-site-header-brand,
	.nops-site-header-nav {
		padding-top: 20px;
	}
}

/* spacer balances the hamburger so the logo stays centred */
.nops-site-header-spacer,
.nops-site-header-nav {
	flex: 1 1 0;
	display: flex;
	align-items: center;
}

.nops-site-header-nav {
	justify-content: flex-end;
}

.nops-site-header-brand {
	flex: 0 0 auto;
	text-align: center;
}

.nops-logo {
	display: inline-block;
	line-height: 0;
}

.nops-logo svg {
	display: block;
	width: 240px;
	max-width: 60vw;
	height: auto;
}

/* Hamburger */
.nops-menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
}

/* Two-line hamburger. */
.nops-menu-toggle-bars {
	position: relative;
	display: block;
	width: 28px;
	height: 10px;
}

.nops-menu-toggle-bars::before,
.nops-menu-toggle-bars::after {
	content: "";
	position: absolute;
	left: 0;
	width: 28px;
	height: 2px;
	background: #f3efe3; /* cloud */
}

.nops-menu-toggle-bars::before {
	top: 0;
}

.nops-menu-toggle-bars::after {
	bottom: 0;
}

/* ---- Full-screen-ish overlay menu (slides in from the right) ---- */
body.nops-menu-open {
	overflow: hidden;
}

.nops-menu-overlay {
	position: fixed;
	inset: 0;
	z-index: 10000; /* above Leaflet map panes/controls (~400–1000) */
	display: flex;
	justify-content: flex-end;
	visibility: hidden;
	opacity: 0;
	/* Dim + blur the page behind the panel. */
	background: rgba(30, 31, 30, 0.55);
	backdrop-filter: blur(3px);
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.nops-menu-overlay.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.35s ease;
}

.nops-menu-overlay-panel {
	position: relative;
	width: 100%;
	max-width: 859px; /* 1920px+ : 859px wide */
	height: 100%;
	margin: 0;
	padding: 64px 104px;
	display: flex;
	flex-direction: column;
	background: rgba(69, 70, 69, 0.92); /* slate, translucent */
	transform: translateX(100%);
	transition: transform 0.35s ease;
	overflow-y: auto;
}

.nops-menu-overlay.is-open .nops-menu-overlay-panel {
	transform: translateX(0);
}

/* Close button — 32 x 32, top-right. */
.nops-menu-overlay-close {
	position: absolute;
	top: 64px;
	right: 64px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 3;
}

.nops-menu-overlay-close-x::before,
.nops-menu-overlay-close-x::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 32px;
	height: 1.5px;
	background: #f3efe3; /* cloud */
}

.nops-menu-overlay-close-x::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.nops-menu-overlay-close-x::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* Back button — same level as the close, top-left. Hidden until a submenu. */
.nops-menu-overlay-back {
	position: absolute;
	top: 64px;
	left: 104px;
	width: 36px;
	height: 32px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	z-index: 3;
}

.nops-menu-overlay-back[hidden] {
	display: none;
}

.nops-menu-overlay-back svg {
	display: block;
}

/* Parent title shown at the top while a submenu is open. */
.nops-menu-overlay-title {
	margin: 0;
	position: absolute;
	top: 160px; /* more gap below the back / close row */
	left: 104px;
	right: 104px;
	font-family: "etna", sans-serif;
	font-size: 40px;
	line-height: 1.1;
	color: #f3efe3; /* cloud */
}

.nops-menu-overlay-title[hidden] {
	display: none;
}

/* Menu list */
.nops-menu-overlay-list {
	position: relative;
	list-style: none;
	margin: auto 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 38px; /* 38px between first-level items */
}

/* While a submenu is open, hide the other top-level items. */
.nops-menu-overlay-list.has-open-sub > li:not(.is-sub-open) {
	visibility: hidden;
}

/* Hide the clicked parent's OWN link, but keep its child submenu visible. */
.nops-menu-overlay-list > li.is-sub-open > a {
	visibility: hidden;
}

.nops-menu-overlay-list li {
	position: relative;
	margin: 0;
}

.nops-menu-overlay-list a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 0;
	font-family: "etna", sans-serif;
	font-size: 40px; /* first-level items */
	/* Fixed line box relative to this element's font size, so italic-on-hover
	   can't change the height and make the centred list jump. Scales correctly
	   as the font drops at each breakpoint. */
	min-height: 1.2em;
	line-height: 1.1;
	color: #f3efe3; /* cloud */
	text-decoration: none;
	transition: padding-left 0.2s ease, color 0.2s ease;
}

/* On hover/current: push the text right to make room for the dot. */
.nops-menu-overlay-list a:hover,
.nops-menu-overlay-list a:focus,
.nops-menu-overlay-list .current-menu-item > a {
	padding-left: 26px;
}

/* Hover / current: italic + blue dot in line with the text. */
.nops-menu-overlay-list a:hover,
.nops-menu-overlay-list a:focus,
.nops-menu-overlay-list .current-menu-item > a {
	font-style: italic;
}

.nops-menu-overlay-list a::before {
	content: "";
	position: absolute;
	left: 0; /* at the text's original start; text shifts right on hover */
	top: 50%;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #35afc9; /* sky / blue */
	transform: translateY(-50%) scale(0);
	transition: transform 0.2s ease;
}

.nops-menu-overlay-list a:hover::before,
.nops-menu-overlay-list a:focus::before,
.nops-menu-overlay-list .current-menu-item > a::before {
	transform: translateY(-50%) scale(1);
}

/* ---- Slide-in submenu ---- */
/* The submenu covers the main list and slides in from the right. */
.nops-menu-overlay-list .sub-menu {
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	transform: translate(100%, -50%);
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 44px; /* 44px between secondary items */
	opacity: 0;
	visibility: hidden;
	transition: transform 0.35s ease, opacity 0.35s ease, visibility 0s linear 0.35s;
	z-index: 2;
}

.nops-menu-overlay-list > li.is-sub-open > .sub-menu {
	transform: translate(0, -50%);
	opacity: 1;
	visibility: visible;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.nops-menu-overlay-list .sub-menu li {
	position: relative;
	margin: 0;
}

/* Secondary items: 35px. */
.nops-menu-overlay-list .sub-menu a {
	font-size: 35px;
}

/* Footer row: call CTA left, socials right */
.nops-menu-overlay-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 40px;
	padding-top: 24px;
}

.nops-menu-overlay-call,
.nops-menu-overlay-call:visited {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-family: "open-sans", sans-serif;
	font-size: 18px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #f3efe3; /* cloud */
	text-decoration: none;
}

.nops-menu-overlay-call svg {
	display: block;
}

.nops-menu-overlay-social {
	display: inline-flex;
	align-items: center;
	gap: 16px;
}

.nops-menu-overlay-social a {
	display: inline-flex;
	color: #f3efe3; /* cloud */
	transition: color 0.2s ease;
}

.nops-menu-overlay-social a:hover {
	color: #35afc9; /* sky */
}

.nops-menu-overlay-social svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Panel width steps down below 1920px: 859px is the full-size width; narrow
   it in stages so it never dominates smaller screens, then go full-width. */
@media (max-width: 1500px) {
	.nops-menu-overlay-panel {
		max-width: 720px;
	}
}

@media (max-width: 1200px) {
	.nops-menu-overlay-panel {
		max-width: 600px;
	}
	.nops-menu-overlay-title {
		font-size: 34px;
	}
	.nops-menu-overlay-list a {
		font-size: 34px;
	}
	.nops-menu-overlay-list .sub-menu a {
		font-size: 30px;
	}
}

@media (max-width: 640px) {
	.nops-menu-overlay-panel {
		max-width: 100%;
		padding: 56px 32px;
	}
	.nops-menu-overlay-back {
		left: 32px;
	}
	.nops-menu-overlay-title {
		left: 32px;
		right: 32px;
	}
	.nops-menu-overlay-list a {
		font-size: 30px;
	}
	.nops-menu-overlay-list .sub-menu a {
		font-size: 26px;
	}
}

/* ---- Tom Select styling for the banner filters ---- */

/* Hide our static chevron once Tom Select has enhanced the field. */
.nops-filters-field--select .ts-wrapper ~ .nops-filters-chevron,
.nops-filters-field--select:has(.ts-wrapper) .nops-filters-chevron {
	display: none;
}

.nops-filters .ts-wrapper {
	width: 100%;
	min-width: 200px;
}

.nops-filters .ts-control {
	min-height: 48px;
	padding: 0 44px 0 20px;
	display: flex;
	align-items: center;
	font-family: "open-sans", sans-serif;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: #f3efe3; /* cloud */
	background: transparent;
	border: 1px solid #35afc9; /* sky */
	border-radius: 0;
	box-shadow: none;
}

.nops-filters .ts-wrapper.single .ts-control,
.nops-filters .ts-control input {
	color: #f3efe3; /* cloud */
}

.nops-filters .ts-control input::placeholder {
	color: #f3efe3;
	opacity: 0.85;
}

.nops-filters .ts-wrapper.focus .ts-control {
	outline: 2px solid #35afc9;
	outline-offset: 2px;
	border-color: #35afc9;
}

/* When focused/open the control goes white — keep text dark for contrast. */
.nops-filters .ts-wrapper.focus .ts-control,
.nops-filters .ts-wrapper.input-active .ts-control,
.nops-filters .ts-wrapper.dropdown-active .ts-control,
.nops-filters .ts-wrapper.focus .ts-control input,
.nops-filters .ts-wrapper.input-active .ts-control input,
.nops-filters .ts-wrapper.dropdown-active .ts-control input {
	color: #1e1f1e; /* ink */
}

/* Custom chevron (matches the provided SVG shape). */
.nops-filters .ts-wrapper.single .ts-control::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 14px;
	height: 8px;
	transform: translateY(-50%);
	background-color: #f1efe4;
	clip-path: polygon(0 15%, 50% 100%, 100% 15%, 88% 0, 50% 78%, 12% 0);
	pointer-events: none;
}

.nops-filters .ts-wrapper.single.dropdown-active .ts-control::after {
	transform: translateY(-50%) rotate(180deg);
	background-color: #1e1f1e; /* ink, for contrast on white */
}

/* Dropdown panel */
.nops-filters .ts-dropdown {
	margin-top: 2px;
	background: #454645; /* slate */
	border: 1px solid #35afc9; /* sky */
	border-radius: 0;
	box-shadow: 0 8px 24px rgba(30, 31, 30, 0.4);
}

.nops-filters .ts-dropdown .option {
	font-family: "open-sans", sans-serif;
	font-size: 18px;
	color: #f3efe3; /* cloud */
	padding: 10px 20px;
}

.nops-filters .ts-dropdown .option.active,
.nops-filters .ts-dropdown .option:hover {
	background: #35afc9; /* sky */
	color: #1e1f1e; /* ink */
}