/**
Theme Name: MeloSoftware
Author: Sotirios Boutris - RDC
Author URI: https://www.rdc.gr
Description: Custom Wordpress theme for MeloSoftware
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: melosoftware
Template: astra
*/

/* Proxima Nova from the MELO Adobe Fonts kit (same kit as the original site). */
@import url("https://use.typekit.net/ccr0swo.css");

/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--melo-ink: #1E2930;
	--melo-accent: #199DC1;
	--melo-footer: #141E23;
	--melo-surface: #F8F8F8;
	--melo-font: "proxima-nova", sans-serif;
}

body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
	font-family: var(--melo-font);
}

body {
	color: var(--melo-ink);
	font-size: 18px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.entry-content :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--melo-font);
	color: inherit;
}

a {
	color: var(--melo-accent);
}

/* Inline links inside running text keep the original's teal, no underline. */
.e-paragraph-base a,
.elementor-widget-text-editor a {
	color: var(--melo-accent);
	text-decoration: none;
}
.e-paragraph-base a:hover,
.elementor-widget-text-editor a:hover {
	text-decoration: underline;
}

/* Counter numerals font from the original site (also registered as an Elementor custom font). */
@font-face {
	font-family: "CFEteoclesBold";
	src: url("/wp-content/uploads/2026/10/CFEteoclesBold-1.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   Footer: "Εκδήλωση ενδιαφέροντος" toggle (Elementor Toggle widget)
   ========================================================================== */
.melo-interest-toggle .elementor-toggle-item { border: 0; }
.melo-interest-toggle .elementor-tab-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	border: 0 !important;
	text-align: center;
	cursor: pointer;
}
.melo-interest-toggle .elementor-tab-title .elementor-toggle-title { order: 1; }
.melo-interest-toggle .elementor-tab-title .elementor-toggle-icon {
	order: 2;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	display: flex;
	justify-content: center;
	line-height: 0;
}
.melo-interest-toggle .elementor-toggle-icon svg { width: 22px; height: 13px; }
.melo-interest-toggle .elementor-tab-content { border: 0 !important; }

/* ==========================================================================
   WPForms: shared MELO form styling (underlined fields, as on the original)
   ========================================================================== */
.melo-form .wpforms-form .wpforms-field { padding: 0; margin: 0; }
.melo-form .wpforms-form .wpforms-field-label { display: none; }
.melo-form .wpforms-form input[type="text"],
.melo-form .wpforms-form input[type="email"],
.melo-form .wpforms-form textarea {
	width: 100% !important;
	max-width: 100% !important;
	height: 40px;
	min-height: 40px;
	padding: 0 !important;
	border: 0 !important;
	border-bottom: 1px solid currentColor !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	font-family: var(--melo-font);
	font-size: 18px;
	line-height: 27px;
	resize: none;
}
.melo-form .wpforms-form textarea { overflow: hidden; }
.melo-form .wpforms-form .wpforms-field-checkbox ul { margin: 0; padding: 0; }
.melo-form .wpforms-form .wpforms-field-checkbox li { display: flex; align-items: center; gap: 15px; margin: 0 !important; }
.melo-form .wpforms-form .wpforms-field-label-inline { font-size: 12px; font-weight: 700; line-height: 18px; }
.melo-form .wpforms-form .wpforms-field-label-inline a { color: inherit; text-decoration: none; }
.melo-form .wpforms-form .wpforms-submit-container { padding: 0; margin: 0; text-align: center; }
.melo-form .wpforms-form button.wpforms-submit {
	width: 233px;
	max-width: 100%;
	height: 46px;
	margin-top: 20px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: var(--melo-ink) !important;
	color: #fff !important;
	font-family: var(--melo-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	box-shadow: none;
}
.melo-form .wpforms-form label.wpforms-error { font-size: 13px; margin-top: 4px; }

/* Interest form (teal band): white text, 2-column grid, 821px wide. */
.melo-form--interest { max-width: 821px; margin: 0 auto !important; }
.melo-form--interest .wpforms-form { color: #fff; }
.melo-form--interest .wpforms-form .wpforms-field-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 33px;
	row-gap: 40px;
}
.melo-form--interest .wpforms-form .melo-f-message,
.melo-form--interest .wpforms-form .melo-f-consent { grid-column: 1 / -1; }
.melo-form--interest .wpforms-form .melo-f-consent ul { display: flex; justify-content: center; }
.melo-form--interest .wpforms-form input,
.melo-form--interest .wpforms-form textarea { color: #fff !important; border-bottom-color: #fff !important; }
.melo-form--interest .wpforms-form textarea { height: 40px !important; min-height: 40px !important; }
.melo-form--interest .wpforms-form input::placeholder,
.melo-form--interest .wpforms-form textarea::placeholder { color: rgba(255, 255, 255, 0.6) !important; opacity: 1; }
.melo-form--interest .wpforms-form .wpforms-field-label-inline { color: #fff !important; }
.melo-form--interest .wpforms-confirmation-container-full { background: transparent; border: 1px solid #fff; color: #fff; }

@media (max-width: 767px) {
	.melo-form--interest .wpforms-form .wpforms-field-container { grid-template-columns: 1fr; row-gap: 30px; }
}

/* ==========================================================================
   Header (Elementor Theme Builder)
   ========================================================================== */
.elementor-location-header {
	position: sticky;
	top: 0;
	z-index: 999;
}
.admin-bar .elementor-location-header { top: 32px; }

/* Search toggle: white magnifier with the short underline of the original. */
.melo-header-search .elementor-search-form__toggle {
	border-bottom: 2px solid #fff;
	padding-bottom: 6px;
}
.melo-header-search .elementor-search-form__toggle i,
.melo-header-search .elementor-search-form__toggle svg { color: #fff; fill: #fff; }

/* Main menu dropdowns: 320px white panel as on the original. */
.melo-main-nav .elementor-nav-menu--main .sub-menu {
	min-width: 320px !important;
	padding: 11px 0;
}
.melo-main-nav .elementor-nav-menu--main .sub-menu a {
	white-space: normal;
	line-height: 25.5px;
	border-left: 0 !important;
}
.melo-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow { margin-left: 6px; padding: 0 !important; font-size: 12px; }
.melo-main-nav .elementor-nav-menu--main .elementor-item .sub-arrow svg { width: 9px; height: 9px; }
.melo-main-nav .elementor-nav-menu--main .elementor-item.has-submenu { padding-right: 0 !important; }

/* ==========================================================================
   Converted pages: shared fixes
   ========================================================================== */
/* The page root stands in for the original .main-content (position: relative), so absolute
   pieces such as the facilities picture (top 0, height 110%) size against the content, not #page. */
.elementor[data-elementor-type="wp-page"] { position: relative; }

/* SVG widgets take the box of their wrapper (no inline baseline gap). */
.e-svg-base > svg { display: block; }

/* Banner wave: the original inline <style> uses global .a/.b classes that collide with other
   SVGs, so the colours are pinned here. Product pages tint it (original checkForBannerImg). */
.elementor-element-banner-wave svg path { fill: #1e2930; opacity: 0.63; transition: all 900ms ease-in; }
.page-id-279 .elementor-element-banner-wave svg path { fill: #a9cf37; }
.page-id-280 .elementor-element-banner-wave svg path { fill: #0099ef; }
.page-id-281 .elementor-element-banner-wave svg path { fill: #f6901e; }
.page-id-282 .elementor-element-banner-wave svg path { fill: #b666d2; }
.page-id-285 .elementor-element-banner-wave svg path,
.page-id-286 .elementor-element-banner-wave svg path,
.page-id-287 .elementor-element-banner-wave svg path { fill: #a29a90; }

/* Module cards: hover swaps the title bar for the wave and tints the icon. */
[data-id^="module-grid-item"] .e-svg-base:has(> svg.initial),
[data-id^="module-grid-item"] .e-svg-base:has(> svg.hovered),
[data-id^="module-grid-item"] svg .icon { transition: all 300ms ease; }
[data-id^="module-grid-item"]:hover .e-svg-base:has(> svg.hovered) { opacity: 1; }
[data-id^="module-grid-item"]:hover .e-svg-base:has(> svg.initial) { opacity: 0; }
[data-id^="module-grid-item"]:hover svg .icon { fill: var(--melo-accent); }

/* Outline buttons fade on hover (original .button__main / module collection buttons). */
[data-id^="case-study-carousel-item-button"] a:hover,
[data-id^="module-collection-block-button"] a:hover { opacity: 0.7; }

/* Distinctions: grey band is the original .distinctions__container::after (bottom: 0, 324px high).
   The extract froze its top per breakpoint, and the mobile value was taken before slick (7851px). */
.page-id-273 .s-distinctio69 { inset-block-start: auto !important; }

/* History timeline (original .scroll__container .nav): sticky year list with corner ticks; melo.js moves
   .active with the section in view. !important beats the inline styles frozen in the text-editor HTML. */
.page-id-269 [data-id="nav-wrapper"] ul { margin: 0 0 100px 30px; padding: 0; list-style: none; }
.page-id-269 [data-id="nav-wrapper"] li { position: relative; max-width: 200px; margin-bottom: 1em; transition: 0.3s ease-out; }
.page-id-269 [data-id="nav-wrapper"] li::after {
	content: "";
	position: absolute;
	left: -30px;
	top: 15px;
	display: block;
	width: 20px;
	height: 250px;
	border-left: 2px solid #fff;
	border-top: 2px solid #fff;
}
.page-id-269 [data-id="nav-wrapper"] li a { display: block; padding: 0; color: #fff !important; text-decoration: none; transition: 0.15s ease-out; }
.page-id-269 [data-id="nav-wrapper"] li a:hover { padding-left: 1em; }
.page-id-269 [data-id="nav-wrapper"] li span { font-size: 20px !important; font-weight: inherit !important; transition: 0.15s ease-out; }
.page-id-269 [data-id="nav-wrapper"] li.active { padding-left: 1em; pointer-events: none; }
.page-id-269 [data-id="nav-wrapper"] li.active::after { top: 27px; width: 35px; height: 400px; }
.page-id-269 [data-id="nav-wrapper"] li.active span { font-size: 38px !important; font-weight: 700 !important; }
@media (max-width: 991px) {
	.page-id-269 [data-id="nav-wrapper"] li span { font-size: 16px !important; }
	.page-id-269 [data-id="nav-wrapper"] li.active { padding-left: 10px; }
	.page-id-269 [data-id="nav-wrapper"] li.active::after { top: 19px; height: 800px; }
	.page-id-269 [data-id="nav-wrapper"] li.active span { font-size: 25px !important; }
}
/* The original switches nav <-> in-section year titles at 680px, not at Elementor's 767px. */
@media (min-width: 681px) and (max-width: 767px) {
	.page-id-269 [data-id="nav-wrapper"] { display: block !important; }
	.page-id-269 [data-id^="content-title"] { display: none !important; }
}
@media (max-width: 680px) {
	.page-id-269 [data-id^="content-title"] { color: transparent !important; -webkit-text-stroke: 1px #fff; }
}

/* Grid section background: the original drops main-bg.png below 1024px and keeps only the grey. */
@media (max-width: 1023px) {
	[data-id^="module-collection-container-bg"] { background-image: none !important; }
}

/* ==========================================================================
   Slick carousels (grids below 889px, case studies)
   ========================================================================== */
.slick-initialized.slick-slider { display: block !important; }
.slick-initialized .slick-track { display: flex; }
/* Beats slick's height:100% but not the fixed card heights from Elementor (.elementor .s-*). */
div.slick-slide { height: auto; }
.slick-dots {
	list-style: none;
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	margin: 40px 0 0;
	padding: 0;
}
.slick-dots li {
	margin: 10px;
	width: 15px;
	height: 15px;
	border: 1px solid var(--melo-accent);
	border-radius: 50%;
	cursor: pointer;
}
.slick-dots li.slick-active { background-color: var(--melo-accent); }
.slick-dots li button { display: block; width: 100%; height: 100%; padding: 0; font-size: 0; border: 0; background: transparent; cursor: pointer; }
/* Dot colours per product / solutions grid, as on the original. */
.page-id-279 .melo-sl .slick-dots li,
.page-id-278 [data-id="sl"] .slick-dots li { border-color: #a9cf37; }
.page-id-280 .melo-sl .slick-dots li,
.page-id-278 [data-id="sl-2"] .slick-dots li { border-color: #0099ef; }
.page-id-281 .melo-sl .slick-dots li,
.page-id-278 [data-id="sl-3"] .slick-dots li { border-color: #f6901e; }
.page-id-282 .melo-sl .slick-dots li,
.page-id-278 [data-id="sl-4"] .slick-dots li { border-color: #b666d2; }
.page-id-285 .melo-sl .slick-dots li,
.page-id-286 .melo-sl .slick-dots li,
.page-id-287 .melo-sl .slick-dots li { border-color: #a29a90; }
.page-id-279 .melo-sl .slick-dots li.slick-active,
.page-id-278 [data-id="sl"] .slick-dots li.slick-active { background-color: #a9cf37; }
.page-id-280 .melo-sl .slick-dots li.slick-active,
.page-id-278 [data-id="sl-2"] .slick-dots li.slick-active { background-color: #0099ef; }
.page-id-281 .melo-sl .slick-dots li.slick-active,
.page-id-278 [data-id="sl-3"] .slick-dots li.slick-active { background-color: #f6901e; }
.page-id-282 .melo-sl .slick-dots li.slick-active,
.page-id-278 [data-id="sl-4"] .slick-dots li.slick-active { background-color: #b666d2; }
.page-id-285 .melo-sl .slick-dots li.slick-active,
.page-id-286 .melo-sl .slick-dots li.slick-active,
.page-id-287 .melo-sl .slick-dots li.slick-active { background-color: #a29a90; }

/* Case studies arrows (original .owl-prev/.owl-next). */
.melo-case-studies { position: relative; }
.melo-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	width: 62px;
	height: 62px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: var(--melo-ink);
	font-size: 0;
	transform: translateY(-50%);
	cursor: pointer;
}
.melo-arrow::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	display: block;
	width: 35px;
	height: 35px;
	border-right: 7px solid;
	border-bottom: 7px solid;
}
.melo-arrow--prev { left: 100px; }
.melo-arrow--next { right: 100px; }
.melo-arrow--prev::before { transform: translate(-50%, -50%) rotate(135deg); }
.melo-arrow--next::before { transform: translate(-50%, -50%) rotate(-45deg); }
.melo-arrow.slick-disabled { cursor: default; }
.melo-arrow:hover, .melo-arrow:focus { background: transparent; color: var(--melo-ink); }
@media (max-width: 1023px) {
	.melo-arrow {
		background-color: #fff;
		border-radius: 50%;
		box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3), 0 0 4px rgba(0, 0, 0, 0.2);
	}
	.melo-arrow:hover, .melo-arrow:focus { background-color: #fff; }
	.melo-arrow::before { width: 25px; height: 25px; border-right-width: 4px; border-bottom-width: 4px; }
	.melo-arrow--prev { left: 10px; }
	.melo-arrow--next { right: 10px; }
	.melo-arrow--prev::before { transform: translate(-30%, -50%) rotate(135deg); }
	.melo-arrow--next::before { transform: translate(-70%, -50%) rotate(-45deg); }
}

/* ==========================================================================
   Back to top (original .scroll-to-top)
   ========================================================================== */
.melo-scroll-to-top {
	position: fixed;
	right: 30px;
	bottom: -100px;
	z-index: 10;
	transition: bottom 300ms ease-in;
}
.melo-scroll-to-top.show { bottom: 30px; }
.melo-scroll-to-top a { display: block; width: 40px; }
.melo-scroll-to-top svg { display: block; width: 40px; height: 40px; }
.melo-scroll-to-top .stt-frame { fill: var(--melo-accent); }
.melo-scroll-to-top .stt-arrow { fill: #7194ab; }