/*
 * SBT OptimizePress Shortcode Compatibility — stylesheet
 * Theme-independent. Everything is driven by sbt- classes and a small set of
 * CSS custom properties emitted by the shim for genuinely dynamic values
 * (widths, aspect ratios, author-chosen colours).
 */

:root {
	--sbt-space: 1rem;
	--sbt-radius: 6px;
	--sbt-border: #dfe3e8;
	--sbt-muted: #5b6b7a;
	--sbt-accent: #2f6fdb;
	--sbt-accent-ink: #fff;
	--sbt-surface: #f6f8fa;
}

/* ---------- shared ---------- */

.sbt-align-left   { text-align: left; }
.sbt-align-right  { text-align: right; }
.sbt-align-center { text-align: center; }

.sbt-align-center.sbt-image,
.sbt-align-center.sbt-video,
.sbt-align-center.sbt-lightbox { margin-inline: auto; }

.sbt-align-left.sbt-image,
.sbt-align-left.sbt-video,
.sbt-align-left.sbt-lightbox { margin-inline: 0 auto; }

.sbt-align-right.sbt-image,
.sbt-align-right.sbt-video,
.sbt-align-right.sbt-lightbox { margin-inline: auto 0; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ---------- divider ---------- */

.sbt-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: calc(var(--sbt-space) * 1.5) 0;
}
.sbt-divider::before,
.sbt-divider::after {
	content: "";
	flex: 1 1 auto;
	border-top: 1px solid var(--sbt-border);
}
.sbt-divider:not(:has(.sbt-divider__label))::after { display: none; }
.sbt-divider__label {
	flex: 0 0 auto;
	font-size: 0.875em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sbt-muted);
}
.sbt-divider--0::before,
.sbt-divider--0::after { border-top-style: solid; }
.sbt-divider--2::before,
.sbt-divider--2::after { border-top-width: 3px; }
.sbt-divider--3::before,
.sbt-divider--3::after { border-top-style: dashed; }
.sbt-divider--4::before,
.sbt-divider--4::after { border-top-style: dotted; }
.sbt-divider--5::before,
.sbt-divider--5::after { border-top: 4px double var(--sbt-border); }

/* ---------- spacer ---------- */

.sbt-spacer { height: var(--sbt-spacer, 20px); }

/* ---------- text block ---------- */

.sbt-text-block {
	width: var(--sbt-tb-w, auto);
	max-width: 100%;
	margin-top: var(--sbt-tb-mt, 0);
	margin-bottom: var(--sbt-tb-mb, 0);
	padding-top: var(--sbt-tb-pt, 0);
	padding-right: var(--sbt-tb-pr, 0);
	padding-bottom: var(--sbt-tb-pb, 0);
	padding-left: var(--sbt-tb-pl, 0);
	line-height: var(--sbt-tb-lh, inherit);
}
.sbt-text-block.sbt-align-center { margin-inline: auto; }

.sbt-custom-html > *:first-child { margin-top: 0; }
.sbt-custom-html > *:last-child  { margin-bottom: 0; }

/* ---------- columns ---------- */

.sbt-columns {
	display: grid;
	gap: calc(var(--sbt-space) * 1.5);
	margin: var(--sbt-space) 0;
}
.sbt-columns--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) {
	.sbt-columns--2 { grid-template-columns: minmax(0, 1fr); }
}
.sbt-columns__col > *:first-child { margin-top: 0; }
.sbt-columns__col > *:last-child  { margin-bottom: 0; }

/* ---------- headline ---------- */

.sbt-headline {
	margin-top: var(--sbt-hl-mt, 0.6em);
	margin-bottom: var(--sbt-hl-mb, 0.5em);
	line-height: var(--sbt-hl-lh, 1.25);
	text-wrap: balance;
}
.sbt-headline--2 { border-bottom: 2px solid var(--sbt-border); padding-bottom: 0.3em; }
.sbt-headline--3 { border-left: 4px solid var(--sbt-accent); padding-left: 0.6em; }

/* ---------- bullet block ---------- */

.sbt-bullets { width: var(--sbt-bullet-w, auto); max-width: 100%; margin: var(--sbt-space) 0; }
.sbt-bullets.sbt-align-center { margin-inline: auto; }
.sbt-bullets ul { list-style: none; margin: 0; padding: 0; }
.sbt-bullets li {
	position: relative;
	padding-left: 1.9em;
	margin-bottom: 0.55em;
	text-align: left;
}
.sbt-bullets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 1.2em;
	height: 1.2em;
	background-image: var(--sbt-bullet-icon, none);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}
/* Fallback marker when no OptimizePress icon is available. */
.sbt-bullets:not([style*="bullet-icon"]) li::before {
	background: var(--sbt-accent);
	border-radius: 50%;
	width: 0.5em;
	height: 0.5em;
	top: 0.55em;
	left: 0.35em;
}
.sbt-bullets--lg li { padding-left: 3rem; min-height: 2.5rem; }
.sbt-bullets--lg li::before { width: 2.25rem; height: 2.25rem; top: 0; }

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

.sbt-box {
	width: var(--sbt-box-w, auto);
	max-width: 100%;
	margin-top: var(--sbt-box-mt, var(--sbt-space));
	margin-bottom: var(--sbt-box-mb, var(--sbt-space));
	padding: var(--sbt-box-pt, 1.25rem) var(--sbt-box-pr, 1.25rem) var(--sbt-box-pb, 1.25rem) var(--sbt-box-pl, 1.25rem);
	background: var(--sbt-box-bg, var(--sbt-surface));
	border: var(--sbt-box-bw, 1px) var(--sbt-box-bs, solid) var(--sbt-box-bc, var(--sbt-border));
	border-radius: var(--sbt-box-br, var(--sbt-radius));
}
.sbt-box.sbt-align-center { margin-inline: auto; }
.sbt-box__title { margin: 0 0 0.6em; font-size: 1.15em; }
.sbt-box__body > *:first-child { margin-top: 0; }
.sbt-box__body > *:last-child  { margin-bottom: 0; }
.sbt-box--custom[style*="bg-end"] {
	background-image: linear-gradient(var(--sbt-box-bg), var(--sbt-box-bg-end));
}
.sbt-box--7, .sbt-box--9 { background: transparent; border-style: dashed; }

.sbt-order-box {
	border: 2px dashed var(--sbt-border);
	border-radius: var(--sbt-radius);
	padding: 1.5rem;
	margin: calc(var(--sbt-space) * 1.5) 0;
}

/* ---------- feature grid ---------- */

.sbt-features {
	display: grid;
	grid-template-columns: repeat(var(--sbt-grid-cols, 3), minmax(0, 1fr));
	gap: calc(var(--sbt-space) * 1.25);
	margin: calc(var(--sbt-space) * 1.5) 0;
}
@media (max-width: 900px) { .sbt-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .sbt-features { grid-template-columns: minmax(0, 1fr); } }

.sbt-feature {
	display: block;
	text-align: center;
	padding: 1.1rem;
	border: 1px solid var(--sbt-border);
	border-radius: var(--sbt-radius);
	background: var(--sbt-feature-bg, transparent);
	color: inherit;
	text-decoration: none;
}
a.sbt-feature:hover { border-color: var(--sbt-accent); }
.sbt-feature__icon { display: block; margin: 0 auto 0.7rem; height: auto; max-width: 64px; }
.sbt-feature__title { margin: 0 0 0.4em; font-size: 1.02em; }
.sbt-feature__body > *:last-child { margin-bottom: 0; }

/* ---------- toggle ---------- */

.sbt-toggle {
	border: 1px solid var(--sbt-border);
	border-radius: var(--sbt-radius);
	margin: var(--sbt-space) 0;
}
.sbt-toggle__summary { cursor: pointer; padding: 0.7rem 1rem; font-weight: 600; }
.sbt-toggle__body { padding: 0 1rem 1rem; }

/* ---------- images ---------- */

.sbt-image {
	display: block;
	width: var(--sbt-img-w, auto);
	max-width: 100%;
	margin-top: var(--sbt-img-mt, 0);
	margin-right: var(--sbt-img-mr, 0);
	margin-bottom: var(--sbt-space);
}
.sbt-image--full { width: 100%; }
.sbt-image__img { max-width: 100%; height: auto; display: block; }
.sbt-image.sbt-align-center .sbt-image__img { margin-inline: auto; }
.sbt-image--2 .sbt-image__img,
.sbt-image--5 .sbt-image__img { border-radius: 50%; }
.sbt-image--3 .sbt-image__img,
.sbt-image--4 .sbt-image__img {
	border: 1px solid var(--sbt-border);
	padding: 4px;
	background: #fff;
	border-radius: var(--sbt-radius);
}
.sbt-image__caption {
	margin-top: 0.5em;
	font-size: 0.875em;
	color: var(--sbt-muted);
	text-align: center;
}

/* ---------- video ---------- */

.sbt-video, .sbt-lightbox {
	width: var(--sbt-vid-w, var(--sbt-lb-w, 100%));
	max-width: 100%;
	margin-top: var(--sbt-vid-mt, 0);
	margin-bottom: var(--sbt-vid-mb, var(--sbt-space));
}
.sbt-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: var(--sbt-vid-ar, var(--sbt-lb-ar, 16 / 9));
	background: #000;
	border-radius: var(--sbt-radius);
	overflow: hidden;
}
.sbt-video__frame > .sbt-video__media,
.sbt-video__frame > iframe,
.sbt-video__frame > video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}
.sbt-video--framed .sbt-video__frame {
	border: 10px solid #1b1b1b;
	border-radius: 14px;
}
.sbt-video__fallback { margin: 0; padding: 1rem; }
.sbt-audio { width: 100%; }

/* ---------- lightbox trigger ---------- */

.sbt-lightbox__trigger {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	border-radius: var(--sbt-radius);
	overflow: hidden;
	cursor: pointer;
	line-height: 0;
}
.sbt-lightbox__poster { width: 100%; height: auto; display: block; opacity: 0.85; }
.sbt-lightbox__trigger:hover .sbt-lightbox__poster { opacity: 1; }
.sbt-lightbox__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 68px; height: 48px;
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.65);
}
.sbt-lightbox__play::after {
	content: "";
	position: absolute;
	top: 50%; left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: 10px 0 10px 17px;
	border-color: transparent transparent transparent #fff;
}
.sbt-lightbox__trigger:focus-visible { outline: 3px solid var(--sbt-accent); outline-offset: 3px; }

/* ---------- modal (lightbox + popup) ---------- */

.sbt-modal[hidden] { display: none; }
.sbt-modal {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
}
.sbt-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.72); }
.sbt-modal__panel {
	position: relative;
	width: var(--sbt-pop-w, 720px);
	max-width: 100%;
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 10px;
	padding: 2rem 1.5rem 1.5rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.sbt-modal__panel--video { background: #000; padding: 0; width: min(960px, 100%); overflow: visible; }
.sbt-modal__close {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	width: 2rem; height: 2rem;
	border: 0;
	background: transparent;
	font-size: 1.6rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
}
.sbt-modal__panel--video .sbt-modal__close { top: -2.2rem; right: 0; color: #fff; }
.sbt-modal__body > *:first-child { margin-top: 0; }
/* Popup trigger: strip all native + theme button chrome so only the inner .sbt-btn shows */
.sbt-popup .sbt-popup__trigger,
button.sbt-popup__trigger {
	display: inline-block;
	margin: 0;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	background-color: transparent !important;
	box-shadow: none !important;
	font: inherit;
	color: inherit;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	line-height: 0;
}
.sbt-popup .sbt-popup__trigger:hover,
.sbt-popup .sbt-popup__trigger:focus {
	background: none !important;
	box-shadow: none !important;
	outline: none;
}
.sbt-popup .sbt-popup__trigger .sbt-btn-wrap { margin: 0; }
.sbt-popup .sbt-popup__trigger:focus-visible .sbt-btn { outline: 3px solid #0088CC; outline-offset: 3px; }

/* ---------- downloads ---------- */

.sbt-downloads { list-style: none; margin: var(--sbt-space) 0; padding: 0; }
.sbt-downloads__title { margin: 0 0 0.5em; font-size: 1.1em; }
.sbt-download + .sbt-download { border-top: 1px solid var(--sbt-border); }
.sbt-download__link {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0.7rem 0.25rem;
	text-decoration: none;
	color: inherit;
}
.sbt-download__link:hover .sbt-download__label { text-decoration: underline; }
.sbt-download__icon { flex: 0 0 auto; width: 40px; height: auto; }
.sbt-download__label { flex: 1 1 auto; }
.sbt-download__type {
	flex: 0 0 auto;
	font-size: 0.7em;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 0.2em 0.5em;
	border-radius: 3px;
	background: var(--sbt-surface);
	color: var(--sbt-muted);
}
.sbt-downloads--2 { border: 1px solid var(--sbt-border); border-radius: var(--sbt-radius); padding: 0 1rem; }

/* ---------- buttons (redesigned - on-brand gradient CTA) ---------- */

.sbt-btn-wrap { margin: calc(var(--sbt-space) * 1.4) 0; }

.sbt-btn,
.sbt-btn--cta {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15em;
	max-width: 100%;
	padding: 0.95em 2.2em;
	border: 0;
	border-radius: 12px;
	background-image: linear-gradient(135deg, #0088CC 0%, #00C2D7 100%);
	color: #fff;
	font-family: "Plus Jakarta Sans", "Segoe UI", sans-serif;
	font-size: clamp(15px, 1.05rem, 19px);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 10px 24px rgba(0, 136, 204, 0.26);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	-webkit-appearance: none;
	appearance: none;
}
.sbt-btn:hover,
.sbt-btn--cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 32px rgba(0, 136, 204, 0.34);
	filter: brightness(1.04);
	color: #fff;
}
.sbt-btn:focus-visible,
.sbt-btn--cta:focus-visible {
	outline: 3px solid #0088CC;
	outline-offset: 3px;
}
.sbt-btn:active,
.sbt-btn--cta:active { transform: translateY(0); }

.sbt-btn__text { display: block; }
.sbt-btn__subtext {
	font-size: 0.72em;
	font-weight: 500;
	opacity: 0.9;
	letter-spacing: 0.01em;
}

/* Full-width on small screens so a row of CTAs stacks cleanly. */
@media (max-width: 600px) {
	.sbt-btn,
	.sbt-btn--cta {
		display: flex;
		width: 100%;
		padding: 0.95em 1.4em;
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sbt-btn, .sbt-btn--cta { transition: none; }
	.sbt-btn:hover, .sbt-btn--cta:hover { transform: none; }
}

/* ---------- countdown ---------- */

.sbt-countdown {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	margin: calc(var(--sbt-space) * 1.5) 0;
}
.sbt-countdown__unit {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--sbt-border);
	border-radius: var(--sbt-radius);
	background: var(--sbt-surface);
}
.sbt-countdown__value { font-size: 1.6rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sbt-countdown__label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sbt-muted); }

@media (prefers-reduced-motion: reduce) {
	.sbt-btn:hover { filter: none; }
}

/* ---------- articulus (ported from the OptimizePress theme) ---------- */

.sbt-articulus { width: 100%; }
.sbt-articulus__frame {
	display: block;
	width: 100%;
	height: 100vh;
	border: 0;
}
.sbt-articulus__notice { margin: var(--sbt-space) 0; }

/* === responsive safety net for migrated OptimizePress content === */
/* Any element the shim rendered lives inside .sbt-article on single pages.
   Force fluid behaviour regardless of inline px widths baked in by OptimizePress. */
.sbt-article img,
.sbt-text-block img,
.sbt-box img { max-width: 100% !important; height: auto !important; }
.sbt-article img[width],
.sbt-text-block img[width] { width: auto !important; }
.sbt-article iframe,
.sbt-article video,
.sbt-article embed,
.sbt-article object { max-width: 100% !important; }
/* tables from legacy app pages (e.g. /salsa) scroll instead of overflowing */
.sbt-article table,
.sbt-text-block table {
	display: block;
	width: 100% !important;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-collapse: collapse;
}
.sbt-article table td,
.sbt-article table th { word-break: break-word; }
/* legacy inline fixed widths on wrappers */
.sbt-article [style*="width:"][style*="px"],
.sbt-text-block [style*="width:"][style*="px"] { max-width: 100% !important; }
/* legacy oversized inline font-sizes clamp down on phones */
@media (max-width: 600px) {
	.sbt-article [style*="font-size"],
	.sbt-text-block [style*="font-size"] { font-size: inherit !important; line-height: 1.6 !important; }
	.sbt-btn, .sbt-btn--cta { width: auto; max-width: 100%; }
}
/* === float layout + button text hardening (v2) === */
/* OptimizePress floated align=right/left media so body text wrapped beside it.
   The modal is position:fixed so it does not affect flow; only the trigger box
   participates in the float. Size the floated media by its own poster width but
   cap it, and let text wrap in the remaining space. */
@media (min-width: 782px){
  .sbt-article .sbt-lightbox.sbt-align-right,
  .sbt-article .sbt-video.sbt-align-right,
  .sbt-article .sbt-image.sbt-align-right{
    float:right !important;
    width:min(42%, 340px);
    margin:6px 0 22px 40px !important;
  }
  .sbt-article .sbt-lightbox.sbt-align-left,
  .sbt-article .sbt-video.sbt-align-left,
  .sbt-article .sbt-image.sbt-align-left{
    float:left !important;
    width:min(42%, 340px);
    margin:6px 40px 22px 0 !important;
  }
  /* Section separators here are sbt-divider elements (the "TOP" rules) and any
     real heading. Those clear the float so each section starts fresh. The bold
     paragraph "titles", the complete button and body copy all wrap beside it. */
  .sbt-article .sbt-divider,
  .sbt-article hr,
  .sbt-article h1,.sbt-article h2{ clear:both; }
  .sbt-article h3,
  .sbt-article p,
  .sbt-article .wpc-button,
  .sbt-article ul,.sbt-article ol{ clear:none; }
  /* text column min width */
  .sbt-article p{ overflow-wrap:break-word; }
  .sbt-article .sbt-divider{ margin-top:8px; }
}
@media (max-width: 781px){
  .sbt-article .sbt-lightbox,
  .sbt-article .sbt-video,
  .sbt-article .sbt-image{ float:none !important; width:100% !important; max-width:100% !important; margin-inline:0 !important; }
}

/* modal is fixed-position: never let it inherit the float box */
.sbt-lightbox .sbt-modal,
.sbt-popup .sbt-modal{ float:none; width:auto; }

/* Button text always white regardless of inherited link colour. */
.sbt-btn,
.sbt-btn:link,
.sbt-btn:visited,
.sbt-btn *,
.sbt-btn__text,
.sbt-btn__subtext{ color:#fff !important; text-decoration:none !important; }