:root{
  --bg-dark:#0f1720;
  --card-bg:#fbfbfb;
  --accent:#009973;
  --muted:#8a8a8a;
  
  /* Νέα χρώματα για header/footer gradient */
  --header-gradient: linear-gradient(135deg, #43cea2 0%, #185a9d 100%);
  --footer-gradient: linear-gradient(135deg, #185a9d 0%, #43cea2 100%);
}

/* basic reset */
*{box-sizing:border-box}
body{
	font-family:"Open Sans",sans-serif;
	background:var(--bg-dark);
	color:#111;
	margin:0;
	padding: 0;
	display:flex;
	flex-direction:column;
	min-height:100vh
}

/* 1. Header με υψηλό z-index */
.site-header{
  width:100%;
  color:#fff;
  background:var(--header-gradient);
  margin:0;
  padding:0;
  position: relative;
  z-index: 1000; /* Υψηλό z-index για header */
}

.container{
	max-width:1100px;
	width:95%;
	margin:0 auto;
}

.site-header .container{
  padding:12px 0;
}

.top-row{
  display:flex;
  align-items:center;
  gap:12px;
  padding:0;
  margin:0 0 15px 0;
}

/* 2. Δομή για 2η σειρά header */
.main-nav {
  width: 100%;
  position: relative;
  z-index: 1001; /* Ακόμα υψηλότερο z-index για nav */
}

.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Αριστερά: menu και hamburger */
.nav-left {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 3. Λογότυπο */
.logo{
  width:56px;
  height:56px;
  padding:6px;
  background:transparent !important;
}
.site-title .brand{font-size:1.15rem;font-weight:700}
.site-title .subtitle{font-size:0.85rem;color:rgba(255,255,255,0.8)}

/* 2. Footer με κανονικό ύψος */
footer{
  background:var(--footer-gradient);
  color:white;
  margin-top:auto;
  padding:20px 0;
  width:100%;
  text-align:center;
  position:relative;
}

footer .container{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:8px;
}

/* 3. Αναζήτηση - πάντα δεξιά στη 2η σειρά */
.searchbox {
  flex-shrink: 0;
}

.searchbox input{
  padding:8px 12px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.3);
  background:rgba(255,255,255,0.95);
  color:#333;
  font-family:"Open Sans",sans-serif;
  width:100%;
  min-width:250px;
  transition:all 0.3s ease;
}

.searchbox input::placeholder{
  color:#666;
}

.searchbox input:focus{
  outline:none;
  background:white;
  border-color:rgba(255,255,255,0.5);
  box-shadow:0 0 0 2px rgba(255,255,255,0.1);
}

/* 4. Μενού με hover effects */
.menu{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  gap:20px;
}

.menu li{
  position:relative;
}

.menu a, .menu .has-sub{
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  border-radius:8px;
  display:inline-block;
  transition:all 0.3s ease;
  font-weight:500;
  cursor:pointer;
}

/* Hover effect για όλα τα menu items */
.menu li a:hover,
.menu .has-sub:hover{
  background:rgba(255,255,255,0.25);
  transform:translateY(-1px);
}

/* 5. Υπομενού - ΔΙΟΡΘΩΣΗ z-index και positioning */
.submenu{
  position:absolute;
  left:0;
  top:100%;
  display:none;
  background:transparent;
  padding:6px;
  border-radius:0;
  min-width:220px;
  z-index: 1100; /* ΑΥΞΗΣΗ z-index για να εμφανίζεται μπροστά από ΟΛΑ */
  list-style:none;
  margin:0px 0 0 0;
  transition: opacity 0.1s ease;
}

.submenu li{
  padding:0;
  margin:0;
  white-space:nowrap;
  border-radius:6px;
  margin-bottom:2px;
  list-style:none;
}

.submenu li:last-child{
  margin-bottom:0;
}

.submenu li a{
  text-decoration:none;
  display:block;
  width:100%;
  padding:10px 12px;
  border-radius:6px;
  color: inherit;
  border:none !important;
  box-shadow:none !important;
}

/* === 2ο επίπεδο υπομενού (hover δεξιά) === */
.submenu > li { position: relative; }               /* ο γονιός του level-2 */
.submenu .submenu {
  position: absolute;
  left: 100%;
  top: 0;
  display: none;
  background: transparent;
  padding: 6px;
  min-width: 220px;
  z-index: 1200;
}
.submenu > li:hover > .submenu { display: block; }

/* λίγη απόσταση ώστε να μην “κολλάει” πάνω στο 1ο επίπεδο */
.submenu .submenu { margin-left: 6px; }

/* Σε mobile το 2ο επίπεδο να είναι block & μέσα στη ροή */
@media (max-width:680px){
  .submenu .submenu{
    position: static;
    display: none;     /* θα ανοίξει αν χρειαστεί με .mobile-open */
    margin: 8px 0 0 12px;
    padding: 4px 0 0 8px;
  }
  .submenu .submenu.mobile-open{ display: block; }
}

/* Χρώματα τάξεων και μαθημάτων στο submenu */
.submenu .grade-A{background:#f39c12;color:white}
.submenu .grade-B{background:#27ae60;color:white}
.submenu .grade-G{background:#3498db;color:white}
.submenu .grade-D{background:#8e44ad;color:white}
.submenu .grade-E{background:#e74c3c;color:white}
.submenu .grade-St{background:#16a085;color:white}

.submenu .subject-glossa{background:linear-gradient(145deg, #ff9966, #ff5e62); color:white; border:none}
.submenu .subject-math{background:linear-gradient(145deg, #36d1dc, #5b86e5); color:white; border:none}
.submenu .subject-meleti{background:linear-gradient(145deg, #cfd9df, #e2ebf0); color:white; border:none}
.submenu .subject-istoria{background:linear-gradient(145deg, #ff9a9e, #fad0c4); color:white; border:none}
.submenu .subject-physics{background:linear-gradient(145deg, #00b09b, #96c93d); color:white; border:none}
.submenu .subject-geo{background:linear-gradient(145deg, #43cea2, #185a9d); color:white; border:none}
.submenu .subject-default{background:linear-gradient(145deg,#ffffff,#f3f3f3); color:#111; border:none}

/* Hover effects για υπομενού */
.submenu li a:hover{
  transform:translateX(4px);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* Επίπεδο 1: άνοιγμα ΜΟΝΟ όταν κάνω hover στο συγκεκριμένο li.has-sub */
.menu > li.has-sub > .submenu { display: none; }
.menu > li.has-sub:hover > .submenu { display: block; }

/* Επίπεδο 2: άνοιγμα ΜΟΝΟ όταν κάνω hover στο συγκεκριμένο παιδί του submenu */
.submenu > li.has-nested > .submenu { display: none; }
.submenu > li.has-nested:hover > .submenu { display: block; }


/* 6. Hamburger - κρυφό σε desktop */
.hamburger{
  display:none;
  background:none;
  border:none;
  color:#fff;
  font-size:1.35rem;
  padding:6px;
  cursor:pointer;
  z-index: 1101; /* Υψηλό z-index για hamburger */
}

/* Rainbow αριστερό border για Tiles & Viewer */
.rainbow-left {
  position: relative;
}
.rainbow-left::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;              /* πάχος του border */
  background: linear-gradient(
    180deg,
    #ff0040,  /* red */
    #ff7a00,  /* orange */
    #ffef00,  /* yellow */
    #00d775,  /* green */
    #00a1ff,  /* blue */
    #8b00ff   /* violet */
  );
  border-radius: 14px 0 0 14px;  /* ταιριάζει με .tile */
  pointer-events: none;
  z-index: 0;
}

/* Αν θες λίγο μικρότερη ακτίνα στο viewer: */
#exerciseContainer.rainbow-left::after {
  border-radius: 12px 0 0 12px;
}

/* Μην δείχνεις το μονόχρωμο αριστερό border όταν υπάρχει rainbow */
.tile.rainbow-left { 
  border-left: 0 !important;
}
.viewer-header.rainbow-left {
  border-left: 0 !important;
}

/* (Προαιρετικό αισθητικό) να “κουμπώνει” σωστά το rainbow στο header του viewer */
.viewer-header.rainbow-left::after {
  border-radius: 0 0 0 12px;
}

/* Mobile Styles */
@media (max-width:680px){
  .top-row {
    margin-bottom: 10px;
  }

  /* Κρύβουμε το menu και δείχνουμε hamburger */
  .menu {
    display: none;
    position: fixed; /* Αλλαγή από absolute σε fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--header-gradient);
    padding: 80px 20px 20px 20px;
    border-radius: 0;
    flex-direction: column;
    gap: 15px;
    z-index: 1002; /* Υψηλό z-index για mobile menu */
    margin-top: 0;
    overflow-y: auto;
  }

  .menu.open {
    display: flex;
  }

  .menu li {
    width: 100%;
  }

  .menu a, .menu .has-sub {
    display: block;
    width: 100%;
    text-align: left;
    padding: 15px 20px;
    font-size: 1.1rem;
    background: rgba(255,255,255,0.1);
    border-radius: 10px;
  }

  /* Αναζήτηση παραμένει δεξιά */
  .searchbox {
    flex: 0 0 auto;
  }

  .searchbox input {
    min-width: 150px;
  }

  /* Hamburger ορατό */
  .hamburger {
    display: block;
    position: relative;
    z-index: 1003; /* Πολύ υψηλό z-index για hamburger */
  }

  /* Υπομενού στα κινητά */
  .submenu{
    position:static;
    display:none;
    margin:10px 0 0 0;
    box-shadow:none;
    background:rgba(255,255,255,0.1);
    width:100%;
    padding:10px;
    z-index: 1004; /* Ακόμα υψηλότερο z-index για mobile submenu */
  }

  .submenu.mobile-open{
    display:block;
  }

  .submenu li{
    margin-bottom:8px;
  }

  .submenu li a{
    padding:12px 15px;
    background:rgba(255,255,255,0.15);
    border-radius: 8px;
  }
	/* Βάλε το ουράνιο τόξο πάνω από φόντα/gradients */
.rainbow-left { position: relative; overflow: hidden; }
.rainbow-left::after { z-index: 1; }

/* Σίγουρα το header του viewer έχει position ώστε να φανεί */
.viewer-header { position: relative; overflow: hidden; }

/* Περιεχόμενο tile πάνω από το rainbow */
.tile > * { position: relative; z-index: 2; }

}

body{
  background:linear-gradient(135deg, #f0f8ff 0%, #e6f2ff 100%);
}

/* tiles - ΒΕΒΑΙΩΣΟΥ ότι έχουν χαμηλό z-index */
.tile{
  background:var(--card-bg);
  border-radius:14px;
  padding:16px;
  box-shadow:0 10px 25px rgba(0,0,0,0.18);
  display:block;
  text-decoration:none;
  color:#fff !important;
  margin-bottom:14px;
  transition:all 0.3s ease;
  position:relative;
  overflow:hidden;
  z-index: 1; /* Χαμηλό z-index για tiles */
}

.tile:hover{
  transform:translateY(-2px) scale(1.01);
  box-shadow:0 15px 35px rgba(0,0,0,0.25);
}

.tile::before{
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:linear-gradient(135deg, rgba(255,255,255,0.1) 0%, transparent 100%);
  opacity:0;
  transition:opacity 0.3s ease;
}

.tile:hover::before{
  opacity:1;
}

.tile img{
  border-radius:8px;
  filter:brightness(0) invert(1);
  transition:transform 0.3s ease;
}

.tile:hover img{
  transform:scale(1.05);
}

/* tags */
.meta{font-size:0.85rem;color:var(--muted);margin-top:4px}
.tags{margin-top:8px;display:flex;gap:8px}
.tag{padding:4px 10px;border-radius:6px;font-size:0.82rem;margin-right:0;font-weight:500;transition:all 0.3s ease;}

.tile:hover .tag{
  transform:translateY(-1px);
  box-shadow:0 2px 8px rgba(0,0,0,0.15);
}

/* Grade tags */
.tag-grade-A{background:#f39c12;color:white}
.tag-grade-B{background:#27ae60;color:white}
.tag-grade-G{background:#3498db;color:white}
.tag-grade-D{background:#8e44ad;color:white}
.tag-grade-E{background:#e74c3c;color:white}
.tag-grade-St{background:#16a085;color:white}

/* Subject tags */
.tag-subject-glossa{background:white;color:#ff5e62}
.tag-subject-math{background:white;color:#5b86e5}
.tag-subject-meleti{background:white;color:#8a8a8a}
.tag-subject-istoria{background:white;color:#ff9a9e}
.tag-subject-physics{background:white;color:#96c93d}
.tag-subject-geo{background:white;color:#185a9d}
.tag-subject-default{background:white;color:#666}

.meta{
  display:none;
}

/* grade colors (left border) */
.grade-A{border-left:6px solid #f39c12}
.grade-B{border-left:6px solid #27ae60}
.grade-G{border-left:6px solid #3498db}
.grade-D{border-left:6px solid #8e44ad}
.grade-E{border-left:6px solid #e74c3c}
.grade-St{border-left:6px solid #16a085}

/* subject gradients (διπλά χρώματα) */
.subject-glossa{background:linear-gradient(145deg, #ff9966, #ff5e62); color:#fff}
.subject-math{background:linear-gradient(145deg, #36d1dc, #5b86e5); color:#fff}
.subject-meleti{background:linear-gradient(145deg, #cfd9df, #e2ebf0); color:#fff}
.subject-istoria{background:linear-gradient(145deg, #ff9a9e, #fad0c4); color:#fff}
.subject-physics{background:linear-gradient(145deg, #00b09b, #96c93d); color:#fff}
.subject-geo{background:linear-gradient(145deg, #43cea2, #185a9d); color:#fff}
.subject-default{background:linear-gradient(145deg,#ffffff,#f3f3f3); color:#111}

/* viewer iframe container */
#exerciseContainer{background:#fff;border-radius:12px;padding:18px;box-shadow:0 8px 20px rgba(0,0,0,0.12);min-height:200px}

/* Viewer header tags */
.viewer-header {
  border-bottom: 1px solid #e0e0e0;
}

.viewer-tags {
  display: flex;
  align-items: center;
  gap: 10px;
}

.viewer-header .tag {
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 500;
  border: none;
}

.viewer-header .tag-grade-A { background: #f39c12; color: white; }
.viewer-header .tag-grade-B { background: #27ae60; color: white; }
.viewer-header .tag-grade-G { background: #3498db; color: white; }
.viewer-header .tag-grade-D { background: #8e44ad; color: white; }
.viewer-header .tag-grade-E { background: #e74c3c; color: white; }
.viewer-header .tag-grade-St { background: #16a085; color: white; }

.viewer-header .tag-subject-glossa { background: white; color: #ff5e62; }
.viewer-header .tag-subject-math { background: white; color: #5b86e5; }
.viewer-header .tag-subject-meleti { background: white; color: #8a8a8a; }
.viewer-header .tag-subject-istoria { background: white; color: #ff9a9e; }
.viewer-header .tag-subject-physics { background: white; color: #96c93d; }
.viewer-header .tag-subject-geo { background: white; color: #185a9d; }
.viewer-header .tag-subject-default { background: white; color: #666; }

/* small utilities */
button{
	border:none;
	padding:10px 12px;
	border-radius:8px;
	cursor:pointer;
	transition:all 0.3s ease;
}

button:hover{
	transform:translateY(-1px);
	box-shadow:0 4px 12px rgba(0,0,0,0.15);
}

/* Mobile: άνοιγμα υπομενού με .mobile-open */
@media (max-width:680px){
  .menu > li.has-sub > .submenu { display: none; }
  .menu > li.has-sub.mobile-open > .submenu { display: block; }

  .submenu > li.has-nested > .submenu { display: none; }
  .submenu > li.has-nested.mobile-open > .submenu { display: block; }

  /* Προαιρετικό: ένδειξη ότι ανοίγει */
  .menu > li.has-sub > a::after {
    content: '▸';
    float: right;
    opacity: .85;
    margin-left: 8px;
  }
  .menu > li.has-sub.mobile-open > a::after { content: '▾'; }
}

/* Desktop: κράτα ανοιχτό όταν κινείσαι προς τα δεξιά */
@media (min-width:681px){
  .submenu > li.has-nested { position: relative; }
  .submenu > li.has-nested::after{
    content:'';
    position:absolute;
    top:0; right:-12px;
    width:12px; height:100%;
    /* αόρατο buffer ώστε να μη χαθεί το hover */
  }
  /* το 2ο επίπεδο να μην έχει κενό */
  .submenu .submenu{
    left: calc(100% - 2px);
    margin-left: 0;
  }
}