@charset "UTF-8";
/* GFS Didot της Greek Font Society (άδεια OFL, βλ. fonts/GFS-Didot-OFL.txt), από το Google Fonts. Σερβίρεται από
   το site και όχι από τη Google, ώστε η IP του επισκέπτη να μη φτάνει στη Google χωρίς συγκατάθεση.
   Μόνο τα ελληνικά και τα λατινικά· ο browser κατεβάζει όποιο χρειάζεται η σελίδα (unicode-range). */
@font-face {
    font-family: "GFS Didot";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/gfs-didot-greek.woff2") format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
    font-family: "GFS Didot";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/fonts/gfs-didot-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
                   U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Χρώματα και μεγέθη σε ένα σημείο· το σκούρο θέμα αλλάζει μόνο τις μεταβλητές.
   Ύφος του έντυπου Καζαμία: χαρτί, μαύρο και κόκκινο μελάνι, και το μωβ του καπέλου του αστρολόγου για τα όνειρα. */
:root {
    color-scheme: light;
    --bg: #f8f3ea;
    --surface: #fffdf8;
    --text: #26211c;
    --muted: #6d6358;
    --accent: #962d1f;
    --accent-soft: #f4e2da;
    --night: #4f258f;
    --border: #e5dacb;
    --rule: #c8b59c;
    --star: #d39a2b;
    --radius: 10px;
    --header-height: 3.5rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
    /* Το GFS Didot έχει μόνο κανονικό βάρος, οπότε οι τίτλοι δεν είναι bold. */
    --serif: "GFS Didot", Georgia, "Noto Serif", "Times New Roman", serif;
}

/* Το σκούρο θέμα το διαλέγει ο επισκέπτης από την κεφαλίδα (theme.js) και δεν ακολουθεί τη ρύθμιση της συσκευής. */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #191613;
    --surface: #221e1a;
    --text: #ece4d8;
    --muted: #a89c8e;
    --accent: #e8876b;
    --accent-soft: #3d2621;
    --night: #b79be8;
    --border: #3a332c;
    --rule: #5a4e42;
}

*, *::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: 960px;
    margin: 0 auto;
    padding: 0 16px;
}

/* Κεφαλίδα */
.site-header {
    background: var(--surface);
    border-bottom: 3px double var(--rule);
}

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

.site-name {
    display: inline-flex;
    align-items: center;
    font-family: var(--serif);
    font-size: 1.6rem;
    color: var(--text);
    text-decoration: none;
    white-space: nowrap;
}

.site-name img { width: 1.75rem; height: 1.75rem; margin-right: .4rem; }

.site-name span { color: var(--accent); }

.site-nav { display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.site-nav a { color: var(--text); font-size: .95rem; font-weight: 500; text-decoration: none; }
.site-nav a:hover { color: var(--accent); }

.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: var(--radius);
    background: none;
    color: var(--accent);
    cursor: pointer;
}

.icon-button:hover { background: var(--accent-soft); }
.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; }

/* Κεφαλίδα στο κινητό: λογότυπο και δύο κουμπιά, για αναζήτηση και πλαϊνό μενού (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;
    border-left: 1px solid var(--border);
    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 { 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;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
}

.menu-title { font-family: var(--serif); font-size: 1.35rem; }

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

.menu-links > li > a {
    display: block;
    padding: .7rem 0;
    color: var(--text);
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
}

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

.menu-sub {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem 1rem;
    margin: -.4rem 0 .75rem;
    font-size: .95rem;
}

.menu-sub a { color: var(--muted); }

.site-menu .letters {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    margin: 0 0 1rem;
}

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

.site-footer {
    border-top: 3px double var(--rule);
    color: var(--muted);
    font-size: .9rem;
    padding-block: 1.5rem;
}

/* Τίτλοι */
h1, h2 { font-family: var(--serif); font-weight: 400; line-height: 1.2; }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); margin: .5rem 0 1rem; }
h2 { font-size: 1.6rem; margin-top: 2.5rem; }

.eyebrow {
    display: block;
    font-family: var(--font);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--accent);
}

/* Ό,τι αφορά τα όνειρα παίρνει το μωβ του καπέλου, το υπόλοιπο site το κόκκινο. */
.eyebrow.dream { color: var(--night); }

.muted { color: var(--muted); }

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

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

/* Γράμματα του ονειροκρίτη */
.letters {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin: 1.25rem 0;
}

.letters a {
    display: inline-grid;
    place-items: center;
    min-width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--text);
    font-weight: 600;
    text-decoration: none;
}

.letters a:hover,
.letters a[aria-current="page"] {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--surface);
}

.letters.dream a:hover,
.letters.dream a[aria-current="page"] {
    background: var(--night);
    border-color: var(--night);
}

/* Στο λήμμα: πάνω από το κείμενο στον υπολογιστή, μετά από αυτό στο κινητό. */
@media (max-width: 799px) {
    .letters-top { display: none; }
}

@media (min-width: 800px) {
    .letters-after { display: none; }
}

/* Λίστες */
.item-columns {
    columns: 3 14rem;
    column-gap: 2rem;
    padding: 0;
    list-style: none;
}

.item-columns li { break-inside: avoid; padding: .2rem 0; }

.card-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: .75rem;
    padding: 0;
    list-style: none;
}

.card-list a {
    display: block;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    text-decoration: none;
    font-weight: 500;
}

/* Λήμμα */
.entry {
    margin-top: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: clamp(1rem, 3vw, 2rem);
}

/* Κόσμημα κάτω από τον τίτλο, όπως στα παλιά έντυπα. Το «/ ""» το κρύβει από τους screen readers. */
.entry h1::after {
    display: block;
    margin-top: .6rem;
    color: var(--rule);
    font-size: .9rem;
    letter-spacing: .5em;
    content: "✦ ✦ ✦";
    content: "✦ ✦ ✦" / "";
}

/* Η ερώτηση «Τι σημαίνει το φίδι στο όνειρο;» ανάμεσα στον τίτλο και στο κείμενο. */
.entry-question { max-width: 44rem; margin: 0 0 1rem; font-size: 1.35rem; color: var(--night); }

/* Γύρω στους 70 χαρακτήρες ανά γραμμή, που διαβάζονται άνετα και στον υπολογιστή. */
.entry-body { max-width: 44rem; font-size: 1.125rem; }

/* Αρχίγραμμα στην πρώτη παράγραφο. */
.entry-body > p:first-child::first-letter {
    float: left;
    margin: .1em .12em 0 0;
    color: var(--accent);
    font-family: var(--serif);
    font-size: 3.6em;
    line-height: .8;
}

/* Το παλιό περιεχόμενο έχει inline text-align: justify, που στο κινητό αφήνει μεγάλα κενά.
   Τα inline styles νικούν το CSS, εκτός αν χρησιμοποιηθεί !important. */
.entry-body p,
.category-intro p { margin: 0 0 1rem; text-align: start !important; }

.song {
    margin: 1.25rem 0;
    padding: .6rem .9rem;
    background: var(--accent-soft);
    border-radius: var(--radius);
}

.entry-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem;
}

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

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

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

/* Σχόλια */
.comment {
    border-left: 3px solid var(--accent-soft);
    padding: .25rem 0 .25rem 1rem;
    margin: 1.25rem 0;
}

.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; }

.category-intro { color: var(--muted); }

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

/* Πλοήγηση ημερολογίου */
.pill-nav {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 0 0 1.5rem;
}

.pill-nav a {
    padding: .35rem .85rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: .95rem;
    text-decoration: none;
}

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

.months a { min-width: 3.4rem; }

/* Η μινιατούρα του μήνα δίπλα στον τίτλο, όπως η εικόνα του μήνα στον έντυπο Καζαμία. */
.month-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.month-art {
    flex: 0 0 auto;
    width: clamp(96px, 28vw, 190px);
    margin: .5rem 0 1rem;
}

.month-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgb(0 0 0 / .15);
}

.month-art figcaption {
    margin-top: .4rem;
    font-size: .75rem;
    line-height: 1.4;
    color: var(--muted);
}

.month-art figcaption span { display: block; font-style: italic; }

@media (max-width: 520px) {
    .month-art figcaption span { display: none; }
}

/* Αρχική: πίνακας στον ονειροκρίτη, μινιατούρα του μήνα στο ημερολόγιο. */
.home-dreams { display: flow-root; }

.home-art { margin: 0 0 1rem; }

.home-art img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.home-art figcaption {
    margin-top: .35rem;
    font-size: .75rem;
    color: var(--muted);
}

@media (min-width: 720px) {
    .home-art { float: right; width: 44%; margin: .25rem 0 1rem 1.5rem; }
}

.home-calendar {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

.home-calendar .month-art { width: clamp(84px, 22vw, 130px); margin: 0; }
.home-calendar h2 { margin-top: 0; }

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

.panel h2 { margin-top: 0; font-size: 1.15rem; }
/* Στα Ψυχοσάββατα με δύο έτη, οι τίτλοι των πλαισίων γίνονται h3 και πρέπει να μοιάζουν με τα h2 των πλαισίων. */
.panel h3 { margin-top: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; }

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

.big-date {
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--accent);
    margin: .25rem 0;
}

/* Μέρες του μήνα */
.days {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
    border-top: 1px solid var(--border);
}

.day {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.day-date { text-align: center; }
.day-num { display: block; font-family: var(--serif); font-size: 2rem; line-height: 1; }
.day-name { display: block; color: var(--muted); font-size: .85rem; margin-top: .25rem; }
.sunday .day-num,
.feast-2 .day-num { color: var(--accent); }

.today {
    background: var(--accent-soft);
    border-radius: var(--radius);
    padding-inline: .5rem;
}

.day-body p { margin: 0 0 .4rem; }
.feasts { font-size: .95rem; }
.feast-mark { color: var(--accent); font-weight: 700; margin-right: .25rem; }
.names { font-size: .95rem; }

/* Πίνακες */
.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); }
.data-table .highlight td { font-weight: 700; color: var(--accent); }

/* Ένας πίνακας που δεν χωρά κυλά οριζόντια μέσα στο πλαίσιό του. Αλλιώς φάρδαινε όλη τη σελίδα στο κινητό, και το
   κουμπί του μενού έβγαινε από την οθόνη (Πολιτική Cookies, Πάσχα). */
.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; }
}

/* Εορτολόγιο ονομάτων */
.name-list {
    columns: 2 20rem;
    column-gap: 2rem;
    padding: 0;
    list-style: none;
}

.name-list li { break-inside: avoid; padding: .25rem 0; }

.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 .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    color: var(--text);
    font: inherit;
}

.search-form button {
    padding: .45rem .9rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.site-header .search-form { flex: 1 1 10rem; min-width: 0; max-width: 18rem; }

/* Η κεφαλίδα του υπολογιστή χωρά στα 960px της σελίδας μαζί με το κουμπί του θέματος μόνο με λίγο μικρότερα
   γράμματα· αλλιώς το πεδίο στενεύει και το «Αναζήτηση ονείρου…» κόβεται. Με τα πέντε links του μενού (από τότε
   που μπήκε ο Καιρός) χρειάζονται και πιο σφιχτά κενά στην κεφαλίδα και στο μενού. */
.site-header .search-form input { font-size: 1rem; }
.search-form.big { max-width: 36rem; margin: 1rem 0 1.5rem; }
.search-form.big input,
.search-form.big button { padding: .7rem 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: 600; }
.results p { margin: .2rem 0 0; }

/* Αρχική */
.hero { padding: 1rem 0 .5rem; }

.home-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
    margin: 1rem 0;
}

.proverb { display: flex; flex-direction: column; }

/* Χωρίς πλάγια: το GFS Didot δεν έχει πλάγια γράμματα και ο browser θα τα έφτιαχνε γέρνοντας τα κανονικά. */
.proverb blockquote {
    margin: auto 0;
    font-family: var(--serif);
    font-size: 1.5rem;
    line-height: 1.35;
}

/* Φύλλο ημερολογίου τοίχου: μπάντα με τον μήνα και τις τρύπες του δεσίματος, μεγάλος αριθμός, η μέρα. */
.day-sheet {
    padding: 0;
    overflow: hidden;
    text-align: center;
}

.day-sheet h2 { margin: 0; font-size: 1rem; }

.sheet-month {
    display: block;
    padding: 1.1rem 1rem .45rem;
    background:
        radial-gradient(circle, var(--bg) .2rem, transparent .23rem) center .3rem / 1.5rem .6rem repeat-x,
        var(--accent);
    color: var(--surface);
    font-size: 1.15rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sheet-day {
    display: block;
    margin-top: .9rem;
    font-size: 5.5rem;
    line-height: 1;
}

.sheet-weekday { display: block; font-size: 1.5rem; }
.red-day .sheet-day,
.red-day .sheet-weekday { color: var(--accent); }

/* Ο συναξαριστής της ημέρας είναι συχνά μεγάλος· στο φύλλο φαίνονται μόνο οι πρώτες γραμμές. */
.sheet-feast {
    display: -webkit-box;
    margin: .35rem 1.25rem 0;
    overflow: hidden;
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.sheet-names {
    margin-top: 1rem;
    padding: .75rem 1.25rem .25rem;
    border-top: 1px dashed var(--rule);
    text-align: start;
}

.sheet-names p { margin: 0 0 .6rem; }
.sheet-weather .wx { display: inline-block; vertical-align: -.35em; }

/* Καιρός. Τα εικονίδια είναι στο _WeatherIcons· το --wx-bg είναι το φόντο πίσω τους, για τα σύννεφα που κρύβουν τον ήλιο. */
.wx-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.wx {
    flex: none;
    width: 1.6rem;
    height: 1.6rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.wx-big { width: 4.5rem; height: 4.5rem; stroke-width: 1.2; }

.wx-now {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1.25rem;
}

.wx-now p { margin: 0; }
.wx-now-temp { font-family: var(--serif); font-size: 3.25rem; line-height: 1; }
.wx-now-text { font-size: 1.2rem; }
.wx-sun { flex-basis: 100%; }

.wx-hours { --wx-bg: var(--surface); }
.wx-hours th,
.wx-hours td { vertical-align: middle; white-space: nowrap; }
.wx-hours tbody th[scope="row"] { color: var(--text); font-variant-numeric: tabular-nums; }
.wx-day-row th { background: var(--accent-soft); color: var(--text); font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.wx-symbol { display: flex; align-items: center; gap: .5rem; }
.wx-temp { font-weight: 700; }

@media (max-width: 520px) {
    /* Στο κινητό το εικονίδιο αρκεί· το κείμενο μένει για όσους δεν βλέπουν την εικόνα (title, aria-label). */
    .wx-symbol > span { display: none; }
}

.wx-days,
.wx-cities {
    --wx-bg: var(--surface);
    margin: 1rem 0 1.5rem;
    padding: 0;
    list-style: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wx-days li,
.wx-cities li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .25rem .75rem;
    padding: .55rem .9rem;
    border-bottom: 1px solid var(--border);
}

.wx-days li:last-child,
.wx-cities li:last-child { border-bottom: 0; }

.wx-day-name { width: 9.5rem; font-family: var(--serif); font-size: 1.05rem; }
.wx-day-text { flex: 1; min-width: 8rem; }
.wx-range { font-variant-numeric: tabular-nums; }
.wx-day-extra { width: 100%; padding-left: 10.25rem; font-size: .9rem; }

@media (max-width: 520px) {
    .wx-day-name { width: auto; flex-basis: 100%; }
    .wx-day-extra { padding-left: 0; }
}

.wx-cities li > a { flex: 1; min-width: 8rem; }
.wx-city-now,
.wx-city-tomorrow { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
.wx-city-now { min-width: 7rem; }
.wx-city-tomorrow { min-width: 9.5rem; }
.wx-label { color: var(--muted); font-size: .85rem; }

/* Στον υπολογιστή δύο πόλεις ανά σειρά, με τη σειρά της ανάγνωσης (αριστερά → δεξιά): με μονό αριθμό πόλεων η άδεια
   θέση μένει δεξιά, στο τέλος. Με CSS columns η σειρά ήταν από πάνω προς τα κάτω και η άδεια θέση έμενε αριστερά. */
@media (min-width: 1024px) {
    .wx-cities { display: grid; grid-template-columns: 1fr 1fr; }
    /* Χωρίς γραμμή κάτω από την τελευταία σειρά· η προτελευταία πόλη ανήκει σε αυτήν όταν είναι στην αριστερή στήλη. */
    .wx-cities li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
}

.proverb blockquote::before { content: "«"; }
.proverb blockquote::after { content: "»"; }

.events { padding-left: 1.25rem; }
.events li { margin-bottom: .6rem; }

h2 a { color: inherit; text-decoration: none; }

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

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

/* Βαθμολογία */
.rating { margin-top: .75rem; }
.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.6rem;
    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; }

/* Φόρμα σχολίου */
.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: 1px 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 {
    justify-self: start;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--accent);
    color: var(--surface);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

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

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

/* Διαφημίσεις: σταθερό ελάχιστο ύψος, ώστε η σελίδα να μη «χοροπηδά» όταν φορτώνει η διαφήμιση (CLS). */
.ad { margin: 1.5rem 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: var(--surface);
    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;
}

.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 select.narrow { width: auto; min-width: 12rem; }
.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; }

.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(--serif); font-size: 2rem; 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; }
h3 { font-size: 1.1rem; margin-top: 1.5rem; }