/* =========================================================================
   ΟΜΟΚΕΝΤΡΟ — Design System & Components
   Palette drawn from the school logo: deep navy ensō + antique gold mountain.
   All brand colours are CSS variables in :root — change them in one place.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Brand — navy (from the ensō brush circle & wordmark) */
  --navy:        #182848;   /* primary */
  --navy-700:    #24406C;   /* links / hover, lighter */
  --navy-500:    #3A5488;   /* muted accents */
  --navy-900:    #0E1B33;   /* deep, for gradients / footer */

  /* Brand — gold (from the mountain & divider) */
  --gold:        #B0883F;   /* primary accent */
  --gold-600:    #876629;   /* darker gold — AA on paper (4.99:1) */
  --gold-800:    #6E5220;   /* AA πάνω σε --gold-100 (5.65:1) — το gold-600 έδινε 4.12:1 */
  --gold-300:    #CBA45C;   /* light gold */
  --gold-100:    #EEE2C6;   /* pale gold wash */

  /* Neutrals — warm, to sit next to the antique gold */
  --paper:       #FAF8F3;   /* page background */
  --surface:     #FFFFFF;   /* cards / panels */
  --surface-2:   #F3F0E9;   /* subtle alt panel */
  --ink:         #1B2233;   /* body text (near navy) */
  --ink-soft:    #4A5163;   /* secondary text */
  --muted:       #656C7B;   /* captions / meta — AA on paper (4.97:1) */
  --line:        #E6E1D6;   /* borders / dividers */
  --line-soft:   #EFEBE2;

  /* Semantic */
  --success:     #2E7D5B;
  --success-700: #1C5E43;  /* κείμενο πάνω σε ανοιχτό πράσινο tint — το #2E7D5B έδινε 4.39:1 */
  --error:       #B23A3A;

  /* Typography */
  --font-sans: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "EB Garamond", "Georgia", "Times New Roman", serif;

  /* Scale (fluid) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.12rem);
  --step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.80rem, 1.55rem + 1.25vw, 2.75rem);
  --step-4:  clamp(2.20rem, 1.80rem + 2.00vw, 3.75rem);
  --step-5:  clamp(2.70rem, 2.10rem + 3.00vw, 5.00rem);

  /* Layout */
  --container: 1180px;
  --container-header: 1720px;
  --container-narrow: 820px;
  --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.6rem);
  --radius: 14px;
  --radius-sm: 9px;
  --radius-lg: 22px;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(24,40,72,0.06), 0 2px 8px rgba(24,40,72,0.05);
  --shadow-md: 0 6px 24px rgba(24,40,72,0.10), 0 2px 6px rgba(24,40,72,0.06);
  --shadow-lg: 0 22px 60px rgba(24,40,72,0.16);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 84px;
}

/* -------------------------------------------------------------------------
   2. Reset / base
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.68;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--navy-700); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--gold-600); }

h1, h2, h3, h4 { line-height: 1.15; font-weight: 650; color: var(--navy); letter-spacing: -0.01em; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { max-width: 68ch; }

::selection { background: var(--gold-300); color: var(--navy-900); }

:focus-visible { outline: 3px solid var(--gold-300); outline-offset: 2px; border-radius: 3px; }

/* Skip link (a11y) */
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 1000;
  background: var(--navy); color: #fff; padding: .8rem 1.2rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

/* -------------------------------------------------------------------------
   3. Layout helpers
   ------------------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container--narrow { max-width: var(--container-narrow); }
.section { padding-block: clamp(3.5rem, 2rem + 6vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }
.section--paper { background: var(--paper); }
.section--surface { background: var(--surface); }
.section--alt { background: var(--surface-2); }
.section--navy { background: var(--navy); color: #EAF0FA; }
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }

.stack > * + * { margin-top: 1.1rem; }
.stack-lg > * + * { margin-top: 1.8rem; }
.center { text-align: center; }
.measure { max-width: 62ch; }
.measure-mx { max-width: 62ch; margin-inline: auto; }

/* Eyebrow / section intro */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--step--1); font-weight: 650; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-600);
  /* flex-wrap + max-width: ως inline-flex διαστασιολογείται σε max-content και δεν
     αναδιπλωνόταν, οπότε στο 200% μέγεθος κειμένου ξέφευγε 12px σε οθόνη 320px. */
  flex-wrap: wrap; max-width: 100%;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--gold); border-radius: 2px; }
.center .eyebrow::before { display: none; }

.section-head { max-width: 66ch; margin-bottom: clamp(2rem, 1rem + 3vw, 3.4rem); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: .7rem; }
.section-head p { color: var(--ink-soft); font-size: var(--step-1); margin-top: 1rem; }
.section-head.center p { margin-inline: auto; }

/* -------------------------------------------------------------------------
   4. Buttons
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: inherit; font-size: var(--step-0); font-weight: 600; line-height: 1;
  padding: .95rem 1.6rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: all .22s var(--ease); text-align: center;
}
/* max-width + wrapping: στο 200% μέγεθος κειμένου το «Δείτε τα προγράμματα»
   έπαιρνε 374px μέσα σε περιεχόμενο 250px και ξέφευγε από την οθόνη. */
.btn { max-width: 100%; white-space: normal; }
.btn svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: var(--navy-900); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
/* Navy on gold = 5.26:1 (AA). White on gold would be only 3.26:1 and fails. */
.btn--gold { background: var(--gold); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-300); color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--navy); color: var(--navy); background: rgba(24,40,72,.03); }
.btn--on-navy { background: #fff; color: var(--navy); }
.btn--on-navy:hover { background: var(--gold-100); color: var(--navy-900); transform: translateY(-2px); }
.btn--block { width: 100%; }
.btn--lg { padding: 1.1rem 2rem; font-size: var(--step-1); }

.link-arrow { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--navy-700); }
.link-arrow::after { content: "→"; transition: transform .2s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* -------------------------------------------------------------------------
   5. Header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(250,248,243,0.82);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); background: rgba(250,248,243,0.94); }
.site-header > .container { max-width: var(--container-header); }

.header-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  min-height: var(--header-h);
}
/* flex: 0 1 auto (όχι flex-shrink: 0): με μη-συμπιέσιμο .brand το κείμενο έπαιρνε
   το max-content πλάτος και στο 200% μέγεθος κειμένου ξέφευγε 70px από οθόνη 390px.
   Το λογότυπο μένει ασυμπίεστο χωριστά. */
.brand { display: inline-flex; align-items: center; gap: .8rem; flex: 0 1 auto; min-width: 0; }
.brand img { flex-shrink: 0; }
.brand img { height: 52px; width: auto; }
/* min-width: 0 + wrapping: στο 200% κείμενο το brand έφτανε 424px σε οθόνη
   390px και ξέφευγε, γιατί το .brand έχει flex-shrink: 0. */
.brand { min-width: 0; }
.brand__text { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__name, .brand__sub { overflow-wrap: break-word; }
.brand__name { font-weight: 700; font-size: 1.18rem; color: var(--navy); letter-spacing: .01em; }
.brand__sub { font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-600); margin-top: 4px; }

/* Primary menu */
.primary-nav { display: flex; align-items: center; gap: .2rem; }
.primary-nav ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; gap: .1rem; }
.primary-nav .menu-item { position: relative; }
.primary-nav .menu-item > a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .58rem; border-radius: 8px; font-weight: 550; font-size: .93rem;
  color: var(--ink); white-space: nowrap;
}
.primary-nav .menu-item-has-children > a::after {
  content: ""; width: 7px; height: 7px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); margin-left: .1rem;
}
.primary-nav .menu-item > a:hover,
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a { color: var(--navy); background: rgba(24,40,72,.05); }
.primary-nav .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--gold); }

/* Dropdowns */
.primary-nav .sub-menu {
  position: absolute; top: calc(100% + 10px); left: 0; min-width: 250px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: .5rem; display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all .2s var(--ease); z-index: 20;
}
.primary-nav .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.primary-nav .menu-item:hover > .sub-menu,
.primary-nav .menu-item:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.primary-nav .sub-menu .menu-item > a {
  display: block; padding: .6rem .8rem; border-radius: 7px; font-size: .95rem; color: var(--ink-soft); font-weight: 500;
}
.primary-nav .sub-menu .menu-item > a:hover { background: var(--gold-100); color: var(--navy); }
.primary-nav .sub-menu .sub-menu { top: -.5rem; left: calc(100% + 6px); }

.header-actions { display: flex; align-items: center; gap: .8rem; flex-shrink: 0; }
.header-phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--navy); white-space: nowrap; }
.header-phone svg { width: 18px; height: 18px; color: var(--gold-600); }

/* Burger */
.nav-toggle { display: none; }
.burger {
  display: none; width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface); cursor: pointer; padding: 0; position: relative;
}
.burger span, .burger span::before, .burger span::after {
  content: ""; position: absolute; left: 50%; width: 20px; height: 2px; background: var(--navy);
  border-radius: 2px; transform: translateX(-50%); transition: all .25s var(--ease);
}
.burger span { top: 50%; transform: translate(-50%, -50%); }
.burger span::before { top: -6px; }
.burger span::after { top: 6px; }
body.nav-open .burger span { background: transparent; }
body.nav-open .burger span::before { top: 0; transform: translateX(-50%) rotate(45deg); }
body.nav-open .burger span::after { top: 0; transform: translateX(-50%) rotate(-45deg); }

/* -------------------------------------------------------------------------
   6. Hero (front page)
   ------------------------------------------------------------------------- */
.hero { position: relative; overflow: hidden; background: var(--navy-900); color: #EAF0FA; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* object-position 70%: το hero είναι ψηλότερο από 16:9, οπότε το cover κόβει ~20% του
   πλάτους. Με κέντρο χανόταν το φωτεινό μέρος της φωτογραφίας και το τονικό εύρος στη
   δεξιά πλευρά έπεφτε στο μισό (μετρήθηκε: εύρος 33 έναντι 56). */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: .55; }
/* Σε κινητά το κείμενο πιάνει όλο το πλάτος, άρα χρειάζεται ομοιόμορφο σκούρο overlay. */
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 80% -10%, rgba(176,136,63,.28), transparent 55%),
    linear-gradient(180deg, rgba(14,27,51,.72) 0%, rgba(14,27,51,.88) 100%);
}
/* Σε μεγάλες οθόνες το κείμενο μένει αριστερά: διαγώνιο overlay, ώστε η φωτογραφία
   να φαίνεται δεξιά χωρίς να χάνεται η αντίθεση του κειμένου. */
@media (min-width: 900px) {
  .hero__bg::after {
    background:
      radial-gradient(120% 90% at 80% -10%, rgba(176,136,63,.28), transparent 55%),
      linear-gradient(100deg,
        rgba(14,27,51,.94) 0%,
        rgba(14,27,51,.90) 34%,
        rgba(14,27,51,.62) 62%,
        rgba(14,27,51,.42) 100%);
  }
}
.hero__inner { position: relative; z-index: 1; padding-block: clamp(4rem, 3rem + 8vw, 8.5rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.hero__badge {
  display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1rem; border-radius: 999px;
  /* Σχεδόν αδιαφανές σκούρο pill: με rgba(203,164,92,.15) η αντίθεση του χρυσού
     κειμένου εξαρτιόταν από τη φωτογραφία πίσω και έπεφτε στα 3:1. */
  background: linear-gradient(rgba(203,164,92,.14), rgba(203,164,92,.14)), rgba(16,29,54,.88);
  border: 1px solid rgba(203,164,92,.42); color: var(--gold-300);
  font-weight: 600; font-size: var(--step--1); letter-spacing: .02em;
}
.hero h1 { color: #fff; font-size: var(--step-5); font-weight: 680; margin-top: 1.4rem; letter-spacing: -0.02em; }
.hero h1 .accent { color: var(--gold-300); font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.hero__lead { font-size: var(--step-1); color: #C6D2E6; margin-top: 1.4rem; max-width: 54ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.2rem; }
.hero__meta { display: flex; flex-wrap: wrap; gap: 1.4rem 2rem; margin-top: 2.6rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.12); }
.hero__meta-item { display: flex; align-items: center; gap: .6rem; color: #C6D2E6; font-size: .95rem; }
.hero__meta-item svg { width: 20px; height: 20px; color: var(--gold-300); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   7. Cards & grids
   ------------------------------------------------------------------------- */
/* minmax(0,1fr): με 1fr το δάπεδο είναι το min-content, οπότε στο 200% μέγεθος
   κειμένου (WCAG 1.4.4) οι κάρτες ξεπερνούσαν τις κολόνες και το πλάτος της οθόνης. */
.grid { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 1.6rem); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: minmax(0, 1fr); } }

.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.7rem; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
  position: relative; height: 100%;
}
.card--link:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--gold-300); }
.card__icon {
  width: 52px; height: 52px; border-radius: 13px; display: grid; place-items: center;
  background: var(--gold-100); color: var(--gold-600); margin-bottom: 1.1rem;
}
.card__icon svg { width: 26px; height: 26px; }
.card h3 { font-size: var(--step-1); }
.card p { color: var(--ink-soft); font-size: .98rem; margin-top: .6rem; }
.card__link { margin-top: 1.1rem; }

/* Section / nav cards (link out to pages) */
.navcard {
  display: flex; flex-direction: column; gap: .3rem; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem 1.6rem;
  transition: all .25s var(--ease); position: relative; overflow: hidden;
}
.navcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold); transform: scaleY(0); transform-origin: bottom; transition: transform .25s var(--ease); }
.navcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line); }
.navcard:hover::before { transform: scaleY(1); }
.navcard__num { font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600; color: var(--gold); line-height: 1; }
.navcard h3 { font-size: var(--step-1); color: var(--navy); }
.navcard p { color: var(--ink-soft); font-size: .95rem; margin-top: .3rem; }
.navcard__link { margin-top: auto; padding-top: 1rem; color: var(--navy-700); font-weight: 600; font-size: .95rem; }

/* Feature / value item */
.feature { display: flex; gap: 1rem; }
.feature__num {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy); color: #fff; font-weight: 650; font-family: var(--font-serif); font-size: 1.25rem;
}
.feature h3 { font-size: var(--step-1); }
.feature p { color: var(--ink-soft); font-size: .98rem; margin-top: .4rem; }

/* -------------------------------------------------------------------------
   8. Offers / highlight band
   ------------------------------------------------------------------------- */
.offers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; }
@media (max-width: 720px) { .offers { grid-template-columns: minmax(0, 1fr); } }
.offer {
  display: flex; gap: 1.1rem; align-items: flex-start; padding: 1.6rem 1.7rem;
  background: linear-gradient(135deg, rgba(203,164,92,.10), rgba(203,164,92,.02));
  border: 1px solid var(--gold-300); border-radius: var(--radius);
}
.offer__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--gold); color: #fff; display: grid; place-items: center; }
.offer__icon svg { width: 24px; height: 24px; }
.offer > div > strong { color: var(--navy); font-size: var(--step-1); display: block; }
.offer p strong { color: var(--navy); font-weight: 650; }
.offer p { color: var(--ink-soft); font-size: .97rem; margin-top: .35rem; }
.offer__tag { display:inline-block; margin-top:.7rem; font-size:.82rem; font-weight:700; letter-spacing:.02em; color: var(--gold-800); background: var(--gold-100); padding:.2rem .6rem; border-radius:6px; }

/* -------------------------------------------------------------------------
   9. Info / stats strip
   ------------------------------------------------------------------------- */
/* minmax(0,1fr) και όχι 1fr: το 1fr έχει δάπεδο min-content, οπότε σε στενές οθόνες
   οι κολόνες δεν συμπιέζονταν και η γραμμή ξέφευγε από την οθόνη. */
.statstrip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
@media (max-width: 720px) { .statstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat { text-align: center; padding: 1.2rem; }
.stat__num { font-family: var(--font-serif); font-size: var(--step-4); font-weight: 600; color: var(--gold-300); line-height: 1; }
.section--navy .stat__num { color: var(--gold-300); }
.stat__label { font-size: .95rem; color: #C6D2E6; margin-top: .5rem; overflow-wrap: break-word; }
.section:not(.section--navy) .stat__num { color: var(--gold); }
.section:not(.section--navy) .stat__label { color: var(--ink-soft); }

/* -------------------------------------------------------------------------
   10. Content / prose (the_content)
   ------------------------------------------------------------------------- */
.prose { font-size: var(--step-0); color: var(--ink); }
.prose > * + * { margin-top: 1.15rem; }
.prose h2 { font-size: var(--step-2); margin-top: 2.4rem; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8rem; }
.prose h2 + p, .prose h3 + p { margin-top: .7rem; }
.prose p, .prose li { color: var(--ink); line-height: 1.72; }
.prose a { color: var(--navy-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--gold-300); }
.prose a:hover { color: var(--gold-600); }
.prose ul, .prose ol { padding-left: 0; list-style: none; }
.prose ul > li { position: relative; padding-left: 1.7rem; margin-top: .6rem; }
.prose ul > li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: 7px; height: 7px; background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.prose ol { counter-reset: li; }
.prose ol > li { position: relative; padding-left: 2rem; margin-top: .6rem; counter-increment: li; }
.prose ol > li::before { content: counter(li); position: absolute; left: 0; top: 0; width: 1.4rem; height: 1.4rem; background: var(--navy); color:#fff; border-radius: 50%; font-size: .78rem; font-weight: 700; display: grid; place-items: center; }
.prose blockquote {
  border-left: 3px solid var(--gold); padding: .4rem 0 .4rem 1.4rem; margin-block: 1.6rem;
  font-family: var(--font-serif); font-size: var(--step-2); font-style: italic; color: var(--navy);
}
.prose strong { color: var(--navy); font-weight: 650; }
.prose img { border-radius: var(--radius); margin-block: 1.6rem; }
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: 2.4rem; }

/* Tables (schedules) */
.table-wrap { overflow-x: auto; margin-block: 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 460px; }
.prose table { min-width: 460px; }
thead th { background: var(--navy); color: #fff; font-weight: 600; font-size: .92rem; letter-spacing: .01em; text-align: left; padding: .9rem 1.1rem; white-space: nowrap; }
tbody td { padding: .82rem 1.1rem; border-top: 1px solid var(--line-soft); font-size: .96rem; color: var(--ink); }
tbody tr:nth-child(even) { background: var(--surface-2); }
tbody tr:hover { background: var(--gold-100); }
table caption { caption-side: top; text-align: left; font-weight: 650; color: var(--navy); padding: .9rem 1.1rem; font-size: var(--step-1); }

/* -------------------------------------------------------------------------
   11. Page hero (interior pages)
   ------------------------------------------------------------------------- */
.page-hero { background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.page-hero::after { content:""; position:absolute; inset:0; background: radial-gradient(90% 120% at 90% 0%, rgba(176,136,63,.22), transparent 60%); pointer-events:none; }
.page-hero__inner { position: relative; z-index: 1; padding-block: clamp(2.6rem, 2rem + 4vw, 4.6rem); }
.page-hero .eyebrow { color: var(--gold-300); }
.page-hero .eyebrow::before { background: var(--gold-300); }
.page-hero h1 { color: #fff; margin-top: .7rem; font-size: var(--step-4); }
.page-hero__lead { color: #C6D2E6; font-size: var(--step-1); margin-top: 1rem; max-width: 60ch; }

/* Breadcrumbs */
.breadcrumbs { font-size: .88rem; color: #A9B8D2; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
/* padding-block: το ύψος στόχου ήταν <24px (WCAG 2.2 SC 2.5.8). Καλύτερο για
   την αφή ανεξάρτητα από το αν ισχύει η εξαίρεση «inline». */
.breadcrumbs a { color: #A9B8D2; display: inline-block; padding-block: .2rem; }
.breadcrumbs a:hover { color: #fff; }
.breadcrumbs .sep { opacity: .5; }
.breadcrumbs .current { color: var(--gold-300); }
.page-hero + * .breadcrumbs, .breadcrumbs--dark { color: var(--muted); }

/* Sub-page tabs / pills (e.g. Το Φροντιστήριο subpages) */
.subnav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.6rem; }
.subnav a {
  padding: .5rem 1rem; border-radius: 999px; font-size: .92rem; font-weight: 550;
  background: rgba(255,255,255,.10); color: #DCE6F5; border: 1px solid rgba(255,255,255,.14);
}
.subnav a:hover { background: rgba(255,255,255,.18); color: #fff; }
/* Navy πάνω σε χρυσό = 5.26:1 (AA). Το λευκό έδινε 3.26:1 και αποτύγχανε —
   το ίδιο σφάλμα που είχε διορθωθεί στο .btn--gold αλλά είχε ξεχαστεί εδώ,
   σε 13 σελίδες με ενεργό subnav. */
.subnav a.is-active { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

/* Light subnav (on paper) */
.subnav--light a { background: var(--surface); color: var(--ink-soft); border-color: var(--line); }
.subnav--light a:hover { border-color: var(--gold-300); color: var(--navy); }
.subnav--light a.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }

/* -------------------------------------------------------------------------
   12. Two-column content + aside
   ------------------------------------------------------------------------- */
.content-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4rem); }
@media (min-width: 960px) {
  .content-layout.has-aside { grid-template-columns: minmax(0,1fr) 320px; }
  .content-layout.has-aside--wide { grid-template-columns: minmax(0,1fr) 380px; }
}
/* Δικλείδα: κάτω από 960px η δεύτερη κολόνα δεν επιτρέπεται ποτέ — ούτε αν κάποιος
   βάλει inline grid-template-columns από τον επεξεργαστή. Χωρίς αυτό, το inline
   style υπερίσχυε του media query και η σελίδα ξέφευγε 41px στα κινητά. */
@media (max-width: 959px) {
  .content-layout { grid-template-columns: minmax(0, 1fr) !important; }
}
.aside-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem; position: sticky; top: calc(var(--header-h) + 1.2rem); }
.aside-card h2 { font-size: var(--step-1); margin-bottom: 1rem; }
.aside-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .2rem; }
.aside-card ul a { display: block; padding: .55rem .7rem; border-radius: 8px; color: var(--ink-soft); font-size: .95rem; }
.aside-card ul a:hover { background: var(--gold-100); color: var(--navy); }
.aside-card ul a.is-active { background: var(--navy); color: #fff; }

/* -------------------------------------------------------------------------
   13. Forms
   ------------------------------------------------------------------------- */
.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); box-shadow: var(--shadow-sm); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field { display: flex; flex-direction: column; gap: .4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .9rem; font-weight: 600; color: var(--navy); }
.field label .req { color: var(--error); }
.field input, .field select, .field textarea {
  font-family: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 1.5px solid var(--line); border-radius: 10px; padding: .8rem .95rem; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 130px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(36,64,108,.12); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.form-consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft); }
.form-consent input { width: 18px; height: 18px; margin-top: .2rem; accent-color: var(--navy); flex-shrink: 0; }
.form-note { font-size: .85rem; color: var(--muted); }
.form-alert { padding: .9rem 1.1rem; border-radius: 10px; font-size: .95rem; margin-bottom: 1.2rem; }
.form-alert--ok { background: rgba(46,125,91,.10); border: 1px solid rgba(46,125,91,.35); color: var(--success-700); }
.form-alert--err { background: rgba(178,58,58,.08); border: 1px solid rgba(178,58,58,.30); color: var(--error); }
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* -------------------------------------------------------------------------
   14. Posts / news (CPT archives + single)
   ------------------------------------------------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6rem; }
@media (max-width: 900px) { .post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .post-grid { grid-template-columns: minmax(0, 1fr); } }
.post-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: all .25s var(--ease); height: 100%; }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.post-card__media { aspect-ratio: 16/10; background: var(--surface-2); overflow: hidden; }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.post-card__cat { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-600); }
.post-card h3 { font-size: var(--step-1); }
.post-card h3 a { color: var(--navy); }
.post-card h3 a:hover { color: var(--gold-600); }
.post-card__meta { font-size: .85rem; color: var(--muted); margin-top: auto; padding-top: .6rem; }
.post-card__excerpt { color: var(--ink-soft); font-size: .95rem; }

.pill-cat { display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--gold-800); background: var(--gold-100); padding: .25rem .7rem; border-radius: 6px; }

/* Empty state */
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state__icon { width: 72px; height: 72px; border-radius: 50%; background: var(--surface-2); color: var(--gold-600); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.empty-state h2 { margin-bottom: .6rem; font-size: var(--step-2); }
.empty-state p { color: var(--ink-soft); margin-inline: auto; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: .4rem; margin-top: 3rem; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 .6rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; }
.pagination .page-numbers:hover { border-color: var(--gold-300); color: var(--navy); }
.pagination .page-numbers.current { background: var(--navy); color: #fff; border-color: var(--navy); }

/* -------------------------------------------------------------------------
   15. Accordion (themata / faq)
   ------------------------------------------------------------------------- */
.accordion { display: flex; flex-direction: column; gap: .8rem; }
.accordion details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.accordion summary { list-style: none; cursor: pointer; padding: 1.15rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--navy); font-size: var(--step-1); }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: ""; width: 12px; height: 12px; border-right: 2px solid var(--gold-600); border-bottom: 2px solid var(--gold-600); transform: rotate(45deg); transition: transform .25s var(--ease); flex-shrink: 0; }
.accordion details[open] summary::after { transform: rotate(-135deg); }
.accordion .accordion__body { padding: 0 1.4rem 1.4rem; }

/* Link list (themata child links) */
.linklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }
@media (max-width: 640px){ .linklist { grid-template-columns: minmax(0, 1fr); } }
.linklist a { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); font-weight: 500; font-size: .96rem; }
.linklist a:hover { border-color: var(--gold-300); background: var(--surface); color: var(--navy); }
.linklist a svg { width: 18px; height: 18px; color: var(--gold-600); flex-shrink: 0; }

/* -------------------------------------------------------------------------
   16. Contact info blocks
   ------------------------------------------------------------------------- */
.contact-info { display: flex; flex-direction: column; gap: 1.3rem; }
/* Ίδιος λόγος με το footer: τηλέφωνα/email είναι στόχοι αφής, όχι σύνδεσμοι
   μέσα σε πρόταση, άρα χρειάζονται ≥24px ύψος. */
.contact-info a { display: inline-block; padding-block: .18rem; }
.contact-item { display: flex; gap: 1rem; align-items: flex-start; }
.contact-item__icon { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; background: var(--gold-100); color: var(--gold-600); display: grid; place-items: center; }
.contact-item__icon svg { width: 22px; height: 22px; }
.contact-item strong { color: var(--navy); display: block; font-size: .9rem; text-transform: uppercase; letter-spacing: .04em; }
.contact-item a, .contact-item p { color: var(--ink-soft); }
.contact-item a:hover { color: var(--gold-600); }
.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16/10; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -------------------------------------------------------------------------
   17. CTA band
   ------------------------------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-900) 100%); color: #fff; border-radius: var(--radius-lg); padding: clamp(2.2rem, 1.5rem + 3vw, 4rem); text-align: center; position: relative; overflow: hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background: radial-gradient(70% 120% at 50% -20%, rgba(203,164,92,.25), transparent 60%); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: #C6D2E6; margin: 1rem auto 0; max-width: 56ch; font-size: var(--step-1); }
.cta-band .hero__cta { justify-content: center; }

/* -------------------------------------------------------------------------
   18. Footer
   ------------------------------------------------------------------------- */
.site-footer { background: var(--navy-900); color: #B9C6DE; }
.footer-top { padding-block: clamp(3rem, 2rem + 4vw, 4.5rem); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 2.4rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: minmax(0, 1fr); } }
.footer-brand img { height: 68px; width: auto; margin-bottom: 1rem; }
.footer-brand p { color: #9FB0CC; font-size: .95rem; max-width: 34ch; }
.footer-col h2 { color: #fff; font-size: .95rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.1rem; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .55rem; }
/* display:inline-block + padding-block: το ύψος στόχου ήταν 18px, κάτω από το
   ελάχιστο 24×24 του WCAG 2.2 (SC 2.5.8). Οι σύνδεσμοι λίστας δεν καλύπτονται
   από την εξαίρεση «σύνδεσμος μέσα σε πρόταση». */
.footer-col ul a { color: #B9C6DE; font-size: .95rem; display: inline-block; padding-block: .2rem; }
.footer-col ul a:hover { color: var(--gold-300); }
.footer-contact-item { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .9rem; font-size: .95rem; }
.footer-contact-item svg { width: 18px; height: 18px; color: var(--gold-300); flex-shrink: 0; margin-top: .2rem; }
.footer-contact-item a { color: #B9C6DE; }
.footer-contact-item a:hover { color: var(--gold-300); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.10); padding-block: 1.4rem; }
.footer-bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; align-items: center; font-size: .87rem; color: #8496B4; }
.footer-bottom-inner a { color: #8496B4; display: inline-block; padding-block: .2rem; }
.footer-bottom-inner a:hover { color: var(--gold-300); }
.footer-social { display: flex; gap: .6rem; }
.footer-social a { width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; color: #B9C6DE; }
.footer-social a:hover { background: var(--gold); border-color: var(--gold); color: #fff; }
.footer-social svg { width: 18px; height: 18px; }

/* -------------------------------------------------------------------------
   19. Floating contact / back-to-top
   ------------------------------------------------------------------------- */
.to-top { position: fixed; right: 1.2rem; bottom: 1.2rem; width: 48px; height: 48px; border-radius: 50%; background: var(--navy); color: #fff; display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .25s var(--ease); z-index: 90; border: none; cursor: pointer; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--gold); }
.to-top svg { width: 20px; height: 20px; }

/* -------------------------------------------------------------------------
   20. Reveal-on-scroll (progressive enhancement)
   ------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.js-off .reveal { opacity: 1; transform: none; }
@media print { .reveal { opacity: 1 !important; transform: none !important; } }

/* -------------------------------------------------------------------------
   21. Utilities
   ------------------------------------------------------------------------- */
.text-gold { color: var(--gold-600); }
.text-navy { color: var(--navy); }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.divider-gold { width: 60px; height: 3px; background: var(--gold); border-radius: 3px; border: none; margin: 1.2rem 0; }
.center .divider-gold { margin-inline: auto; }
.badge-soft { display: inline-block; font-size: .8rem; font-weight: 600; color: var(--gold-800); background: var(--gold-100); padding: .3rem .8rem; border-radius: 999px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* -------------------------------------------------------------------------
   Cookie notice (GDPR)
   ------------------------------------------------------------------------- */
.cookie-notice {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%) translateY(140%);
  z-index: 120; width: min(920px, calc(100vw - 2rem));
  background: var(--navy); color: #DCE6F5; border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
  transition: transform .35s var(--ease); padding: 1rem 1.2rem;
}
.cookie-notice.is-in { transform: translateX(-50%) translateY(0); }
.cookie-notice__inner { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.cookie-notice__text { margin: 0; font-size: .92rem; line-height: 1.55; flex: 1 1 320px; max-width: none; color: #C6D2E6; }
.cookie-notice__text a { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; }
.cookie-notice__text a:hover { color: #fff; }
.cookie-notice__ok { flex-shrink: 0; padding: .7rem 1.6rem; }
@media (max-width: 560px) {
  .cookie-notice__inner { flex-direction: column; align-items: stretch; gap: .8rem; }
  .cookie-notice__ok { width: 100%; }
}

/* External app embeds (Keystone βάσεις / μόρια) */
.keystone-embed { margin-block: 1.8rem; }
.keystone-embed iframe {
  width: 100%; min-height: 520px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); display: block;
}
.keystone-embed__note { font-size: .85rem; color: var(--muted); margin-top: .6rem; }
.keystone-embed__note a { color: var(--muted); text-decoration: underline; }
@media (max-width: 640px) { .keystone-embed iframe { height: 640px !important; } }

/* Defensive icon sizing for contexts without an explicit svg rule */
.hero__badge svg { width: 1.05em; height: 1.05em; flex-shrink: 0; }
.empty-state__icon svg { width: 30px; height: 30px; }
.post-card__media svg { width: 46px; height: 46px; }

/* -------------------------------------------------------------------------
   22. Mobile navigation (drawer)
   ------------------------------------------------------------------------- */
/* em και όχι px: τα media queries σε px δεν κλιμακώνονται με το μέγεθος κειμένου
   του χρήστη, οπότε στο 200% το οριζόντιο μενού έμενε ενεργό σε φαρδιές οθόνες
   και ξέφευγε 325–406px. Σε em, το όριο μετακινείται μαζί με το κείμενο. */
@media (max-width: 103.75em) { .header-phone { display: none; } }

@media (max-width: 95em) {
  .burger { display: inline-grid; place-items: center; }
  .header-phone { display: none; }
  .primary-nav {
    position: fixed; top: var(--header-h); right: 0; bottom: auto; left: auto;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
    width: min(88vw, 380px);
    background: var(--surface); border-left: 1px solid var(--line); box-shadow: var(--shadow-lg);
    flex-direction: column; align-items: stretch; padding: 1.2rem; gap: .2rem;
    overflow-y: auto; z-index: 99;
    /* Κλειστό: το πάνελ μένει ΜΕΣΑ στο viewport και απλώς αποκόπτεται. Με
       transform: translateX(100%) έβγαινε 380px έξω από την οθόνη και δημιουργούσε
       πραγματική οριζόντια κύλιση σε κάθε οθόνη < 1520px (το body overflow-x: hidden
       δεν αποκόπτει position: fixed απόγονο). */
    clip-path: inset(0 0 0 100%);
    visibility: hidden; pointer-events: none;
    transition: clip-path .3s var(--ease), visibility 0s .3s;
  }
  body.nav-open .primary-nav {
    /* Αριστερά -60px: το inset(0) απέκοπτε ακριβώς στο border box, εξαφανίζοντας
       το box-shadow που δίνει βάθος στο συρτάρι. */
    clip-path: inset(0 0 0 -60px);
    visibility: visible; pointer-events: auto;
    transition: clip-path .3s var(--ease), visibility 0s 0s;
  }
  .primary-nav ul { flex-direction: column; align-items: stretch; gap: .1rem; width: 100%; }
  /* white-space: normal: το nowrap του desktop έκοβε τις ετικέτες μέσα στο
     συρτάρι όταν το κείμενο μεγαλώνει στο 200% («Διαγωνίσματα Φροντιστηρίου»
     χρειαζόταν 454px σε πλάτος 291px) — απώλεια περιεχομένου κατά WCAG 1.4.4. */
  /* display: flex και όχι inline-flex: το inline-flex διαστασιολογείται σε
     max-content, οπότε η ετικέτα δεν αναδιπλωνόταν και το υπομενού ξεπερνούσε
     το πλάτος του συρταριού σε μεγάλα μεγέθη κειμένου. */
  .primary-nav .menu-item > a { display: flex; width: 100%; padding: .85rem .9rem;
    font-size: 1.05rem; border-radius: 10px; white-space: normal; overflow-wrap: anywhere; }
  .primary-nav .menu-item-has-children > a::after { margin-left: auto; }
  .primary-nav .sub-menu {
    /* visibility: inherit και ΟΧΙ visible. Το ρητό «visible» ακύρωνε το
       visibility: hidden που κληρονομούσαν από το κλειστό συρτάρι, οπότε οι
       σύνδεσμοι των υπομενού έμεναν στο tab order και στο accessibility tree:
       ένας χρήστης πληκτρολογίου περνούσε από 24 ΑΟΡΑΤΟΥΣ συνδέσμους πριν
       φτάσει στο περιεχόμενο (μετρήθηκε σε 390px και 1440px). */
    position: static; opacity: 1; visibility: inherit; transform: none; box-shadow: none;
    border: none; border-left: 2px solid transparent; border-radius: 0; margin: 0 0 0 .9rem;
    padding: 0 0 0 .3rem; background: transparent; max-height: 0; overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
  }
  .primary-nav .menu-item-has-children.is-expanded > .sub-menu {
    max-height: 900px; padding: .2rem 0 .35rem .3rem;
    margin: .1rem 0 .3rem .9rem; border-left-color: var(--line);
  }
  .primary-nav .menu-item-has-children.is-expanded > a::after { transform: rotate(225deg) translateY(-2px); }
  .header-actions .btn { display: none; }
  .nav-backdrop { position: fixed; top: var(--header-h); right: 0; left: 0; bottom: auto;
    height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h)); background: rgba(14,27,51,.4); opacity: 0; visibility: hidden; transition: opacity .3s; z-index: 98; }
  body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}
@media (min-width: 95.0625em) { .nav-backdrop { display: none; } }

/* Reduce hero cols on wide */
@media (min-width: 980px) {
  .hero__grid.has-media { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
}

/* Πολύ στενές οθόνες (iPhone SE κ.λπ.). Το .brand και το .header-actions έχουν
   flex-shrink: 0, οπότε χωρίς σμίκρυνση το header ξέφευγε 27px στα 360px και 66px
   στα 320px — ο υπότιτλος «ΦΡΟΝΤΙΣΤΗΡΙΟ ΜΕΣΗΣ ΕΚΠΑΙΔΕΥΣΗΣ» έπιανε μόνος του 234px. */
@media (max-width: 420px) {
  .site-header > .container { gap: 12px; }
  .brand { gap: .55rem; min-width: 0; }
  .brand img { height: 42px; }
  .brand__name { font-size: 1.02rem; }
  .brand__sub { font-size: .53rem; letter-spacing: .09em; }
  .stat { padding: 1rem .35rem; }
}

/* -------------------------------------------------------------------------
   Υγιεινή flex/grid για μεγάλα μεγέθη κειμένου (WCAG 1.4.4, 200%)
   Τα flex παιδιά έχουν εξ ορισμού min-width: auto, δηλαδή δάπεδο min-content:
   ένα μακρύ email ή μια μακριά λέξη τα έκανε να ξεπερνούν την οθόνη αντί να
   αναδιπλωθούν. Το min-width: 0 τους επιτρέπει να συμπιεστούν.
   ------------------------------------------------------------------------- */
.hero__meta-item { min-width: 0; flex-wrap: wrap; }
/* flex-wrap: wrap + flex-basis: το min-width: 0 από μόνο του επέτρεπε στο κείμενο να
   συμπιεστεί σε 58px, οπότε ετικέτες σαν το «Έως 20 Αυγούστου» (183px) ζωγραφίζονταν
   έξω από την κάρτα. Με wrap, το εικονίδιο πηγαίνει πάνω και το κείμενο παίρνει
   ολόκληρη τη γραμμή όταν δεν υπάρχει χώρος δίπλα-δίπλα. */
.offer, .contact-item { flex-wrap: wrap; }
.offer > div, .contact-item > div { min-width: 0; flex: 1 1 12ch; }
.contact-item a, .contact-info a, .footer-contact-item a { overflow-wrap: anywhere; }
.prose { min-width: 0; }

/* Μακριές λέξεις: στο 200% μέγεθος κειμένου σε στενή οθόνη (ωφέλιμο πλάτος ~160px)
   ελληνικές σύνθετες λέξεις, emails και ονόματα αρχείων δεν χωρούσαν σε μια γραμμή
   και ζωγραφίζονταν έξω από την οθόνη. Το break-word ενεργοποιείται ΜΟΝΟ όταν η
   λέξη δεν χωράει μόνη της, άρα δεν αλλάζει τίποτα στα κανονικά μεγέθη
   (επαληθεύτηκε: ίδιο ύψος h1 σε 390px και 1440px). */
body, p, li, td, th, dd, dt, figcaption,
h1, h2, h3, h4, h5, h6,
a, span, strong, em, label, button, .btn { overflow-wrap: break-word; }