/* incccyprus.com additions to the Bridge child theme (loaded after style.css). */

/* Homepage slider headline: an H1 now (functions.php), styled exactly as Bridge styled it as an H2. */
.carousel-inner h1.q_slide_title { margin: 10px 0 20px; color: #fff; }
.carousel-inner .dark h1.q_slide_title { color: #000; }

/* ---------- Scroll animations (incc-anim.js) ----------
   Blocks get .incc-anim + a variant and ease in once as they scroll into view. Hidden only when the
   script runs (.incc-js on <html>), never for reduced motion. */
.incc-js .incc-anim {
	opacity: 0;
	transform: translate3d(var(--incc-x, 0), var(--incc-y, 40px), 0) scale(var(--incc-scale, 1));
	filter: blur(4px);
	transition:
		opacity 1s cubic-bezier(.22, 1, .36, 1) var(--incc-delay, 0ms),
		transform 1.2s cubic-bezier(.22, 1, .36, 1) var(--incc-delay, 0ms),
		filter 1s cubic-bezier(.22, 1, .36, 1) var(--incc-delay, 0ms);
	will-change: opacity, transform;
}
.incc-js .incc-anim--left  { --incc-x: -50px; --incc-y: 0; }
.incc-js .incc-anim--right { --incc-x: 50px;  --incc-y: 0; }
.incc-js .incc-anim--zoom  { --incc-y: 24px;  --incc-scale: .96; }
.incc-js .incc-anim.is-in  { opacity: 1; transform: none; filter: none; will-change: auto; }
/* Images settle inside their frame as they arrive. */
.incc-js .incc-anim--zoom img { transform: scale(1.06); transition: transform 1.6s cubic-bezier(.22, 1, .36, 1) var(--incc-delay, 0ms); }
.incc-js .incc-anim--zoom.is-in img { transform: none; }
.incc-js .incc-anim--zoom .vc_single_image-wrapper, .incc-js .item_holder.incc-anim--zoom { overflow: hidden; }
/* Small red heading separators draw in from the left. */
.incc-js .incc-anim--draw { opacity: 1; filter: none; transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.22, 1, .36, 1) var(--incc-delay, 0ms); }
.incc-js .separator.center.incc-anim--draw { transform-origin: center; }
.incc-js .incc-anim--draw.is-in { transform: scaleX(1); }
/* Phones: rise instead of sliding sideways (no horizontal overflow), and a little quicker. */
@media (max-width: 768px) {
	.incc-js .incc-anim--left, .incc-js .incc-anim--right { --incc-x: 0; --incc-y: 30px; }
	.incc-js .incc-anim { transition-duration: .8s, 1s, .8s; }
	body { overflow-x: clip; }
}
@media (prefers-reduced-motion: reduce) {
	.incc-js .incc-anim, .incc-js .incc-anim img { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* [incc_map]: OpenStreetMap via Leaflet. Black-and-white like the previous Google map: only the map
   tiles are greyed, so the pin keeps the site's red (the accent of the heading underlines). */
.incc-map { position: relative; z-index: 0; isolation: isolate; height: var(--ep-map-h, 450px); background: #e5e5e5; }
.incc-map .leaflet-tile-pane { filter: grayscale(1); }
.incc-map .ep-map-pin svg { display: block; width: 30px; height: 40px; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .35)); }
.incc-map .ep-map-pin path { fill: #bf0d00; }
.incc-map .ep-map-pin circle { fill: #fff; }
.incc-map-link { margin: 10px 0 0; text-align: right; font-size: 13px; }
@media (max-width: 767px) { .incc-map { height: min(var(--ep-map-h, 450px), 60vh); } }

/* Header language switcher (Polylang dropdown, labels EN / ΕΛ set in functions.php): a small chevron
   on the current language, and a compact white dropdown that reads over the slider photo and on the
   white scrolled header alike. The current language is marked in the site's red. */
nav.main_menu > ul > li.pll-parent-menu-item > a > span:not(.plus)::after {
	content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 0 4px 8px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
}
nav.main_menu > ul > li.pll-parent-menu-item > .second { width: auto; left: 50%; right: auto; transform: translateX(-50%); }
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner,
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner > ul { width: auto; min-width: 0; background: #fff; }
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner { padding: 6px 0; box-shadow: 0 6px 20px rgba(0, 0, 0, .18); }
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner > ul > li > a {
	display: block; padding: 7px 22px; color: #303030; font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 600;
	letter-spacing: 1px; line-height: 1.4; text-align: center; white-space: nowrap;
}
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner > ul > li > a:hover { color: #bf0d00; background: #f5f5f5; }
nav.main_menu > ul > li.pll-parent-menu-item > .second .inner > ul > li.current-lang > a { color: #bf0d00; }

/* Contact form Send buttons: Poppins like the rest of the site (Bridge asked for Raleway, no longer loaded).
   In the dark footer the button is a white outline, like the "Hire our company" button; Bridge's own
   hover (white fill, dark text) then applies. */
body .wpcf7 input.wpcf7-form-control.wpcf7-submit { font-family: 'Poppins', sans-serif; }
footer .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-submit { color: #fff; border-color: #fff; }
footer .cf7_custom_style_1 input.wpcf7-form-control.wpcf7-submit:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* Legal pages (Privacy Policy): a comfortable reading width and clear section spacing. */
.incc-legal { max-width: 760px; margin: 0 auto; padding: 50px 20px 80px; box-sizing: content-box; color: #444; }
.incc-legal p, .incc-legal li { font-size: 15px; font-weight: 400; }
.incc-legal h2, .incc-legal h3 { color: #222; }
.incc-legal h2 { font-size: 22px; line-height: 1.35; margin: 40px 0 12px; }
.incc-legal h3 { font-size: 17px; line-height: 1.4; margin: 26px 0 8px; }
.incc-legal p, .incc-legal li { line-height: 1.7; }
.incc-legal ul { margin: 0 0 16px 20px; list-style: disc; }
.incc-legal li { margin-bottom: 6px; }
.incc-legal a { color: #bf0d00; text-decoration: underline; text-underline-offset: 2px; }

/* Contact Form 7 honeypot: off-screen for people, still in the form for bots. */
.incc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }