/* Site header / footer — chrome only */

.ibv-site-header {
	position: relative;
	background: var(--ibv-color-bg-alt);
	padding-block: var(--ibv-space-lg);
}

.ibv-site-header::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	height: 3px;
	background: var(--ibv-color-gold-500);
}

.ibv-site-header__inner {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ibv-space-md);
}

@media (min-width: 64rem) {
	.ibv-site-header__inner {
		gap: var(--ibv-space-lg);
	}
}

/* Mobile menu toggle — hidden at desktop */
.ibv-site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem; /* 44px tap target */
	height: 2.75rem;
	color: var(--ibv-color-text);
}

.ibv-site-header__toggle:focus-visible {
	outline: 2px solid var(--ibv-color-focus-ring);
	outline-offset: 2px;
}

/* Icon swap: burger when closed, x when open */
.ibv-site-header__toggle-icon--close,
.ibv-site-header__toggle[aria-expanded="true"] .ibv-site-header__toggle-icon--open {
	display: none;
}

.ibv-site-header__toggle[aria-expanded="true"] .ibv-site-header__toggle-icon--close {
	display: block;
}

/* Collapsible menu panel (nav only) — below 64rem. My Booking and
   Search Villas stay in the header bar from 40rem; below that they
   drop into the open menu so the bar is just logo + hamburger. */
.ibv-site-header__menu {
	display: none;
	flex-basis: 100%;
	flex-direction: column;
	align-items: stretch;
	gap: var(--ibv-space-md);
	padding-block-start: var(--ibv-space-md);
}

.ibv-site-header__menu.is-open {
	display: flex;
}

.ibv-site-header__actions {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ibv-space-sm);
}

@media (max-width: 39.999rem) {
	.ibv-site-header__inner:has( .ibv-site-header__menu.is-open ) .ibv-site-header__actions {
		display: flex;
		flex-basis: 100%;
	}
}

@media (min-width: 40rem) {
	.ibv-site-header__actions {
		display: flex;
		flex-basis: auto;
		margin-inline-start: auto;
	}

	.ibv-site-header__toggle {
		order: 1;
	}
}

@media (min-width: 64rem) {
	.ibv-site-header__toggle {
		display: none;
		order: 0;
	}

	/* The wrapper vanishes from layout so nav + actions sit directly in
	   the __inner flex row, exactly as before the menu existed. */
	.ibv-site-header__menu {
		display: contents;
	}

	.ibv-site-header__actions {
		margin-inline-start: 0;
	}
}

.ibv-site-header__brand.custom-logo-link {
	display: inline-flex;
	align-items: center;
	font-weight: var(--ibv-font-weight-bold);
	color: var(--ibv-color-text);
	text-decoration: none;
}

.ibv-site-header__brand .custom-logo {
	/* Explicit height so width:auto resolves from intrinsic aspect ratio; max-height + height:auto
	   (reset) can collapse SVG <img> to 0×0 inside flex (same fix as footer .custom-logo). */
	height: 2.1875rem; /* 35px — Figma logo lockup */
	width: auto;
	max-width: 100%;
}

.ibv-site-header__nav .ibv-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-sm);
}

@media (min-width: 64rem) {
	.ibv-site-header__nav .ibv-nav-list {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--ibv-space-xl);
	}
}

.ibv-site-header__nav a {
	text-decoration: none;
	color: var(--ibv-color-text);
	font-weight: var(--ibv-font-weight-regular);
	font-size: var(--ibv-fs-small);
}

.ibv-site-header__nav a:hover,
.ibv-site-header__nav a:focus-visible {
	color: var(--ibv-color-link-hover);
}

/* Current-page "on" state. WordPress marks the active link with
   aria-current="page" and the li with current-menu-* classes; the ancestor
   variants keep the parent item lit on child pages. */
.ibv-site-header__nav a[aria-current="page"],
.ibv-site-header__nav .current-menu-item > a,
.ibv-site-header__nav .current-menu-ancestor > a,
.ibv-site-header__nav .current_page_ancestor > a {
	font-weight: var(--ibv-font-weight-medium);
	text-decoration: underline;
	text-decoration-color: var(--ibv-color-gold-500);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* Footer */
.ibv-site-footer {
	background: var(--ibv-color-forest-green-deep);
	color: var(--ibv-color-text-muted-on-dark); /* default — bright only on explicit headings */
	padding-block: 5rem 2.5rem; /* 80/40 — Figma asymmetric padding */
}

.ibv-site-footer a {
	color: var(--ibv-color-text-muted-on-dark);
	text-decoration: none;
}

.ibv-site-footer a:hover,
.ibv-site-footer a:focus-visible {
	color: var(--ibv-color-link-hover-on-dark);
}

/* Column grid */
.ibv-site-footer__grid {
	display: grid;
	gap: var(--ibv-space-2xl);
}

@media (min-width: 48rem) {
	.ibv-site-footer__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.ibv-site-footer__grid {
		/* Figma proportions: 363/157/157/363 ≈ 2.3/1/1/2.3 */
		grid-template-columns: 2.3fr 1fr 1fr 2.3fr;
		gap: var(--ibv-space-3xl);
	}
}

/* Brand column */
.ibv-site-footer__brand-col {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-md);
}

.ibv-site-footer__brand .custom-logo-link {
	display: inline-block;
}

.ibv-site-footer__brand .custom-logo {
	/* Explicit height so width:auto resolves from intrinsic aspect ratio; max-height + width:auto alone
	   can collapse to 0×0 for SVG <img> inside nested flex (Chrome). */
	height: 3.875rem; /* 62px — Figma footer logo height */
	width: auto;
	max-width: 100%;
}

.ibv-site-footer__tagline {
	margin: 0;
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-relaxed);
	max-width: 20rem;
}

/* Social icons — circular outlined buttons */
.ibv-site-footer__socials {
	list-style: none;
	margin: var(--ibv-space-md) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--ibv-space-sm);
}

.ibv-site-footer__social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem; /* 40px — Figma social button size */
	height: 2.5rem;
	border: 1px solid rgb(from var(--ibv-color-off-white) r g b / 0.4);
	border-radius: 50%;
	/* Icon stroke via currentColor — inherits muted from .ibv-site-footer a */
	transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
}

.ibv-site-footer__social-link svg {
	width: 1rem;
	height: 1rem;
}

.ibv-site-footer__social-fallback {
	font-size: 0.625rem;
	line-height: 1;
	text-align: center;
}

.ibv-site-footer .ibv-site-footer__social-link:hover,
.ibv-site-footer .ibv-site-footer__social-link:focus-visible {
	color: var(--ibv-color-text-on-dark); /* icon brightens to off-white — beats .ibv-site-footer a:hover */
	border-color: rgb(from var(--ibv-color-off-white) r g b / 0.8);
	background: transparent; /* no fill; subtle outlined control */
}

/* Accreditation logo strip (newsletter column) */
.ibv-site-footer__accreditations {
	list-style: none;
	margin: var(--ibv-space-2xl) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ibv-space-xl);
}

.ibv-site-footer__accreditation {
	margin: 0;
}

.ibv-site-footer__accreditation a,
.ibv-site-footer__accreditation img {
	display: block;
}

.ibv-site-footer__accreditation img {
	max-height: 2.5rem; /* 40px — Figma; normalises vertical alignment */
	width: auto;
}

/* Column titles */
.ibv-site-footer__col-title {
	margin: 0 0 var(--ibv-space-md);
	font-family: var(--ibv-font-display);
	font-optical-sizing: auto;
	font-size: var(--ibv-fs-h3);
	font-weight: var(--ibv-font-weight-regular);
	line-height: var(--ibv-lh-snug);
	color: var(--ibv-color-text-on-dark);
}

/* Nav lists in footer — reset ul/li away from global `p, ul, ol` (body size +
   relaxed lh) so wrapped items use snug spacing; optional li-level WP classes
   then inherit this stack instead of 1.7 from typography.css. */
.ibv-site-footer .ibv-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-xs);
	font-size: var(--ibv-fs-small);
	line-height: var(--ibv-lh-snug);
}

.ibv-site-footer .ibv-nav-list a {
	text-decoration: none;
	font-size: inherit;
	line-height: inherit;
}

/* Divider before legal */
.ibv-site-footer__divider {
	margin: var(--ibv-space-2xl) 0 var(--ibv-space-lg);
	height: 1px;
	border: 0;
	background: rgb(from var(--ibv-color-off-white) r g b / 0.2);
}

/* Legal block — entire stack below divider is micro type. Global `p, ul, ol`
   in typography.css set --ibv-fs-body; reset those to inherit so WYSIWYG
   output inside .ibv-site-footer__legal-detail matches copyright. */
.ibv-site-footer__legal {
	display: flex;
	flex-direction: column;
	gap: var(--ibv-space-md);
	font-size: var(--ibv-fs-micro);
	line-height: var(--ibv-lh-relaxed);
	color: rgb(from var(--ibv-color-text-on-dark) r g b / 0.7);
}

.ibv-site-footer__legal p,
.ibv-site-footer__legal ul,
.ibv-site-footer__legal ol,
.ibv-site-footer__legal li {
	font-size: inherit;
	line-height: inherit;
}

.ibv-site-footer__copyright {
	margin: 0;
}

.ibv-site-footer__legal-detail {
	margin: 0;
}

.ibv-site-footer__legal-detail p {
	margin: 0 0 var(--ibv-space-xs);
}

.ibv-site-footer__legal-detail p:last-child {
	margin-bottom: 0;
}

/* "Cookie preferences" — reopens the consent modal (JS-bound, see
   assets/js/cookieconsent-init.js). Sits with the legal links and inherits
   their micro type + muted colour from `.ibv-site-footer__legal` and
   `.ibv-site-footer a`; align-self stops the flex item stretching the click
   target across the full row. */
.ibv-site-footer__cc-link {
	align-self: flex-start;
}

.ibv-site-main {
	min-height: 50vh;
}

/* Cookie consent banner — map the library's `--cc-*` variables onto IV2000
   tokens. The vendor stylesheet (assets/vendor/cookieconsent) supplies
   structure; only palette, type and radii are overridden here. Full variable
   list: cookieconsent/src/scss/abstracts/_light-color-scheme.scss */
#cc-main {
	--cc-font-family: var(--ibv-font-body);
	--cc-bg: var(--ibv-color-surface);
	--cc-primary-color: var(--ibv-color-text);
	--cc-secondary-color: var(--ibv-color-text-muted);
	--cc-link-color: var(--ibv-color-link);

	--cc-btn-border-radius: var(--ibv-radius-md);
	--cc-modal-border-radius: var(--ibv-radius-lg);

	--cc-btn-primary-bg: var(--ibv-color-forest-green);
	--cc-btn-primary-color: var(--ibv-color-text-inverse);
	--cc-btn-primary-border-color: var(--ibv-color-forest-green);
	--cc-btn-primary-hover-bg: var(--ibv-color-forest-green-deep);
	--cc-btn-primary-hover-color: var(--ibv-color-text-inverse);
	--cc-btn-primary-hover-border-color: var(--ibv-color-forest-green-deep);

	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: var(--ibv-color-link);
	--cc-btn-secondary-border-color: var(--ibv-color-link);
	--cc-btn-secondary-hover-bg: var(--ibv-color-tint-teal);
	--cc-btn-secondary-hover-color: var(--ibv-color-link);
	--cc-btn-secondary-hover-border-color: var(--ibv-color-link);

	--cc-toggle-on-bg: var(--ibv-color-forest-green-deep);
	--cc-separator-border-color: var(--ibv-color-border);
	--cc-cookie-category-block-border: var(--ibv-color-border);
}

#cc-main :focus-visible {
	outline: 2px solid var(--ibv-color-focus-ring);
	outline-offset: 2px;
}