/**
 * Small site-wide front-end corrections.
 *
 * Loaded on every page (unlike leaf-hero.css, which loads only where the
 * [leaf_hero] shortcode renders).
 */

/* ------------------------------------------------------------------
 * Mobile heading overflow.
 *
 * Elementor writes fixed pixel heading sizes (e.g. 40px) that do not
 * scale down. A single long word - "Recommendation", "Destination" -
 * is then wider than the column at 360px and pushes the page sideways,
 * because overflow-wrap defaults to `normal` and the word cannot break.
 *
 * Cap the size on narrow viewports and allow a break as a last resort.
 * !important is required to outrank Elementor's per-widget inline CSS.
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {

	.elementor-widget-heading .elementor-heading-title,
	.elementor-widget-text-editor h1,
	.elementor-widget-text-editor h2,
	.elementor-widget-text-editor h3 {
		font-size: min(2rem, 8.5vw) !important;
		line-height: 1.25 !important;
		overflow-wrap: break-word;
		word-break: normal;
	}

	/* Script-font eyebrow headings sit above the main title and are
	   set even larger by the theme; keep them proportional. */
	.elementor-widget-heading .elementor-heading-title.--secondaryFontFamily,
	.--secondaryFontFamily .elementor-heading-title {
		font-size: min(1.6rem, 7vw) !important;
	}
}

/* ------------------------------------------------------------------
 * Global safety net: never let an unbreakable string scroll the page.
 * ------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------
 * Social links block (footer).
 *
 * WordPress ships styles for core blocks as separate small stylesheets.
 * On this install none of the wp-block-social-link CSS reaches the page -
 * it is absent from every Hummingbird bundle - so the block falls back to
 * browser defaults: a visible list marker, a 24px indent, and SVG paths
 * painted black (the block CSS is what normally sets fill:currentColor).
 *
 * These rules make the block self-sufficient, so it renders correctly
 * whether or not the core stylesheet is ever restored.
 * ------------------------------------------------------------------ */

.wp-block-social-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	text-indent: 0;
}

.wp-block-social-links li,
.wp-block-social-links .wp-social-link {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Belt and braces: kill the marker in engines that still paint one. */
.wp-block-social-links li::marker,
.wp-block-social-links li::before {
	content: none;
	display: none;
}

.wp-block-social-links .wp-block-social-link-anchor {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #4a5d52;
	color: #fff;
	text-decoration: none;
	transition: transform 0.18s ease, filter 0.18s ease;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-social-links .wp-block-social-link-anchor {
		transition: none;
	}
}

/*
 * Brand colours, matching WordPress core's default social-links style.
 * Core ships these in wp-block-social-link CSS, which does not reach
 * every page on this install - so they are declared here instead and
 * the icons look the same site-wide either way.
 */
.wp-block-social-links .wp-social-link-facebook  .wp-block-social-link-anchor { background: #0866ff; }
.wp-block-social-links .wp-social-link-instagram .wp-block-social-link-anchor {
	background: #f00075;
	background-image: linear-gradient( 135deg, #f9ce34 0%, #ee2a7b 50%, #6228d7 100% );
}
.wp-block-social-links .wp-social-link-x         .wp-block-social-link-anchor,
.wp-block-social-links .wp-social-link-twitter   .wp-block-social-link-anchor,
.wp-block-social-links .wp-social-link-tiktok    .wp-block-social-link-anchor { background: #000; }
.wp-block-social-links .wp-social-link-youtube   .wp-block-social-link-anchor { background: #ff0000; }
.wp-block-social-links .wp-social-link-linkedin  .wp-block-social-link-anchor { background: #0d66c2; }
.wp-block-social-links .wp-social-link-whatsapp  .wp-block-social-link-anchor { background: #25d366; }
.wp-block-social-links .wp-social-link-pinterest .wp-block-social-link-anchor { background: #e60122; }
.wp-block-social-links .wp-social-link-telegram  .wp-block-social-link-anchor { background: #2aabee; }
.wp-block-social-links .wp-social-link-tripadvisor .wp-block-social-link-anchor { background: #34e0a1; color: #000; }

.wp-block-social-links .wp-block-social-link-anchor:hover,
.wp-block-social-links .wp-block-social-link-anchor:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.12);
}

.wp-block-social-links .wp-block-social-link-anchor:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* The important one: inherit the anchor colour instead of defaulting to black. */
.wp-block-social-links .wp-block-social-link-anchor svg {
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
	display: block;
}

/* The label is for screen readers only; core's CSS normally hides it. */
.wp-block-social-links .wp-block-social-link-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * Typography: keep the site to two families.
 *
 * Poppins for everything, Caveat for the script accent headings.
 * The support-chat plugin hardcodes Roboto on its widget, which loads
 * a third family for a handful of tooltip labels - point it at the
 * site stack instead.
 * ------------------------------------------------------------------ */
#wp-nt-aio-wrapper,
#wp-nt-aio-wrapper *,
[id^="nt-aio-popup"],
[id^="nt-aio-popup"] * {
	font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==================================================================
 * Mobile / tablet navbar
 *
 * Everything below is scoped to the theme's own breakpoint. The theme
 * ships `.mobile-header { display: none }` with NO media query, and
 * re-shows it inside `@media only screen and (max-width: 1024px)`.
 * An unscoped `.mobile-header { display: flex }` therefore wins at
 * every width and leaks the mobile bar onto desktop.
 * ================================================================== */
@media only screen and (max-width: 1024px) {

	/* ==================================================================
	 * Mobile / tablet navbar
	 *
	 * The theme swaps to .mobile-header below ~1100px: a white logo bar
	 * over a green bar holding the search form and the menu button.
	 *
	 * Measured problems:
	 *   - the menu button is 20x15px, far below a usable touch target
	 *   - the search form has no background or border, so it reads as
	 *     loose text floating on the green rather than an input
	 *   - the header is not sticky, so nav leaves the screen on scroll
	 *   - 130px of chrome before any content on a 390px-wide screen
	 *
	 * Note on the menu button: the theme draws the three bars with
	 * ::before / span / ::after absolutely positioned inside a 20x15 box.
	 * Enlarging the button alone spreads them apart, so the bars are
	 * re-anchored to a 20px group centred in the bigger target.
	 * ================================================================== */

	.mobile-header {
		position: sticky;
		top: 0;
		z-index: 500;
		box-shadow: 0 1px 0 rgba(13, 20, 16, 0.06), 0 6px 18px rgba(13, 20, 16, 0.07);
	}

	.admin-bar .mobile-header {
		top: 46px;
	}

	@media screen and (min-width: 783px) {
		.admin-bar .mobile-header {
			top: 32px;
		}
	}

	/* ------------------------------------------------ single-bar layout */

	/*
	 * One bar instead of two.
	 *
	 * .mobile-header-t (logo) and .mobile-header-b (search + hamburger) are
	 * separate siblings, so they cannot be merged with CSS alone - unless
	 * .mobile-header itself becomes the flex row and lays them side by side.
	 * That is what happens here: the logo row shrinks to its content on the
	 * left, the action row holds the hamburger on the right, and the whole
	 * bar takes the green. The search field is dropped.
	 *
	 * The drawer and overlay are also children of .mobile-header but both are
	 * position:fixed, so they stay out of this flex flow.
	 *
	 * Scoped to .mobile-header, which the theme only renders below ~1100px,
	 * so the desktop header is untouched.
	 */
	.mobile-header {
		display: flex;
		align-items: center;
		background: var(--tmp-primary-color, #26913d);
	}

	.mobile-header .mobile-header-t {
		flex: 1 1 auto;
		min-width: 0;
		padding-block: 0;
		background: transparent;
	}

	.mobile-header .mobile-header-b {
		flex: 0 0 auto;
		padding-block: 0;
		background: transparent;
	}

	.mobile-header .mobile-header-t .container {
		padding-right: 0;
	}

	.mobile-header .mobile-header-t .site-branding {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		min-height: 0;
	}

	.mobile-header .mobile-header-t .custom-logo {
		width: auto;
		max-height: 34px;
		object-fit: contain;
		/* The wordmark is dark navy on transparent; on the green bar it needs
		   a light treatment to stay legible. */
		filter: brightness(0) invert(1);
	}

	/* Redundant beside the wordmark, and it wraps badly when shown. */
	.mobile-header .mobile-header-t .site-title-description {
		display: none;
	}

	/* The search field is replaced by the logo. */
	.mobile-header .mobile-header-b .search-toggle-form,
	.mobile-header .mobile-header-b .mobile-search-wrap {
		display: none;
	}

	.mobile-header .mobile-header-b .srch-moblop-wrap {
		gap: 0;
		padding: 0.5rem 15px 0.5rem 0;
	}

	/* ---------------------------------------------------------- menu button */

	/* Three classes deep to match the theme's own
	   .mobile-header .mobile-header-b .mobile-menu-op-wrap { padding: 15px }.
	   That padding wrapped a 15px-tall button; the button now carries its
	   own 44px height, so it only inflated the bar to 74px. */
	.mobile-header .mobile-header-b .mobile-menu-op-wrap {
		display: flex;
		align-items: center;
		padding: 0;
	}

	.mobile-header .mobile-menu-opener {
		width: 2.75rem;
		height: 2.75rem;
		margin-right: -0.75rem;
		position: relative;
		display: inline-block;
		border-radius: 50%;
		transition: background-color 0.18s ease;
	}

	/* Re-anchor the three bars: a 20px-wide group, 14px tall, centred. */
	.mobile-header .mobile-menu-opener::before,
	.mobile-header .mobile-menu-opener::after,
	.mobile-header .mobile-menu-opener span {
		width: 20px;
		left: 50%;
		right: auto;
		margin-left: -10px;
	}

	.mobile-header .mobile-menu-opener::before {
		top: calc(50% - 7px);
		bottom: auto;
	}

	.mobile-header .mobile-menu-opener::after {
		top: calc(50% + 5px);
		bottom: auto;
	}

	.mobile-header .mobile-menu-opener span {
		top: 50%;
	}

	.mobile-header .mobile-menu-opener:hover,
	.mobile-header .mobile-menu-opener:focus-visible {
		background: rgba(255, 255, 255, 0.18);
	}

	.mobile-header .mobile-menu-opener:focus-visible {
		outline: 2px solid #fff;
		outline-offset: -3px;
	}

	/* ---------------------------------------------------------- drawer */

	.mobile-menu-wrapper .btn-menu-close {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		border-radius: 50%;
	}

	.mobile-menu-wrapper .btn-menu-close:focus-visible {
		outline: 2px solid currentColor;
		outline-offset: -2px;
	}

	/* Drawer social icons hit the same missing-block-CSS default as the
	   footer, but sit on white, so they need the dark treatment. */
	.mobile-menu-wrapper .wp-block-social-links .wp-block-social-link-anchor {
		background: rgba(13, 20, 16, 0.06);
		color: #1c2011;
	}

	.mobile-menu-wrapper .wp-block-social-links .wp-block-social-link-anchor:hover,
	.mobile-menu-wrapper .wp-block-social-links .wp-block-social-link-anchor:focus-visible {
		background: rgba(13, 20, 16, 0.12);
		color: #1c2011;
	}

	@media (prefers-reduced-motion: reduce) {
		.mobile-header .mobile-menu-opener,
		.mobile-header .mobile-header-b .search-toggle-form {
			transition: none;
		}
	}
}

/* ---------------------------------------------------------------------------
 * Destination / activity card grid.
 *
 * The cards ship fully transparent, so on the home page the titles landed
 * straight on the section's background photograph and became hard to read.
 * Giving them a surface of their own fixes the contrast and lets the grid
 * read as cards rather than loose images.
 *
 * Depth is three classes to clear the plugin's own
 * ".wpte-gblock-wrapper .wpte-trip-category-*" rules (0,2,0).
 * ------------------------------------------------------------------------- */

.wpte-gblock-wrapper .wpte-trip-category .wpte-inner-container {
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08);
	transition: transform .28s ease, box-shadow .28s ease;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-inner-container:hover {
	transform: translateY(-4px);
	box-shadow: 0 2px 4px rgba(16, 24, 40, .08), 0 16px 32px rgba(16, 24, 40, .14);
}

/* Uniform image height, so a portrait photo cannot stretch its row. */
.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-img-wrap {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-img-wrap figure.thumbnail {
	margin: 0;
	height: 100%;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-img-wrap figure.thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .5s ease;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-inner-container:hover figure.thumbnail img {
	transform: scale(1.06);
}

/* The title block now sits on white instead of the section background. */
.wpte-gblock-wrapper.wpte-elementor-widget .wpte-trip-category .wpte-inner-container .wpte-trip-category-text-wrap {
	background: #fff;
	flex: 1 1 auto;
	display: flex;
	align-items: center;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-title a {
	color: #1c2011;
	text-decoration: none;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-title a:hover,
.wpte-gblock-wrapper .wpte-trip-category .wpte-inner-container:hover .wpte-trip-category-title a {
	color: #26913d;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-title .trip-count {
	font-size: .8125rem;
	font-weight: 400;
	color: #6b7280;
}

/* The arrow is decoration; let the whole card carry the affordance. */
.wpte-gblock-wrapper .wpte-trip-category .wpte-trip-category-title .wpte-icon {
	transition: transform .28s ease;
}

.wpte-gblock-wrapper .wpte-trip-category .wpte-inner-container:hover .wpte-icon {
	transform: translateX(4px);
}

/* ---------------------------------------------------------------------------
 * Page banners.
 *
 * The theme sets the photograph as an inline background-image and leaves the
 * sizing to defaults, so it tiled at its natural size instead of filling the
 * strip. These pages also shared one fallback image; each now carries its own.
 * ------------------------------------------------------------------------- */

.page-header-top[data-bg-image] {
	background-size: cover;
	background-position: center 42%;
	background-repeat: no-repeat;
	min-height: 260px;
	position: relative;
}

/* Breadcrumb and title sit on the photograph, so they need a ground. */
.page-header-top[data-bg-image]::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(8, 26, 15, .55) 0%, rgba(8, 26, 15, .30) 45%, rgba(8, 26, 15, .60) 100%);
	pointer-events: none;
}

@media only screen and (max-width: 782px) {
	.page-header-top[data-bg-image] {
		min-height: 180px;
		background-position: center;
	}
}

/* Text sits on the photograph, so it has to be light. The theme colours it
   for a plain white header, which left the title nearly invisible. */
.page-header-top[data-bg-image] .breadcrumb-wrapper,
.page-header-top[data-bg-image] .container,
.page-header-top[data-bg-image] .container {
	position: relative;
	z-index: 1;
}

.page-header-top[data-bg-image] .container .entry-title,
.page-header-top[data-bg-image] .container h1,
.page-header-top[data-bg-image] .container .page-title,
.page-header-top[data-bg-image] .container .breadcrumb-wrap,
.page-header-top[data-bg-image] .container .breadcrumb-wrap a,
.page-header-top[data-bg-image] .container .breadcrumb-wrap span {
	color: #fff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .45);
}

.page-header-top[data-bg-image] .container .breadcrumb-wrap a:hover {
	color: #d7f3dd;
}