/* ==========================================================================
   1. GLOBAL RESET & VARIABLES
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --site-max-width: 1240px;
    --font-primary: arial, helvetica, sans-serif;
    
    /* Ακριβή χρώματα από το Joomla template */
    --color-logo-main: #808080;
    --color-logo-sub: #999999;
    --color-menu-link: #797979;
    --color-footer-link: #999999;
}

body {
    font-family: var(--font-primary);
    background-color: #ffffff;
    color: var(--color-logo-main);
    font-weight: normal;
    line-height: 1.5;
    -webkit-font-smoothing: subpixel-antialiased;
}

/* Προστασία εικόνων από drag & selection */
img {
    user-select: none;
    -webkit-user-drag: none;
}

/* Καθολική κατάργηση υπογράμμισης σε όλα τα links */
a {
    text-decoration: none;
}

/* ==========================================================================
   2. GLOBAL CONTAINER & INNER PAGES ALIGNMENT
   ========================================================================== */
.header-container,
.footer-container {
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Εφαρμογή της εσοχής 28px άμεσα στο page-content για όλες τις σελίδες */
.page-content {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0 !important; /* Χωρίς margin-top όπως ζητήθηκε */
    margin-bottom: 30px;
    padding-left: 32px; /* 15px margin + 28px εσοχή για το "t" */
    padding-right: 32px;
}

/* Εξαίρεση ΜΟΝΟ για την αρχική σελίδα (Home Page) */
body.home-page .page-content {
    max-width: 1240px;
    padding-left: 15px;
    padding-right: 15px;
}

/* ==========================================================================
   3. HEADER (Fixed 90px Height & Sticky)
   ========================================================================== */
#header-placeholder {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background-color: #ffffff !important;
    width: 100%;
    height: 90px !important; /* Σταθερό ύψος 90px */
}

.site-header {
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex;
    align-items: center; /* Κατακόρυφο κεντράρισμα στα 90px */
}

.header-container {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo (14pt = 18.66px, Text-only, Σταθερό) */
.logo a {
    font-size: 18.66px;
    line-height: 1.2;
    display: inline-block;
}

.brand-name {
    color: var(--color-logo-main);
    font-weight: bold;
}

.brand-sub {
    color: var(--color-logo-sub);
    font-weight: normal;
}

/* Navigation Menu (Σταθερό #797979 - Χωρίς hover/active) */
.main-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main-nav a {
    color: var(--color-menu-link);
    font-size: 17px;
    font-weight: normal;
    text-transform: none;
    padding: 0 11px;
    display: block;
    letter-spacing: 1px;
}

/* Δεξιά ευθυγράμμιση με την εικόνα (αφαίρεση padding στο τελευταίο item) */
.main-nav li:last-child a {
    padding-right: 0;
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    color: var(--color-menu-link);
}

/* ==========================================================================
   4. HERO IMAGE (Home Page)
   ========================================================================== */
.hero-image-wrapper {
    width: 100%;
}

.responsive-hero-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   5. FOOTER (Σταθερό #999999 - Χωρίς hover)
   ========================================================================== */
.site-footer {
    padding-top: 0px;
    padding-bottom: 30px;
    background-color: #ffffff;
}

.footer-copy p, 
.footer-copy a {
    font-size: 14.66px;
    color: var(--color-footer-link);
    font-family: var(--font-primary);
}

/* ==========================================================================
   6. RESPONSIVE MEDIA QUERIES (Mobile Dropdown Menu)
   ========================================================================== */
@media (max-width: 860px) {
    .site-header {
        position: relative;
    }

    /* Μικρό Burger Icon (3 γραμμές) */
    .mobile-menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 20px;
        height: 14px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        margin: 0;
        z-index: 1001;
    }

    .mobile-menu-btn span {
        width: 100%;
        height: 2px;
        background-color: var(--color-menu-link);
        display: block;
        pointer-events: none;
    }

    /* Μενού: Εμφανίζεται δεξιά, ακριβώς κάτω από το header */
    .main-nav {
        display: none; /* Κρυμμένο αρχικά */
        position: absolute;
        top: 100%;
        right: 15px;
        width: 200px;
        background-color: #ffffff;
        z-index: 1000;
        box-shadow: 0px 4px 10px rgba(0,0,0,0.08);
    }

    /* Κατάσταση Open */
    .site-header .main-nav.is-open {
        display: block !important;
    }

    .main-nav ul {
        display: flex;
        flex-direction: column;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .main-nav li {
        border-bottom: 1px solid #e5e5e5;
        width: 100%;
    }

    .main-nav li:first-child {
        border-top: 1px solid #e5e5e5;
    }

    .main-nav a {
        padding: 10px 15px !important;
        font-size: 14px;
        color: #999999;
        font-weight: normal;
        text-align: left;
        display: block;
        letter-spacing: normal;
    }
}

/* ==========================================================================
   7. CONTACT PAGE STYLES (Καθαρό χωρίς περιττά paddings)
   ========================================================================== */
.contact-wrapper {
    padding-top: 40px; /* Προσαρμοσμένο για να μην κολλάει στο header των 90px */
    padding-bottom: 0px;
    font-size: 14.66px;
    line-height: 1.6;
    color: #808080;
}

.contact-wrapper p {
    margin-bottom: 24px;
}

.contact-wrapper a {
    color: #808080;
    text-decoration: none;
}

/* ==========================================================================
   8. PUBLICATIONS GRID (ALIGN WITH GLOBAL CONTAINER)
   ========================================================================== */
.publications-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    column-gap: 15px !important;
    row-gap: 30px !important;
    width: 100% !important;
    box-sizing: border-box;
}

.pub-item {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.pub-image {
    width: 100%;
    margin-bottom: 5px;
}

.pub-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

.pub-info {
    font-size: 14.66px;
    line-height: 1.4;
    color: #808080;
}

/* Responsive προσαρμογές Grid */
@media (max-width: 992px) {
    .publications-grid {
        grid-template-columns: repeat(3, 1fr) !important;
        column-gap: 20px !important;
    }
}

@media (max-width: 600px) {
    .publications-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        column-gap: 15px !important;
        row-gap: 25px !important;
    }
}

/* ==========================================================================
   SELECTED PROJECTS PAGE STYLES
   ========================================================================== */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 40px; /* Απόσταση μεταξύ των έργων */
}

.project-item {
    display: flex;
    align-items: flex-end; /* Ευθυγράμμιση κειμένου στη βάση της εικόνας */
    gap: 15px;
}

.project-media {
    flex: 0 0 850px; /* Σταθερό πλάτος 866px για την εικόνα */
    max-width: 850px;
}

.project-media img {
    width: 100%;
    height: auto;
    display: block;
}

.project-info {
    flex: 1;
    font-size: 13.66px;
    line-height: 1.4;
    color: #808080;
    padding-bottom: 5px; /* Μικρό συντονιστικό κενό από τον πάτο */
}

.project-info h2 {
    font-size: 16px;
    font-weight: normal;
    margin: 0 0 4px 0;
}

.project-info h2 a {
    color: #808080;
}

.project-info p {
    margin: 0;
    color: #808080;
}

/* Responsive προσαρμογή για μικρότερες οθόνες */
@media (max-width: 1100px) {
    .project-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .project-media {
        flex: 1 1 100%;
        max-width: 100%;
    }
}

.practice-container {
    max-width: 850px;
    margin-left: 0;
}

.practice-section {
    margin-bottom: 40px;
}

.practice-section p {
    font-size: 14.66px;
    line-height: 1.3;
    color: #808080;
    text-align: justify;
    margin-bottom: 15px;
}

/* ==========================================================================
   SINGLE PROJECT PAGE STYLES
   ========================================================================== */
.project-detail {
    max-width: 1170px; /* 1200px container minus 30px padding */
    margin: 0 auto;
}

.project-image-wrapper {
    width: 100%;
    margin-bottom: 50px;
}

/* Αφαιρεί το κενό από την 1η εικόνα (Hero image) για να έρθει κοντά το κείμενο */
.project-detail > .project-image-wrapper:first-child {
    margin-bottom: 10px; /* Ρυθμίζεις εδώ την απόσταση της 1ης εικόνας από τον τίτλο */
}

/* Αφαιρεί το κενό από την τελευταία εικόνα της γκαλερί για να μην αφήνει απόσταση από το footer */
.project-gallery .project-image-wrapper:last-child {
    margin-bottom: 0;
}

.project-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.project-description-container {
    font-size: 13.66px;
    line-height: 1.4;
    color: #808080;
    margin-bottom: 35px;
}

/* Καθαροί τίτλοι χωρίς αρνητικά margins */
.project-title {
    font-size: 16px;
    color: #808080;
    margin: 0 0 2px 0;
}

.project-location {
    color: #808080;
    margin: -15px 0 20px 0;
}

.project-description-container p {
    text-align: justify;
    margin-bottom: 15px;
}

/* Read More toggle area */
.read-more-content {
    display: none; /* Κρυφό αρχικά */
}

.read-more-btn {
    display: inline-block;
    color: #808080;
    cursor: pointer;
    margin-top: 5px;
    user-select: none;
}

.read-more-btn:hover {
    color: #808080;
}

.project-gallery {
    display: flex;
    flex-direction: column;
}