/* ============================================================
   ALFA PLAN CONSTRUCTIONS GROUP — shared design system
   Τυπογραφία, χρώματα, navigation, κινήσεις.
   Άλλαξε εδώ και αλλάζουν όλες οι σελίδες.
   ============================================================ */

:root {
    --navy: #171e19;
    --sage: #b7c6c2;
    --taupe: #9f8d8b;
    --cyan: #d5f4f9;
    --charcoal: #302b2f;

    /* Γραμματοσειρές με πλήρη ελληνική & λατινική υποστήριξη */
    --font-display: 'Fira Sans Extra Condensed', 'Fira Sans Condensed', 'Roboto Condensed', 'Noto Sans Display', Impact, sans-serif;
    --font-body: 'Manrope', 'Noto Sans', system-ui, -apple-system, sans-serif;

    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@view-transition { navigation: auto; }

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font-body);
    background-color: var(--navy);
    cursor: crosshair;
    overflow-x: hidden;
}

/* Το `html` μπροστά ανεβάζει τη specificity ώστε να μη μας
   ακυρώνει το preflight του Tailwind CDN, που φορτώνει μετά. */
html h1, html h2, html h3, html h4, .font-display {
    font-family: var(--font-display);
    font-weight: 800;
    letter-spacing: -0.005em;
    line-height: 0.95;
}

/* Ελαφρώς πιο ανοιχτό tracking στα ελληνικά κεφαλαία — αλλιώς κλείνουν */
html[lang="el"] h1,
html[lang="el"] h2,
html[lang="el"] h3,
html[lang="el"] h4,
html[lang="el"] .font-display { letter-spacing: 0.004em; }

.text-outline {
    -webkit-text-stroke: 1px var(--sage);
    color: transparent;
}

/* ── FIT-TO-WIDTH TYPOGRAPHY ──────────────────────────────────
   Οι τίτλοι υπολογίζονται από JS ώστε να γεμίζουν ακριβώς το
   πλάτος τους — δουλεύει σε κάθε γλώσσα και κάθε οθόνη.        */

.fit {
    display: inline-block;
    white-space: nowrap;
    line-height: 0.86;
    font-size: 11vw; /* αρχική τιμή πριν μπει το JS */
}

.fit-wrap { display: block; width: 100%; }

/* Στο κινητό το 100vh περιλαμβάνει τη μπάρα διευθύνσεων, οπότε το
   περιεχόμενο κόβεται. Το dvh ακολουθεί το πραγματικό ορατό ύψος. */
.min-h-dvh { min-height: 100vh; min-height: 100dvh; }

/* ── NAVIGATION ─────────────────────────────────────────────── */

.mix-blend-nav { mix-blend-mode: difference; }

.nav-scrolled {
    background-color: rgba(23, 30, 25, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
    mix-blend-mode: normal !important;
}

.nav-link { position: relative; }
.nav-link::after {
    content: '';
    position: absolute;
    left: 0; bottom: -6px;
    width: 0; height: 1px;
    background: currentColor;
    transition: width 0.4s var(--ease);
}
@media (hover: hover) and (pointer: fine) {
    .nav-link:hover::after { width: 100%; }
}
.nav-link[aria-current="page"] { color: var(--sage); }
.nav-link[aria-current="page"]::after { width: 100%; background: var(--sage); }

/* ── ΚΟΥΜΠΙΑ-ΣΦΡΑΓΙΔΑ ─────────────────────────────────────────
   Διπλό μετατοπισμένο περίγραμμα σαν σφραγίδα πιστοποίησης. Στο
   hover το πίσω πλαίσιο κουμπώνει στο μπροστινό και το γέμισμα
   σαρώνει από αριστερά. Ο κύβος στα αριστερά είναι νεύμα στα
   τετράγωνα του λογοτύπου.

   Χρησιμοποιείται και για την ΕΠΙΚΟΙΝΩΝΙΑ (λευκό) και για την
   ΑΝΑΚΥΚΛΩΣΗ (.is-sage). Ίδια γεωμετρία, διαφορετικό χρώμα.     */

/* inline-flex ώστε το πλαίσιο να εφάπτεται ακριβώς στο κουμπί —
   με inline-block το line-height θα πρόσθετε ύψος στα πλαίσια */
.nav-stamp {
    position: relative;
    display: inline-flex;
    isolation: isolate;
    --stamp-ink: #ffffff;
    --stamp-ghost: rgba(255, 255, 255, 0.4);
    --stamp-cube: var(--cyan);
}

.nav-stamp.is-sage {
    --stamp-ink: var(--sage);
    --stamp-ghost: rgba(183, 198, 194, 0.45);
}

/* το πίσω, «ξεκούμπωτο» πλαίσιο */
.nav-stamp::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 1px solid var(--stamp-ghost);
    transform: translate(4px, 4px);
    transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
    pointer-events: none;
}

/* το γέμισμα που σαρώνει */
.nav-stamp::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--stamp-ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.5s var(--ease);
    pointer-events: none;
}

.nav-stamp > a {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 1.15rem;
    border: 1px solid var(--stamp-ink);
    color: var(--stamp-ink);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.4s var(--ease);
}

/* σε στενές οθόνες μαζεύουν ώστε να μη στριμώχνει το nav */
@media (max-width: 1279px) {
    .nav-stamp > a { font-size: 13px; letter-spacing: 0.1em; padding: 0.65rem 0.9rem; }
}

/* ο μικρός κύβος πριν την ετικέτα — ψευδοστοιχείο, άρα επιβιώνει
   της αλλαγής γλώσσας που ξαναγράφει το innerHTML */
.nav-stamp > a::before {
    content: '';
    width: 6px;
    height: 6px;
    flex-shrink: 0;
    background: var(--stamp-cube);
    transition: background-color 0.4s var(--ease), transform 0.5s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .nav-stamp:hover::before { transform: translate(0, 0); opacity: 0; }
    .nav-stamp:hover::after { transform: scaleX(1); }
    .nav-stamp:hover > a { color: var(--navy); }
    .nav-stamp:hover > a::before { background: var(--navy); transform: rotate(45deg); }
}

/* τρέχουσα σελίδα: μόνιμα γεμάτο, χωρίς το πίσω πλαίσιο */
.nav-stamp[data-current]::after { transform: scaleX(1); }
.nav-stamp[data-current]::before { opacity: 0; }
.nav-stamp[data-current] > a { color: var(--navy); }
.nav-stamp[data-current] > a::before { background: var(--navy); transform: rotate(45deg); }

@media (prefers-reduced-motion: reduce) {
    .nav-stamp::before { transform: none; opacity: 0; }
    .nav-stamp::after,
    .nav-stamp > a,
    .nav-stamp > a::before { transition: none; }
}

/* ── ΚΥΡΙΟ CTA ΤΟΥ NAV: ΑΝΑΚΥΚΛΩΣΗ ───────────────────────────
   Το μοναδικό κουμπί της γραμμής πλοήγησης. Όλα τα υπόλοιπα
   είναι απλοί σύνδεσμοι, ώστε να υπάρχει μία ξεκάθαρη κύρια
   ενέργεια ανά οθόνη.

   Τα δύο εικονίδια μπαίνουν ως CSS mask από SVG data URI, όχι
   ως θυγατρικά στοιχεία: ο μηχανισμός γλώσσας ξαναγράφει το
   innerHTML του συνδέσμου και θα τα εξαφάνιζε.               */

.nav-cta { display: inline-flex; }

.nav-cta > a {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;              /* ελάχιστος στόχος αφής */
    padding: 0.72rem 1.3rem;
    border: 1px solid var(--cyan);
    background: var(--cyan);
    color: var(--navy);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
    /* Μόνο χρώμα αλλάζει — οι διαστάσεις μένουν σταθερές,
       ώστε το hover να μη μετακινεί τα γειτονικά στοιχεία. */
    transition: background-color 0.22s var(--ease),
                border-color 0.22s var(--ease),
                color 0.22s var(--ease);
}

/* σύμβολο ανακύκλωσης */
.nav-cta > a::before {
    content: '';
    width: 18px; height: 18px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2019H4.815a1.83%201.83%200%200%201-1.57-.881%201.785%201.785%200%200%201-.004-1.784L7.196%209.5%27%2F%3E%3Cpath%20d%3D%27M11%2019h8.203a1.83%201.83%200%200%200%201.556-.89%201.784%201.784%200%200%200%200-1.775l-1.226-2.12%27%2F%3E%3Cpath%20d%3D%27m14%2016-3%203%203%203%27%2F%3E%3Cpath%20d%3D%27M8.293%2013.596%207.196%209.5%203.1%2010.598%27%2F%3E%3Cpath%20d%3D%27m9.344%205.811%201.093-1.892A1.83%201.83%200%200%201%2011.985%203a1.784%201.784%200%200%201%201.546.888l3.943%206.843%27%2F%3E%3Cpath%20d%3D%27m13.378%209.633%204.096%201.098%201.097-4.096%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.3%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%2019H4.815a1.83%201.83%200%200%201-1.57-.881%201.785%201.785%200%200%201-.004-1.784L7.196%209.5%27%2F%3E%3Cpath%20d%3D%27M11%2019h8.203a1.83%201.83%200%200%200%201.556-.89%201.784%201.784%200%200%200%200-1.775l-1.226-2.12%27%2F%3E%3Cpath%20d%3D%27m14%2016-3%203%203%203%27%2F%3E%3Cpath%20d%3D%27M8.293%2013.596%207.196%209.5%203.1%2010.598%27%2F%3E%3Cpath%20d%3D%27m9.344%205.811%201.093-1.892A1.83%201.83%200%200%201%2011.985%203a1.784%201.784%200%200%201%201.546.888l3.943%206.843%27%2F%3E%3Cpath%20d%3D%27m13.378%209.633%204.096%201.098%201.097-4.096%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: transform 0.34s var(--ease);
}

/* βέλος που δείχνει τη μετάβαση */
.nav-cta > a::after {
    content: '';
    width: 14px; height: 14px;
    flex-shrink: 0;
    background: currentColor;
    opacity: 0.55;
    -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.5%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M5%2012h14%27%2F%3E%3Cpath%20d%3D%27m12%205%207%207-7%207%27%2F%3E%3C%2Fsvg%3E") center / contain no-repeat;
    transition: transform 0.22s var(--ease), opacity 0.22s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .nav-cta > a:hover {
        background: var(--navy);
        border-color: var(--cyan);
        color: var(--cyan);
    }
    /* ένα τρίτο της στροφής — όσα και τα βέλη του συμβόλου */
    .nav-cta > a:hover::before { transform: rotate(120deg); }
    .nav-cta > a:hover::after  { transform: translateX(3px); opacity: 1; }
}

.nav-cta > a:active { background: #c2e9f0; }

.nav-cta > a:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* τρέχουσα σελίδα: αντεστραμμένο, χωρίς βέλος — δεν πας κάπου */
.nav-cta[data-current] > a {
    background: var(--navy);
    color: var(--cyan);
    border-color: var(--cyan);
    cursor: default;
}
.nav-cta[data-current] > a::after { display: none; }

@media (max-width: 1279px) {
    .nav-cta > a { font-size: 13px; letter-spacing: 0.1em; padding: 0.68rem 1rem; gap: 0.5rem; }
    .nav-cta > a::before { width: 16px; height: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    .nav-cta > a,
    .nav-cta > a::before,
    .nav-cta > a::after { transition: none; }
    .nav-cta > a:hover::before { transform: none; }
    .nav-cta > a:hover::after { transform: none; }
}

#mobile-menu { transition: transform 0.6s var(--ease); }
#mobile-menu.open { transform: translateX(0); }

.mobile-overlay {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}
.mobile-overlay.open { opacity: 1; pointer-events: auto; }

/* ── LANGUAGE TOGGLE ────────────────────────────────────────── */

/* Οπτικά μένει μικρός, αλλά η περιοχή αφής φτάνει τα 44px μέσω
   ψευδοστοιχείου — δεν μεγαλώνει τη γραμμή του nav. */
.lang-link { position: relative; }
.lang-link::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}

.lang-link.active { color: var(--sage) !important; }
.lang-transition { transition: opacity 0.3s ease; }
.lang-transition.fade { opacity: 0; }

/* ── MOTION ─────────────────────────────────────────────────── */

.floating-blur {
    filter: blur(120px);
    animation: float 12s ease-in-out infinite alternate;
}

@keyframes float {
    0% { transform: translate(0, 0); }
    100% { transform: translate(40px, -60px); }
}

@keyframes bounce-slow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.animate-bounce-slow { animation: bounce-slow 2s ease-in-out infinite; }

.hero-word {
    display: inline-block;
    opacity: 0;
    animation: slideUp 0.6s var(--ease) forwards;
    position: relative;
}

.hero-word + .hero-word { margin-left: 0.28em; }

.hero-word::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 10px;
    background: var(--cyan);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
    opacity: 0;
    animation: inherit;
    animation-name: bucketDrop;
}

@keyframes slideUp {
    0% { transform: translateY(40px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes bucketDrop {
    0% { transform: translate(-50%, -40px); opacity: 0; }
    50% { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, -20px); opacity: 0; }
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1s var(--ease), transform 1s var(--ease);
}

.reveal-on-scroll.active { opacity: 1; transform: translateY(0); }

.line-hover-trigger .line {
    width: 40px;
    transition: width 0.4s var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .line-hover-trigger:hover .line { width: 64px; }
    .arrow-hover:hover iconify-icon { transform: translateX(8px); }
    .project-card:hover img { transform: scale(1.1); }
    .project-card:hover .overlay { opacity: 1; }
}

/* ── FORMS ──────────────────────────────────────────────────── */

.field label {
    display: block;
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--taupe);
    margin-bottom: 0.35rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    padding: 0.9rem 0;
    color: #fff;
    font-family: var(--font-body);
    /* 16px ακριβώς: κάτω από αυτό το iOS Safari κάνει zoom μόλις
       εστιάσει το πεδίο και ο χρήστης χάνει τη θέση του. */
    font-size: 16px;
    transition: border-color 0.4s ease;
}

.field input:focus,
.field select:focus,
.field textarea:focus { outline: none; border-color: var(--cyan); }

.field select option { background: var(--navy); color: #fff; }
.field ::placeholder { color: rgba(255, 255, 255, 0.25); }
input[type="date"] { color-scheme: dark; }

/* Ίδια πεδία, σε ανοιχτό φόντο */
.field.on-light input,
.field.on-light select,
.field.on-light textarea {
    color: var(--navy);
    border-bottom-color: rgba(23, 30, 25, 0.2);
}
.field.on-light input:focus,
.field.on-light select:focus,
.field.on-light textarea:focus { border-bottom-color: var(--navy); }
.field.on-light select option { background: #fff; color: var(--navy); }
.field.on-light ::placeholder { color: rgba(23, 30, 25, 0.28); }
.field.on-light input[type="date"] { color-scheme: light; }

/* Μήνυμα κατάστασης φόρμας */
.form-status {
    grid-column: 1 / -1;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-top: 1rem;
    min-height: 1.4em;
}
.form-status:empty { display: none; }
.form-status.is-busy { color: var(--taupe); }
.form-status.is-ok { color: var(--navy); font-weight: 600; }
.field.on-light ~ .form-status.is-ok,
.form-status.is-ok { color: inherit; }
.form-status.is-fallback { color: var(--taupe); }

/* σε σκούρο φόντο */
#bin-form .form-status.is-ok { color: var(--cyan); }
#bin-form .form-status { color: rgba(255, 255, 255, 0.55); }

/* το πεδίο-παγίδα για bots δεν πρέπει να φαίνεται ούτε να εστιάζεται */
.hp {
    position: absolute !important;
    left: -9999px;
    width: 1px; height: 1px;
    overflow: hidden;
}

/* ── ACCESSIBILITY ──────────────────────────────────────────── */

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll, .hero-word {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
    .floating-blur, .animate-bounce-slow { animation: none !important; }
    * { scroll-behavior: auto !important; }
}