/* ═══════════════════════════════════════════════════════════════════════════
   ERASMUS LIFE ATHENS — ΘΕΜΑ «ΑΙΓΑΙΟ»
   Εναλλακτική χρωματική εκδοχή: μπλε φόντο, λευκά γράμματα.

   Το αρχείο ΔΕΝ αντιγράφει το site.css — μόνο ξαναδίνει τιμές στα tokens του.
   Κάθε κανόνας σχήματος, απόστασης και κίνησης μένει ένας και μοναδικός εκεί.
   Σβήσε αυτό το αρχείο και το site γυρίζει στο μπεζ χωρίς άλλη ενέργεια.

   Δεν είναι ένα μπλε: είναι πέντε. Η σελίδα κάθεται σε βαθύ ναυτικό, οι
   εναλλασσόμενες ζώνες ανεβαίνουν ένα σκαλί, οι καρτέλες ένα ακόμα, η ζώνη
   ολικής ροής βουτάει σχεδόν στο μαύρο, και το γαλάζιο του Αιγαίου κρατιέται
   για ό,τι πρέπει να τραβήξει το μάτι. Το λευκό περιθώριο των φωτογραφιών
   μένει λευκό — εκεί ζει το ελληνικό δίπολο.
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-theme="blue"]{
 /* ── οι πέντε επιφάνειες, από πάνω προς τα κάτω ── */
 --canvas:#0B2744;          /* η σελίδα */
 --canvas-2:#0F3357;        /* εναλλασσόμενη ζώνη */
 --paper:#143B63;           /* καρτέλες, πλάκες */
 --fill-dark:#05182E;       /* γεμάτες σκούρες επιφάνειες */
 --footer-bg:#04152A;       /* το υποσέλιδο κλείνει τη σελίδα ακόμα πιο βαθιά */
 --frame:#EEF5FC;           /* το περιθώριο της φωτογραφίας μένει λευκό */

 /* ── γράμματα ── */
 --ink:#EFF5FB;             /* 13.8:1 πάνω στη σελίδα */
 --cream:#F4F9FE;           /* κείμενο πάνω σε σκούρο ή σε γεμάτο κουμπί */
 --light:#EAF2FA;
 --whisper-ink:#AEC8E2;     /* λεζάντες, υπότιτλοι — 8.8:1 */
 --whisper:#5A7DA4;         /* γραμμές, διακεκομμένα, ανενεργά */

 /* ── το γαλάζιο ──
    Δύο αποχρώσεις, γιατί ένα χρώμα δεν μπορεί να είναι ταυτόχρονα φόντο
    κουμπιού με λευκά γράμματα ΚΑΙ κείμενο πάνω σε ναυτικό. */
 --signal:#1D6FC0;          /* γέμισμα: λευκό από πάνω = 4.9:1 */
 --signal-ink:#86C3F2;      /* accent πάνω στη σελίδα = 8.0:1 */
 --stamp-ink:#8FC4F0;       /* η σφραγίδα */
 --brand:#8FC4F0;           /* το σήμα και τα χαρακτικά */

 /* ── κανάλια για τις διαφάνειες ── */
 --paper-rgb:234,242,250;   /* φωτεινές επικαλύψεις πάνω σε σκούρο */
 --ink-rgb:239,245,251;    /* κείμενο με διαφάνεια: ακολουθεί το --ink */
 --shade-rgb:1,8,18;       /* σκιές και σκοτεινιάσματα: μένουν σκοτεινά */
 --signal-rgb:29,111,192;
 --whisper-rgb:90,125,164;
 --canvas-rgb:11,39,68;     /* η κολλημένη μπάρα */
 --stamp-rgb:143,196,240;
 --brand-rgb:143,196,240;

 --line:rgba(143,196,240,.30);
 --shadow:4px 4px 0 rgba(0,0,0,.30);
}

/* ── Σημεία που το site.css τα γράφει με σταθερό χρώμα ──
   Είναι ελάχιστα και όλα ζουν μέσα στη σκούρα ζώνη, όπου το μπεζ θέμα
   χρησιμοποιούσε ένα ξεπλυμένο κοραλί. Εδώ γίνονται ξεπλυμένο γαλάζιο. */
:root[data-theme="blue"] .bleed .pbox .pk,
:root[data-theme="blue"] .visa-no{color:#A9D4F7}
:root[data-theme="blue"] .bleed summary::after{border-color:#A9D4F7}
:root[data-theme="blue"] .bleed.deep{background:#03101F}
:root[data-theme="blue"] .wa.show:hover,
:root[data-theme="blue"] .tray-tab:hover{background:#1B4E85}

/* Το περίγραμμα εστίασης και η επιλογή κειμένου χρειάζονται τη φωτεινή
   απόχρωση: το γέμισμα του κουμπιού είναι πολύ σκούρο για να φανεί πάνω
   στο ναυτικό. */
:root[data-theme="blue"] :focus-visible{outline-color:var(--signal-ink)}
:root[data-theme="blue"] ::selection{background:var(--signal-ink);color:#06203A}

/* Οι φωτογραφίες σε σκούρο φόντο δείχνουν πιο «καμένες» απ' ό,τι σε μπεζ —
   μια ιδέα λιγότερη φωτεινότητα τις ξαναφέρνει στη θέση τους. */
:root[data-theme="blue"] .ph img,
:root[data-theme="blue"] .plate img{filter:brightness(.94) saturate(1.04)}

/* Ο κύκλος γύρω από το «stamped.» ζει μέσα σε data: URI, όπου η var() δεν
   φτάνει — το μόνο σημείο του site που χρειάζεται να ξαναγραφτεί ολόκληρο.
   Ίδιο σχήμα, ίδια πάχη· αλλάζει μόνο το μελάνι. */
:root[data-theme="blue"] h1 .l:last-child>span::after{
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 160' preserveAspectRatio='none'%3E%3Cellipse cx='200' cy='80' rx='193' ry='73' fill='none' stroke='%2386C3F2' stroke-width='7'/%3E%3Cellipse cx='200' cy='80' rx='181' ry='62' fill='none' stroke='%2386C3F2' stroke-width='2.4'/%3E%3C/svg%3E") center/100% 100% no-repeat;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ΟΙ ΦΩΤΕΙΝΕΣ ΖΩΝΕΣ
   Οι εναλλασσόμενες ενότητες (.alt) γυρίζουν σε ζεστό υπόλευκο — όχι καθαρό
   λευκό, μια ιδέα προς το μπεζ, ώστε να θυμίζει το χαρτί της αρχικής εκδοχής
   και να μη «κόβει» δίπλα στο ναυτικό.

   Δεν ξαναγράφεται κανένας κανόνας: τα ίδια tokens ξαναορίζονται ΤΟΠΙΚΑ πάνω
   στην ενότητα και η αλλαγή κυλάει μόνη της σε ό,τι ζει μέσα της — τίτλους,
   λεζάντες, καρτέλες, κουμπιά, γραμμές.

   Το μπλε του κουμπιού μένει ΤΟ ΙΔΙΟ και στις δύο ζώνες. Εκεί κρατιέται η
   αρμονία: αλλάζει το χαρτί, όχι η ταυτότητα.
   ═══════════════════════════════════════════════════════════════════════════ */
/* Οι σελίδες που δεν έχουν .alt (φόρμα, εκδρομές, events) δεν έχουν και
   εναλλαγή — μένουν ένα ενιαίο ναυτικό από πάνω ως κάτω. Τους δίνουμε μία
   φωτεινή ζώνη στο σημείο που μετράει: εκεί που ο επισκέπτης διαβάζει ή
   συμπληρώνει. Τις διαλέγουμε με το aria-labelledby τους, που είναι
   σταθερό, αντί για σειρά που θα έσπαγε με την πρώτη προσθήκη ενότητας. */
:root[data-theme="blue"] .alt,
:root[data-theme="blue"] body.p-book    section[aria-labelledby="h-form"],
:root[data-theme="blue"] body.p-events  section[aria-labelledby="h-feed"],
:root[data-theme="blue"] body.p-trips   section[aria-labelledby="h-how"]{
 --canvas:#F4F1E9;          /* το χαρτί */
 --canvas-2:#EBE6DA;        /* μια σκιά πιο κάτω, για ένθετα */
 --paper:#FCFAF5;           /* καρτέλες */
 --frame:#FFFFFF;           /* το περιθώριο της φωτογραφίας, καθαρό λευκό */

 --ink:#122540;             /* 13.6:1 */
 --ink-rgb:18,37,64;
 --cream:#FCFAF5;           /* κείμενο πάνω σε γεμάτο κουμπί */
 --light:#FCFAF5;
 --whisper-ink:#55657A;     /* λεζάντες — 5.3:1 */
 --whisper:#A9B3C0;

 --signal:#1D6FC0;          /* ΙΔΙΟ με τις σκούρες ζώνες */
 --signal-ink:#15538F;      /* accent σε χαρτί — 7.0:1 */
 --stamp-ink:#1B4C85;
 --brand:#17376E;
 --brand-rgb:23,55,110;
 --stamp-rgb:27,76,133;
 --signal-rgb:29,111,192;
 --whisper-rgb:130,142,158;
 --paper-rgb:252,250,245;

 background:var(--canvas);
 color:var(--ink);
}

/* Η φωτογραφία δεν χρειάζεται πια σκούρεμα εδώ — το είχαμε βάλει για το
   ναυτικό φόντο, πάνω σε χαρτί θα την έσβηνε. */
:root[data-theme="blue"] .alt .ph img,
:root[data-theme="blue"] .alt .plate img,
:root[data-theme="blue"] body.p-book   section[aria-labelledby="h-form"] .ph img,
:root[data-theme="blue"] body.p-events section[aria-labelledby="h-feed"] .ph img,
:root[data-theme="blue"] body.p-trips  section[aria-labelledby="h-how"] .ph img{filter:none}

/* Λεπτή γραμμή στο σημείο που το χαρτί συναντά το ναυτικό: χωρίς αυτήν η
   αλλαγή διαβάζεται σαν κενό, όχι σαν πέρασμα σε άλλη σελίδα. */
:root[data-theme="blue"] .alt,
:root[data-theme="blue"] body.p-book    section[aria-labelledby="h-form"],
:root[data-theme="blue"] body.p-events  section[aria-labelledby="h-feed"],
:root[data-theme="blue"] body.p-trips   section[aria-labelledby="h-how"]{
 border-block:1px solid rgba(23,55,110,.18);
}

/* ── Το σήμα χωρίς τον κύκλο ──────────────────────────────────────────────
   Το logo-white-sm.png είναι λευκό σχέδιο σε διάφανο φόντο. Στο μπεζ κάθεται
   μέσα σε βαθυγάλαζο κύκλο και διαβάζεται καθαρά. Εδώ όμως ο κύκλος παίρνει
   το ανοιχτό --brand, οπότε λευκό πάνω σε γαλάζιο — το σχέδιο εξαφανιζόταν.

   Σκούρο φόντο δεν χρειάζεται μετάλλιο: το λευκό σήμα πατάει κατευθείαν
   πάνω στο ναυτικό. Το εικονίδιο μεγαλώνει στο 100% του κουτιού για να
   κρατήσει το ίδιο οπτικό βάρος τώρα που δεν έχει περιθώριο κύκλου. */
:root[data-theme="blue"] .brand .mk,
:root[data-theme="blue"] .ft-mk{background:transparent}
:root[data-theme="blue"] .brand .mk img,
:root[data-theme="blue"] .ft-mk img{width:100%}