/* FILE: styles.css */
/* Modern minimal responsive styling */
:root{
--bg:#0f1724; /* dark-blue */
--card:#0b1220;
--muted:#9aa6b2;
--accent:#6ee7b7;
--accent-2:#60a5fa;
--text:#e6eef6;
--radius:12px;
--gap:1.25rem;
}
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial; margin:0; color:var(--text); background:linear-gradient(180deg,#071023 0%, #071724 100%);}
.container{max-width:1100px;margin:0 auto;padding:1rem}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:0.75rem 0}
.brand{font-weight:700;text-decoration:none;color:var(--text);font-size:1.1rem}
.nav-toggle{background:none;border:1px solid rgba(255,255,255,0.06);padding:0.4rem 0.6rem;border-radius:8px;color:var(--text);display:none}
.main-nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0}
.main-nav a{color:var(--muted);text-decoration:none}
.hero{padding:3.5rem 0;text-align:center}
.hero h1{font-size:2rem;margin:0 0 .5rem}
.hero p{color:var(--muted);margin:0 0 1rem}
.cta{display:inline-block;padding:0.6rem 1rem;border-radius:999px;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#04101a;text-decoration:none;font-weight:600}
.apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--gap);padding:2rem 0}
.app-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:1rem;border-radius:var(--radius);display:flex;flex-direction:column;align-items:flex-start;gap:.6rem;transition:transform .18s ease, box-shadow .18s ease;outline: none}
.app-card:focus, .app-card:hover{transform:translateY(-6px);box-shadow:0 12px 30px rgba(2,6,23,0.6)}
.app-icon{width:64px;height:64px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:12px}
.muted{color:var(--muted)}

/* .card-actions{display:flex;gap:.5rem;margin-top:auto;width:100%} */

.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.card-link:focus-visible {
  outline: 2px solid var(--accent, #0078d4);
  border-radius: 8px;
}


.button{padding:.5rem .8rem;border-radius:10px;background:rgba(255,255,255,0.06);color:var(--text);text-decoration:none;font-weight:600}
.button.outline{background:transparent;border:1px solid rgba(255,255,255,0.06)}
.newsletter{padding:2rem 0;border-top:1px solid rgba(255,255,255,0.02);display:flex;flex-direction:column;gap:.6rem}
.newsletter form{display:flex;gap:.5rem;max-width:480px}
.newsletter input{flex:1;padding:.6rem;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:var(--text)}
.site-footer{padding:1rem 0;color:var(--muted);border-top:1px solid rgba(255,255,255,0.02)}
.app-page .back{display:inline-block;margin:1rem 0;color:var(--muted);text-decoration:none}
.app-hero{display:flex;gap:1rem;align-items:center}
.app-large-icon{width:120px;height:120px;border-radius:18px}
/* .screenshot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0.5rem;margin-top:.5rem} */
/* .screenshot-grid img{width:100%;border-radius:10px;display:block} */

.screenshot-grid{
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: .5rem;
    margin-top: .5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

/* κάθε screenshot */
.screenshot-grid img{
    flex: 0 0 auto;
    height: 280px;
    width: auto;
    border-radius: 10px;
    scroll-snap-align: start;
    cursor: pointer;
}

/* κινητό */
@media (max-width: 600px) {
    .screenshot-grid img {
        height: 220px;
    }
}

/* tablet */
@media (min-width: 601px) and (max-width: 1024px) {
    .screenshot-grid img {
        height: 260px;
    }
}


.small{font-size:.85rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}


/* Responsive tweaks */
@media (max-width:800px){
.nav-toggle{display:inline-block}
.main-nav{position:absolute;top:70px;right:16px;background:var(--card);border-radius:10px;padding:0.6rem;display:none}
.main-nav.open{display:block}
}


/* keyboard focus visibility */
/* :focus{outline:3px solid rgba(110,231,183,0.16);outline-offset:3px} */

/* ΓΕΝΙΚΟ: μόνο για keyboard users */
:focus-visible {
  outline: 3px solid rgba(110,231,183,0.25);
  outline-offset: 3px;
}

/* Mouse click = χωρίς outline */
:focus:not(:focus-visible) {
  outline: none;
}


/*=== Fade gradient overlays ===*/

/* Fade gradient overlays */
.screenshots-wrapper::before,
.screenshots-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 60px;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 4;
}

/* αριστερό fade */
.screenshots-wrapper::before {
    left: 0;
    background: linear-gradient(
        to right,
        rgba(7,16,35,0.95),
        rgba(7,16,35,0)
    );
}

/* δεξί fade */
.screenshots-wrapper::after {
    right: 0;
    background: linear-gradient(
        to left,
        rgba(7,16,35,0.95),
        rgba(7,16,35,0)
    );
}

/* Ενεργοποίηση */
.screenshots-wrapper.fade-left::before {
    opacity: 1;
}
.screenshots-wrapper.fade-right::after {
    opacity: 1;
}

/*=== Lista Xaraktisristikon App ===*/
.features-list {
  padding-left: 1.2rem;
}

.features-list li {
  margin-bottom: 0.6rem;
  line-height: 1.5;
}

/*====================================*/

/*=== DOTS - Teleies sta Screenshots === */

/* DOTS */
.screenshot-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.screenshot-dots button {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.3);
    cursor: pointer;
    padding: 0;
}

/* .screenshot-dots button.active {
    background: var(--accent);
    transform: scale(1.2);
} */

/* ενεργή τελεία */
.screenshot-dots button.active {
    background: linear-gradient(
        180deg,
        #7dd3fc,  /* πιο φωτεινό μπλε */
        #60a5fa   /* δένει με accent-2 */
    );
    box-shadow: 0 0 0 3px rgba(96,165,250,0.25);
    transform: scale(1.25);
}



/*== END DOTS - Teleies sta Screenshots ===*/

/*=== Screenshots Main Scrool UI ===*/

/* Screenshots horizontal slider */
.screenshots-wrapper {
    position: relative;
}

/* οριζόντιο scroll */
.screenshot-grid {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: .5rem;
}

/* ΚΡΥΒΟΥΜΕ scrollbar */
.screenshot-grid::-webkit-scrollbar {
    display: none;
}
.screenshot-grid {
    scrollbar-width: none; /* Firefox */
}

/* εικόνες */
.screenshot-grid img {
    flex: 0 0 auto;
    height: 280px;
    width: auto;
    border-radius: 10px;
    scroll-snap-align: start;
    cursor: pointer;
}

/* responsive ύψος */
@media (max-width: 600px) {
    .screenshot-grid img {
        height: 220px;
    }
}
@media (min-width: 601px) and (max-width: 1024px) {
    .screenshot-grid img {
        height: 260px;
    }
}

/* ΒΕΛΑΚΙΑ */
.shot-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15,23,36,0.7);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 0.2rem 0.6rem;
    border-radius: 10px;
    cursor: pointer;
    z-index: 5;
    display: none; /* εμφανίζονται μόνο όταν χρειάζεται */
}

.shot-nav.left {
    left: -10px;
}

.shot-nav.right {
    right: -10px;
}

@media (max-width: 600px) {
    .shot-nav {
        display: none !important; /* mobile μόνο swipe */
    }
}


/*=== END Screenshots Main Scrool UI ===*/


/* Lightbox Gallery */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.lightbox.hidden {
    display: none;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 0 20px #000;
}

.lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 2rem;
    color: #fff;
    cursor: pointer;
}

.lightbox .nav-left,
.lightbox .nav-right {
    position: absolute;
    top: 50%;
    font-size: 3rem;
    color: #fff;
    cursor: pointer;
    padding: 10px;
    user-select: none;
}

.lightbox .nav-left {
    left: 20px;
}

.lightbox .nav-right {
    right: 20px;
}

@media (max-width: 600px) {
    .lightbox .nav-left,
    .lightbox .nav-right {
        font-size: 2.5rem;
    }
}
/* END Lightbox Gallery */