/**
 * Fenek Design System
 * Global styles for WordPress, Elementor and WooCommerce.
 *
 * The stylesheet deliberately avoids layout rules. It changes presentation
 * only, so existing Elementor sections and product grids keep their structure.
 */

:root {
	--fenek-font-heading: "Nunito", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
	--fenek-font-body: "Source Sans 3", "Segoe UI", Arial, sans-serif;

	--fenek-navy: #073b67;
	--fenek-navy-deep: #042d50;
	--fenek-orange: #f26a21;
	--fenek-action: #c94b12;
	--fenek-action-hover: #b83f08;
	--fenek-action-active: #963205;
	--fenek-yellow: #ffd857;
	--fenek-yellow-hover: #ffc928;
	--fenek-yellow-active: #f2b700;
	--fenek-teal: #006b68;
	--fenek-text: #213444;
	--fenek-muted: #576979;
	--fenek-border: #d6e3e8;
	--fenek-paper: #f6fafb;
	--fenek-cream: #fff7e4;
	--fenek-blue-soft: #e7f5fa;
	--fenek-green-soft: #e6f4ed;
	--fenek-error: #b42318;
	--fenek-visited: #5a3f78;
	--fenek-white: #ffffff;

	--fenek-radius-sm: 8px;
	--fenek-radius-md: 12px;
	--fenek-radius-lg: 20px;
	--fenek-shadow-focus: 0 0 0 4px rgba(255, 216, 87, 0.55);
	--fenek-transition: 160ms ease;
}

html {
	color: var(--fenek-text);
	font-family: var(--fenek-font-body);
	font-size: 100%;
	line-height: 1.6;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

body.fenek-design-system-active,
body.fenek-design-system-active input,
body.fenek-design-system-active textarea,
body.fenek-design-system-active select {
	color: var(--fenek-text);
	font-family: var(--fenek-font-body) !important;
	font-size: 1rem;
	line-height: 1.6;
}

body.fenek-design-system-active p,
body.fenek-design-system-active li,
body.fenek-design-system-active dd,
body.fenek-design-system-active dt,
body.fenek-design-system-active blockquote,
body.fenek-design-system-active .elementor-widget-text-editor {
	font-family: var(--fenek-font-body) !important;
}

body.fenek-design-system-active h1,
body.fenek-design-system-active h2,
body.fenek-design-system-active h3,
body.fenek-design-system-active h4,
body.fenek-design-system-active h5,
body.fenek-design-system-active h6,
body.fenek-design-system-active .elementor-heading-title,
body.fenek-design-system-active .woocommerce-loop-product__title,
body.fenek-design-system-active .product_title {
	font-family: var(--fenek-font-heading) !important;
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.15;
	text-wrap: balance;
}

body.fenek-design-system-active h1,
body.fenek-design-system-active h1.elementor-heading-title {
	font-size: clamp(2.35rem, 5vw, 4rem);
	line-height: 1.05;
}

body.fenek-design-system-active h2,
body.fenek-design-system-active h2.elementor-heading-title {
	font-size: clamp(2rem, 3.7vw, 3rem);
	line-height: 1.1;
}

body.fenek-design-system-active h3,
body.fenek-design-system-active h3.elementor-heading-title {
	font-size: clamp(1.55rem, 2.6vw, 2.125rem);
	line-height: 1.15;
}

body.fenek-design-system-active h4,
body.fenek-design-system-active h4.elementor-heading-title {
	font-size: clamp(1.3rem, 2vw, 1.75rem);
	line-height: 1.2;
}

body.fenek-design-system-active h5,
body.fenek-design-system-active h5.elementor-heading-title {
	font-size: clamp(1.125rem, 1.5vw, 1.375rem);
	line-height: 1.3;
}

body.fenek-design-system-active h6,
body.fenek-design-system-active h6.elementor-heading-title {
	font-size: 1rem;
	line-height: 1.35;
	letter-spacing: 0.01em;
}

body.fenek-design-system-active small,
body.fenek-design-system-active .small,
body.fenek-design-system-active .elementor-size-small {
	font-size: 0.875rem;
	line-height: 1.5;
}

body.fenek-design-system-active strong,
body.fenek-design-system-active b {
	font-weight: 700;
}

body.fenek-design-system-active .entry-content a:not(.elementor-button):not(.wp-element-button):not(.button),
body.fenek-design-system-active .elementor-widget-text-editor a:not(.elementor-button):not(.button) {
	color: var(--fenek-navy);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: rgba(7, 59, 103, 0.35);
	text-decoration-thickness: 0.1em;
	text-underline-offset: 0.18em;
	transition:
		color var(--fenek-transition),
		text-decoration-color var(--fenek-transition);
}

body.fenek-design-system-active .entry-content a:not(.elementor-button):not(.wp-element-button):not(.button):hover,
body.fenek-design-system-active .elementor-widget-text-editor a:not(.elementor-button):not(.button):hover {
	color: var(--fenek-action-hover);
	text-decoration-color: currentColor;
}

body.fenek-design-system-active .entry-content a:not(.elementor-button):not(.wp-element-button):not(.button):visited,
body.fenek-design-system-active .elementor-widget-text-editor a:not(.elementor-button):not(.button):visited {
	color: var(--fenek-visited);
}

body.fenek-design-system-active :where(
	.elementor-button,
	.wp-element-button,
	a.button,
	button.button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	input[type="submit"],
	button[type="submit"]
) {
	align-items: center;
	background: var(--fenek-action) !important;
	border: 0 !important;
	border-radius: var(--fenek-radius-md) !important;
	box-shadow: none;
	color: var(--fenek-white) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--fenek-font-heading) !important;
	font-size: 1rem;
	font-weight: 800;
	justify-content: center;
	letter-spacing: 0;
	line-height: 1.2;
	min-height: 48px;
	padding: 0.8rem 1.25rem;
	text-align: center;
	text-decoration: none;
	transition:
		background-color var(--fenek-transition),
		border-color var(--fenek-transition),
		color var(--fenek-transition),
		box-shadow var(--fenek-transition),
		transform var(--fenek-transition);
}

body.fenek-design-system-active :where(
	.elementor-button,
	.wp-element-button,
	a.button,
	button.button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	input[type="submit"],
	button[type="submit"]
):hover {
	background: var(--fenek-action-hover) !important;
	border-color: var(--fenek-action-hover) !important;
	color: var(--fenek-white) !important;
	transform: translateY(-1px);
}

body.fenek-design-system-active :where(
	.elementor-button,
	.wp-element-button,
	a.button,
	button.button,
	.woocommerce a.button,
	.woocommerce button.button,
	.woocommerce input.button,
	input[type="submit"],
	button[type="submit"]
):active {
	background: var(--fenek-action-active) !important;
	border-color: var(--fenek-action-active) !important;
	color: var(--fenek-white) !important;
	transform: translateY(0);
}

/*
 * Stronger border reset for WooCommerce and Elementor. Some theme rules use
 * more specific selectors than :where(), so the base reset above is not
 * sufficient on product and cart buttons.
 */
body.fenek-design-system-active .elementor-button,
body.fenek-design-system-active .wp-element-button,
body.fenek-design-system-active a.button,
body.fenek-design-system-active button.button,
body.fenek-design-system-active .woocommerce a.button,
body.fenek-design-system-active .woocommerce button.button,
body.fenek-design-system-active .woocommerce input.button,
body.fenek-design-system-active input[type="submit"],
body.fenek-design-system-active button[type="submit"] {
	border: 0 !important;
}

/*
 * Header integrations
 *
 * FiboSearch uses a triangular ::before notch on its submit button. The global
 * button border made that triangle and the Elementor cart outline visible as
 * two different colours. These narrowly scoped rules keep both controls clean
 * and consistent without changing buttons in page content.
 */
body.fenek-design-system-active .elementor-location-header .dgwt-wcas-search-submit {
	background: #e4032f !important;
	border: 0 !important;
	border-radius: 0 var(--fenek-radius-md) var(--fenek-radius-md) 0 !important;
	box-shadow: none !important;
	min-height: 50px;
	padding: 0 !important;
	transform: none !important;
	width: 50px;
}

body.fenek-design-system-active .elementor-location-header .dgwt-wcas-search-submit:hover,
body.fenek-design-system-active .elementor-location-header .dgwt-wcas-search-submit:active {
	background: #bf0028 !important;
	border: 0 !important;
	transform: none !important;
}

body.fenek-design-system-active .elementor-location-header .dgwt-wcas-search-submit::before {
	border: 0 !important;
	content: none !important;
	display: none !important;
}

body.fenek-design-system-active .elementor-location-header .dgwt-wcas-search-input {
	border: 1px solid #e5e5e5 !important;
	border-radius: var(--fenek-radius-md) !important;
	min-height: 50px;
	padding-right: 64px;
}

body.fenek-design-system-active .elementor-location-header a#elementor-menu-cart__toggle_button,
body.fenek-design-system-active .elementor-location-header .elementor-menu-cart__toggle_button {
    background: #e4032f !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.fenek-design-system-active .elementor-location-header a#elementor-menu-cart__toggle_button:hover,
body.fenek-design-system-active .elementor-location-header a#elementor-menu-cart__toggle_button:active,
body.fenek-design-system-active .elementor-location-header .elementor-menu-cart__toggle_button:hover,
body.fenek-design-system-active .elementor-location-header .elementor-menu-cart__toggle_button:active {
    background: #bf0028 !important;
    border: 0 !important;
}

body.fenek-design-system-active :where(
	a,
	button,
	input,
	textarea,
	select,
	summary,
	[tabindex]
):focus-visible {
	border-radius: max(4px, var(--fenek-radius-sm));
	box-shadow: var(--fenek-shadow-focus);
	outline: 3px solid var(--fenek-navy-deep);
	outline-offset: 3px;
}

body.fenek-design-system-active :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	textarea,
	select
) {
	background: var(--fenek-white);
	border: 1px solid var(--fenek-border);
	border-radius: var(--fenek-radius-sm);
	box-shadow: none;
	color: var(--fenek-text);
	min-height: 48px;
	padding: 0.75rem 0.875rem;
	transition:
		border-color var(--fenek-transition),
		box-shadow var(--fenek-transition);
	width: 100%;
}

body.fenek-design-system-active textarea {
	line-height: 1.55;
	min-height: 8rem;
	resize: vertical;
}

body.fenek-design-system-active :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	textarea,
	select
):hover {
	border-color: var(--fenek-muted);
}

body.fenek-design-system-active :where(
	input[type="text"],
	input[type="email"],
	input[type="tel"],
	input[type="url"],
	input[type="search"],
	input[type="number"],
	input[type="password"],
	textarea,
	select
):focus {
	border-color: var(--fenek-navy);
}

body.fenek-design-system-active ::placeholder {
	color: var(--fenek-muted);
	opacity: 1;
}

body.fenek-design-system-active label {
	color: var(--fenek-text);
	font-family: var(--fenek-font-heading);
	font-weight: 700;
	line-height: 1.4;
}

body.fenek-design-system-active .woocommerce-error,
body.fenek-design-system-active .woocommerce-invalid label,
body.fenek-design-system-active .elementor-message-danger {
	color: var(--fenek-error);
}

body.fenek-design-system-active img {
	height: auto;
}

/* The libraries landing hero uses a navy background and a yellow accent span. */
body.fenek-design-system-active.fenek-biblioteki-page .hero h1 {
	color: #ffffff;
}

@media (max-width: 980px) {
	body.fenek-design-system-active {
		font-size: 1rem;
	}

	body.fenek-design-system-active :where(
		.elementor-button,
		.wp-element-button,
		a.button,
		button.button,
		.woocommerce a.button,
		.woocommerce button.button,
		.woocommerce input.button,
		input[type="submit"],
		button[type="submit"]
	) {
		min-height: 48px;
	}
}

@media (max-width: 720px) {
	body.fenek-design-system-active,
	body.fenek-design-system-active input,
	body.fenek-design-system-active textarea,
	body.fenek-design-system-active select {
		font-size: 1rem;
		line-height: 1.65;
	}

	body.fenek-design-system-active h1,
	body.fenek-design-system-active h1.elementor-heading-title {
		font-size: clamp(2.1rem, 10vw, 2.75rem);
	}

	body.fenek-design-system-active h2,
	body.fenek-design-system-active h2.elementor-heading-title {
		font-size: clamp(1.75rem, 8vw, 2.25rem);
	}

	body.fenek-design-system-active h3,
	body.fenek-design-system-active h3.elementor-heading-title {
		font-size: clamp(1.4rem, 6vw, 1.75rem);
	}

	body.fenek-design-system-active :where(
		.elementor-button,
		.wp-element-button,
		a.button,
		button.button,
		.woocommerce a.button,
		.woocommerce button.button,
		.woocommerce input.button,
		input[type="submit"],
		button[type="submit"]
	) {
		min-height: 50px;
		padding: 0.85rem 1.1rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.fenek-design-system-active *,
	body.fenek-design-system-active *::before,
	body.fenek-design-system-active *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}