/**
 * Invoxa base styles: self-hosted fonts, accessibility helpers, motion states,
 * and the minimal fallback chrome used when no Theme Builder template exists.
 * Colours, sizes and spacing come from tokens.css only.
 */

/* ---------- Fonts (Lato 400/700/900, latin + latin-ext; OFL: assets/fonts/OFL.txt) ---------- */
@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lato-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lato-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato-latin-900.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/lato-latin-ext-400.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/lato-latin-ext-700.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Lato";
	font-style: normal;
	font-weight: 900;
	font-display: swap;
	src: url("../fonts/lato-latin-ext-900.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* "Invoxa Mono" (R3): a named face that resolves to the platform monospace. */
@font-face {
	font-family: "Invoxa Mono";
	font-weight: 400;
	src: local("Monaco"), local("Menlo-Regular"), local("Consolas"), local("Courier New");
}

@font-face {
	font-family: "Invoxa Mono";
	font-weight: 700;
	src: local("Menlo-Bold"), local("Consolas Bold"), local("Consolas-Bold"), local("Courier New Bold"), local("CourierNewPS-BoldMT");
}

/* ---------- Base ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Clip on both: with html left visible, body's overflow is propagated to the
 * viewport and off-screen entrance offsets (Slide Left/Right) still widen the page. */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	background-color: var(--ix-page);
	color: var(--ix-neutral-600);
	font-family: var(--ix-body-family);
	font-size: var(--ix-body-size);
	line-height: var(--ix-body-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

/* Lucide icons are stroke-only. Elementor's icon widgets set `fill` on SVGs,
 * so keep the fill off and let the stroke follow the widget's colour. */
svg.ix-icon:not(.ix-icon--fill),
svg.ix-icon:not(.ix-icon--fill) * {
	fill: none !important;
	stroke: currentColor;
}

svg.ix-icon--fill,
svg.ix-icon--fill * {
	fill: currentColor !important;
	stroke: none;
}

/* Paragraphs inside Text Editor widgets: spacing between widgets comes from the layout, not trailing margins. */
.elementor-widget-text-editor p:first-child {
	margin-top: 0;
}

.elementor-widget-text-editor p:last-child {
	margin-bottom: 0;
}

/* Tabular figures wherever numbers count or align. */
.ix-num,
[data-ix-count] {
	font-variant-numeric: tabular-nums;
}

/* ---------- Accessibility ---------- */
:focus-visible {
	outline: none;
	box-shadow: var(--ix-focus-ring);
	border-radius: var(--ix-radius);
}

/* Skip-link target: focus moves here programmatically; no ring around the whole page. */
.ix-main:focus,
.ix-fallback-main:focus {
	box-shadow: none;
}

.screen-reader-text,
.ix-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ix-skip-link {
	position: absolute;
	top: var(--ix-space-2);
	left: var(--ix-space-2);
	z-index: 100000;
	padding: var(--ix-space-3) var(--ix-space-5);
	background: var(--ix-surface);
	color: var(--ix-primary-500);
	border-radius: var(--ix-radius-pill);
	font-weight: 700;
	transform: translateY(-200%);
	transition: transform var(--ix-dur-xs) var(--ix-ease-out);
}

.ix-skip-link:focus {
	transform: none;
}

/* ---------- Invoxa Motion states ----------
 * html.ix-js is set by an inline head script. .ix-motion-ready is added only
 * when motion can run (not reduced, not the editor) and removed again if the
 * motion runtime has not booted within 3 s, so nothing stays hidden.
 */
.ix-motion-ready .ix-m-in:not(.ix-m-live),
.ix-motion-ready [data-ix-hide]:not(.ix-m-live) {
	opacity: 0;
}

/* Motion switched off for a device: never hidden there (matches the Kit breakpoints 767 / 1024). */
@media (max-width: 767px) {
	.ix-motion-ready .ix-m-off-mobile.ix-m-in:not(.ix-m-live),
	.ix-motion-ready .ix-m-off-mobile[data-ix-hide]:not(.ix-m-live) {
		opacity: 1;
	}
}

@media (min-width: 768px) and (max-width: 1024px) {
	.ix-motion-ready .ix-m-off-tablet.ix-m-in:not(.ix-m-live),
	.ix-motion-ready .ix-m-off-tablet[data-ix-hide]:not(.ix-m-live) {
		opacity: 1;
	}
}

.ix-m-h-lift,
.ix-m-h-glow {
	transition: box-shadow var(--ix-dur-sm) var(--ix-ease-out), filter var(--ix-dur-sm) var(--ix-ease-out);
}

.e-con.ix-m-h-lift.is-ix-hover {
	box-shadow: var(--ix-shadow-md);
}

.ix-m-h-glow.is-ix-hover {
	filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--ix-primary-500) 28%, transparent));
}

@media (prefers-reduced-motion: reduce) {
	.ix-motion-ready .ix-m-in:not(.ix-m-live),
	.ix-motion-ready [data-ix-hide]:not(.ix-m-live) {
		opacity: 1;
	}

	.ix-skip-link,
	.ix-m-h-lift,
	.ix-m-h-glow {
		transition: none;
	}
}

/* ---------- Fallback chrome (header.php / footer.php when no Theme Builder template) ---------- */
.ix-fallback-header,
.ix-fallback-footer {
	padding: var(--ix-space-5) var(--ix-gutter);
}

.ix-fallback-header__inner,
.ix-fallback-footer__inner,
.ix-fallback-main {
	max-width: var(--ix-content);
	margin: 0 auto;
}

.ix-fallback-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ix-space-4);
}

.ix-fallback-header__brand {
	color: var(--ix-neutral-900);
	font-family: var(--ix-plan-title-family);
	font-size: var(--ix-plan-title-size);
	font-weight: var(--ix-plan-title-weight);
	text-decoration: none;
}

.ix-fallback-header ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ix-space-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ix-fallback-header a {
	color: var(--ix-neutral-900);
}

.ix-fallback-main {
	padding: var(--ix-section-y) var(--ix-gutter);
}

.ix-fallback-footer {
	background: var(--ix-footer);
	color: var(--ix-footer-text);
	font-size: var(--ix-body-small-size);
}

.ix-fallback-footer a {
	color: var(--ix-footer-text);
}

/* Utility for containers drawn as soft white cards (Settings sections). Add the
   class in Advanced → CSS Classes; background, radius and padding stay container settings. */
.ix-shadow-card {
	box-shadow: var(--ix-shadow-card);
}

/* Legal pages: long-form text inside a Text Editor widget (Advanced → CSS Classes: ix-legal).
   Doubled class beats the Kit's heading styles. */
.ix-legal.ix-legal h2 {
	margin: var(--ix-space-8) 0 var(--ix-space-3);
	color: var(--ix-neutral-900);
	font-family: var(--ix-h3-card-family);
	font-size: var(--ix-plan-title-size);
	font-weight: 700;
	line-height: 1.3;
}

.ix-legal.ix-legal h2:first-child {
	margin-top: 0;
}

.ix-legal.ix-legal p {
	margin: 0 0 var(--ix-space-4);
	line-height: 1.7;
}

.ix-legal.ix-legal a {
	color: var(--ix-eyebrow);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Docs and how-to pages reuse .ix-legal and add lists, code, tables and tips. */
.ix-legal.ix-legal h3 {
	margin: var(--ix-space-6) 0 var(--ix-space-2);
	color: var(--ix-neutral-900);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.35;
}

.ix-legal.ix-legal :is(ol, ul) {
	margin: 0 0 var(--ix-space-4);
	padding-left: 1.4em;
	line-height: 1.7;
}

.ix-legal.ix-legal li + li {
	margin-top: var(--ix-space-2);
}

.ix-legal.ix-legal code {
	padding: 0.1em 0.35em;
	border-radius: 6px;
	background: var(--ix-neutral-100);
	color: var(--ix-neutral-900);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
	overflow-wrap: anywhere;
}

.ix-legal.ix-legal pre {
	margin: 0 0 var(--ix-space-4);
	padding: var(--ix-space-4);
	border-radius: 12px;
	background: var(--ix-neutral-900);
	overflow-x: auto;
}

.ix-legal.ix-legal pre code {
	padding: 0;
	background: none;
	color: #f8fafc;
	white-space: pre;
	overflow-wrap: normal;
}

.ix-legal.ix-legal table {
	display: block;
	width: 100%;
	margin: 0 0 var(--ix-space-4);
	border-collapse: collapse;
	overflow-x: auto;
	font-size: 0.95em;
}

.ix-legal.ix-legal :is(th, td) {
	padding: var(--ix-space-2) var(--ix-space-3);
	border-bottom: 1px solid var(--ix-neutral-200);
	text-align: left;
	vertical-align: top;
}

.ix-legal.ix-legal th {
	color: var(--ix-neutral-900);
	font-weight: 700;
}

.ix-legal.ix-legal .ix-note {
	padding: var(--ix-space-3) var(--ix-space-4);
	border: 1px solid var(--ix-neutral-200);
	border-radius: 12px;
	background: var(--ix-neutral-50);
}

.ix-guide-video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 16px;
	background: var(--ix-neutral-900);
	box-shadow: var(--ix-shadow-card);
}

/* Cookie Notice plugin banner: brand type and buttons. Its colours are inline styles, hence !important.
   The plugin's close (×) records "accept" while labelled "Decline", so it is hidden: choices stay explicit. */
#cookie-notice {
	font-family: var(--ix-body-family, Lato, "Segoe UI", system-ui, sans-serif);
}

#cookie-notice .cn-text-container {
	font-size: 15px;
	line-height: 1.5;
}

#cookie-notice .cn-close-icon {
	display: none;
}

#cookie-notice .cn-button {
	margin: 4px 6px;
	padding: 9px 18px;
	border-radius: 999px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.2;
}

#cookie-notice #cn-refuse-cookie,
#cookie-notice #cn-more-info {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.55);
	color: #fff;
}

#cookie-notice .cn-button:focus-visible {
	outline: 2px solid #c6b3fc;
	outline-offset: 2px;
}

/* Fluent Forms contact form (inside the .ix-contact card): match the theme's fields and buttons.
   Doubled classes beat Fluent Forms' own stylesheet. */
.ix-contact.ix-contact .fluentform .ff-el-group {
	margin-bottom: var(--ix-space-5);
}

.ix-contact.ix-contact .fluentform .ff-el-input--label label {
	color: var(--ix-neutral-900);
	font-family: var(--ix-body-family);
	font-size: var(--ix-body-small-size);
	font-weight: 700;
}

.ix-contact.ix-contact .fluentform .ff-el-form-control {
	min-height: 48px;
	padding: var(--ix-space-3) var(--ix-space-4);
	border: 1px solid transparent;
	border-radius: var(--ix-radius-field);
	background-color: var(--ix-page-alt);
	color: var(--ix-neutral-900);
	font-family: var(--ix-body-family);
	font-size: var(--ix-body-size);
	box-shadow: none;
}

.ix-contact.ix-contact .fluentform .ff-el-form-control::placeholder {
	color: var(--ix-neutral-500);
	opacity: 1;
}

.ix-contact.ix-contact .fluentform .ff-el-form-control:focus {
	border-color: var(--ix-primary-400);
	background-color: var(--ix-surface);
	outline: none;
	box-shadow: var(--ix-focus-ring);
}

.ix-contact.ix-contact .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--ix-alert-text);
}

.ix-contact.ix-contact .fluentform .error.text-danger {
	color: var(--ix-alert-text);
	font-size: var(--ix-caption-size);
	font-weight: 700;
}

.ix-contact.ix-contact .fluentform .ff-btn-submit {
	min-height: 48px;
	padding: 0 var(--ix-space-6);
	border: 0;
	border-radius: var(--ix-radius-pill);
	background-color: var(--ix-primary-500);
	color: var(--ix-surface);
	font-family: var(--ix-body-family);
	font-size: var(--ix-body-size);
	font-weight: 700;
	cursor: pointer;
}

.ix-contact.ix-contact .fluentform .ff-btn-submit:hover {
	background-color: var(--ix-primary-400);
}

.ix-contact.ix-contact .fluentform .ff-btn-submit:focus-visible {
	outline: none;
	box-shadow: var(--ix-focus-ring);
}

.ix-contact .ff-message-success {
	padding: var(--ix-space-4);
	border: 0;
	border-radius: var(--ix-radius-md);
	background-color: var(--ix-teal-100);
	color: var(--ix-cat-client-text);
	font-weight: 700;
	box-shadow: none;
}