/*
 * dport.gr design refresh, phase 1: the parts the client approved on 2026-10-25.
 *   1. Header: top bar removed, language switch in the main menu row, alignment unchanged.
 *   2. Footer: restored (logo, menu with legal links, contact line, social).
 *   3. Homepage section «Ολοκληρωμένο Σύστημα Λιμενικών Υπηρεσιών και Διαχείρισης Φορτίων».
 * Everything else on the live site keeps its current styling. Every rule here is scoped to
 * those three areas; nothing global (fonts, kit, buttons, links) changes in this phase.
 */

:root {
	--dp-blue: #07509F;
	--dp-navy: #062B52;
	--dp-body: #3E4A59;
	--dp-muted: #5B6878;
	--dp-surface: #FFFFFF;
	--dp-tint: #F4F6F9;
	--dp-line: #DFE5EC;
	--dp-gutter: 24px;
}

/* ---------- 1. Header ---------- */
#topnav { display: none; }

/* Desktop menu row, as the client reviewed it on staging (decided 2026-10-25): one 80px row,
   logo 52px tall. Alignment unchanged from before: logo at the row's left edge, menu items
   straight after it, «Επικοινωνία» flush right; the language switch takes the free space
   just left of the button. With the full-size logo the switch only fit from ~1390px.
   The 4% side inset still comes from the page wrapper in this phase. Mobile is untouched (the theme's own menu runs up to 1155px). */
@media (min-width: 1156px) {
	body .tmnf_menu_row .tmnf_container_head { min-height: 80px; display: flex; align-items: center; }
	body .tmnf_menu_row .tmnf_column_12 { display: flex; align-items: center; justify-content: space-between; width: 100%; padding-top: 0; padding-bottom: 0; }
	body .tmnf_menu_row #titles { float: none; margin: 0; width: auto; height: auto; line-height: 0; flex: 0 0 auto; display: flex; align-items: center; }
	body .tmnf_menu_row #titles .logo img.this_is_logo { display: block; height: 52px; width: auto; max-width: none; }
	body .tmnf_menu_row .header-right { float: none; flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-start; }
	body #navigation { float: none; flex: 1 1 auto; }
	body #main-nav { display: flex; align-items: center; flex-wrap: nowrap; width: 100%; }
	body #navigation #main-nav > li { float: none; padding-top: 0; padding-bottom: 0; } /* beats Redux inline #navigation > ul > li */
	body #main-nav > li > a { padding-top: 28px; padding-bottom: 28px; white-space: nowrap; }
	body #main-nav > li.wpml-ls-slot-70 { display: list-item !important; order: 98; margin-left: auto; }
	body #main-nav > li.special { order: 99; margin-left: 24px; }
	body #main-nav > li.special > a { padding: 14px 24px; }
}
/* Narrow desktops (1156-1279px): the theme's 20px item padding would push «Επικοινωνία»
   past the row's right edge, so items tighten; order and alignment stay the same. */
@media (min-width: 1156px) and (max-width: 1279px) {
	body #navigation #main-nav > li:not(.special) { padding-left: 11px; padding-right: 11px; }
	body #main-nav > li.special { margin-left: 12px; }
}

/* ---------- 2. Footer ---------- */
body #footer .footer_head.tmnf_border { display: block; }
body #footer .bottom_line .tmnf_column_8 { display: block; }
body #footer { background-color: var(--dp-surface); border-top: 1px solid var(--dp-line); }
body #footer .footer_head .tmnf_column_12 { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 24px 48px; padding: 48px 20px 24px; text-align: left; }
body #footer .footer_img { position: static; height: 48px; width: auto; margin: 0; flex: 0 0 auto; }
body #footer ul.bottom-menu { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 28px; margin: 0; padding: 0; float: none; flex: 0 1 auto; }
body #footer ul.bottom-menu li { margin: 0; padding: 0; }
body #footer a:any-link { color: var(--dp-navy); }
@media (max-width: 1024px) {
	body #footer .footer_head .tmnf_column_12 { flex-wrap: wrap; padding: 40px 20px 20px; }
	body #footer ul.bottom-menu { justify-content: flex-start; }
}

.dp-footer-contact {
	box-sizing: border-box;
	width: 100%;
	max-width: 1340px;
	margin: 0 auto;
	padding: 0 20px 32px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 32px;
	color: var(--dp-body);
	font-size: 16px;
}
.dp-footer-contact__company { margin: 0; font-weight: 700; color: var(--dp-navy); }
.dp-footer-contact__list { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; padding: 0; list-style: none; }
.dp-footer-contact__list li { margin: 0; color: var(--dp-body); }
.dp-footer-contact__list a:any-link { color: var(--dp-navy); padding-bottom: 0; }

body #footer .bottom_line { border-top: 1px solid var(--dp-line); }
body #footer .bottom_line .tmnf_container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-top: 20px; padding-bottom: 20px; }
body #footer .bottom_line .tmnf_column { width: auto; float: none; }
body #footer .footer_credits { text-align: left; font-size: 15px; color: var(--dp-muted); }
body #footer .tmnf_social_icons li a {
	color: var(--dp-navy);
	border-radius: 0;
	text-transform: none;
	letter-spacing: 0;
	border-color: var(--dp-line);
}
body #footer .tmnf_social_icons li a span { text-transform: none; letter-spacing: 0; }
body #footer .tmnf_social_icons li a:hover { background-color: var(--dp-blue) !important; color: #FFFFFF; }

/* Footer icons: Phosphor glyphs drawn with CSS masks, footer only (Font Awesome stays loaded elsewhere). */
#footer i.fa-facebook-f, #footer i.fa-youtube, #footer i.fa-linkedin-in,
.dp-ic::before {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	background-color: currentColor;
	-webkit-mask: var(--dp-icon) center / contain no-repeat;
	mask: var(--dp-icon) center / contain no-repeat;
	font-style: normal;
}
#footer i.fa-facebook-f::before, #footer i.fa-youtube::before, #footer i.fa-linkedin-in::before { content: none; }
#footer i.fa-facebook-f { --dp-icon: url(icons/facebook-logo.svg); }
#footer i.fa-youtube { --dp-icon: url(icons/youtube-logo.svg); }
#footer i.fa-linkedin-in { --dp-icon: url(icons/linkedin-logo.svg); }
.dp-ic::before { content: ""; margin-right: 10px; }
.dp-ic--map-pin { --dp-icon: url(icons/map-pin.svg); }
.dp-ic--phone { --dp-icon: url(icons/phone.svg); }
.dp-ic--envelope { --dp-icon: url(icons/envelope-simple.svg); }

/* ---------- 3. Homepage services section ---------- */
body .dp-services h2.elementor-heading-title {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: -0.5px;
	font-weight: 700;
	text-transform: none;
	color: var(--dp-navy);
}
@media (max-width: 1024px) { body .dp-services h2.elementor-heading-title { font-size: 28px; } }
@media (max-width: 767px) { body .dp-services h2.elementor-heading-title { font-size: 26px; } }

.dp-tiles > .elementor-container {
	display: grid;
	grid-template-columns: 1.3fr 1fr 1fr;
	gap: 1px;
	background-color: var(--dp-line);
	border: 1px solid var(--dp-line);
}
.dp-tiles > .elementor-container > .elementor-column { width: auto !important; max-width: none; margin: 0; }
body .dp-tiles .dp-tile > .elementor-element-populated { padding: 32px; align-content: flex-start; }
body .dp-tiles h3.elementor-heading-title {
	font-family: "Open Sans", Arial, Helvetica, sans-serif;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	color: var(--dp-navy);
	margin-top: 8px;
}
.dp-tile .elementor-widget-text-editor { font-size: 16px; line-height: 1.6; color: var(--dp-body); }
.dp-tile .elementor-widget-image img { width: 48px; height: 48px; }
.dp-tile--feature { grid-row: span 2; }
body .dp-tiles .dp-tile--feature > .elementor-element-populated { align-content: flex-end; min-height: 420px; }
body .dp-tiles .dp-tile--feature h3.elementor-heading-title,
body .dp-tiles .dp-tile--dark h3.elementor-heading-title,
.dp-tile--feature .elementor-widget-text-editor,
.dp-tile--dark .elementor-widget-text-editor { color: #FFFFFF; }
.dp-tile--feature .elementor-widget-image img,
.dp-tile--dark .elementor-widget-image img { filter: brightness(0) invert(1); }
body .dp-tiles .dp-tile--feature h3.elementor-heading-title { font-size: 26px; }
@media (max-width: 1024px) {
	.dp-tiles > .elementor-container { grid-template-columns: 1fr 1fr; }
	.dp-tile--feature { grid-column: 1 / -1; grid-row: auto; }
	body .dp-tiles .dp-tile--feature > .elementor-element-populated { min-height: 320px; }
	body .dp-tiles h3.elementor-heading-title { font-size: 21px; }
}
@media (max-width: 767px) {
	.dp-tiles > .elementor-container { grid-template-columns: 1fr; }
	body .dp-tiles .dp-tile > .elementor-element-populated { padding: 24px; }
	body .dp-tiles h3.elementor-heading-title { font-size: 20px; }
}