/* Al-Najah Site Polish
   Presentation only. Each block is switched on by its own body class, so a
   module that is off leaves the site exactly as the theme rendered it. Nothing
   here changes a brand colour, a layout or a piece of content: shadows, the
   theme's own radius variable, transitions, focus rings and dark-mode
   refinements only. */

:root {
	--px-ease: cubic-bezier(.2, .7, .2, 1);
	--px-shadow: 0 1px 2px rgba(27, 43, 59, .05), 0 14px 30px -16px rgba(27, 61, 110, .28);
	--px-lift: 0 2px 4px rgba(27, 43, 59, .06), 0 24px 44px -20px rgba(27, 61, 110, .38);
	--px-ring: rgba(42, 66, 105, .55);
}
html.evk-dark {
	--px-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 34px -18px rgba(0, 0, 0, .7);
	--px-lift: 0 2px 6px rgba(0, 0, 0, .5), 0 26px 48px -22px rgba(0, 0, 0, .8);
	--px-ring: rgba(157, 185, 228, .75);
}

/* ---- 1. Cards: depth and hover ----------------------------------------- */

.evk-px-cards .wd-product .product-wrapper,
.evk-px-cards .wd-post .article-inner,
.evk-px-cards .blog-post-loop .article-inner {
	border-radius: var(--wd-brd-radius, 12px);
	box-shadow: var(--px-shadow);
	transition: transform .4s var(--px-ease), box-shadow .4s var(--px-ease);
}
.evk-px-cards .wd-product .wd-product-thumb,
.evk-px-cards .wd-post .post-img-wrapp,
.evk-px-cards .blog-post-loop .post-img-wrapp {
	border-radius: var(--wd-brd-radius, 12px);
	overflow: hidden;
}
.evk-px-cards .wd-product .wd-product-thumb img,
.evk-px-cards .wd-post .post-img-wrapp img,
.evk-px-cards .blog-post-loop .post-img-wrapp img {
	transition: transform .55s var(--px-ease);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.evk-px-cards .wd-product:hover .product-wrapper,
	.evk-px-cards .wd-post:hover .article-inner,
	.evk-px-cards .blog-post-loop:hover .article-inner {
		transform: translateY(-4px);
		box-shadow: var(--px-lift);
	}
	.evk-px-cards .wd-product:hover .wd-product-thumb img,
	.evk-px-cards .wd-post:hover .post-img-wrapp img,
	.evk-px-cards .blog-post-loop:hover .post-img-wrapp img {
		transform: scale(1.04);
	}
}

/* ---- 2. Buttons and links ---------------------------------------------- */

.evk-px-buttons .btn,
.evk-px-buttons .elementor-button,
.evk-px-buttons button:not(.wd-nav-opener):not(.mfp-close),
.evk-px-buttons [type="submit"] {
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .15s var(--px-ease);
}
@media (prefers-reduced-motion: no-preference) {
	.evk-px-buttons .btn:active,
	.evk-px-buttons .elementor-button:active,
	.evk-px-buttons [type="submit"]:active { transform: translateY(1px); }
}
/* One visible focus ring for keyboard users, in both modes. */
.evk-px-buttons a:focus-visible,
.evk-px-buttons button:focus-visible,
.evk-px-buttons [type="submit"]:focus-visible,
.evk-px-buttons input:focus-visible,
.evk-px-buttons select:focus-visible,
.evk-px-buttons textarea:focus-visible {
	/* The outline follows whatever radius the element already has, so a pill
	   button stays a pill while focused. */
	outline: 2px solid var(--px-ring);
	outline-offset: 2px;
}
.evk-px-buttons .wd-entities-title a,
.evk-px-buttons .wd-post .entry-title a { transition: color .25s ease; }

/* ---- 3. Sticky header --------------------------------------------------- */

.evk-px-header .whb-header { transition: box-shadow .35s ease, backdrop-filter .35s ease, background-color .35s ease; }
.evk-px-header.px-scrolled .whb-header,
.evk-px-header .whb-sticked {
	box-shadow: 0 6px 24px -12px rgba(27, 61, 110, .28);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
}
html.evk-dark .evk-px-header.px-scrolled .whb-header,
html.evk-dark .evk-px-header .whb-sticked {
	box-shadow: 0 8px 28px -14px rgba(0, 0, 0, .85);
}

/* ---- 4. Dark mode refinements ------------------------------------------ */

html.evk-dark .evk-px-darkplus {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
/* Part of the catalogue is cut-out PNG and part is photographed on white, so
   on the dark page some cards showed a white block and others did not. Giving
   every thumbnail the same white tile makes the grid read as one set, and the
   photos themselves are never edited. */
html.evk-dark .evk-px-darkplus .wd-product .wd-product-thumb {
	background: #ffffff;
	border-radius: 10px;
}
html.evk-dark .evk-px-darkplus .wd-product .wd-product-thumb img { background: transparent; }

/* A hairline keeps those light tiles from glaring against the dark page. */
html.evk-dark .evk-px-darkplus .wd-product .wd-product-thumb img,
html.evk-dark .evk-px-darkplus .wd-single-gallery img,
html.evk-dark .evk-px-darkplus .woocommerce-product-gallery img {
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(15, 28, 48, .06);
}
html.evk-dark .evk-px-darkplus hr,
html.evk-dark .evk-px-darkplus .wd-tabs .wd-nav-tabs,
html.evk-dark .evk-px-darkplus .woocommerce-tabs ul.tabs {
	border-color: rgba(255, 255, 255, .08);
}
html.evk-dark .evk-px-darkplus ::selection { background: rgba(127, 162, 214, .35); }
html.evk-dark .evk-px-darkplus * {
	scrollbar-color: rgba(157, 185, 228, .35) transparent;
	scrollbar-width: thin;
}
html.evk-dark .evk-px-darkplus ::-webkit-scrollbar { width: 11px; height: 11px; }
html.evk-dark .evk-px-darkplus ::-webkit-scrollbar-track { background: #16191d; }
html.evk-dark .evk-px-darkplus ::-webkit-scrollbar-thumb {
	background: rgba(157, 185, 228, .28);
	border: 3px solid #16191d;
	border-radius: 999px;
}
html.evk-dark .evk-px-darkplus ::-webkit-scrollbar-thumb:hover { background: rgba(157, 185, 228, .45); }

/* ---- 5. Smooth light/dark switch --------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.evk-px-switch.px-theming,
	.evk-px-switch.px-theming .whb-header,
	.evk-px-switch.px-theming .wd-product .product-wrapper,
	.evk-px-switch.px-theming .e-con,
	.evk-px-switch.px-theming section,
	.evk-px-switch.px-theming footer,
	.evk-px-switch.px-theming p,
	.evk-px-switch.px-theming h1,
	.evk-px-switch.px-theming h2,
	.evk-px-switch.px-theming h3,
	.evk-px-switch.px-theming h4,
	.evk-px-switch.px-theming a,
	.evk-px-switch.px-theming span,
	.evk-px-switch.px-theming li {
		transition: background-color .28s ease, color .28s ease, border-color .28s ease !important;
	}
}

/* ---- 6. Gentle reveal on scroll ---------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.evk-px-reveal.px-js [data-px-reveal] {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity .7s var(--px-ease), transform .7s var(--px-ease);
		will-change: opacity, transform;
	}
	.evk-px-reveal.px-js [data-px-reveal].is-in {
		opacity: 1;
		transform: none;
	}
}

/* ---- 7. Forms ----------------------------------------------------------- */

.evk-px-forms .wpforms-field input[type="text"],
.evk-px-forms .wpforms-field input[type="email"],
.evk-px-forms .wpforms-field input[type="tel"],
.evk-px-forms .wpforms-field input[type="url"],
.evk-px-forms .wpforms-field input[type="number"],
.evk-px-forms .wpforms-field select,
.evk-px-forms .wpforms-field textarea,
.evk-px-forms .woocommerce form .form-row input.input-text,
.evk-px-forms .woocommerce form .form-row textarea {
	border-radius: 8px;
	transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.evk-px-forms .wpforms-field input:focus,
.evk-px-forms .wpforms-field select:focus,
.evk-px-forms .wpforms-field textarea:focus,
.evk-px-forms .woocommerce form .form-row input.input-text:focus,
.evk-px-forms .woocommerce form .form-row textarea:focus {
	box-shadow: 0 0 0 3px rgba(42, 66, 105, .14);
	outline: none;
}
html.evk-dark .evk-px-forms .wpforms-field input:focus,
html.evk-dark .evk-px-forms .wpforms-field select:focus,
html.evk-dark .evk-px-forms .wpforms-field textarea:focus,
html.evk-dark .evk-px-forms .woocommerce form .form-row input.input-text:focus,
html.evk-dark .evk-px-forms .woocommerce form .form-row textarea:focus {
	box-shadow: 0 0 0 3px rgba(127, 162, 214, .28);
}
.evk-px-forms ::placeholder { opacity: .75; }
.evk-px-forms .wpforms-submit { border-radius: var(--wd-brd-radius, 12px); }

/* ---- 8. Images ---------------------------------------------------------- */

.evk-px-media .entry-content img:not([class*="logo"]):not(.emoji),
.evk-px-media .elementor-widget-image img,
.evk-px-media .wd-image img {
	border-radius: var(--wd-brd-radius, 12px);
}
@media (prefers-reduced-motion: no-preference) {
	.evk-px-media.px-js img[data-px-fade] {
		opacity: 0;
		transition: opacity .6s ease;
	}
	.evk-px-media.px-js img[data-px-fade].is-in { opacity: 1; }
}