/* custom.css — προσαρμογές θέματος
   Παράχθηκε από Claude (Anthropic) — Sonnet 4.6 */

/* ── Cards grid ── */
.cards {
    max-width: 960px;
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.cards2-header {
    max-width: 960px;
    margin: 1rem auto 0;
    background-color: #eee;
    padding: 1rem;
    text-align: center;
    box-sizing: border-box;
}

.cards2 {
    max-width: 960px;
    margin: 0 auto;
    background-color: #eee;
    padding: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    box-sizing: border-box;
}

/* ── Τετράγωνες κάρτες ── */
.card, .card2 {
    display: block;
    border: 1.5px solid #eee;
    padding: 1rem;
    aspect-ratio: 1 / 1;
    text-align: center;
    color: inherit;
    text-decoration: none;
    box-sizing: border-box;
    overflow: hidden;
}

.card  { background-color: #eee; }
.card2 { background-color: #e8e8e8; border-color: #e8e8e8; }

.card:hover, .card:active, .card.touch-active,
.card2:hover, .card2:active, .card2.touch-active {
    background-color: #f2f2f2;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* ── Hover borders ── */
.card-green:hover,  .card-green:active,  .card-green.touch-active  { border: 1.5px solid #3ce497; }
.card-red:hover,    .card-red:active,    .card-red.touch-active    { border: 1.5px solid #ff9195; }
.card-yellow:hover, .card-yellow:active, .card-yellow.touch-active { border: 1.5px solid #f5c211; }
.card-grey:hover,   .card-grey:active,   .card-grey.touch-active   { border: 1.5px solid #b5b5b5; }
.card-blue:hover,   .card-blue:active,   .card-blue.touch-active   { border: 1.5px solid #5b9bd5; }

.card:visited, .card2:visited { color: inherit; }

/* ── Icons (Phosphor — fill="currentColor") ── */
.center-image {
    display: block;
    margin: 0 auto;
}

/* Εξοικονομώ: φύλλο μόνιμα πράσινο */
.card-green .leaf-green { color: #26a269; }

/* ── Hover/active χρώματα εικονιδίων ── */
.card-green:hover  .center-image, .card-green:active  .center-image, .card-green.touch-active  .center-image { color: #26a269; }
.card-red:hover    .center-image, .card-red:active    .center-image, .card-red.touch-active    .center-image { color: #cc0000; }
.card-yellow:hover .center-image, .card-yellow:active .center-image, .card-yellow.touch-active .center-image { color: #c09800; }
.card-grey:hover   .center-image, .card-grey:active   .center-image, .card-grey.touch-active   .center-image { color: #888; }
.card-blue:hover   .center-image, .card-blue:active   .center-image, .card-blue.touch-active   .center-image { color: #2e6da4; }

/* ── card-electric: dashed border on hover/active/touch ── */
.card-electric {
    border: 2px solid #e8e8e8;
}

.card-electric:hover, .card-electric:active, .card-electric.touch-active {
    border: 2px dashed #aaa;
}

.card-electric:hover .center-image, .card-electric:active .center-image, .card-electric.touch-active .center-image { color: #888; }

/* ── Πλάτος container ── */
.container.grid-xl {
    max-width: 960px;
}