/* ==========================================================================
   viralEV — CSS layer on top of Divi 5
   Source of truth for colors = Divi Global Colors (ids gcid-vev-*).
   The --vev-* tokens below just alias them (with hex fallbacks) so this file
   never hardcodes a brand color that Divi doesn't also know about.
   Only put here what Divi's builder controls can't express.
   ========================================================================== */

/* ---------- 1. Self-hosted Inter (variable 400–900), Greek + Latin ---------- */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-greek.woff2") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/inter-var-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokens (aliases of Divi Global Colors) ---------- */
:root {
	--vev-electric:      var(--gcid-vev-electric, #008cea);      /* fills, lines, decoration */
	--vev-electric-text: var(--gcid-vev-electric-text, #0076d2); /* text/links/button bg: 4.6:1 on white (#008cea is only 3.5:1) */
	--vev-volt:          var(--gcid-vev-volt, #40d872);
	--vev-volt-deep:     var(--gcid-vev-volt-deep, #005f00);
	--vev-live:          var(--gcid-vev-live, #ee343b);
	--vev-ink:           var(--gcid-vev-ink, #050c13);
	--vev-ink-soft:      var(--gcid-vev-ink-soft, #474e55);
	--vev-bg:            var(--gcid-vev-background, #fbfaf6);
	--vev-surface:       var(--gcid-vev-surface, #ffffff);
	--vev-muted:         var(--gcid-vev-muted, #f0eee9);
	--vev-accent:        var(--gcid-vev-accent, #e2e9f0);
	--vev-border:        var(--gcid-vev-border, #dadee3);

	--vev-radius-sm: 4px;
	--vev-radius-md: 6px;
	--vev-radius:    8px;
	--vev-radius-xl: 12px;
	--vev-radius-2xl: 16px;

	/* Shadows are ink-hued, never pure black. */
	--vev-shadow-soft:     0 1px 2px rgb(5 12 19 / .04), 0 2px 8px -2px rgb(5 12 19 / .06);
	--vev-shadow-elevated: 0 4px 12px rgb(5 12 19 / .08), 0 12px 32px rgb(5 12 19 / .12);
	--vev-shadow-glow:     0 0 0 1px rgb(0 140 234 / .15), 0 8px 32px rgb(0 140 234 / .35);

	--vev-gradient-electric:   linear-gradient(135deg, #008cea, #00be83);
	--vev-gradient-overlay:    linear-gradient(180deg, transparent, rgb(5 12 19 / .4) 50%, rgb(2 7 12 / .95));
	--vev-gradient-instrument: linear-gradient(145deg, #eff2f5, #e4e8ed);

	--vev-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- 3. Base typography refinements ---------- */
body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Tight display tracking from the style guide; Divi can't set negative letter-spacing globally. */
h1 { letter-spacing: -.025em; }
h2 { letter-spacing: -.02em; }
h3 { letter-spacing: -.015em; }

/* Numbers in data contexts line up (prices, kWh, stats). */
.vev-tnum { font-variant-numeric: tabular-nums; }

/* ---------- 4. Accessibility ---------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--vev-electric);
	outline-offset: 2px;
	border-radius: var(--vev-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 5. Small utilities used by Divi modules (add via CSS Class field) ---------- */

/* Eyebrow labels: use the Divi Text preset "vev · Eyebrow" (no CSS needed). */

/* Blog module cards: uniform 16:10 thumbnails (style guide editorial ratio).
   Divi's Blog module has no aspect-ratio control, so featured images of mixed
   sizes would give uneven card heights. */
.et_pb_blog_grid .et_pb_image_container img,
.et_pb_posts .et_pb_image_container img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Card hover: lift + image zoom (style guide §components). Put on the module or column. */
.vev-card {
	transition: transform .3s var(--vev-ease), box-shadow .3s var(--vev-ease);
}
.vev-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--vev-shadow-elevated);
}
.vev-card img {
	transition: transform .7s var(--vev-ease);
}
.vev-card:hover img {
	transform: scale(1.06);
}

/* ---------- 6. Header (Theme Builder "vev · Header") ---------- */

/* Sticky header; the 36px ticker scrolls away, the nav bar stays. */
.et-l--header {
	position: sticky;
	top: -36px;
	z-index: 100;
}
body.admin-bar .et-l--header { top: -4px; } /* 32px admin bar − 36px ticker */
/* Divi's #page-container overflow would stop position:sticky from working. */
#page-container { overflow: visible !important; }

/* Glass nav bar: Divi's background control can't do backdrop-filter. */
.vev-glass {
	background-color: rgb(255 255 255 / .82) !important;
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	backdrop-filter: saturate(180%) blur(20px);
}

@media (max-width: 980px) {
	.vev-hide-tablet { display: none !important; }
}
.et-l--header .et_pb_button { white-space: nowrap; }

/* Headline ticker ([vev_ticker]). */
.vev-ticker {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 36px;
	font-size: 13px;
	line-height: 1;
	color: #fff;
	overflow: hidden;
}
.vev-ticker__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
}
.vev-ticker__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--vev-live);
	box-shadow: 0 0 0 0 rgb(238 52 59 / .6);
	animation: vev-pulse 2s infinite;
}
.vev-ticker__viewport {
	display: flex;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}
.vev-ticker__track {
	display: flex;
	flex: none;
	gap: 40px;
	margin: 0;
	padding: 0 40px 0 0 !important;
	list-style: none;
	white-space: nowrap;
	animation: vev-marquee 80s linear infinite;
}
.vev-ticker__track li { padding: 0; }
.vev-ticker__track li::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 12px;
	border-radius: 50%;
	background: var(--vev-electric);
	vertical-align: middle;
}
.vev-ticker a { color: rgb(255 255 255 / .82); }
.vev-ticker a:hover, .vev-ticker a:focus-visible { color: #fff; }
.vev-ticker:hover .vev-ticker__track,
.vev-ticker:focus-within .vev-ticker__track { animation-play-state: paused; }
@keyframes vev-marquee { to { transform: translateX(-100%); } }
@keyframes vev-pulse {
	70%  { box-shadow: 0 0 0 8px rgb(238 52 59 / 0); }
	100% { box-shadow: 0 0 0 0 rgb(238 52 59 / 0); }
}
/* With reduced motion the global rule stops the animation; let people scroll instead. */
@media (prefers-reduced-motion: reduce) {
	.vev-ticker__viewport { overflow-x: auto; }
}

/* ---------- 7. Category badges (Blog cards + Post Title meta) ---------- */
/* Divi prints category links as plain text (rel="tag" in Blog cards, rel="category tag"
   in Post Title); the style guide shows tinted badges. Matched on the category URL so a
   renamed category label keeps its color. */
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/"] {
	display: inline-block;
	margin: 2px 0;
	padding: 3px 8px;
	border-radius: var(--vev-radius-sm);
	font-size: 10px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: rgb(0 140 234 / .1);
	color: var(--vev-electric-text) !important;
}
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/fortisi-mpataries/"] { background: #fbedd1; color: #834300 !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/technologia/"]       { background: rgb(64 216 114 / .15); color: var(--vev-volt-deep) !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/mikrokinitikotita/"] { background: #eae7ff; color: #5937af !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/agora-viomichania/"] { background: rgb(5 12 19 / .07); color: var(--vev-ink) !important; }
:is(.post-meta .entry-categories, .et_pb_title_meta_container) a[href*="/category/odigoi/"]            { background: var(--vev-accent); color: var(--vev-ink) !important; }

/* ---------- 8. Article body (Post Content module) ---------- */
.et_pb_post_content img,
.et_pb_title_featured_container img { border-radius: var(--vev-radius-xl); }
/* Featured images arrive in any orientation; keep the hero at the editorial 16:9. */
.et_pb_title_featured_container img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.et_pb_post_content figcaption,
.et_pb_post_content .wp-caption-text { font-size: 14px; color: var(--vev-ink-soft); }

/* ---------- 9. Footer ---------- */
.vev-footer-links ul { list-style: none; margin: 0; padding: 0 !important; }
.vev-footer-links li { margin: 0 0 10px; }
/* A legacy link color from the old layout packs wins over the Text preset's link color here. */
.vev-footer-links a { color: rgb(255 255 255 / .82) !important; }
.vev-footer-links a:hover, .vev-footer-links a:focus-visible { color: #fff !important; }