/*
Theme Name: Λόφος Στρέφη
Theme URI: https://lofosstrefi.noblogs.org
Author: Ανοιχτή Συνέλευση για την Υπεράσπιση του Λόφου Στρέφη
Description: Χαρτί, μελάνι και δάσος. Ένα block theme για την Ανοιχτή Συνέλευση για την Υπεράσπιση του Λόφου Στρέφη.
Version: 1.4.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lofos-strefi
*/

/* ==========================================================================
   Paper. A faint fibre texture (inline SVG noise) over the paper colour.
   ========================================================================== */
:root { --lofos-card: #fff; --lofos-shadow: var(--wp--preset--color--ink); }
body {
  background-color: var(--wp--preset--color--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.12 0 0 0 0 0.08 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper); }
:focus-visible { outline: 3px solid var(--wp--preset--color--marker); outline-offset: 2px; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
img { height: auto; }

/* ==========================================================================
   Header
   ========================================================================== */
.lofos-header {
  border-bottom: 2px solid var(--wp--preset--color--ink);
}
.lofos-header .wp-block-site-logo img { width: 56px; height: auto; }
.lofos-header .wp-block-site-title { max-width: 26ch; font-size: 1.05rem; line-height: 1.05; }
.lofos-header .wp-block-navigation .wp-block-navigation-item__content { padding: .35rem 0; }
.lofos-header .wp-block-navigation .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.lofos-header .wp-block-search__button { border: 0; }
.lofos-header .wp-block-search__input {
  background: transparent; border: 0; border-bottom: 2px solid var(--wp--preset--color--ink);
  border-radius: 0; font-family: var(--wp--preset--font-family--display); font-size: 1rem; padding: .25rem 0;
}
.lofos-header .wp-block-search__input:focus { outline: none; border-bottom-color: var(--wp--preset--color--marker); }
.lofos-header .wp-block-search { width: 120px; transition: width .25s ease; }
.lofos-header .wp-block-search:focus-within { width: 200px; }
.lofos-header .wp-block-navigation .wp-block-navigation-item__content { position: relative; }
.lofos-header .wp-block-navigation .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: .45em; z-index: -1;
  background: var(--wp--preset--color--leaf); opacity: .7; transform: scaleX(0) skewX(-8deg); transform-origin: left;
  transition: transform .2s ease;
}
.lofos-header .wp-block-navigation .wp-block-navigation-item__content:hover::after,
.lofos-header .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after { transform: scaleX(1) skewX(-8deg); }
.lofos-header .wp-block-navigation .current-menu-item > a { text-decoration: none; }
.lofos-header .wp-block-navigation .wp-block-navigation-item__content:hover { text-decoration: none; }
@media (min-width: 1100px) {
  .lofos-header > .wp-block-group, .lofos-header > .wp-block-group > .wp-block-group:last-child { flex-wrap: nowrap; }
  .lofos-header .wp-block-site-title { max-width: 20ch; font-size: .95rem; }
  .lofos-header .wp-block-navigation { font-size: 1.05rem; }
  .lofos-header .wp-block-navigation .wp-block-navigation__container { gap: .95rem; flex-wrap: nowrap; }
  .lofos-header .wp-block-search { width: 100px; }
}
@media (min-width: 1500px) {
  .lofos-header .wp-block-navigation { font-size: 1.15rem; }
  .lofos-header .wp-block-navigation .wp-block-navigation__container { gap: 1.25rem; }
  .lofos-header .wp-block-search { width: 120px; }
}

/* Mobile menu overlay in paper colours. */
.wp-block-navigation__responsive-container.has-modal-open { background: var(--wp--preset--color--paper); }
.wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content { font-size: 1.4rem; }
.wp-block-navigation__submenu-container { background: var(--wp--preset--color--paper) !important; border: 2px solid var(--wp--preset--color--ink) !important; border-radius: 0; }

/* ==========================================================================
   Hero — paper, the turtle, two pinned cards, the title. Leaves drift behind.
   ========================================================================== */
.lofos-hero { position: relative; overflow: hidden; }
.lofos-hero .lofos-hero__inner { position: relative; z-index: 2; align-items: center; }
.lofos-hero__title { font-size: clamp(2.4rem, 5.2vw, 4.4rem); line-height: .95; max-width: 16ch; }
.lofos-hero__tagline { font-size: 1.3rem; line-height: 1.45; max-width: 44ch; }
.lofos-hero__cards { align-items: flex-start; }

/* The turtle: untouched drawing, tilts a little toward the mouse (lofos.js sets --rx/--ry). */
.lofos-hero__turtle { perspective: 900px; }
.lofos-hero__turtle img {
  max-width: min(100%, 480px);
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; will-change: transform;
  transition: transform .15s ease-out;
}

/* Leaves: absolutely positioned SVGs, each falling and spinning on its own timing. */
.lofos-leaves { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.lofos-leaf {
  position: absolute; top: -40px; left: var(--x); width: var(--size); height: var(--size); opacity: 0;
  animation: lofos-leaf-fall var(--dur) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes lofos-leaf-fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  8%   { opacity: .85; }
  50%  { transform: translate3d(calc(var(--drift) * .6), 55vh, 0) rotate(calc(var(--spin) * .5)); }
  92%  { opacity: .7; }
  100% { transform: translate3d(var(--drift), 110vh, 0) rotate(var(--spin)); opacity: 0; }
}

/* Page-load moment: things settle into place once (needs .is-ready from lofos.js). */
@media (prefers-reduced-motion: no-preference) {
  .lofos-hero .lofos-hero__title, .lofos-hero .lofos-hero__tagline { opacity: 0; transform: translateY(18px); transition: opacity .7s ease .3s, transform .7s cubic-bezier(.2, .8, .2, 1) .3s; }
  .lofos-hero .lofos-hero__tagline { transition-delay: .45s; }
  .lofos-hero .lofos-hero__turtle figure { opacity: 0; transform: translateY(-24px) scale(.96); transition: opacity .8s ease .1s, transform .9s cubic-bezier(.2, .8, .2, 1) .1s; }
  .lofos-hero .lofos-note { opacity: 0; transform: rotate(-7deg) translateY(-14px); transition: opacity .5s ease .2s, transform .6s cubic-bezier(.2, 1.2, .3, 1) .2s; }
  .lofos-hero .lofos-cal { opacity: 0; transform: rotate(5deg) translateY(-14px); transition: opacity .5s ease .35s, transform .6s cubic-bezier(.2, 1.2, .3, 1) .35s; }
  .lofos-hero.is-ready :is(.lofos-hero__title, .lofos-hero__tagline, .lofos-hero__turtle figure) { opacity: 1; transform: none; }
  .lofos-hero.is-ready .lofos-note { opacity: 1; transform: rotate(-1.2deg); }
  .lofos-hero.is-ready .lofos-cal { opacity: 1; transform: rotate(1deg); }
}

/* The pinned note: a slightly rotated card with a strip of tape. */
.lofos-note {
  position: relative;
  background: var(--lofos-card);
  border: 2px solid var(--wp--preset--color--ink);
  padding: 1.5rem 1.6rem 1.4rem;
  transform: rotate(-1.2deg);
  max-width: 19rem; flex: 1 1 15rem;
  color: var(--wp--preset--color--ink);
  box-shadow: 4px 5px 0 var(--wp--preset--color--ink);
}
.lofos-note :is(h2, h3) { color: var(--wp--preset--color--ink); }
.lofos-note::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 24px;
  background: rgba(200, 50, 30, .18); border: 1px dashed rgba(200, 50, 30, .35);
  transform: translateX(-50%) rotate(2deg);
}
.lofos-note :is(h2, h3) { margin-top: 0; }
.lofos-note p { margin: .35rem 0 0; }
.lofos-note .lofos-note__when {
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.45rem; line-height: 1.05;
  color: var(--wp--preset--color--marker);
}

/* The calendar leaf: "Επόμενη διοργάνωση". Big day number torn off a wall calendar. */
.lofos-cal {
  position: relative; background: var(--lofos-card); border: 2px solid var(--wp--preset--color--ink);
  padding: 1.1rem 1.2rem 1rem; max-width: 22rem; flex: 1 1 17rem; transform: rotate(1deg);
  box-shadow: 4px 5px 0 var(--wp--preset--color--ink);
}
.lofos-cal::before {
  content: ""; position: absolute; top: -12px; left: 50%; width: 110px; height: 24px;
  background: rgba(59, 122, 62, .25); border: 1px dashed rgba(59, 122, 62, .5); transform: translateX(-50%) rotate(-2deg);
}
.lofos-cal__label { font-size: 1.3rem; margin: 0 0 .6rem; padding-bottom: .4rem; border-bottom: 2px dotted var(--wp--preset--color--paper-dark); }
.lofos-cal__leaf { align-items: flex-start; margin-bottom: .6rem; }
.lofos-cal__date {
  flex: 0 0 5.2rem; text-align: center; background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper);
  padding: .35rem .3rem .45rem; border-radius: 3px 3px 8px 8px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.25);
}
.lofos-cal__date p { margin: 0; color: inherit; }
.lofos-cal__weekday { font-family: var(--wp--preset--font-family--display); font-size: .85rem; font-weight: 500; opacity: .85; }
.lofos-cal__day { font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--wp--preset--color--leaf) !important; }
.lofos-cal__month { font-family: var(--wp--preset--font-family--display); font-size: .85rem; font-weight: 500; }
.lofos-cal__body .wp-block-post-title { font-size: 1.15rem; line-height: 1.15; margin: 0; }
.lofos-cal__body .wp-block-post-title a { text-decoration: none; }
.lofos-cal__body .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--wp--preset--color--leaf); text-decoration-thickness: 3px; }
.lofos-cal__body .wp-block-post-excerpt { font-size: .95rem; line-height: 1.35; }
.lofos-cal__body .wp-block-post-excerpt__more-text, .lofos-cal__body .wp-block-post-excerpt__more-link { display: none; }
.lofos-cal__empty { font-size: .95rem; color: var(--wp--preset--color--rock); font-style: italic; margin: 0; }
.lofos-cal__all { margin: .6rem 0 0; font-family: var(--wp--preset--font-family--display); font-size: 1rem; }
.lofos-cal__all a { text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--leaf); }

/* Poster strip on the home page: horizontal snap scrolling, drag or wheel sideways. */
.lofos-strip__track {
  display: flex; gap: 1.4rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 1.2rem max(1rem, calc((100vw - var(--wp--style--global--wide-size)) / 2 - 8px)) 1.4rem; scroll-padding-inline: max(1rem, calc((100vw - var(--wp--style--global--wide-size)) / 2 - 8px));
  scrollbar-width: thin; scrollbar-color: var(--wp--preset--color--forest) transparent; cursor: grab; max-width: none !important;
}
.lofos-strip__track:active { cursor: grabbing; }
.lofos-strip__item {
  flex: 0 0 auto; width: clamp(150px, 18vw, 230px); scroll-snap-align: start; background: var(--lofos-card); border: 2px solid var(--wp--preset--color--ink);
  padding: .3rem; box-shadow: 3px 4px 0 var(--wp--preset--color--ink); transform: rotate(var(--tilt, 0deg));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.lofos-strip__item:nth-child(odd) { --tilt: -1.5deg; }
.lofos-strip__item:nth-child(even) { --tilt: 1.2deg; }
.lofos-strip__item:nth-child(3n) { --tilt: 2deg; }
.lofos-strip__item:hover { transform: rotate(0) translateY(-6px); box-shadow: 8px 12px 0 var(--wp--preset--color--forest); }
.lofos-strip__item img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; background: var(--wp--preset--color--paper-dark); }

/* ==========================================================================
   Post cards (Query Loop)
   ========================================================================== */
.lofos-cards .wp-block-post-template { row-gap: 2.2rem; }
.lofos-cards .wp-block-post {
  position: relative;
  background: var(--lofos-card);
  border: 2px solid var(--wp--preset--color--ink);
  padding: .6rem .9rem 1.1rem;
  box-shadow: 3px 4px 0 var(--wp--preset--color--ink);
  transform: rotate(var(--tilt, 0deg));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.lofos-cards .wp-block-post:nth-child(3n+1) { --tilt: -.7deg; }
.lofos-cards .wp-block-post:nth-child(3n+2) { --tilt: .5deg; }
.lofos-cards .wp-block-post:nth-child(3n) { --tilt: -.3deg; }
.lofos-cards .wp-block-post:nth-child(5n) { --tilt: .8deg; }
/* The pin. */
.lofos-cards .wp-block-post::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 16px; height: 16px; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 35% 35%, #e8664e, var(--wp--preset--color--marker) 60%, #7a1d10);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .4); transform: translateX(-50%);
}
.lofos-cards .wp-block-post:hover, .lofos-cards .wp-block-post:focus-within {
  transform: rotate(0deg) translateY(-6px) scale(1.015);
  box-shadow: 8px 12px 0 var(--wp--preset--color--forest);
  z-index: 3;
}
.lofos-cards .wp-block-post-featured-image img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; background: var(--wp--preset--color--paper-dark); }
.lofos-cards .wp-block-post-featured-image { margin: -.6rem -.9rem .75rem; border-bottom: 2px solid var(--wp--preset--color--ink); }
.lofos-cards .wp-block-post-title { font-size: 1.55rem; margin: .25rem 0 .4rem; }
.lofos-cards .wp-block-post-title a { text-decoration: none; }
.lofos-cards .wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .12em; text-decoration-color: var(--wp--preset--color--leaf); }
/* Whole card is clickable via the title link; the stamps stay clickable on top. */
.lofos-cards .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.lofos-cards .lofos-meta { position: relative; z-index: 1; }
.lofos-cards .wp-block-post-excerpt { margin-top: .25rem; }
.lofos-cards .wp-block-post-excerpt__more-text { display: none; }
.lofos-cards .wp-block-post-excerpt__more-link { display: none; }

/* Meta row: date left, categories right. */
.lofos-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; align-items: baseline; }
.lofos-meta .wp-block-post-terms a { text-decoration: none; }
.lofos-meta .wp-block-post-terms a:hover { text-decoration: underline; }

/* Category stamps: outlined labels, red only for the police category. */
.taxonomy-category a {
  display: inline-block; border: 1.5px solid currentColor; padding: 0 .4em; line-height: 1.45;
  text-decoration: none; color: var(--wp--preset--color--forest);
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.taxonomy-category a:hover { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper) !important; transform: rotate(-2deg) scale(1.05); text-decoration: none; }
.taxonomy-category a[href*="%ce%b1%cf%83%cf%84%cf%85%ce%bd%ce%bf%ce%bc%ce%bf%ce%ba%cf%81%ce%b1%cf%84%ce%af%ce%b1"]:hover { background: var(--wp--preset--color--marker); }
.taxonomy-category .wp-block-post-terms__separator { display: none; }
.taxonomy-category a[href*="%ce%b1%cf%83%cf%84%cf%85%ce%bd%ce%bf%ce%bc%ce%bf%ce%ba%cf%81%ce%b1%cf%84%ce%af%ce%b1"] { color: var(--wp--preset--color--marker); }

/* Event date stamp. */
.lofos-event-date {
  display: inline-block;
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.05rem; line-height: 1.1;
  color: var(--wp--preset--color--marker); margin: 0 0 .5rem; padding: .2em .5em;
  border: 2px double var(--wp--preset--color--marker); transform: rotate(-2deg);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 -.2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.lofos-event-date:empty { display: none; }

/* First post on the home page gets the poster treatment. */
.lofos-featured .wp-block-post { border-top: 0; padding-top: 0; }
.lofos-featured .wp-block-post-title { font-size: clamp(2rem, 4vw, 3rem); }
.lofos-featured .wp-block-post-featured-image img { aspect-ratio: auto; max-height: 34rem; width: auto; max-width: 100%; object-fit: contain; }

/* ==========================================================================
   Single post
   ========================================================================== */
.lofos-single__title { max-width: 22ch; }
.lofos-single .wp-block-post-featured-image { margin-top: 1.5rem; }
.lofos-single .wp-block-post-content > * + * { margin-block-start: 1.25rem; }
.lofos-single .wp-block-post-content :is(h2, h3, h4) { margin-block-start: 2.2rem; }
.lofos-single .wp-block-post-content img { max-width: 100%; }
/* Old classic posts: align classes and captions from the previous site. */
.lofos-single .wp-block-post-content .aligncenter { display: block; margin-inline: auto; }
.lofos-single .wp-block-post-content .alignleft { float: left; margin: .3rem 1.25rem .75rem 0; max-width: 50%; }
.lofos-single .wp-block-post-content .alignright { float: right; margin: .3rem 0 .75rem 1.25rem; max-width: 50%; }
.lofos-single .wp-block-post-content .wp-caption { max-width: 100%; }
.lofos-single .wp-block-post-content .wp-caption-text,
.lofos-single .wp-block-post-content figcaption { font-size: var(--wp--preset--font-size--small); font-style: italic; color: var(--wp--preset--color--rock); margin-top: .35rem; }
.lofos-single .wp-block-post-content iframe, .lofos-single .wp-block-post-content video { max-width: 100%; }
.lofos-single .wp-block-post-content :is(video, .wp-video) { width: 100% !important; }
.lofos-single .wp-block-post-content a[href$=".pdf"]::after { content: " (PDF)"; font-size: .85em; color: var(--wp--preset--color--rock); }

/* Prev / next as two poster stubs. */
.lofos-pager { border-top: 2px solid var(--wp--preset--color--ink); padding-top: 1rem; }
.lofos-pager .wp-block-post-navigation-link { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.1rem; }
.lofos-pager .post-navigation-link-next { text-align: right; }
.lofos-pager .wp-block-post-navigation-link a { text-decoration: none; }
.lofos-pager .wp-block-post-navigation-link a:hover { text-decoration: underline; }

/* Share row. */
.lofos-share { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-family: var(--wp--preset--font-family--display); font-size: 1rem; }
.lofos-share a { text-decoration: none; border-bottom: 1.5px solid currentColor; }

/* ==========================================================================
   Archive headers, timeline, events, gallery
   ========================================================================== */
.lofos-archive-title { max-width: 24ch; }
.lofos-archive-title .wp-block-query-title { font-size: clamp(2rem, 4vw, 3rem); }

.lofos-single .wp-block-post-content.alignwide > * { margin-left: 0; }
.lofos-years {
  position: sticky; top: 0; z-index: 5; max-width: var(--wp--style--global--wide-size) !important; display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none;
  padding: .6rem 0; margin-top: 1.5rem; background: var(--wp--preset--color--paper); border-bottom: 2px solid var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: 1.1rem;
}
.lofos-years::-webkit-scrollbar { display: none; }
.lofos-years__link { flex: 0 0 auto; padding: .15em .7em; border: 2px solid transparent; text-decoration: none; color: var(--wp--preset--color--ink); transition: background-color .2s, color .2s, transform .2s; }
.lofos-years__link:hover { border-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--ink); }
.lofos-years__link.is-active { background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper); transform: rotate(-2deg); }
.lofos-timeline { position: relative; }
.lofos-timeline .wp-block-post-template .wp-block-post { padding-left: 1.6rem; }
.lofos-timeline::before { content: ""; position: absolute; left: .45rem; top: 0; bottom: 0; width: 3px; background: var(--wp--preset--color--moss); }
.lofos-timeline .wp-block-post::before { content: ""; position: absolute; left: calc(.45rem - 7px); top: 1.1rem; width: 17px; height: 17px; box-sizing: border-box; border-radius: 50%; background: var(--wp--preset--color--paper); border: 3px solid var(--wp--preset--color--moss); transition: background-color .2s, transform .2s; }
.lofos-timeline .wp-block-post:hover::before { background: var(--wp--preset--color--leaf); transform: scale(1.3); }
.lofos-timeline__year { position: sticky; top: 3.4rem; background: var(--wp--preset--color--paper); z-index: 1; padding: .5rem 0; border-bottom: 2px solid var(--wp--preset--color--ink); }
.lofos-timeline__year h2 { font-size: clamp(2.5rem, 6vw, 4rem); margin: 0; }
.lofos-timeline .wp-block-post { position: relative; display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--wp--preset--color--paper-dark); }
.lofos-timeline .wp-block-post-date { margin: .15rem 0 0; }
.lofos-timeline .wp-block-post-title { font-size: 1.25rem; margin: 0; }
.lofos-timeline .wp-block-post-title a { text-decoration: none; }
.lofos-timeline .wp-block-post-title a:hover { text-decoration: underline; }
.lofos-timeline .wp-block-query-no-results { color: var(--wp--preset--color--rock); font-style: italic; }
@media (max-width: 600px) { .lofos-timeline .wp-block-post { grid-template-columns: 1fr; gap: .1rem; } }

.lofos-events .wp-block-post { border-top: 2px solid var(--wp--preset--color--ink); padding-top: .75rem; }
.lofos-events .wp-block-post-title { font-size: 1.4rem; margin: 0 0 .25rem; }
.lofos-events .wp-block-post-title a { text-decoration: none; }
.lofos-events .wp-block-post-title a:hover { text-decoration: underline; }

.lofos-gallery .wp-block-gallery { --wp--style--gallery-gap-default: 1.2rem; padding-top: .5rem; }
.lofos-gallery .wp-block-image {
  position: relative; border: 2px solid var(--wp--preset--color--ink); background: var(--lofos-card); padding: .35rem;
  box-shadow: 3px 4px 0 var(--wp--preset--color--ink); transform: rotate(var(--tilt, 0deg));
  transition: transform .25s cubic-bezier(.2, .8, .2, 1), box-shadow .25s ease;
}
.lofos-gallery .wp-block-image:nth-child(4n+1) { --tilt: -1.4deg; }
.lofos-gallery .wp-block-image:nth-child(4n+2) { --tilt: 1deg; }
.lofos-gallery .wp-block-image:nth-child(4n+3) { --tilt: -.6deg; }
.lofos-gallery .wp-block-image:nth-child(4n) { --tilt: 1.6deg; }
.lofos-gallery .wp-block-image:nth-child(7n) { --tilt: -2deg; }
.lofos-gallery .wp-block-image::before,
.lofos-gallery .wp-block-image::after {
  content: ""; position: absolute; top: -8px; width: 54px; height: 18px; z-index: 2;
  background: rgba(200, 50, 30, .22); border: 1px dashed rgba(200, 50, 30, .4);
}
.lofos-gallery .wp-block-image::before { left: -14px; transform: rotate(-40deg); }
.lofos-gallery .wp-block-image::after { right: -14px; transform: rotate(40deg); }
.lofos-gallery .wp-block-image:hover { transform: rotate(0) translateY(-6px) scale(1.03); box-shadow: 8px 12px 0 var(--wp--preset--color--forest); z-index: 3; }
.lofos-gallery .wp-block-image img { display: block; background: var(--wp--preset--color--paper-dark); }
.lofos-gallery .wp-block-image a { display: block; cursor: zoom-in; }
.pswp { --pswp-bg: var(--wp--preset--color--forest-deep); }
.pswp__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: .6rem 1rem; text-align: center; color: var(--wp--preset--color--paper); font-family: var(--wp--preset--font-family--display); font-size: 1.05rem; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* Category index on the home page: a plain flow of stamps. */
.lofos-catlist ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lofos-catlist li a {
  display: inline-block; border: 1.5px solid var(--wp--preset--color--ink); padding: .15em .55em; text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.05rem; color: var(--wp--preset--color--ink);
}
.lofos-catlist li a:hover { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }

/* ==========================================================================
   Footer
   ========================================================================== */
.lofos-footer {
  position: relative; margin-top: 4rem !important; padding-top: calc(var(--wp--preset--spacing--40) + 3rem) !important;
  background: var(--wp--preset--color--forest-deep); color: var(--wp--preset--color--paper-dark);
}
.lofos-footer__edge { max-width: none !important; position: absolute; top: -1px; left: 0; width: 100%; height: 3.5rem; fill: var(--wp--preset--color--paper); }
.lofos-footer :is(h2, h3) { color: var(--wp--preset--color--paper); }
.lofos-footer a { color: var(--wp--preset--color--leaf); }
.lofos-footer a:hover { color: var(--wp--preset--color--paper); }
.lofos-footer p { margin: 0; }
.lofos-footer .wp-block-social-links .wp-social-link { border: 1.5px solid var(--wp--preset--color--paper-dark); transition: transform .15s ease; }
.lofos-footer .wp-block-social-links .wp-social-link:hover { transform: rotate(-8deg) scale(1.1); border-color: var(--wp--preset--color--leaf); }
.lofos-footer .wp-block-social-links .wp-social-link svg { fill: var(--wp--preset--color--paper); }
.lofos-footer__small { font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--rock); }

/* Pagination. */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--display); font-size: 1.1rem; }
.wp-block-query-pagination a { text-decoration: none; border-bottom: 2px solid currentColor; }
.wp-block-query-pagination .page-numbers.current { color: var(--wp--preset--color--marker); }

/* Search form (archive/404). */
.wp-block-search__input { border: 2px solid var(--wp--preset--color--ink); border-radius: 0; background: var(--lofos-card); }
.wp-block-search__button { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); border: 0; font-family: var(--wp--preset--font-family--display); font-weight: 800; }

/* "General" is the old default category; it carries no information, so hide its stamp. */
.taxonomy-category a[href$="/category/general/"] { display: none; }

/* Hand-drawn marks (Rough.js draws an SVG over the element). */
[data-rough] { position: relative; display: inline; }
.lofos-rough { position: absolute; pointer-events: none; overflow: visible; z-index: -1; }
.lofos-rough--circle path { fill: none; }
.lofos-hero [data-rough] .lofos-rough { z-index: 0; }
h2.wp-block-heading.alignwide, .lofos-single__title { position: relative; z-index: 0; }

/* Back to top: a small turtle appears bottom-right after a long scroll. */
.lofos-totop {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 50; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .4rem .5rem .3rem; background: var(--lofos-card); border: 2px solid var(--wp--preset--color--ink); box-shadow: 3px 4px 0 var(--wp--preset--color--ink);
  text-decoration: none; color: var(--wp--preset--color--ink); font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .8rem; line-height: 1;
  opacity: 0; transform: translateY(20px) rotate(4deg); pointer-events: none; transition: opacity .3s ease, transform .3s cubic-bezier(.2, .8, .2, 1);
}
.lofos-totop img { width: 40px; height: auto; }
.lofos-totop.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.lofos-totop:hover { transform: translateY(-4px) rotate(-4deg); box-shadow: 5px 7px 0 var(--wp--preset--color--forest); }

/* 404: the turtle wobbles when you hover it. */
@keyframes lofos-wobble { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
main .wp-block-image:hover img[src*="turtle-small"] { animation: lofos-wobble .6s ease; }

/* Pages cross-fade into each other in browsers that support view transitions. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ==========================================================================
   Map (Leaflet) — Χάρτης του Λόφου
   ========================================================================== */
.lofos-map__canvas { height: min(70vh, 640px); border: 2px solid var(--wp--preset--color--ink); box-shadow: 4px 5px 0 var(--wp--preset--color--ink); background: var(--wp--preset--color--paper-dark); max-width: none !important; }
.lofos-map__canvas--small { height: 320px; margin: 2rem auto 0; max-width: var(--wp--style--global--wide-size) !important; }
.leaflet-container { font-family: var(--wp--preset--font-family--body); }
.leaflet-bar { border: 2px solid var(--wp--preset--color--ink) !important; border-radius: 0 !important; box-shadow: 2px 3px 0 var(--wp--preset--color--ink) !important; }
.leaflet-bar a { border-radius: 0 !important; color: var(--wp--preset--color--ink) !important; background: var(--lofos-card) !important; font-family: var(--wp--preset--font-family--display); font-weight: 800; }
.leaflet-control-attribution { font-size: .65rem; background: rgba(238, 234, 223, .8) !important; }
.lofos-map__legend { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: .9rem; font-family: var(--wp--preset--font-family--display); font-size: 1rem; }
.lofos-map__legend > span { display: inline-flex; align-items: center; gap: .4rem; }
.lofos-map__error { padding: 2rem; text-align: center; color: var(--wp--preset--color--marker); }

/* Pins: a round red head like the card pins, colour by kind, label shown on hover. */
.lofos-pin { --pin: var(--wp--preset--color--marker); background: none; border: 0; }
.lofos-pin__head {
  display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--lofos-card); box-sizing: border-box;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pin), white 45%), var(--pin) 60%, color-mix(in srgb, var(--pin), black 40%));
  box-shadow: 0 2px 4px rgba(0, 0, 0, .45); transition: transform .15s ease;
}
.lofos-pin:hover .lofos-pin__head { transform: scale(1.3); }
.lofos-pin__label {
  position: absolute; left: 26px; top: 0; white-space: nowrap; padding: .05em .45em; background: var(--lofos-card); border: 1.5px solid var(--wp--preset--color--ink);
  font-family: var(--wp--preset--font-family--display); font-weight: 800; font-size: .95rem; color: var(--wp--preset--color--ink); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; pointer-events: none;
}
.lofos-pin:hover .lofos-pin__label { opacity: 1; transform: none; }
.lofos-pin--topos { --pin: var(--wp--preset--color--marker); }
.lofos-pin--drasi { --pin: #D98A1E; }
.lofos-pin--fysi { --pin: var(--wp--preset--color--moss); }
.lofos-pin--astynomia { --pin: #2B3A8C; }
.lofos-pin--synelefsi { --pin: var(--wp--preset--color--leaf); }
.lofos-map__legend .lofos-pin__head, .lofos-map__list .lofos-pin__head { width: 14px; height: 14px; }
.lofos-map__list { list-style: none; padding: 0; margin: 0; columns: 1; }
.lofos-map__list li { border-bottom: 1px solid var(--wp--preset--color--paper-dark); }
.lofos-map__list a { display: flex; align-items: center; gap: .6rem; padding: .5rem 0; text-decoration: none; font-family: var(--wp--preset--font-family--display); font-size: 1.15rem; font-weight: 500; color: var(--wp--preset--color--ink); }
.lofos-map__list a:hover { color: var(--wp--preset--color--forest); padding-left: .3rem; transition: padding .15s; }

/* Popups as small pinned notes. */
.leaflet-popup-content-wrapper { border-radius: 0 !important; border: 2px solid var(--wp--preset--color--ink); box-shadow: 4px 5px 0 var(--wp--preset--color--ink) !important; background: var(--lofos-card) !important; color: var(--wp--preset--color--ink) !important; }
.leaflet-popup-tip { background: var(--lofos-card) !important; border: 2px solid var(--wp--preset--color--ink); border-top: 0; border-left: 0; }
.leaflet-popup-content { margin: 0 !important; width: 280px !important; }
.lofos-popup img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-bottom: 2px solid var(--wp--preset--color--ink); }
.lofos-popup__kind { display: inline-block; margin: .6rem .9rem 0; font-family: var(--wp--preset--font-family--display); font-size: .8rem; border: 1.5px solid currentColor; padding: 0 .4em; color: var(--wp--preset--color--forest); }
.lofos-popup h3 { margin: .3rem .9rem .2rem; font-size: 1.25rem; line-height: 1.1; }
.lofos-popup h3 a { text-decoration: none; color: var(--wp--preset--color--ink); }
.lofos-popup__text { margin: 0 .9rem; font-size: .95rem; line-height: 1.4; }
.lofos-popup__text p { margin: 0; }
.leaflet-container a { color: var(--wp--preset--color--forest); }
.lofos-popup__links { margin: .5rem .9rem .8rem; font-family: var(--wp--preset--font-family--display); font-size: .95rem; }
.leaflet-container a.leaflet-popup-close-button { color: var(--wp--preset--color--ink) !important; font-size: 22px; top: 2px; right: 4px; }
.lofos-place__back { font-family: var(--wp--preset--font-family--display); }
.lofos-place__back a { text-decoration: none; }

/* Sketches: ink drawing, the photo appears on hover. */
.lofos-sketch { position: relative; margin: 0 0 1.4rem; background: var(--lofos-card); border: 2px solid var(--wp--preset--color--ink); padding: .4rem .4rem 0; box-shadow: 4px 5px 0 var(--wp--preset--color--ink); transform: rotate(var(--tilt, 0)); transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
.lofos-sketch:hover { transform: rotate(0) translateY(-4px); }
.lofos-sketch img { display: block; width: 100%; height: auto; }
.lofos-sketch__photo { position: absolute; top: .4rem; left: .4rem; width: calc(100% - .8rem) !important; height: auto; opacity: 0; transition: opacity .5s ease; }
.lofos-sketch:hover .lofos-sketch__photo, .lofos-sketch:focus-within .lofos-sketch__photo { opacity: 1; }
.lofos-sketch figcaption { padding: .5rem .3rem .6rem; font-family: var(--wp--preset--font-family--display); font-size: 1rem; color: var(--wp--preset--color--rock); }
.lofos-sketches__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
@media (max-width: 600px) { .lofos-sketches__row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Dark mode — "νύχτα στον Λόφο". Tokens swapped on html[data-theme="dark"].
   ========================================================================== */
.lofos-theme-toggle { background: none; border: 2px solid transparent; padding: .3rem; cursor: pointer; color: var(--wp--preset--color--ink); line-height: 0; border-radius: 50%; transition: transform .2s, border-color .2s; }
.lofos-theme-toggle:hover { border-color: var(--wp--preset--color--ink); transform: rotate(-15deg); }
.lofos-theme-toggle__sun { display: none; }
html[data-theme="dark"] .lofos-theme-toggle__sun { display: inline; }
html[data-theme="dark"] .lofos-theme-toggle__moon { display: none; }
html[data-theme="dark"] body {
  --wp--preset--color--paper: #121A14;
  --wp--preset--color--paper-dark: #1D2A20;
  --wp--preset--color--ink: #ECE7D8;
  --wp--preset--color--forest: #8FC46A;
  --wp--preset--color--forest-deep: #0B130D;
  --wp--preset--color--moss: #6FAF5F;
  --wp--preset--color--leaf: #C6EA7A;
  --wp--preset--color--pine: #9DB88A;
  --wp--preset--color--rock: #A6AB9A;
  --wp--preset--color--marker: #FF7A5C;
  --lofos-card: #1A241C;
  color-scheme: dark;
}
html[data-theme="dark"] body { background-image: none; }
html[data-theme="dark"] .lofos-note::before, html[data-theme="dark"] .lofos-gallery .wp-block-image::before, html[data-theme="dark"] .lofos-gallery .wp-block-image::after { background: rgba(255, 122, 92, .3); }
html[data-theme="dark"] .lofos-footer { background: #0B130D; color: var(--wp--preset--color--rock); }
html[data-theme="dark"] .lofos-footer__edge { fill: var(--wp--preset--color--paper); }
html[data-theme="dark"] .lofos-hero__turtle img, html[data-theme="dark"] .lofos-header__turtle img, html[data-theme="dark"] .lofos-totop img, html[data-theme="dark"] main .wp-block-image img[src*="turtle-small"] { filter: invert(1) hue-rotate(180deg) brightness(1.05); }
html[data-theme="dark"] .lofos-sketch__ink { filter: invert(1) hue-rotate(180deg) brightness(.95); }
html[data-theme="dark"] .wp-block-search__input, html[data-theme="dark"] .lofos-header .wp-block-search__input { background: var(--lofos-card); color: var(--wp--preset--color--ink); }
html[data-theme="dark"] .wp-element-button, html[data-theme="dark"] .wp-block-button__link { background: var(--wp--preset--color--forest); color: #0B130D; }
html[data-theme="dark"] .lofos-cal__date { background: var(--wp--preset--color--forest); color: #0B130D; }
html[data-theme="dark"] .lofos-cal__day { color: #0B130D !important; }
html[data-theme="dark"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.8) contrast(.9) saturate(.6); }
html[data-theme="dark"] .leaflet-control-attribution { background: rgba(18, 26, 20, .8) !important; color: var(--wp--preset--color--rock); }
html[data-theme="dark"] .lofos-header .wp-block-navigation .wp-block-navigation-item__content::after { opacity: .35; }
html[data-theme="dark"] ::selection { background: var(--wp--preset--color--leaf); color: #0B130D; }
html[data-theme="dark"] img:not(.lofos-sketch__ink):not([src*="turtle"]) { filter: brightness(.9); }
html { transition: background-color .3s ease; }
body { transition: background-color .3s ease, color .3s ease; }
html[data-theme="dark"] { background: #121A14; }

/* Editor: match the front. */
.editor-styles-wrapper { background-color: var(--wp--preset--color--paper); }

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

/* Buttons: a hard shadow that presses down on hover. */
.wp-element-button, .wp-block-button__link { box-shadow: 3px 4px 0 var(--wp--preset--color--ink); transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.wp-element-button:hover, .wp-block-button__link:hover { transform: translate(2px, 3px); box-shadow: 1px 1px 0 var(--wp--preset--color--ink); }

/* Short pages: the footer still sits at the bottom of the window. */
.wp-site-blocks { min-height: 100vh; display: flex; flex-direction: column; }
.wp-site-blocks > main { flex: 1 0 auto; }
.wp-site-blocks > footer { margin-top: auto; }

/* ---------------------------------------------------------------------------
 * Παιχνίδι: the pixel game in a frame (patterns/game.php).
 * ------------------------------------------------------------------------- */
.lofos-game { margin-block: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40); }
.lofos-game__frame {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 3px solid var(--wp--preset--color--ink);
	box-shadow: 8px 8px 0 var(--wp--preset--color--forest);
	background: #000;
}
.lofos-game__open { margin-top: 1.2rem; font-family: var(--wp--preset--font-family--display, inherit); }
/* Phones: the game in the page would be a few cm wide. Show a big «play» button that opens it on its own instead. */
@media (hover: none) and (pointer: coarse) and (max-width: 950px) {
	.lofos-game__frame { display: none; }
	.lofos-game__open a {
		display: block; padding: 1rem 1.2rem; text-align: center; text-decoration: none;
		background: var(--wp--preset--color--forest); color: var(--wp--preset--color--paper, #EEEADF);
		border: 3px solid var(--wp--preset--color--ink); box-shadow: 6px 6px 0 var(--wp--preset--color--ink);
		font-size: 1.3rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
	}
}