/*
 * Camerce demo branding.
 *
 * Palette and type lifted from camerce.com on 4 Oct 2026.
 */

html:root {
	--cam-green: #123c33;
	--cam-green-deep: #0c2b24;
	--cam-green-mid: #1f3a34;
	--cam-green-soft: #24503f;
	--cam-gold: #f4c542;
	--cam-ink: #1d2421;
	--cam-muted: #5b7268;
	--cam-line: #dce8e2;
	--cam-wash: #f1f4f0;
	--cam-on-dark: #dce8e2;

	/* Impreza's own variables, re-pointed. */
	--color-content-bg: #ffffff;
	--color-content-bg-grad: #ffffff;
	--color-content-bg-alt: var(--cam-wash);
	--color-content-bg-alt-grad: var(--cam-wash);
	--color-content-border: var(--cam-line);
	--color-content-heading: var(--cam-green-deep);
	--color-content-heading-grad: var(--cam-green-deep);
	--color-content-text: var(--cam-ink);
	--color-content-link: var(--cam-green);
	--color-content-link-hover: var(--cam-green-soft);
	--color-content-primary: var(--cam-green);
	--color-content-primary-grad: var(--cam-green);
	--color-content-secondary: var(--cam-gold);
	--color-content-secondary-grad: var(--cam-gold);
	--color-content-faded: var(--cam-muted);

	--color-header-middle-bg: #ffffff;
	--color-header-middle-bg-grad: #ffffff;
	--color-header-middle-text: var(--cam-ink);
	--color-header-middle-text-hover: var(--cam-green);
	--color-header-transparent-text: #ffffff;
	--color-header-transparent-text-hover: var(--cam-gold);
}

/* ---------------------------------------------------------------- type --- */

/*
 * Impreza prints its own typography rules from the theme options after this
 * file, and several of them are more specific than a bare element selector.
 * Prefixing with `body` is enough to win without reaching for !important on
 * every line.
 */

body,
body input,
body select,
body textarea,
body button {
	font-family: "Public Sans", system-ui, -apple-system, sans-serif;
}

body {
	font-size: 17px;
	line-height: 1.65;
	color: var(--cam-ink);
	-webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body .w-btn, body .us-btn {
	font-family: "Bricolage Grotesque", "Public Sans", sans-serif;
}

body h1, body h2, body h3, body h4, body h5, body h6 {
	color: var(--cam-green-deep);
	font-weight: 800;
	letter-spacing: -0.022em;
	line-height: 1.12;
}

body h1 { font-size: clamp(2.4rem, 5.4vw, 3.9rem); }
body h2 { font-size: clamp(1.9rem, 3.6vw, 2.6rem); }
body h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

body p { color: var(--cam-ink); }

/* -------------------------------------------------------------- buttons --- */

/*
 * Every button on the demo is Impreza's style_1. The gold is the call to
 * action; anything that should read as secondary gets `cam-btn-ghost` in the
 * page content, which is why that class has to beat the style_1 rule too.
 */

body .w-btn.us-btn-style_1,
body a.w-btn.us-btn-style_1 {
	background: var(--cam-gold);
	color: var(--cam-ink);
	border-radius: 8px;
	font-weight: 600;
	letter-spacing: 0;
	padding: 0.9em 1.7em;
	box-shadow: none;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

body .w-btn.us-btn-style_1:hover,
body a.w-btn.us-btn-style_1:hover {
	background: #ffd45e;
	color: var(--cam-ink);
	transform: translateY(-1px);
	box-shadow: 0 12px 26px -16px rgba(12, 43, 36, 0.6);
}

body .w-btn.cam-btn-ghost,
body a.w-btn.cam-btn-ghost,
body .w-btn.us-btn-style_1.cam-btn-ghost,
body a.w-btn.us-btn-style_1.cam-btn-ghost {
	background: transparent;
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.45);
}

body .w-btn.cam-btn-ghost:hover,
body a.w-btn.cam-btn-ghost:hover,
body .w-btn.us-btn-style_1.cam-btn-ghost:hover,
body a.w-btn.us-btn-style_1.cam-btn-ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.8);
}

/* On a light section the ghost button needs the dark outline instead. */
body .l-section:not(.color_alternate) .w-btn.cam-btn-ghost,
body .l-section:not(.color_alternate) a.w-btn.cam-btn-ghost {
	color: var(--cam-green);
	box-shadow: inset 0 0 0 1.5px var(--cam-line);
}

body .l-section:not(.color_alternate) .w-btn.cam-btn-ghost:hover,
body .l-section:not(.color_alternate) a.w-btn.cam-btn-ghost:hover {
	background: var(--cam-wash);
	color: var(--cam-green-deep);
	box-shadow: inset 0 0 0 1.5px var(--cam-green-soft);
}

/* ------------------------------------------------------------- sections --- */

/* Any row the editor marked "alternate" becomes the dark brand band. */
body .l-section.color_alternate {
	background: var(--cam-green);
	color: var(--cam-on-dark);
}

body .l-section.color_alternate h1,
body .l-section.color_alternate h2,
body .l-section.color_alternate h3,
body .l-section.color_alternate h4 {
	color: #ffffff;
}

body .l-section.color_alternate p,
body .l-section.color_alternate li {
	color: var(--cam-on-dark);
}

body .l-section.color_alternate .w-btn.us-btn-style_secondary {
	color: #ffffff;
}

body .l-section.color_secondary {
	background: var(--cam-wash);
}

/* ---------------------------------------------------------------- cards --- */

/*
 * The card is built entirely from inline elements and turned into blocks here.
 * `vc_column_text` runs wpautop, and wpautop closes the surrounding paragraph
 * the moment it meets a block-level tag -- which closed the anchor too and
 * split every card into three separate boxes.
 */

.cam-card {
	display: block;
	height: 100%;
	padding: 26px 26px 24px;
	border: 1px solid var(--cam-line);
	border-radius: 14px;
	background: #ffffff;
	text-decoration: none;
	transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

body a.cam-card:hover {
	transform: translateY(-3px);
	border-color: var(--cam-green-soft);
	box-shadow: 0 14px 34px -22px rgba(12, 43, 36, 0.55);
}

.cam-card__tag {
	display: inline-block;
	margin-bottom: 14px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--cam-wash);
	color: var(--cam-green);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cam-card__tag--pro {
	background: var(--cam-gold);
	color: var(--cam-ink);
}

.cam-card__title {
	display: block;
	margin-bottom: 8px;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--cam-green-deep);
}

.cam-card__body {
	display: block;
	color: var(--cam-muted);
	font-size: 15.5px;
	line-height: 1.6;
}

.cam-card__watch {
	display: block;
	margin-top: 14px;
	color: var(--cam-green);
	font-weight: 600;
	font-size: 15px;
}

/* The anchor sits inside a wpautop paragraph; this keeps the grid tidy. */
.wpb_text_column p:has(> a.cam-card:only-child) {
	margin: 0;
}

/* --------------------------------------------------------------- eyebrow --- */

.cam-eyebrow {
	display: inline-block;
	margin-bottom: 14px;
	padding: 5px 13px;
	border-radius: 999px;
	background: rgba(244, 197, 66, 0.16);
	color: var(--cam-gold);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.l-section:not(.color_alternate) .cam-eyebrow {
	background: var(--cam-wash);
	color: var(--cam-green);
}

.cam-lede {
	font-size: 1.14rem;
	line-height: 1.6;
	color: var(--cam-muted);
}

body .l-section.color_alternate .cam-lede {
	color: var(--cam-on-dark);
}

/* ------------------------------------------------------------ demo notes --- */

.cam-note {
	margin: 0;
	padding: 18px 20px;
	border-left: 3px solid var(--cam-gold);
	border-radius: 0 10px 10px 0;
	background: var(--cam-wash);
	color: var(--cam-ink);
	font-size: 16px;
}

.cam-note strong {
	color: var(--cam-green-deep);
}

/* ------------------------------------------------------------- the popups --- */

.camerce-popups-campaign__panel {
	border-radius: 14px;
	font-family: "Public Sans", system-ui, sans-serif;
}

.camerce-popups-el--heading {
	font-family: "Bricolage Grotesque", sans-serif;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ misc --- */

.l-footer,
.l-footer a {
	color: var(--cam-on-dark);
}

@media (max-width: 767px) {
	body { font-size: 16px; }
	.cam-card { padding: 22px; }
}

/* --------------------------------------------------------- button labels --- */

/*
 * Impreza paints the label colour from the theme options with a rule that is
 * both later and more specific than anything reasonable here, and it is the
 * one thing that makes gold-on-gold unreadable, so this is the one place the
 * demo reaches for !important.
 */

body .w-btn.us-btn-style_1,
body a.w-btn.us-btn-style_1,
body .w-btn.us-btn-style_1 .w-btn-label,
body a.w-btn.us-btn-style_1 .w-btn-label {
	color: var(--cam-ink) !important;
}

body .w-btn.cam-btn-ghost,
body a.w-btn.cam-btn-ghost,
body .w-btn.cam-btn-ghost .w-btn-label,
body a.w-btn.cam-btn-ghost .w-btn-label {
	color: #ffffff !important;
}

body .l-section:not(.color_alternate) .w-btn.cam-btn-ghost,
body .l-section:not(.color_alternate) a.w-btn.cam-btn-ghost,
body .l-section:not(.color_alternate) .w-btn.cam-btn-ghost .w-btn-label,
body .l-section:not(.color_alternate) a.w-btn.cam-btn-ghost .w-btn-label {
	color: var(--cam-green) !important;
}

/* ----------------------------------------------------------- card grids --- */

.cam-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cam-stat {
	padding: 22px 24px;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.cam-stat__n {
	display: block;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 2.1rem;
	font-weight: 800;
	line-height: 1;
	color: var(--cam-gold);
	margin-bottom: 6px;
}

.cam-stat__l {
	display: block;
	font-size: 15px;
	color: var(--cam-on-dark);
}

.cam-checks {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 10px;
}

.cam-checks li {
	position: relative;
	padding-left: 28px;
	font-size: 16px;
}

.cam-checks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 14px;
	height: 8px;
	border-left: 2px solid var(--cam-gold);
	border-bottom: 2px solid var(--cam-gold);
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------- header --- */

body .l-header .w-nav-list .menu-item > a {
	font-size: 15px;
	font-weight: 500;
}

body .l-header .w-nav-anchor:not(.w-btn) {
	padding-left: 11px;
	padding-right: 11px;
}

body .l-header .w-nav-anchor.act,
body .l-header .menu-item.current-menu-item > a {
	color: var(--cam-green);
	font-weight: 600;
}

body .l-header .w-btn.us-btn-style_1 {
	padding: 0.7em 1.2em;
	font-size: 15px;
}

/* --------------------------------------------------------------- footer --- */

.cam-footer {
	background: var(--cam-green-deep);
	color: var(--cam-on-dark);
}

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

.cam-footer a:hover {
	color: var(--cam-gold);
}

.cam-footer h3,
.cam-footer h4 {
	color: #ffffff;
	font-size: 1rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin: 0 0 14px;
}

.cam-footer p,
.cam-footer li {
	color: var(--cam-on-dark);
	font-size: 15px;
}

.cam-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 9px;
}

.cam-footer__wordmark {
	display: block;
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 1.3rem;
	font-weight: 800;
	color: #ffffff;
	margin-bottom: 10px;
}

.cam-footer__legal {
	margin-top: 10px;
	padding-top: 22px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 14px;
	color: #9fb3a9;
}

/* ------------------------------------------------- top bar vs the header --- */

/*
 * The campaign bar is fixed to the top of the window and so is Impreza's
 * header, so on the two bar demos they sat on top of each other. Push the
 * header (and the page under it) down by the bar's height while one is open.
 * `:has()` keeps this to the pages that actually have a bar.
 */
body:has(.camerce-popups-campaign--bar.camerce-popups-campaign--pos-top.is-open) .l-header {
	top: var(--cam-bar-h, 64px);
}

body:has(.camerce-popups-campaign--bar.camerce-popups-campaign--pos-top.is-open) .l-canvas {
	padding-top: var(--cam-bar-h, 64px);
}

/* The bar itself, on brand. */
.camerce-popups-campaign--bar .camerce-popups-campaign__panel {
	padding-top: 12px;
	padding-bottom: 12px;
	border-radius: 0;
}

/* --------------------------------------------------------- card spacing --- */

/*
 * Each demo card is its own `vc_column`, and Impreza gives every row a
 * generous vertical rhythm meant for full-width sections. Between two rows of
 * cards that reads as a gap rather than a grid, so the card rows are pulled in
 * close and the cards are allowed to size themselves.
 */
.l-section.cam-cards {
	padding-top: 0;
	padding-bottom: 0;
}

.l-section.cam-cards .l-section-h {
	padding-top: 0;
	padding-bottom: 0;
}

.l-section.cam-cards .vc_column-inner {
	padding-bottom: 20px;
}

.l-section.cam-cards .wpb_text_column,
.l-section.cam-cards .wpb_text_column p {
	margin: 0;
}

.l-section.cam-cards + .l-section.cam-cards {
	margin-top: 0;
}

/* ------------------------------------------------- buttons in a campaign --- */

/*
 * The plugin paints its primary button from the campaign's own accent, which
 * on the dark bars came out white. Gold is the brand's call to action, so the
 * demo states it here rather than hand-setting a colour on every campaign.
 */
.camerce-popups-btn--primary {
	background: var(--cam-gold) !important;
	color: var(--cam-ink) !important;
	border-radius: 8px;
	font-weight: 600;
}

.camerce-popups-btn--primary:hover {
	background: #ffd45e !important;
	color: var(--cam-ink) !important;
}

/* The quiet decline, which was too faint to read. */
.camerce-popups-el--close .camerce-popups-btn,
.camerce-popups-el--close button {
	color: var(--cam-muted);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.camerce-popups-campaign--mat .camerce-popups-el--close .camerce-popups-btn,
.camerce-popups-campaign--mat .camerce-popups-el--close button {
	color: rgba(255, 255, 255, 0.72);
}

/* Inputs need to read as inputs against a tinted panel. */
.camerce-popups-campaign input[type="email"],
.camerce-popups-campaign input[type="text"],
.camerce-popups-campaign input[type="tel"] {
	background: #ffffff;
	border: 1px solid var(--cam-line);
	border-radius: 8px;
}

.camerce-popups-campaign input[type="email"]:focus,
.camerce-popups-campaign input[type="text"]:focus,
.camerce-popups-campaign input[type="tel"]:focus {
	border-color: var(--cam-green-soft);
	outline: 2px solid rgba(18, 60, 51, 0.18);
	outline-offset: 1px;
}