/* EzMe site-wide finish: flat colour (no gradients) and one button system,
   matching the product page. Loaded on every page (inc/ezme-product.php). */

:root {
	--ez-ink: #231f55;
	--ez-ink-hover: #2f2a6e;
	--ez-ink-soft: #4a4672;
	--ez-muted: #5f5b7d;
	--ez-accent: #ad83b4;
	--ez-accent-strong: #7d5287;
	--ez-surface: #f6f5fa;
	--ez-surface-2: #eeebf5;
	--ez-line: #e3dfed;
	--ez-ok: #2f7a55;
	--ez-r-lg: 16px;
	--ez-r: 12px;
	--ez-r-sm: 10px;
	--ez-shadow: 0 1px 2px rgba(35, 31, 85, .06), 0 10px 28px -12px rgba(35, 31, 85, .22);
	--ez-out: cubic-bezier(.23, 1, .32, 1);

	/* Bootstrap draws every gradient from this one variable. */
	--bs-gradient: none;
}

::selection { background: var(--ez-accent); color: #fff; }

/* ---------- Typography: Roboto, one scale ----------
   display-xl  hero titles            clamp 2.75 → 4.5rem
   display     page/section titles    clamp 2.125 → 3rem
   h2          section headings       clamp 1.75 → 2.375rem
   h3          sub headings           1.25rem
   lead        intro text             1.1875rem
   body        everything else        1.0625rem
   small       meta, labels           .875rem
   Weights: 400 body, 500 headings/emphasis (the only two loaded). */

:root {
	--ez-font: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
	--ez-fs-display-xl: clamp(2.75rem, 1.9rem + 3.4vw, 4.5rem);
	--ez-fs-display: clamp(2.125rem, 1.6rem + 2vw, 3rem);
	--ez-fs-h2: clamp(1.75rem, 1.35rem + 1.5vw, 2.375rem);
	--ez-fs-h3: 1.25rem;
	--ez-fs-lead: 1.1875rem;
	--ez-fs-body: 1.0625rem;
	--ez-fs-small: .875rem;
	--bs-body-font-family: var(--ez-font);
	--bs-font-sans-serif: var(--ez-font);
}

body {
	font-family: var(--ez-font);
	font-size: var(--ez-fs-body);
	line-height: 1.6;
	color: var(--ez-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
button, input, select, textarea, .btn, .form-control,
[class*="wc-block"], [class*="wp-block"], .elementor-widget-container,
.elementor-heading-title { font-family: var(--ez-font) !important; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: var(--ez-font);
	font-weight: 500 !important;
	color: inherit;
	letter-spacing: -.02em;
	line-height: 1.15;
	text-wrap: balance;
}
h1, .h1, .display-1, .display-2, .display-3 {
	font-size: var(--ez-fs-display-xl) !important;
	letter-spacing: -.035em;
	line-height: 1.02;
}
.display-4, .display-5, .display-6 {
	font-size: var(--ez-fs-display) !important;
	font-weight: 500 !important;
	letter-spacing: -.03em;
	line-height: 1.06;
}
h2, .h2 { font-size: var(--ez-fs-h2); }
h3, .h3 { font-size: var(--ez-fs-h3); letter-spacing: -.01em; line-height: 1.3; }
h4, .h4, h5, .h5, h6, .h6 { font-size: var(--ez-fs-body); letter-spacing: 0; line-height: 1.4; }

/* LiveCanvas responsive sizes and Bootstrap fs-* utilities collapse onto the scale */
[class*="rfs-"] { font-size: var(--ez-fs-lead) !important; }
.rfs-15, .rfs-16, .rfs-17, .rfs-18, .rfs-19, .rfs-20 { font-size: var(--ez-fs-h2) !important; }
.rfs-25, .rfs-26, .rfs-27, .rfs-28, .rfs-29, .rfs-30,
.rfs-35, .rfs-40, .rfs-45, .rfs-50 { font-size: var(--ez-fs-display) !important; }
.fs-1 { font-size: var(--ez-fs-h2) !important; }
.fs-2, .fs-3 { font-size: var(--ez-fs-h3) !important; }
.fs-4, .fs-5 { font-size: var(--ez-fs-lead) !important; }
.fs-6 { font-size: var(--ez-fs-body) !important; }
.elementor-heading-title { font-size: var(--ez-fs-h2) !important; font-weight: 500 !important; line-height: 1.15 !important; }

.lead { font-size: var(--ez-fs-lead); font-weight: 400; line-height: 1.55; }
small, .small, .woocommerce-breadcrumb { font-size: var(--ez-fs-small); }

/* Only 400 and 500 are loaded: stop faux-bold */
b, strong, .fw-bold, .fw-bolder, .fw-semibold, th { font-weight: 500 !important; }
.fw-light, .fw-lighter { font-weight: 400 !important; }

p { max-width: 72ch; }
.text-center p, p.text-center, .text-center > p { margin-inline: auto; }
a { text-underline-offset: .18em; }

/* ---------- No gradients ---------- */

.bg-gradient,
.btn,
#lc-header .bg-primary { background-image: none !important; }

/* ---------- Header ---------- */

#lc-header .bg-primary { background-color: var(--ez-ink) !important; }
#lc-header .navbar { padding-block: 12px; }
#lc-header .navbar-nav .nav-link {
	color: rgba(255, 255, 255, .82) !important;
	font-weight: 500;
	position: relative;
	transition: color 150ms ease;
}
@media (hover: hover) and (pointer: fine) {
	#lc-header .navbar-nav .nav-link:hover { color: #fff !important; opacity: 1; }
}
@media (min-width: 992px) {
	#lc-header .navbar-nav .current-menu-item > .nav-link,
	#lc-header .navbar-nav .current_page_item > .nav-link { color: #fff !important; }
	#lc-header .navbar-nav .current-menu-item > .nav-link::after,
	#lc-header .navbar-nav .current_page_item > .nav-link::after {
		content: "";
		position: absolute;
		left: var(--bs-navbar-nav-link-padding-x, .5rem);
		right: var(--bs-navbar-nav-link-padding-x, .5rem);
		bottom: -2px;
		height: 2px;
		border-radius: 2px;
		background: var(--ez-accent);
	}
}
#lc-header .navbar-toggler { border-color: rgba(255, 255, 255, .25); border-radius: var(--ez-r-sm); }
#lc-header .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(173, 131, 180, .5); }

/* ---------- Buttons: one system everywhere ---------- */

.btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.wp-block-button__link,
.wc-block-components-button:not(.is-link),
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	border-radius: var(--ez-r-sm) !important;
	border: 1.5px solid var(--ez-ink);
	background-color: var(--ez-ink);
	color: #fff;
	font-family: inherit;
	font-size: var(--ez-fs-body);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	transition: transform 160ms var(--ez-out), background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}

.btn:active,
.woocommerce a.button:active,
.woocommerce button.button:active,
.wp-block-button__link:active,
.wc-block-components-button:not(.is-link):active { transform: scale(.97); }

.btn:focus-visible,
.woocommerce a.button:focus-visible,
.woocommerce button.button:focus-visible,
.wp-block-button__link:focus-visible,
.wc-block-components-button:focus-visible {
	outline: 2px solid var(--ez-accent-strong);
	outline-offset: 3px;
	box-shadow: none;
}

.btn-sm { min-height: 38px; padding: 0 16px; font-size: .9375rem; }
.btn-lg { min-height: 56px; padding: 0 28px !important; font-size: 1.0625rem; }

/* Solid: primary, dark, WooCommerce main actions */
.btn-primary,
.btn-dark,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce #place_order,
.woocommerce a.checkout-button {
	background-color: var(--ez-ink) !important;
	border-color: var(--ez-ink) !important;
	color: #fff !important;
}

/* Outline: every outline variant and secondary */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-dark,
.btn-secondary,
.wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent !important;
	border-color: var(--ez-ink) !important;
	color: var(--ez-ink) !important;
}

/* Light: on indigo backgrounds (header "Kjøp", dark bands) */
.btn-light,
.btn-outline-light {
	background-color: #fff !important;
	border-color: #fff !important;
	color: var(--ez-ink) !important;
}

@media (hover: hover) and (pointer: fine) {
	.btn-primary:hover,
	.btn-dark:hover,
	.woocommerce a.button:hover,
	.woocommerce button.button:hover,
	.woocommerce a.button.alt:hover,
	.woocommerce button.button.alt:hover,
	.wp-block-button__link:hover,
	.wc-block-components-button:not(.is-link):hover {
		background-color: var(--ez-ink-hover) !important;
		border-color: var(--ez-ink-hover) !important;
		color: #fff !important;
	}
	.btn-outline-primary:hover,
	.btn-outline-secondary:hover,
	.btn-outline-dark:hover,
	.btn-secondary:hover,
	.wp-block-button.is-style-outline > .wp-block-button__link:hover {
		background-color: var(--ez-ink) !important;
		color: #fff !important;
	}
	.btn-light:hover,
	.btn-outline-light:hover {
		background-color: var(--ez-surface-2) !important;
		border-color: var(--ez-surface-2) !important;
		color: var(--ez-ink) !important;
	}
}

.btn:disabled,
.btn.disabled,
.woocommerce button.button:disabled,
.woocommerce button.button.disabled {
	opacity: .45;
	transform: none;
	cursor: not-allowed;
}

/* Header "Kjøp": a little tighter so the bar stays slim */
#lc-header .btn-light { min-height: 40px; padding: 0 18px; }

@media (prefers-reduced-motion: reduce) {
	.btn:active,
	.woocommerce a.button:active,
	.woocommerce button.button:active,
	.wp-block-button__link:active,
	.wc-block-components-button:not(.is-link):active { transform: none; }
}

/* ---------- Home hero ---------- */

body.home #theme-main > section:first-child h1 { text-transform: lowercase; margin-bottom: 0; }
body.home #theme-main > section:first-child h1::first-letter { text-transform: uppercase; }
body.home .ezme-hero-lead {
	font-size: var(--ez-fs-lead) !important;
	line-height: 1.55;
	color: var(--ez-ink-soft);
	max-width: 38ch;
	margin: 20px 0 0;
	text-wrap: pretty;
}
body.home #theme-main > section:first-child .lc-block.mb-5 { margin-bottom: 32px !important; }
body.home #theme-main > section:first-child .lc-block.mb-6 {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 0 !important;
}
body.home #theme-main > section:first-child .lc-block.mb-6 .btn { margin: 0 !important; padding: 0 26px !important; }
body.home .ezme-hero-points {
	flex-basis: 100%;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	padding: 0;
	margin: 22px 0 0;
	color: var(--ez-ink-soft);
	font-size: var(--ez-fs-small);
	font-weight: 500;
}
body.home .ezme-hero-points li { display: inline-flex; align-items: center; gap: 8px; }
body.home .ezme-hero-points svg { color: var(--ez-ok); }
body.home .ezme-hero-app {
	font-size: var(--ez-fs-small) !important;
	color: var(--ez-muted);
	margin: 44px 0 12px;
	padding-top: 24px;
	border-top: 1px solid var(--ez-line);
	max-width: 420px;
}
body.home .ezme-badge { min-height: 52px; padding: 0 18px !important; margin-bottom: 0 !important; }
body.home .ezme-badge img { width: 124px; height: 36px; object-fit: contain; }
@media (max-width: 991.98px) {
	body.home .ezme-hero-lead, body.home .ezme-hero-app { margin-inline: auto; }
	body.home #theme-main > section:first-child .lc-block.mb-6,
	body.home .ezme-hero-points { justify-content: center; }
}

body.home .ezme-hero-media { position: relative; }
body.home .ezme-hero-alert {
	position: absolute;
	z-index: 2;
	left: 16%;
	bottom: 12%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 18px 14px 16px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 2px 4px rgba(20, 16, 50, .08), 0 18px 40px -12px rgba(20, 16, 50, .45);
	color: var(--ez-ink);
	line-height: 1.3;
}
body.home .ezme-hero-alert strong { display: block; font-weight: 500; font-size: var(--ez-fs-small); }
body.home .ezme-hero-alert span { display: block; font-size: var(--ez-fs-small); color: var(--ez-muted); font-variant-numeric: tabular-nums; }
body.home .ezme-hero-alert__dot {
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #c8364b;
	flex: none;
}
body.home .ezme-hero-alert__dot::after {
	content: "";
	position: absolute;
	inset: -5px;
	border-radius: 50%;
	border: 2px solid #c8364b;
	opacity: 0;
}
@media (max-width: 991.98px) {
	body.home .ezme-hero-alert { left: 16px; bottom: 16px; padding: 10px 14px; }
}

/* ---------- Motion ---------- */
/* Hero entrance: CSS animations, so it stays smooth while the page loads. */

@keyframes ezme-up { from { opacity: 0; transform: translateY(14px); } }
@keyframes ezme-pop-in { from { opacity: 0; transform: translateY(10px) scale(.96); } }
@keyframes ezme-ping { 0% { opacity: .6; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes ezme-fade { from { opacity: 0; } }
@keyframes ezme-wipe {
	from { clip-path: polygon(100% 0%, 100% 0%, 100% 99%, 100% 110%); }
	to   { clip-path: polygon(25% 0%, 100% 0%, 100% 99%, 0% 110%); }
}

body.home #theme-main > section:first-child .ezme-hero-media img {
	animation: ezme-wipe 1000ms cubic-bezier(.77, 0, .175, 1) both;
}
body.home #theme-main > section:first-child .col-lg-6 > .lc-block { animation: ezme-up 600ms var(--ez-out) both; }
body.home #theme-main > section:first-child .col-lg-6 > .lc-block:nth-child(1) { animation-delay: 120ms; }
body.home #theme-main > section:first-child .col-lg-6 > .lc-block:nth-child(2) { animation-delay: 180ms; }
body.home #theme-main > section:first-child .col-lg-6 > .lc-block:nth-child(3) { animation-delay: 240ms; }
body.home #theme-main > section:first-child .col-lg-6 > .lc-block:nth-child(4) { animation-delay: 300ms; }
body.home #theme-main > section:first-child .col-lg-6 > .lc-block:nth-child(5) { animation-delay: 360ms; }
body.home .ezme-hero-alert { animation: ezme-pop-in 450ms var(--ez-out) 950ms both; }
body.home .ezme-hero-alert__dot::after { animation: ezme-ping 1600ms var(--ez-out) 1500ms 2; }

/* Scroll reveal on marketing pages, once (js/ezme-site.js adds the classes). */

.ezme-motion .ezme-reveal {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity 600ms ease, transform 700ms var(--ez-out);
	transition-delay: var(--ez-d, 0ms);
}
.ezme-motion .ezme-reveal-media {
	clip-path: inset(0 0 100% 0 round 24px);
	transition: clip-path 800ms cubic-bezier(.77, 0, .175, 1);
	transition-delay: var(--ez-d, 0ms);
}
.ezme-motion .ezme-reveal[data-visible] { opacity: 1; transform: none; }
.ezme-motion .ezme-reveal-media[data-visible] { clip-path: inset(0 0 0 0 round 24px); }

/* Hover: small lift on cards, mouse only */
@media (hover: hover) and (pointer: fine) {
	body.home #theme-main .card { transition: transform 200ms var(--ez-out), box-shadow 200ms ease; }
	body.home #theme-main .card:hover { transform: translateY(-4px); box-shadow: var(--ez-shadow) !important; }
}

@media (prefers-reduced-motion: reduce) {
	body.home #theme-main > section:first-child .ezme-hero-media img { animation: none; }
	body.home #theme-main > section:first-child .col-lg-6 > .lc-block,
	body.home .ezme-hero-alert { animation: ezme-fade 300ms ease both; }
	body.home .ezme-hero-alert__dot::after { animation: none; }
	.ezme-motion .ezme-reveal { transform: none; transition: opacity 300ms ease; }
	.ezme-motion .ezme-reveal-media,
	.ezme-motion .ezme-reveal-media[data-visible] { clip-path: none; transition: none; }
	body.home #theme-main .card:hover { transform: none; }
}

/* ---------- Footer ---------- */

#lc-footer ul { list-style: none; padding: 0; margin: 0; }
#lc-footer .nav-link { color: var(--ez-ink-soft); font-size: var(--ez-fs-small); font-weight: 500; padding: 6px 10px; }
@media (hover: hover) and (pointer: fine) { #lc-footer .nav-link:hover { color: var(--ez-ink); } }
#lc-footer .text-muted { font-size: var(--ez-fs-small); color: var(--ez-muted) !important; }
#lc-footer svg { transition: transform 160ms var(--ez-out), color 150ms ease; }
@media (hover: hover) and (pointer: fine) { #lc-footer a:hover svg { transform: translateY(-2px); } }
@media (max-width: 767.98px) {
	#lc-footer > div > .container { flex-direction: column; gap: 20px; text-align: center; }
	#lc-footer > div > .container > [class*="col-"] { width: 100%; justify-content: center !important; }
	#lc-footer ul.d-grid { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 4px 6px !important; }
}

/* ---------- Form fields (contact, subscription, checkout, account) ---------- */

.form-control,
.form-select,
.woocommerce form .form-row .input-text,
.woocommerce form .form-row select,
.woocommerce-page form .form-row .input-text {
	min-height: 50px;
	padding: 12px 14px;
	border: 1.5px solid var(--ez-line);
	border-radius: var(--ez-r-sm);
	background-color: #fff;
	color: var(--ez-ink);
	font-size: var(--ez-fs-body);
	box-shadow: none;
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
textarea.form-control { min-height: 120px; }
.form-control::placeholder { color: #75718f; }
.form-control:focus,
.form-select:focus,
.woocommerce form .form-row .input-text:focus {
	border-color: var(--ez-ink);
	box-shadow: 0 0 0 3px rgba(173, 131, 180, .35);
	outline: none;
}
.form-group > label,
.woocommerce form .form-row label { font-size: var(--ez-fs-small); font-weight: 500; color: var(--ez-ink); margin-bottom: 6px; }