:root {
  /* Light tones */
  --brand-light-1: #9CD9D9;
  --brand-light-1-rgb: 156, 217, 217;

  --brand-light-2: #D9A273;
  --brand-light-2-rgb: 217, 162, 115;

  /* Dark tones */
  --brand-dark-1: #2976A6;
  --brand-dark-1-rgb: 41, 118, 166;

  --brand-dark-2: #14488C;
  --brand-dark-2-rgb: 20, 72, 140;

  /* Neutral */
  --brand-grey: #f2f2f2;
  --brand-grey-rgb: 242, 242, 242;

}
body {
    font-family: 'Noto Sans', sans-serif!important;
}

.bg-light-1{
	background-color: var(--brand-light-1)!important;
}
.bg-light-2{
	background-color: var(--brand-light-2)!important;
}
.bg-dark-1{
	background-color: var(--brand-dark-1)!important;
}
.bg-dark-2{
	background-color: var(--brand-dark-2)!important;
}
.bg-grey{
	background-color: var(--brand-grey)!important;
}
.txt-light-1{
	color: var(--brand-light-1)!important;
}
.txt-light-2{
	color: var(--brand-light-2)!important;
}
.txt-dark-1{
	color: var(--brand-dark-1)!important;
}
.txt-dark-2{
	color: var(--brand-dark-2)!important;
}
.txt-grey{
	color: var(--brand-grey)!important;
}






/* BUTTONS *****************************************************/
.btn-outline-dark-1{
  color: var(--brand-dark-1) !important;
  border-color: var(--brand-dark-1) !important;
  /* width: 8rem !important; */
}
.btn-outline-dark-1:hover{
  color: var(--brand-grey) !important;
  background-color: var(--brand-dark-1) !important;
}
.btn-outline-light-1{
  color: var(--brand-light-1) !important;
  border-color: var(--brand-light-1) !important;
  /* width: 8rem !important; */
}
.btn-outline-light-1:hover{
  color: var(--brand-dark-2) !important;
  background-color: var(--brand-light-2) !important;
}
.btn-outline-light-2{
  color: var(--brand-light-2) !important;
  border-color: var(--brand-light-2) !important;
  /* width: 8rem !important; */
}
.btn-outline-light-2:hover{
  color: var(--brand-grey) !important;
  background-color: var(--brand-dark-1) !important;
}
.btn-outline-grey{
  color: var(--brand-grey) !important;
  border-color: var(--brand-grey) !important;
}
.btn-outline-grey:hover{
  color: var(--brand-dark-2) !important;
  background-color: var(--brand-light-1) !important;
}
.btn.btn-booking{
  background: var(--brand-light-2) !important;
  color: var(--brand-dark-2) !important;
  font-size: 1.1rem !important;
  height: 50px !important;
}
.btn.btn-booking:hover{
  background: var(--brand-light-1) !important;
  color: var(--brand-dark-2) !important;
}
.btn.btn-booking-light-1{
  background: var(--brand-light-1) !important;
  color: var(--brand-dark-2) !important;
  font-size: 1.1rem !important;
  height: 50px !important;
}
.btn.btn-booking-light-1:hover{
  background: var(--brand-light-2) !important;
  color: var(--brand-grey) !important;
}
.btn.btn-booking-dark-1{
  background: var(--brand-dark-1) !important;
  color: var(--brand-grey) !important;
  font-size: 1.1rem !important;
  height: 50px !important;
}
.btn.btn-booking-dark-1:hover{
  background: var(--brand-dark-2) !important;
  color: var(--brand-grey) !important;
}
.btn.btn-booking-enroll{
  background: var(--brand-dark-1) !important;
  color: var(--brand-grey) !important;
  font-size: 1.3rem !important;
  height: 50px !important;
}
.btn.btn-booking-enroll:hover{
  background: var(--brand-light-2) !important;
  color: var(--brand-grey) !important;
}
.btn.btn-booking-fully-booked{
  background: var(--brand-light-2) !important;
  color: var(--brand-grey) !important;
  font-size: 1.3rem !important;
  height: 50px !important;
}
.btn.btn-booking-fully-booked:hover{
  background: var(--brand-light-2) !important;
  color: var(--brand-grey) !important;
}
/* END OF BUTTONS **********************************************/
/* HERO SLIDER BACKGROUND — responsive AVIF/WebP/JPEG *********/
.slider-inner.hero-bg{
  background-image: url('../img/opt/home-1920.jpg');
  background-image: image-set(
    url('../img/opt/home-1920.avif') type('image/avif'),
    url('../img/opt/home-1920.webp') type('image/webp'),
    url('../img/opt/home-1920.jpg')  type('image/jpeg')
  );
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 900px){
  .slider-inner.hero-bg{
    background-image: url('../img/opt/home-1280.jpg');
    background-image: image-set(
      url('../img/opt/home-1280.avif') type('image/avif'),
      url('../img/opt/home-1280.webp') type('image/webp'),
      url('../img/opt/home-1280.jpg')  type('image/jpeg')
    );
  }
}
/* Ο τίτλος του slider κρατά την εμφάνιση H1 χωρίς να είναι H1 */
.slider-inner .emphasis-title p.h1{ margin-bottom: 0; }
/* END OF HERO SLIDER *****************************************/

/* PROFILE PORTRAIT ******************************************/
/* Η στήλη τεντώνεται στο ύψος του κειμένου (align-items-stretch).
   Το πορτρέτο μένει σε σταθερό ύψος και ακολουθεί το scroll, ώστε το
   background-size:cover να μην κάνει υπερβολικό zoom στο πρόσωπο. */
.profile-portrait-col{ position: relative; }
.profile-portrait-bg{
  position: sticky;
  top: 0;
  height: 100vh;
  max-height: 900px;
  background-image: url('../img/opt/1-900.jpg');
  background-image: image-set(
    url('../img/opt/1-900.avif') type('image/avif'),
    url('../img/opt/1-900.webp') type('image/webp'),
    url('../img/opt/1-900.jpg')  type('image/jpeg')
  );
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
@media (max-width: 767px){
  .profile-portrait-bg{ position: static; height: 60vh; max-height: 520px; }
}
/* END OF PROFILE PORTRAIT ***********************************/

/* ΑΞΙΟΛΟΓΗΣΕΙΣ — σωστή σημασιολογία, ίδια εμφάνιση **********/
blockquote.gn-review{
  border: 0; padding: 0; margin: 0;
  font-size: inherit; quotes: none;
}
blockquote.gn-review > p{ line-height: 1.65; }
blockquote.gn-review footer{ background: none; padding: 0; }
cite.gn-review-cite{ font-style: normal; }
/* END OF ΑΞΙΟΛΟΓΗΣΕΙΣ ***************************************/

/* ΣΧΕΤΙΚΕΣ ΣΕΛΙΔΕΣ & ΑΠΟΠΟΙΗΣΗ *****************************/
.gn-related-card{
  border: 1px solid #D9E4EC;
  border-radius: 6px;
  text-decoration: none;
  background: #FFFFFF;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gn-related-card:hover,
.gn-related-card:focus-visible{
  border-color: #2976A6;
  box-shadow: 0 2px 10px rgba(41,118,166,.12);
}
.gn-disclaimer{
  border-left: 4px solid #2976A6;
  background: #F1F6FA;
  border-radius: 4px;
}
@media (prefers-reduced-motion: reduce){
  .gn-related-card{ transition: none; }
}
/* END OF ΣΧΕΤΙΚΕΣ ΣΕΛΙΔΕΣ **********************************/

/* FOOTER — logo & αναγνωσιμότητα ****************************/
/* Το width/height στο <img> μαζί με max-width:100% παραμόρφωνε
   το λογότυπο. Το height:auto επαναφέρει τις αναλογίες. */
.gn-footer-logo{ height: auto; max-width: 100%; }

/* Τα links του footer ήταν #AAA σε #F2F2F2 — αντίθεση 1,9:1.
   Το WCAG AA απαιτεί 4,5:1. Τώρα 6,8:1. */
#footer .widget_links a,
#footer .widget ul li a{ color: #4A5560; }
#footer .widget_links a:hover,
#footer .widget ul li a:hover,
#footer .widget_links a:focus-visible,
#footer .widget ul li a:focus-visible{ color: #2976A6; text-decoration: underline; }
#footer .widget ul li{ color: #4A5560; }
/* END OF FOOTER *********************************************/

/* BREADCRUMBS ***********************************************/
.gn-breadcrumbs{ padding: .85rem 0; border-bottom: 1px solid #E3EAF0; background: #F7F9FB; }
.gn-breadcrumbs ol{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  font-size: .875rem; color: #5C6874;
}
.gn-breadcrumbs li{ display: flex; align-items: center; gap: .5rem; }
.gn-breadcrumbs li + li::before{ content: "›"; color: #9AA8B4; }
.gn-breadcrumbs a{ color: #2976A6; text-decoration: none; }
.gn-breadcrumbs a:hover, .gn-breadcrumbs a:focus-visible{ text-decoration: underline; }
.gn-breadcrumbs [aria-current="page"]{ color: #3B4650; font-weight: 600; }
/* END OF BREADCRUMBS ****************************************/

/* ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ — αντίθεση & touch targets ****************/
/* Το top-bar χρησιμοποιούσε το προεπιλεγμένο #dee2e6 του Canvas
   πάνω στο brand μπλε → αντίθεση 3,8:1. Το λευκό δίνει 4,96:1. */
#top-bar.dark .top-links-item > a,
#top-bar.dark .top-links-item > a i{ color: #FFFFFF !important; }
#top-bar.dark .top-links-item > a:hover{ color: #FFFFFF !important; text-decoration: underline; }

/* Κουμπί CTA: #f2f2f2 → λευκό (4,42:1 → 4,96:1) */
.btn.btn-booking-dark-1{ color: #FFFFFF !important; }

/* Τελείες slider: 7×7 px → 24×24 περιοχή αφής, ίδια οπτική τελεία */
.flex-control-nav li{ margin: 0 3px; }
.flex-control-nav li a{
  position: relative;
  display: inline-block;
}
.flex-control-nav li a::after{
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 24px; height: 24px;
}
/* END OF ΠΡΟΣΒΑΣΙΜΟΤΗΤΑ ************************************/

/* SLIDER TITLE — responsive *********************************/
/* Το css/george.css:96 όριζε σταθερά 48px χωρίς mobile scaling,
   με αποτέλεσμα ο τίτλος να κόβεται δεξιά στα κινητά (προϋπήρχε).
   Ο selector καλύπτει και το <p class="h1"> μετά τη σημασιολογική
   αλλαγή (ένα H1 ανά σελίδα). */
#slider .emphasis-title h1,
#slider .emphasis-title p.h1{
  font-size: clamp(1.45rem, 5.6vw, 48px);
  overflow-wrap: break-word;
  hyphens: auto;
}
@media (max-width: 767px){
  /* Δεξιά στοίχιση με μεγάλο κείμενο σε στενή οθόνη ξεχείλιζε. */
  #slider .emphasis-title,
  #slider .emphasis-title p.h1,
  #slider .row.text-end{ text-align: center !important; }
}
/* END OF SLIDER TITLE ***************************************/
