/* =========================================================
   JHH COLOR SYSTEM
   ========================================================= */

:root {
	--jhh-accent: #F5C7AA;
	--jhh-orange: #EB7120;
	--jhh-light-peach: #F7E5D9;
	--jhh-black: #080707;
	--jhh-light: #FFFCFB;
	--jhh-white: #F8F8F8;

		/* Fluid spacing */
	--jhh-space-section: clamp(3.25rem, 5vw, 5.25rem);  /* 52–84px */
	--jhh-space-large:   clamp(2.25rem, 3.5vw, 3.75rem); /* 36–60px */
	--jhh-space-card: 	clamp(1.25rem, 1.75vw, 2rem);
	--jhh-space-medium:  clamp(1.375rem, 2vw, 2rem);     /* 22–32px */
	--jhh-space-small:   clamp(0.875rem, 1.25vw, 1.25rem); /* 14–20px */
}

@media (max-width: 690px) {
	:root {
		--jhh-space-card: clamp(2rem, 2.5vw, 3rem);
	}
}
@media only screen and (min-width: 1000px) {
    .container, body[data-header-format="left-header"] .container, .woocommerce-tabs .full-width-content .tab-container, .nectar-recent-posts-slider .flickity-page-dots, .post-area.standard-minimal.full-width-content .post .inner-wrap, .material #search-outer #search {
        max-width: 1820px !important;
    }
}
/* =========================================================
   TYPOGRAPHY
   ========================================================= */

html,
body,
p,
li,
a,
button,
input,
select,
textarea {
	font-family: "avenir-next-lt-pro", sans-serif !important;
	font-style: normal !important;
	font-weight: 500 !important;
}

h1,
h2,
h3,
h4 {
	font-family: "avenir-next-lt-pro", sans-serif !important;
	font-style: normal !important;
	font-weight: 600 !important;
}

h5,
h6 {
	font-family: "avenir-next-lt-pro", sans-serif !important;
	font-style: normal !important;
	font-weight: 700 !important;
}

strong,
b {
	font-family: "avenir-next-lt-pro", sans-serif !important;
	font-weight: 600 !important;
}

em,
i {
	font-style: italic !important;
}


/* Serif heading style */

.jhh-serif-heading {
	font-family: "linotype-sabon", serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
}
h1 {
	font-size: clamp(2.5rem, calc(1.5rem + 2.5vw), 3.75rem) !important;
	line-height: 1 !important;
}

h2 {
	font-size: clamp(1.875rem, calc(1.5rem + 0.75vw), 2.5rem) !important;
	line-height: 1.1 !important;
}

h3 {
	font-size: 19px !important;
	line-height: 1.4em !important;
}

h4 {
	font-size: clamp(1.375rem, calc(1.2rem + 0.4vw), 1.75rem) !important;
	line-height: 1.2 !important;
}

h5 {
	font-size: clamp(1.125rem, calc(1rem + 0.3vw), 1.375rem) !important;
	line-height: 1.25 !important;
}

h6 {
	font-size: clamp(1rem, calc(0.95rem + 0.2vw), 1.125rem) !important;
	line-height: 1.3 !important;
}

p,
li {
	font-size: clamp(1rem, calc(0.95rem + 0.15vw), 1.125rem) !important;
	line-height: 1.4 !important;
}
.heroText p,
.heroText h1 {
	text-shadow: 0px 0px 20px rgba(0,0,0,1) !important;
}
.preamble p {
	font-size: clamp(1.1rem, calc(1rem + 0.1vw), 1.5625rem) !important;
	line-height: 1.4em !important;
}
.smallTitle {
	font-size: clamp(0.9rem, 1rem, 1.25rem) !important;
	line-height: 3em !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600 !important;
	margin-bottom: 20px !important;
}
.mainHero h1 {
	margin-bottom: 30px !important;
}
.nectar-button, .nectar-button.medium {
	font-weight: 600 !important;
	font-size: 14px !important;
}
@media only screen and (max-width: 690px) {
	.nectar-button, .nectar-button.medium {
		font-size: 12px !important;
	}
	body[data-button-style^="rounded"] .nectar-button.medium:not(.see-through):not(.see-through-2):not(.see-through-3) {
		padding: 7px 20px !important;
	}
	body[data-button-style^="rounded"] .nectar-button.see-through-2 {
		padding: 5px 18px;
	}
}
.nectar-button[data-color-override="false"].regular-button:hover {
	background-color: #EB7120 !important;
	color: #fff !important;
	opacity: 1 !important;
}

#header-outer #top nav > ul > li > a,
#header-outer #top nav > ul > li > ul > li > a {
	transition: color 0.21s ease;
	font-weight: 600 !important;
}

#header-outer #top nav > ul > li > ul > li > a {
	border-radius: 8px !important;
}

#header-outer #top nav > ul > li > a:hover,
#header-outer #top nav > ul > li > a:focus,
#header-outer #top nav > ul > li.current-menu-item > a,
#header-outer #top nav > ul > li.current_page_item > a,
#header-outer #top nav > ul > li.current-menu-ancestor > a,
#header-outer #top nav > ul > li.current_page_ancestor > a {
	color: var(--jhh-orange) !important;
}
@media only screen and (min-width: 1441px) {
	body .homeHero {
		padding-top: 160px !important;
	}

}
body .heroText {}
body .wpb_text_column a {
	font-weight: 600 !important;
	color: var(--jhh-black) !important;
	text-decoration: underline;
}

/* Breadcrumbs */
body .breadCrumbsClass a,
body .breadCrumbsClass span {
	font-size: 14px !important;
	font-weight: 600 !important;

	color: var(--jhh-black) !important;
}
body .breadCrumbsClass {
		line-height: 1em !important;
}
body .breadCrumbsClass a {
	opacity: 0.6 !important;
	text-decoration: none !important;
}

body .breadCrumbsClass a:hover {
	color: var(--jhh-orange) !important;
	opacity: 1 !important;
}

body .breadCrumbsClass span.breadcrumb_last {
	opacity: 1 !important;
	color: var(--jhh-black) !important;
}
/* Breadcrumbs inside dark hero */
body .heroText .breadCrumbsClass a,
body .heroText .breadCrumbsClass span,
body .heroText .breadCrumbsClass span.breadcrumb_last {
	color: var(--jhh-white) !important;
	text-shadow: 0px 0px 20px rgba(0,0,0,1) !important;
}

body .heroText .breadCrumbsClass a:hover {
	color: var(--jhh-orange) !important;
}

/* ---------------------------------------------------------
   Header booking CTA
--------------------------------------------------------- */

/* Desktop */
#header-outer #top nav > ul > li.menuButton > a {
	padding: 8px 14px !important;
	border-radius: 200px !important;
	background: var(--jhh-accent) !important;
	color: var(--jhh-black) !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease !important;
}


#header-outer #top nav > ul > li.menuButton > a .menu-title-text {
	color: inherit !important;
	font-weight: 600 !important;
}
#header-outer #top nav > ul > li.menuButton > a .menu-title-text:after {
	border: none !important;
}

/* Desktop hover, focus and current page */
#header-outer #top nav > ul > li.menuButton > a:hover,
#header-outer #top nav > ul > li.menuButton > a:focus,
#header-outer #top nav > ul > li.menuButton.current-menu-item > a,
#header-outer #top nav > ul > li.menuButton.current_page_item > a,
#header-outer #top nav > ul > li.menuButton.current-menu-ancestor > a,
#header-outer #top nav > ul > li.menuButton.current_page_ancestor > a {
	background: var(--jhh-orange) !important;
	color: #fff !important;
}


/* ---------------------------------------------------------
   Mobile menu booking CTA
--------------------------------------------------------- */

#header-outer #mobile-menu ul li.menuButton {
	padding-top: 20px !important;
	padding-bottom: 20px !important;
}

#header-outer #mobile-menu ul li.menuButton > a {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: auto !important;
	padding: 12px 22px !important;
	border-radius: 200px !important;
	background: var(--jhh-accent) !important;
	color: var(--jhh-black) !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease !important;
}

#header-outer #mobile-menu ul li.menuButton > a span {
	color: inherit !important;
	font-weight: inherit !important;
}

/* Mobile hover, focus and current page */
#header-outer #mobile-menu ul li.menuButton > a:hover,
#header-outer #mobile-menu ul li.menuButton > a:focus,
#header-outer #mobile-menu ul li.menuButton.current-menu-item > a,
#header-outer #mobile-menu ul li.menuButton.current_page_item > a,
#header-outer #mobile-menu ul li.menuButton.current-menu-ancestor > a,
#header-outer #mobile-menu ul li.menuButton.current_page_ancestor > a {
	background: var(--jhh-orange) !important;
	color: #fff !important;
}


/* ---------------------------------------------------------
   Compact desktop header – before mobile breakpoint
--------------------------------------------------------- */

@media only screen and (min-width: 1000px) and (max-width: 1100px) {

	/* Regular navigation */
	#header-outer #top nav > ul > li > a,
	#header-outer #top nav > ul > li > ul > li > a {
		font-size: 14px !important;
	}

	/* Reduce spacing between menu items */
	#header-outer #top nav > ul > li:not(.menuButton) > a {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	/* Booking CTA */
	#header-outer #top nav > ul > li.menuButton > a {
		padding: 6px 16px !important;
		font-size: 14px !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	#header-outer[data-full-width="true"] header > .container {
		padding: 0 30px !important;
	}

}
/**
 * JHH Extras
 * Frontend styles.
 */


/* ---------------------------------------------------------
   Room furniture
--------------------------------------------------------- */

.jhh-room-furniture {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
}

.jhh-room-furniture__item {
	min-width: 0;
	overflow: hidden;
	border-radius: 10px;
	background: #fff;
}

.jhh-room-furniture__image {
	display: block;
	overflow: hidden;
	cursor: zoom-in;
	width: 100%;
	aspect-ratio: 4 / 2.5;
	margin: 0;
}


.jhh-room-furniture__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.jhh-room-furniture__image:hover img {
	transform: scale(1.02);
}

.jhh-room-furniture__content {
	padding: 24px 25px 22px;
}

.jhh-room-furniture__title {
	margin: 0 0 14px;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.25;
}

.jhh-room-furniture__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.jhh-room-furniture__type,
.jhh-room-furniture__capacity {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
}

.jhh-room-furniture__meta-icon {
	display: inline-block;
	flex: 0 0 20px;
	width: 17px;
	height: 17px;
	background-color: rgb(8 7 7 / 55%);

	-webkit-mask: var(--jhh-icon) center / contain no-repeat;
	mask: var(--jhh-icon) center / contain no-repeat;
}

.jhh-room-furniture__capacity-icon {
	--jhh-icon: url("../img/icons/capacity.svg");
}

/* ---------------------------------------------------------
   Room lists
--------------------------------------------------------- */

.jhh-room-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 45px;
	row-gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jhh-room-list__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.jhh-room-list__check {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
	margin-top: 2px;
}

.jhh-room-list__check::before {
	content: "";
	position: absolute;
	top: 1px;
	left: 4px;
	width: 5px;
	height: 9px;
	border-right: 2px solid var(--jhh-black);
	border-bottom: 2px solid var(--jhh-black);
	transform: rotate(45deg);
}

.jhh-room-list__text {
	flex: 1;
	min-width: 0;
	font-size: 16px;
	line-height: 1.35;
}
/* =========================================================
   Room grid header
   ========================================================= */

.jhh-rooms__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--jhh-space-large);
	margin-bottom: var(--jhh-space-medium);
}

.jhh-rooms__heading {
	max-width: 650px;
	margin: 0;
	color: var(--jhh-black) !important;
}


/* Filters
   --------------------------------------------------------- */

.jhh-rooms__filters {
	display: flex;
	flex: 0 0 auto;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin: 0;
}

.jhh-rooms__filter-label {
	color: rgba(8, 7, 7, 0.4);
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

.jhh-rooms__filter {
	position: relative;
	display: inline-block;
	margin: 0;
	padding: 0 0 4px;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	color: var(--jhh-black) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.2s ease;
}

/* Underline */
.jhh-rooms__filter::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}

/* Hover */
.jhh-rooms__filter:hover {
	color: var(--jhh-orange) !important;
}

.jhh-rooms__filter:hover::after,
.jhh-rooms__filter:focus-visible::after,
.jhh-rooms__filter.is-active::after {
	transform: scaleX(1);
}

/* Active */
.jhh-rooms__filter.is-active {
	color: var(--jhh-orange) !important;
}

/* Keyboard focus */
.jhh-rooms__filter:focus-visible {
	outline: 2px solid var(--jhh-orange);
	outline-offset: 5px;
}
@media only screen and (max-width: 999px) {

	.jhh-rooms__header {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--jhh-space-small);
	}

	.jhh-rooms__filters {
		flex-wrap: wrap;
	}

}




/* ---------------------------------------------------------
   Room grid
--------------------------------------------------------- */

.jhh-rooms__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
}

.jhh-room-card[hidden] {
	display: none;
}

/* =========================================================
   Room cards
   ========================================================= */

.jhh-room-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border-radius: 15px;
	background: #fff;
}

/* Image
   --------------------------------------------------------- */

.jhh-room-card__image-link {
	display: block;
	width: 100%;
	text-decoration: none !important;
}

.jhh-room-card__image {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 0.88;
	overflow: hidden;
}

.jhh-room-card__image img {
	display: block;
	width: 100%;
	height: 100% !important;
	object-fit: cover;
	margin: 0;

	transition: transform 0.35s ease;
}

/* Hover overlay */
.jhh-room-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background: var(--jhh-black);
	opacity: 0;

	pointer-events: none;
	transition: opacity 0.35s ease;
}

/* Whole card hover */
.jhh-room-card:hover .jhh-room-card__image img {
	transform: scale(1.025);
}

.jhh-room-card:hover .jhh-room-card__image::after {
	opacity: 0.12;
}

/* Content
   --------------------------------------------------------- */

.jhh-room-card__content {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--jhh-space-card);
}

.jhh-room-card__title {
	margin: 0 0 16px;
	font-size: clamp(1.25rem, calc(1.05rem + 0.5vw), 1.5625rem) !important;
	line-height: 1.2 !important;
	font-weight: 600 !important;
}

.jhh-room-card__title a {
	color: var(--jhh-black) !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: inherit !important;
	text-decoration: none !important;
}

.jhh-room-card__title a:hover,
.jhh-room-card__title a:focus {
	color: var(--jhh-orange) !important;
}


/* Facts
   --------------------------------------------------------- */

.jhh-room-card__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	margin: 0 0 24px;
}

.jhh-room-card__fact {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--jhh-black);
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 20px !important;
	white-space: nowrap;
}

.jhh-room-card__fact-icon {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	background-color: var(--jhh-black);
	opacity: 0.6;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}
.jhh-room-card__fact-icon--size {
	mask-image: url("../img/icons/size.svg");
	-webkit-mask-image: url("../img/icons/size.svg");
}

.jhh-room-card__fact-icon--capacity {
	mask-image: url("../img/icons/capacity.svg");
	-webkit-mask-image: url("../img/icons/capacity.svg");
}

.jhh-room-card__fact-icon--stage {
	mask-image: url("../img/icons/stage.svg");
	-webkit-mask-image: url("../img/icons/stage.svg");
}

.jhh-room-card__fact-icon--fireplace {
	mask-image: url("../img/icons/fireplace.svg");
	-webkit-mask-image: url("../img/icons/fireplace.svg");
}


/* Description
   --------------------------------------------------------- */

.jhh-room-card__description {
	margin: 0 0 var(--jhh-space-medium);
	color: #6f6d6d;
}

.jhh-room-card__description p {
	margin: 0;
	color: inherit !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}


/* Footer
   --------------------------------------------------------- */

.jhh-room-card__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: auto;
	padding-top: var(--jhh-space-medium);
}

.jhh-room-card__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 13px 22px;
	border-radius: 100px;
	background: var(--jhh-accent);
	color: var(--jhh-black) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.jhh-room-card__button:hover,
.jhh-room-card__button:focus {
	background: var(--jhh-orange);
	color: #fff !important;
}

.jhh-room-card__price {
	flex: 0 0 auto;
	color: rgba(8, 7, 7, 0.6);
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	white-space: nowrap;
}


/* Mobile
   --------------------------------------------------------- */

@media only screen and (max-width: 690px) {

	.jhh-room-card__content {
		padding: var(--jhh-space-medium);
	}

	.jhh-room-card__facts {
		gap: 8px 14px;
	}

	.jhh-room-card__footer {
		gap: 15px;
	}

}

/* =========================================================
   Room grid CTA card
   ========================================================= */

.jhh-room-card--cta {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	padding: var(--jhh-space-card);
	border-radius: 15px;
	background: var(--jhh-accent);
	text-align: center;
}

.jhh-room-card__cta-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 420px;
	margin: auto;
}

.jhh-room-card__cta-title {
	margin: 0 0 20px;
	color: var(--jhh-black) !important;
	text-align: center;
	font-size: clamp(2.175rem, calc(2.2rem + 0.75vw), 2.25rem) !important;
	line-height: 1.1 !important;
}

.jhh-room-card__cta-content p {
	margin: 0 0 28px;
	color: var(--jhh-black) !important;
	text-align: center;
}

body .jhh-room-card .jhh-room-card__cta-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 22px;
	border-radius: 100px;
	background: var(--jhh-orange);
	color: #fff !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

body .jhh-room-card .jhh-room-card__cta-button:hover,
body .jhh-room-card .jhh-room-card__cta-button:focus {
	background: var(--jhh-black);
	color: #fff !important;
}
/* =========================================================
   Full-width CTA when alone on desktop row
   ========================================================= */

@media only screen and (min-width: 1000px) {

	.jhh-rooms__grid.has-full-width-cta > .jhh-room-card--cta {
		grid-column: 1 / -1;
		min-height: 340px;
		padding: var(--jhh-space-large);
	}

	.jhh-rooms__grid.has-full-width-cta .jhh-room-card__cta-content {
		max-width: 650px;
	}

}

/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media only screen and (max-width: 999px) {

	.jhh-room-furniture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.jhh-rooms__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media only screen and (max-width: 690px) {

	.jhh-room-furniture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px 12px;
	}

	.jhh-room-furniture__image {
		margin-bottom: 10px;
	}

	.jhh-room-furniture__content {
		display: block;
	}

	.jhh-room-furniture__capacity {
		margin-top: 3px;
		font-size: 0.9em;
	}

	.jhh-room-list {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.jhh-room-faq__question {
		gap: 20px;
		padding: 18px 0;
	}

	.jhh-room-faq__answer-inner {
		padding: 0 35px 20px 0;
	}

	.jhh-rooms__grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.jhh-room-card__image {
		margin-bottom: 16px;
	}

}

/* =========================================================
   SINGLE ROOM
   ========================================================= */

.jhh-single-room {
	width: 100%;
	color: var(--jhh-black);
}


/* ---------------------------------------------------------
   Shared
--------------------------------------------------------- */

.jhh-room-section {
	padding: var(--jhh-space-section) 0;
}

.jhh-room-section__title {
	margin: 0 0 35px;
}


/* ---------------------------------------------------------
   Room intro
--------------------------------------------------------- */

.jhh-room-intro {
	padding: var(--jhh-space-section) 0;
}

.jhh-room-intro__grid {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	gap: clamp(30px, 4vw, 60px);
	align-items: center;
}


/* ---------------------------------------------------------
   Intro - left column
--------------------------------------------------------- */

.jhh-room-intro__content {
	min-width: 0;
	max-width: 760px;
}

.jhh-room-intro__types {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: 24px;
	font-size: 13px;
	font-weight: 600 !important;
	line-height: 1.3;
}

.jhh-room-intro__type {
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 600 !important;
}

.jhh-room-intro__type-separator {
	text-decoration: none;
}

.jhh-room-intro__heading {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 25px;
}

.jhh-room-intro__title {
	margin: 0;
	padding: 0;
	font-size: clamp(52px, 4.3vw, 76px);
	line-height: 1;
	letter-spacing: -0.025em;
	margin-bottom: 20px !important;
}

.jhh-room-intro__price {
	flex: 0 0 auto;
	padding: 12px 18px;
	border-radius: 10px;
	background: var(--jhh-light-peach);
	color: var(--jhh-black);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	margin-top: -10px;
}

.jhh-room-intro__excerpt {
	max-width: 670px;
	margin-bottom: 34px;
	font-size: clamp(20px, 1.55vw, 25px);
	line-height: 1.25;
}

.jhh-room-intro__excerpt p {
	margin: 0;
}

.jhh-room-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 14px 22px;
	border: 0;
	border-radius: 999px;
	background: var(--jhh-accent);
	color: var(--jhh-black) !important;
	font-size: 15px;
	font-weight: 600 !important;
	line-height: 1;
	text-decoration: none;
	transition:
		opacity 0.2s ease,
		transform 0.2s ease;
}

.jhh-room-button:hover,
.jhh-room-button:focus {
	background: var(--jhh-orange);
	color: var(--jhh-light) !important;
	opacity: 1;
}



/* ---------------------------------------------------------
   Intro - meta card
--------------------------------------------------------- */

.jhh-room-meta {
	padding: var(--jhh-space-card);
	border-radius: 15px;
	background: #fff;
	color: var(--jhh-black);
}

.jhh-room-meta__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 34px 35px;
}

.jhh-room-meta__item {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.jhh-room-meta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 45px;
	width: 45px;
	height: 45px;
}

.jhh-room-meta__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.jhh-room-meta__content {
	min-width: 0;
}

.jhh-room-meta__label {
	margin-bottom: 2px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb(8 7 7 / 60%);
}

.jhh-room-meta__value {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.15;
}

.jhh-room-meta__footer {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid rgb(8 7 7 / 30%);
	color: rgb(8 7 7 / 60%);
}

.jhh-room-meta__footer p {
	font-size: 13px !important;
	line-height: 1.45;

	margin: 0;
}

.jhh-room-meta__price-note {
	margin-top: 3px !important;
	font-weight: 600 !important;
	padding-bottom: 0px !important;
}


/* ---------------------------------------------------------
   Featured image
--------------------------------------------------------- */

.jhh-room-featured {
	position: relative;
	overflow: hidden;
	width: 100%;
	aspect-ratio: 1.91 / 1;
	margin-bottom: 0;
	border-radius: 15px;
}

.jhh-room-featured__image {
	display: block;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center;
}


/* ---------------------------------------------------------
   Furniture section
--------------------------------------------------------- */

.jhh-room-section--furniture {
	padding-top: var(--jhh-space-section);
}

.jhh-room-section__intro {
	max-width: 760px;
	margin-bottom: 45px;
}

.jhh-room-section__intro .jhh-room-section__title {
	margin-bottom: 15px;
}

.jhh-room-section__intro p {
	margin: 0;
}


/* ---------------------------------------------------------
   Included / facilities
--------------------------------------------------------- */

.jhh-room-features__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 30px;
	align-items: stretch;
}

.jhh-room-features__column {
	min-width: 0;
	padding: var(--jhh-space-card);
	border-radius: 10px;
	background: #fff;
}

.jhh-room-features__column:nth-child(2) {
	background: var(--jhh-light-peach);
}

.jhh-room-features__column .jhh-room-section__title {
	margin: 0 0 35px;
}


/* ---------------------------------------------------------
   About
--------------------------------------------------------- */

.jhh-room-about__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	gap: 30px;
	align-items: stretch;
	min-height: clamp(25rem, 32vw, 31.25rem);
}

.jhh-room-about__content {
	min-width: 0;
	padding: var(--jhh-space-card);
	border-radius: 10px;
	background: #fff;
}

.jhh-room-about__image {
	min-width: 0;
	border-radius: 10px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

@media only screen and (max-width: 690px) {

	.jhh-room-about__grid {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.jhh-room-about__image {
		aspect-ratio: 4 / 3;
	}

}
/* ---------------------------------------------------------
   Room FAQ
--------------------------------------------------------- */

.jhh-room-faq {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.jhh-room-faq__item {
	overflow: hidden;
	border: 0 !important;
	border-radius: 15px !important;
	background: transparent;
}

/* Question */
.jhh-room-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--jhh-space-small);
	width: 100%;
	margin: 0;
	padding: clamp(1.25rem, 1.5vw, 1.5rem);
	border: 0 !important;
	border-radius: 15px !important;
	background: var(--jhh-light-peach) !important;
	color: var(--jhh-black) !important;
	font: inherit;
	font-size: clamp(1rem, 1rem, 1.2rem) !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: left;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
/* Closed */
body[data-button-style^="rounded"] button.jhh-room-faq__question[aria-expanded="false"] {
	border-top-left-radius: 15px !important;
	border-top-right-radius: 15px !important;
	border-bottom-right-radius: 15px !important;
	border-bottom-left-radius: 15px !important;
}

/* Keep question peach on hover/focus */
.jhh-room-faq__question:hover,
.jhh-room-faq__question:focus {
	border: 0 !important;
	background: var(--jhh-light-peach) !important;
	color: var(--jhh-black) !important;
}

/* Open question: only top corners rounded */
.jhh-room-faq__question[aria-expanded="true"] {
	border-radius: 15px 15px 0 0 !important;
}

.jhh-room-faq__question:focus-visible {
	outline: 2px solid var(--jhh-black);
	outline-offset: -4px;
}

.jhh-room-faq__question-text {
	flex: 1;
	min-width: 0;
}

/* Plus / minus */
.jhh-room-faq__icon {
	position: relative;
	flex: 0 0 24px;
	width: 24px;
	height: 24px;
}

.jhh-room-faq__icon::before,
.jhh-room-faq__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 2px;
	background: var(--jhh-black);
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease;
}

.jhh-room-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Plus becomes minus when open */
.jhh-room-faq__question[aria-expanded="true"] .jhh-room-faq__icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

.jhh-room-faq__answer {
	margin: 0;
	border: 0 !important;
	border-radius: 0 0 15px 15px !important;
	background: #fff !important;
}

.jhh-room-faq__answer[hidden] {
	display: none;
}

.jhh-room-faq__answer-inner {
	max-width: none;
	margin: 0;
	padding:
		clamp(1.75rem, 2.5vw, 3rem)
		clamp(1.25rem, 1.5vw, 1.5rem);
	border: 0 !important;
	background: transparent;
}

.jhh-room-faq__answer-inner > :first-child {
	margin-top: 0;
}

.jhh-room-faq__answer-inner > :last-child {
	margin-bottom: 0;
}
/* ---------------------------------------------------------
   Room CTA
--------------------------------------------------------- */

.jhh-room-cta {
	padding: var(--jhh-space-section) 0;
}

.jhh-room-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: clamp(2.5rem, 4vw, 4.5rem) var(--jhh-space-card);
	border-radius: 15px;
	background: var(--jhh-orange);
	color: #fff;
	text-align: center;
}

.jhh-room-cta__content {
	max-width: 850px;
	margin: 0 0 24px;
}

.jhh-room-cta__title {
	margin: 0 0 16px;
	color: #fff !important;
}

.jhh-room-cta__content p {
	max-width: 600px;
	margin: 0 auto;
	color: #fff !important;
	padding-bottom: 0px !important;
}

.jhh-room-cta .jhh-room-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 12px 22px;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--jhh-accent) !important;
	color: var(--jhh-black) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	text-decoration: none !important;
	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.jhh-room-cta .jhh-room-button:hover,
.jhh-room-cta .jhh-room-button:focus {
	background: var(--jhh-black) !important;
	color: var(--jhh-light) !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */


/* ---------------------------------------------------------
   Tablet
--------------------------------------------------------- */

@media only screen and (max-width: 999px) {


.jhh-room-intro__grid {
		grid-template-columns: 1fr;
		gap: var(--jhh-space-large);
	}

	.jhh-room-intro__content {
		max-width: 760px;
	}

	.jhh-room-meta {
		width: 100%;
	}

	.jhh-room-meta__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--jhh-space-medium);
	}

	.jhh-room-intro__title {
		font-size: clamp(44px, 6vw, 60px);
	}

	.jhh-room-intro__excerpt {
		font-size: 19px;
	}


	.jhh-room-meta__grid {
		gap: 28px 20px;
	}

	.jhh-room-meta__item {
		gap: 12px;
	}

	.jhh-room-meta__icon {
		font-size: 38px;
	}

	.jhh-room-featured {
		aspect-ratio: 16 / 7;
	}

	.jhh-room-features__grid {
		gap: 50px;
	}

	.jhh-room-about__grid {
		gap: 50px;
	}



}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media only screen and (max-width: 690px) {

	.jhh-room-section__title {
		margin-bottom: 28px;
	}

	.jhh-room-intro__grid {
		grid-template-columns: 1fr;
		gap: 45px;
	}
	.jhh-room-meta__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--jhh-space-medium);
	}

	.jhh-room-intro__content {
		max-width: none;
	}

	.jhh-room-intro__types {
		margin-bottom: 18px;
	}

	.jhh-room-intro__heading {
		display: block;
		margin-bottom: 18px;
	}

	.jhh-room-intro__title {
		font-size: clamp(42px, 13vw, 58px);
	}

	.jhh-room-intro__price {
		display: inline-block;
		margin-top: 16px;
	}

	.jhh-room-intro__excerpt {
		margin-bottom: 28px;
		font-size: 18px;
		line-height: 1.35;
	}

	.jhh-room-meta__item,
	.jhh-room-meta__content {
		min-width: 0;
	}

	.jhh-room-meta__label,
	.jhh-room-meta__value {
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.jhh-room-meta__icon {
		font-size: 36px;
	}

	.jhh-room-meta__value {
		font-size: 15px;
	}

	.jhh-room-meta__footer {
		margin-top: 25px;
		padding-top: 16px;
	}

	.jhh-room-featured {
		aspect-ratio: 4 / 3;
		border-radius: 10px;
	}

	.jhh-room-section__intro {
		margin-bottom: 30px;
	}

	.jhh-room-features__grid {
		grid-template-columns: 1fr;
		gap: 55px;
	}

	.jhh-room-about__grid {
		grid-template-columns: 1fr;
		gap: 35px;
	}

	.jhh-room-cta__inner {
		display: block;
	}

	.jhh-room-cta__content {
		margin-bottom: 25px;
	}

}
@media only screen and (max-width: 340px) {

	.jhh-room-meta__grid {
		grid-template-columns: 1fr;
	}

}

/* =========================================================
   Room type grid – "Vad planerar ni?"
   ========================================================= */
.jhh-room-types {
	width: 100%;
	padding: var(--jhh-space-section) clamp(20px, 5vw, 80px);
	background: var(--jhh-light-peach);
}


/* Header
   --------------------------------------------------------- */

.jhh-room-types__header {
	margin: 0 0 var(--jhh-space-large);
	text-align: center;
}

.jhh-room-types__heading {
	margin: 0;
	color: currentColor; !important;
	font-family: "linotype-sabon", serif !important;
	font-weight: 700 !important;
	font-style: italic !important;
	text-align: center;
	font-size: 3rem !important;
}
.roomTypeGridHome .jhh-room-types__heading {
		color: var(--jhh-orange);
}

/* Grid
   --------------------------------------------------------- */

.jhh-room-types__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}


/* Card
   --------------------------------------------------------- */

.jhh-room-type-card {
	position: relative;
	display: block;
	min-width: 0;
	aspect-ratio: 1.75 / 1;
	overflow: hidden;
	border-radius: 15px;
	background: var(--jhh-black);
	color: #fff !important;
	text-decoration: none !important;
}


/* Image
   --------------------------------------------------------- */

.jhh-room-type-card__image {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.jhh-room-type-card__image-element {
	display: block;
	width: 100%;
	height: 100% !important;
	margin: 0;
	object-fit: cover;
	transition: transform 0.45s ease;
}


/* Dark gradient for text legibility
   --------------------------------------------------------- */

.jhh-room-type-card__overlay {
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(8, 7, 7, 0.55) 0%,
		rgba(8, 7, 7, 0.18) 35%,
		rgba(8, 7, 7, 0) 65%
	);
	pointer-events: none;
}


/* Content
   --------------------------------------------------------- */

.jhh-room-type-card__content {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	padding: var(--jhh-space-medium);
}

.jhh-room-type-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: #fff !important;
	font-size: clamp(1.125rem, calc(1rem + 0.3vw), 1.375rem) !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}


/* Arrow
   --------------------------------------------------------- */

.jhh-room-type-card__arrow {
	display: block;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	margin: 0;
	object-fit: contain;
	transition: transform 0.25s ease;
}


/* Hover
   --------------------------------------------------------- */

.jhh-room-type-card:hover,
.jhh-room-type-card:focus {
	color: #fff !important;
	text-decoration: none !important;
}

.jhh-room-type-card:hover .jhh-room-type-card__image-element,
.jhh-room-type-card:focus .jhh-room-type-card__image-element {
	transform: scale(1.025);
}

.jhh-room-type-card:hover .jhh-room-type-card__arrow,
.jhh-room-type-card:focus .jhh-room-type-card__arrow {
	transform: translateX(4px);
}

.jhh-room-type-card:focus-visible {
	outline: 2px solid var(--jhh-orange);
	outline-offset: 4px;
}


/* ---------------------------------------------------------
   Mobile
--------------------------------------------------------- */

@media only screen and (max-width: 690px) {

	.jhh-room-types__header {
		margin-bottom: var(--jhh-space-medium);
	}

	.jhh-room-types__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.jhh-room-type-card {
		aspect-ratio: 1.5 / 1;
	}

	.jhh-room-type-card__content {
		padding: var(--jhh-space-medium);
	}

}

/* Bottom CTA */
.ctaBottom .textCTA {
    max-width: 600px !important;
    margin: 0 auto !important;
    margin-bottom: 30px !important;
}

.ctaBottom .nectar-button[data-color-override="false"].regular-button:hover {
    background-color: var(--jhh-black) !important;
 }

@media only screen and (min-width: 1000px) {
	.subTitle {
		max-width: 75%;
	}
}
/* ---------------------------------------------------------
   Conference highlights
--------------------------------------------------------- */
.highlightMain .wpb_wrapper {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 40px !important;
	width: 100%;
}

.highlightMain .highlight {
	flex: 0 0 auto;
}
.highlightMain {
	background-color: #FFFCFB !important;
	margin-top: 4% !important;
	padding: 4% 10%;
}

.highlight {
	position: relative;
	padding-left: 48px;
	min-height: 35px;
	display: flex;
	align-items: center;
}

.highlight p {
	margin: 0 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
}

.highlight::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 35px;
	height: 35px;
	transform: translateY(-50%);
	background-color: var(--jhh-accent);
	-webkit-mask-position: center;
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-position: center;
	mask-repeat: no-repeat;
	mask-size: contain;
}

/* Konferenser */
.highlight.conference::before {
	-webkit-mask-image: url("../img/icons/group.svg");
	mask-image: url("../img/icons/group.svg");
}

/* Styrelsemöten */
.highlight.board::before {
	-webkit-mask-image: url("../img/icons/board.svg");
	mask-image: url("../img/icons/board.svg");
}

/* Presentationer */
.highlight.presentation::before {
	-webkit-mask-image: url("../img/icons/conference.svg");
	mask-image: url("../img/icons/conference.svg");
}

/* Workshops & utbildningar */
.highlight.workshops::before {
	-webkit-mask-image: url("../img/icons/workshops.svg");
	mask-image: url("../img/icons/workshops.svg");
}

/* Kickoff */
.highlight.kickoff::before {
	-webkit-mask-image: url("../img/icons/kickoff.svg");
	mask-image: url("../img/icons/kickoff.svg");
}

/* ---------------------------------------------------------
   Party & event highlight icons
--------------------------------------------------------- */

/* Bröllop */
.highlight.wedding::before {
	-webkit-mask-image: url("../img/icons/weddings.svg");
	mask-image: url("../img/icons/weddings.svg");
}

/* Företagsfester */
.highlight.corparty::before {
	-webkit-mask-image: url("../img/icons/party.svg");
	mask-image: url("../img/icons/party.svg");
}

/* Födelsedagar */
.highlight.birthdays::before {
	-webkit-mask-image: url("../img/icons/birthdays.svg");
	mask-image: url("../img/icons/birthdays.svg");
}

/* Jubileum */
.highlight.celeb::before {
	-webkit-mask-image: url("../img/icons/celeb.svg");
	mask-image: url("../img/icons/celeb.svg");
}

/* Mingel & mottagningar */
.highlight.mingle::before {
	-webkit-mask-image: url("../img/icons/mingle.svg");
	mask-image: url("../img/icons/mingle.svg");
}

/* Tablet – 3 columns */
@media only screen and (max-width: 999px) {
	.highlightMain .wpb_wrapper {
		display: grid !important;
		grid-template-columns: repeat(3, max-content);
		justify-content: center !important;
		align-items: center !important;
		gap: 20px 30px !important;
	}

	.highlightMain .highlight {
		width: auto !important;
		margin: 0 !important;
	}
}

/* Mobile – 1 column */
@media only screen and (max-width: 500px) {
	.highlightMain .wpb_wrapper {
				grid-template-columns: repeat(2, max-content);
		justify-content: stretch !important;
		gap: 24px !important;
	}
}

.benefitsGlobal h2 {
	font-size: clamp(2.5rem, calc(2.5rem + 0.1vw), 3rem) !important;
	font-weight: 500 !important;
	line-height: 1.1em !important;
}
.benefitsGlobal p {
	font-size: 15px !important;
}

/* Hide Salient / Font Awesome submenu icons */
.sf-sub-indicator i,
.sf-sub-indicator .icon-in-menu {
	display: none !important;
}
.sf-sub-indicator .icon-in-menu {
    display: none !important;
}

.sf-sub-indicator {
    overflow: visible !important;
}


.sf-sub-indicator::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
    margin-top: -8px !important;
     transition: transform 0.2s ease;
}
@media (max-width: 690px) {


/* Give our replacement icon its own space */
.sf-sub-indicator {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;

	width: 20px !important;
	height: 20px !important;

	margin-left: 10px;
	overflow: visible !important;
}

	/* Hide the broken Font Awesome icon on mobile */
	.sf-sub-indicator i {
		display: none !important;
	}

/* Keep Salient's indicator positioning — only draw our icon */
.sf-sub-indicator::after {
	content: "";
	position: absolute;

	width: 6px;
	height: 6px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -65%) rotate(45deg);
	transition: transform 0.2s ease;
}

/* Open state */
.menu-item-has-children.sfHover > a .sf-sub-indicator::after {
	transform: translate(-50%, -35%) rotate(225deg);
}

#header-outer #mobile-menu ul li>a {
	font-weight: 700 !important;
}

	/* Open state */
	.menu-item-has-children.sfHover > a .sf-sub-indicator::after {
		margin: 0 !important;
		transform: translateY(-35%) rotate(225deg);
	}
}
/* Rotate chevron when submenu is open */
.menu-item-has-children.sfHover > a .sf-sub-indicator::after {
    transform: rotate(225deg);
    margin-top: -4px !important;
}

.jhh-room-intro__type {
	color: var(--jhh-black) !important;
	text-decoration: underline;
	transition: color 0.2s ease;
}

.jhh-room-intro__type:hover,
.jhh-room-intro__type:focus {
	color: var(--jhh-orange) !important;
}

.hotel-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.hotel-contact__text p {
	margin: 0;
}

.hotel-contact__details {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.hotel-contact__details a {
	color: var(--jhh-black) !important;
	font-weight: 600 !important;
	line-height: 1.4;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.hotel-contact__details a:hover,
.hotel-contact__details a:focus {
	color: var(--jhh-orange) !important;
}

@media only screen and (max-width: 690px) {
	.hotel-contact {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/* =========================================================
   JHH MAP
   ========================================================= */

.jhh-map {
	position: relative;
	width: 100%;
	height: clamp(360px, 40vw, 480px);
	overflow: hidden;
	border-radius: 18px;
	background: var(--jhh-light-peach);
}

.jhh-map__canvas {
	width: 100%;
	height: 100%;
}


/* ---------------------------------------------------------
   Filters
   --------------------------------------------------------- */

.jhh-map__filters {
	position: absolute;
	top: 11px;
	left: 60px;
	z-index: 600;

	display: flex;
	align-items: center;
	gap: 8px;

	max-width: calc(100% - 48px);
}

.jhh-map .jhh-map__filter {
	appearance: none;
	-webkit-appearance: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-height: 30px;
	padding: 9px 11px;

	border: 0;
	border-radius: 8px !important;
	-webkit-border-radius: 8px !important;

	background: var(--jhh-accent);
	color: var(--jhh-black);

	font-family: "avenir-next-lt-pro", sans-serif;
	font-size: 13px;
	font-weight: 700 !important;
	line-height: 1;

	white-space: nowrap;
	cursor: pointer;

	transition:
		background-color 0.2s ease,
		color 0.2s ease,
		transform 0.2s ease;
}

.jhh-map__filter:hover,
.jhh-map__filter:focus-visible {
	background: var(--jhh-orange);
	color: var(--jhh-black);
}

.jhh-map__filter.is-active {
	background: var(--jhh-orange);
	color: var(--jhh-black);
}

.jhh-map__filter:active {
	transform: scale(0.97);
}

.jhh-map__filter:focus-visible {
	outline: 2px solid var(--jhh-black);
	outline-offset: 2px;
}


/* ---------------------------------------------------------
   Leaflet map
   --------------------------------------------------------- */

.jhh-map .leaflet-container {
	width: 100%;
	height: 100%;

	background: #e8e5df;

	font-family: "avenir-next-lt-pro", sans-serif;
}


/* ---------------------------------------------------------
   Map tiles

   Slightly mute the standard OSM map so our markers and
   interface remain the visual focus.
   --------------------------------------------------------- */

.jhh-map .leaflet-tile-pane {
	filter:
		grayscale(1)
		contrast(0.9)
		brightness(0.82);
}


/* ---------------------------------------------------------
   Markers
   --------------------------------------------------------- */

.jhh-map__marker {
	filter:
		drop-shadow(0 2px 3px rgba(8, 7, 7, 0.18));
}

.jhh-map__marker--primary {
	z-index: 1000 !important;

	filter:
		drop-shadow(0 3px 5px rgba(8, 7, 7, 0.22));
}


/* ---------------------------------------------------------
   Popup
   --------------------------------------------------------- */

.jhh-map .leaflet-popup-content-wrapper {
	border-radius: 12px;
	box-shadow:
		0 8px 30px rgba(8, 7, 7, 0.14);

	background: #fff;
	color: var(--jhh-black);
}

.jhh-map .leaflet-popup-content {
	margin: 0;
	width: 260px !important;
}

.jhh-map .leaflet-popup-tip {
	background: #fff;
	box-shadow: none;
}

/* Always keep Leaflet popups above the filters */
.jhh-map .leaflet-popup-pane {
	z-index: 800 !important;
}

.jhh-map .leaflet-popup-close-button {
	top: 8px !important;
	right: 8px !important;

	width: 28px !important;
	height: 28px !important;

	display: flex !important;
	align-items: center;
	justify-content: center;

	padding: 0 !important;

	color: var(--jhh-black) !important;

	font-family: Arial, sans-serif;
	font-size: 22px !important;
	font-weight: 400 !important;
	line-height: 1 !important;

	opacity: 0.55;

	transition: opacity 0.2s ease;
}

.jhh-map .leaflet-popup-close-button:hover {
	color: var(--jhh-black) !important;
	opacity: 1;
}


/* ---------------------------------------------------------
   Popup content
   --------------------------------------------------------- */

.jhh-map-card {
	width: 100%;
	box-sizing: border-box;
	padding: 20px 22px 18px;
}

.jhh-map-card__name {
	padding-right: 22px;
	margin-bottom: 5px;

	font-family: "avenir-next-lt-pro", sans-serif;
	font-size: 14px;
	font-weight: 700 !important;
	line-height: 1.2;

	color: var(--jhh-black);
}

.jhh-map-card__address {
	margin-bottom: 5px;

	font-size: 11px;
	font-weight: 600 !important;
	line-height: 1.4;

	color: rgba(8, 7, 7, 0.7);
}

.jhh-map-card__distance {
	margin-top: 8px;

	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;

	color: var(--jhh-black);
}

.jhh-map-card__directions {
	display: inline-flex;
	align-items: center;

	margin-top: 14px;

	color: var(--jhh-orange) !important;

	font-size: 13px;
	font-weight: 700 !important;
	line-height: 1.2;

	text-decoration: underline;
	text-underline-offset: 3px;

	transition: color 0.2s ease;
}

.jhh-map-card__directions:hover,
.jhh-map-card__directions:focus {
	color: var(--jhh-black) !important;
}


/* ---------------------------------------------------------
   Leaflet controls
   --------------------------------------------------------- */

.jhh-map .leaflet-control-zoom {
	margin-right: 18px;
	margin-bottom: 18px;

	border: 0;
	border-radius: 10px;

	overflow: hidden;

	box-shadow:
		0 3px 14px rgba(8, 7, 7, 0.12);
}

.jhh-map .leaflet-control-zoom a {
	width: 36px;
	height: 36px;

	display: flex;
	align-items: center;
	justify-content: center;

	border: 0;

	background: #fff;
	color: var(--jhh-black);

	font-family: Arial, sans-serif;
	font-size: 20px;
	line-height: 1;

	transition:
		background-color 0.2s ease,
		color 0.2s ease;
}

.jhh-map .leaflet-control-zoom a:hover {
	background: var(--jhh-orange);
	color: var(--jhh-black);
}

.jhh-map .leaflet-control-attribution {
	padding: 3px 6px;

	background: rgba(255, 255, 255, 0.82);

	font-family: Arial, sans-serif;
	font-size: 10px;
	line-height: 1.3;
}

.jhh-map .leaflet-control-attribution a {
	color: var(--jhh-black);
}


/* ---------------------------------------------------------
   Mobile
   --------------------------------------------------------- */

@media (max-width: 690px) {

	.jhh-map {
		height: 360px;
		border-radius: 14px;
	}

	.jhh-map__canvas {
		height: 100%;
		min-height: 0;
	}

	/* Filters: two rows beside zoom controls */
	.jhh-map__filters {
		top: 13px;
		left: 55px;
		right: 15px;

		width: auto;
		max-width: none;

		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;

		padding: 0;
		overflow: visible;
	}

	.jhh-map .jhh-map__filter {
		width: 100%;
		min-width: 0;
		min-height: 34px;

		padding: 8px;

		font-size: 11px;
		white-space: nowrap;
	}

	.jhh-map-card__name {
		font-size: 16px;
	}
	.jhh-map .leaflet-popup-content {
		width: calc(100vw - 80px) !important;
		max-width: 300px;
	}

}

/* forms */
.formHeader h1 {
	font-size: clamp(1.875rem, calc(1.5rem + 0.75vw), 2.5rem) !important;
	line-height: 1.1 !important;
	margin-bottom: 20px !important;
}
.afterCustomerDetails {
	padding-top: 30px !important;
	border-top: 2px solid rgba(8, 7, 7, 0.2);
	margin-top: 30px !important;
}
.afterCustomerDetails h2, .formHeader h2 {
	font-size: 19px !important;
	line-height: 1.4em !important;
}

label {
	font-size: 15px !important;
	font-weight: 600 !important;
	color: rgba(8,7,7,0.6);
}
input[type="text"], input[type="number"], input[type="email"], select, input[type="tel"], input[type="date"], textarea {
	margin-top: 5px !important;
	margin-bottom: 12px !important;

}

select {
	height: 45.5px !important;
}
button[type="submit"],
body[data-button-style=rounded] .container-wrap button[type=submit], body[data-button-style=rounded] .container-wrap input[type=submit] {
	padding: 8px 12px !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	background-color: var(--jhh-orange) !important;
	color: var(--jhh-white) !important;
	margin-top: 10px !important;
}
body[data-form-submit="regular"] button[type=submit]:hover {
	background-color: var(--jhh-black) !important;
	opacity: 1 !important;
}

/* footer */

/* Social icons
   --------------------------------------------------------- */

.jhh-socials {
	display: flex;
	align-items: center;
	gap: 12px;
}

.jhh-socials a {
	position: relative;
	display: block;
	width: 28px;
	height: 28px;
}

.jhh-socials img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	transition: opacity 0.2s ease;
}

.jhh-socials__default {
	opacity: 1;
}

.jhh-socials__active {
	opacity: 0;
}

.jhh-socials a:hover .jhh-socials__default,
.jhh-socials a:focus-visible .jhh-socials__default {
	opacity: 0;
}

.jhh-socials a:hover .jhh-socials__active,
.jhh-socials a:focus-visible .jhh-socials__active {
	opacity: 1;
}

.footerInner h2 {
	font-size: 19px !important;
	line-height: 1.4em !important;	
	margin-top: 10px;
}
.footerInner ul li, .footerInner ul {
	list-style: none !important;
}
.footerInner ul {
	margin: 0 !important;
}
.footerInner ul li, .footerInner ul li a {
	font-size: 15px !important;
	margin-bottom: 8px !important;
	font-weight: 700 !important;
}
.footerInner ul li a:hover,
.footerInner a:hover {
	color: var(--jhh-orange) !important;
}
.footerInner p, .footerInner a {
	font-size: 15px !important;
	line-height: 1.3em !important;
}
.footerLogoCol p {
	font-size: 17px !important;
}
.footerLogoCol .wpb_wrapper {
	max-width: 80% !important;
}
.footerContact a {
    display: inline-block;
    padding: 5px 0 !important;
}

/* Footer copyright
   --------------------------------------------------------- */

.jhh-copyright {
	display: flex;
	align-items: center;
	gap: 24px;
	font-size: 13px;
	line-height: 1.4;
}

.jhh-copyright a {
	color: inherit;
	font-weight: 600;
	text-decoration: underline;
}

@media (max-width: 690px) {
	.jhh-copyright {
		flex-wrap: wrap;
		gap: 8px 16px;
	}
}
	.splitMobileHero .wpb_text_column {
		margin-bottom: 12px !important;
	}
	.heroTextContent {
		max-width: 720px !important;
	}
@media only screen and (min-width: 690px) and (max-width: 1000px) {
		.heroTextContent {
			max-width: 400px !important;
		}
}
@media only screen and (min-width: 376px) and (max-width: 690px) {
		.heroTextContent h1 {
			max-width: 65% !important;
		}
}
/* =========================================================
   SPLIT MOBILE HERO
   Home + About
   ========================================================= */

@media (max-width: 690px) {

	/* -----------------------------------------------------
	   SHARED
	   ----------------------------------------------------- */
	   .heroText p {
	   	text-shadow: none !important;
	   }
	.splitMobileHero {
		position: relative;
		background: var(--jhh-light-peach) !important;
		overflow: hidden;
	}

	/* Mobile image area */
	.splitMobileHero > .row-bg-wrap {
		top: 0 !important;
		bottom: auto !important;
		width: 100% !important;
		height: auto !important;
		aspect-ratio: 4 / 3;
	}

	/* Bottom → top overlay */
	.splitMobileHero > .row-bg-wrap > .row-bg-overlay {
		background: linear-gradient(
			0deg,
			#000 0%,
			rgba(0, 0, 0, .6) 45%,
			rgba(0, 0, 0, 0) 100%
		) !important;
		opacity: .8 !important;
	}

	.splitMobileHero > .row_col_wrap_12 {
		position: relative;
		z-index: 2;
	}

	/* Heading remains white */
	.splitMobileHero h1,
	.splitMobileHero h1 .smallTitle,
	.splitMobileHero h1 .jhh-serif-heading {
		color: var(--jhh-white) !important;
	}


	/* =====================================================
	   HOME
	   About is excluded from these structural rules.
	   ===================================================== */

	.splitMobileHero:not(.aboutPage) .inner_row {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
		margin: 0 !important;
	}

	#ajax-content-wrap
	.splitMobileHero:not(.aboutPage)
	.vc_row.inner_row > .row_col_wrap_12_inner {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.splitMobileHero:not(.aboutPage)
	.inner_row > .row_col_wrap_12_inner > .wpb_column:first-child {
		width: 100% !important;
	}

	.splitMobileHero:not(.aboutPage)
	.inner_row > .row_col_wrap_12_inner > .wpb_column:last-child {
		display: none !important;
	}

	/* Home heading/image area */
	.splitMobileHero:not(.aboutPage)
	.wpb_wrapper > .wpb_text_column:first-child {
		display: flex;
		align-items: flex-end;

		width: 100%;
		aspect-ratio: 4 / 3;

		box-sizing: border-box;
		padding: 24px 24px 40px;
		margin: 0 !important;
	}

	/* Home paragraph */
	.splitMobileHero:not(.aboutPage) .preamble {
		box-sizing: border-box;
		margin: 0 !important;
		padding: 32px 24px 0;
		background: var(--jhh-light-peach);
	}

	.splitMobileHero:not(.aboutPage) .preamble p {
		color: var(--jhh-black) !important;
	}


	/* -----------------------------------------------------
	   HOME BUTTONS
	   ----------------------------------------------------- */

	#ajax-content-wrap
	.splitMobileHero:not(.aboutPage)
	a.nectar-button.accent-color.regular-button {
		background-color: var(--jhh-orange) !important;
		color: var(--jhh-white) !important;
		margin-right: 10px !important;
	}

	#ajax-content-wrap
	.splitMobileHero:not(.aboutPage)
	a.nectar-button.accent-color.regular-button:hover {
		background-color: var(--jhh-black) !important;
		color: var(--jhh-white) !important;
	}

	.splitMobileHero:not(.aboutPage)
	.nectar-button.see-through-2 {
		background-color: transparent !important;
		border-color: var(--jhh-black) !important;
		color: var(--jhh-black) !important;
	}

	.splitMobileHero:not(.aboutPage)
	.nectar-button.see-through-2:hover {
		background-color: var(--jhh-black) !important;
		border-color: var(--jhh-black) !important;
		color: var(--jhh-white) !important;
	}

	.splitMobileHero:not(.aboutPage)
	.nectar-button:hover span {
		color: var(--jhh-white) !important;
	}

	.splitMobileHero:not(.aboutPage)
	.preamble ~ .nectar-button {
		margin-top: 20px !important;
	}

	.splitMobileHero:not(.aboutPage)
	.preamble + .nectar-button {
		margin-left: 24px !important;
	}

	.splitMobileHero:not(.aboutPage)
	.nectar-button:last-child {
		margin-bottom: 32px !important;
	}

/* =====================================================
   ABOUT — MOBILE
   ===================================================== */

.aboutPage {
	--about-hero-height: clamp(300px, 82vw, 340px);

	position: relative;
	background: var(--jhh-light-peach) !important;
	overflow: hidden;
}


/* =====================================================
   IMAGE
   ===================================================== */

.aboutPage > .row-bg-wrap {
	top: 0 !important;
	bottom: auto !important;

	width: 100% !important;
	height: var(--about-hero-height) !important;

	aspect-ratio: auto !important;
}


/* =====================================================
   MAIN CONTENT
   ===================================================== */

.aboutPage > .row_col_wrap_12 {
	position: relative;
	z-index: 2;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
}


/* =====================================================
   BREADCRUMBS
   ===================================================== */

.aboutPage .inner_row:first-child {
	position: absolute !important;

	top: 24px !important;
	left: 0 !important;
	right: 0 !important;

	z-index: 5;

	margin: 0 !important;
	padding: 0 !important;
}
.aboutPage .inner_row:last-child
.wpb_text_column:not(.preamble) h1 {
	margin: 0 !important;
	color: var(--jhh-white) !important;

	transform: translateY(-24px);
}

#ajax-content-wrap
.aboutPage .inner_row:first-child
> .row_col_wrap_12_inner {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.aboutPage .breadCrumbsClass a,
.aboutPage .breadCrumbsClass span,
.aboutPage .breadCrumbsClass strong,
.aboutPage .breadCrumbsClass .breadcrumb_last {
	color: var(--jhh-white) !important;
}

.aboutPage .breadCrumbsClass a {
	opacity: .65 !important;
}


/* =====================================================
   SECOND ROW
   ===================================================== */

.aboutPage .inner_row:last-child {
	margin: 0 !important;
	padding: 0 !important;
}

#ajax-content-wrap
.aboutPage .inner_row:last-child
> .row_col_wrap_12_inner {
	padding: 0 !important;
}

.aboutPage .inner_row:last-child
> .row_col_wrap_12_inner
> .wpb_column:first-child {
	width: 100% !important;
}

.aboutPage .inner_row:last-child
> .row_col_wrap_12_inner
> .wpb_column:last-child {
	display: none !important;
}


/* =====================================================
   COLUMN / WRAPPER

   No Salient stretching.
   ===================================================== */

.aboutPage .inner_row:last-child
> .row_col_wrap_12_inner
> .wpb_column:first-child
> .vc_column-inner,
.aboutPage .inner_row:last-child
> .row_col_wrap_12_inner
> .wpb_column:first-child
> .vc_column-inner
> .wpb_wrapper {
	height: auto !important;
	min-height: 0 !important;
}


/* =====================================================
   H1 AREA

   THIS defines the hero's content height.
   Exactly the same height as the background.
   ===================================================== */

.aboutPage .inner_row:last-child
.wpb_text_column:not(.preamble) {
	display: flex !important;
	align-items: flex-end !important;

	box-sizing: border-box !important;

	width: 100% !important;
	height: var(--about-hero-height) !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 24px 24px 28px !important;
}

.aboutPage .inner_row:last-child
.wpb_text_column:not(.preamble) h1 {
	margin: 0 !important;
	color: var(--jhh-white) !important;
}


/* =====================================================
   PREAMBLE

   Starts naturally AFTER the hero because the H1 block
   above occupies exactly --about-hero-height.
   ===================================================== */

.aboutPage .preamble {
	display: block !important;

	box-sizing: border-box !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 24px 24px 32px !important;

	background: var(--jhh-light-peach) !important;
}

.aboutPage .preamble p {
	margin: 0 !important;
	color: var(--jhh-black) !important;
}
}

.jhh-room-card__tags {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 3;

	display: flex;
	flex-wrap: wrap;
	gap: 8px;

	pointer-events: none;
}

.jhh-room-card__tag {
	display: inline-flex;
	align-items: center;

	padding: 5px 10px;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.2;

	color: rgba(8, 7, 7, .8);
	background: var(--jhh-light-peach);

	border-radius: 4px;
}


.jhh-fancybox-caption {
	position: absolute;
	left: 50%;
	bottom: 24px;
	z-index: 99997;

	width: max-content;
	max-width: calc(100% - 48px);
	padding: 10px 16px;

	transform: translateX(-50%);

	background: rgba(8, 7, 7, 1);
	border-radius: 4px;

	color: var(--jhh-white);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;

	pointer-events: none;
}

.jhh-fancybox-caption__title {
	display: block;
	color: var(--jhh-white);
	font-size: 16px;
	font-weight: 700;
}

.jhh-fancybox-caption__meta {
	display: block;
	margin-top: 2px;
	color: var(--jhh-white);
}

.jhh-fancybox-caption strong {
	display: block;
	margin-bottom: 4px;

	color: var(--jhh-white);
	font-size: 18px;
	font-weight: 600;
}

.trp-floating-switcher .trp-language-switcher-inner {
	display: flex;
	align-items: center;
}

.trp-floating-switcher .trp-language-switcher-inner::before {
	content: "";
	display: block;
	flex: 0 0 18px;
	width: 12px;
	height: 12px;
	margin: 0 4px;

	background-color: var(--jhh-light);

	-webkit-mask: url("../img/icons/globe.svg") center / contain no-repeat;
	mask: url("../img/icons/globe.svg") center / contain no-repeat;
}

body .trp-language-switcher.trp-floating-switcher.trp-ls-inline.trp-switcher-position-bottom{
	right: 20px !important;

	background: var(--jhh-black) !important;
	border: none !important;

	--text: var(--jhh-light) !important;
	--text-hover: var(--jhh-light) !important;
	--switcher-padding: 5px !important;
	--text-hover: var(--jhh-light-peach) !important;
}

.trp-language-item-name {
	font-size: 11px !important;
	color: var(--jhh-light);
    font-family: inherit !important;
    font-weight: 900 !important;
 }
 .trp-language-item {
 	padding: 5px 9px !important;
 }