/* ---------- Design tokens ---------- */
:root{
  --bg: #0e1013;
  --bg-soft: #121419;
  --card: rgba(255,255,255,.04);
  --line: rgba(255,255,255,.08);
  --text: #ecf0f3;
  --muted: #a6b0bb;
  --accent: #6be6d8;
  --accent-2: #7aa8ff;
  --nav-h: 64px;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html,body{ 
	margin:0;
	padding:0;
	background:var(--bg);
	color:var(--text);
	font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img{ max-width:100%; height:auto; display:block; }
a{ color: var(--accent-2); text-decoration: none; }
a:hover{ text-decoration: underline; }
button{ font: inherit; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background: var(--accent-2); border:0; color:#0e1013; font-weight:700; }
.btn.ghost{ background: transparent; color: var(--text); border:1px solid var(--line); }
.btn.sm{ padding:8px 10px; font-size:14px; border-radius:10px; }
.btn.xs{ padding:6px 8px; font-size:13px; border-radius:10px; }

/* Containers */
.container{ width:min(1120px, calc(100% - 24px)); margin-inline:auto; }

/* ---------- Header / Nav ---------- */
header{
  position: fixed; inset:0 0 auto 0; z-index:1000;
  height: var(--nav-h);
  background: rgba(18,20,25,.70);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
  display:flex; align-items:center;
}
header.scrolled{ box-shadow: 0 8px 24px rgba(0,0,0,.25); }

.nav{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-link{ display:flex; align-items:center; gap:12px; color:#dfe6ee; font-weight:800; text-decoration:none; }
.brand-link:hover{ text-decoration:none; color:#fff; }
.logo-img{ width:36px; height:36px; object-fit:cover; border-radius:8px; box-shadow: 0 6px 16px rgba(0,0,0,.45); }

/* Nav links (desktop) */
.navlinks{ display:flex; gap:18px; align-items:center; }
.navlinks a{ color:#dfe6ee; font-weight:600; }
.navlinks a:hover{ color:#fff; text-decoration:none; }
.navlinks a{
  position:relative;
  color: inherit;
  text-decoration:none;
  transition: color .2s ease;
}
.navlinks a::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:0%; height:2px;
  background: var(--accent-2);
  transition: width .25s ease;
}
.navlinks a:hover{ color: var(--accent-2); }
.navlinks a:hover::after{ width:100%; }


/* Hamburger */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center; align-items:center;
  gap:5px;
  width:42px; height:42px; border-radius:10px;
  border:1px solid var(--line); background:#0f1216;
  cursor:pointer;
}
.hamburger span{ display:block; width:22px; height:3px; background:#e6edf5; border-radius:2px; }
.hamburger:focus{ outline:2px solid var(--accent); outline-offset:2px; }

/* Mobile panel */
@media (max-width: 900px){
  .hamburger{ display:flex; }
  .navlinks{
    position: fixed; top: var(--nav-h); left:0; right:0; z-index: 999;
    background: rgba(18,20,25,.98); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    display:flex; flex-direction:column; gap:10px;
    padding: 12px 16px;
    max-height: 0; overflow:hidden; transition: max-height .25s ease;
  }
  .nav.open #primaryNav{ max-height: 60vh; }
  .navlinks a{ padding:8px 4px; }
}
/* ---------- Sections ---------- */
section{ padding-block: clamp(28px, 6vw, 64px); }
h1,h2,h3{ margin:0 0 .6rem 0; line-height:1.2; }
.hero { position: relative; }
.hero .bg { position:absolute; inset:0; pointer-events:none; }
.hero .wrap{
  display:grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: clamp(16px, 3vw, 32px);
  align-items: center;
}
@media (max-width: 900px){ .hero .wrap{ grid-template-columns: 1fr; } }
.hero-copy h1{ margin:0 0 .4rem 0; }
.hero-copy .cta{ margin-top: 12px; display:flex; gap:8px; flex-wrap:wrap; }

/* σταθερό κουτί */
.hero-art{ width:100%; aspect-ratio:16/9; border-radius:12px; overflow:hidden; position:relative; }
.fade-img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0; transition: opacity .6s ease;
}
.fade-img.is-top{ opacity:1; }

/* Discography: 4 → 3 → 2 → 1 columns */
.disc .grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:12px; }
@media (max-width:1200px){ .disc .grid{ grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width:900px){  .disc .grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width:600px){  .disc .grid{ grid-template-columns: 1fr; } }

/* Flip on hover/focus */
.flip{ perspective:1200px; display:block; margin:8px; border-radius:12px; overflow:hidden; }
.flip-inner{ position:relative; width:100%; aspect-ratio:1/1; transform-style:preserve-3d; transition:transform .6s ease; }
.flip:hover .flip-inner, .flip:focus .flip-inner, .flip:focus-within .flip-inner{ transform: rotateY(180deg); }
.flip-face{ position:absolute; inset:0; width:100%; height:100%; backface-visibility:hidden; object-fit:cover; }
.flip-back{ transform: rotateY(180deg); }

/* Compact cards */
.card{ margin:0; }
/* ---------- Events ---------- */
.events .events-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.events .events-list li{
  display:grid; grid-template-columns: 120px 80px 1fr auto; gap:12px; align-items:center;
  background: var(--card); border:1px solid var(--line); border-radius:12px; padding:10px 12px;
}
@media (max-width: 600px){
  .events .events-list li{ grid-template-columns: 1fr; gap:6px; }
  .events .events-list li .btn{ justify-self:start; }
}
.events .events-list li.past{ opacity:.6; }

/* ---------- Footer ---------- */
footer{ border-top:1px solid var(--line); background:var(--bg-soft); }
footer .fgrid{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding-block: 16px; }
footer .social{ display:flex; gap:12px; }

/* Back to top */
#backToTop{
  position: fixed; right: 18px; bottom: 18px;
  width: 40px; height: 40px; display:none; align-items:center; justify-content:center;
  border-radius: 50%; background: var(--accent-2); border:0; color:#0e1013; font-weight:800;
}
#backToTop.show{ display:flex; }
#backToTop:focus{ outline:2px solid var(--accent); outline-offset:2px; }

/* --- Modal (prevent invisible overlay blocking clicks) --- */
.modal{ position:fixed; inset:0; display:none; z-index:2000; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.6); }
.modal-content{
  position:relative; margin:10vh auto; max-width:960px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:16px; padding:10px; z-index:1;
}
.modal-close{
  position:absolute; top:8px; right:8px; background:transparent; border:0;
  color:var(--text); cursor:pointer; font-size:20px;
}

/* --- Ensure hamburger stays clickable above mobile panel --- */
.hamburger{
  position:relative; z-index:1500; -webkit-tap-highlight-color: transparent;
}
@media (max-width: 900px){
  .navlinks{ z-index:1200; } /* panel sits below hamburger */
}

main{ padding-top: var(--nav-h); }

/* Contact grid */
.contact-wrap{
  display:grid; gap:20px;
  grid-template-columns: repeat(auto-fit, minmax(260px,1fr));
}

/* Socials row */
.socials{
  display:flex; flex-wrap:wrap; gap:14px;
  list-style:none; margin:0; padding:0;
}
.socials li a{
  display:flex; align-items:center; gap:6px;
  padding:8px 12px;
  border-radius:8px;
  background:var(--card);
  border:1px solid var(--line);
  transition: background .2s ease, border-color .2s ease;
}
.socials li a:hover{
  background:var(--bg-soft);
  border-color:var(--accent-2);
}
.socials .icon{
  width:18px; height:18px; object-fit:contain;
}

/* Light theme palette (token overrides) */
:root[data-theme="light"]{
  --bg: #f7f9fc;
  --bg-soft: #ffffff;
  --card: rgba(0,0,0,.04);
  --line: rgba(0,0,0,.12);
  --text: #0e1013;
  --muted: #4b5563;
  --accent: #126e82;
  --accent-2: #2962ff;
}

/* Header translucency tuned for light */
:root[data-theme="light"] header{
  background: rgba(255,255,255,.70);
  border-bottom-color: var(--line);
}

/* Button/style harmonization in light */
:root[data-theme="light"] .btn.ghost{ color: var(--text); border-color: var(--line); }
:root[data-theme="light"] .card{ background: var(--card); border-color: var(--line); }
:root[data-theme="light"] a{ color: var(--accent-2); }

/* Toggle control */
.theme-toggle{
  width: 42px; height: 42px; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 10px; background: transparent;
  cursor: pointer; user-select: none;
}
.theme-toggle:focus{ outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle svg{ width:20px; height:20px; }

/* Keep nav layout tidy on small screens */
@media (max-width: 900px){
  .theme-toggle{ order: 2; } /* after hamburger in the row */
}
/* === Light theme contrast hardening === */
:root[data-theme="light"] .brand-link{ color: var(--text); }
:root[data-theme="light"] .brand-link:hover{ color: #000; }

:root[data-theme="light"] .navlinks a{ color: var(--text); }
:root[data-theme="light"] .navlinks a:hover{ color: #000; }

/* Hamburger in light */
:root[data-theme="light"] .hamburger{ background:#f2f4f8; border-color: var(--line); }
:root[data-theme="light"] .hamburger span{ background:#0e1013; }

/* Pills & small UI bits */
:root[data-theme="light"] .pill{ color: var(--muted); border-color: var(--line); background: rgba(0,0,0,.03); }

/* Cards / footer text stay readable on light */
:root[data-theme="light"] footer,
:root[data-theme="light"] .card,
:root[data-theme="light"] .sub{ color: var(--text); }

/* Links in copy remain visible */
:root[data-theme="light"] a{ color: var(--accent-2); }

/* =========================
   Light theme: contrast fixes
   ========================= */
:root[data-theme="light"] a{ color: var(--accent-2); }

/* Buttons */
:root[data-theme="light"] .btn{
  background: var(--accent-2);
  color: #fff;                 /* πριν έβγαινε σκούρο κείμενο σε έντονο μπλε */
  border: 0;
}
:root[data-theme="light"] .btn:hover{ filter: brightness(0.95); }
:root[data-theme="light"] .btn.ghost{
  background: transparent;
  color: var(--text);
  border: 1px solid var(--line);
}
:root[data-theme="light"] .btn.ghost:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}

/* Hero copy readability on light */
:root[data-theme="light"] .hero-copy p{ color: var(--text); }

/* Events rows */
:root[data-theme="light"] .events .events-list li{
  background: #eef2f6;               /* πιο καθαρό σε light */
  border-color: rgba(0,0,0,.12);
  color: var(--text);
}
:root[data-theme="light"] .events .events-list li.past{
  opacity: .7;                        /* όχι υπερβολικά ξεθωριασμένο */
}

/* Social links – icons & chips */
:root[data-theme="light"] .socials li a{
  background: rgba(0,0,0,.04);
  border-color: rgba(0,0,0,.12);
  color: var(--text);
}
:root[data-theme="light"] .socials li a:hover{
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.18);
}
/* Τα SVG είναι λευκά — σκουραίνουμε στο light για να μην δείχνουν “disabled” */
:root[data-theme="light"] .socials .icon{
  filter: brightness(0) saturate(100%); /* μετατρέπει σε σκούρο γκρι */
  opacity: .9;
}

/* Header / Nav text σε light για να μην “χάνονται” */
:root[data-theme="light"] header{ background: rgba(255,255,255,.75); }
:root[data-theme="light"] .brand-link{ color: var(--text); }
:root[data-theme="light"] .brand-link:hover{ color: #000; }
:root[data-theme="light"] .navlinks a{ color: var(--text); }
:root[data-theme="light"] .navlinks a:hover{ color: #000; }
:root[data-theme="light"] .hamburger{ background:#f2f4f8; border-color: rgba(0,0,0,.12); }
:root[data-theme="light"] .hamburger span{ background:#0e1013; }

/* Default: no implicit transform */
.flip-inner{ transform: none; }

/* Flip μόνο σε συσκευές με πραγματικό hover (π.χ. desktop) */
@media (hover: hover) and (pointer: fine){
  .flip:hover .flip-inner{ transform: rotateY(180deg); }
}

/* A11y: επιτρέπουμε flip με keyboard μόνο όταν το focus είναι ορατό */
.flip:focus-visible .flip-inner{ transform: rotateY(180deg); }

/* Προαιρετικό: μειώνει ghost taps/hover σε touch */
.flip{ touch-action: manipulation; }

/* Reuse existing modal tokens; add promo sizing */
.modal{ position:fixed; inset:0; display:none; z-index:2000; }
.modal[hidden]{ display:none; }
.modal.show{ display:block; }
.modal-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.65); }
.modal-content{ position:relative; margin:8vh auto; max-width: min(720px, 92vw); background:var(--bg-soft); border:1px solid var(--line); border-radius:16px; padding:10px; z-index:1; }
.modal-close{ position:absolute; top:8px; right:8px; background:transparent; border:0; color:var(--text); cursor:pointer; font-size:20px; }

.modal-content.promo{ padding:12px; }
.promo-link{ display:block; border-radius:12px; overflow:hidden; }
.promo-img{ width:100%; height:auto; display:block; object-fit:cover; }
.promo-optout{ display:flex; align-items:center; gap:8px; margin-top:10px; font-size:14px; color:var(--muted); }

.visually-hidden{ position:absolute!important; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; }

/* Promo modal responsive image */
.modal-content.promo{
  width: 90vw;                 /* παίρνει 90% του viewport */
  max-width: 720px;            /* ποτέ πάνω από 720px */
}

.promo-img{
  display: block;
  width: 100%;                 /* γεμίζει το modal σε πλάτος */
  height: auto;                /* κρατάει αναλογίες */
  max-height: 80vh;            /* δεν ξεπερνάει 80% του ύψους οθόνης */
  object-fit: contain;         /* συρρικνώνει χωρίς cropping */
  border-radius: 12px;
}