/*
Theme Name: CodeCity
Theme URI: https://codecity.gr
Author: Χάρις — Design Director, CodeCity
Author URI: https://studio.codecity.gr
Description: Πολεοδομικό Σχέδιο — η ταυτότητα του CodeCity σε WordPress. Χαρτί και μελάνι, βερμίλιο, Literata και IBM Plex, τριχοειδείς γραμμές, μητρώο με αριθμούς καταχώρισης. Ελαφρύ, χωρίς CDN, μετρημένη αντίθεση WCAG 2.2 AA. Δίγλωσσο (ελληνικά / αγγλικά).
Version: 1.0.0
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: codecity
Tags: blog, news, one-column, custom-logo, custom-menu, translation-ready, accessibility-ready, block-styles, wide-blocks
*/

/* ============================================================================
   CodeCity — ΠΟΛΕΟΔΟΜΙΚΟ ΣΧΕΔΙΟ (The Plat)
   Το λεξιλόγιο δεν δανείζεται από SaaS· δανείζεται από τα έντυπα σχέδια της
   πόλης. Χαρτί αντί για λευκό, μελάνι αντί για γκρι, τριχοειδείς γραμμές ως
   τη μόνη δόμηση: καμία σκιά, κανένα γυαλί, καμία ακτίνα πάνω από 2 pixel.
   Μία χρωματική σφραγίδα — το βερμίλιο — που μαρκάρει την επιλογή της ημέρας.

   Κάθε τιμή εδώ είναι ή μετρημένη αναλογία αντίθεσης ή γεωμετρική σταθερά.
   Οι αναλογίες προέρχονται από το scripts/contrast.py της ταυτότητας.
   Οι γραμματοσειρές είναι αυτο-φιλοξενούμενες (assets/css/fonts.css) —
   μηδέν εξάρτηση από CDN.
   ========================================================================= */

:root {
  /* ---- χρώμα: χρωστική ------------------------------------------------ */
  --paper:        #F7F4EE;  /* φόντο σελίδας, θερμό κόκκαλο                     */
  --paper-deep:   #EFEBE2;  /* βυθισμένες ζώνες                                 */
  --card:         #FFFFFF;  /* ανυψωμένη επιφάνεια: μελάνι 18.16:1              */
  --ink:          #12161B;  /* 16.54:1 στο χαρτί · 18.16:1 στην κάρτα · AA+     */
  --ink-2:        #4A525C;  /*  7.21:1 στο χαρτί · δευτερεύον κείμενο           */
  --ink-3:        #666E77;  /*  4.71:1 στο χαρτί · υποτονικό, ακόμα AA          */
  --rule:         #DAD4C8;  /*  1.34:1 — ΜΟΝΟ διακοσμητικό, ποτέ κείμενο        */
  --rule-strong:  #B9B2A2;  /*  2.02:1 — περίγραμμα πεδίου, ποτέ μόνο σήμα      */

  /* σήμα: μπογιά τοπογράφου. μία δουλειά — μαρκάρει την επιλογή            */
  --signal:       #C2411A;  /*  4.71:1 στο χαρτί · 5.17:1 λευκό πάνω του        */
  --signal-deep:  #8E2F10;  /*  7.46:1 στο χαρτί · hover/active                 */

  /* σύνδεσμοι: μελάνι, όχι χρώμα. Ο σύνδεσμος ξεχωρίζει με σχήμα — μία λεπτή
     υπογράμμιση στο βερμίλιο — και έτσι το βερμίλιο μένει η μία σφραγίδα της
     ταυτότητας. Οι μεταβλητές κρατούν τα ονόματά τους, αλλά δείχνουν σε
     αποχρώσεις που υπάρχουν ήδη: καμία νέα απόχρωση στην παλέτα. */
  --link:         var(--ink);         /* 16.54:1 στο χαρτί · σώμα του συνδέσμου */
  --link-deep:    var(--signal-deep); /*  7.46:1 στο χαρτί · υπογράμμιση hover  */
  --focus:        var(--signal);      /*  4.71:1 vs χαρτί (απαίτηση 3:1)       */
  --focus-dark:   var(--on-dark-sig); /*  7.82:1 vs πάνελ μελανιού             */

  /* κατάσταση */
  --success:      #1B6B45;  /*  5.91:1 στο χαρτί */
  --warning:      #7A4E00;  /*  6.56:1 στο χαρτί */
  --error:        #A6211B;  /*  6.70:1 στο χαρτί · 7.36:1 στην κάρτα */

  /* σκοτεινή αντιστροφή (ζώνες CTA, υποσέλιδο) */
  --panel:        #12161B;
  --panel-rule:   #2C333C;  /*  1.55:1 — διακοσμητικό στο πάνελ                 */
  --on-dark:      #F7F4EE;  /* 16.54:1 στο πάνελ */
  --on-dark-2:    #B9BFC7;  /*  9.81:1 στο πάνελ */
  --on-dark-sig:  #FF8A5C;  /*  7.82:1 στο πάνελ */

  /* ---- τυπογραφία ------------------------------------------------------ */
  --font-display: "Literata", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-ui:      "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "Cascadia Mono", Consolas, "SFMono-Regular", monospace;

  --fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4.25rem);   /* 36 → 68 */
  --fs-h1:      clamp(1.75rem, 1.18rem + 2.3vw, 3rem);      /* 28 → 48 */
  --fs-h2:      clamp(1.375rem, 1.14rem + 0.95vw, 2rem);    /* 22 → 32 */
  --fs-h3:      1.125rem;                                    /* 18 */
  --fs-lede:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);     /* 17 → 20 */
  --fs-body:    1rem;                                        /* 16 */
  --fs-sm:      0.875rem;                                    /* 14 */
  --fs-xs:      0.75rem;                                     /* 12 */
  --fs-mono:    0.75rem;

  --lh-display: 1.03;
  --lh-h1:      1.12;
  --lh-h2:      1.2;
  --lh-body:    1.65;
  --lh-tight:   1.35;

  --ls-display: -0.022em;
  --ls-h1:      -0.018em;
  --ls-h2:      -0.012em;
  --ls-caps:    0.09em;

  --measure-lede: 58ch;
  --measure-body: 68ch;

  /* ---- απόσταση: βάση 8px, πρώτο σκαλί 4 ------------------------------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  /* ---- σχήμα: 2px. Η πόλη έχει γωνίες. --------------------------------- */
  --r-1: 2px;
  --r-pill: 999px;
  --hair: 1px;
  --tap: 44px;             /* WCAG 2.5.8 / στόχος αφής                      */

  /* ---- διάταξη --------------------------------------------------------- */
  --gutter: clamp(16px, 4.2vw, 40px);
  --shell: 1240px;
  --shell-narrow: 720px;

  /* ---- κίνηση ---------------------------------------------------------- */
  --dur-fast: 120ms;
  --dur:      200ms;
  --ease:     cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (min-width: 1440px) {
  :root { --shell: 1320px; --gutter: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 112px;   /* το κολλημένο site-head δεν κρύβει anchors  */
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
p  { margin: 0 0 var(--s-5); max-width: var(--measure-body); }
img { max-width: 100%; height: auto; display: block; }

/* Ο σύνδεσμος μέσα στο κείμενο δεν αλλάζει χρώμα — αλλάζει σχήμα. Μελάνι σαν
   το υπόλοιπο κείμενο, με μία λεπτή υπογράμμιση στο βερμίλιο· στο hover η
   υπογράμμιση παχαίνει και σκουραίνει, και ο σύνδεσμος που έχει πατηθεί πάει
   στο δεύτερο μελάνι (7.21:1 στο χαρτί — ακόμα AA για κείμενο).

   Η ειδικότητα είναι σκόπιμα μηδενική (:where) ώστε κάθε συστατικό — κουμπί,
   μενού, κάρτα, υποσέλιδο — να νικάει αυτόν τον κανόνα χωρίς !important.

   Το offset είναι μετρημένο, όχι διαισθητικό: το βαθύτερο μελάνι κάτω από τη
   γραμμή βάσης στη Literata είναι -0.233em (χ, g, y, ζ, ξ — μετρήθηκε στα
   literata-10/13.woff2 με fontTools), οπότε 0.28em αφήνει 0.047em καθαρό αέρα
   και η γραμμή δεν αγγίζει τις ουρές. Το παλιό 3px = 0.1875em έπεφτε μέσα
   στις ουρές. */
a {
  color: var(--link);
  text-decoration-line: underline;
  text-decoration-color: var(--signal);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-decoration-skip-ink: auto;
}
a:where(:hover) {
  text-decoration-color: var(--link-deep);
  text-decoration-thickness: 2px;
}
a:where(:visited) { color: var(--ink-2); }

/* Το focus ring δεν σβήνεται ποτέ. Μόνο σε :focus-visible, ώστε το ποντίκι
   να μη βλέπει δακτύλιο — το πληκτρολόγιο όμως πάντα. */
:focus { outline: none; }
:focus-visible {
  outline: var(--hair) solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus);
  border-radius: var(--r-1);
}
.on-panel :focus-visible,
.panel :focus-visible,
.masthead :focus-visible,
.site-foot :focus-visible {
  box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--focus-dark);
}

::selection { background: var(--signal); color: #FFFFFF; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--on-dark);
  padding: var(--s-3) var(--s-5); z-index: 100;
  text-decoration: none;
}
.skip:focus { left: var(--gutter); top: var(--s-2); }

.visually-hidden,
.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus,
.screen-reader-text:focus {
  position: static !important;
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; white-space: normal;
}

/* ---- κοινά θεμέλια ----------------------------------------------------- */

.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);          /* 4.71:1 — ακόμα AA για μικρό κείμενο */
}
.mono--signal { color: var(--signal); }
.mono--ink { color: var(--ink); }

.rule { border: 0; border-top: var(--hair) solid var(--rule); margin: 0; }
.rule--strong { border-top-color: var(--rule-strong); }

.lede {
  font-size: var(--fs-lede);
  line-height: 1.5;
  color: var(--ink-2);          /* 7.21:1 */
  max-width: var(--measure-lede);
}

.chip {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  border: 0; border-left: 3px solid var(--signal);
  padding: 2px 0 2px var(--s-2);
  text-decoration: none;
}
.chip:hover { color: var(--signal-deep); border-left-color: var(--signal-deep); }
.chip--quiet { border-left-color: var(--rule-strong); color: var(--ink-2); }
.chip--quiet:hover { color: var(--ink); border-left-color: var(--ink); }

/* Όταν το chip είναι σύνδεσμος παύει να είναι ετικέτα και γίνεται στόχος:
   τότε παίρνει τα 44px του κανόνα. Ως ετικέτα (span) μένει λεπτό. */
a.chip { min-height: var(--tap); }

/* το πλέγμα: λωρίδα άκρης χάρτη. διακοσμητικό, ποτέ κείμενο πάνω του. */
.graticule {
  height: 28px; width: 100%;
  background-image:
    linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 32px 28px;
  border-top: var(--hair) solid var(--rule);
  border-bottom: var(--hair) solid var(--rule);
}

/* ---------------------------------------------------------------- masthead */
.masthead { background: var(--ink); color: var(--on-dark); }
.masthead .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: var(--tap); padding-block: 0;
}
.masthead .mono { color: var(--on-dark-2); font-size: 0.6875rem; }
.masthead__date { display: none; }
@media (min-width: 560px) { .masthead__date { display: inline; } }
.masthead a { color: var(--on-dark); }
.masthead .lang { display: flex; gap: var(--s-2); align-items: stretch; }
.masthead .lang a {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: .06em;
  text-transform: uppercase; text-decoration: none; color: var(--on-dark-2);
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 var(--s-2);
}
.masthead .lang a[aria-current="true"] { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }

/* -------------------------------------------------------------- site head */
.site-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: var(--hair) solid var(--rule);
}
body.admin-bar .site-head { top: 32px; }
@media screen and (max-width: 782px) { body.admin-bar .site-head { top: 46px; } }

.site-head .shell {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); min-height: 72px;
  position: relative;   /* το σημείο αναφοράς των αναδυόμενων συρταριών */
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: var(--ink); min-height: var(--tap);
  padding-block: var(--s-2);
}
.brand img, .brand svg, .custom-logo { height: 30px; width: auto; display: block; }
/* Το οριζόντιο lockup είναι 8.2:1 — στα πολύ στενά πλάτη κατεβαίνει στα 24px,
   που είναι το κατώτατο όριο χρήσης του, αλλιώς σπρώχνει το μενού έξω από το
   περιθώριο της στήλης. */
@media (max-width: 559px) {
  .brand img, .brand svg, .custom-logo { height: 24px; }
}
.brand__sub { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }

.head-tools { display: flex; gap: var(--s-2); align-items: center; position: relative; }
.nav { display: none; align-items: center; gap: var(--s-5); }
.nav li { list-style: none; }
.nav a, .nav .menu-item > a {
  color: var(--ink); text-decoration: none;
  font-size: var(--fs-sm); font-weight: 500;
  display: inline-flex; align-items: center; min-height: var(--tap);
  border-bottom: 2px solid transparent;
}
.nav a:hover { border-bottom-color: var(--rule-strong); }
.nav a[aria-current="page"],
.nav .current-menu-item > a,
.nav .current_page_item > a { border-bottom-color: var(--signal); }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--s-5); }
.nav .sub-menu { display: none; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--tap); height: var(--tap);
  background: transparent; border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-1); color: var(--ink); cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.icon-btn:hover { background: var(--paper-deep); border-color: var(--ink); }

/* Το συρτάρι δεν είναι το σημείο αναφοράς: τα σώματα κρεμιέται από το
   .head-tools, που είναι πάντα τερματισμένο στο δεξί άκρο της στήλης —
   έτσι το αναδυόμενο δεν βγαίνει ποτέ έξω από τη σελίδα και ευθυγραμμίζεται
   με το κουμπί που το άνοιξε. */
.nav-drawer { position: static; }
.nav-drawer summary {
  list-style: none; cursor: pointer;
  min-height: var(--tap); min-width: var(--tap);
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase;
  letter-spacing: .06em; padding: 0 var(--s-3);
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1);
  color: var(--ink);
}
.nav-drawer summary::-webkit-details-marker { display: none; }
.nav-drawer[open] summary { border-color: var(--ink); }
.nav-drawer .nav-drawer__body {
  position: absolute; right: 0; top: calc(100% + var(--s-4)); left: auto;
  min-width: min(320px, calc(100vw - 2 * var(--gutter)));
  background: var(--paper); border: var(--hair) solid var(--rule-strong);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4) var(--s-4);
  display: grid; gap: 2px;
  box-shadow: none;
}
/* Χωρίς αυτόν τον κανόνα το `display: grid` πάνω νικάει το user-agent και το
   ΚΛΕΙΣΤΟ συρτάρι ζωγραφίζεται κάτω από την κεφαλίδα σε κάθε σελίδα. */
.nav-drawer:not([open]) .nav-drawer__body { display: none; }
.nav-drawer .nav-drawer__body a {
  display: flex; align-items: center; min-height: var(--tap);
  color: var(--ink); text-decoration: none; font-size: 1rem;
  border-bottom: var(--hair) solid var(--rule);
}
.nav-drawer .nav-drawer__body a:last-child { border-bottom: 0; }
.nav-drawer .nav-drawer__body .search-form { margin-top: var(--s-2); }

/* ------------------------------------------------------------------ κουμπιά */
.btn {
  --btn-bg: var(--ink); --btn-fg: var(--on-dark); --btn-bd: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  min-height: var(--tap); padding: 0 var(--s-5);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: .01em; text-decoration: none; cursor: pointer;
  background: var(--btn-bg); color: var(--btn-fg);
  border: var(--hair) solid var(--btn-bd); border-radius: var(--r-1);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--signal); --btn-bd: var(--signal); --btn-fg: #FFFFFF; }
.btn:active { --btn-bg: var(--signal-deep); --btn-bd: var(--signal-deep); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.btn--signal { --btn-bg: var(--signal); --btn-bd: var(--signal); --btn-fg: #FFFFFF; }
.btn--signal:hover { --btn-bg: var(--signal-deep); --btn-bd: var(--signal-deep); }

.btn--quiet { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: var(--rule-strong); }
.btn--quiet:hover { --btn-bg: var(--paper-deep); --btn-fg: var(--ink); --btn-bd: var(--ink); }

.btn--onpanel { --btn-bg: transparent; --btn-fg: var(--on-dark); --btn-bd: var(--on-dark-2); }
.btn--onpanel:hover { --btn-bg: var(--on-dark); --btn-fg: var(--ink); --btn-bd: var(--on-dark); }

.btn--block { width: 100%; }

.link-more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: var(--tap); font-weight: 600; font-size: var(--fs-sm);
  color: var(--link); text-decoration: none;
}
.link-more::after { content: "→"; transition: transform var(--dur-fast) var(--ease); }
.link-more:hover::after { transform: translateX(3px); }

/* ------------------------------------------------------------------- κάρτες */
.card {
  background: var(--card);
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-1);
  padding: var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color var(--dur) var(--ease);
}
.card:hover { border-color: var(--ink); }
.card__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); }
.card h3 { font-size: 1.0625rem; line-height: 1.3; }
.card h3 a { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; min-height: var(--tap); }
.card h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--signal); }
.card p { font-size: var(--fs-sm); color: var(--ink-2); margin: 0; max-width: 46ch; }
.card__meta { margin-top: auto; display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; }

.ref {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  color: var(--ink-3); letter-spacing: .04em;
}
.card:hover .ref, .entry:hover .ref { color: var(--signal); }

/* αριθμημένη εκδοτική λίστα — μητρώο, όχι τοίχος από κάρτες */
.register { border-top: var(--hair) solid var(--rule-strong); }
.entry {
  display: grid; grid-template-columns: 84px 1fr auto;
  gap: var(--s-4) var(--s-5);
  align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: var(--hair) solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.entry:hover { background: var(--card); color: var(--ink); }
.entry__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
.entry > span { min-width: 0; }
.entry__dek { display: block; font-size: var(--fs-sm); color: var(--ink-2); margin-top: var(--s-2); max-width: 62ch; }
.entry__side { text-align: right; font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3); letter-spacing: .04em; }

/* ετικέτες / φίλτρα */
.filters { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); align-items: center; }
.filter {
  font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase;
  letter-spacing: .06em; font-weight: 500;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
  min-height: var(--tap); padding: 0 2px;
  border-bottom: 2px solid transparent;
  text-decoration: none;
  display: inline-flex; align-items: center;
}
.filter:hover { color: var(--ink); border-bottom-color: var(--rule-strong); }
.filter[aria-pressed="true"],
.filter[aria-current="page"] { color: var(--ink); border-bottom-color: var(--signal); }

/* -------------------------------------------------------------------- φόρμες */
.form { display: grid; gap: var(--s-5); max-width: 520px; }
.field { display: grid; gap: var(--s-2); }
.field label {
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.field .hint { font-size: var(--fs-xs); color: var(--ink-2); }
.field input, .field textarea, .field select,
input[type="text"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], textarea, select {
  font-family: var(--font-ui); font-size: var(--fs-body); color: var(--ink);
  background: var(--card);
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1);
  padding: 12px var(--s-3); min-height: var(--tap); width: 100%;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input::placeholder, .field textarea::placeholder,
input::placeholder, textarea::placeholder { color: var(--ink-3); }
.field input:hover, .field textarea:hover { border-color: var(--ink-3); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--focus);
  box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--focus);
}
.field--error input, .field--error textarea { border-color: var(--error); border-width: 2px; }
.field--error label { color: var(--error); }
.field .msg { font-size: var(--fs-xs); font-weight: 600; }
.field .msg--error { color: var(--error); }
.field .msg--ok { color: var(--success); }

.check { display: flex; gap: var(--s-3); align-items: flex-start; }
.check input { width: 24px; height: 24px; margin: 0; flex: 0 0 auto; accent-color: var(--signal); }
.check label {
  font-family: var(--font-ui); font-size: var(--fs-sm); text-transform: none;
  letter-spacing: 0; color: var(--ink-2); font-weight: 400;
  padding-block: 11px; min-height: var(--tap); cursor: pointer;
}

/* φόρμα αναζήτησης — ίδια γραμματική με τα πεδία, μία γραμμή */
.search-form { display: flex; gap: var(--s-2); align-items: stretch; flex-wrap: wrap; }
.search-form label { flex: 1 1 200px; min-width: 0; }
.search-form input[type="search"] { min-height: var(--tap); }
.search-form .search-submit { flex: 0 0 auto; }

/* ------------------------------------------------------------------ κατάσταση */
.notice {
  border-left: 3px solid var(--rule-strong);
  padding: var(--s-3) var(--s-4); background: var(--card);
  font-size: var(--fs-sm); color: var(--ink-2); max-width: 60ch;
}
.notice--error { border-left-color: var(--error); }
.notice--ok { border-left-color: var(--success); }
.notice--signal { border-left-color: var(--signal); }
.notice strong { color: var(--ink); }

.empty {
  border: var(--hair) dashed var(--rule-strong);
  border-radius: var(--r-1);
  padding: var(--s-8) var(--s-5);
  text-align: center; background: var(--paper-deep);
}
.empty h3 { margin-bottom: var(--s-2); }
.empty p { margin: 0 auto var(--s-5); color: var(--ink-2); font-size: var(--fs-sm); max-width: 44ch; }
.empty p:last-child { margin-bottom: 0; }

.skeleton {
  background: var(--card); border: var(--hair) solid var(--rule);
  border-radius: var(--r-1); padding: var(--s-5);
  display: grid; gap: var(--s-3);
}
.sk-line {
  height: 12px; border-radius: var(--r-1);
  background: linear-gradient(90deg, #E7E2D8 0%, #F2EEE6 50%, #E7E2D8 100%);
  background-size: 200% 100%;
  animation: sk 1.4s linear infinite;
}
.sk-line--title { height: 20px; width: 78%; }
.sk-line--short { width: 44%; }
@keyframes sk { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .sk-line { animation: none; background: #EAE5DB; }
}

.spinner {
  width: 16px; height: 16px; flex: 0 0 auto;
  border: 2px solid rgba(255,255,255,.45); border-top-color: #FFFFFF;
  border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ------------------------------------------------------------------ υποσέλιδο */
.site-foot { margin-top: var(--s-9); background: var(--panel); color: var(--on-dark); padding-block: var(--s-8) var(--s-6); }
.site-foot a { color: var(--on-dark); text-decoration: none; }
.site-foot a:hover { color: var(--on-dark-sig); text-decoration: underline; text-underline-offset: 3px; }
.site-foot .mono, .site-foot .hint { color: var(--on-dark-2); }
.foot-grid { display: grid; grid-template-columns: 1fr; gap: var(--s-6); }
.foot-grid h4 { font-size: var(--fs-sm); font-family: var(--font-ui); font-weight: 600; margin-bottom: var(--s-3); }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot-grid li a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-sm); color: var(--on-dark-2); }
.foot-legal { display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-7); padding-top: var(--s-4); border-top: var(--hair) solid var(--panel-rule); }
.foot-legal p { margin: 0; }

/* ------------------------------------------------------------------- διάφορα */
.panel { background: var(--panel); color: var(--on-dark); padding-block: var(--s-8); }
.panel h2, .panel h3 { color: var(--on-dark); }
.panel p { color: var(--on-dark-2); }
.panel .mono { color: var(--on-dark-2); }
.panel a { color: var(--on-dark-sig); }

.breadcrumb { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.breadcrumb a {
  color: var(--ink-2); text-decoration: none;
  display: inline-flex; align-items: center; min-height: var(--tap);
}
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span[aria-current] { color: var(--ink-3); }

.toolcard {
  border: var(--hair) solid var(--ink); border-radius: var(--r-1);
  background: var(--card);
}
.toolcard > header {
  display: flex; justify-content: space-between; gap: var(--s-4); align-items: baseline;
  padding: var(--s-4) var(--s-5); border-bottom: var(--hair) solid var(--ink);
}
.toolcard dl { display: grid; grid-template-columns: 1fr 1fr; margin: 0; }
.toolcard dt, .toolcard dd { margin: 0; padding: var(--s-3) var(--s-5); font-size: var(--fs-sm); }
.toolcard dt { border-bottom: var(--hair) solid var(--rule); color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; }
.toolcard dd { border-bottom: var(--hair) solid var(--rule); border-left: var(--hair) solid var(--rule); }
.toolcard dd ul { margin: 0; padding-left: var(--s-4); }
.toolcard dd a { overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: var(--tap); }

.score { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; color: var(--signal); letter-spacing: -.02em; }

/* βήματα εγκατάστασης: αριθμημένη εγγραφή ευρετηρίου, όχι λίστα με κουκκίδες */
.steps { list-style: none; margin: 0; padding: 0; border-top: var(--hair) solid var(--rule-strong); counter-reset: step; }
.steps li {
  display: grid; grid-template-columns: 56px 1fr;
  gap: var(--s-4); align-items: baseline;
  padding: var(--s-4) 0; margin: 0;
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.steps li::before {
  counter-increment: step; content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .04em; color: var(--signal);
}
.steps code { overflow-wrap: anywhere; }

.pager { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; }
.pager a, .pager span, .pagination a, .pagination span {
  min-width: var(--tap); min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  border: var(--hair) solid var(--rule-strong); border-radius: var(--r-1);
  font-family: var(--font-mono); font-size: var(--fs-sm);
  color: var(--ink); text-decoration: none; padding: 0 var(--s-3);
}
.pager a:hover, .pagination a:hover { border-color: var(--ink); background: var(--paper-deep); }
.pager [aria-current="page"], .pagination .current { background: var(--ink); color: var(--on-dark); border-color: var(--ink); }
.pagination { display: flex; gap: var(--s-2); align-items: center; flex-wrap: wrap; margin-top: var(--s-6); }

pre {
  margin: 0; background: var(--panel); color: var(--on-dark);
  border-radius: var(--r-1); padding: var(--s-4) var(--s-5);
  overflow-x: auto; max-width: 100%;
  font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.65;
}
code { font-family: var(--font-mono); font-size: 0.9em; background: var(--paper-deep); padding: 1px 5px; border-radius: var(--r-1); overflow-wrap: anywhere; }
pre code { background: none; padding: 0; overflow-wrap: normal; }

/* δίχτυ ασφαλείας υπερχείλισης: παιδιά grid/flex δεν σπρώχνουν τη σελίδα */
.shell > *, .gallery__row > *, .grid-3 > *, .hero__grid > *, .newsletter__grid > *,
.foot-grid > *, .method__step > *, .toolcard > *, .cat-head__grid > *,
.form > *, .search-form > * { min-width: 0; }
.table-wrap, .tokentable { min-width: 0; max-width: 100%; }

/* ============================================================================
   ΟΘΟΝΕΣ — mobile first. Ελεγμένες στα 390 / 768 / 1440.
   ========================================================================= */

/* ------------------------------------------------------------------- ΑΡΧΙΚΗ */
.hero { padding-block: var(--s-7) var(--s-6); }
.hero__grid { display: grid; gap: var(--s-6); }
.hero h1 {
  font-size: var(--fs-display); line-height: var(--lh-display);
  letter-spacing: var(--ls-display); font-weight: 600;
  max-width: 18ch;
}
.hero h1 em { font-style: normal; color: var(--signal); }
.hero .lede { margin-top: var(--s-5); }
.hero__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-6); }
.hero__rule { margin-top: var(--s-6); }

.lead-list { display: grid; gap: 0; border-top: var(--hair) solid var(--ink); }
.lead-list__item {
  display: grid; gap: 4px; padding: var(--s-4) 0;
  border-bottom: var(--hair) solid var(--rule);
  text-decoration: none; color: var(--ink);
}
.lead-list__item:hover { color: var(--ink); }
.lead-list__item:hover .lead-list__title { text-decoration: underline; text-decoration-color: var(--signal); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lead-list__title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.3; }

.section { padding-block: var(--s-8) 0; }
.section__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-4); flex-wrap: wrap;
  padding-bottom: var(--s-3);
}
.section__head h2 { font-size: var(--fs-h2); }
.grid-3 { display: grid; gap: var(--s-5); margin-top: var(--s-5); }

.newsletter { margin-top: var(--s-9); }
.newsletter__grid { display: grid; gap: var(--s-6); align-items: start; }

/* -------------------------------------------------------------------- ΑΡΘΡΟ */
.article { padding-block: var(--s-6) 0; }
.article__head { max-width: var(--shell-narrow); }
.article__head h1 { font-size: var(--fs-h1); margin-block: var(--s-4) var(--s-5); }
.article__kicker { margin-top: var(--s-6); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.byline {
  display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap;
  padding-block: var(--s-4); border-top: var(--hair) solid var(--ink); border-bottom: var(--hair) solid var(--rule);
  margin-top: var(--s-6);
}
.byline__name { font-weight: 600; font-size: var(--fs-sm); }
.avatar {
  width: var(--tap); height: var(--tap); flex: 0 0 auto;
  border-radius: var(--r-1);
  background: var(--paper-deep); border: var(--hair) solid var(--rule-strong);
  display: inline-grid; place-items: center;
  font-family: var(--font-mono); font-size: var(--fs-sm); color: var(--ink-2);
}
.avatar--sm { width: 36px; height: 36px; }
.prose { max-width: var(--shell-narrow); margin-top: var(--s-7); }
.prose h2 { margin-block: var(--s-7) var(--s-4); }
.prose h3 { margin-block: var(--s-6) var(--s-3); }
.prose ul, .prose ol { max-width: var(--measure-body); padding-left: var(--s-5); margin: 0 0 var(--s-5); }
.prose li { margin-bottom: var(--s-2); }
.prose figure { margin: var(--s-7) 0; }
.prose figcaption, figcaption { font-size: var(--fs-xs); color: var(--ink-2); margin-top: var(--s-3); }
.prose blockquote, .wp-block-quote {
  margin: var(--s-7) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 3px solid var(--signal);
  font-family: var(--font-display); font-size: var(--fs-h3); line-height: 1.45; color: var(--ink);
}
.wp-block-quote p { max-width: 40ch; margin: 0; }
.wp-block-quote cite { display: block; margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-mono); font-style: normal; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); }
/* ----------------------------------------------------------------------------
   ΠΕΔΙΟ ΕΝΤΟΛΩΝ — το κουμπί αντιγραφής
   Το PHP τυλίγει κάθε <pre> σε .code-block ώστε το ύψος να υπάρχει ήδη στο
   σερβιρισμένο HTML (καμία μετατόπιση περιεχομένου όταν φτάσει το JS). Το JS
   προσθέτει το κουμπί· χωρίς JS δεν τυπώνεται κουμπί, άρα ποτέ νεκρό κουμπί.
   Το κουμπί κάθεται στη δική του ζώνη μέσα στο πλαίσιο — δεν σπρώχνει τη ροή
   του κειμένου και δεν πατάει ποτέ πάνω σε γραμμή κώδικα, ακόμα κι όταν ο
   κώδικας κυλάει οριζόντια (είναι αδελφός του pre, όχι παιδί του).

   Ύψος 30px: πάνω από τα 24px του WCAG 2.2 AA (2.5.8 Στόχος Αφής), κάτω από
   τα 44px του --tap. Δευτερεύον στοιχείο μέσα σε πλαίσιο κώδικα· τα 44px θα
   έτρωγαν τη μισή ζώνη. Το αναγνωρίζει η ετικέτα του — 9.81:1 στο πάνελ —
   οπότε η τριχοειδής γραμμή (1.42:1) μένει διακοσμητική, όπως το --rule.
   ---------------------------------------------------------------------------- */
.prose .code-block { margin: var(--s-6) 0; }
.code-block { position: relative; }
.code-block > pre,
.code-block > .wp-block-code { padding-top: 46px; }   /* 8 + 30 + 8: η ζώνη του κουμπιού */

.copy-btn {
  position: absolute; top: var(--s-2); right: var(--s-2); z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 30px; padding: 0 var(--s-3);
  font-family: var(--font-mono); font-size: var(--fs-mono); font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--on-dark-2); background: transparent;
  border: var(--hair) solid var(--panel-rule); border-radius: var(--r-1);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease),
              background var(--dur-fast) var(--ease);
}
.copy-btn:hover { color: var(--on-dark); border-color: var(--on-dark-2); background: var(--panel-rule); }
.copy-btn[data-copy-state] { color: var(--on-dark-sig); border-color: var(--on-dark-sig); }
.copy-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--focus-dark); }
.table-wrap { overflow-x: auto; margin: var(--s-6) 0; border: var(--hair) solid var(--rule); border-radius: var(--r-1); background: var(--card); }
table { border-collapse: collapse; width: 100%; font-size: var(--fs-sm); min-width: 480px; }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: var(--hair) solid var(--rule); }
th { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); background: var(--paper-deep); }
tbody tr:last-child td { border-bottom: 0; }
td.num { font-family: var(--font-mono); text-align: right; }
.verdict { display: grid; gap: 0; margin: var(--s-6) 0; }
.related { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--hair) solid var(--ink); }
.post-nav { display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-7); }
.post-nav a { display: inline-flex; align-items: center; min-height: var(--tap); max-width: 44ch; }

/* --------------------------------------------------------------- ΚΑΤΗΓΟΡΙΑ */
.cat-head { padding-block: var(--s-7) var(--s-5); border-bottom: var(--hair) solid var(--ink); }
.cat-head__grid { display: grid; gap: var(--s-5); align-items: end; }
.cat-head h1 { font-size: var(--fs-h1); }
.cat-head .lede { margin-top: var(--s-4); }
.cat-stat { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.cat-stat div { display: grid; gap: 2px; }
.cat-stat .n { font-family: var(--font-mono); font-size: 1.75rem; font-weight: 500; letter-spacing: -.02em; color: var(--ink); }
.cat-toolbar {
  display: flex; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap;
  align-items: center; padding-block: var(--s-4);
  border-bottom: var(--hair) solid var(--rule);
}
.sortnote { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-3); letter-spacing: .04em; }

/* ------------------------------------------------------------------ ΣΧΕΤΙΚΑ */
.about-hero { padding-block: var(--s-8) var(--s-6); }
.about-hero h1 { font-size: var(--fs-display); line-height: 1.05; letter-spacing: var(--ls-display); max-width: 22ch; }
.method { display: grid; gap: 0; border-top: var(--hair) solid var(--ink); margin-top: var(--s-7); }
.method__step {
  display: grid; gap: var(--s-2) var(--s-5);
  padding: var(--s-5) 0; border-bottom: var(--hair) solid var(--rule);
  grid-template-columns: 64px 1fr;
}
.method__step h3 { grid-column: 2; }
.method__step p { grid-column: 2; margin: 0; }
.method__n { font-family: var(--font-mono); font-size: 1.5rem; color: var(--signal); letter-spacing: -.02em; }
.masthead-list { display: grid; gap: var(--s-5); margin-top: var(--s-5); }
.person { display: grid; gap: var(--s-2); padding-top: var(--s-4); border-top: var(--hair) solid var(--rule-strong); }
.person h3 { font-size: 1.0625rem; }
.person p { margin: 0; font-size: var(--fs-sm); color: var(--ink-2); }
.person .role { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--signal); text-transform: uppercase; letter-spacing: .06em; }

/* ============================================================================
   BLOCKS ΤΟΥ ΕΠΕΞΕΡΓΑΣΤΗ — το περιεχόμενο γράφεται με blocks, οπότε τα βασικά
   τους πρέπει να φαίνονται σαν να φτιάχτηκαν εδώ, όχι σαν ξένα στοιχεία.
   ========================================================================= */
.alignwide { width: 100%; max-width: var(--shell); margin-inline: auto; }
.alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.aligncenter { margin-inline: auto; }
.alignleft { float: left; margin: 0 var(--s-5) var(--s-4) 0; }
.alignright { float: right; margin: 0 0 var(--s-4) var(--s-5); }
.wp-block-image img { max-width: 100%; height: auto; border-radius: var(--r-1); }
.wp-block-image figcaption, .wp-caption-text, .gallery-caption { font-size: var(--fs-xs); color: var(--ink-2); }
.wp-block-separator { border: 0; border-top: var(--hair) solid var(--rule); margin: var(--s-7) 0; }
.wp-block-separator.is-style-dots { border: 0; }
.wp-block-code { background: var(--panel); color: var(--on-dark); border-radius: var(--r-1); padding: var(--s-4) var(--s-5); font-family: var(--font-mono); font-size: 0.8125rem; overflow-x: auto; }
.wp-block-code code { background: none; padding: 0; color: inherit; }
.wp-block-table { overflow-x: auto; }
.wp-block-table table { min-width: 480px; }
.wp-block-button__link {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap); padding: 0 var(--s-5);
  font-family: var(--font-ui); font-size: var(--fs-sm); font-weight: 600;
  background: var(--ink); color: var(--on-dark);
  border: var(--hair) solid var(--ink); border-radius: var(--r-1);
  text-decoration: none;
}
.wp-block-button__link:hover { background: var(--signal); border-color: var(--signal); color: #FFFFFF; }
.wp-block-columns { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.wp-block-column { flex: 1 1 240px; min-width: 0; }
.wp-block-media-text { display: grid; gap: var(--s-5); }
.wp-block-details { border: var(--hair) solid var(--rule); border-radius: var(--r-1); padding: var(--s-3) var(--s-4); background: var(--card); }
.wp-block-details summary { min-height: var(--tap); display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.wp-block-list { max-width: var(--measure-body); }
.wp-block-quote.is-style-plain { border-left: 0; padding-left: 0; }
.has-text-align-center { text-align: center; }
.wp-element-caption { font-size: var(--fs-xs); color: var(--ink-2); }
.sticky .card__top::after,
.card--sticky .card__top::after { content: "Καρφιτσωμένο"; }

/* ============================================================================
   ΠΡΟΣΘΗΚΕΣ ΤΟΥ THEME — ό,τι χρειάζεται το WordPress και δεν υπήρχε στο
   στατικό πρωτότυπο. Ίδια γραμματική: τριχοειδείς γραμμές, γωνία 2px,
   στόχος 44px.
   ========================================================================= */

.masthead__tools { display: flex; align-items: center; gap: var(--s-2); }
.masthead__rss {
  display: inline-flex; align-items: center;
  min-height: var(--tap); padding: 0 var(--s-3);
  text-decoration: none; letter-spacing: .06em;
}
.masthead__rss:hover { color: var(--on-dark); text-decoration: underline; text-underline-offset: 4px; }

.search-drawer summary { justify-content: center; padding: 0; }
.search-drawer .nav-drawer__body { min-width: min(400px, calc(100vw - 2 * var(--gutter))); }
.menu-drawer .nav-drawer__body nav { display: grid; gap: 2px; }
.nav-drawer__body ul { list-style: none; margin: 0; padding: 0; }
.nav-drawer__body li { min-width: 0; }

.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.chips li { min-width: 0; }
.chips .chip--quiet { color: var(--ink-2); }

.hero__sideTitle { display: block; margin-bottom: var(--s-3); }
.cat-head__title { margin-top: var(--s-3); }
.about-hero__title { margin-top: var(--s-3); }
.newsletter__title { margin-top: var(--s-3); font-size: var(--fs-h1); }
.newsletter__grid > div > p { max-width: 48ch; }
.on-panel-label { color: var(--on-dark-sig); }

.foot-logo { height: 28px; width: auto; }
.foot-note { color: var(--on-dark-2); font-size: var(--fs-sm); max-width: 34ch; margin-top: var(--s-4); }
.admin-note { margin-top: var(--s-4); }
.post-nav__next { margin-left: auto; }

.prose > :first-child { margin-top: 0; }

/* σχόλια — σπάνια σε αυτό το site, αλλά όχι παρατημένα */
.comments-area { margin-top: var(--s-7); border-top: var(--hair) solid var(--ink); padding-top: var(--s-5); }
.comments-title, .comment-reply-title { font-size: var(--fs-h2); }
.comment-list, .comment-list ol, .comment-list ul { list-style: none; margin: 0; padding: 0; }
.comment-list ol, .comment-list ul { padding-left: var(--s-5); border-left: var(--hair) solid var(--rule); }
.comment-body { border-bottom: var(--hair) solid var(--rule); padding-block: var(--s-5); }
.comment-meta { font-family: var(--font-mono); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: var(--s-2); }
.comment-meta a { color: var(--ink-3); }
.comment-form { display: grid; gap: var(--s-5); max-width: 520px; }
.comment-form label { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.comment-form .form-submit { margin: 0; }
.comment-reply-link, .comment-edit-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--fs-sm); font-weight: 600; }
.comment-navigation { display: flex; gap: var(--s-5); flex-wrap: wrap; }

/* ============================================================================
   BREAKPOINTS
   ========================================================================= */
@media (min-width: 768px) {
  .hero__grid { grid-template-columns: 1.55fr 1fr; gap: var(--s-7); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .newsletter__grid { grid-template-columns: 1.1fr 1fr; gap: var(--s-7); }
  .cat-head__grid { grid-template-columns: 1.6fr 1fr; }
  .masthead-list { grid-template-columns: repeat(3, 1fr); }
  .method__step { grid-template-columns: 84px 1fr; }
  .foot-grid { grid-template-columns: 1.6fr 1fr 1fr; }
}

@media (min-width: 1024px) {
  .nav { display: flex; gap: var(--s-6); }
  /* Μόνο το μενού κρύβεται — η αναζήτηση μένει διαθέσιμη και στο desktop. */
  .menu-drawer { display: none; }
  .brand img, .brand svg, .custom-logo { height: 34px; }
  .masthead-list { grid-template-columns: repeat(4, 1fr); }
  .foot-grid { grid-template-columns: 1.8fr 1fr 1fr 1fr; }
  .toolcard dl { grid-template-columns: 1fr 1fr; }
}

/* ρυθμίσεις μόνο για κινητό, ελεγμένες στα 390 */
@media (max-width: 767px) {
  .entry { grid-template-columns: 1fr; gap: var(--s-2); }
  .entry__side { text-align: left; }
  .hero h1 { max-width: 100%; }
  .masthead .shell { min-height: var(--tap); }
  .toolcard dl { grid-template-columns: 1fr; }
  .toolcard dd { border-left: 0; }
  .cat-stat .n { font-size: 1.4rem; }
  .steps li { grid-template-columns: 40px 1fr; }
}

@media print {
  .site-head, .masthead, .site-foot, .hero__actions, .pager, .skip, .copy-btn { display: none !important; }
  body { background: #FFFFFF; }
  .prose { max-width: none; }
}