/* ==========================================================================
   1. VARIABLES & BASE RESET
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Syncopate:wght@700&display=swap');

:root {
    --primary-color: #000000;
    --accent-color: #ff00ff; /* Το χαρακτηριστικό ροζ του Hair Salon */
    --text-light: #ffffff;
    --text-gray: #aaaaaa;
    --glass-bg: rgba(0, 0, 0, 0.6);
}

/* 1.1 Sticky Footer & Global Layout Fix */
html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    background-color: #000; 
    color: var(--text-light);
    font-family: 'Montserrat', sans-serif;
}

body { 
    display: flex !important; 
    flex-direction: column !important; 
    min-height: 100vh !important; 
}

/* Joomla Specific Cleanup */
.blog-featured, .page-header, #system-message-container { display: none !important; }

/* 1.2 Layout Containers */
main.container, 
.mod-custom, 
.home-about-section, 
.home-services-section { 
    flex: 1 0 auto !important; /* Σπρώχνει το footer κάτω και κρατάει τη σειρά */
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================================================
   2. HEADER & NAVIGATION (Sticky & Glassy)
   ========================================================================== */
.site-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.4s ease !important;
}

.site-header.scrolled {
    background: rgba(0, 0, 0, 0.95) !important;
}

.header-wrapper {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 15px 40px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* Logo */
.logo a {
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    font-size: 1.5rem !important;
    text-transform: uppercase !important;
    letter-spacing: 2px;
}
.logo span { color: var(--accent-color) !important; }

/* Navigation Menu */
.main-nav ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    gap: 30px !important;
    flex-direction: row !important;
}

.main-nav li a {
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    transition: color 0.3s !important;
}

/* Ο γενικός κανόνας που έχετε (παραμένει ως έχει για τα άλλα links) */
.main-nav li a:hover { 
    color: var(--accent-color) !important; 
}

/* Το στυλ του κουμπιού (παραμένει ως έχει) */
.nav-book-btn a {
    background: var(--accent-color) !important;
    color: #fff !important;
    padding: 10px 25px !important;
    border-radius: 50px !important;
    box-shadow: 0 4px 15px rgba(255, 0, 255, 0.3) !important;
}

/* Η ΠΡΟΣΘΗΚΗ: Διόρθωση για το hover του κουμπιού */
.main-nav li.nav-book-btn a:hover {
    color: #fff !important; /* Αναγκάζουμε τα γράμματα να μείνουν λευκά */
    opacity: 0.9;            /* Προαιρετικά: μια μικρή αλλαγή για να φαίνεται το hover */
}

/* ΠΑΡΑΜΕΤΡΟΠΟΙΗΣΗ ΓΙΑ MOBILE */
@media (max-width: 1024px) {
    /* 1. Εμφανίζουμε το burger που τώρα είναι width:0 */
    .mobile-toggle {
        display: flex !important;
        flex-direction: column;
        gap: 6px;
        width: 30px !important;
        height: 20px !important;
        cursor: pointer;
    }
    
    .mobile-toggle span {
        display: block;
        width: 100%;
        height: 3px;
        background: #fff;
        transition: 0.3s;
    }

    /* 2. Εδώ "σπάμε" το flex-direction: row που έχεις πάνω */
    .main-nav {
        position: fixed !important;
        top: 0;
        right: -100%;
        width: 80% !important;
        height: 100vh !important;
        background: #000 !important;
        transition: 0.5s;
    }

    /* 3. ΑΛΛΑΓΗ ΤΟΥ ΚΩΔΙΚΑ ΣΟΥ: Από Row σε Column */
    .main-nav ul {
        flex-direction: column !important; /* Εδώ ακυρώνουμε το row !important */
        justify-content: center !important;
        align-items: center !important;
        height: 100%;
    }

    /* 4. Ενεργοποίηση μενού */
    .main-nav.active {
        right: 0 !important;
    }
}

/* ΠΡΟΣΘΗΚΗ ΣΤΟ ΤΕΛΟΣ ΤΟΥ CSS ΣΟΥ */
@media (max-width: 1024px) {
    .main-nav.active {
        right: 0 !important; /* Αυτό θα "τραβήξει" το μενού μέσα στην οθόνη */
    }
}
/* ==========================================================================
   4. HERO SECTION (Slider Wrapper)
   ========================================================================== */
.hero-wrapper {
    flex-shrink: 0 !important;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    margin-top: 0 !important;
    overflow: hidden;
}


/* ==========================================================================
   4. FOOTER (Always at Bottom)
   ========================================================================== */
.site-footer {
    flex-shrink: 0 !important;
    margin-top: auto !important; 
    background: #0a0a0a !important;
    color: var(--text-gray);
    padding: 60px 0 30px !important;
    text-align: center;
    border-top: 1px solid #111 !important;
}

.site-footer strong { color: #fff; }

/* ==========================================================================
   5. RESPONSIVE DESIGN
   ========================================================================== */
@media (max-width: 1024px) {
    .header-wrapper { padding: 15px 20px !important; }
    .main-nav { display: none !important; } /* Mobile menu toggle via JS */
    
    .com-contact__form.contact-form {
        margin: 40px 20px !important;
        padding: 25px !important;
    }
}