/*
Theme Name: EBK
Theme URI: https://ebk.astak.betahost.gr
Description: Custom classic theme for the Greek Comics Academy (Ελληνική Ακαδημία Κόμικς / ΕΛ.ΒΡΑ.ΚΟ. awards). Editorial black-and-white paper with a scarce sky-blue accent, comic-strip panel frames and gutters. Self-hosted M PLUS Rounded 1c titles + Didact Gothic text, no external requests.
Author: Betahost
Version: 1.8.0
Requires at least: 6.5
Tested up to: 7.0.2
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ebk
*/

/* ==========================================================================
   Fonts (client pick, 2026-09-15; Google Fonts subsets, self-hosted)
   Titles: M PLUS Rounded 1c, static 700 + 800 (Greek + Latin subsets).
   Everything else: Didact Gothic, single 400 weight (Greek + Latin subsets)
            — heavier weights on labels/nav are browser-synthesised.
   ========================================================================== */
@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/didact-gothic-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Didact Gothic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/didact-gothic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/mplus-rounded-700-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/mplus-rounded-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/mplus-rounded-800-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'M PLUS Rounded 1c';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/mplus-rounded-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --ink: #101010;
  --paper: #ffffff;

  /* Sky-blue accent (from the ΕΛ.ΒΡΑ.ΚΟ. logo). Used SCARCELY:
     caption boxes, links, hover states, thin details. */
  --sky: #9be0ff;        /* flat fill: caption boxes / small accents */
  --sky-link: #0e74af;   /* link colour: 5.1:1 on white, 4.5:1 on --grey-4 (WCAG AA text);
                            only 3.7:1 on --ink, so never use it for text on ink */
  --sky-tint: #eaf6fd;   /* very restrained tint for a feature block */

  --grey-1: #6e6e6e;     /* secondary text */
  --grey-2: #6e6e6e;     /* eyebrow labels (5.1:1 on white, WCAG AA) */
  --grey-3: #bdbdbd;     /* dividers */
  --grey-4: #f2f2f2;     /* chip / light fill */
  --grey-5: #e6e6e6;

  --header-h: 76px;
  --wrap: 1280px;
  --gap: clamp(20px, 3vw, 32px);
  --lr: clamp(20px, 5vw, 48px);
  --sec-y: clamp(56px, 9vw, 140px);
  --radius: 16px;

  /* Type (client pick, 2026-09-15): M PLUS Rounded 1c for titles only,
     Didact Gothic for subtitles, labels, nav, buttons and body copy. */
  --ff: 'Didact Gothic', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ff-display: var(--ff);
  --ff-title: 'M PLUS Rounded 1c', 'Didact Gothic', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Reset / base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--ff);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; cursor: pointer; }
figure { margin: 0; }
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: var(--ff-title);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--sky-link); outline-offset: 2px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--lr); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 999;
  background: var(--ink); color: #fff; padding: 12px 18px;
}
.skip-link:focus {
  left: 8px; top: 8px; z-index: 100001;          /* above the fixed header and admin bar */
  clip: auto; clip-path: none; width: auto; height: auto; overflow: visible; white-space: normal;
  background: var(--ink); color: #fff; text-decoration: none;
  outline: 3px solid var(--sky-link); outline-offset: 2px;
}
/* Skip target (tabindex=-1): receives focus programmatically, no ring. */
#content:focus { outline: none; }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Hidden SVG filter host (see functions.php ebk_ink_filter) */
.ebk-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   Comic-strip panel frame — every content image sits in a hand-inked frame.
   Drawn as a border on a ::after overlay, warped by an SVG turbulence filter
   so the line reads as inked-by-hand rather than a crisp CSS rectangle.
   Applied to the reusable .panel-frame plus card / cover / gallery media.
   ========================================================================== */
.panel-frame,
.card__media,
.aw-card figure,
.gal-grid figure {
  position: relative;
  display: block;
  background: var(--paper);
}
/* `> picture > img`: the Modern Image Formats plugin wraps images in
   <picture style="display:contents"> (AVIF + JPEG fallback, v1.6.1). */
.panel-frame > img,
.card__media > img,
.aw-card figure > img,
.gal-grid figure > img,
.panel-frame > picture > img,
.card__media > picture > img,
.aw-card figure > picture > img,
.gal-grid figure > picture > img {
  display: block;
  width: 100%;
}
.panel-frame::after,
.card__media::after,
.aw-card figure::after,
.gal-grid figure::after,
.ebk-video__poster::after,
.ebk-video__media::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border: 2.5px solid var(--ink);
  filter: url(#inkline);
}

/* Caption box — the one overt comic device: a small sky-blue narration
   label overlapping the top-left edge of a panel frame. */
.caption-box {
  position: absolute;
  top: 0; left: 14px;
  transform: translateY(-46%);
  z-index: 2;
  background: var(--sky);
  border: 2px solid var(--ink);
  padding: 5px 12px;
  font-family: var(--ff-display);
  font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ==========================================================================
   Buttons — black pill (HFA DNA), hover fills with sky.
   ========================================================================== */
.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  padding: 14px 26px;
  font-family: var(--ff-display);
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--sky); color: var(--ink); border-color: var(--ink); text-decoration: none; }
.btn--ghost { background: transparent; color: var(--ink); }
.btn--ghost:hover { background: var(--sky); color: var(--ink); }
.btn--light { background: #fff; color: var(--ink); border-color: #fff; }
.btn--light:hover { background: var(--sky); color: var(--ink); border-color: var(--ink); }

/* Eyebrow / section labels */
.eyebrow {
  font-family: var(--ff-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--grey-2);
  margin: 0 0 1rem;
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--header-h);
  background: var(--paper);
  border-bottom: 1px solid var(--grey-3);
  transition: transform .4s ease, box-shadow .3s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(0,0,0,.06); }
.site-header.is-hidden { transform: translateY(-100%); }
/* Logged-in admin bar (32px, 46px below 783px) sits above the fixed header
   and off-canvas drawer; push both down so the burger stays reachable. */
.admin-bar .site-header { top: 32px; }
.admin-bar .primary-nav { top: 32px; }
@media (max-width: 782px) {
  .admin-bar .site-header { top: 46px; }
  .admin-bar .primary-nav { top: 46px; }
}
.site-header__inner {
  height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.site-logo { display: flex; align-items: center; }
.site-logo:hover { text-decoration: none; }
.site-logo img { height: 38px; width: auto; display: block; }

/* Primary nav — 5 top-level items (v1.4.0), larger labels, HFA-style
   dropdown panels for parents (desktop rules live in the >1000px query). */
.primary-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.primary-nav a {
  display: block;
  font-family: var(--ff-display);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 2px;
  position: relative;
  white-space: nowrap;
}
.primary-nav a:hover { text-decoration: none; }
.primary-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px;
  background: var(--sky-link); transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.primary-nav a:hover::after,
.primary-nav .current-menu-item > a::after,
.primary-nav .current-menu-ancestor > a::after,
.primary-nav .current-menu-parent > a::after { transform: scaleX(1); }
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a,
.primary-nav .current-menu-parent > a { color: var(--sky-link); }

/* Disclosure button after each parent link: chevron on desktop, accordion
   toggle in the drawer (functions.php ebk_nav_submenu_toggle). */
.submenu-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; padding: 0; margin-left: 3px;
  border: 0; background: transparent; color: inherit; border-radius: 4px;
}
.submenu-toggle svg { width: 11px; height: 8px; transition: transform .2s ease; }
.is-open > .submenu-toggle svg { transform: rotate(180deg); }
.primary-nav .current-menu-ancestor > .submenu-toggle,
.primary-nav .current-menu-parent > .submenu-toggle { color: var(--sky-link); }

/* Mega menu (v1.5.0, HFA-style): on desktop each parent's .sub-menu.mega is
   a full-viewport-width panel hung under the fixed header (the header is its
   containing block: top-level <li>s are position: static). One grid column
   per child (count-N, functions.php ebk_mega_submenu_class); each column is a
   tile with the item title + its menu Description. Open on hover, keyboard
   focus (:focus-visible) or the chevron toggle (.is-open, theme.js);
   .is-dismissed (Escape) wins over all of them. */
@media (min-width: 1001px) {
  .primary-nav, .primary-nav > ul, .primary-nav > ul > li { height: 100%; }
  .primary-nav > ul { align-items: stretch; }
  .primary-nav > ul > li { position: static; display: flex; align-items: center; }
  .primary-nav .sub-menu {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 5;
    display: grid; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 0;
    height: auto; margin: 0;
    padding: 40px max(var(--lr), calc((100% - var(--wrap)) / 2 + var(--lr))) 44px;
    background: var(--paper);
    border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
    opacity: 0; visibility: hidden;
    transition: opacity .15s ease, visibility 0s linear .15s;
  }
  .primary-nav .sub-menu.count-2 { grid-template-columns: repeat(2, 1fr); }
  .primary-nav .sub-menu.count-3 { grid-template-columns: repeat(3, 1fr); }
  .primary-nav .sub-menu.count-4 { grid-template-columns: repeat(4, 1fr); }
  .primary-nav .sub-menu.count-5 { grid-template-columns: repeat(5, 1fr); }
  .primary-nav .sub-menu.count-6 { grid-template-columns: repeat(6, 1fr); }
  .primary-nav li:not(.is-dismissed):hover > .sub-menu,
  .primary-nav li:not(.is-dismissed):has(:focus-visible) > .sub-menu,
  .primary-nav li.is-open:not(.is-dismissed) > .sub-menu {
    opacity: 1; visibility: visible;
    transition: opacity .15s ease, visibility 0s;
  }
  /* Only one panel at a time: pointing at another item hides the rest. */
  .primary-nav > ul:has(> li:hover) > li:not(:hover) > .sub-menu {
    opacity: 0; visibility: hidden; transition: none;
  }
  /* Active bar + chevron stay on while the item's panel is open. */
  .primary-nav > ul > li:not(.is-dismissed):hover > a::after,
  .primary-nav > ul > li.is-open:not(.is-dismissed) > a::after,
  .primary-nav > ul > li:not(.is-dismissed):has(:focus-visible) > a::after { transform: scaleX(1); }
  .primary-nav li:not(.is-dismissed):hover > .submenu-toggle svg,
  .primary-nav li:not(.is-dismissed):has(:focus-visible) > .submenu-toggle svg { transform: rotate(180deg); }
  .primary-nav li.is-dismissed > .submenu-toggle svg { transform: none; }

  /* Columns: 1px ink rule on the left of every column but the first. */
  .primary-nav .sub-menu > li { display: flex; height: auto; min-width: 0; border-left: 1px solid var(--ink); }
  .primary-nav .sub-menu > li:first-child { border-left: 0; }
  .primary-nav .sub-menu a {
    flex: 1; display: flex; flex-direction: column; gap: 12px;
    padding: 6px clamp(18px, 2.2vw, 32px) 8px;
    white-space: normal; text-transform: none; letter-spacing: 0;
    font-family: var(--ff); font-weight: 400; color: var(--ink);
  }
  .primary-nav .sub-menu > li:first-child > a { padding-left: 0; }
  .primary-nav .sub-menu > li:last-child > a { padding-right: 0; }
  .primary-nav .sub-menu a::after { display: none; }
  .mega__title {
    font-family: var(--ff-title); font-weight: 800;
    font-size: clamp(1.2rem, 1.75vw, 1.6rem); line-height: 1.1;
    letter-spacing: .01em; text-transform: uppercase;
    overflow-wrap: break-word; hyphens: manual;
    text-decoration: underline 2px transparent; text-underline-offset: .18em;
    transition: text-decoration-color .15s ease;
  }
  .mega__desc {
    font-size: .95rem; line-height: 1.45; color: var(--grey-1); max-width: 34ch;
  }
  .primary-nav .sub-menu a:hover .mega__title,
  .primary-nav .sub-menu a:focus-visible .mega__title { text-decoration-color: currentColor; }
  .primary-nav .sub-menu .current-menu-item > a .mega__title { color: var(--sky-link); }
  .primary-nav .sub-menu a:focus-visible { outline-offset: 4px; }
}

/* Burger */
.nav-toggle {
  display: none;
  width: 44px; height: 44px; border: 0; background: transparent; padding: 10px;
  position: relative; z-index: 120;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; position: absolute; height: 2px; width: 24px;
  background: var(--ink); transition: transform .3s ease, opacity .2s ease; border-radius: 2px;
}
.nav-toggle span { top: 50%; left: 10px; transform: translateY(-50%); }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

/* Push content below fixed header */
.site-main { padding-top: var(--header-h); }
.site-main.has-hero { padding-top: 0; }

/* Fallback panel when a post has no featured image: paper panel with the
   logo + title, still framed — never a grey placeholder. */
.panel-fallback {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
  background: var(--paper);
  padding: 26px 22px;
  aspect-ratio: 16 / 9;
}
.panel-fallback img { height: 40px; width: auto; }
.panel-fallback span {
  font-family: var(--ff-title);
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); line-height: 1.2;
}

/* ==========================================================================
   Generic page hero (inner pages / archives / single) — editorial ink slab.
   ========================================================================== */
.page-hero {
  background: var(--ink);
  color: #fff;
  padding: clamp(40px, 7vw, 84px) 0;
  position: relative; overflow: hidden;
}
.page-hero--ink { background: var(--ink); }
.page-hero__inner { position: relative; z-index: 1; }
.page-hero .breadcrumb { font-family: var(--ff-display); font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .8rem; }
.page-hero .breadcrumb a:hover { color: #fff; }
.page-hero h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); font-weight: 800; text-transform: uppercase; margin: 0; letter-spacing: -.015em; }
.page-hero .page-hero__meta { margin-top: .8rem; color: rgba(255,255,255,.8); font-size: .95rem; }

/* ==========================================================================
   Sections
   ========================================================================== */
.section { padding-block: var(--sec-y); }
.section--tint { background: var(--grey-4); }
.section__head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 60px); }
.section__head h2 { font-size: clamp(1.7rem, 4vw, 3rem); text-transform: uppercase; font-weight: 800; letter-spacing: -.015em; }
.section__foot { margin-top: clamp(32px, 5vw, 56px); text-align: center; }
.hr { border: 0; border-top: 1px solid var(--grey-3); margin: 0; }

/* Intro / mission */
.intro { text-align: center; padding-block: clamp(44px, 6vw, 96px); }
.intro__text { max-width: 900px; margin-inline: auto; font-family: var(--ff-display); font-size: clamp(1.3rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
.intro__tag { display: block; margin-top: .6em; color: var(--sky-link); }
.intro .btn { margin-top: 2.2rem; }

/* ==========================================================================
   News / card grids
   ========================================================================== */
/* Homepage news: 2 columns of 2.7:1 banner cards (client option 1, v1.6.0);
   one column at <=700px, where a half-width card would fall under ~300px. */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); }
.card {
  display: flex; flex-direction: column;
  background: var(--paper);
}
.card:hover { text-decoration: none; }
/* Cards (homepage .card-grid and archive .archive-grid) use the banners' own
   2.7:1 ratio, uncropped (ebk-card is 1300x0, v1.6.0). Non-banner images
   (w/h < 2, ebk_card_media_class) are shown whole on ink instead of cropped. */
.card__media { aspect-ratio: 1300 / 481; }
.card__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.card__media--contain { background: var(--ink); }
.card__media--contain img { object-fit: contain; }
.card__body { padding: 16px 2px 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.card__cat { font-family: var(--ff-display); font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--sky-link); }
.card__title { font-family: var(--ff-title); font-size: 1.02rem; font-weight: 750; line-height: 1.25; text-transform: uppercase; margin: 0; }
.card:hover .card__title { color: var(--sky-link); }
.card__date { margin-top: auto; font-size: .8rem; color: var(--grey-2); }

/* ==========================================================================
   Feature (awards promo) block — paper with a restrained sky tint.
   ========================================================================== */
.feature { background: var(--sky-tint); border-block: 1px solid var(--ink); }
.feature__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.feature__media { min-height: 320px; position: relative; padding: clamp(28px, 4vw, 56px); display: flex; }
.feature__media .panel-frame { width: 100%; align-self: center; }
.feature__media .panel-frame img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: clamp(36px, 6vw, 84px) clamp(24px, 5vw, 72px); align-self: center; }
.feature__body h2 { font-size: clamp(1.8rem, 4vw, 3rem); text-transform: uppercase; font-weight: 800; letter-spacing: -.015em; }
.feature__sub { font-family: var(--ff-display); font-size: clamp(1.1rem, 2vw, 1.4rem); font-weight: 700; margin-bottom: 1rem; }
.feature__body p { color: var(--grey-1); }
.feature__body .btn { margin-top: 1.4rem; }

/* Sponsors strip */
.sponsors { text-align: center; }
.sponsors h2 { font-family: var(--ff-display); font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--grey-2); font-weight: 700; margin-bottom: 2.5rem; }
.sponsors__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(28px, 5vw, 64px); }
.sponsors__row img { max-height: 46px; width: auto; filter: grayscale(1); opacity: .65; transition: filter .25s ease, opacity .25s ease; }
.sponsors__row img:hover { filter: grayscale(0); opacity: 1; }

/* ==========================================================================
   Article / page content (prose)
   ========================================================================== */
.prose { max-width: 820px; margin-inline: auto; font-size: 1.06rem; }
.prose > *:first-child { margin-top: 0; }
/* About page: justified body copy (client request 2026-10-06). */
.page-id-265 .prose p, .page-id-265 .prose li,
.page-id-273 .prose p, .page-id-273 .prose li { text-align: justify; hyphens: auto; }
.prose h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); text-transform: uppercase; margin-top: 1.6em; }
.prose h3 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-top: 1.4em; }
.prose h4 { font-size: 1.1rem; text-transform: uppercase; letter-spacing: .04em; }
.prose a { color: var(--sky-link); text-decoration: underline; text-underline-offset: 2px; }
.prose img, .prose figure { margin-block: 1.6em; }
.prose .panel-frame > img, .prose .panel-frame > picture > img { margin: 0; }   /* frames own their spacing (board grid) */
.prose figcaption { text-align: center; font-size: .85rem; color: var(--grey-2); margin-top: .5em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.6em 0; padding: .4em 0 .4em 1.4em; border-left: 3px solid var(--sky-link); font-size: 1.15em; font-style: italic; color: var(--grey-1); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: .92rem; }
.prose th, .prose td { border: 1px solid var(--grey-3); padding: 8px 12px; text-align: left; vertical-align: top; }
.prose thead th { background: var(--grey-4); text-transform: uppercase; font-size: .78rem; letter-spacing: .04em; }
.prose .wp-block-image { margin-inline: auto; }

.entry-footer { max-width: 820px; margin: clamp(40px,6vw,72px) auto 0; }

/* Prev / next post nav */
.post-nav { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--grey-3); padding-top: 28px; }
.post-nav a { max-width: 46%; }
.post-nav .post-nav__label { font-family: var(--ff-display); font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--grey-2); display: block; margin-bottom: 4px; }
.post-nav .post-nav__title { font-family: var(--ff-title); font-weight: 700; text-transform: uppercase; font-size: .95rem; }
.post-nav a:hover { text-decoration: none; color: var(--sky-link); }
.post-nav .next { text-align: right; margin-left: auto; }

/* ==========================================================================
   Awards archive (transformed content) — page 274
   ========================================================================== */
.aw-year { padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--grey-3); }
.aw-year > h2 {
  font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.015em;
  color: var(--ink); margin-bottom: .7em;
}
.aw-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.aw-card { display: flex; flex-direction: column; gap: 6px; }
.aw-card .aw-cat { order: -1; font-family: var(--ff-display); font-size: .72rem; font-weight: 700; line-height: 1.35; letter-spacing: .12em; text-transform: uppercase; color: var(--grey-2); margin: 0 0 4px; min-height: 2.4em; overflow-wrap: anywhere; }
.aw-card figure { aspect-ratio: 3/4; background: var(--grey-4); margin: 0 0 10px; }
.aw-card figure img { width: 100%; height: 100%; object-fit: cover; }
.aw-card p { margin: 0; font-size: .9rem; line-height: 1.35; }
/* v1.8.0: was `.aw-card p:first-of-type`, which only ever matched the category
   label; that label is now an <h3 class="aw-cat"> (1.3.1), so target it directly. */
.aw-card .aw-cat { font-family: var(--ff-title); font-weight: 700; text-transform: uppercase; }
.aw-card p em { color: var(--grey-1); font-style: italic; }

/* ==========================================================================
   Gallery grid (transformed content) — page 269 and generic galleries
   ========================================================================== */
.gal-year { padding-block: clamp(28px, 4vw, 48px); border-bottom: 1px solid var(--grey-3); scroll-margin-top: calc(var(--header-h) + 76px); }
.gal-year:last-child { border-bottom: 0; }
.gal-year > .gal-title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; letter-spacing: -.015em; color: var(--ink); margin: 0 0 .7em; text-transform: uppercase; }
.gal-year > .ebk-video-grid + .gal-grid { margin-top: var(--gap); }
.gal-title { font-size: clamp(1.4rem, 3vw, 2rem); text-transform: uppercase; margin: 0 0 1.2em; }
.gal-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.gal-grid figure { aspect-ratio: 4/3; background: var(--grey-4); margin: 0; }
.gal-grid figure a { display: block; height: 100%; }
.gal-grid figure img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.gal-grid figure a:focus-visible { outline: 3px solid var(--sky-link); outline-offset: 4px; }
.gal-credit { margin: 1em 0 0; font-size: .85rem; color: var(--grey-2); }

/* Also grid-ify native WP galleries inside prose */
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.prose .wp-block-gallery figure { margin: 0; }

/* ==========================================================================
   Archive listing
   ========================================================================== */
.archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.pagination { margin-top: clamp(40px,6vw,64px); display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border: 1px solid var(--grey-3); border-radius: 8px; font-weight: 600; font-size: .9rem;
}
.pagination .page-numbers:hover { text-decoration: none; border-color: var(--ink); }
.pagination .current { background: var(--ink); color: #fff; border-color: var(--ink); }

/* ==========================================================================
   404 / search
   ========================================================================== */
.error-404 { text-align: center; padding-block: clamp(60px, 10vw, 140px); }
.error-404 .code { font-size: clamp(5rem, 18vw, 11rem); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.error-404 p { font-size: 1.2rem; color: var(--grey-1); }
.search-form { display: flex; gap: 8px; max-width: 460px; margin: 24px auto 0; }
.search-form input[type="search"] { flex: 1; min-width: 0; padding: 12px 16px; border: 1.5px solid var(--ink); border-radius: var(--radius); font: inherit; color: var(--ink); background: var(--paper); }
.search-form button { border-radius: var(--radius); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--grey-3); padding-top: clamp(48px, 7vw, 90px); }
.footer-cta { display: flex; flex-wrap: wrap; justify-content: center; }
.footer-cta a {
  flex: 1; min-width: 200px; text-align: center; padding: 8px clamp(20px,4vw,48px);
  font-family: var(--ff-display);
  font-size: .82rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  border-left: 1px solid var(--grey-3);
}
.footer-cta a:first-child { border-left: 0; }
.footer-cta a:hover { color: var(--sky-link); text-decoration: none; }
.footer-logo { text-align: center; padding-block: clamp(40px, 8vw, 96px) clamp(24px, 4vw, 40px); }
.footer-logo img { height: clamp(48px, 8vw, 72px); width: auto; margin: 0 auto; }
.footer-contact { text-align: center; margin-bottom: clamp(28px,5vw,48px); }
.footer-contact h2 { font-family: var(--ff-display); font-size: .78rem; letter-spacing: .24em; text-transform: uppercase; color: var(--grey-2); font-weight: 700; margin-bottom: .8rem; }
.footer-contact .footer-address { color: var(--grey-1); font-size: .95rem; margin: 0 0 .5rem; }
.footer-contact a { font-weight: 600; }
.footer-contact a:hover { color: var(--sky-link); }
.footer-social { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 1rem; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border: 1.5px solid var(--ink); border-radius: 50%;
  color: var(--ink); transition: background .2s ease, color .2s ease;
}
.footer-social a:hover { background: var(--sky); color: var(--ink); text-decoration: none; }
.footer-social svg { width: 18px; height: 18px; fill: currentColor; }
.footer-bottom {
  border-top: 1px solid var(--grey-3); padding-block: 24px;
  display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; justify-content: space-between;
  font-size: .78rem; color: var(--grey-2);
}
.footer-bottom a:hover { color: var(--ink); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .archive-grid { grid-template-columns: repeat(2, 1fr); }
  .aw-grid { grid-template-columns: repeat(3, 1fr); }
  .gal-grid, .prose .wp-block-gallery { grid-template-columns: repeat(3, 1fr); }
}
/* 5 top-level items: slightly smaller labels between the burger and 1240px. */
@media (min-width: 1001px) and (max-width: 1240px) {
  .primary-nav > ul { gap: 20px; }
  .primary-nav > ul > li > a { font-size: .95rem; letter-spacing: .06em; }
}
/* Off-canvas nav below 1000px (was 860px; eight items no longer fit in a row). */
@media (max-width: 1000px) {
  :root { --header-h: 64px; }
  .nav-toggle { display: block; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(82vw, 360px);
    background: var(--paper); border-left: 1px solid var(--grey-3);
    padding: calc(var(--header-h) + 28px) 32px 32px;
    transform: translateX(100%); overflow-y: auto;
    /* Closed drawer: hidden (not focusable, not announced) once it has slid out. */
    visibility: hidden; transition: transform .35s ease, visibility 0s linear .35s;
  }
  .nav-open .primary-nav {
    transform: translateX(0); box-shadow: -20px 0 50px rgba(0,0,0,.12);
    visibility: visible; transition: transform .35s ease, visibility 0s;
  }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .primary-nav li { width: 100%; border-bottom: 1px solid var(--grey-4); }
  .primary-nav a { padding: 14px 0; font-size: 1.02rem; }
  .primary-nav a::after { display: none; }
  /* Drawer accordion: label follows the link, chevron button expands. */
  .primary-nav .menu-item-has-children { display: flex; flex-wrap: wrap; align-items: center; }
  .primary-nav .menu-item-has-children > a { flex: 1; }
  .primary-nav .submenu-toggle { width: 44px; height: 44px; margin: 0 -10px 0 0; }
  .primary-nav .submenu-toggle svg { width: 13px; height: 9px; }
  .primary-nav .sub-menu { display: none; flex-basis: 100%; gap: 0; padding: 0 0 12px 16px; border-left: 2px solid var(--ink); margin-bottom: 14px; }
  .primary-nav .is-open > .sub-menu { display: flex; }
  .primary-nav .sub-menu li { border-bottom: 0; }
  .primary-nav .sub-menu a { padding: 9px 0; font-size: .9rem; letter-spacing: .06em; }
  .mega__desc { display: none; }
  .nav-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90;
    opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease;
  }
  .nav-open .nav-backdrop { opacity: 1; visibility: visible; }
}
@media (max-width: 700px) {
  .card-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .feature__grid { grid-template-columns: 1fr; }
  .feature__media { min-height: 0; order: -1; padding: clamp(20px,5vw,40px) clamp(20px,5vw,40px) 0; }
  .aw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gal-grid, .prose .wp-block-gallery { grid-template-columns: repeat(2, 1fr); }
  .post-nav { flex-direction: column; }
  .post-nav a, .post-nav .next { max-width: 100%; text-align: left; }
}
@media (max-width: 560px) {
  .archive-grid { grid-template-columns: 1fr; }
  .aw-grid, .gal-grid, .prose .wp-block-gallery { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .aw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-cta a { border-left: 0; flex-basis: 100%; }
  .footer-bottom { justify-content: center; text-align: center; }
}

/* ==========================================================================
   ROUND 2 — inner-pages agent (about board grid, archive cover-fit, 2026
   winners placeholders, page intros). NEW component classes only, appended;
   no tokens or earlier rules edited. See docs/TODO-round2.md items 5,6,7,12.
   ========================================================================== */

/* --- Full-width inner-page content wrapper (About board grid breaks out of
   the narrow prose column; page.php renders id 265 in .ebk-wide). --- */
.ebk-wide > .prose { margin-inline: auto; }          /* keep text readable/centered */
.page-lead { max-width: 820px; margin: 0 auto clamp(28px,4vw,48px); font-family: var(--ff-display); font-size: clamp(1.15rem,2.2vw,1.5rem); font-weight: 600; line-height: 1.35; letter-spacing: -.01em; color: var(--ink); }
.page-lead p { margin: 0; }

/* --- About: board of directors grid --- */
.board-section { margin-top: clamp(40px, 6vw, 80px); }
/* No heading/rule above the grid (board page, 2026-10-06): grid follows the lead directly. */
.board-section:not(:has(.board-section__head)) { margin-top: 0; }
.board-section__head { border-top: 2px solid var(--ink); padding-top: clamp(20px,3vw,32px); margin-bottom: clamp(24px,4vw,44px); }
.board-section__head h2 { font-size: clamp(1.5rem, 3.4vw, 2.4rem); text-transform: uppercase; letter-spacing: -.015em; margin: 0; }
.board-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.board-member { display: flex; flex-direction: column; }
.board-member .panel-frame { aspect-ratio: 1 / 1; margin-bottom: 14px; }
.board-member .panel-frame img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.board-member__name { font-family: var(--ff-title); font-weight: 750; font-size: 1rem; line-height: 1.2; text-transform: uppercase; margin: 0 0 5px; }
.board-member__role { font-family: var(--ff-display); font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--grey-2); margin: 0; }
.board-member__role--officer { color: var(--sky-link); }

/* --- About: full-membership list, tucked into a native expandable panel --- */
.members-toggle { max-width: 820px; margin: clamp(40px,6vw,72px) auto 0; border-top: 1px solid var(--grey-3); }
.members-toggle > summary { cursor: pointer; list-style: none; padding: 20px 0; font-family: var(--ff-title); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.members-toggle > summary::-webkit-details-marker { display: none; }
.members-toggle > summary::after { content: "+"; font-family: var(--ff-display); font-size: 1.5em; line-height: 1; color: var(--sky-link); }
.members-toggle[open] > summary::after { content: "\2013"; }
.members-toggle .members-note { color: var(--grey-1); font-size: .95rem; margin: 0 0 1.2em; }

/* --- Archive covers: show the FULL cover in a uniform 2:3 cell. Portrait
   covers fill; landscape (landscape-printed) covers show whole, centered
   vertically, letterboxed on paper (never grey / never cropped). Overrides
   the earlier cover/crop rules for .aw-card figure by appearing later. --- */
.aw-card figure { aspect-ratio: 2 / 3; background: var(--paper); }
.aw-card figure img { object-fit: contain; object-position: center; }

/* --- Archive: 2026 winners, cover placeholders (real 600x900 covers drop in
   later — see the swap note in the page markup). --- */
.aw-cover { display: flex; }
.aw-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; text-align: center; width: 100%; height: 100%; padding: 24px 18px; background: var(--paper); }
.aw-card figure .aw-ph__logo { width: auto; height: auto; max-width: 72%; max-height: 34px; object-fit: contain; opacity: .9; }
.aw-ph__title { font-family: var(--ff-title); font-weight: 750; font-size: .92rem; line-height: 1.25; text-transform: uppercase; color: var(--ink); }
.aw-card .aw-title { font-family: var(--ff-title); font-weight: 750; font-size: .95rem; line-height: 1.25; text-transform: uppercase; margin: 0; overflow-wrap: anywhere; }

/* --- ΕΛ.ΒΡΑ.ΚΟ. hub: how-it-works phase steps --- */
.phase-steps { list-style: none; counter-reset: phase; padding: 0; margin: clamp(28px,4vw,44px) auto; max-width: 820px; display: grid; gap: 14px; }
.phase-steps li { counter-increment: phase; position: relative; padding: 20px 20px 20px 66px; border: 2px solid var(--ink); background: var(--paper); }
.phase-steps li::before { content: counter(phase); position: absolute; left: 16px; top: 18px; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; background: var(--sky); border: 2px solid var(--ink); font-family: var(--ff-display); font-weight: 800; font-size: 1rem; }
.phase-steps h3 { font-family: var(--ff-title); font-size: 1rem; font-weight: 750; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 4px; }
.phase-steps p { margin: 0; color: var(--grey-1); font-size: .95rem; }
.phase-steps + .btn-row { margin-top: clamp(28px,4vw,40px); }

/* --- Shared small helper: a subtle editorial "fill this in" note for the
   client, and a centered button row on placeholder pages. --- */
.editor-note { font-size: .82rem; color: var(--grey-2); font-style: italic; border-left: 3px solid var(--sky); padding: 2px 0 2px 12px; margin: 1.2em 0; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: clamp(24px,4vw,36px); }

@media (max-width: 1000px) { .board-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .board-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px)  { .board-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   ROUND 4 (v1.4.0, 2026-09-22) — full-bleed slider, label rows, sponsors,
   footer CTA, awards year jump, video embeds.
   ========================================================================== */

/* --- Full-bleed slider (template-parts/slider.php + theme.js initSlider).
   The client's banners carry their text inside the image (e.g. 1300x481,
   ~2.7:1), so the image box uses that ratio and is never covered: the text
   strip (caption-box + title + pill) sits below it, overlapping the image's
   lower edge by 24px at most. Controls sit at the right of the same strip.
   Every slide shares one box (flex stretch), so height never jumps. --- */
.slider {
  --slide-ratio: 1300 / 481; --slide-overlap: 24px;
  position: relative; container-type: inline-size;
  padding-bottom: clamp(20px, 3vw, 36px);
}
.slider__viewport { overflow: hidden; touch-action: pan-y; }
.slider__track { display: flex; transition: transform .7s cubic-bezier(.65, 0, .25, 1); will-change: transform; }
.slide { flex: 0 0 100%; min-width: 100%; }
.slide__media { aspect-ratio: var(--slide-ratio); background: var(--grey-4); border-bottom: 1px solid var(--ink); }
.slide__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slide__wrap { position: relative; z-index: 1; margin-top: calc(-1 * var(--slide-overlap)); padding-bottom: 8px; }
.slide__panel {
  max-width: min(720px, calc(100% - 300px));
  padding: clamp(26px, 2.6vw, 34px) clamp(22px, 2.6vw, 34px) clamp(20px, 2.2vw, 28px);
}
.slide__panel .caption-box { left: clamp(16px, 2vw, 28px); }
.slide__title {
  font-size: clamp(22px, 2.4vw, 32px); font-weight: 800; line-height: 1.08; letter-spacing: -.01em;
  text-transform: uppercase; text-wrap: balance; margin: 4px 0 20px;
}
.slide__title a:hover { text-decoration: none; color: var(--sky-link); }

.slider__controls {
  position: absolute; z-index: 2;
  /* image height (container width / ratio) + the strip's top padding */
  top: calc(100cqw * 481 / 1300 + 28px);
  right: max(var(--lr), calc((100% - var(--wrap)) / 2 + var(--lr)));
  display: flex; align-items: center; gap: 10px;
}
.slider__dots { display: flex; align-items: center; margin-right: 10px; }
.slider__dot { width: 26px; height: 26px; padding: 0; border: 0; background: transparent; position: relative; }
.slider__dot::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background .2s ease;
}
.slider__dot[aria-current="true"]::before { background: var(--ink); }
.slider__dot:hover::before { background: var(--sky); }
.slider__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
  transition: background .2s ease;
}
.slider__arrow:hover { background: var(--sky); }
.slider__arrow svg { width: 10px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .slider__track { transition: none; }
}
/* Phones: a 2.7:1 banner would be ~144px tall, so show it whole
   (contain) in a 16:9 ink box; strip and controls stack below. */
@media (max-width: 767px) {
  .slider { --slide-ratio: 16 / 9; --slide-overlap: 16px; }
  .slide__media { background: var(--ink); }
  .slide__img { object-fit: contain; }
  .slide__panel { max-width: none; }
  .slider__controls { position: static; justify-content: flex-end; padding: 16px var(--lr) 0; }
  .slider__dots { margin-right: auto; margin-left: -8px; }
  .slider__arrow { width: 42px; height: 42px; }
}

/* --- Section label row (news grid lead-in, "Παλαιότερες δράσεις"). --- */
.label-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 12px; margin-bottom: clamp(26px, 3.6vw, 44px);
}
.label-row__label { font-size: clamp(1.4rem, 2.8vw, 2.2rem); text-transform: uppercase; letter-spacing: -.01em; margin: 0; }
.label-row__all { font-family: var(--ff-display); font-size: .9rem; font-weight: 600; letter-spacing: .04em; color: var(--sky-link); }
.label-row__all:hover { text-decoration: underline; }
.section--after-slider { padding-top: clamp(32px, 5vw, 64px); }

/* --- Sponsors: "Χορηγοί" (linked, larger) above "Χορηγοί επικοινωνίας". --- */
.sponsors__group + .sponsors__group { margin-top: clamp(48px, 7vw, 88px); }
.sponsors__row a { display: inline-flex; }
.sponsors__row--main { gap: clamp(40px, 7vw, 96px); }
.sponsors__row--main img { max-height: 64px; max-width: 220px; }

/* --- Footer CTA: two evenly spaced actions between hairlines. --- */
.footer-cta { max-width: 760px; margin-inline: auto; border-block: 1px solid var(--grey-3); }
.footer-cta a { flex: 1 1 0; min-width: 0; padding: 22px clamp(16px, 3vw, 40px); font-size: .9rem; }
@media (max-width: 560px) {
  .footer-cta a + a { border-top: 1px solid var(--grey-3); }
}

/* --- Awards archive: sticky "ΧΡΟΝΟΛΟΓΙΑ:" year-jump pill. --- */
.aw-jump {
  position: sticky; top: calc(var(--header-h) + 14px); z-index: 20;
  display: flex; align-items: center; gap: 10px;
  width: max-content; margin: 0 0 8px auto;
  padding: 6px 8px 6px 20px;
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 999px;
}
.aw-jump label {
  font-family: var(--ff-display); font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--grey-2);
}
.aw-jump__select {
  appearance: none; -webkit-appearance: none;
  border: 0; border-radius: 999px; background-color: var(--ink); color: #fff;
  font-family: var(--ff-display); font-size: .92rem; font-weight: 700; letter-spacing: .08em;
  padding: 9px 38px 9px 18px; cursor: pointer; line-height: 1.1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center; background-size: 11px 8px;
}
.aw-jump__select:hover { background-color: #333; }
.aw-jump__select option { background: var(--paper); color: var(--ink); }
.aw-year { scroll-margin-top: calc(var(--header-h) + 76px); }

/* --- oEmbed / iframe videos: responsive 16:9 in prose and single posts (.gal-embed:
   legacy wrapper, unused since the 2026-10-12 gallery rebuild). --- */
.wp-block-embed { margin: 1.6em 0; }
.wp-block-embed:not(.wp-has-aspect-ratio) iframe,
.prose iframe[src*="youtube"], .prose iframe[src*="youtu.be"], .prose iframe[src*="vimeo"],
.gal-embed iframe {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0;
}
.wp-embed-responsive .wp-block-embed.wp-has-aspect-ratio iframe { aspect-ratio: auto; }
.prose video, .gal-embed video { width: 100%; height: auto; display: block; }
.gal-embed { max-width: 960px; margin: 0 auto clamp(28px, 5vw, 56px); }
.gal-embed > .wp-block-embed, .gal-embed > figure, .gal-embed > p { margin: 0; }

/* --- Header hidden on scroll-down: never leave a hovered dropdown floating. --- */
@media (min-width: 1001px) {
  .site-header.is-hidden .primary-nav .sub-menu { opacity: 0; visibility: hidden; }
}

/* --- Ninja Forms (newsletter form 9, membership/contact forms): match the
   theme instead of the plugin's bare browser defaults. --- */
.nf-form-cont { font-family: var(--ff); }
.nf-form-cont .nf-form-fields-required { font-size: .9rem; color: var(--grey-2); margin-bottom: 18px; }
.nf-form-cont .nf-field-container { margin-bottom: 22px; }
.nf-form-cont .nf-field-label label { font-weight: 700; display: inline-block; margin-bottom: 8px; }
.nf-form-cont .ninja-forms-req-symbol { color: var(--sky-link); }
.nf-form-cont input[type="text"], .nf-form-cont input[type="email"], .nf-form-cont input[type="tel"],
.nf-form-cont input[type="number"], .nf-form-cont input[type="date"], .nf-form-cont input[type="url"],
.nf-form-cont textarea, .nf-form-cont select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px;
}
.nf-form-cont textarea { min-height: 160px; }
.nf-form-cont input:focus, .nf-form-cont textarea:focus, .nf-form-cont select:focus {
  outline: 2px solid var(--sky-link); outline-offset: 2px;
}
.nf-form-cont .checkbox-container .nf-field-element { display: inline-block; vertical-align: middle; margin-right: 10px; }
.nf-form-cont .checkbox-container .nf-field-label { display: inline-block; vertical-align: middle; }
.nf-form-cont .checkbox-container .nf-field-label label { margin: 0; font-weight: 400; }
/* (.nf-field-element raises specificity over NF's `.field-wrap>div input[type=checkbox]{width:auto}`;
   min-width beats the list fields' `width:auto !important`) */
.nf-form-cont .nf-field-element input[type="checkbox"], .nf-form-cont .nf-field-element input[type="radio"] { width: 24px; height: 24px; min-width: 24px; min-height: 24px; margin: 0 8px 0 0; accent-color: var(--ink); vertical-align: middle; flex: none; }
.nf-form-cont input[type="button"], .nf-form-cont input[type="submit"], .nf-form-cont button[type="submit"] {
  display: inline-block; cursor: pointer;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 14px 26px; font-family: var(--ff-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.nf-form-cont input[type="button"]:hover, .nf-form-cont input[type="submit"]:hover, .nf-form-cont button[type="submit"]:hover {
  background: var(--sky); color: var(--ink);
}
.nf-form-cont .nf-error-msg, .nf-form-cont .nf-error .nf-error-msg { color: #b00020; font-size: .9rem; margin-top: 6px; }
.nf-form-cont .nf-error input, .nf-form-cont .nf-error textarea { border-color: #b00020; }
.nf-response-msg { padding: 16px 20px; border: 1.5px solid var(--ink); background: var(--sky-tint); }

/* ==========================================================================
   Click-to-load video (figure.ebk-video, theme.js) — posts and gallery.
   16:9 poster in the ink frame + a plain round play glyph; the iframe
   replaces the poster on click. .ebk-video-grid: 2 columns from 720px.
   ========================================================================== */
.ebk-video { margin: 1.6em 0; }
.ebk-video-grid { display: grid; grid-template-columns: 1fr; gap: var(--gap); }
.ebk-video-grid > .ebk-video { margin: 0; }
@media (min-width: 720px) { .ebk-video-grid { grid-template-columns: repeat(2, 1fr); } }
.prose .ebk-video-grid { margin-block: 1.6em; }
.ebk-video__poster,
.ebk-video__media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--ink); overflow: visible;
}
.ebk-video__poster img,
.ebk-video__poster picture > img {
  display: block; width: 100%; height: 100%; object-fit: cover; margin: 0;
}
.ebk-video__media iframe { display: block; width: 100%; height: 100%; border: 0; }
.ebk-video__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  width: clamp(54px, 9%, 76px); aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--paper); border: 2.5px solid var(--ink);
  transition: background .2s ease;
}
.ebk-video__play::before {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--ink);
}
.ebk-video__poster:hover .ebk-video__play,
.ebk-video__poster:focus-visible .ebk-video__play { background: var(--sky); }
.ebk-video__poster:focus-visible { outline: 3px solid var(--sky-link); outline-offset: 4px; }
.ebk-video figcaption,
.prose .ebk-video figcaption {
  margin-top: .8em; text-align: left; font-size: .92rem; line-height: 1.35; color: var(--ink);
}

/* ==========================================================================
   Lightbox (native <dialog>, theme.js) — gallery photos.
   ========================================================================== */
.lightbox {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
}
.lightbox::backdrop { background: rgba(16, 16, 16, .94); }
.lightbox__figure {
  margin: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 56px clamp(12px, 7vw, 88px) 20px;
}
.lightbox__figure picture { display: contents; }
.lightbox__figure img {
  display: block; max-width: 100%; max-height: calc(100% - 40px);
  width: auto; height: auto; object-fit: contain; border: 2.5px solid var(--paper);
}
.lightbox__caption { font-size: .85rem; color: #d6d6d6; text-align: center; }
.lightbox__btn {
  position: absolute; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0 0 3px; border-radius: 50%;
  border: 1.5px solid var(--paper); background: var(--ink); color: #fff;
  font: 400 30px/1 var(--ff); cursor: pointer; transition: background .2s ease, color .2s ease;
}
.lightbox__btn:hover, .lightbox__btn:focus-visible { background: var(--sky); color: var(--ink); border-color: var(--ink); }
.lightbox__btn:focus-visible { outline: 2px solid var(--paper); outline-offset: 3px; }
.lightbox__close { top: 10px; right: 12px; }
.lightbox__prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox.is-single .lightbox__prev, .lightbox.is-single .lightbox__next { display: none; }
@media (max-width: 560px) {
  .lightbox__figure { padding: 60px 8px 76px; }
  .lightbox__prev, .lightbox__next { top: auto; bottom: 16px; transform: none; }
  .lightbox__prev { left: calc(50% - 58px); }
  .lightbox__next { right: calc(50% - 58px); }
}

/* ==========================================================================
   v1.8.0 (2026-10-12) — WCAG 2.2 AA pass. New controls reuse the existing
   ink-frame / arrow-button styling; no new colours.
   ========================================================================== */

/* --- Buttons inside prose: `.prose a` (sky link) must not recolour the
   black pill (sky on ink is 3.7:1). --- */
.prose a.btn { color: #fff; text-decoration: none; }
.prose a.btn:hover,
.prose a.btn--ghost,
.prose a.btn--light { color: var(--ink); }

/* --- Target size (2.5.8): small text links get a ≥24px box. --- */
.label-row__all,
.footer-contact > a,
.footer-bottom a {
  display: inline-flex; align-items: center; min-height: 24px;
}

/* --- Slider: pause / play rotation control (2.2.2), same square as the arrows. --- */
.slider__pause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
  transition: background .2s ease;
}
.slider__pause:hover { background: var(--sky); }
.slider__pause svg { width: 14px; height: 16px; }
.slider__pause .icon-play { display: none; }
.slider__pause[aria-pressed="true"] .icon-pause { display: none; }
.slider__pause[aria-pressed="true"] .icon-play { display: block; }
@media (max-width: 767px) {
  .slider__pause { width: 42px; height: 42px; }
}

/* --- Awards / gallery year jump: explicit "Μετάβαση" submit (3.2.2). --- */
.aw-jump__go {
  border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); color: var(--ink);
  font-family: var(--ff-display); font-size: .74rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; line-height: 1.1; padding: 8px 14px; min-height: 34px;
  transition: background .2s ease;
}
.aw-jump__go:hover { background: var(--sky); }
@media (max-width: 420px) {
  .aw-jump { padding-left: 14px; gap: 6px; }
  .aw-jump label { letter-spacing: .08em; }
  .aw-jump__select { padding-right: 32px; padding-left: 14px; background-position: right 12px center; }
  .aw-jump__go { padding-inline: 10px; }
}

/* --- Footer search (2.4.5 multiple ways). --- */
.footer-search { max-width: 420px; margin: 0 auto clamp(28px, 5vw, 48px); }
.footer-search .search-form { margin: 0; }
.footer-search .search-form input[type="search"] { padding: 10px 16px; font-size: .95rem; }
.footer-search .search-form .btn { padding: 12px 20px; }

/* --- Search results page. --- */
.search-intro { max-width: 820px; margin: 0 0 clamp(28px, 4vw, 44px); }
.search-intro .search-form { margin: 0; }

/* --- Contact Form 7 (membership / contact): same field styling as the
   Ninja Forms rules above; full width, no overflow at 320px (1.4.10),
   ≥24px targets (2.5.8). --- */
.wpcf7 input:not([type=checkbox]):not([type=radio]):not([type=submit]),
.wpcf7 textarea,
.wpcf7 select {
  width: 100%; max-width: 100%; box-sizing: border-box;
  padding: 12px 16px; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--ink); border-radius: 10px;
}
.wpcf7 textarea { min-height: 160px; }
.wpcf7 input:focus, .wpcf7 textarea:focus, .wpcf7 select:focus { outline: 2px solid var(--sky-link); outline-offset: 2px; }
.wpcf7 label { font-weight: 700; }
.wpcf7 fieldset { border: 0; padding: 0; margin: 0 0 1em; min-width: 0; }
.wpcf7 legend { font-weight: 700; padding: 0; margin-bottom: 10px; }
.wpcf7 .wpcf7-list-item { display: block; margin: 0 0 10px; }
.wpcf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.wpcf7 input[type=checkbox], .wpcf7 input[type=radio] {
  width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink);
}
.wpcf7 input[type=submit] {
  display: inline-block; cursor: pointer; width: auto;
  background: var(--ink); color: #fff; border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 14px 26px; font-family: var(--ff-display); font-size: .82rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.wpcf7 input[type=submit]:hover { background: var(--sky); color: var(--ink); }
.wpcf7 .wpcf7-not-valid-tip { color: #b00020; font-size: .9rem; margin-top: 6px; }
.wpcf7 .wpcf7-not-valid { border-color: #b00020; }

/* --- Ninja Forms list fields (radio / checkbox lists): roomy rows with
   24px inputs; the group label is a real group name (theme.js). --- */
.nf-form-cont .listradio-wrap .nf-field-element ul, .nf-form-cont .listcheckbox-wrap .nf-field-element ul { list-style: none; margin: 0; padding: 0; }
.nf-form-cont .listradio-wrap .nf-field-element li, .nf-form-cont .listcheckbox-wrap .nf-field-element li { display: flex; align-items: center; margin: 0 0 10px; padding-left: 0; }
.nf-form-cont .listradio-wrap .nf-field-element li label, .nf-form-cont .listcheckbox-wrap .nf-field-element li label { margin: 0; font-weight: 400; cursor: pointer; }
.nf-form-cont .nf-field-description { font-size: .92rem; color: var(--grey-1); }
.nf-form-cont .nf-field-description p { margin: 0 0 .5em; }
.nf-form-cont .nf-field-description ul { margin: 0 0 .5em; padding-left: 1.2em; }

/* --- Card fallback panel (posts/pages without a featured image, e.g. pages in
   search results): keep the small logo; `.card__media img` must not stretch it. --- */
.card__media .panel-fallback { height: 100%; aspect-ratio: auto; padding: 14px 18px; gap: 10px; }
.card__media .panel-fallback img { width: auto; height: 40px; object-fit: contain; }