/* Tannenbaum & Vaknin — brand variables & global layout helpers */

:root {
	--tevk-navy: #21284e;
	--tevk-navy-dark: #161e43;
	--tevk-gold: #f3d34a;
	--tevk-bg-light: #f0f4f7;
	--tevk-white: #ffffff;
	--tevk-text: #21284e;
	--tevk-text-muted: #6b7280;
	--font-heading: 'Assistant', sans-serif;
	--font-display: 'Roboto Condensed', sans-serif;
}

html {
	scroll-behavior: smooth;
}

html {
	overflow-x: hidden;
}

body {
	font-family: var(--font-heading);
	color: var(--tevk-text);
	direction: rtl;
	overflow-x: hidden;
	max-width: 100vw;
}

a {
	transition: color .2s ease, background-color .2s ease, opacity .2s ease;
}

/* ===== Scroll reveal ===== */
/* Generic fade-up-on-scroll, applied via JS (assets/js/scroll-reveal.js). */
.tevk-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .7s cubic-bezier(0.22, 1, 0.36, 1),
		transform .7s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
}

.tevk-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* Card variant: same fade-up with a gentle scale, and staggered per group
   via an inline --reveal-delay custom property set by the JS. */
.tevk-reveal-card {
	opacity: 0;
	transform: translateY(32px) scale(.96);
	transition: opacity .6s cubic-bezier(0.22, 1, 0.36, 1),
		transform .6s cubic-bezier(0.22, 1, 0.36, 1);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.tevk-reveal-card.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
	.tevk-reveal,
	.tevk-reveal-card {
		transition: none;
		opacity: 1;
		transform: none;
	}
}

/* Floating card image: a small continuous drift tied to scroll position,
   applied via JS (assets/js/parallax.js). Put on the image/widget itself,
   never on a .tevk-reveal container, so the two transforms don't collide. */
.tevk-parallax {
	transition: transform .15s linear;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.tevk-parallax {
		transition: none !important;
		transform: none !important;
	}
}

/* ===== Header ===== */
/* Transparent header that floats over the hero image, per design. */
.tevk-header {
	position: absolute !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background: transparent !important;
}

/* Pages/templates without a hero directly under the header still need the
   page content to start below it, since it's out of normal document flow. */
body:not(.home) .tevk-header {
	position: relative !important;
}

/* Sticky header on scroll: simply fixed to the top, no animation.
   Covers both the desktop header (.tevk-header) and the separate mobile
   header (.tevk-header-mobile). */
.tevk-header.tevk-header--stuck,
.tevk-header-mobile.tevk-header--stuck {
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100;
	background-color: #b9c6d6 !important;
	box-shadow: 0 2px 14px rgba(33, 40, 78, .12);
}

/* Shrink the header by ~30% once stuck, so it takes up less screen space
   while scrolling. Done via padding + logo size only — text stays at its
   normal, readable size. Elementor renders top/bottom padding on the
   container's inner wrapper, not the container itself, hence `> .e-con-inner`. */
.tevk-header.tevk-header--stuck > .e-con-inner,
.tevk-header-mobile.tevk-header--stuck > .e-con-inner {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.tevk-header--stuck .hfe-site-logo-container img,
 {
	width: 160px !important;
	transition: width .15s ease;
}

.tevk-header .tevk-lang-switch a {
	color: var(--tevk-navy);
	font-weight: 300;
	font-size: 20px;
	padding: 0 4px;
}

.tevk-header .tevk-lang-switch a.is-active {
	font-weight:600;
}

.tevk-header .elementor-widget-navigation-menu a.hfe-menu-item,
.tevk-header .elementor-widget-navigation-menu a.hfe-sub-menu-item {
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 15px;
}

.tevk-header .elementor-widget-navigation-menu .hfe-menu-item {
	position: relative;
}

/* The plugin's "creative menu" item markup lays each <li> out as a column,
   which pushed our separator onto its own line below the link text. Force
   the item back onto a single row so the link + separator sit inline. */
.tevk-header .elementor-widget-navigation-menu ul.hfe-nav-menu,
.tevk-header .elementor-widget-navigation-menu ul.sm {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
}

.tevk-header .elementor-widget-navigation-menu li.menu-item {
	display: inline-flex !important;
	align-items: center;
	width: auto !important;
}

.tevk-header .elementor-widget-navigation-menu li.menu-item:not(:last-child)::after {
	content: "|";
	display: inline-block;
	color: #a9b0c4;
	font-weight: 300;
	margin: 0 4px;
	vertical-align: middle;
}

.tevk-header .tevk-social a {
	color: var(--tevk-navy);
}

/* ===== Hero ===== */
/* Background image supplies the gradient + chess artwork; this is just a fallback. */
.tevk-hero {
	position: relative;
	background-color: #eef1f6;
	overflow: hidden;
}

.tevk-hero .elementor-heading-title {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: .5px;
}

/* ===== Section headings ===== */
.tevk-eyebrow {
	color: var(--tevk-navy);
	font-weight: 700;
	position: relative;
}

/* ===== Practice areas band ===== */
.tevk-practice-band {
	background-color: var(--tevk-navy);
	position: relative;
}

.tevk-practice-band .elementor-icon-box-wrapper .elementor-icon-box-icon {
	background: transparent;
}

.tevk-practice-band .elementor-icon-box-title a {
	color: var(--tevk-white) !important;
	font-weight: 600;
}

.tevk-practice-band .elementor-icon-box-wrapper:hover .elementor-icon-box-title a {
	color: var(--tevk-gold) !important;
}

/* ===== Why us numbered list ===== */
.tevk-why-number {
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--tevk-gold);
	line-height: 1;
}

.tevk-why-item .elementor-heading-title {
	color: var(--tevk-navy);
	font-weight: 700;
}

.tevk-why-item a.tevk-readmore {
	color: var(--tevk-navy);
	font-weight: 700;
	text-decoration: none;
}

.tevk-why-item a.tevk-readmore:hover {
	color: var(--tevk-gold);
}

/* ===== Clients carousel ===== */
.tevk-clients .swiper-slide img,
.tevk-clients .elementor-image-carousel-wrapper img {
	max-height: 60px;
	width: auto;
	margin: 0 auto;
	filter: grayscale(100%);
	opacity: .7;
	transition: opacity .2s ease, filter .2s ease;
}

.tevk-clients .swiper-slide:hover img,
.tevk-clients .elementor-image-carousel-wrapper:hover img {
	filter: grayscale(0%);
	opacity: 1;
}

/* ===== Articles ===== */
.tevk-article-card {
	background: var(--tevk-white);
	border-radius: 2px;
}

.tevk-article-card .elementor-widget-image img {
	border: 3px solid var(--tevk-gold);
}

/* ===== Contact section ===== */
.tevk-contact-section {
	background-color: var(--tevk-navy-dark);
	position: relative;
	overflow: hidden;
}

.tevk-contact-section .elementor-heading-title,
.tevk-contact-section p {
	color: var(--tevk-white);
}

.tevk-contact-section .wpcf7-form input[type="text"],
.tevk-contact-section .wpcf7-form input[type="email"],
.tevk-contact-section .wpcf7-form input[type="tel"] {
	background: #f0f4f7;
	border: none;
	border-radius: 0px;
	padding: 14px 16px;
	width: 100%;
	margin-bottom: 14px;
	font-family: var(--font-heading);
	text-align: right;
}

.tevk-contact-section .wpcf7-form input[type="submit"] {
	background: var(--tevk-navy);
    color: var(--tevk-white);
    border: none;
    padding: 10px 60px;
    font-weight: 600;
    border-radius: 2px;
    cursor: pointer;
    font-size: 25px;
}

.tevk-contact-section .wpcf7-form input[type="submit"]:hover {
	background: var(--tevk-gold);
	color: var(--tevk-navy);
}

.tevk-contact-section .wpcf7-not-valid-tip {
	color: var(--tevk-gold);
}

.tevk-contact-section .wpcf7-response-output {
	color: var(--tevk-white);
	border-color: var(--tevk-white) !important;
}

/* ===== Footer ===== */
/* Light background per design — not navy. */