/* Οι γραμματοσειρές φορτώνονται με <link> στην κεφαλίδα (includes/template-assets.php) — όχι @import, για ταχύτητα. */

/* Miama Nueva — self-hosted (27/8). Καμία διαθέσιμη Google Font
   καλλιγραφικού στυλ (Great Vibes, Alex Brush, Tangerine, ακόμα και το
   "Miama" απλό στο Google Fonts) δεν απέδιδε πραγματικά ελληνικά — όλες
   έπεφταν σε γενική εφεδρική γραμματοσειρά. Ο πελάτης πρότεινε Miama
   Nueva, δοκιμάστηκε με πραγματικό αρχείο (.ttf) που έστειλε, αποδίδει
   σωστά ελληνικά καλλιγραφικά γράμματα. */
@font-face{
	font-family:'Miama Nueva';
	src:url('../../assets/fonts/miamanueva.ttf') format('truetype');
	font-display:swap;
}

:root{
	--ink:#5c4a30; --ink-soft:#8a7455; --accent:#755d3a;
	--bg:#f4ebe1; --card:#fffdfa;
	--display:'Cormorant Garamond',serif; --body:'Inter',sans-serif;
}
*{ box-sizing:border-box; }
body{ margin:0; font-family:var(--body); color:var(--ink); background:var(--bg); line-height:1.6; }
img,svg{ display:block; max-width:100%; }
.wrap{ max-width:1100px; margin:0 auto; }
.eyebrow{ display:block; font-size:11px; letter-spacing:.2em; color:var(--accent); font-weight:600; margin-bottom:10px; text-align:center; }
.section-title{ font-family:var(--display); font-size:28px; font-weight:500; text-align:center; margin-bottom:26px; }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============================================================
   HERO — χρυσή διπλή κορνίζα + κρεμ χαρτί με torn edges σε ΟΛΕΣ
   τις πλευρές. "Αίτημα πελάτη" (27/8) — Ανδριανή & Αχιλλεύς design.
   Το ίδιο background.jpg περιέχει ήδη την κορνίζα + υφή χαρτιού —
   ΟΛΟ το κείμενο είναι δυναμική επικάλυψη.
   ============================================================ */
.hero{
	position:relative; min-height:100vh; min-height:100dvh;
	overflow:hidden;
	background:#e8ddc4; /* fallback χρώμα όσο φορτώνει το βίντεο (ζεστό ηλιοβασίλεμα) */
}
.hero-video{
	position:absolute; inset:0; width:100%; height:100%;
	object-fit:cover; object-position:center; z-index:0;
}
/* Θολωμένο "φόντο" αντίγραφο του ίδιου βίντεο — ενεργό ΜΟΝΟ σε
   desktop (βλ. media query πιο κάτω) για το πλατύ hero. Σε κινητό
   το κύριο .hero-video γεμίζει ήδη πλήρως, δεν χρειάζεται. */
.hero-video-bg{ display:none; }
/* Ελαφρύ, ζεστό scrim πάνω στο βίντεο — βελτιώνει την αναγνωσιμότητα
   του κειμένου χωρίς να κρύβει το βίντεο. */
.hero::before{
	content:''; position:absolute; inset:0; z-index:1;
	background:linear-gradient(180deg, rgba(40,30,10,.18) 0%, rgba(40,30,10,.05) 30%, rgba(40,30,10,.05) 70%, rgba(40,30,10,.22) 100%);
}
.hero-content{
	position:absolute; inset:0; z-index:2;
	display:flex; flex-direction:column; align-items:center; justify-content:center;
	text-align:center; padding:60px 15%;
}
.hero-content .hero-eyebrow-en,
.hero-content .hero-subtitle,
.hero-content .hero-date{ text-shadow:0 1px 10px rgba(255,250,235,.6), 0 1px 3px rgba(255,250,235,.8); }
.hero-content .hero-names .n1, .hero-content .hero-names .n2, .hero-content .hero-names .and{
	text-shadow:0 2px 16px rgba(255,250,235,.55), 0 1px 4px rgba(255,250,235,.7);
}
.hero-content .scroll-cue{ text-shadow:0 1px 8px rgba(255,250,235,.6); }

/* "We are getting married" — πιο καλλιγραφικό (Miama Nueva αντί για
   Cormorant Garamond) + μεγαλύτερη απόσταση από τα ονόματα από κάτω
   (ζητήθηκε ρητά: "να μην είναι τόσο κολλητό"). Βρέθηκε 28/8. */
.hero-eyebrow-en{
	font-family:'Miama Nueva',var(--display),cursive; font-size:22px; font-weight:400;
	color:var(--hero-text, #c9a35e); margin-bottom:32px;
}
.ornament{ display:flex; align-items:center; gap:10px; color:var(--hero-text, #c9a35e); margin-bottom:22px; }
.ornament span{ width:44px; height:1px; background:var(--hero-text, #c9a35e); opacity:.6; }
.ornament.small span{ width:30px; }
.ornament.small{ margin-bottom:18px; margin-top:4px; }

.hero-names{ margin:0 0 4px; line-height:1; }
.hero-names .n1, .hero-names .n2{
	display:block; font-family:'Miama Nueva',var(--display),cursive; font-weight:400;
	font-size:clamp(34px, 11.5vw, 70px); color:var(--hero-text, #c9a35e); line-height:1.25; white-space:nowrap;
}

/* ---- Εφέ "πτώσης" γραμμάτων στα ονόματα (ζητήθηκε ρητά, 27/8) ----
   Κάθε γράμμα είναι ξεχωριστό <span style="--i:N"> (βλ. PHP helper
   evi_w20_split_letters). CSS keyframe: opacity 0→1 + πτώση από πάνω
   με ελαφρύ "bounce", staggered ανά γράμμα μέσω --i. */
.letter{ display:inline-block; }

/* ---- 5 διαθέσιμα εφέ εμφάνισης γραμμάτων (επιλογή στο wp-admin,
   πεδίο "Εφέ εμφάνισης γραμμάτων στα ονόματα") — ζητήθηκε ρητά
   "διάφορα εφέ εκτός από ένα". Ενοποιημένο σύστημα, ίδιο σε όλα τα
   templates 18-23 (πριν ήταν ασυνεπές: 20-23 το είχαν ΠΑΝΤΑ ενεργό
   αγνοώντας το πεδίο, 18-19 το σέβονταν). Βρέθηκε/διορθώθηκε 29/8. */
.hero-letters-fx--fall .letter{
	opacity:0; transform:translateY(-46px);
	animation:eviLetterDrop .7s cubic-bezier(.25,.8,.3,1.3) forwards;
	animation-delay:calc(var(--i) * 55ms + .3s);
}
@keyframes eviLetterDrop{
	0%{ opacity:0; transform:translateY(-46px); }
	60%{ opacity:1; }
	100%{ opacity:1; transform:translateY(0); }
}

.hero-letters-fx--fade .letter{
	opacity:0;
	animation:eviLetterFade .5s ease forwards;
	animation-delay:calc(var(--i) * 45ms + .2s);
}
@keyframes eviLetterFade{ from{ opacity:0; } to{ opacity:1; } }

.hero-letters-fx--slide_up .letter{
	opacity:0; transform:translateY(28px);
	animation:eviLetterSlideUp .6s cubic-bezier(.25,.8,.3,1) forwards;
	animation-delay:calc(var(--i) * 50ms + .25s);
}
@keyframes eviLetterSlideUp{
	0%{ opacity:0; transform:translateY(28px); }
	100%{ opacity:1; transform:translateY(0); }
}

.hero-letters-fx--blur_in .letter{
	opacity:0; filter:blur(8px);
	animation:eviLetterBlur .6s ease forwards;
	animation-delay:calc(var(--i) * 50ms + .25s);
}
@keyframes eviLetterBlur{
	0%{ opacity:0; filter:blur(8px); }
	100%{ opacity:1; filter:blur(0); }
}

.hero-letters-fx--typewriter .letter{
	opacity:0;
	animation:eviLetterType .01s steps(1) forwards;
	animation-delay:calc(var(--i) * 90ms + .2s);
}
@keyframes eviLetterType{ to{ opacity:1; } }

@media (prefers-reduced-motion: reduce){
	.letter{ animation:none !important; opacity:1 !important; transform:none !important; filter:none !important; }
}
.hero-names .n2{ margin-top:20px; padding-top:6px; }
.hero-names .and{
	display:block; font-family:'Miama Nueva',var(--display),cursive; font-weight:400;
	font-size:34px; font-style:italic; color:var(--hero-text, #c9a35e); margin:8px 0 14px;
}

/* ---- Χρώμα κειμένου hero — ενοποιήθηκε (28/8): υπότιτλος και
   ημερομηνία χρησιμοποιούσαν var(--ink)/var(--ink-soft) (καφέ),
   ενώ τα ονόματα ήδη χρυσά — έδειχνε ασυνεπές ("κάποια χρυσά,
   κάποια σκούρα"). Όλα πλέον var(--hero-text), ρυθμίσιμο από το
   wp-admin (πεδίο "Χρώμα κειμένου στο hero"). ---- */
.hero-subtitle{ font-size:14px; color:var(--hero-text, #c9a35e); line-height:1.7; max-width:100%; margin:6px auto 0; }
.hero-date{ font-family:var(--display); font-size:28px; letter-spacing:.08em; color:var(--hero-text, #c9a35e); margin-top:4px; }

/* Αντίστροφη μέτρηση (5/9) — μετακόμισε σε δικό της section μετά το
   hero (βλ. template.php), οπότε δεν είναι πια πάνω στο βίντεο· χρώματα
   var(--ink)/var(--ink-soft) όπως τα υπόλοιπα sections, ίδιο μοτίβο με
   wedding-24/25. */
.countdown-grid{ display:flex; justify-content:center; gap:22px; }
.countdown-grid .cd-cell{ display:flex; flex-direction:column; align-items:center; min-width:36px; }
.countdown-grid .cd-cell:not(:last-child){ border-right:1px solid rgba(168,132,63,.35); padding-right:22px; }
.countdown-grid .cd-num{ font-family:var(--display); font-size:32px; font-weight:600; color:var(--ink); line-height:1; }
.countdown-grid .cd-label{ font-size:9px; letter-spacing:.1em; color:var(--ink-soft); margin-top:6px; }

.scroll-cue{
	display:inline-block; margin-top:34px; font-size:11px; letter-spacing:.15em; color:var(--hero-text, #c9a35e); text-decoration:none; border-bottom:1px solid var(--hero-text, #c9a35e); padding-bottom:3px;
	transition:opacity .25s ease;
}
/* Στο βίντεο hero (wedding-20) οι κύκνοι κάθονται στο κάτω-μεσαίο
   τμήμα του πλάνου — το κουμπί, ως τελευταίο στοιχείο του κάθετα
   κεντραρισμένου περιεχομένου, προσγειωνόταν ακριβώς πάνω στους
   λαιμούς τους. Με margin-top:auto μέσα στο flex-column
   .hero-content, το υπόλοιπο περιεχόμενο μένει φυσικά κεντραρισμένο
   ενώ το κουμπί σπρώχνεται στο κάτω άκρο, περνώντας τους κύκνους.
   Βρέθηκε 27/8. */
.hero-content .scroll-cue{ margin-top:auto; padding-top:34px; }
.scroll-cue:hover{ opacity:.7; }

/* ---- ΓΕΝΙΚΑ SECTIONS ---- */
.section{ padding:60px 26px; background:var(--bg); }
.section.alt{ background:var(--card); }
.section-inner{ max-width:600px; margin:0 auto; }

.family-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:center; margin-bottom:28px; }
.family-block h4{ font-size:10px; letter-spacing:.14em; color:var(--accent); margin-bottom:8px; }
.family-block p{ font-family:var(--display); font-style:italic; font-size:18px; line-height:1.5; margin:0 0 4px; }
.family-block p:last-child{ margin-bottom:0; }

.venues-row{ display:flex; flex-direction:column; gap:18px; }
.venue-card{ background:var(--card); border-radius:4px; padding:28px 24px; text-align:center; border:1px solid rgba(168,132,63,.2); flex:1; }
.venue-icon{ width:28px; height:28px; margin:0 auto 14px; color:var(--accent); }
.venue-name{ font-family:var(--display); font-style:italic; font-weight:600; font-size:23px; margin-bottom:6px; }
.venue-addr{ font-size:13px; color:var(--ink-soft); margin-bottom:10px; }
.venue-time{ font-size:12px; letter-spacing:.06em; color:var(--accent); font-weight:600; }
.venue-map{ margin-top:16px; border-radius:4px; overflow:hidden; }
.venue-btn-row{ display:flex; gap:10px; margin-top:16px; justify-content:center; }
.venue-btn{ font-size:12px; padding:9px 16px; border-radius:999px; border:1px solid var(--accent); color:var(--ink); text-decoration:none; }
.venue-btn.solid{ background:var(--accent); color:#fff; border-color:var(--accent); }

.timeline{ position:relative; padding-left:26px; max-width:400px; margin:0 auto; }
.timeline::before{ content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:rgba(168,132,63,.3); }
.tl-item{ position:relative; margin-bottom:26px; }
.tl-item::before{ content:''; position:absolute; left:-26px; top:4px; width:9px; height:9px; border-radius:50%; background:var(--accent); }
.tl-time{ font-family:var(--display); font-style:italic; font-size:19px; color:var(--accent); margin-bottom:2px; }
.tl-label p{ font-size:13px; color:var(--ink-soft); margin:2px 0 0; }

.gallery-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; max-width:600px; margin:0 auto; }
.gallery-grid div{ aspect-ratio:1/1; border-radius:2px; background-color:#e8ddc9; }
.gallery-note{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:18px; }
.gallery-note a{ color:var(--accent); }

.rsvp-form, .wish-form{ max-width:420px; margin:0 auto; }
.rsvp-deadline{ text-align:center; font-size:12px; color:var(--ink-soft); margin-bottom:20px; }
.rsvp-note{ text-align:center; font-size:13px; font-style:italic; color:var(--ink-soft); margin:0 0 16px; }
.rsvp-field{ margin-bottom:16px; text-align:left; }
.rsvp-field label{ display:block; font-size:11px; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:6px; }
.rsvp-form input[type=text], .rsvp-form input[type=number], .rsvp-form textarea,
.wish-form input[type=text], .wish-form textarea{
	width:100%; padding:13px 15px; border:1px solid rgba(168,132,63,.25);
	border-radius:4px; font-family:var(--body); font-size:14px; background:var(--card); color:var(--ink);
}
.radio-row{ display:flex; gap:20px; }
.radio-row label{ display:flex; align-items:center; gap:6px; font-size:13px; text-transform:none; letter-spacing:0; }
.rsvp-btn{ width:100%; padding:14px; background:var(--accent); color:#fff; border:none; border-radius:4px; font-size:14px; font-weight:600; margin-top:6px; cursor:pointer; }
.rsvp-contact{ text-align:center; font-size:12px; color:var(--ink-soft); margin-top:18px; max-width:420px; margin-left:auto; margin-right:auto; }

.wishes-grid{ max-width:600px; margin:0 auto 26px; }
.wish-card{ background:var(--card); border-radius:4px; padding:16px 18px; margin-bottom:12px; border:1px solid rgba(168,132,63,.2); }
.wish-name{ font-size:12px; font-weight:600; color:var(--accent); margin-top:6px; }
.wish-text{ font-family:var(--display); font-style:italic; font-size:14px; color:var(--ink-soft); line-height:1.5; }

.gift-message{ font-size:14px; color:var(--ink-soft); line-height:1.7; max-width:440px; margin:0 auto 24px; }
.gift-card{ background:var(--card); border-radius:4px; padding:26px 24px; max-width:360px; margin:0 auto; border:1px solid rgba(168,132,63,.2); }
.gift-holder{ font-family:var(--display); font-style:italic; font-size:19px; margin-bottom:10px; }
.gift-iban{ font-size:15px; letter-spacing:.03em; font-weight:600; color:var(--accent); margin-bottom:6px; word-break:break-all; }
.gift-bank{ font-size:12px; color:var(--ink-soft); margin-bottom:16px; }
.gift-copy-btn{
	font-size:12px; font-weight:600; padding:9px 18px; border-radius:999px;
	border:1px solid var(--accent); background:transparent; color:var(--ink); cursor:pointer;
}
.gift-copy-btn:hover{ background:var(--accent); color:#fff; }

/* Footer — πλέον χρησιμοποιεί το ΙΔΙΟ accent χρώμα του template
   (πράσινο/χρυσό/καφέ ανάλογα) αντί για σταθερό καφέ φόντο, με λευκά
   γράμματα — ζητήθηκε ρητά από πελάτισσα ("να είναι το πράσινο που
   έχει η γραμματοσειρά πιο πάνω, με λευκά γράμματα"). Βρέθηκε 28/8.
   Προσαρμόζεται αυτόματα ανά template μέσω var(--accent). */
.footer{ background:var(--accent); color:#fff; text-align:center; padding:50px 26px; }
.footer .monogram{ font-family:var(--display); font-style:italic; font-size:17px; width:44px; height:44px; border-radius:50%; border:1.5px solid #fff; display:flex; align-items:center; justify-content:center; color:#fff; background:rgba(255,255,255,.12); margin:0 auto 16px; }
.footer-logo-img{ max-width:130px; max-height:90px; width:auto; height:auto; margin:0 auto 16px; display:block; }
.footer h3{ font-family:var(--display); font-style:italic; font-size:21px; margin-bottom:20px; color:#fff; }
.pdf-download-btn{
	font-family:var(--body); font-size:13px; font-weight:600; letter-spacing:.02em;
	border:1px solid #fff; color:#fff; background:transparent;
	padding:12px 24px; border-radius:999px; cursor:pointer; margin-bottom:6px;
	display:inline-block; text-decoration:none;
}
.pdf-download-btn:hover{ background:rgba(255,255,255,.08); }
.upload-note{ font-size:12px; margin-top:18px; opacity:.85; }
.upload-note a{ color:#fff; text-decoration:underline; }

/* ============================================================
   DESKTOP — πλατύ, πλήρους πλάτους hero με "θολωμένο φόντο" πίσω
   από το καθαρό, κάθετο βίντεο. Βρέθηκε 27/8-28/8: το βίντεο είναι
   κάθετο (448×772) — σε πλατιά οθόνη το object-fit:cover το έκοβε
   ώστε να μη φαίνονται οι κύκνοι· η εναλλακτική bounded κάρτα
   (μικρή, κάθετη, σαν κινητό) έδειχνε ασύμμετρη με τις παρακάτω
   πλατιές ενότητες. Λύση που ζητήθηκε ρητά: πλατύ hero παντού —
   δύο αντίγραφα του ΙΔΙΟΥ βίντεο, το πίσω θολωμένο+μεγεθυμένο ώστε
   να γεμίζει όλο το πλάτος σαν ατμοσφαιρικό φόντο, το μπροστινό σε
   πλήρες ύψος με κλειδωμένη αναλογία — έτσι το κύριο βίντεο ΔΕΝ
   κόβεται καθόλου, ενώ το hero δείχνει πλατύ σε όλη την οθόνη.
   ============================================================ */
@media (min-width:900px){
	.hero-video-bg{
		display:block; position:absolute; inset:0; width:100%; height:100%;
		object-fit:cover; object-position:center; z-index:0;
		filter:blur(50px) brightness(.65) saturate(1.15);
		transform:scale(1.2); /* αποφεύγει ορατά, φωτεινά άκρα γύρω από το blur */
	}
	.hero-video{
		position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
		width:auto; height:100%; max-height:100vh;
		aspect-ratio:448/772; max-width:92vw;
		object-fit:cover; z-index:1;
		box-shadow:0 30px 90px rgba(0,0,0,.5);
	}
	/* Το .hero-content ήταν inset:0 πάνω στο ΠΛΑΤΥ .hero (πλήρες
	   πλάτος οθόνης πλέον, μετά το wide-hero fix) — το κείμενο άπλωνε
	   σε όλο αυτό το πλάτος αντί να μένει μέσα στο στενό, καθαρό
	   βίντεο στο κέντρο, ξεχειλίζοντας στο θολωμένο φόντο. Το
	   περιορίζω τώρα στην ΙΔΙΑ bounded περιοχή με το .hero-video.
	   Βρέθηκε 28/8. */
	.hero-content{
		inset:auto; top:50%; left:50%; transform:translate(-50%,-50%);
		width:auto; height:100%; max-height:100vh;
		aspect-ratio:448/772; max-width:92vw;
		padding:60px 40px;
	}

	.section{ padding:100px 60px; }
	.section-title{ font-size:36px; margin-bottom:40px; }
	.family-grid{ grid-template-columns:1fr 1fr; gap:60px; max-width:700px; margin:0 auto 30px; }
	.family-block p{ font-size:20px; }
	.venues-row{ flex-direction:row; max-width:900px; margin:0 auto; gap:26px; }
	.gallery-grid{ grid-template-columns:repeat(4,1fr); max-width:900px; gap:10px; }
	.footer{ padding:80px 26px; }
}

@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   PRINT / "Λήψη σε PDF"
   ============================================================ */
@media print{
	body{ background:#fff !important; color:#000 !important; }
	.hero{ background:#fff !important; min-height:auto !important; padding:26px 20px !important; }
	.section, .section.alt{ background:#fff !important; padding:26px 20px !important; }
	.reveal{ opacity:1 !important; transform:none !important; }
	.hero-eyebrow-en, .eyebrow, .venue-time, .tl-time, .cd-label{ color:#555 !important; }
	.hero-names .n1, .hero-names .n2, .section-title, .venue-name, .hero-date, .cd-num{ color:#000 !important; }
	.cd-cell:not(:last-child){ border-color:#ccc !important; }
	.scroll-cue, .rsvp-form, .wish-form, .pdf-download-btn, .venue-map, .venue-btn-row, .gallery-note, .upload-note, .gift-copy-btn{ display:none !important; }
	.footer{ background:#fff !important; color:#000 !important; padding:26px 20px !important; }
	.footer .monogram{ border-color:#000 !important; color:#000 !important; background:none !important; }
	a{ color:#000 !important; text-decoration:none !important; }
	.venue-card, .wish-card{ border:1px solid #ccc !important; break-inside:avoid; }
}