@charset "UTF-8";
/* GelioPolis: φωτεινό και χαρούμενο. Κίτρινο του ήλιου στην κεφαλίδα, πορτοκαλί για links και κουμπιά, και τα
   ανέκδοτα σαν συννεφάκια διαλόγου. Γραμματοσειρές του συστήματος (στρογγυλεμένες όπου υπάρχουν), χωρίς αρχεία
   από τρίτους. Χρώματα και μεγέθη σε ένα σημείο· το σκούρο θέμα αλλάζει μόνο τις μεταβλητές. */
:root {
    color-scheme: light;
    --bg: #fff8e7;
    --surface: #ffffff;
    --text: #2b2118;
    --muted: #6f6152;
    /* Το πορτοκαλί των links έχει αντίθεση πάνω από 4,5:1 σε λευκό· το φωτεινό πορτοκαλί είναι μόνο για διακόσμηση. */
    --accent: #c2410c;
    --accent-soft: #ffe8cc;
    --sun: #ffc93c;
    --sun-soft: #ffe8a3;
    --orange: #ff7a2f;
    --pink: #ff5d73;
    --sky: #3aa0ff;
    --mint: #2fbf71;
    --adult: #c2255c;
    --border: #f0dfc2;
    --star: #f5a300;
    --header-text: #2b2118;
    --radius: 14px;
    --bubble-radius: 1.25rem;
    --header-height: 3.75rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    --round: ui-rounded, "SF Pro Rounded", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
    --card-1: #fff1c1;
    --card-2: #ffe0e5;
    --card-3: #dceeff;
    --card-4: #dcf7e7;
}

/* Το σκούρο θέμα το διαλέγει ο επισκέπτης από την κεφαλίδα (theme.js) και δεν ακολουθεί τη ρύθμιση της συσκευής. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #1f1b2e;
    --surface: #2a2540;
    --text: #f4eee6;
    --muted: #b9aecb;
    --accent: #ffb35c;
    --accent-soft: #3d3352;
    --sun: #3a3152;
    --sun-soft: #322a48;
    --border: #463d63;
    --header-text: #ffd76a;
    --adult: #ff7aa2;
    --card-1: #3b3350;
    --card-2: #43304a;
    --card-3: #2d3a55;
    --card-4: #2c4441;
}

*, *::before, *::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.65;
}

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

.wrap {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Κεφαλίδα */
.site-header {
    background: var(--sun);
    color: var(--header-text);
    box-shadow: 0 3px 0 var(--orange);
}

.site-header .wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem .75rem;
    padding-block: .6rem;
}

.site-name {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-family: var(--round);
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--header-text);
    text-decoration: none;
    white-space: nowrap;
}

.site-name img { width: 2.25rem; height: 2.25rem; transition: rotate .3s ease; }
.site-name:hover img { rotate: -12deg; }
.site-name b { color: var(--accent); font-weight: 800; }
:root[data-theme="dark"] .site-name b { color: #ff9f45; }

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem 1rem; }
.site-nav a { color: var(--header-text); font-size: 1rem; font-weight: 700; text-decoration: none; }
.site-nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; }

.icon {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.icon-button {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--header-text);
    cursor: pointer;
}

.icon-button:hover { background: rgb(255 255 255 / .45); }
:root[data-theme="dark"] .icon-button:hover { background: rgb(255 255 255 / .08); }
.icon-button .icon { width: 1.5rem; height: 1.5rem; }

/* Χωρίς JavaScript το κουμπί δεν θα έκανε τίποτα, οπότε φαίνεται μόνο όταν το theme.js έχει βάλει data-theme. */
.theme-toggle { display: none; }
[data-theme] .theme-toggle { display: grid; }
.theme-toggle .icon-sun,
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }

/* Οι κατηγορίες σε μια σειρά κάτω από την κεφαλίδα (μόνο στον υπολογιστή). */
.category-bar { background: var(--sun-soft); }
.site-header .category-bar .wrap { flex-wrap: wrap; justify-content: flex-start; gap: .35rem; padding-block: .5rem; }

.category-bar a {
    padding: .15rem .7rem;
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, color .15s;
}

.category-bar a:hover { background: var(--orange); color: #fff; }

/* Κεφαλίδα στο κινητό: λογότυπο και δύο κουμπιά, για αναζήτηση και πλαϊνό μενού (popovers).
   Σε browser χωρίς popover (iOS πριν από το 17) μένει η κεφαλίδα του υπολογιστή, που απλώς πιάνει περισσότερο χώρο. */
.header-buttons,
.search-bar,
.site-menu { display: none; }

@supports selector(:popover-open) {
    @media (max-width: 1023px) {
        .site-header .wrap:has(> .header-buttons) { flex-wrap: nowrap; column-gap: .25rem; min-height: var(--header-height); padding-block: 0; }
        .theme-toggle { margin-left: auto; }
        .site-header .header-wide { display: none; }
        .header-buttons { display: flex; gap: .25rem; margin-right: -.5rem; }
    }

    .search-bar:popover-open,
    .site-menu:popover-open { display: block; }
}

/* Η μπάρα ακολουθεί τη σελίδα (absolute, όχι fixed), ώστε να είναι πάντα ακριβώς κάτω από την κεφαλίδα. */
.search-bar {
    position: absolute;
    inset: calc(var(--header-height) + 3px) 0 auto;
    width: auto;
    height: auto;
    margin: 0;
    padding: .75rem 16px;
    border: 0;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    overflow: visible;
}

.search-bar::backdrop,
.site-menu::backdrop { background: rgb(0 0 0 / .35); }

.site-menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(20rem, 85vw);
    height: auto;
    margin: 0;
    padding: 0 1rem 2rem;
    border: 0;
    background: var(--bg);
    color: var(--text);
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: translate .2s ease-out, display .2s allow-discrete, overlay .2s allow-discrete;
}

@starting-style {
    .site-menu:popover-open { translate: 100% 0; }
}

.site-menu:not(:popover-open) { translate: 100% 0; }

@media (prefers-reduced-motion: reduce) {
    .site-menu,
    .site-name img { transition: none; }
}

body:has(.site-menu:popover-open) { overflow: hidden; }

.menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height);
    margin: 0 -1rem .25rem;
    padding: 0 .5rem 0 1rem;
    background: var(--sun);
    color: var(--header-text);
}

.menu-title { font-family: var(--round); font-size: 1.3rem; font-weight: 800; }

.menu-links { margin: 0; padding: 0; list-style: none; }
.menu-links > li { border-bottom: 1px dashed var(--border); }

.menu-links > li > a {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .6rem 0;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 600;
    text-decoration: none;
}

.menu-links > li > a:hover { color: var(--accent); }

.site-main { padding-block: 1.5rem 3rem; }

.site-footer {
    background: var(--sun-soft);
    color: var(--text);
    font-size: .9rem;
    padding-block: 1.5rem;
    border-top: 3px solid var(--sun);
}

/* Τίτλοι */
h1, h2, h3 { font-family: var(--round); line-height: 1.2; }
h1 { font-size: clamp(2rem, 6vw, 2.9rem); font-weight: 800; margin: .5rem 0 .75rem; letter-spacing: -.01em; }
h2 { font-size: 1.5rem; font-weight: 800; margin-top: 2.25rem; }
h3 { font-size: 1.15rem; font-weight: 700; margin-top: 1.5rem; }
h2 a, h3 a { color: inherit; text-decoration: none; }
h2 a:hover, h3 a:hover { color: var(--accent); }

.eyebrow {
    display: block;
    width: fit-content;
    margin-bottom: .35rem;
    padding: .1rem .65rem;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.muted { color: var(--muted); }
.small { font-size: .875rem; }
.lead { font-size: 1.15rem; color: var(--muted); margin-top: -.25rem; }

.page-head { display: flex; align-items: center; gap: .6rem; }
.page-head h1 { margin: .5rem 0; }
.page-icon { font-size: 2.4rem; line-height: 1; }

/* Διαδρομή */
.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin: 0 0 .5rem;
    padding: 0;
    list-style: none;
    font-size: .9rem;
    color: var(--muted);
}

.breadcrumbs li + li::before { content: "›"; margin-right: .25rem; }
.breadcrumbs a { color: var(--muted); }

/* Κάρτες και συννεφάκια */
.card {
    display: block;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    text-decoration: none;
    box-shadow: 0 2px 0 var(--border);
    transition: translate .15s ease, box-shadow .15s ease;
}

.card:hover { translate: 0 -2px; box-shadow: 0 5px 0 var(--border); }

/* Το ανέκδοτο είναι συννεφάκι διαλόγου: στρογγυλεμένο κουτί με «ουρά» κάτω αριστερά. */
.bubble {
    position: relative;
    padding: 1rem 1.25rem;
    border: 2px solid var(--border);
    border-radius: var(--bubble-radius);
    background: var(--surface);
}

.bubble::after {
    content: "";
    position: absolute;
    left: 2rem;
    bottom: -12px;
    width: 20px;
    height: 20px;
    border-right: 2px solid var(--border);
    border-bottom: 2px solid var(--border);
    background: var(--surface);
    rotate: 45deg;
    border-bottom-right-radius: 4px;
}

.joke-text {
    max-width: 44rem;
    margin: 1rem 0 1.75rem;
    font-size: 1.15rem;
    border-color: var(--sun);
}

.joke-text::after { border-color: var(--sun); }
.joke-text p { margin: 0 0 .6rem; }
.joke-text p:last-child { margin-bottom: 0; }

.joke-meta { margin: -.25rem 0 0; color: var(--muted); }

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .6rem;
    color: var(--muted);
    font-size: .95rem;
}

.star { color: var(--border); }
.star.on { color: var(--star); }

.joke-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    background: var(--sun-soft);
}

.joke-actions .rating { margin: 0; }

/* Λίστες ανεκδότων: κάρτες-συννεφάκια με εναλλασσόμενη χρωματιστή άκρη. */
.joke-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: 1.6rem 1rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.joke-card { display: flex; flex-direction: column; border-left: 6px solid var(--sun); }
.joke-card:nth-child(4n+2) { border-left-color: var(--pink); }
.joke-card:nth-child(4n+3) { border-left-color: var(--sky); }
.joke-card:nth-child(4n+4) { border-left-color: var(--mint); }
.joke-card h2,
.joke-card h3 { margin: 0 0 .4rem; font-size: 1.15rem; }
.joke-teaser p { margin: 0 0 .4rem; }
.joke-teaser { flex: 1; color: var(--text); }

.joke-card-foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .25rem .75rem;
    margin: .25rem 0 0;
}

.read-more { font-weight: 700; }
.more-link { font-weight: 700; }

/* Κατηγορίες ως κάρτες με emoji */
.category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
    gap: .75rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.category-card {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .8rem 1rem;
    background: var(--card-1);
    font-weight: 700;
}

.category-grid li:nth-child(4n+2) .category-card { background: var(--card-2); }
.category-grid li:nth-child(4n+3) .category-card { background: var(--card-3); }
.category-grid li:nth-child(4n+4) .category-card { background: var(--card-4); }
.category-icon { font-size: 1.8rem; line-height: 1; }
.category-name { flex: 1; }

/* Ένδειξη για ενήλικες */
.badge-adult {
    display: inline-block;
    padding: 0 .45rem;
    border-radius: 999px;
    background: var(--adult);
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .02em;
    vertical-align: middle;
}

.adult-notice { display: flex; align-items: center; gap: .5rem; border-color: var(--adult); }

/* Αρχική */
.hero {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--bubble-radius);
    background:
        radial-gradient(circle at 92% 20%, rgb(255 255 255 / .55) 0 2.5rem, transparent 2.6rem),
        linear-gradient(135deg, var(--sun) 0%, #ffb347 100%);
    color: var(--header-text);
}

:root[data-theme="dark"] .hero { background: linear-gradient(135deg, #3a3152 0%, #4a3a5e 100%); }
.hero h1 { margin-top: 0; font-size: clamp(2.4rem, 8vw, 3.6rem); }
.hero .lead { color: inherit; opacity: .85; }
.hero-text { flex: 1; min-width: 0; }
.hero .search-form.big { margin-bottom: .25rem; }
.hero-face { width: clamp(90px, 18vw, 160px); height: auto; animation: wobble 4s ease-in-out infinite; }

@keyframes wobble {
    0%, 100% { rotate: 0deg; }
    10% { rotate: -8deg; }
    20% { rotate: 6deg; }
    30% { rotate: 0deg; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-face { animation: none; }
}

@media (max-width: 560px) {
    .hero { padding: 1rem; }
    .hero-face { display: none; }
}

/* Video */
.video-frame {
    position: relative;
    max-width: 44rem;
    aspect-ratio: 16 / 9;
    margin: 1rem 0;
    overflow: hidden;
    border-radius: var(--radius);
    background: linear-gradient(135deg, #2b2140, #4a2f5e);
}

.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.video-play {
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .35rem;
    height: 100%;
    color: #fff;
    text-align: center;
    text-decoration: none;
}

.video-play .play-icon {
    display: grid;
    place-items: center;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: var(--pink);
    font-size: 2rem;
    padding-left: .3rem;
    transition: scale .15s ease;
}

.video-play:hover .play-icon { scale: 1.08; }
.video-label { font-weight: 700; font-size: 1.1rem; }

.video-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}

.video-card { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; font-weight: 700; }

.video-card .play-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    background: var(--pink);
    color: #fff;
    font-size: .95rem;
    padding-left: .15rem;
}

/* Κοινοποίηση */
.share { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }

.share-native,
.share-link {
    padding: .3rem .8rem;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: var(--surface);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.share-native { border-color: var(--orange); background: var(--orange); color: #fff; }
.share-link.viber { color: #6650d8; }
.share-link.whatsapp { color: #128c4b; }
.share-link.facebook { color: #1b5fc4; }
:root[data-theme="dark"] .share-link.viber { color: #b3a6ff; }
:root[data-theme="dark"] .share-link.whatsapp { color: #6be3a0; }
:root[data-theme="dark"] .share-link.facebook { color: #8ab8ff; }

/* Βαθμολογία */
.rate-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.rate-stars { display: inline-flex; flex-direction: row-reverse; }

.rate-stars button {
    padding: 0 .1rem;
    border: 0;
    background: none;
    color: var(--muted);
    opacity: .45;
    font-size: 1.7rem;
    line-height: 1;
    cursor: pointer;
}

.rate-stars button:hover,
.rate-stars button:hover ~ button,
.rate-stars button:focus-visible,
.rate-stars button:focus-visible ~ button { color: var(--star); opacity: 1; }

.prev-next {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1rem;
    margin: 1.5rem 0;
    font-weight: 600;
}

.prev-next .next { margin-left: auto; text-align: right; }

/* Σχόλια */
.comment {
    margin-bottom: .75rem;
    padding: .75rem 1rem;
    border-radius: var(--radius);
    background: var(--surface);
}

.comment header { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; }
.comment time { color: var(--muted); font-size: .85rem; }
.comment p { margin: .4rem 0; }

.panel {
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

.panel h2 { margin-top: 0; font-size: 1.25rem; }

.comment-form { margin-top: 1.5rem; }
.comment-form form { display: grid; gap: .5rem; }
.comment-form label { font-weight: 600; }
.comment-form label.check { font-weight: 400; display: flex; gap: .5rem; align-items: flex-start; }

.comment-form input:not([type=checkbox]),
.comment-form textarea {
    width: 100%;
    padding: .6rem .75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.comment-form input[type=checkbox] { margin-top: .35rem; }

.comment-form button,
.search-form button {
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

:root[data-theme="dark"] .comment-form button,
:root[data-theme="dark"] .search-form button { color: #1f1b2e; }

.comment-form button { justify-self: start; padding: .6rem 1.6rem; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* «Όλα τα ανέκδοτα» */
.all-section h2 { display: flex; align-items: center; gap: .5rem; }

.title-columns {
    columns: 3 14rem;
    column-gap: 2rem;
    padding: 0;
    list-style: none;
}

.title-columns li { break-inside: avoid; padding: .15rem 0; }

/* Σελίδα που δεν βρέθηκε */
.not-found { text-align: center; }
.not-found .search-form.big { margin-inline: auto; }
.not-found .category-grid { text-align: start; }
.big-emoji { margin: 0; font-size: 4rem; line-height: 1; }

/* Πίνακες */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 1rem 0 1.5rem;
}

.data-table th,
.data-table td {
    padding: .6rem .9rem;
    border-bottom: 1px solid var(--border);
    text-align: start;
    vertical-align: top;
}

.data-table th { font-size: .85rem; color: var(--muted); font-weight: 600; }
.data-table tr:last-child td { border-bottom: 0; }
.data-table .past { color: var(--muted); }

/* Ένας πίνακας που δεν χωρά κυλά οριζόντια μέσα στο πλαίσιό του, αντί να φαρδαίνει όλη τη σελίδα στο κινητό. */
.table-scroll { overflow-x: auto; margin: 1rem 0 1.5rem; }
.table-scroll > .data-table { margin: 0; }

@media (max-width: 520px) {
    .data-table th,
    .data-table td { padding: .5rem .6rem; }
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Αναζήτηση */
.search-form { display: flex; gap: .4rem; position: relative; }

.search-form input {
    flex: 1;
    min-width: 0;
    padding: .45rem .9rem;
    border: 2px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.search-form input:focus { outline: 3px solid var(--orange); outline-offset: 1px; }
.search-form button { padding: .45rem .9rem; }
.site-header .search-form { flex: 1 1 12rem; min-width: 0; max-width: 18rem; }
.site-header .search-form input { font-size: 1rem; border-color: transparent; }
.search-form.big { max-width: 36rem; margin: 1rem 0 1.5rem; }
.search-form.big input,
.search-form.big button { padding: .7rem 1.1rem; font-size: 1.05rem; }
.search-form.big button { display: inline-flex; align-items: center; gap: .4rem; }

/* Στο κινητό το κουμπί δείχνει μόνο το εικονίδιο, ώστε να χωρά ολόκληρο το κείμενο του πεδίου. */
@media (max-width: 520px) {
    .search-form.big .button-label { display: none; }
}

.search-bar .search-form input,
.search-bar .search-form button { padding: .6rem .85rem; }

/* Προτάσεις κάτω από το πεδίο (suggest.js) */
.suggest-list {
    position: absolute;
    top: calc(100% + .25rem);
    left: 0;
    right: 0;
    z-index: 20;
    max-height: min(28rem, 70vh);
    overflow-y: auto;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 6px 20px rgb(0 0 0 / .15);
}

.suggest-list a {
    display: block;
    padding: .5rem .85rem;
    color: var(--text);
    text-decoration: none;
}

.suggest-list a:hover,
.suggest-list [aria-selected="true"] a { background: var(--accent-soft); color: var(--accent); }

.results { padding-left: 1.25rem; }
.results li { margin-bottom: 1rem; }
.results a { font-size: 1.1rem; font-weight: 700; }
.results p { margin: .2rem 0 0; }

/* Μηνύματα */
.notice {
    padding: .7rem 1rem;
    border-radius: var(--radius);
    border: 2px solid var(--border);
    background: var(--surface);
}

.notice.success { border-color: var(--mint); }
.notice.error { border-color: #c0392b; }
.notice.error ul { margin: 0; padding-left: 1.1rem; }
.validation-summary-valid { display: none; }

/* Footer */
.footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; }
.footer-brand { font-weight: 700; }
.footer-links a,
.footer-links .link-button { color: var(--text); }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Διαφημίσεις: σταθερό ελάχιστο ύψος, ώστε η σελίδα να μη «χοροπηδά» όταν φορτώνει η διαφήμιση (CLS). */
.ad { margin: 1.75rem 0; min-height: 100px; text-align: center; }
.ad-label { display: block; font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

.ad-placeholder {
    display: grid;
    place-items: center;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: .9rem;
}

/* Νομικές σελίδες */
.legal { max-width: 46rem; }
.legal li { margin-bottom: .4rem; }
mark.todo { background: #c0392b; color: #fff; padding: 0 .3rem; border-radius: 4px; }

/* Admin */
.admin-main { max-width: 1200px; }
.admin .site-header .wrap { max-width: 1200px; }
.logout { display: flex; align-items: center; gap: .5rem; }

.admin button,
.button-link {
    padding: .45rem .9rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    background: var(--accent);
    color: #fff;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.admin button.secondary { background: none; color: var(--accent); }
.admin button.danger { background: none; border-color: #c0392b; color: #c0392b; }

.admin .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--accent);
    font-weight: 400;
    text-decoration: underline;
}

.admin .danger-text { color: #c0392b; }

.admin input:not([type=checkbox]),
.admin select,
.admin textarea {
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.pill-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }

.pill-nav a {
    padding: .3rem .8rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    text-decoration: none;
}

.pill-nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; }

.inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.inline-form .notice { flex-basis: 100%; }

.edit-form { display: grid; gap: .4rem; }
.edit-form label { font-weight: 600; margin-top: .5rem; }
.edit-form label.check { font-weight: 400; }
.edit-form input:not([type=checkbox]),
.edit-form select,
.edit-form textarea { width: 100%; }
.edit-form button { justify-self: start; margin-top: .75rem; }
.code { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; }

.two-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; }

.login-panel { max-width: 26rem; margin: 3rem auto; }
.login-panel form { display: grid; gap: .4rem; }
.login-panel button { justify-self: start; margin-top: .75rem; }
.field-error { color: #c0392b; font-size: .875rem; }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.stat { display: grid; text-decoration: none; color: var(--text); }
.stat-num { font-family: var(--round); font-size: 2rem; font-weight: 800; color: var(--accent); }

.data-table.compact th,
.data-table.compact td { padding: .4rem .6rem; }
.data-table .actions { white-space: nowrap; text-align: end; }
.data-table .actions a + a { margin-left: .5rem; }
.data-table td.break { overflow-wrap: anywhere; max-width: 22rem; }
.data-table .actions .inline-form { flex-wrap: nowrap; justify-content: flex-end; margin-bottom: .25rem; }
.data-table .actions .inline-form input { width: 16rem; }

.bulk-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1rem 0; }
.moderation-list { list-style: none; padding: 0; display: grid; gap: .75rem; }
.moderation-list header { display: flex; flex-wrap: wrap; gap: .25rem 1rem; align-items: baseline; }
.comment-body { white-space: pre-wrap; margin: .5rem 0; }
.row-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
.row-actions button { padding: .3rem .7rem; font-size: .9rem; }
.input-validation-error { border-color: #c0392b !important; }