/* ==========================================================================
   dsgn.gr · global styles
   Πηγή τιμών: previews/ (κοινό CSS όλων των σελίδων).
   Χρωματα και τυπογραφία ορίζονται ΚΑΙ στο Elementor kit. Εδώ μόνο ό,τι
   δεν ρυθμίζεται από το Elementor: ακτίνες κέρσορα, SHRP, κουμπιά-παραλλαγές,
   κόκκος, γυαλί, κάρτες, κίνηση, κέρσορες.
   Breakpoints: κινητό ≤600px, tablet ≤900px.
   ========================================================================== */

/* ---------- 1. Μεταβλητές ---------- */
:root{
	--dsgn-navy:#122A49;
	--dsgn-navy-deep:#0E2240;
	--dsgn-ink-2:#4F5B6B;
	--dsgn-ink-3:#34445A;
	--dsgn-ink-hero:#24384F;
	--dsgn-blue:#4067B0;
	--dsgn-cyan:#39C5F3;
	--dsgn-link-hover:#2B4A72;

	--dsgn-bg:#FCF9F7;
	--dsgn-white:#FFFFFF;
	--dsgn-cream:#F7F3EC;
	--dsgn-surface:#F1EFEA;
	--dsgn-hero:#BFE2F6;
	--dsgn-on-dark:#C9D3E0;
	--dsgn-line:#DEDCD6;
	--dsgn-chip-line:#D5D3CD;

	--dsgn-epigrafes:#B4BEF3;
	--dsgn-neon:#F6B9A0;
	--dsgn-ektyposeis:#F4DC7C;
	--dsgn-grafistiki:#A2DDAA;
	--dsgn-istoselides:#A5D4F1;

	--dsgn-ease:cubic-bezier(.23,1,.32,1);
	--dsgn-shadow-card:0 12px 32px rgba(18,42,73,.10);
	--dsgn-shadow-panel:0 12px 32px rgba(18,42,73,.08);
	--dsgn-shadow-step:0 10px 28px rgba(18,42,73,.08);

	--dsgn-cursor:url("img/cursor-default.svg") 3 3, auto;
	--dsgn-cursor-pointer:url("img/cursor-pointer.svg") 3 3, pointer;
	--dsgn-cursor-dark:url("img/cursor-dark.svg") 3 3, auto;
}

/* ---------- 2. Βάση ---------- */
html{scroll-behavior:smooth}
body{background:var(--dsgn-bg);color:var(--dsgn-navy)}
a{color:var(--dsgn-navy)}
a:hover{color:var(--dsgn-link-hover)}

/* Geologica: άξονας SHRP στους τίτλους (το Elementor δεν έχει πεδίο) */
h1,h2,.sharp{font-variation-settings:'SHRP' 40}

/* H1 hero αρχικής: 52px αντί για 50px (global) */
.dsgn-h1-home,
.dsgn-h1-home .elementor-heading-title{font-size:clamp(32px,3.6vw,52px);line-height:1.1}

/* Κείμενα σε widgets Elementor: χωρίς κενό κάτω από την τελευταία παράγραφο
   (τα κενά τα ορίζουν τα gaps των containers, όπως στις προεπισκοπήσεις). */
.elementor-widget-text-editor p{margin:0}
.elementor-widget-text-editor p + p{margin-top:.9em}
/* Σύνδεσμοι μέσα σε κείμενο: υπογραμμισμένοι, όπως στις προεπισκοπήσεις */
.elementor-widget-text-editor a{text-decoration:underline}

/* Eyebrow και lead, για χρήση και χωρίς global typography */
.eyebrow,.eyebrow .elementor-heading-title{margin:0;font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--dsgn-ink-2)}
.lead,.lead p{font-size:18px;line-height:1.6}

/* ---------- 3. Ακτίνες κέρσορα ----------
   Πάνω αριστερά, πάνω δεξιά (0), κάτω δεξιά, κάτω αριστερά.
   Κουμπιά: ακτίνα ≈ μισό ύψος, όπως στις προεπισκοπήσεις. */
.r-card{border-radius:28px 0 28px 28px!important}
.r-img,.r-img img,.r-img .elementor-widget-container{border-radius:20px 0 20px 20px!important}
.r-24{border-radius:24px 0 24px 24px!important}
.r-btn,.r-btn .elementor-button{border-radius:26px 0 26px 26px!important}
.r-btn-sm,.r-btn-sm .elementor-button{border-radius:18px 0 18px 18px!important}
.r-btn-xs,.r-btn-xs .elementor-button{border-radius:16px 0 16px 16px!important}
.r-img,.r-card{overflow:hidden}

/* ---------- 4. Κουμπιά ----------
   Η βασική εμφάνιση (navy, 16px/600, 26 0 26 26) είναι στο Elementor kit.

   Δύο χρήσεις, με ξεχωριστούς selectors για να μη μπλέκονται:
   α) Στοιχείο HTML: <a class="btn btn-ghost"> ή <button class="btn btn-primary">.
      Πάντα μαζί με το .btn. Το «body .btn.btn-…» κερδίζει τα
      «.elementor-kit-N a» / «.elementor-kit-N button» του kit.
   β) Widget Button του Elementor: η κλάση (btn-ghost / btn-light) μπαίνει
      στο «CSS Classes» του widget και στυλάρεται μόνο το εσωτερικό
      .elementor-button, ΠΟΤΕ το wrapper. */

/* α) Στοιχεία HTML */
body .btn{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;
	min-height:50px;padding:0 26px;border-radius:26px 0 26px 26px;
	font-family:inherit;font-size:16px;font-weight:600;line-height:1.2;text-decoration:none;cursor:pointer;
	transition:transform .2s var(--dsgn-ease),box-shadow .25s var(--dsgn-ease),background-color .2s,border-color .2s,color .2s;
}
body .btn.btn-primary{
	background:var(--dsgn-navy);color:var(--dsgn-cream);border:0;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(18,42,73,.25),0 6px 16px rgba(18,42,73,.20);
}
body .btn.btn-ghost{
	background:var(--dsgn-white);color:var(--dsgn-navy);border:1px solid rgba(18,42,73,.16);
	box-shadow:0 1px 2px rgba(18,42,73,.06),0 4px 12px rgba(18,42,73,.06);
}
body .btn.btn-light{
	background:var(--dsgn-cream);color:var(--dsgn-navy);border:0;
	box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.25);
}

/* β) Widget Button του Elementor */
.elementor-widget-button .elementor-button{
	display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;
	transition:transform .2s var(--dsgn-ease),box-shadow .25s var(--dsgn-ease),background-color .2s,border-color .2s,color .2s;
	box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(18,42,73,.25),0 6px 16px rgba(18,42,73,.20);
}
.elementor-widget.btn-ghost .elementor-button{
	background:var(--dsgn-white);color:var(--dsgn-navy);border:1px solid rgba(18,42,73,.16);
	box-shadow:0 1px 2px rgba(18,42,73,.06),0 4px 12px rgba(18,42,73,.06);
}
.elementor-widget.btn-light .elementor-button{
	background:var(--dsgn-cream);color:var(--dsgn-navy);border:0;
	box-shadow:0 1px 2px rgba(0,0,0,.25),0 8px 24px rgba(0,0,0,.25);
}

body .btn:active,.elementor-widget-button .elementor-button:active{transform:scale(.97)}

@media (hover:hover){
	body .btn.btn-primary:hover,
	.elementor-widget-button .elementor-button:hover{
		transform:translateY(-2px);color:var(--dsgn-cream);background:var(--dsgn-navy);
		box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(18,42,73,.25),0 12px 26px rgba(18,42,73,.26);
	}
	body .btn.btn-ghost:hover,
	.elementor-widget.btn-ghost .elementor-button:hover{
		transform:translateY(-2px);color:var(--dsgn-navy);background:var(--dsgn-white);border-color:rgba(18,42,73,.28);
		box-shadow:0 2px 4px rgba(18,42,73,.08),0 10px 22px rgba(18,42,73,.10);
	}
	body .btn.btn-light:hover,
	.elementor-widget.btn-light .elementor-button:hover{
		transform:translateY(-2px);color:var(--dsgn-navy);background:var(--dsgn-cream);
		box-shadow:0 2px 4px rgba(0,0,0,.3),0 14px 32px rgba(0,0,0,.32);
	}
}

/* Γραμμή τιμής neon («… στον configurator»): σύνδεσμος στο χρώμα του κειμένου (αρχική σε σκούρο, Neon σε κοραλλί). */
.neon-from a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.neon-from a:hover,.neon-from a:focus{color:inherit}
.neon-from a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:2px}

/* Chips (φίλτρα)
   «html body» για να κερδίζει το «.elementor-kit-N button» του kit. */
html body .chip{
	display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:999px;
	border:1.5px solid var(--dsgn-chip-line);background:var(--dsgn-white);color:var(--dsgn-navy);
	font:inherit;font-size:14px;font-weight:600;cursor:pointer;
	transition:background-color .2s,border-color .2s,transform .2s var(--dsgn-ease);
}
html body .chip.is-active,html body .chip[aria-pressed="true"]{background:var(--dsgn-navy);border-color:var(--dsgn-navy);color:var(--dsgn-cream)}
html body .chip:active{transform:scale(.97)}
/* Ρητά χρώματα σε hover/focus/active (εκτός @media): το kit του Elementor (button:hover/focus → κρεμ σε navy)
   έδινε κρεμ κείμενο σε λευκό φόντο στο κινητό (το πατημένο φίλτρο μένει εστιασμένο) και με Tab.
   Διόρθωση μόνο στα .chip, χωρίς αλλαγή στο kit (απόφαση Πάνου 12/11/2026). */
html body .chip:hover,html body .chip:focus,html body .chip:active{background:var(--dsgn-white);color:var(--dsgn-navy);outline:none}
html body .chip.is-active:hover,html body .chip.is-active:focus,html body .chip.is-active:active,
html body .chip[aria-pressed="true"]:hover,html body .chip[aria-pressed="true"]:focus,html body .chip[aria-pressed="true"]:active{background:var(--dsgn-navy);color:var(--dsgn-cream)}
html body .chip:focus-visible{outline:2px solid var(--dsgn-blue);outline-offset:2px}
@media (hover:hover){
	html body .chip:hover{transform:none;box-shadow:none;background:var(--dsgn-white);color:var(--dsgn-navy)}
	html body .chip:not(.is-active):not([aria-pressed="true"]):hover{border-color:var(--dsgn-navy)}
	html body .chip.is-active:hover,html body .chip[aria-pressed="true"]:hover{background:var(--dsgn-navy);color:var(--dsgn-cream)}
}

/* ---------- 5. Κόκκος (grain) ---------- */
.grain{position:relative;isolation:isolate}
.grain::after{
	content:"";position:absolute;inset:0;border-radius:inherit;
	background-image:url("img/grain.webp");background-size:160px 160px;
	opacity:.22;mix-blend-mode:overlay;pointer-events:none;z-index:0;
}
.grain > *{position:relative;z-index:1}

/* ---------- 6. Γυαλί ---------- */
.glass{
	background:rgba(255,255,255,.55);
	-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
	border:1px solid rgba(255,255,255,.65);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 2px rgba(18,42,73,.06),0 10px 30px rgba(18,42,73,.12);
}
.glass-card{
	background:linear-gradient(180deg,rgba(214,236,250,.92),rgba(190,224,246,.88));
	-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
	border:1px solid rgba(255,255,255,.8);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(64,103,176,.10),0 1px 2px rgba(18,42,73,.06),0 16px 40px rgba(64,103,176,.18);
}
.glass-input,
.glass-card input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=submit]),
.glass-card select,
.glass-card textarea{
	border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.7);color:var(--dsgn-navy);
	border-radius:10px;font:inherit;
	transition:border-color .2s,box-shadow .2s,background-color .2s;
}
.glass-input:focus,
.glass-card input:focus,
.glass-card select:focus,
.glass-card textarea:focus{
	outline:none;background:var(--dsgn-white);border-color:var(--dsgn-blue);box-shadow:0 0 0 3px rgba(64,103,176,.22);
}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
	.glass{background:rgba(255,255,255,.94)}
	.glass-card{background:#D6ECFA}
}

/* ---------- 7. Κάρτες, πάνελ ---------- */
.card{background:var(--dsgn-white);box-shadow:var(--dsgn-shadow-card)}
.panel{background:var(--dsgn-white);box-shadow:var(--dsgn-shadow-panel)}
.step-card{background:var(--dsgn-white);box-shadow:var(--dsgn-shadow-step)}

.card-lift{transition:transform .35s var(--dsgn-ease),box-shadow .35s var(--dsgn-ease)}
.arrow{display:inline-block;transition:transform .3s var(--dsgn-ease)}
@media (hover:hover){
	.card-lift:hover{transform:translateY(-6px);box-shadow:0 2px 6px rgba(18,42,73,.08),0 22px 44px rgba(18,42,73,.16)!important}
	.card-lift:hover .arrow{transform:translateX(5px)}
	.work:hover{box-shadow:none!important}
}

/* Παστέλ φόντα ανά υπηρεσία */
.bg-epigrafes{background-color:var(--dsgn-epigrafes)}
.bg-neon{background-color:var(--dsgn-neon)}
.bg-ektyposeis{background-color:var(--dsgn-ektyposeis)}
.bg-grafistiki{background-color:var(--dsgn-grafistiki)}
.bg-istoselides{background-color:var(--dsgn-istoselides)}
.bg-hero{background-color:var(--dsgn-hero)}
.bg-navy{background-color:var(--dsgn-navy);color:var(--dsgn-cream)}

/* ---------- 8. Εμφάνιση στο scroll ---------- */
@keyframes dsgn-reveal{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}
@supports (animation-timeline: view()){
	body:not(.elementor-editor-active) .card-lift,
	body:not(.elementor-editor-active) .panel,
	body:not(.elementor-editor-active) .step-card,
	body:not(.elementor-editor-active) .glass-card{
		animation:dsgn-reveal linear both;animation-timeline:view();animation-range:entry 0% entry 35%;
	}
}

/* ---------- 9. Κέρσορες ---------- */
html,body{cursor:var(--dsgn-cursor)}
a,button,summary,select,label[for],
.btn,.elementor-button,.chip,.card-lift,[role="button"]{cursor:var(--dsgn-cursor-pointer)}
.on-dark{cursor:var(--dsgn-cursor-dark)}
.on-dark a,.on-dark button{cursor:var(--dsgn-cursor-pointer)}
input,textarea{cursor:text}

/* ---------- 10. Λιγότερη κίνηση ---------- */
@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}
	body .btn,.elementor-widget-button .elementor-button,html body .chip,.card-lift,.arrow{transition:none!important}
	body .btn:hover,body .btn:active,.elementor-widget-button .elementor-button:hover,.elementor-widget-button .elementor-button:active,.card-lift:hover{transform:none!important}
	.card-lift,.panel,.step-card,.glass-card{animation:none!important}
}