/**
 * Blur Nav Widget — assets/css/blur-nav.css
 * Disorder Elements plugin
 *
 * Traveling border: Το border του container "συρρικνώνεται" και 
 * τυλίγει το hovered link μέσω animated ::before pseudo-element.
 * Στην έξοδο (mouseleave), το border επεκτείνεται (expand) πίσω 
 * στις διαστάσεις του container πριν γίνει ξανά στατικό.
 */

/* ── Variables & Setup ── */
:root {
    --dn-nav-speed: 350ms;
    --dn-nav-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Wrapper nav ── */
.dn-blur-nav {
    display : flex;
    width   : 100%;
}

/* ── Pill container ── */
.dn-blur-nav__list {
    position        : relative;
    display         : flex;
    align-items     : center;
    list-style      : none;
    margin          : 0;
    padding         : 7px 12px;
    gap             : 4px;

    /* CSS custom props — ενημερώνονται από το JS */
    --dn-x : 0px;
    --dn-y : 0px;
    --dn-w : 100%; /* Αρχικοποίηση στο πλήρες πλάτος */
    --dn-h : 100%;
    --dn-r : 999px;

    /* Defaults – Overridden via Elementor */
    background           : rgba(28, 26, 24, 0.88);
    border               : 1px solid rgba(255, 255, 255, 0.09);
    border-radius        : 999px;
    backdrop-filter      : blur(14px);
    -webkit-backdrop-filter: blur(14px);

    /* Transition για το σβήσιμο/εμφάνιση του στατικού border */
    transition: border-color var(--dn-nav-speed) var(--dn-nav-easing);
}

/* ── Traveling border pseudo-element (Το "ζωντανό" border) ── */
.dn-blur-nav__list::before {
    content       : '';
    position      : absolute;
    pointer-events: none;
    z-index       : 1;
    box-sizing    : border-box;

    /* Θέση & Μέγεθος */
    left          : var(--dn-x);
    top           : var(--dn-y);
    width         : var(--dn-w);
    height        : var(--dn-h);
    border-radius : var(--dn-r);

    /* Border style */
    border: 1px solid transparent; 
    opacity       : 0;

    /* Απόλυτος συγχρονισμός για το εφέ συρρίκνωσης/επέκτασης */
    transition : 
        left var(--dn-nav-speed) var(--dn-nav-easing),
        top var(--dn-nav-speed) var(--dn-nav-easing),
        width var(--dn-nav-speed) var(--dn-nav-easing),
        height var(--dn-nav-speed) var(--dn-nav-easing),
        border-radius var(--dn-nav-speed) var(--dn-nav-easing),
        border-color var(--dn-nav-speed) var(--dn-nav-easing),
        opacity var(--dn-nav-speed) ease;
}

/* ── Hover State Logic ── */

/* Κρύβουμε το στατικό border όσο υπάρχει hovering */
.dn-blur-nav__list.is-hovering {
    border-color: transparent !important;
}

/* Εμφανίζουμε το δυναμικό border */
.dn-blur-nav__list.is-hovering::before {
    opacity      : 1;
    border-color : rgba(255, 255, 255, 0.55); /* Το χρώμα του "ταξιδιώτη" */
}

/* ── List items ── */
.dn-blur-nav__item {
    position: relative;
    z-index : 2; /* Πάνω από το ::before */
}

/* ── Links ── */
.dn-blur-nav__link {
    display        : block;
    position       : relative;
    z-index        : 2;
    padding        : 7px 18px;
    color          : rgba(220, 210, 195, 0.65);
    font-size      : 14px;
    font-weight    : 450;
    text-decoration: none;
    white-space    : nowrap;
    border-radius  : 999px;

    transition: 
        color var(--dn-nav-speed) var(--dn-nav-easing), 
        opacity var(--dn-nav-speed) var(--dn-nav-easing), 
        filter var(--dn-nav-speed) var(--dn-nav-easing), 
        background var(--dn-nav-speed) var(--dn-nav-easing);
}

/* ── Active link ── */
.dn-blur-nav__link.is-active {
    color      : rgba(240, 230, 210, 1);
    background : rgba(255, 255, 255, 0.07);
}

/* ════════════════════════════════
   BLUR EFFECT
════════════════════════════════ */

/* Dim + blur όλα τα links όταν γίνεται hover στο container */
.dn-blur-nav__list:has(.dn-blur-nav__link:hover) .dn-blur-nav__link {
    opacity : 0.22;
    filter  : blur(5px);
}

/* Καθαρό focus στο hovered link */
.dn-blur-nav__list:has(.dn-blur-nav__link:hover) .dn-blur-nav__link:hover {
    opacity    : 1;
    filter     : blur(0px);
    color      : rgba(240, 230, 210, 1);
    background : rgba(255, 255, 255, 0.07);
}

/* ════════════════════════════════
   FALLBACK & ACCESSIBILITY
════════════════════════════════ */

@supports not selector(:has(*)) {
    .dn-blur-nav__link:hover {
        opacity    : 1 !important;
        filter     : blur(0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dn-blur-nav__list::before,
    .dn-blur-nav__list,
    .dn-blur-nav__link {
        transition-duration: 0.01ms !important;
    }
}

/* Elementor Editor Placeholder */
.dn-blur-nav__placeholder {
    display         : flex;
    align-items     : center;
    justify-content : center;
    padding         : 1.25rem 2rem;
    border          : 1px dashed rgba(255, 255, 255, 0.3);
    border-radius   : 8px;
    color           : rgba(255, 255, 255, 0.5);
    background      : rgba(0, 0, 0, 0.2);
}