/* ==========================================================================
   BASE: layout and components. Every colour and size comes from tokens.css.

   Mobile-first: rules outside a media query are for phones; 48em (768px)
   and 64em (1024px) add to them. 64em is also where the menu switches from
   the panel to the inline bar; keep DESKTOP in js/site.js in step with it.

   OLDER BROWSERS (target: iOS 12+, Chrome/Android ~2018+)
   - left/right properties, not margin-inline / padding-inline / inset
   - spacing in flex rows uses margins; `gap` only on grid
   - clamp() / min() / max() only inside @supports
   - :focus-visible only as an enhancement over :focus
   --------------------------------------------------------------------------
    1. Reset          6. Item pages (articles, projects, news)
    2. Type           7. Lists of items, pagination
    3. Layout         8. Photo gallery and enlarged photos
    4. Header & menu  9. Footer
    5. Home          10. Utilities, motion, print
   ========================================================================== */


/* 1. Reset ================================================================= */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--header-rule) + 1rem);
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video {
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

svg {
  flex: none;
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

[hidden] {
  display: none !important;
}

/* The menu panel is open: stop the page behind it from scrolling. */
.nav-open,
.nav-open body {
  overflow: hidden;
}


/* 2. Type ================================================================== */

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: 1.5;
}

p {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

strong,
b {
  font-weight: 700;
}

a {
  color: var(--color-ink);
  text-decoration: none;
  text-underline-offset: 0.15em;
}

a:hover {
  text-decoration: underline;
}

:focus {
  outline: 2px solid var(--color-ink);
  outline-offset: 2px;
}

/* Hide the ring for mouse clicks where the browser can tell the difference.
   Older browsers don't understand :focus-visible, drop this rule, and keep
   the ring above: the safe failure. */
:focus:not(:focus-visible) {
  outline: none;
}


/* 3. Layout ================================================================ */

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* iPhone in landscape: keep content clear of the notch. */
@supports (padding: max(0px)) {
  .container {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

.main {
  padding-top: var(--space-l);
  padding-bottom: var(--space-2xl);
}

@media (min-width: 48em) {
  .main .container {
    padding-left: calc(var(--gutter) + 1.5rem);
    padding-right: calc(var(--gutter) + 1.5rem);
  }
}


/* 4. Header & menu ========================================================= */

.skip-link {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-s);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 700;
  transform: translateY(-150%);
}

.skip-link:focus {
  transform: none;
  color: var(--color-bg);
}

.site-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: var(--header-rule) solid var(--color-ink);
  view-transition-name: site-header; /* stays put while pages cross-fade */
}

.site-header__bar {
  display: flex;
  align-items: center;
  min-height: var(--header-h);
}

/* The logo yields space; the menu button never does. */
.brand {
  display: flex;
  align-items: center;
  min-width: 0;
  margin-right: auto;
  padding: 0.5rem 0;
}

.brand__logo {
  display: block;
  width: auto;
  height: 2.75rem;
  max-width: 100%;
}

@media (min-width: 48em) {
  .brand__logo {
    height: 55px; /* the file's own size, as on the old site */
  }
}

/* "Menu" exists twice: a link to the footer page list (works with no
   JavaScript at all) and a button that opens the panel. site.js swaps
   the link for the button. Same look, so nothing moves when it does.
   As on the old site, only the ☰ icon shows; "Μενού" is for screen readers. */
.menu-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: var(--space-xs);
  padding: 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-ink);
}

.menu-toggle:hover {
  text-decoration: none;
}

.menu-toggle__icon {
  position: relative;
  width: 22px;
  height: 16px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: border-color 0.2s ease;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  top: 5px;
  width: 100%;
  height: 2px;
  background: currentColor;
  transition: transform 0.2s ease;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  border-color: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: rotate(-45deg);
}

/* Phone & tablet: the menu is a panel under the header. */
.site-nav {
  display: none;
}

.site-nav.is-open {
  display: block;
  position: fixed;
  top: calc(var(--header-h) + var(--header-rule));
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: var(--space-xs) var(--gutter) var(--space-2xl);
  background: var(--color-bg);
}

.nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav__item {
  border-bottom: 1px solid var(--color-dropdown);
}

/* A parent item is a button (the old menu headings "ex-Artis" and
   "έργα & δράσεις" were not links) plus its submenu. */
.nav__link {
  display: block;
  width: 100%;
  padding: 0.75rem 0;
  border: 0;
  background: none;
  color: var(--color-nav);
  font-family: inherit;
  font-size: var(--step-nav);
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
}

.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item--current > .nav__link,
.nav__item.is-open > .nav__link {
  color: var(--color-ink);
  text-decoration: none;
}

.nav__sub {
  display: none;
  margin: 0;
  padding: 0 0 var(--space-s) var(--space-m);
  list-style: none;
}

.nav__item.is-open > .nav__sub {
  display: block;
}

.nav__sublink {
  display: block;
  padding: 0.5rem 0;
  color: var(--color-ink);
  font-size: var(--step-nav);
  font-weight: 700;
  line-height: 1.2;
}

.nav__sublink:hover {
  text-decoration: none;
}

/* The old menu's three entries that lead nowhere (συνδρομές, εισφορές,
   ενδιαφέροντα πολιτιστικά): shown, but plain text. */
.nav__sublink--text {
  cursor: default;
}

.nav__sublink[aria-current="page"] {
  text-decoration: underline;
}

/* Desktop: the menu is an inline bar with dropdowns. */
@media (min-width: 64em) {
  .menu-toggle {
    display: none !important;
  }

  .site-nav,
  .site-nav.is-open {
    display: block;
    position: static;
    padding: 0;
    overflow: visible;
    background: none;
  }

  .nav {
    display: flex;
    align-items: center;
  }

  .nav__item {
    position: relative;
    margin-left: var(--space-xs);
    border: 0;
  }

  .nav__link {
    width: auto;
    padding: 0.2345rem 0.469rem;
    border-radius: var(--radius);
    white-space: nowrap;
  }

  /* Dropdown. Hidden with visibility (not display) so it can fade, and so
     closing waits 0.2s: the pointer can cross the gap without it vanishing. */
  .nav__sub {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;
    width: 210px;
    margin-top: 5px;
    padding: 0.25rem 0;
    border-radius: var(--radius-s);
    background: var(--color-dropdown);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.15s ease, visibility 0s linear 0.2s;
  }

  .nav__item:last-child .nav__sub,
  .nav__item:nth-last-child(2) .nav__sub {
    left: auto;
    right: 0;
  }

  /* Invisible bridge over the gap between the button and the dropdown. */
  .nav__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -5px;
    height: 5px;
  }

  .nav__item.is-open > .nav__sub {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }

  .nav__sublink {
    padding: 0.2345rem 0.469rem;
  }

  a.nav__sublink:hover {
    text-decoration: underline;
  }
}

/* Mouse: open on hover. Touch screens skip this and use the button. */
@media (min-width: 64em) and (hover: hover) {
  .nav__item--parent:hover > .nav__sub {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}

/* No JavaScript: keyboard users open dropdowns by tabbing into them. */
@media (min-width: 64em) {
  .site-nav:not(.is-enhanced) .nav__item--parent:focus-within > .nav__sub {
    visibility: visible;
    opacity: 1;
  }
}


/* 5. Home ================================================================== */

/* The old slideshow: 10 photos, one every 3 seconds, a 0.3 s fade, looping.
   Each photo fills the frame (cropped, like the old CSS background-size:
   cover). Without JavaScript the first photo shows. */
.slideshow {
  position: relative;
  height: 60vw;
  min-height: 15rem;
  overflow: hidden;
}

@media (min-width: 48em) {
  .slideshow {
    height: 30rem;
  }
}

@media (min-width: 64em) {
  .slideshow {
    height: 650px;
  }
}

.slideshow__slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.slideshow__slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s linear, visibility 0s linear 0.3s;
}

.slideshow__slide.is-active,
.slideshow__slide.is-next,
.slideshow__slide.is-prev {
  visibility: visible;
}

.slideshow__slide.is-active {
  z-index: 2;
  opacity: 1;
  transition-delay: 0s;
}

.slideshow__slide.is-prev {
  z-index: 1;
  opacity: 1;
}

.slideshow__slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

/* Previous / next: the old dark rounded tabs with an arrow, at the sides.
   Shown on hover, always on touch screens. Built by site.js. */
.slideshow__btn {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 3;
  width: 58px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-on-dark);
  opacity: 0;
  transition: opacity 0.2s ease;
}

.slideshow__btn--prev { left: 0; }
.slideshow__btn--next { right: 0; }

.slideshow__btn span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-scrim-soft);
}

.slideshow__btn--prev span {
  border-radius: 0 12px 12px 0;
}

.slideshow__btn--next span {
  margin-left: 10px;
  border-radius: 12px 0 0 12px;
}

.slideshow__btn:hover,
.slideshow__btn:focus {
  opacity: 1;
}

@media (hover: none) {
  .slideshow__btn {
    opacity: 1;
  }
}

.home-text {
  margin-top: var(--space-xl);
}


/* 6. Item pages (articles, projects, news) ================================= */

.item__title {
  margin: 0;
  padding: 10px 0 4px;
  color: var(--color-text);
  font-size: var(--step-3);
}

/* The item photo: centred, 600px wide; it opens larger (XL) over the page. */
.item__image {
  margin: 0 0 var(--space-m);
  padding: var(--space-xs) 0;
  text-align: center;
}

.item__image a {
  display: inline-block;
  vertical-align: top;
}

.item__image img {
  display: block;
}

.item__credits {
  display: block;
  font-size: var(--step--2);
  font-style: italic;
  text-align: right;
}

.item__intro,
.item__text {
  padding: var(--space-2xs) 0 var(--space-s);
}

/* Long email addresses and links wrap on phones instead of widening the page. */
.item__intro,
.item__text,
.item-card__intro {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.item__text ul,
.item__intro ul {
  padding-left: 1.5rem;
}

.item__text h1,
.item__text h2,
.item__text h3 {
  margin: var(--space-l) 0 var(--space-xs);
  color: var(--color-text);
}

.item__text h1 { font-size: var(--step-3); }
.item__text h2 { font-size: var(--step-2); }
.item__text h3 { font-size: var(--step-1); }

.item__text .item__title {
  margin-top: 0;
}

.item__text img {
  display: inline-block;
  vertical-align: middle;
}

/* Download attachments: one line of links, as on the old site. */
.attachments {
  margin: var(--space-m) 0;
  padding: var(--space-2xs);
}

.attachments__label {
  padding-right: var(--space-2xs);
  color: var(--color-label);
  font-weight: 700;
}

.attachments__list {
  display: inline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.attachments__list li {
  display: inline;
  padding: 0 var(--space-2xs);
}

.block-title {
  margin: var(--space-s) 0 var(--space-l);
  color: var(--color-text);
  font-size: var(--step-2);
}

/* YouTube video, 400 wide at most, 16:9. */
.video {
  max-width: 400px;
  margin-bottom: var(--space-m);
}

.video__frame {
  position: relative;
  height: 0;
  padding-bottom: 56.25%;
}

.video__frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


/* 7. Lists of items, pagination ============================================ */

.item-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.item-card {
  margin-bottom: var(--space-l);
  padding: var(--space-2xs);
}

.item-card__title {
  margin: 0;
  padding-bottom: var(--space-2xs);
  font-size: var(--step-1);
}

.item-card__title a {
  color: var(--color-ink-soft);
}

.item-card__body {
  padding: var(--space-xs) 0;
}

.item-card__body::after {
  content: "";
  display: table;
  clear: both;
}

.item-card__image {
  display: block;
  max-width: 200px;
  margin-bottom: var(--space-xs);
}

.item-card__image img {
  display: block;
}

@media (min-width: 48em) {
  .item-card__image {
    float: left;
    margin-right: 25px;
  }
}

.item-card__intro {
  padding: var(--space-2xs) 0 var(--space-s);
  font-size: var(--step--1);
}

.item-card__intro p:first-child {
  margin-top: 0;
}

.item-card .video {
  margin-top: var(--space-xs);
}

.pagination {
  margin: var(--space-l) 0 var(--space-2xs);
  padding: var(--space-xs);
  text-align: center;
}

.pagination ul {
  margin: var(--space-l) 0;
  padding: 0;
  list-style: none;
}

.pagination li {
  display: inline-block;
  margin: 0 0 var(--space-xs);
}

.pagination a {
  display: inline-block;
  margin: 0 var(--space-xs);
  padding: var(--space-2xs) var(--space-xs);
  border: 1px solid var(--color-line);
  background: var(--color-bg);
}

.pagination li > span {
  display: inline-block;
  margin: 0 var(--space-xs);
}

.pagination p {
  margin: 0;
}


/* 8. Photo gallery and enlarged photos ===================================== */

/* "Image Gallery": the old thumbnails in 200x160 frames. Two to a row on
   phones, as many as fit from tablet up. */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: var(--space-xs) -2px;
  padding: var(--space-xs) 0;
  list-style: none;
}

.gallery li {
  width: 50%;
  padding: 2px;
}

@media (min-width: 48em) {
  .gallery li {
    width: auto;
  }
}

.gallery__link {
  position: relative;
  display: block;
  height: 0;
  padding-bottom: 80%;
  overflow: hidden;
  border: 6px solid var(--color-thumb-frame);
  background: var(--color-ink);
}

@media (min-width: 48em) {
  .gallery__link {
    width: 200px;
    height: 160px;
    padding-bottom: 0;
  }
}

.gallery__link img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: opacity 0.2s ease;
}

.gallery__link:hover img,
.gallery__link:focus img {
  opacity: 0.8;
}

/* The enlarged photo, built by site.js. */
.lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--color-scrim);
}

.lightbox-open,
.lightbox-open body {
  overflow: hidden;
}

.lightbox__img {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 1rem);
  max-height: calc(100vh - 9rem);
  transition: opacity 0.25s ease;
}

.lightbox__img.is-loading {
  opacity: 0;
}

@media (min-width: 48em) {
  .lightbox__img {
    max-width: calc(100vw - 9rem);
    max-height: calc(100vh - 6rem);
  }
}

/* "Download this image", under the photo, as in the old gallery viewer. */
.lightbox__caption {
  margin: var(--space-s) 0 0;
  color: var(--color-on-dark);
  text-align: center;
}

.lightbox__caption a {
  color: var(--color-on-dark);
  text-decoration: underline;
}

.lightbox__btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-scrim-soft);
  color: var(--color-on-dark);
}

.lightbox__btn:hover {
  background: var(--color-scrim);
}

.lightbox__btn:focus {
  outline-color: var(--color-on-dark);
}

.lightbox__btn--close {
  top: var(--space-s);
  right: var(--space-s);
}

/* Phones: arrows under the photo, where thumbs reach them. */
.lightbox__btn--prev,
.lightbox__btn--next {
  bottom: var(--space-m);
}

.lightbox__btn--prev {
  left: 25%;
}

.lightbox__btn--next {
  right: 25%;
}

@media (min-width: 48em) {
  .lightbox__btn--prev,
  .lightbox__btn--next {
    top: 50%;
    bottom: auto;
    margin-top: -1.5rem;
  }

  .lightbox__btn--prev {
    left: var(--space-m);
  }

  .lightbox__btn--next {
    right: var(--space-m);
  }
}


/* 9. Footer ================================================================ */

/* The old grey band: © line, the page list in capitals, the to-top arrow. */
.site-footer {
  padding-top: var(--space-xl);
  padding-bottom: var(--space-xl);
  background: var(--color-footer);
  color: var(--color-ink);
}

@supports (padding: max(0px)) {
  .site-footer {
    padding-bottom: max(var(--space-xl), env(safe-area-inset-bottom));
  }
}

.site-footer__copy {
  margin: 0 0 var(--space-m);
  font-size: var(--step--1);
}

.footer-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu li {
  display: inline-block;
  margin: 0 var(--space-xs) var(--space-2xs) 0;
  font-size: var(--step--1);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase; /* with lang="el", browsers drop the accents */
}

.footer-menu a {
  color: var(--color-footer-link);
}

.to-top {
  display: inline-flex;
  margin-top: var(--space-m);
  color: var(--color-label);
}

.to-top:hover {
  color: var(--color-ink);
}

@media (min-width: 48em) {
  .site-footer__bar {
    display: flex;
    align-items: flex-start;
  }

  .site-footer__copy {
    flex: 0 0 33%;
    margin: 0;
  }

  .site-footer__nav {
    flex: 1 1 auto;
  }

  .to-top {
    flex: none;
    margin: 0 0 0 auto;
    padding-left: var(--space-m);
  }
}


/* 10. Utilities, motion, print ============================================= */

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.error-page {
  padding: var(--space-xl) 0;
  text-align: center;
}

.error-page h1 {
  margin: var(--space-xs) 0;
  color: var(--color-ink);
  font-size: var(--step-3);
}

.error-page h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-size: var(--step-2);
}

.button {
  display: inline-block;
  margin-top: var(--space-m);
  padding: var(--space-xs) var(--space-l);
  border-radius: var(--radius);
  background: var(--color-ink);
  color: var(--color-bg);
  font-weight: 700;
}

.button:hover {
  color: var(--color-bg);
}

/* Cross-fade between pages (Chrome, Edge, Safari 18.2+). Other browsers
   load the next page normally. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  html {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

@media print {
  .site-header,
  .skip-link,
  .site-footer nav,
  .to-top,
  .slideshow__btn {
    display: none !important;
  }

  body {
    font-size: 11pt;
  }
}