/* Custom styles for όλη την παρουσίαση (pg_trees meetup) */


:root {
    --r-background-color: #f1f2ed;
}

/* Fallback: στόχευσε ΜΟΝΟ τα outer containers — σε περίπτωση που η CSS variable
   παρακαμφθεί από theme/quarto override.
   ⚠️ ΟΧΙ `.reveal .slides`! Είναι το content layer και κρύβει τα per-slide
   .slide-background elements (πχ τα dark backgrounds των section dividers). */
.reveal-viewport,
body {
    background-color: #f1f2ed;
}


/* Global scale: μειώνουμε τη βάση και ΟΛΑ shrink-άρουν αναλογικά
   (h1/h2/h3, body, code, asides — όλα είναι em-based). */
.reveal { font-size: 28px; }   /* default ~40px → -25% παντού */

/* Per-heading overrides — τιθώνουν τα em ratios σε ΧΑΜΗΛΟΤΕΡΑ από τα reveal
   defaults (h1=2.5em, h2=1.6em, h3=1.3em) ώστε οι τίτλοι να μη φουσκώνουν.
   Πρέπει να νικάμε το `.reveal[data-navigation-mode=linear] .title-slide h1`
   του quarto theme (specificity 0,3,1) — γι' αυτό αντιγράφουμε τον selector. */
 .reveal[data-navigation-mode=linear] .title-slide h1,
.reveal .title-slide h1,
.reveal h1 { font-size: 1.8em; }
.reveal h2 { font-size: 1.6em; }
.reveal h3 { font-size: 1.4em; }
.reveal h4 { font-size: 1.2em; }

/* Tables στοιχισμένα αριστερά — opt-in.
   Χρήση στο .qmd: τύλιξε τον πίνακα σε ::: {.left} ... ::: */
.reveal .left table { margin-left: 0; margin-right: auto; }

/* Utility: μικρότερο font για επιλεγμένο block — opt-in.
   Χρήση: τύλιξε σε ::: {.small} ... ::: */
.reveal .small { font-size: 0.7em; }
.reveal .small1 { font-size: 0.8em; }

/* .def-bg utility — opt-in διαφανές <pre>/<code> ΜΕΣΑ σε container
   με αυτή την class. Παρακάμπτει το default λευκό bg που βάζει το
   Quarto theme σε όλα τα code blocks (".reveal pre { background-color: #fff }").
   Χρήση στο .qmd: ::: {.def-bg} ... :::  ή στο column ::: {.column .def-bg ...} */
.reveal .def-bg pre,
.reveal .def-bg pre code {
  background-color: transparent;
  box-shadow: none;
}

/* Κεντράρισμα περιεχομένου σε column — opt-in, ορθογώνια utilities.
   .center      → οριζόντιο κέντρο (text-align)
   .v-center    → κάθετο κέντρο (flex)
   Συνδυάζονται για κέντρο και στους 2 άξονες:
   ::: {.column .center .v-center width="2%"} → ::: */
.reveal .center,
.reveal .column.center { text-align: center; }
/* Όταν μια .columns container ΠΕΡΙΕΧΕΙ .v-center column, αλλάζει σε flex
   container ώστε όλα τα columns να αποκτήσουν ίσο height (default align-items
   του flex). Η αλλαγή είναι scoped με :has() ώστε να μην επηρεάσει .columns που
   δεν χρειάζονται vertical centering. */
.reveal .columns:has(.column.v-center) {
  display: flex;
  align-items: center;       /* όλα τα columns vertically centered στο tallest sibling */
}

/* Σημ.: δεν χρειάζεται rule στο ίδιο το .v-center — η class λειτουργεί ως
   marker για το :has() του parent. */

.reveal h1 {
    border-bottom: 1px solid #c46b3b;
    padding-bottom: 0.1em;
}

/* Αφαίρεση top margin από την πρώτη εικόνα ενός column ώστε να ξεκινάει
   από την κορυφή του column — consistency με <pre>/<table>/<code> blocks
   που είναι ήδη στο margin-top: 0.
   ⚠️ Το ![](...) τυλίγεται από markdown σε <p>, οπότε χρειάζονται 2 rules:
   ένα για το <p> wrapper και ένα για το <img> μέσα του. */
.reveal .column > p:first-child {
    margin-top: 0;
}
.reveal .column > p:first-child > img {
    margin-top: 0;
}

/* Section divider slides — σημαντική οπτική ανανέωση ανάμεσα στα κεφάλαια
   (μοντέλα). Σκούρο background, ανοιχτό text, κεντραρισμένο μεγάλο h1.
   Χρήση στο master qmd: # Όνομα κεφαλαίου {.section-divider data-background-color="#15171a"} */
.reveal .section-divider h1 {
    color: #f0f0f0;
    border-bottom-color: #c46b3b;     /* terracotta border-bottom μένει για consistency */
    font-size: 2.4em;                  /* μεγαλύτερο από τα κανονικά slide titles (1.8em) */
    text-align: center;
    margin-top: 2em;                   /* να μη κολλάει στην κορυφή του slide */
}




/* Blockquote (`>` στο markdown) — μειώνουμε το vertical extent της αριστερής
   γραμμής (border-left) ώστε να μη φουσκώνει σε σχέση με το text. Tweak
   `border-left-width` για thickness, `padding-top/bottom` για ύψος της γραμμής. */
.reveal blockquote {
  border-left-width: 4px;       /* από 4px default */
  padding-top: 1px;            /* από 10px (~0.5em) */
  padding-bottom: 1px;
  margin-top: 8px;             /* λίγο λιγότερο breathing space */
  margin-bottom: 2px;
}


  /* Marker για slides που είναι "appendix / not for live"
     Χρήση: # Slide title {.appendix}
     Εμφανίζει διακριτικό badge στη γωνία ώστε να τα ξεχωρίζεις στο preview.
     ⚠️ Selector είναι `section.appendix` (όχι σκέτο `.appendix`) γιατί η reveal
     αντιγράφει τις slide classes στο .slide-background mirror — διπλό badge αλλιώς.
     ⚠️ `top: -1.5em` (αρνητικό) τοποθετεί το badge ΠΑΝΩ από το slide content,
     ώστε να μην επικαλύπτεται με μεγάλους τίτλους h1 που πιάνουν όλο το πλάτος. */
  .reveal section.appendix::before {
    content: "↪🗐 appendix";
    position: absolute;
    top: -1.5em; right: 0;
    font-size: 0.5em;
    color: #c46b3b;
    opacity: 1;
  }