/* ==========================================================================
   Wise Bohemian River — site styles that Elementor cannot express.
   Everything here is scoped to a wbr-* class so it never leaks into the editor
   chrome or a future third-party template.
   ========================================================================== */

:root {
	--wbr-primary: #76c045;
	--wbr-primary-dark: #5ea334;
	--wbr-secondary: #f1f9ec;
	--wbr-body: #6b676c;
	--wbr-dark: #2e2c2f;
	--wbr-navy: #192b4e;
	--wbr-line: #e4e4e6;
	--wbr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* --------------------------------------------------------------------------
   1. Legal pages — one rich-text block per page.
   The client pastes plain h2/h3/p/ul/ol markup; the rhythm comes from here.
   -------------------------------------------------------------------------- */
.wbr-legal {
	font-family: "Outfit", sans-serif;
	font-size: clamp(15px, 14.6px + 0.1vw, 16px);
	font-weight: 400;
	line-height: 1.6;
	color: var(--wbr-body);
}

.wbr-legal > *:first-child { margin-top: 0; }
.wbr-legal > *:last-child { margin-bottom: 0; }

.wbr-legal h2 {
	font-family: "Cambon", serif;
	font-weight: 600;
	font-size: clamp(24px, 21.1px + 0.75vw, 32px);
	line-height: 1.25;
	color: var(--wbr-dark);
	margin: 48px 0 16px;
}

.wbr-legal h3 {
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: clamp(18px, 17.3px + 0.2vw, 20px);
	line-height: 1.3;
	color: var(--wbr-dark);
	margin: 32px 0 16px;
}

.wbr-legal h4 {
	font-family: "Outfit", sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.3;
	color: var(--wbr-dark);
	margin: 24px 0 12px;
}

.wbr-legal p { margin: 0 0 16px; }
.wbr-legal ul,
.wbr-legal ol { margin: 0 0 16px; padding-inline-start: 24px; }
.wbr-legal ul { list-style: disc; }
.wbr-legal ol { list-style: decimal; }
.wbr-legal li { margin: 0 0 6px; }
.wbr-legal li:last-child { margin-bottom: 0; }
.wbr-legal li > ul,
.wbr-legal li > ol { margin: 6px 0 0; }

.wbr-legal strong,
.wbr-legal b { font-weight: 600; color: var(--wbr-dark); }

.wbr-legal em { font-style: italic; }

.wbr-legal a {
	color: var(--wbr-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
	transition: color 0.2s var(--wbr-ease);
}
.wbr-legal a:hover,
.wbr-legal a:focus-visible { color: var(--wbr-primary-dark); }

.wbr-legal blockquote {
	margin: 24px 0;
	padding: 16px 24px;
	border-inline-start: 3px solid var(--wbr-primary);
	background: var(--wbr-secondary);
	border-radius: 8px;
}

.wbr-legal hr {
	border: 0;
	border-top: 1px solid var(--wbr-line);
	margin: 40px 0;
}

.wbr-legal table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 24px;
	font-size: 15px;
}
.wbr-legal th,
.wbr-legal td {
	border: 1px solid var(--wbr-line);
	padding: 10px 12px;
	text-align: start;
	vertical-align: top;
}
.wbr-legal th { font-weight: 600; color: var(--wbr-dark); background: #fafafb; }

@media (max-width: 767px) {
	.wbr-legal h2 { margin-top: 36px; }
	.wbr-legal h3 { margin-top: 24px; }
	.wbr-legal table { display: block; overflow-x: auto; }
}

/* --------------------------------------------------------------------------
   2. Hero sections — the copy has to sit above the gradient overlay.
   Elementor paints the overlay in an ::before on the container.
   -------------------------------------------------------------------------- */
.wbr-hero > .e-con-inner,
.wbr-hero > .elementor-widget,
.wbr-hero > .e-con {
	position: relative;
	z-index: 2;
}

/* --------------------------------------------------------------------------
   3. Sliders (Splide) for the sections that carry prev/next arrows.
   -------------------------------------------------------------------------- */
.wbr-slider .splide__track { overflow: hidden; }
.wbr-slider .splide__list { display: flex; }

/* The track is a grid/flex row until Splide takes over; neutralise that so the
   slide widths come from Splide alone. */
.wbr-slider .wbr-slider-track.splide {
	display: block;
	grid-template-columns: none;
}

/* Slides stretch to the tallest card in the row, like the grid they replace. */
.wbr-slider .splide__list { align-items: stretch; }
.wbr-slider .splide__slide { height: auto; }

/* A photo that only fills its cell: it must not set the row height, the
   neighbouring column does. Without this a portrait photo stretches the whole
   row on tablet, where the column is wide. */
.elementor .wbr-fill { contain: size; min-height: 0; }
.elementor .wbr-fill img { height: 100%; }

/* Reviews: the quote takes the spare height, so the author lines sit on the
   same baseline in every card however long the quote is. */
#reviews .splide__slide {
	display: flex;
	flex-direction: column;
}
#reviews .splide__slide > :first-child { flex-grow: 1; }
/* Some roles wrap to two lines; reserving both keeps the names level too. */
#reviews .splide__slide > :last-child { min-height: 2lh; }

/* Before Splide mounts, keep the row looking like the grid it came from. */
.wbr-slider .splide:not(.is-initialized) .splide__list { gap: 32px; }

/* Arrows ------------------------------------------------------------------ */
.wbr-slider-prev,
.wbr-slider-next {
	cursor: pointer;
	user-select: none;
	transition: opacity 0.2s var(--wbr-ease), transform 0.2s var(--wbr-ease);
}
.wbr-slider-prev svg,
.wbr-slider-next svg { transition: inherit; }

.wbr-slider-prev:hover:not(.is-disabled),
.wbr-slider-next:hover:not(.is-disabled) { opacity: 0.65; }
.wbr-slider-prev:hover:not(.is-disabled) { transform: translateX(-3px); }
.wbr-slider-next:hover:not(.is-disabled) { transform: translateX(3px); }

.wbr-slider-prev.is-disabled,
.wbr-slider-next.is-disabled {
	opacity: 0.3;
	pointer-events: none;
}

.wbr-slider .splide__track--draggable { cursor: grab; }
.wbr-slider .splide__track--draggable:active { cursor: grabbing; }

/* --------------------------------------------------------------------------
   4. Kill Elementor's stock image hover behaviour.
   -------------------------------------------------------------------------- */
.elementor-widget-image img,
.e-atomic-element img,
.elementor-widget-theme-site-logo img {
	transition: none;
}
.elementor-widget-image:hover img,
.elementor-widget-image a:hover img,
.e-image-base:hover img {
	opacity: 1;
	filter: none;
	transform: none;
}

/* Anything we deliberately animate opts back in. */
.wbr-zoom { overflow: hidden; }
.wbr-zoom img {
	transition: transform 0.5s var(--wbr-ease) !important;
	will-change: transform;
}
.wbr-zoom:hover img { transform: scale(1.04); }

/* --------------------------------------------------------------------------
   4b. Figma icons are stroke-based with fill="none" on the root <svg>.
   Elementor's icon-colour control forces `fill` onto the <svg>, and since fill
   is inherited that floods every outline solid. Honour the file's own fill so
   the SVGs render exactly as exported.
   -------------------------------------------------------------------------- */
.elementor-icon svg[fill="none"],
.elementor-social-icon svg[fill="none"],
.elementor-icon-list-icon svg[fill="none"],
.e-atomic-element svg[fill="none"],
svg[fill="none"].e-font-icon-svg { fill: none !important; }

/* --------------------------------------------------------------------------
   5. Consent checkbox. The native control cannot be styled to match the form,
   and the kit's generic `input` rule outspecifies anything Elementor writes for
   the element, so it is drawn from scratch here.
   -------------------------------------------------------------------------- */
.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px !important;
	min-height: 20px !important;
	max-width: 20px !important;
	max-height: 20px !important;
	margin: 0;
	padding: 0 !important;
	border: 2px solid rgba(46, 44, 47, 0.22) !important;
	border-radius: 6px !important;
	background-color: #fff;
	background-image: none;
	display: inline-grid;
	place-content: center;
	cursor: pointer;
	transition: border-color 0.18s var(--wbr-ease), background-color 0.18s var(--wbr-ease),
		box-shadow 0.18s var(--wbr-ease);
}

/* the tick */
.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base::before {
	content: "";
	width: 11px;
	height: 11px;
	transform: scale(0);
	transform-origin: center;
	transition: transform 0.15s var(--wbr-ease);
	box-shadow: inset 1em 1em #fff;
	clip-path: polygon(14% 44%, 0 65%, 44% 100%, 100% 16%, 80% 0%, 43% 62%);
}

.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base:hover {
	border-color: var(--wbr-navy);
}

.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base:checked {
	background-color: var(--wbr-navy);
	border-color: var(--wbr-navy) !important;
	border-radius: 6px !important;   /* the kit rounds every input to 12px */
}

.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base:checked::before {
	transform: scale(1);
}

.elementor-kit-15 input[type="checkbox"].e-form-checkbox-base:focus-visible {
	outline: none;
	border-color: var(--wbr-navy);
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--wbr-navy);
}

.wbr-consent-row { align-items: center; }
.e-form-label-base[for] { cursor: pointer; }

/* --------------------------------------------------------------------------
   6. Forms — placeholder colour and the bits v4 states cannot reach.
   -------------------------------------------------------------------------- */
.e-form-input-base::placeholder,
.e-form-textarea-base::placeholder {
	color: #a9a6ab;
	opacity: 1;
}

/* Figma (45:185) puts the field text at x=16, y=12. The kit's generic `input`
   rule pushed the inputs to 24px while the textarea kept 16px, so the two did
   not line up. */
.elementor-kit-15 .e-form-input-base,
.elementor-kit-15 .e-form-textarea-base { padding: 12px 16px !important; }

/* The consent line sits on the green panel: white text, white underlined link,
   brand blue on hover. (Elementor gives the label no wrapper class of its own,
   so the link is targeted through `.e-form-label-base`.) */
.elementor-kit-15 .e-form-label-base a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s var(--wbr-ease);
}
.elementor-kit-15 .e-form-label-base a:hover,
.elementor-kit-15 .e-form-label-base a:focus-visible { color: var(--wbr-navy); }
.e-form-input-base,
.e-form-textarea-base,
.e-form-submit-button-base {
	transition: border-color 0.2s var(--wbr-ease), box-shadow 0.2s var(--wbr-ease),
		background-color 0.2s var(--wbr-ease), color 0.2s var(--wbr-ease);
}
.e-form-input-base:focus,
.e-form-textarea-base:focus { outline: none; }
.e-form-textarea-base { resize: vertical; }

/* --------------------------------------------------------------------------
   7. Global focus visibility — keyboard users need a ring everywhere.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.elementor-button:focus-visible {
	outline: 2px solid var(--wbr-primary);
	outline-offset: 3px;
	border-radius: 4px;
}

/* --------------------------------------------------------------------------
   8. Menus — hover/active affordance on header and footer navigation.
   -------------------------------------------------------------------------- */
.wbr-menu .e-n-menu-title,
.wbr-menu a {
	transition: color 0.2s var(--wbr-ease), opacity 0.2s var(--wbr-ease);
}

/* --------------------------------------------------------------------------
   9. Social icon circles.
   -------------------------------------------------------------------------- */
.wbr-social-link {
	transition: background-color 0.25s var(--wbr-ease), border-color 0.25s var(--wbr-ease),
		transform 0.25s var(--wbr-ease);
}
.wbr-social-link:hover { transform: translateY(-2px); }
.wbr-social-link svg,
.wbr-social-link svg * { transition: stroke 0.25s var(--wbr-ease), fill 0.25s var(--wbr-ease); }

/* --------------------------------------------------------------------------
   10. Cards — a shared lift used by the destination/venue/trip cards.
   -------------------------------------------------------------------------- */
.wbr-card {
	transition: transform 0.3s var(--wbr-ease), box-shadow 0.3s var(--wbr-ease);
}
.wbr-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(46, 44, 47, 0.12);
}

/* --------------------------------------------------------------------------
   11. Sticky header. It is fixed with white type, so instead of a light bar it
   drops a full-bleed dark scrim behind itself once the page leaves the hero.
   (Previously an Elementor "custom code" snippet keyed to a hashed style class.)
   -------------------------------------------------------------------------- */
.wbr-header { transition: padding-block 0.3s var(--wbr-ease); }

.wbr-header::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	opacity: 0;
	background-color: rgba(12, 14, 16, 0.72);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transition: opacity 0.3s ease;
}

.wbr-header.is-scrolled::before { opacity: 1; }
.wbr-header.is-scrolled { padding-block: 16px; }

@media (max-width: 767px) {
	.wbr-header.is-scrolled { padding-block: 12px; }
}

/* Menu items animate their colour rather than snapping. */
.wbr-menu .e-n-menu-title-text { transition: color 0.2s var(--wbr-ease); }

/* The fixed bar would otherwise cover the target of an in-page anchor. */
html { scroll-behavior: smooth; }
#services, #reviews, #destinations, #contact,
#meetings, #incentives, #conferences, #events { scroll-margin-top: 140px; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   12. Footer partner logos.
   -------------------------------------------------------------------------- */
.wbr-partner-logo img { transition: opacity 0.25s var(--wbr-ease), transform 0.25s var(--wbr-ease); }
.wbr-partner-logo:hover img { opacity: 0.75; transform: translateY(-2px); }

/* --------------------------------------------------------------------------
   13. "SHOW MORE" rows on the service cards.
   -------------------------------------------------------------------------- */
.wbr-showmore { transition: color 0.2s var(--wbr-ease); }
.wbr-showmore svg,
.wbr-showmore .elementor-icon { transition: transform 0.25s var(--wbr-ease); }
.wbr-showmore:hover svg,
.wbr-card:hover .wbr-showmore svg { transform: translateX(4px); }
.wbr-showmore:hover p { color: var(--wbr-primary-dark); }

/* --------------------------------------------------------------------------
   14. Icon widgets. Elementor stretches a widget to the height of its flex row
   and the SVG then hangs off the top, so an icon beside a line of text sits a
   few pixels high. Centre it on the line instead.
   -------------------------------------------------------------------------- */
.elementor-widget-icon { align-self: center; }
.elementor-widget-icon .elementor-icon-wrapper,
.elementor-widget-icon .elementor-icon { display: flex; align-items: center; }

/* --------------------------------------------------------------------------
   15. Phone / e-mail rows. They sit on white, so the hover is the darker green
   — #76C045 on #fff is too faint to read as a state change.
   -------------------------------------------------------------------------- */
.wbr-contact-link { text-decoration: none; }
.wbr-contact-link p,
.wbr-contact-link svg [stroke] {
	transition: color 0.2s var(--wbr-ease), stroke 0.2s var(--wbr-ease);
}
/* Elementor ships `a.e-atomic-element:hover *{color:#76C045}`, which is the same
   specificity as a bare class rule and loads later; the leading `a` outranks it.
   The darker green is deliberate — these rows sit on white, where #76C045 is
   too faint to register as a state change. */
a.wbr-contact-link:hover p,
a.wbr-contact-link:focus-visible p { color: var(--wbr-primary-dark); }
a.wbr-contact-link:hover svg [stroke],
a.wbr-contact-link:focus-visible svg [stroke] { stroke: var(--wbr-primary-dark); }

/* The footer list sits on the navy panel, where the light green reads best. */
.elementor-location-footer .elementor-icon-list-item a,
.elementor-location-footer .elementor-icon-list-item svg [stroke] {
	transition: color 0.2s var(--wbr-ease), stroke 0.2s var(--wbr-ease);
}
.elementor-location-footer .elementor-icon-list-item a:hover svg [stroke] {
	stroke: var(--wbr-primary);
}

/* --------------------------------------------------------------------------
   16. Link hover colours, by the surface they sit on.
   Folded in from the "WBR — hover stavy" custom-code snippet, which set one
   global #76C045 everywhere. That green carries 2.4:1 against white — too faint
   to read as a state change — so light surfaces get the darker green and the
   two dark surfaces (header scrim, navy footer) keep the light one.
   -------------------------------------------------------------------------- */
.elementor-kit-15 a,
a.e-atomic-element { transition: color 0.2s var(--wbr-ease); }

.elementor-kit-15 a:hover { color: var(--wbr-primary-dark); }
a.e-atomic-element:hover,
a.e-atomic-element:hover * { color: var(--wbr-primary-dark); }

/* dark surfaces */
.elementor-location-footer a:hover,
.elementor-location-footer a.e-atomic-element:hover *,
.wbr-header a:hover { color: var(--wbr-primary); }

/* menu titles */
.e-n-menu-title { --n-menu-title-color-hover: var(--wbr-primary); }
.e-n-menu-title,
.e-n-menu-title a { transition: color 0.2s var(--wbr-ease); }
.e-n-menu-title:hover a,
.e-n-menu-title:hover .e-n-menu-title-text { color: var(--wbr-primary); }

/* buttons and social icons */
.e-button-base,
.elementor-button { transition: opacity 0.2s var(--wbr-ease), background-color 0.2s var(--wbr-ease); }
.e-button-base:hover,
.elementor-button:hover { opacity: 0.88; }

.elementor-social-icon { transition: opacity 0.2s var(--wbr-ease), background-color 0.2s var(--wbr-ease); }
.elementor-social-icon:hover { opacity: 0.8; }

/* --------------------------------------------------------------------------
   17. "About us" photos below the tablet breakpoint.
   The collage is built from fixed-height crops, which letterbox badly once a
   column goes full width. Everything except the two profile columns runs on a
   4:3 box instead. (Placed after the per-element rules on purpose: Elementor's
   element classes carry the same specificity, so load order decides.)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.elementor .wbr-ar43 {
		display: block;
		width: 100%;
		height: auto !important;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
	.elementor .wbr-ar43 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* --------------------------------------------------------------------------
   18. Footer columns. The 5/7 split of the 12-track grid can only be expressed
   as a grid span, which lives in `custom_css` — and that is exactly what the
   expired Pro licence strips and what an edit in the editor drops. Anchored to
   a plain class here, it survives both.
   -------------------------------------------------------------------------- */
.elementor .wbr-footer-brand { grid-column: span 5; }
.elementor .wbr-footer-nav { grid-column: span 7; }

@media (max-width: 1024px) {
	.elementor .wbr-footer-brand,
	.elementor .wbr-footer-nav { grid-column: span 1; }
}


/* --------------------------------------------------------------------------
   404 — same hero as the subpages (legal pages), with a way back home.
   -------------------------------------------------------------------------- */
.wbr-404__hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 461px;
	padding: 200px 24px 72px;
	background: url("../../uploads/2026/08/wbr-hero-legal-frame.jpg") center / cover no-repeat;
	box-sizing: border-box;
}
.wbr-404__hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(137deg, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, 0) 92%);
}
.wbr-404__inner {
	position: relative;
	width: 100%;
	max-width: 1372px;
	margin: 0 auto;
}
.wbr-404 .wbr-404__title {
	margin: 0 0 16px;
	font-family: "Cambon", serif;
	font-weight: 600;
	font-size: clamp(36px, 22px + 2.9vw, 64px);
	line-height: 1.2;
	color: #fff;
}
.wbr-404__text {
	margin: 0 0 32px;
	font-family: "Outfit", sans-serif;
	font-size: clamp(16px, 15.2px + .2vw, 18px);
	line-height: 1.4;
	color: #fff;
}
/* Doubled up to outrank the Elementor kit's link colour and underline. */
.wbr-404 a.wbr-404__btn {
	display: inline-block;
	padding: 14px 24px;
	border-radius: 100px;
	background: #76C045;
	font-family: "Outfit", sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.25;
	color: #fff;
	text-decoration: none;
	transition: background-color .2s ease;
}
.wbr-404 a.wbr-404__btn:hover,
.wbr-404 a.wbr-404__btn:focus-visible { background: #54A71D; color: #fff; text-decoration: none; }

@media (max-width: 767px) {
	.wbr-404__hero { min-height: 0; padding: 140px 16px 56px; }
}