/*
Theme Name:   Fashivo Child
Theme URI:    https://www.euroacademia.gr/
Description:  Child theme for Fashivo (Child Theme)
Author:       EuroAcademia
Author URI:   https://www.euroacademia.gr/
Template:     fashivo
Version:      1.0.0
Text Domain:  fashivo-child
*/

/* ----------------------------------------
   1. GLOBAL RESETS
---------------------------------------- */
.wp-block-cover {
  /* αφαιρούμε παλιά overrides */
  min-height: auto !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* ----------------------------------------
   2. DESKTOP ONLY (≥768px): ΔΙΟΡΘΩΜΕΝΟ
---------------------------------------- */
@media (min-width: 768px) {

  /* 2.1 Cover blocks - διατηρούμε τις φυσικές αναλογίες */
  .wp-block-cover {
    position: relative !important;
    min-height: 400px !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }
  
  /* Για τις εικόνες μέσα στα cover blocks */
  .wp-block-cover img.wp-block-cover__image-background {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  .wp-block-cover .wp-block-cover__inner-container {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: inherit !important;
    padding: 40px !important;
  }

  /* 2.2 Overlay Coverage - διόρθωση opacity */
  .wp-block-cover.is-style-overlay-50-100::after {
    content: "" !important;
    position: absolute !important;
    top: 0; bottom: 0; left: 50%; width: 50%;
    background: rgba(255,255,255,0.8) !important;
    pointer-events: none !important;
    z-index: 1 !important;
  }

  /* 2.3 Overlay Opacity Presets */
  .wp-block-cover.is-style-overlay-50::after {
    background: rgba(255,255,255,0.5) !important;
  }
  .wp-block-cover.is-style-overlay-70::after {
    background: rgba(255,255,255,0.7) !important;
  }

  /* 2.4 Overflow hidden για overlays */
  .wp-block-cover.is-style-overlay-50-100,
  .wp-block-cover.is-style-overlay-50,
  .wp-block-cover.is-style-overlay-70 {
    overflow: hidden !important;
  }
  
  .wp-block-cover.is-style-overlay-50-100 .wp-block-cover__inner-container,
  .wp-block-cover.is-style-overlay-50 .wp-block-cover__inner-container,
  .wp-block-cover.is-style-overlay-70 .wp-block-cover__inner-container {
    z-index: 2 !important;
  }
  
  /* ΠΡΟΑΙΡΕΤΙΚΟ: Aspect ratio styles */
  .wp-block-cover.is-style-aspect-16-9 {
    aspect-ratio: 16/9 !important;
    padding-top: 0 !important;
  }
  
  .wp-block-cover.is-style-aspect-4-3 {
    aspect-ratio: 4/3 !important;
    padding-top: 0 !important;
  }
  
  /* Utility classes για έλεγχο του object-position */
  .wp-block-cover.focus-top img.wp-block-cover__image-background {
    object-position: center top !important;
  }
  .wp-block-cover.focus-bottom img.wp-block-cover__image-background {
    object-position: center bottom !important;
  }
}

/* ----------------------------------------
   3. MOBILE ONLY (<768px): DEFAULT BEHAVIOR
---------------------------------------- */
@media (max-width: 767px) {
  /* αφήνουμε το default cover (cover+full-height του theme), χωρίς override */
}

/* ----------------------------------------
   4. CUSTOM FONT
---------------------------------------- */
@font-face {
  font-family: 'PFDinTextCondensed';
  src: url('fonts/PFDinTextCondensed-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
body, h1, h2, h3, h4, h5, h6 {
  font-family: 'PFDinTextCondensed', sans-serif !important;
}

/* ----------------------------------------
   5. TEXT STROKE
---------------------------------------- */
.text-stroke {
  color: #fff !important;
  -webkit-text-stroke: 1px #000;
  text-stroke: 1px #000;
}

/* ----------------------------------------
   6. TEXT SHADOW
---------------------------------------- */
.text-shadow-light {
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.text-shadow-medium {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
}
.text-shadow-heavy {
  text-shadow: 3px 3px 6px rgba(0,0,0,0.5);
}
.text-shadow-color {
  text-shadow: 2px 2px 4px rgba(255,0,0,0.6);
}

/* ----------------------------------------
   7. COLUMNS GAP & BG OPACITY UTILITIES
---------------------------------------- */
.wp-block-cover .wp-block-columns.custom-gap {
  gap: var(--cover-gap, 30px) !important;
}
.wp-block-cover .wp-block-column.custom-styling {
  background-color: rgba(255,255,255, var(--cover-opacity,0.5)) !important;
  padding: var(--cover-padding,20px) !important;
  border-radius: var(--cover-radius,4px) !important;
}

/* ----------------------------------------
   8. BLOCK STYLE PRESETS: MAX-WIDTH
---------------------------------------- */
.wp-block-cover.is-style-max-width-1350,
.wp-block-group.is-style-max-width-1350 {
  max-width: 1350px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.wp-block-cover.is-style-max-width-1800,
.wp-block-group.is-style-max-width-1800 {
  max-width: 1800px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----------------------------------------
   9. BLOCK STYLE PRESETS: ALIGN COVER VERTICAL
       (Align Top/Center/Bottom)
---------------------------------------- */
.wp-block-cover.is-style-align-cover-top .wp-block-cover__inner-container,
.wp-block-cover.is-style-align-cover-center .wp-block-cover__inner-container,
.wp-block-cover.is-style-align-cover-bottom .wp-block-cover__inner-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}
.wp-block-cover.is-style-align-cover-top .wp-block-cover__inner-container {
  justify-content: flex-start !important;
  align-items: center !important;
}
.wp-block-cover.is-style-align-cover-center .wp-block-cover__inner-container {
  justify-content: center !important;
  align-items: center !important;
}
.wp-block-cover.is-style-align-cover-bottom .wp-block-cover__inner-container {
  justify-content: flex-end !important;
  align-items: center !important;
}

/* ----------------------------------------
   10. ΒΑΣΙΚΕΣ ΡΥΘΜΙΣΕΙΣ ΓΙΑ COLUMNS ΣΕ COVER BLOCKS
---------------------------------------- */
.wp-block-cover .wp-block-columns {
  display: flex !important;
  align-items: stretch !important;
  gap: 20px !important;
}

.wp-block-cover .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .wp-block-cover .wp-block-columns {
    flex-direction: column !important;
  }
  
  .wp-block-cover .wp-block-column {
    width: 100% !important;
    margin-bottom: 20px !important;
  }
}

/* ----------------------------------------
   11. COLUMNS STYLING - ΧΡΗΣΗ ΜΕ CSS CLASSES
---------------------------------------- */

/* 1. ΒΑΣΙΚΟ STYLE - Ισοϋψείς στήλες με άσπρο φόντο */
.equal-columns .wp-block-columns {
    display: flex !important;
    align-items: stretch !important;
    gap: 20px !important;
}

.equal-columns .wp-block-column {
    background: rgba(255,255,255,0.9) !important;
    padding: 30px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    margin: 0 !important;
}

/* 2. ΧΡΩΜΑΤΙΣΤΕΣ ΣΤΗΛΕΣ */
.colored-columns .wp-block-column:nth-child(1) {
    background: rgba(52, 152, 219, 0.9) !important;
}
.colored-columns .wp-block-column:nth-child(2) {
    background: rgba(46, 204, 113, 0.9) !important;
}
.colored-columns .wp-block-column:nth-child(3) {
    background: rgba(155, 89, 182, 0.9) !important;
}
.colored-columns .wp-block-column:nth-child(4) {
    background: rgba(241, 196, 15, 0.9) !important;
}

/* 3. ΣΤΗΛΕΣ ΜΕ ΠΕΡΙΓΡΑΜΜΑ */
.bordered-columns .wp-block-column {
    background: rgba(255,255,255,0.7) !important;
    border: 2px solid #333 !important;
    box-shadow: none !important;
}

/* 4. MINIMAL ΣΤΗΛΕΣ */
.minimal-columns .wp-block-column {
    background: transparent !important;
    box-shadow: none !important;
    border-left: 3px solid #fff !important;
    padding-left: 30px !important;
}

/* 5. ΔΙΑΦΑΝΕΣ ΣΤΗΛΕΣ */
.transparent-columns .wp-block-column {
    background: rgba(255,255,255,0.3) !important;
}

/* 6. ΣΤΗΛΕΣ ΜΕ ΣΚΙΑ */
.shadow-columns .wp-block-column {
    background: rgba(255,255,255,0.95) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1) !important;
}

/* 7. ΠΑΡΑΛΛΑΓΕΣ ΑΠΟΣΤΑΣΕΩΝ */
.gap-small .wp-block-columns {
    gap: 10px !important;
}
.gap-large .wp-block-columns {
    gap: 40px !important;
}
.gap-xl .wp-block-columns {
    gap: 60px !important;
}

/* 8. ΠΑΡΑΛΛΑΓΕΣ PADDING */
.padding-small .wp-block-column {
    padding: 15px !important;
}
.padding-large .wp-block-column {
    padding: 50px !important;
}

/* 9. ΣΤΡΟΓΓΥΛΕΜΕΝΕΣ ΓΩΝΙΕΣ */
.rounded-none .wp-block-column {
    border-radius: 0 !important;
}
.rounded-lg .wp-block-column {
    border-radius: 16px !important;
}
.rounded-full .wp-block-column {
    border-radius: 30px !important;
}

/* 10. FIXED HEIGHT */
.height-300 .wp-block-column {
    min-height: 300px !important;
}
.height-400 .wp-block-column {
    min-height: 400px !important;
}
.height-500 .wp-block-column {
    min-height: 500px !important;
}

/* 11. ΚΟΥΜΠΙΑ ΣΤΟ ΚΑΤΩ ΜΕΡΟΣ */
.buttons-bottom .wp-block-column .wp-block-buttons {
    margin-top: auto !important;
}

/* 12. ΣΥΝΔΥΑΣΜΟΙ - Μπορείτε να χρησιμοποιήσετε πολλές classes μαζί */
/* Παράδειγμα: equal-columns colored-columns gap-large padding-small rounded-lg */

/* MOBILE */
@media (max-width: 768px) {
    .equal-columns .wp-block-columns,
    .colored-columns .wp-block-columns,
    .bordered-columns .wp-block-columns {
        flex-direction: column !important;
    }
    
    .equal-columns .wp-block-column,
    .colored-columns .wp-block-column,
    .bordered-columns .wp-block-column {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
}
/* 1. Keyframes για fade-in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 2. Αρχική κρυφή κατάσταση για captions σε blocks με κλάση fade-in-caption */
.fade-in-caption figcaption {
  opacity: 0;
}

/* 3. Fade-in on page load */
.fade-in-caption figcaption {
  animation: fadeIn 1s ease-in-out 0.5s forwards;
}

/* Caption Bottom Left */
.wp-block-image.is-style-caption-bottom-left figure {
  position: relative;
}
.wp-block-image.is-style-caption-bottom-left figcaption {
  position: absolute;
  bottom: 10px;
  left: 10px;
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 3px;
}

/* Caption Bottom Center */
.wp-block-image.is-style-caption-bottom-center figure {
  position: relative;
}
.wp-block-image.is-style-caption-bottom-center figcaption {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 3px;
}

/* Caption Bottom Right */
.wp-block-image.is-style-caption-bottom-right figure {
  position: relative;
}
.wp-block-image.is-style-caption-bottom-right figcaption {
  position: absolute;
  bottom: 10px;
  right: 10px;
  margin: 0;
  padding: 4px 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border-radius: 3px;
}