/**
Theme Name: RDC Labs
Author: Sotirios Boutris - RDC
Author URI: https://www.rdc.gr
Description: Custom theme for RDC Labs
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: rdc-labs
Template: astra
*/

/* ==========================================================================
   RDC Innovation Labs: faithful rebuild of the original rdc-labs.com look.
   Layout lives in Elementor; this file only holds what Elementor cannot
   express natively. Tokens mirror DESIGN.md and the Elementor kit.
   ========================================================================== */

:root {
	--rdc-blue: #284F96;
	--rdc-charcoal: #231F20;
	--rdc-slate: #6D76A0;
	--rdc-lightblue: #80C3D7;
	--rdc-cyan: #00BACA;
	--rdc-red: #EF4C3E;
	--rdc-field: #EBEDEE;
	--rdc-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Base font for every screen, including non-Elementor ones (404, search). */
body,
button,
input,
select,
textarea,
.elementor-widget-text-editor,
.elementor-heading-title {
	font-family: var(--rdc-font);
}

/* --------------------------------------------------------------------------
   Header top bar
   -------------------------------------------------------------------------- */
.rdc-topbar-contact a {
	color: #FFFFFF;
	text-decoration: none;
}

/* The kit's link hover colour is charcoal, which would vanish on the charcoal bar. */
.rdc-topbar .rdc-topbar-contact a:hover,
.rdc-topbar .rdc-topbar-contact a:focus {
	color: #FFFFFF;
	text-decoration: underline;
}

.rdc-topbar-contact p {
	margin: 0;
}

/* White dividers between the top-bar social icons, as on the original. */
.rdc-topbar-social .elementor-grid-item + .elementor-grid-item {
	border-left: 1px solid #FFFFFF;
}

.rdc-topbar-social .elementor-social-icon {
	border-radius: 0;
}

/* Sub-menu indicator: white disc that turns black with the hovered/active item.
   Elementor only switches `color` on hover, so the SVG must follow currentColor. */
.rdc-main-menu .elementor-nav-menu--main .sub-arrow {
	padding-left: 8px;
}

.rdc-main-menu .elementor-nav-menu--main .sub-arrow .e-font-icon-svg {
	fill: currentColor;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.rdc-footer-menu .elementor-nav-menu--main .elementor-nav-menu {
	padding-left: 15px;
}

.rdc-footer-menu .elementor-nav-menu--main .elementor-nav-menu > li {
	display: list-item;
	list-style: disc;
	color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   Round icons spin once on hover (the only decorative motion).
   -------------------------------------------------------------------------- */
.rdc-spin img,
.rdc-spin .elementor-social-icon {
	transition: transform 0.4s ease-out;
}

.rdc-spin img:hover,
.rdc-spin a:focus-visible img,
.rdc-spin .elementor-social-icon:hover,
.rdc-spin .elementor-social-icon:focus-visible {
	transform: rotate(360deg);
}

/* --------------------------------------------------------------------------
   "See more" links inside the colour blocks
   -------------------------------------------------------------------------- */
.rdc-see-more .elementor-button {
	padding: 0;
	background: transparent;
	color: #FFFFFF;
	font-size: 12px;
	line-height: 24px;
	border: 0;
}

.rdc-see-more .elementor-button:hover,
.rdc-see-more .elementor-button:focus {
	background: transparent;
	color: #FFFFFF;
	text-decoration: underline;
}

.rdc-see-more .elementor-button-icon {
	font-size: 24px;
	color: var(--rdc-cyan);
}

.rdc-see-more .elementor-button-icon svg {
	width: 24px;
	height: 24px;
	fill: var(--rdc-cyan);
}

.rdc-see-more--red .elementor-button-icon {
	color: var(--rdc-red);
}

.rdc-see-more--red .elementor-button-icon svg {
	fill: var(--rdc-red);
}

.rdc-see-more--dark .elementor-button {
	color: #222222;
}

/* Read-more buttons carry the chevron of the original. */
.rdc-read-more .elementor-button-icon svg {
	width: 0.8em;
	height: 0.8em;
}

/* --------------------------------------------------------------------------
   Colour blocks driven by ACF: the loop/single templates write
   style="--rdc-card:#hex" (card colour) and "--rdc-arrow:#hex" (arrow colour).
   -------------------------------------------------------------------------- */
.rdc-card-box {
	background-color: var(--rdc-card, var(--rdc-slate));
}

/* Specializations listing: big "See more" arrow lifts on hover. */
.rdc-card-more.e-con {
	--width: auto;
	width: auto;
	left: auto;
	text-decoration: none;
	transition: transform 0.3s linear;
}

.rdc-card-more:hover,
.rdc-card-more:focus-visible {
	transform: translateY(-10px);
}

.rdc-card-more .elementor-widget-icon .elementor-icon {
	color: var(--rdc-arrow, var(--rdc-charcoal));
	fill: var(--rdc-arrow, var(--rdc-charcoal));
}

.rdc-card-more .elementor-widget-icon .elementor-icon svg {
	fill: var(--rdc-arrow, var(--rdc-charcoal));
}

/* Specialization page: the label hugs its heading; the photo overlaps the colour panel on desktop. */
.rdc-spec-label.e-con {
	--width: auto;
	width: auto;
	align-self: flex-start;
}

.rdc-spec-stage {
	position: relative;
}

/* Elementor's position control is not responsive, so stack the photo on phones here. */
@media (max-width: 767px) {
	.rdc-spec-stage .elementor-element.rdc-spec-image {
		position: static !important;
		width: 100% !important;
	}
}

/* --------------------------------------------------------------------------
   Home page
   -------------------------------------------------------------------------- */

/* Slider: the same 339px band as the original Camera slider. Slides keep their
   text side (right) in view when the band crops them. */
.rdc-home-slider .swiper-slide-image {
	width: 100%;
	height: 339px;
	object-fit: cover;
	object-position: center right;
}

@media (max-width: 1024px) {
	.rdc-home-slider .swiper-slide-image {
		height: 220px;
	}
}

@media (max-width: 767px) {
	.rdc-home-slider .swiper-slide-image {
		height: 130px;
	}
}

/* Arrows show on hover, like the original; always visible on touch screens. */
.rdc-home-slider .elementor-swiper-button {
	padding: 8px;
	background-color: rgba(35, 31, 32, 0.5);
	opacity: 0;
	transition: opacity 0.3s ease-out;
}

.rdc-home-slider:hover .elementor-swiper-button,
.rdc-home-slider .elementor-swiper-button:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.rdc-home-slider .elementor-swiper-button {
		opacity: 1;
	}
}

/* With a single slide there is nothing to navigate to. */
.rdc-home-slider .elementor-swiper-button.swiper-button-lock {
	display: none;
}
@media (min-width: 768px) {
	/* The welcome strip is clipped to 159px, exactly like the original. */
	.rdc-welcome-row {
		height: 159px;
		overflow: hidden;
	}
}

.rdc-home-icon,
.rdc-contact-icon {
	text-decoration: none;
}

/* --------------------------------------------------------------------------
   Alternating loops (Specializations, Platforms, Web Portfolio):
   every even item mirrors the image/text order, as the original grid did.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
	.rdc-alt-loop .e-loop-item:nth-of-type(even) .rdc-alt-row {
		flex-direction: row-reverse;
	}

	.rdc-alt-loop .e-loop-item:nth-of-type(even) .rdc-share-icon {
		margin-left: calc(30% - 33px);
	}
}

.rdc-share-icon {
	margin-left: calc(70% - 33px);
}

@media (max-width: 767px) {
	.rdc-share-icon {
		margin-left: auto;
		margin-right: auto;
	}
}

/* Portfolio and platform rows: blue rule between items. */
.rdc-grid-loop .e-loop-item {
	border-bottom: 1px solid var(--rdc-blue);
	margin-bottom: 35px;
	padding-bottom: 35px;
}

.rdc-grid-loop .e-loop-item:last-of-type {
	border-bottom: 0;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Services: lab heading bars with the small notch of the original.
   -------------------------------------------------------------------------- */
.rdc-lab-heading .elementor-heading-title {
	position: relative;
}

.rdc-lab-heading .elementor-heading-title::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 5px;
	border-style: solid;
	border-color: transparent transparent var(--rdc-blue);
	border-width: 0 7px 5px;
}

.rdc-lab-heading--down .elementor-heading-title::before {
	top: auto;
	bottom: -5px;
	border-color: var(--rdc-blue) transparent transparent;
	border-width: 5px 7px 0;
}

.rdc-lab-heading--end .elementor-heading-title::before {
	left: auto;
	right: 5px;
}

/* Containers that should hug their content instead of filling the row. */
.rdc-auto.e-con {
	--width: auto;
	width: auto;
}

/* Justified running text, as in the original content columns. */
.rdc-justify p,
.rdc-justify {
	text-align: justify;
}

.rdc-justify p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contact form (WPForms) in the style of the original form.
   WPForms' modern markup reads these variables; the rules below refine it.
   -------------------------------------------------------------------------- */
.rdc-contact-form .wpforms-container {
	--wpforms-button-background-color: var(--rdc-slate);
	--wpforms-button-border-color: var(--rdc-slate);
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-border-radius: 0px;
	--wpforms-button-border-size: 2px;
	--wpforms-button-border-style: solid;
	--wpforms-field-border-radius: 0px;
	--wpforms-label-color: var(--rdc-charcoal);
}

.rdc-contact-form div.wpforms-container-full .wpforms-form button[type="submit"]:hover,
.rdc-contact-form div.wpforms-container-full .wpforms-form button[type="submit"]:focus {
	background: #FFFFFF;
	color: var(--rdc-slate);
	border-color: var(--rdc-slate);
}

.rdc-contact-form div.wpforms-container-full .wpforms-form button[type="submit"]:hover::after {
	opacity: 0;
}

.rdc-contact-form .wpforms-container .wpforms-field input[type="text"],
.rdc-contact-form .wpforms-container .wpforms-field input[type="email"],
.rdc-contact-form .wpforms-container .wpforms-field input[type="tel"],
.rdc-contact-form .wpforms-container .wpforms-field textarea {
	max-width: 100%;
	color: #555555;
	background: rgba(255, 255, 255, 0.5);
	border: 5px solid var(--rdc-field);
	border-radius: 0;
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3);
	padding: 5px 10px;
}

.rdc-contact-form .wpforms-container .wpforms-field input:focus,
.rdc-contact-form .wpforms-container .wpforms-field textarea:focus {
	border-color: #E1E2E2;
	outline: 2px solid var(--rdc-blue);
	outline-offset: 1px;
}

.rdc-contact-form .wpforms-container .wpforms-field-label {
	font-weight: 400;
	margin-bottom: 5px;
}

.rdc-contact-form .wpforms-container .wpforms-submit-container button[type="submit"] {
	background-color: var(--rdc-slate);
	color: #FFFFFF;
	border: 2px solid var(--rdc-slate);
	border-radius: 0;
	padding: 5px 15px 5px 10px;
	font-size: 14px;
	font-weight: 400;
}

.rdc-contact-form .wpforms-container .wpforms-submit-container button[type="submit"]::after {
	content: "\232A";
	font-weight: 700;
	padding-left: 15px;
}

.rdc-contact-form .wpforms-container .wpforms-submit-container button[type="submit"]:hover,
.rdc-contact-form .wpforms-container .wpforms-submit-container button[type="submit"]:focus {
	background-color: #FFFFFF;
	color: var(--rdc-slate);
}

/* --------------------------------------------------------------------------
   Non-Elementor screens (404, search, archives) inherit the brand.
   -------------------------------------------------------------------------- */
.ast-container a,
.entry-content a {
	color: var(--rdc-blue);
}

.ast-archive-description .page-title,
.ast-container .entry-title {
	color: var(--rdc-blue);
	font-weight: 700;
}

/* Astra runs full width for the Elementor layouts; keep its own screens readable. */
.error404 .site-content > .ast-container,
.search .site-content > .ast-container,
.archive .site-content > .ast-container {
	max-width: 1200px;
	padding: 30px 16px;
}

@media (prefers-reduced-motion: reduce) {
	.rdc-spin img,
	.rdc-spin .elementor-social-icon,
	.rdc-card-more {
		transition: none;
	}

	.rdc-spin img:hover,
	.rdc-spin .elementor-social-icon:hover,
	.rdc-card-more:hover {
		transform: none;
	}
}