/* 
CSS Name: CSSFramework
Author: Giannis Giannopoulos
Author URI: http://giannis.in
Description: CSSFramework
Version: 0.5
*/

/* === 1. Ορισμοί Μεταβλητών === MARK: General */

html {
    font-size: 62.5%;
}

body {
    font-size: var(--font-size-md); /* Κλίμακα μεγέθους κειμένου για παραγράφους */
}

:root {
    /* Γενικά μεγέθη χώρων (spacing) */
    --space-0: 0px;  /* Μικρό μέγεθος χώρου */
    --space-sm: 3px;  /* Μικρό μέγεθος χώρου */
    --space-md: 15px; /* Μεσαίο μέγεθος χώρου */
    --space-lg: 30px; /* Μεγάλο μέγεθος χώρου */
    --space-xl: calc(var(--space-lg) * 1.5); /* Πολύ μεγάλο μέγεθος χώρου */

    /* Μεγέθη για gap (κενό) μεταξύ στοιχείων */
    --gap-0: 0px;  /* Μικρό κενό */
    --gap-sm: 3px;  /* Μικρό κενό */
    --gap-md: 15px; /* Μεσαίο κενό */
    --gap-lg: 30px; /* Μεγάλο κενό */
    --gap-xl: calc(var(--gap-lg) * 1.5); /* Πολύ μεγάλο κενό */

    --font-size-sm: clamp(1.0rem, 3.5vw, 1.2rem);
    --font-size-md: clamp(1.4rem, 4vw, 1.7rem);
    --font-size-lg: clamp(1.8rem, 4.5vw, 1.9rem);
    --font-size-xl: clamp(2rem, 5vw, 2rem);
    
    --font-title: clamp(3.8rem, 5vw, 4.5rem);
    --font-title-space: clamp(5rem, 5vw, 5.5rem);
    
    --font-text: clamp(1.4rem, 4vw, 1.9rem);
    --font-text-space: clamp(2.0rem, 5vw, 3.0rem);
    
    --font-lead: clamp(1.8rem, 4.5vw, 2.4rem);
    --font-lead-space: clamp(2.8rem, 4.5vw, 3.2rem);
    
    --font-smalllead: clamp(1.0rem, 3.5vw, 1.2rem);
    --font-smalllead-space: clamp(1.0rem, 3.5vw, 1.2rem);


    /* Μεταβλητές για τις αποστάσεις padding */
    --padding-inline: 1rem;  /* Εσωτερική απόσταση στα πλάγια */
    --content-max-width: 1250px; /* Μέγιστο πλάτος περιεχομένου */
    --breakout-max-width: 1400px; /* Μέγιστο πλάτος breakout */
}

/* === 2. Παγκόσμιο reset για το box-sizing === MARK: Resets*/
*,
*::before,
*::after {
    box-sizing: border-box; /* Διασφαλίζει ότι τα padding και το border περιλαμβάνονται στο μέγεθος των στοιχείων */
}

/* === 3. Στυλ για τις επικεφαλίδες === MARK:H*/
h1 {
    font-size: clamp(26px, 8vw, 34px); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

h2 {
    font-size: clamp(1.5rem, 7vw, 1.8rem); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

h3 {
    font-size: clamp(20px, 6vw, 28px); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

h4 {
    font-size: clamp(18px, 5vw, 25px); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

h5 {
    font-size: clamp(16px, 4.5vw, 22px); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

h6 {
    font-size: clamp(14px, 4vw, 19px); /* Διατηρεί την κλίμακα του μεγέθους του κειμένου ανάλογα με το πλάτος της οθόνης */
}

/* === 4. Στυλ για παραγράφους (p) === MARK: Paragraphs */
p {
    hyphens: auto; /* Αυτόματη διάσπαση λέξεων όταν είναι απαραίτητο */
}


.text-close-sm {letter-spacing: -0.05rem;}
.text-close-md {letter-spacing: -0.1rem;}
.text-close-lg {letter-spacing: -0.15rem;}

/* === 5. Ρυθμίσεις για την διάταξη grid === MARK: Grid */
.grid-order {
    display: grid;
    gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων στο grid */
}

.grid-order > * {
    order: 100; /* Ορίζει τη σειρά των στοιχείων */
}

/* === 6. Ρυθμίσεις για padding με διαφορετικά μεγέθη === MARK: Padding */

.p-0 { padding:0; }

/* Padding για μικρό μέγεθος */
.p-sm { padding: var(--space-sm); }
/* Padding για μεσαίο μέγεθος */
.p-md { padding: var(--space-md); }
/* Padding για μεγάλο μέγεθος */
.p-lg { padding: var(--space-lg); }
/* Padding για πολύ μεγάλο μέγεθος */
.p-xl { padding: var(--space-xl); }

/* Margin για τις πλευρές για το p-0 */
.p-0-top { padding-top: 0; }
.p-0-bottop { padding-bottom: 0; }
.p-0-left { padding-left: 0; }
.p-0-right { padding-right: 0; }

/* Padding για τις πλευρές για το p-sm */
.p-sm-top { padding-top: var(--space-sm); }
.p-sm-bottom { padding-bottom: var(--space-sm); }
.p-sm-left { padding-left: var(--space-sm); }
.p-sm-right { padding-right: var(--space-sm); }

/* Padding για τις πλευρές για το p-md */
.p-md-top { padding-top: var(--space-md); }
.p-md-bottom { padding-bottom: var(--space-md); }
.p-md-left { padding-left: var(--space-md); }
.p-md-right { padding-right: var(--space-md); }

/* Padding για τις πλευρές για το p-lg */
.p-lg-top { padding-top: var(--space-lg); }
.p-lg-bottom { padding-bottom: var(--space-lg); }
.p-lg-left { padding-left: var(--space-lg); }
.p-lg-right { padding-right: var(--space-lg); }

/* Padding για τις πλευρές για το p-xl */
.p-xl-top { padding-top: var(--space-xl); }
.p-xl-bottom { padding-bottom: var(--space-xl); }
.p-xl-left { padding-left: var(--space-xl); }
.p-xl-right { padding-right: var(--space-xl); }

.p-0-tb { padding-top: 0;padding-bottom: 0; }
.p-sm-tb { padding-top: var(--space-sm);padding-bottom: var(--space-sm); }
.p-md-tb { padding-top: var(--space-md);padding-bottom: var(--space-md); }
.p-lg-tb { padding-top: var(--space-lg);padding-bottom: var(--space-lg); }
.p-xl-tb { padding-top: var(--space-xl);padding-bottom: var(--space-xl); }
.p-xl-t { padding-top: var(--space-xl);}
.p-xl-b { padding-bottom: var(--space-xl);}

.p-0-lr { padding-top: 0;padding-bottom: 0; }
.p-sm-lr { padding-left: var(--space-sm);padding-right: var(--space-sm); }
.p-md-lr { padding-left: var(--space-md);padding-right: var(--space-md); }
.p-lg-lr { padding-left: var(--space-lg);padding-right: var(--space-lg); }
.p-xl-lr { padding-left: var(--space-xl);padding-right: var(--space-xl); }

/* === 7. Ρυθμίσεις για margin με διαφορετικά μεγέθη === MARK: Margin */

/* Αντικείμενο στο κέντρο  */
.m-c {margin:0 auto;} 

/* Αντικείμενο στα δεξιά για flex*/
.m-space-left {margin-left: auto;}

/* Αντικείμενο στα αριστερά για flex*/
.m-space-right {margin-right: auto;}

/* Μηδενικό margin παντού */
.m-0 { margin: 0; }

/* Margin για μικρό μέγεθος */
.m-sm { margin: var(--space-sm); }
/* Margin για μεσαίο μέγεθος */
.m-md { margin: var(--space-md); }
/* Margin για μεγάλο μέγεθος */
.m-lg { margin: var(--space-lg); }
/* Margin για πολύ μεγάλο μέγεθος */
.m-xl { margin: var(--space-xl); }

/* Margin για τις πλευρές για το m-sm */
.m-0-top { margin-top: 0; }
.m-0-bottom { margin-bottom: 0; }
.m-0-left { margin-left: 0; }
.m-0-right { margin-right: 0; }

/* Margin για τις πλευρές για το m-sm */
.m-sm-top { margin-top: var(--space-sm); }
.m-sm-bottom { margin-bottom: var(--space-sm); }
.m-sm-left { margin-left: var(--space-sm); }
.m-sm-right { margin-right: var(--space-sm); }

/* Padding για τις πλευρές για το m-md */
.m-md-top { margin-top: var(--space-md); }
.m-md-bottom { margin-bottom: var(--space-md); }
.m-md-left { margin-left: var(--space-md); }
.m-md-right { margin-right: var(--space-md); }

/* margin για τις πλευρές για το m-lg */
.m-lg-top { margin-top: var(--space-lg); }
.m-lg-bottom { margin-bottom: var(--space-lg); }
.m-lg-left { margin-left: var(--space-lg); }
.m-lg-right { margin-right: var(--space-lg); }

/* margin για τις πλευρές για το m-xl */
.m-xl-top { margin-top: var(--space-xl); }
.m-xl-bottom { margin-bottom: var(--space-xl); }
.m-xl-left { margin-left: var(--space-xl); }
.m-xl-right { margin-right: var(--space-xl); }

/* Top bottom margins */
.m-0-tb { margin-top: 0;margin-bottom: 0; }
.m-sm-tb { margin-top: var(--space-sm);margin-bottom: var(--space-sm); }
.m-md-tb { margin-top: var(--space-md);margin-bottom: var(--space-md); }
.m-lg-tb { margin-top: var(--space-lg);margin-bottom: var(--space-lg); }
.m-xl-tb { margin-top: var(--space-xl);margin-bottom: var(--space-xl); }

.m-0-lr    { margin-left: 0;margin-right: 0; }
.m-sm-lr { margin-left: var(--space-sm);margin-right: var(--space-sm); }
.m-md-lr { margin-left: var(--space-md);margin-right: var(--space-md); }
.m-lg-lr { margin-left: var(--space-lg);margin-right: var(--space-lg); }
.m-xl-lr { margin-left: var(--space-xl);margin-right: var(--space-xl); }

/* === 7. Ρυθμίσεις HTML === MARK: HTML */

/* Empty container  */
.empty {display: contents;}

ul.list {}

ul.list li {
    display: inline-block;
    list-style: none;
}

.text-center {text-align:center;}



/* === 7. Ρυθμίσεις για gaps με διαφορετικά μεγέθη === MARK: Gaps */

.g-0  { gap: 0}   /* Χωρίς κενό */

.g-sm { gap: var(--gap-sm); }  /* Μικρό κενό */
.g-md { gap: var(--gap-md); } /* Μεσαίο κενό */
.g-lg { gap: var(--gap-lg); } /* Μεγάλο κενό */
.g-xl { gap: var(--gap-xl); } /* Πολύ μεγάλο κενό */

/* === 8. Ρυθμίσεις για εικόνες === MARK: Images */
img {
    margin-bottom: 0; /* Αφαιρεί το περιθώριο κάτω από την εικόνα */
}

/* Εικόνες που δεν είναι SVG */
img:not([src$=".svg"]) {
    max-width: 100%; /* Αποτρέπει την εικόνα να ξεπεράσει το φυσικό της μέγεθος */
    height: auto; /* Διατηρεί τις αναλογίες της εικόνας */
}

/* === 9. Ρυθμίσεις για εικόνες πλήρους πλάτους === */
.full-size {
    width: 100%; /* Η εικόνα καλύπτει όλο το πλάτος του γονικού στοιχείου */
}

.full-size-image :is(picture, img) {
    width: 100%; /* Η εικόνα ή το picture καλύπτει το πλήρες πλάτος */
}

/* === 10. Ρυθμίσεις για εικόνες με διαφορετικές αναλογίες διαστάσεων === */

/* Αναλογία 16:9 */
.aspect-ratio-16-9 :is(picture, img) {
    aspect-ratio: 16 / 9; /* Ορίζει αναλογία 16:9 */
}

/* Αναλογία 4:3 */
.aspect-ratio-4-3 :is(picture, img) {
    aspect-ratio: 4 / 3; /* Ορίζει αναλογία 4:3 */
}

/* Αναλογία 1:1 (τετράγωνο) */
.aspect-ratio-1-1 :is(picture, img) {
    aspect-ratio: 1 / 1; /* Ορίζει αναλογία 1:1 */
}

/* === 11. Ρυθμίσεις για άρθρα === MARK: Articles */
.article-overlap > * {
    grid-column: 1;
    grid-row: 1;
}

.article-side > * {
    grid-row: 1;
}

.article-bottom {
    align-items: end;
}

[class$="-items"] {
    /* Reference: Εδώ βάζεις τις CSS ιδιότητες που θέλεις να εφαρμόσεις */
}

[class$="-item"] {
    /* Reference: Εδώ βάζεις τις CSS ιδιότητες που θέλεις να εφαρμόσεις */
}

/* === 12. Στυλ για responsive layouts === MARK: Display */

.hide {
    display:none!important;
}

/* Για συσκευές κινητών (έως 480px) */
@media screen and (max-width: 480px) {
    .show_mobile {
        display: initial !important; /* Εμφάνιση μόνο σε κινητά */
    }
    .hide_mobile {
        display: none !important; /* Απόκρυψη μόνο σε κινητά */
    }
    .show_tablet, .show_desktop, .show_large {
        display: none !important; /* Απόκρυψη για άλλες συσκευές */
    }
}

/* Για tablets (481px έως 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .show_mobile {
        display: none !important; /* Απόκρυψη για κινητά */
    }
    .show_tablet {
        display: initial !important; /* Εμφάνιση μόνο σε tablets */
    }
    .hide_tablet, .show_desktop, .show_large {
        display: none !important; /* Απόκρυψη για άλλες συσκευές */
    }
}

/* Για desktop ή laptops (769px έως 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .show_mobile, .show_tablet {
        display: none !important; /* Απόκρυψη για κινητά και tablets */
    }
    .show_desktop {
        display: initial !important; /* Εμφάνιση μόνο σε desktop */
    }
    .hide_desktop, .show_large {
        display: none !important; /* Απόκρυψη για άλλες συσκευές */
    }
}

/* Για μεγάλες οθόνες (άνω των 1024px) */
@media (min-width: 1025px) {
    .show_mobile, .show_tablet, .show_desktop {
        display: none !important; /* Απόκρυψη για κινητά, tablets και desktops */
    }
    .show_large {
        display: initial !important; /* Εμφάνιση μόνο σε μεγάλες οθόνες */
    }
}

/* === 13. Ρυθμίσεις Flex και Grid για μεγαλύτερες οθόνες === MARK: Flex - Grid*/

/* Για μεγαλύτερες οθόνες, χρησιμοποιούμε flexbox */
@media screen and (min-width: 480px) {

   
    .flx {
        width:100%;
        display: flex; /* Ενεργοποιούμε το flex layout */
         /* Ισομοιράζουμε τα στοιχεία οριζόντια */
        gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
    }

    .flx .v-center {align-items: center;}
    .flx .h-full {justify-content: space-between;}
    .flx.text-center {justify-content: center}

    .grd {
        display: grid; /* Ενεργοποιούμε το grid layout */
        gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
    }

}    

    .flex {
        display:flex;
    }

    .grid > * {
        order: 100; /* Ορίζουμε την αρχική σειρά για τα στοιχεία */
    }    

    .grid-2-cols {
        /* display: grid; */
        grid-template-columns: 1fr 1fr; /* 2 στήλες ίσης πλάτους */
        gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
    }

    .grid-3-cols {
        /* display: grid; */
        grid-template-columns: 1fr 1fr 1fr; /* 3 στήλες ίσης πλάτους */
        gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
    }

    @media screen and (min-width: 481px) {
        .grid-3-cols-res {
            /* display: grid; */
            grid-template-columns: 1fr 1fr; /* 3 στήλες ίσης πλάτους */
            gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
        }
    }

    @media screen and (min-width: 729px) {
        .grid-3-cols-res {
            /* display: grid; */
            grid-template-columns: 1fr 1fr 1fr; /* 3 στήλες ίσης πλάτους */
            gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
        }
    }    

    .grid-row {
        /* display: grid; */
        gap: var(--gap-md); /* Κενό μεταξύ των στοιχείων */
    }

/*
MARK: Wordpress 
*/


.navigation {text-align:center;}

.navigation .screen-reader-text {
	display:none;
}

.navigation .nav-links .page-numbers {
    padding:0 8px;
    font-size:var(--font-size-md);
}

.navigation .nav-links .page-numbers.current {
    font-weight:bold;
}

/* 

MARK: Extra Code 

*/

/* MARK: Grid layout for homepage */
/* Ορίζουμε το grid layout για το .content-grid. Χρησιμοποιούμε custom properties (μεταβλητές CSS) για μεγαλύτερη ευχρηστία και ευκολία στην παραμετροποίηση. */
/* 
https://www.youtube.com/watch?v=c13gpBrnGEw 
https://codepen.io/kevinpowell/pen/ExrZrrw
*/

.content-grid {
    /* Η εσωτερική απόσταση κατά μήκος του οριζόντιου άξονα. Χρησιμοποιείται για το padding γύρω από το περιεχόμενο του grid */
    --padding-inline: 1.5em;
    
    /* Το μέγιστο πλάτος του κύριου περιεχομένου (κεντρική στήλη) */
    /* --content-max-width: 900px; */
    
    /* Το μέγιστο πλάτος για τη "breakout" περιοχή (περιοχή που εκτείνεται πέρα από το κύριο περιεχόμενο) */
    /* --breakout-max-width: 1200px; */
  
    /* Υπολογίζουμε την απόσταση της "breakout" περιοχής από το περιεχόμενο, προκειμένου να κρατήσουμε μια ισχυρή διάταξη του grid.
       Είναι το μισό της διαφοράς μεταξύ του μέγιστου πλάτους breakout και του πλάτους του περιεχομένου */
    --breakout-size: calc(
      (var(--breakout-max-width) - var(--content-max-width)) / 2
    );
  
    /* Ορίζουμε το στοιχείο ως grid container */
    display: grid;
  
    /* Ορίζουμε τις στήλες του grid. Χρησιμοποιούμε κατανοητά ονόματα για να αναφερόμαστε στις περιοχές */
    grid-template-columns:
      [full-width-start] minmax(var(--padding-inline), 1fr) /* Στήλη για full-width στοιχεία: Το πλάτος ξεκινά από το padding-inline και προσαρμόζεται */
      [breakout-start] minmax(0, var(--breakout-size)) /* Στήλη για breakout περιοχή: Προσαρμόζεται με βάση την breakout-size */
      [content-start] min(100% - (var(--padding-inline) * 2), var(--content-max-width)) /* Στήλη για το κύριο περιεχόμενο: Το πλάτος είναι είτε το υπόλοιπο του container είτε το μέγιστο πλάτος του περιεχομένου */
      [content-end]
      minmax(0, var(--breakout-size)) [breakout-end] /* Στήλη για την περιοχή breakout (δεξιά πλευρά) */
      minmax(var(--padding-inline), 1fr) [full-width-end]; /* Στήλη για full-width στοιχεία: Έτσι εξασφαλίζεται ότι τα full-width στοιχεία εκτείνονται σε όλο το πλάτος */
}

/* Ορίζει τα στοιχεία που δεν έχουν την κλάση .breakout ή .full-width μέσα στο .content-grid να τοποθετούνται στην περιοχή του "content" */
.content-grid > :not(.breakout, .full-width), .full-width > :not(.breakout, .full-width) {
    grid-column: content; /* Καθορίζουμε ότι αυτά τα στοιχεία καταλαμβάνουν την κεντρική στήλη του grid */
}

/* Ορίζει τα στοιχεία με την κλάση .breakout να τοποθετούνται στην περιοχή "breakout" του grid.
   Αυτά τα στοιχεία θα επεκταθούν πέρα από το βασικό περιεχόμενο του grid, εάν χρειάζεται */
.content-grid > .breakout {
    grid-column: breakout; /* Τοποθετούμε τα breakout στοιχεία στην ειδική στήλη breakout */
}

/* Ορίζει τα στοιχεία με την κλάση .full-width να καλύπτουν ολόκληρο το πλάτος του grid.
   Χρησιμοποιούμε επίσης ένα δεύτερο grid layout για να επιτρέψουμε τη χρήση όλων των στηλών του γονέα. */
.content-grid > .full-width {
    grid-column: full-width; /* Τοποθετούμε τα full-width στοιχεία στην ειδική στήλη full-width */
    display: grid; /* Ορίζουμε το full-width στοιχείο και αυτό ως grid, ώστε να μπορεί να χρησιμοποιήσει τις στήλες του γονέα */
    grid-template-columns: inherit; /* Αντιγράφουμε τις στήλες του γονικού grid ώστε να διατηρηθεί η δομή */
}

/* Στυλ για εικόνες με την κλάση .full-width. Εξασφαλίζουμε ότι οι εικόνες καλύπτουν όλο το πλάτος χωρίς να παραμορφώνονται,
   περιορίζοντας το ύψος τους στο 45% του ύψους της οθόνης */
img.full-width {
    width: 100%; /* Η εικόνα καλύπτει όλο το πλάτος της διαθέσιμης περιοχής */
    max-height: 45vh; /* Το μέγιστο ύψος της εικόνας περιορίζεται στο 45% του ύψους της οθόνης */
    object-fit: cover; /* Η εικόνα γεμίζει την περιοχή χωρίς να παραμορφώνεται, διατηρώντας την αναλογία */
}