/**
 * Divello Visual Composer: additions for converted Salient pages.
 *
 * Heading reveal, jumbo / gradient / see-through-2 buttons, extra image and
 * entrance options, two more fancy-box styles, masonry and infinite posts,
 * the carousel, highlight and drop cap. Loaded after frontend.css; it only
 * adds, so a page that uses none of these classes is unchanged.
 *
 * Gradient tokens a site can set (any selector above .nb-btn, usually :root):
 *   --nb-grad-1-from / --nb-grad-1-to   default: accent -> accent 2
 *   --nb-grad-2-from / --nb-grad-2-to   default: accent 2 -> accent
 */

/* ------------------------------------------------------------ Heading extras */

.nb-heading--lh .nb-heading__title { line-height: var(--nb-heading-lh); }

/* Reveal: each word (or letter) slides up from behind a mask. Hidden until
   JS marks the heading .is-in; a <noscript> rule and the reduced-motion and
   phone rules below show it plainly. */
.nb-rv__w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding: 0.12em 0 0.22em;
	margin: -0.12em 0 -0.22em;
}

.nb-rv__i {
	display: inline-block;
	transform: translateY(118%);
	transition: transform .9s cubic-bezier(.22,.61,.36,1) calc(var(--nb-rv-i, 0) * var(--nb-rv-step, 90ms));
	will-change: transform;
}

.nb-reveal--letter-reveal-bottom { --nb-rv-step: 28ms; }
.nb-reveal.is-in .nb-rv__i { transform: none; }

@media (max-width: 690px) {
	.nb-reveal:not(.nb-reveal--mobile) .nb-rv__i { transform: none; transition: none; }
	.nb-reveal:not(.nb-reveal--mobile) .nb-rv__w { overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
	.nb-rv__i { transform: none !important; transition: none !important; }
	.nb-rv__w { overflow: visible; }
}

/* ------------------------------------------------------------------ Buttons */

.nb-btn--jumbo { padding: 1.2em 3em; --nb-btn-preset: 1.1875rem; }

/* Gradient fill. Tokens fall back to the theme accents so it works unset. */
.nb-btn--gradient-1 {
	--nb-btn-fill: linear-gradient(135deg, var(--nb-grad-1-from, var(--nova-accent, #2b6cff)), var(--nb-grad-1-to, var(--nova-accent-2, var(--nova-accent, #2b6cff))));
	--nb-btn-edge: var(--nb-grad-1-from, var(--nova-accent, #2b6cff));
}
.nb-btn--gradient-2 {
	--nb-btn-fill: linear-gradient(135deg, var(--nb-grad-2-from, var(--nova-accent-2, var(--nova-accent, #2b6cff))), var(--nb-grad-2-to, var(--nova-accent, #2b6cff)));
	--nb-btn-edge: var(--nb-grad-2-from, var(--nova-accent-2, var(--nova-accent, #2b6cff)));
}

.nb-btn--solid.nb-btn--gradient-1,
.nb-btn--solid.nb-btn--gradient-2 {
	background-image: var(--nb-btn-fill);
	background-size: 160% 100%;
	background-position: 0 0;
	border-color: transparent;
	color: #fff;
	transition: background-position .4s ease, transform .18s ease, filter .18s ease;
}
.nb-btn--solid.nb-btn--gradient-1:hover,
.nb-btn--solid.nb-btn--gradient-2:hover { background-position: 100% 0; filter: none; }

.nb-btn--outline.nb-btn--gradient-1,
.nb-btn--outline.nb-btn--gradient-2 { border-color: var(--nb-btn-edge); color: var(--nb-btn-edge); }
.nb-btn--outline.nb-btn--gradient-1:hover,
.nb-btn--outline.nb-btn--gradient-2:hover { background: var(--nb-btn-fill); border-color: transparent; color: #fff; }

/* See-through 2: an outlined button whose fill rises in on hover. */
.nb-btn--see-through-2 {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: transparent;
	border-color: var(--nb-btn-edge, var(--nb-btn-color, var(--nova-accent, #2b6cff)));
	color: var(--nb-btn-color, var(--nb-btn-edge, var(--nova-accent, #2b6cff)));
}

.nb-btn--see-through-2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--nb-btn-fill, var(--nb-btn-color, var(--nova-accent, #2b6cff)));
	transform: translateY(101%);
	transition: transform .35s cubic-bezier(.22,.61,.36,1);
}

.nb-btn--see-through-2:hover,
.nb-btn--see-through-2:focus-visible { color: #fff; }
.nb-btn--see-through-2:hover::before,
.nb-btn--see-through-2:focus-visible::before { transform: none; }

/* ------------------------------------------------------------------- Images */

.nb-image--custom-radius .nb-image__img { border-radius: var(--nb-image-radius); }
.nb-image--has-max .nb-image__img { max-width: min(100%, var(--nb-image-max)); }

/* Entrance names used by converted content; fade-in needs no rule of its own. */
.nb-anim { transition-delay: var(--nb-anim-delay, 0ms); }
.nb-anim--slide-up,
.nb-anim--fade-in-from-bottom { transform: translateY(40px); }
.nb-anim--fade-in-from-left   { transform: translateX(-40px); }
.nb-anim--fade-in-from-right  { transform: translateX(40px); }

/* --------------------------------------------------------------- Fancy boxes */

.nb-fancy-box--tinted .nb-fancy-box__media::after {
	background: var(--nb-fb-overlay);
	opacity: var(--nb-fb-overlay-opacity, 0.55);
}
.nb-fancy-box--tinted:hover .nb-fancy-box__media::after { opacity: calc(var(--nb-fb-overlay-opacity, 0.55) + 0.15); }

/* Image above text: the picture sits in the flow, a rule draws under the title. */
.nb-fancy-box--image-above-underline { background: var(--nb-fb-bg, transparent); }

.nb-fancy-box--image-above-underline .nb-fancy-box__media {
	position: relative;
	inset: auto;
	flex: 0 0 auto;
}
.nb-fancy-box--image-above-underline .nb-fancy-box__media::after { display: none; }

.nb-fancy-box--image-above-underline .nb-fancy-box__image {
	display: block;
	width: 100%;
	height: auto;
}
.nb-fancy-box--image-above-underline:hover .nb-fancy-box__image { transform: scale(1.04); }

.nb-fancy-box--image-above-underline .nb-fancy-box__title { position: relative; padding-bottom: 0.5rem; }

.nb-fancy-box--image-above-underline .nb-fancy-box__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 2px;
	background: var(--nova-accent, #2b6cff);
	transform: scaleX(var(--nb-fb-rule, 0));
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.22,.61,.36,1);
}

.nb-fancy-box--image-above-underline.nb-fancy-box--align-center .nb-fancy-box__title::after { transform-origin: center; }
.nb-fancy-box--image-above-underline.nb-fancy-box--align-right  .nb-fancy-box__title::after { transform-origin: right center; }
.nb-fancy-box--image-above-underline:hover { --nb-fb-rule: 1; }

/* Parallax hover: the picture is larger than the box and drifts against the
   pointer (umzug.js writes --nb-px / --nb-py, each -1 to 1). */
.nb-fancy-box--parallax-hover {
	--nb-fb-color: #fff;
	--nb-fb-icon-color: #fff;
	--nb-fb-link-color: #fff;
	min-height: var(--nb-fb-min-height, 360px);
	background: var(--nb-fb-bg, #141922);
}

.nb-fancy-box--parallax-hover .nb-fancy-box__body { justify-content: flex-end; }

.nb-fancy-box--parallax-hover .nb-fancy-box__image {
	width: 112%;
	max-width: none;
	height: 112%;
	margin: -6% 0 0 -6%;
	transform: translate3d(calc(var(--nb-px, 0) * -3%), calc(var(--nb-py, 0) * -3%), 0);
	transition: transform .25s ease-out;
}

.nb-fancy-box--parallax-hover:not(:hover) .nb-fancy-box__image { transition-duration: .6s; }

/* Text on a picture takes the box colour (themes often colour headings), and a
   kicker line may sit above the title. */
.nb-fancy-box--parallax-hover .nb-fancy-box__title,
.nb-fancy-box--image .nb-fancy-box__title { color: var(--nb-fb-color, #fff); }
.nb-fancy-box--parallax-hover .nb-fancy-box__text { opacity: 1; }
.nb-fancy-box__kicker { display: block; font-weight: 600; line-height: 1.3; }

@media (prefers-reduced-motion: reduce) {
	.nb-fancy-box--parallax-hover .nb-fancy-box__image { transform: none; }
}

/* -------------------------------------------------------------------- Posts */

/* Masonry uses CSS columns, so cards of unequal height pack without a script. */
.nb-posts--masonry {
	display: block;
	column-count: var(--nb-cols, 3);
	column-gap: var(--nb-posts-gap, 1.75rem);
}

.nb-posts--masonry .nb-posts__item {
	display: flex;
	break-inside: avoid;
	margin-bottom: var(--nb-posts-gap, 1.75rem);
}

@media (max-width: 1000px) { .nb-posts--masonry { column-count: min(var(--nb-cols, 3), 2); } }
@media (max-width: 690px)  { .nb-posts--masonry { column-count: 1; } }

.nb-posts--material .nb-posts__item {
	background: var(--nova-surface, #fff);
	border-radius: var(--nova-radius, 8px);
	box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.07);
	overflow: hidden;
	transition: box-shadow .25s ease, transform .25s ease;
}
.nb-posts--material .nb-posts__item:hover { box-shadow: 0 2px 4px rgba(0,0,0,.1), 0 14px 30px rgba(0,0,0,.12); transform: translateY(-3px); }
.nb-posts--material .nb-posts__thumb { margin-bottom: 0; border-radius: 0; }
.nb-posts--material .nb-posts__body { padding: 1.1rem 1.25rem 1.3rem; }

.nb-posts__loader {
	grid-column: 1 / -1;
	column-span: all;
	display: flex;
	justify-content: center;
	padding: 1.5rem 0 0.5rem;
}
.nb-posts__loader[hidden] { display: none; }
.nb-posts__loader.is-loading .nb-posts__loadmore { opacity: 0.55; pointer-events: none; }
/* Infinite scroll loads on its own; the button stays only as a no-script fallback
   and as a visible cue while a batch is on its way. */
.nb-posts__loader.is-auto:not(.is-loading) .nb-posts__loadmore { visibility: hidden; }

.nb-posts__item.is-new { animation: nb-posts-in .5s ease both; }
@keyframes nb-posts-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .nb-posts__item.is-new { animation: none; } }

/* ----------------------------------------------------------------- Carousel */

.nb-carousel {
	--nb-car-now: var(--nb-car-cols, 3);
	position: relative;
}

@media (max-width: 1000px) { .nb-carousel { --nb-car-now: var(--nb-car-cols-t, 2); } }
@media (max-width: 690px)  { .nb-carousel { --nb-car-now: var(--nb-car-cols-p, 1); } }

.nb-carousel__track {
	display: flex;
	gap: var(--nb-car-gap, 16px);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	cursor: grab;
}

.nb-carousel__track::-webkit-scrollbar { display: none; }
.nb-carousel__track:focus-visible { outline: 2px solid var(--nova-accent, #2b6cff); outline-offset: 3px; }
.nb-carousel__track.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; }
.nb-carousel__track.is-dragging a { pointer-events: none; }

.nb-carousel__slide {
	position: relative;
	flex: 0 0 calc((100% - (var(--nb-car-now) - 1) * var(--nb-car-gap, 16px)) / var(--nb-car-now));
	min-width: 0;
	scroll-snap-align: start;
	overflow: hidden;
	border-radius: var(--nova-radius, 8px);
	background: var(--nb-car-bg, transparent);
	color: var(--nb-car-fg, inherit);
}

.nb-carousel--fixed .nb-carousel__slide { height: var(--nb-car-h); }

.nb-carousel__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.nb-carousel__media { display: block; flex: 1 1 auto; min-height: 0; }

.nb-carousel__img {
	display: block;
	width: 100%;
	height: auto;
	-webkit-user-drag: none;
}

.nb-carousel--fixed .nb-carousel__img { height: 100%; }
.nb-carousel__slide--cover .nb-carousel__img { object-fit: cover; }
.nb-carousel__slide--contain .nb-carousel__img { object-fit: contain; }
.nb-carousel__slide--contain.nb-carousel__slide--filled { display: flex; }

.nb-carousel__caption { display: block; padding: 0.9rem 1rem 1.1rem; }
.nb-carousel__title { display: block; font-weight: 700; }
.nb-carousel__text { display: block; margin-top: 0.3rem; font-size: 0.9375rem; opacity: 0.85; }

.nb-carousel__arrow {
	appearance: none;
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 42px;
	height: 42px;
	margin-top: -21px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.92);
	color: #141922;
	box-shadow: 0 2px 10px rgba(0,0,0,.18);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, transform .2s ease;
}

.nb-carousel__arrow--prev { left: 8px; }
.nb-carousel__arrow--next { right: 8px; }

.nb-carousel__arrow::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
}

.nb-carousel__arrow--next::before { transform: translate(-65%, -50%) rotate(45deg); }
.nb-carousel__arrow--prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.nb-carousel__arrow:hover { background: var(--nova-accent, #2b6cff); color: #fff; }
.nb-carousel__arrow:focus-visible { outline: 2px solid var(--nova-accent, #2b6cff); outline-offset: 2px; }
.nb-carousel__arrow[disabled] { opacity: 0.35; pointer-events: none; }

.nb-carousel__dots { display: flex; justify-content: center; gap: 0.45rem; margin-top: 1rem; }

.nb-carousel__dot {
	appearance: none;
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: color-mix(in srgb, currentColor 25%, transparent);
	cursor: pointer;
	transition: background-color .2s ease, transform .2s ease;
}
.nb-carousel__dot.is-active { background: var(--nova-accent, #2b6cff); transform: scale(1.3); }

.nb-carousel__counter {
	margin-top: 0.8rem;
	text-align: center;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.75;
}

@media (hover: none) { .nb-carousel__arrow { display: none; } }

/* Carousel options: fixed image ratio, caption style, cards, bleed. */
.nb-carousel--ratio .nb-carousel__media {
	flex: 0 0 auto;
	aspect-ratio: var(--nb-car-ratio);
	overflow: hidden;
}
.nb-carousel--ratio .nb-carousel__img { height: 100%; }
.nb-carousel__media { border-radius: var(--nb-car-img-radius, 0); overflow: hidden; }

.nb-carousel--caption-bold .nb-carousel__caption { padding: 1rem 0 0; }
.nb-carousel--caption-bold .nb-carousel__title {
	margin: 0 0 8px;
	font-size: 1.375rem;
	font-weight: 800;
	line-height: 1.15;
	text-transform: uppercase;
	color: inherit;
}
.nb-carousel--caption-bold .nb-carousel__text { margin-top: 0; font-size: 1rem; font-style: italic; opacity: 1; }

.nb-carousel--cards .nb-carousel__track { padding: 4px 0 22px; }
.nb-carousel--cards .nb-carousel__slide {
	padding: var(--nb-car-card-pad, 12px);
	border-radius: var(--nb-car-card-radius, 14px);
	background: var(--nb-car-bg, var(--nb-car-card-bg, #e4e4e4));
	box-shadow: var(--nb-car-card-shadow, 0 6px 16px rgba(0,0,0,.18));
}
.nb-carousel--cards .nb-carousel__caption { padding: 14px 4px 6px; }

/* Bleed: the slides are sized from the carousel's own width, the track then runs on to the screen edge. */
.nb-carousel--bleed { container-type: inline-size; }
.nb-carousel--bleed .nb-carousel__track { margin-right: calc((100% - 100vw) / 2); }
.nb-carousel--bleed .nb-carousel__slide { flex-basis: calc((100cqw - (var(--nb-car-now) - 1) * var(--nb-car-gap, 16px)) / var(--nb-car-now)); }

/* ---------------------------------------------------------------- Highlight */

.nb-highlight { --nb-hl-color: var(--nova-accent, #2b6cff); font-size: var(--nb-hl-size, inherit); }
@media (max-width: 1000px) { .nb-highlight { font-size: var(--nb-hl-size-t, var(--nb-hl-size, inherit)); } }
@media (max-width: 690px) { .nb-highlight { font-size: var(--nb-hl-size-m, var(--nb-hl-size-t, var(--nb-hl-size, inherit))); } }
.nb-highlight--align-center { text-align: center; }
.nb-highlight--align-right { text-align: right; }

.nb-highlight .nb-hl { white-space: normal; }
.nb-highlight .nb-hl__draw { stroke: var(--nb-hl-color); }

.nb-highlight .nb-hl--marker {
	background-image: linear-gradient(transparent 52%, var(--nb-hl-color) 52%, var(--nb-hl-color) 92%, transparent 92%);
	background-repeat: no-repeat;
	background-size: 0% 100%;
	transition: background-size .8s cubic-bezier(.22,.61,.36,1);
}
.nb-highlight .nb-hl--marker.is-drawn { background-size: 100% 100%; }

.nb-highlight .nb-hl--basic-underline {
	background-image: linear-gradient(var(--nb-hl-color), var(--nb-hl-color));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 0.14em;
	transition: background-size .8s cubic-bezier(.22,.61,.36,1);
	padding-bottom: 0.06em;
}
.nb-highlight .nb-hl--basic-underline.is-drawn { background-size: 100% 0.14em; }

.nb-highlight .nb-hl--color .nb-hl__text { color: var(--nb-hl-color); }

@media (prefers-reduced-motion: reduce) {
	.nb-highlight .nb-hl--marker,
	.nb-highlight .nb-hl--basic-underline { transition: none; }
}

/* ----------------------------------------------------------------- Drop cap */

.nb-dropcap {
	float: left;
	margin: 0.06em 0.14em 0 0;
	font-family: var(--nb-dc-font, inherit);
	font-size: var(--nb-dc-size, 3.2em);
	font-weight: var(--nb-dc-weight, 700);
	line-height: 0.85;
	color: var(--nb-dc-color, var(--nova-accent, #2b6cff));
}

.nb-dropcap--circle,
.nb-dropcap--square {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.25em;
	height: 1.25em;
	margin-top: 0.1em;
	line-height: 1;
	background: var(--nb-dc-bg, var(--nova-accent, #2b6cff));
	color: var(--nb-dc-color, #fff);
}
.nb-dropcap--circle { border-radius: 50%; }
.nb-dropcap--square { border-radius: 4px; }