/*
 * Websights Development Team Custom Styling (Mahi Child Theme)
 * Theme: Clean, Light, Earth Tones
 * Final Version (Structured by HTML Flow: Base -> Header -> Content -> Footer -> Responsive)
 */

/* 1. GLOBAL VARIABLE OVERRIDE */
:root {
  --color-primary: #b87333;
  --color-secondary: #c9a067;
  --color-primary-light: #fdfcfb;
  --bg-body: #fdfcfb;
  --color-light-bg: #fdfcfb;
  --color-footer-bg: #f7f3ed;
  --text-color: #4a4a4a;
  --bold-color: #2c2c2c;
  --light: #fdfcfb;
  --dark: #5c4033;
  --dark-text-color: #fdfcfb;
  --border: #d4c5b3;
  --border-dark: #b87333;
  --shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}

/* 2. BASE ELEMENTS & TYPOGRAPHY */
body {
  font-family: 'Open Sans', sans-serif !important;
  color: var(--text-color);
  font-size: 16px;
  line-height: 1.6;
}

/* ΕΦΑΡΜΟΓΗ ROBOTO CONDENSED ΓΙΑ ΕΠΙΚΕΦΑΛΙΔΕΣ */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Roboto Condensed', sans-serif !important;
  color: var(--bold-color);
}
a {
  color: var(--color-primary);
}
a:hover {
  color: var(--color-secondary);
}

/* 3. HEADER & NAVIGATION (STICKY & MENU FIXES) */

/* ΔΙΟΡΘΩΣΗ STICKY HEADER (ΕΠΙΣΤΡΟΦΗ ΣΕ STICKY) */
.header {
    position: sticky;
    top: 0;
    z-index: 9000;
    width: 100%;
}
.header-main {
    width: 100%;
    background-color: var(--color-light-bg); 
}
/* ΔΙΟΡΘΩΣΗ PADDING ΓΙΑ LOGGED-IN USER BAR */
.user-logged-in header, 
.user-logged-in .header-main {
    margin-top: 0px; 
}
header {
    margin-top: 0px;
}

/* Υπάρχοντες κανόνες header */
.header.dark { color: var(--bold-color); background-color: var(--color-light-bg); }
.region-primary-menu .menu > li::after { background-color: var(--color-primary); }
.region-primary-menu .menu a { color: var(--bold-color); }
.primary-menu-wrapper { 
    background-color: var(--color-light-bg); 
    z-index: 9999 !important; 
    padding: 20px 0px 0px 40px;
    top: 0;
}
.user-logged-in .primary-menu-wrapper { top: 81px !important; }

/* PAGE HEADER (Breadcrumb Overlay Fix) */
.page-header {
  background-image: url(../images/slider-bg.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative; 
  z-index: 1; 
}
.page-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(44, 44, 44, 0.4); 
    z-index: 2; 
}
.page-header .container, 
.page-header h1,
.page-header .breadcrumb {
    position: relative; 
    z-index: 3; 
    color: #ffffff; 
}
.breadcrumb-item a, 
.breadcrumb-item:last-child {
    color: #ffffff !important; 
    opacity: 0.8; 
}
.breadcrumb-item a::after {
    color: #ffffff; 
}

/* 4. MAIN CONTENT - SLIDER SECTION STYLING */

/* 4.1 SLIDER BACKGROUND & EFFECTS */
.slider {
  background-image: url(../images/slider-bg.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  position: relative;
  filter: none !important; 
  transition: none;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

/* 4.2 SLIDER OVERLAY */
.slider::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(44, 44, 44, 0.8);
  z-index: 1;
}

/* 4.3 SLIDER ALIGNMENT (Desktop/Tablet) */
.slider .container {
  display: flex !important;
  align-items: center !important;
  min-height: 500px;
}
.splide__slide {
  display: flex !important;
  align-items: center !important;
}
.slider .container,
.splide__track {
  position: relative;
  z-index: 2;
}
.slider .slider-text,
.slider .slider-img img {
  filter: none !important;
}

/* 4.4 SLIDER CONTENT STYLING (Κείμενο & Εικόνες) */
.slider-text {
  background-color: none;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  color: var(--light);
}
.slider-text h2 {
  color: var(--light);
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: 'Roboto Condensed', sans-serif;
}
.slider-img img {
  border: none;
  border-radius: 8px;
  /* ΛΕΥΚΗ ΣΚΙΑ: Custom soft glow */
}

/* 5. GENERAL COMPONENTS (Forms, Buttons, Marks) */

/* 5.1 COMPONENTS & BUTTONS */
input[type=submit],
input[type=button],
input[type=reset],
.button,
.button-primary {
  background-color: var(--color-primary);
  color: var(--dark-text-color);
}
input[type=submit]:hover,
.button:hover,
.button-primary:hover {
  background-color: var(--dark);
}
mark {
  padding: 0.5rem;
  border-radius: 6px;
  background: var(--color-secondary);
  color: var(--bold-color);
}

/* 5.2 MODERN FORM STYLING */
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
textarea {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 15px;
  background-color: var(--color-primary-light);
  width: 100%;
  transition: all 0.3s ease;
}
input[type=text]:focus,
input[type=email]:focus,
textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 5px rgba(184, 115, 51, 0.5);
  background-color: #ffffff;
}
.form-item label {
  font-weight: 500;
  color: var(--bold-color);
  margin-bottom: 5px;
}

/* 6. IMAGE HOVER EFFECTS */
#main-wrapper img {
  filter: brightness(90%);
  transition: all .6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border-radius: 3px;
  border: 1px solid #e0e0e0;
}
#main-wrapper img:hover {
  transform: scale(1.03);
  filter: brightness(100%);
  border-color: transparent;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

/* 7. COOKIE COMPLIANCE STYLING */
div#sliding-popup,
div#sliding-popup .eu-cookie-withdraw-banner,
.eu-cookie-withdraw-tab { background: var(--dark) !important; background-image: none !important; color: var(--dark-text-color); }
.eu-cookie-withdraw-tab { background-color: var(--dark) !important; }
.eu-cookie-compliance-message h1, .eu-cookie-compliance-message h2, .eu-cookie-compliance-message h3, .eu-cookie-compliance-message p, .eu-cookie-compliance-message button, .eu-cookie-compliance-category label { color: var(--dark-text-color) !important; }
.eu-cookie-compliance-agree-button, .eu-cookie-compliance-default-button, .eu-cookie-compliance-save-preferences-button, .eu-cookie-withdraw-button { background-color: var(--color-primary) !important; background-image: none !important; border: 1px solid var(--color-primary); color: var(--dark-text-color) !important; text-shadow: none; box-shadow: none; }
.eu-cookie-compliance-agree-button:hover, .eu-cookie-compliance-default-button:hover, .eu-cookie-compliance-save-preferences-button:hover, .eu-cookie-withdraw-button:hover { background-color: var(--dark) !important; border-color: var(--dark); }
.eu-cookie-compliance-category-description {
    display: none !important;
}
.eu-cookie-compliance-category {
    margin-bottom: 0px !important; 
    padding: 5px 0;
}
.sliding-popup-bottom {
    /* Καταργούμε την αρχική θέση (translateY(100%)) και το animation */
    transform: translateY(0) !important; /* Εμφανίζεται άμεσα */
    animation: none !important;        /* Καταργούμε το animation */
    /* ΠΡΟΣΟΧΗ: Θα χρειαστείτε padding ή margin για να εμφανιστεί η γραμμή σωστά */
}
/* Δεσμεύουμε χώρο για το Banner, ώστε να μην σπρώχνει το περιεχόμενο */
#sliding-popup {
    min-height: 50px; /* Δοκιμάστε 50px-70px. Αυτό είναι το ύψος της μπάρας πριν εμφανιστούν οι επιλογές */
    box-sizing: border-box;
}

/* Επίσης, πρέπει να αφαιρέσουμε τυχόν default margin/padding που προκαλεί το shift */
#sliding-popup .eu-cookie-compliance-banner {
    /* Διασφαλίζουμε ότι δεν υπάρχει shift εσωτερικά */
    margin: 0 !important;
    padding: 0 !important;
}
.sliding-popup-bottom {
  transform: translateY(100%);
  animation: cookie-animation 1s linear 1.1s forwards;
}

@keyframes cookie-animation {
  100% {
    transform: translateY(0);
  }
}
.eu-cookie-compliance-category-description {
    display: none !important; 
}
/* 8. FOOTER SECTION STYLING */
.footer.dark {
  background-color: var(--color-footer-bg);
  color: var(--text-color);
  padding: 30px 0;
  border-top: 5px solid var(--color-primary);
}
/* Footer Headings & Titles Fix */
.footer h2, .footer .block-title, .footer .block-content h3 {
  color: var(--bold-color);
}
.footer .block-content h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
}
/* Contact Block Flexbox (Icon | Text) */
.contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 15px; }
.contact-item p:first-child { flex-shrink: 0; line-height: 1; margin: 0; padding-top: 3px; }
.contact-item p:last-child { margin: 0; }
.contact-item span i { color: var(--color-primary); font-size: 1.4rem; }
.footer a { color: var(--text-color); }
.footer a:hover { color: var(--color-primary); }
#block-mahi-child-breitemasstonharti {width: 100%}
#block-mahi-child-breitemasstonharti iframe {width: 100%;}
/* 9. ATTRIBUTION & COPYRIGHT STYLING */
.footer-bottom-last {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: 10px;
}
.footer-bottom-last .developed-by {
  font-size: 0.9rem;
  color: var(--text-color);
}
.footer-bottom-last .developed-by a {
  color: var(--color-primary);
}

/* 10. FRONT CATEGORY VIEWS STYLING (Υπηρεσίες & Κατασκευές) */

.front-cat-item {
    position: relative;
    display: flex;
    flex-wrap: wrap; 
    align-items: center; 
    gap: 30px; 
    padding: 30px 0;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border); 
}
.front-cat-item:last-child {
    border-bottom: none;
}
/* Ορισμός της γραμμής */
.front-cat-item:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 60%; 
    height: 1px;
    background-color: var(--border);
}
.front-cat-item:last-child::after {
    content: none;
}
.front-cat-item-left {
    flex: 1 1 55%; 
    order: 1; 
}
.front-cat-item-right {
    flex: 1 1 35%; 
    order: 2; 
    text-align: center; 
}
/* ΕΝΑΛΛΑΓΗ ΣΕΙΡΑΣ: front-cat-item-right / front-cat-item-left */
.views-row:nth-child(even) .front-cat-item-left {
    order: 2; 
}
.views-row:nth-child(even) .front-cat-item-right {
    order: 1; 
}
/* ΣΤΥΛΙΣΤΙΚΕΣ ΒΕΛΤΙΩΣΕΙΣ ΕΝΤΟΣ ΤΟΥ BLOCK */
.front-cat-item-left a:first-child { 
    font-family: var(--font-heading), 'Roboto Condensed', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bold-color);
    display: block;
    margin-bottom: 10px;
}
.front-cat-item-left p {
    margin-bottom: 15px;
}
.front-cat-item-left .button { 
    margin-top: 15px;
    display: inline-block;
}
.front-cat-item-right img {
    border-radius: 6px;
    box-shadow: var(--shadow); 
}

/* 11. PRODUCT LIST VIEW STYLING (3-Column Flexbox Grid) */

.product-lists .view-content {
    display: flex;
    flex-wrap: wrap; 
    gap: 30px; 
    padding-bottom: 40px; 
}
.product-lists .views-row {
    flex: 1 1 calc(33.33% - 20px); 
    max-width: calc(33.33% - 20px);
    box-sizing: border-box;
    position: relative; 
    padding-bottom: 25px; 
    margin-bottom: 30px; 
    box-shadow: 0 1px 0 0 var(--border); 
}
.product-lists .views-row:last-child {
    box-shadow: none; 
}
/* 11.1 TITLE STYLING */
.views-field-title {
    margin-top: 15px; 
}
.views-field-title .field-content a {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1.15em; 
    font-weight: 700; 
    line-height: 1.4;
    color: var(--bold-color); 
    text-decoration: none; 
    display: block; 
    transition: color 0.3s ease; 
}
.views-field-title .field-content a:hover {
    color: var(--primary-color); 
}

/* 12. MEDIA QUERIES & RESPONSIVE ADJUSTMENTS */

/* 12.1 CONTACT PAGE LAYOUT (>= 992px) */
@media (min-width: 992px) {
  .path-contact .region-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
  }
  .path-contact #block-mahi-child-stoiheiaepikoinonias,
  .path-contact #block-mahi-child-content {
    flex: 1 1 35%;
  }
  .path-contact #block-mahi-child-content {
    flex: 2 1 60%;
  }
}

/* 12.2 FOOTER LAYOUT (>= 768px) */
@media (min-width: 768px) {
  .footer-container {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: space-between;
    gap: 30px;
  }
  .footer-top,
  .footer-blocks,
  .footer-bottom {
    flex: 1 1 30%;
  }
  .footer-bottom-last {
    width: 100%;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
  }
}

/* 12.3 SLIDER MOBILE OPTIMIZATION (<= 767px) */
@media (max-width: 767px) {
.slider, .page-header {
      /* Περιορίζουμε το μέγιστο ύψος για να μη καταλαμβάνει όλη την οθόνη */
      max-height: 450px; 
      overflow: hidden; 
  }
	
.header-main .site-branding img {
        max-height: 45px; /* Μείωση του ύψους του λογοτύπου */
        width: auto;
    }
	
  /* Slider Fixes */
  .slider .container {
    min-height: 400px !important; 
    padding: 20px 15px; 
    flex-direction: column;
    text-align: center;
    justify-content: flex-start;
  }
.slider-text {
        width: 100%;
        max-width: 100%;
        padding: 15px; /* Ελαφρώς λιγότερο padding για να χωρέσει */
        box-sizing: border-box;
    }
  .slider-text h2 {
    font-size: 1.8rem;
    margin-bottom: 5px;
  }
  .slider-img {
      display: none; 
  }
.splide,
    .splide__track {
        width: 100% !important;
        overflow: hidden !important; /* ΚΟΒΟΥΜΕ ΟΠΟΙΟΔΗΠΟΤΕ ΟΡΙΖΟΝΤΙΟ SCROLL */
    }
    .splide__list {
        /* Δεν μπορούμε να αλλάξουμε το inline transform, αλλά περιορίζουμε το κοντέινερ */
        width: 100% !important; 
    }
    
    .splide__slide {
        width: 100% !important; /* Κάθε διαφάνεια πιάνει ακριβώς το 100% */
        /* Ακυρώνουμε την οριζόντια flex διάταξη του desktop */
        flex-direction: column !important; 
    }

    /* ΝΕΟ: Εξασφαλίζουμε ότι το κείμενο παίρνει το 100% του διαθέσιμου πλάτους */
    .slider-text {
        width: 100% !important;
        max-width: 100% !important;
        padding: 15px; 
        box-sizing: border-box;
    }
  /* Footer Fixes */
  .footer-container {
    flex-direction: column;
    gap: 20px;
  }
  .footer-bottom-last {
    justify-content: center;
    text-align: center;
    flex-direction: column;
    gap: 10px;
  }
  /* General Fixes */
  #main-wrapper img:hover {
    transform: none;
    box-shadow: none;
  }
  /* Category Grid Responsive Fix */
  .front-cat-item {
    flex-direction: column; 
    padding: 20px 0;
    text-align: center;
  }
  .front-cat-item-left,
  .front-cat-item-right {
    order: unset; 
    flex-basis: 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
}

/* 12.4 UNIVERSAL HAMBURGER MENU (Override για Desktop/Wide - >= 1024px) */
@media (min-width: 1024px) {
    /* Menu Icon & Wrapper Position Fixes */
    .mobile-menu-icon {
        display: flex !important; 
    }
    .primary-menu-wrapper {
        transform: translateX(-100%) !important; 
        position: fixed !important; 
        width: 100%; 
        max-width: 420px; 
        height: 100%;
        overflow-y: auto;
    }
    .primary-menu-wrapper.active-menu {
        transform: translateX(0) !important;
    }
    .close-mobile-menu {
        display: grid !important; 
    }
    /* Menu Style Overrides (Force Vertical List) */
    .region-primary-menu .menu {
        flex-direction: column !important; 
        gap: 0 !important;
    }
    .region-primary-menu .menu > li {
        border-bottom: 1px solid var(--border-dark); 
    }
    .region-primary-menu .menu > li::after {
        content: none !important; 
    }
}

/* 12.5 PRODUCT LIST RESPONSIVENESS (Grid Fixes) */
@media (max-width: 992px) {
    .product-lists .views-row {
        flex: 1 1 calc(50% - 15px); 
        max-width: calc(50% - 15px);
    }
}
@media (max-width: 576px) {
    .product-lists .views-row {
        flex: 1 1 100%; 
        max-width: 100%;
    }
}

/* 13. GENERAL CONTENT BLOCKS */

/* Custom CSS για το Value Proposition Block */
.value-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
}
.value-list li {
    padding: 0.6rem 0;
    border-bottom: 1px dashed var(--border); 
}
.value-list li:last-child {
    border-bottom: none;
}
.value-list li strong {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    color: var(--bold-color);
}
.value-list li strong i {
    font-size: 1.2rem;
}
.value-list li small {
    display: block;
    margin-top: 4px;
    padding-left: 1.8rem; 
    color: var(--text-color);
    font-size: 0.9rem;
}

/* Custom CSS για το Γιατί Εμάς / Why Us Block */

.block-title-center {
    text-align: center;
    margin-bottom: 2rem;
}

.why-us-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Απόσταση μεταξύ των 4 στηλών */
    text-align: center;
}

.why-us-item {
    flex: 1 1 200px; /* Επιτρέπει 4 στοιχεία να χωρέσουν και να μικρύνουν */
    padding: 20px;
    box-sizing: border-box;
}

.why-us-item h4 {
    margin-top: 15px;
    font-size: 1.3rem;
    color: var(--color-primary);
}

.icon-large {
    font-size: 2.5rem; /* Μεγαλύτερο μέγεθος για το εικονίδιο */
    display: block;
    margin-bottom: 10px;
}

/* RESPONSIVE FIXES */
@media (max-width: 768px) {
    .why-us-item {
        flex: 1 1 calc(50% - 15px); /* 2 στήλες σε tablet */
    }
}
@media (max-width: 480px) {
    .why-us-item {
        flex: 1 1 100%; /* 1 στήλη σε κινητά */
        padding: 10px 0;
    }
}

.region-content-home .block-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    text-align: center;
}