/* Shared site-wide styles (injected into every page by build.js).
   Page-specific styles remain inline per page; this holds cross-cutting rules. */

/* Images carry width/height attributes (to reserve space and prevent layout
   shift). Without this, that height attribute locks the rendered height and
   stretches width-driven images vertically — height:auto lets them scale
   proportionally while the attribute ratio still reserves the space.
   Inline height (e.g. the position:absolute portrait fill) overrides this. */
img { height: auto; }

/* Anchor jumps (e.g. nav "Books" → #book, "Contact" → #contact) clear the sticky
   header and leave breathing room, so the target heading lands balanced rather than
   tucked under the header. scroll-behavior:smooth is already set per page. */
html { scroll-padding-top: 84px; }

/* The book card's only link is its "READ" button — make its interactivity clear. */
.read-btn { transition: background .2s ease, color .2s ease; }
.read-btn:hover { background: #D23A2C !important; color: #F2E9D9 !important; }

/* Smooth all hover-state changes driven by the design's style-hover attributes
   (contact tiles, book-card border, CTAs). */
[data-dc-hov] { transition: background .25s ease, color .2s ease, border-color .25s ease, box-shadow .25s ease; }

/* Visually-hidden (screen-reader-only) helper — used for semantic <h1>s. */
.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* ============================================================
   Global header (shared across all pages) + mobile drawer
   ============================================================ */
.gnav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(22,19,14,.82);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid #2A2620;
  transition: background .3s ease, box-shadow .3s ease, -webkit-backdrop-filter .3s ease, backdrop-filter .3s ease, border-color .3s ease;
}
/* Frosted-glass effect once scrolled: more transparent + stronger blur/saturate. */
.gnav.scrolled {
  background: rgba(22,19,14,.62);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border-bottom-color: rgba(242,233,217,.08);
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
.gnav-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px; transition: padding .25s ease;
}
.gnav.scrolled .gnav-inner { padding-top: 12px; padding-bottom: 12px; }
.gnav-brand { display: flex; align-items: center; gap: 10px; white-space: nowrap; color: #F2E9D9; text-decoration: none; }
.gnav-brand svg { width: 28px; height: 28px; display: block; flex: 0 0 auto; overflow: visible; }
.gnav-wordmark { font: 800 18px/1 'Fira Sans', sans-serif; letter-spacing: .14em; color: #F2E9D9; transition: opacity .2s ease; }
.gnav-brand:hover .gnav-wordmark { opacity: .72; }
.gnav-menu { display: flex; gap: 26px; align-items: center; }
.gnav-link {
  position: relative; display: flex; flex-direction: column; gap: 4px; line-height: 1;
  color: #F2E9D9; text-decoration: none;
  font: 600 12px/1 'Fira Sans', sans-serif; letter-spacing: .06em;
}
.gnav-link span { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: #8E8675; transition: color .2s ease; }
.gnav-link::after {
  content: ""; position: absolute; left: 0; bottom: -6px; width: 0; height: 2px;
  background: #D23A2C; transition: width .22s cubic-bezier(.22,.8,.25,1);
}
.gnav-link:hover::after, .gnav-link[aria-current="page"]::after { width: 100%; }
.gnav-link:hover span, .gnav-link[aria-current="page"] span { color: #D23A2C; }
.gnav-cta {
  display: flex; flex-direction: column; gap: 3px; line-height: 1;
  color: #15130D; background: #FFE600; padding: 8px 14px; text-decoration: none;
  font: 600 12px/1 'Fira Sans', sans-serif; letter-spacing: .06em;
  transition: background .2s ease, color .2s ease;
}
.gnav-cta span { font-size: 8px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; opacity: .7; }
.gnav-cta:hover { background: #D23A2C; color: #F2E9D9; }
.gnav-toggle { display: none; }

@media (max-width: 720px) {
  .gnav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; background: none;
    border: 1px solid #2A2620; border-radius: 2px; cursor: pointer; z-index: 2;
  }
  .gnav-toggle span { display: block; width: 18px; height: 2px; margin: 0 auto; background: #F2E9D9; transition: transform .25s ease, opacity .2s ease; }
  .gnav.gnav-open .gnav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .gnav.gnav-open .gnav-toggle span:nth-child(2) { opacity: 0; }
  .gnav.gnav-open .gnav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .gnav-menu {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(82vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 26px;
    padding: 28px 34px; background: #15130D; border-left: 1px solid #2A2620;
    transform: translateX(100%); transition: transform .3s cubic-bezier(.22,.8,.25,1);
  }
  .gnav.gnav-open .gnav-menu { transform: translateX(0); box-shadow: -24px 0 70px rgba(0,0,0,.6); }
  .gnav-link { font-size: 21px; }
  .gnav-link span { font-size: 10px; }
  .gnav-link::after { bottom: -8px; }
  .gnav-cta { font-size: 16px; padding: 13px 18px; align-self: stretch; align-items: flex-start; }
}

/* ============================================================
   Buttons (hero CTAs)
   ============================================================ */
.btn-primary, .btn-outline {
  display: inline-flex; align-items: center; gap: 9px; text-decoration: none;
  font: 700 12px/1 'Fira Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn-primary { background: #FFE600; color: #15130D; padding: 14px 20px; }
.btn-primary:hover { background: #D23A2C; color: #F2E9D9; transform: translateY(-2px); }
.btn-outline { background: none; color: #F2E9D9; border: 1px solid #2A2620; padding: 13px 19px; }
.btn-outline:hover { border-color: #FFE600; color: #FFE600; }

/* ============================================================
   Physical book treatment (homepage hero cover)
   ============================================================ */
.book-3d {
  transform: perspective(1500px) rotateY(-7deg);
  transform-origin: left center;
  box-shadow: 22px 26px 54px rgba(0,0,0,.62), 3px 0 6px rgba(0,0,0,.4);
  transition: transform .6s cubic-bezier(.22,.8,.25,1), box-shadow .6s ease;
}
.book-3d:hover { transform: perspective(1500px) rotateY(0deg) translateY(-4px); box-shadow: 12px 32px 64px rgba(0,0,0,.6); }
@media (prefers-reduced-motion: reduce) { .book-3d { transform: none; } .book-3d:hover { transform: none; } }

/* Hero compass: pause animation when scrolled out of view; center it on mobile. */
.compass-paused * { animation-play-state: paused !important; }
@media (max-width: 720px) { .hero-compass { margin-left: auto; margin-right: auto; } }

/* Hover the seal → the needle gives a smooth swing. It uses the independent
   `rotate` property, which composes with the spin's `transform` instead of
   overriding it, so the rotation keeps running and only the offset transitions.
   (Unsupported browsers simply ignore it — the spin is unaffected.) */
.vg-needle { transition: rotate .8s cubic-bezier(.16,.84,.3,1), scale .45s cubic-bezier(.16,.84,.3,1); }
.hero-compass { cursor: pointer; }
.hero-compass:hover .vg-needle { rotate: 42deg; scale: 1.05; }
@media (prefers-reduced-motion: reduce) { .hero-compass:hover .vg-needle { rotate: 0deg; scale: 1; } }

/* ============================================================
   Yellow restraint — soften the back-to-top FAB to an outline
   ============================================================ */
a[href="#top"] {
  background: rgba(27,23,16,.92) !important; color: #F2E9D9 !important;
  border: 1px solid #2A2620;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: border-color .2s ease, color .2s ease;
}
a[href="#top"]:hover { border-color: #FFE600 !important; color: #FFE600 !important; }

/* ============================================================
   Reveal-on-scroll (global; site.js adds .pre then .in)
   ============================================================ */
.reveal { transition: opacity .8s cubic-bezier(.16,.84,.3,1), transform .8s cubic-bezier(.16,.84,.3,1); will-change: opacity, transform; }
.reveal.pre { opacity: 0; transform: translateY(16px); }
.reveal.in { opacity: 1 !important; transform: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

/* Back-to-top FAB: hidden at the top of the page, fades in once scrolled. */
.to-top { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92); pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility .3s ease, border-color .2s ease, color .2s ease; }
.to-top.show { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: opacity .2s ease, visibility .2s ease; transform: none; } }

/* ============================================================
   Cross-page footer navigation (site map)
   ============================================================ */
.footer-nav {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px 26px;
  max-width: 1180px; margin: 0 auto; padding: 30px 28px;
  border-top: 1px solid #2A2620;
  font: 600 11px/1 'Fira Sans', sans-serif;
  letter-spacing: .14em; text-transform: uppercase;
}
.footer-nav a { color: #8E8675; text-decoration: none; transition: color .2s ease; }
.footer-nav a:hover { color: #FFE600; }
.footer-nav a[aria-current="page"] { color: #F2E9D9; }

/* Breadcrumbs (subpages). */
.crumbs {
  max-width: 1180px; margin: 0 auto; padding: 16px 28px 0;
  display: flex; gap: 9px; align-items: center;
  font: 600 11px/1 'Fira Sans', sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #8E8675;
}
.crumbs a { color: #8E8675; text-decoration: none; transition: color .2s ease; }
.crumbs a:hover { color: #FFE600; }
.crumbs span[aria-hidden] { opacity: .6; }

/* Archive post-body card (extracted from repeated inline styles to trim payload). */
.pb-card {
  margin: 0 0 26px; background: #1B1710; color: #F2E9D9;
  padding: clamp(22px,3vw,34px); border-radius: 2px; border: 1px solid #2A2620;
  font: 400 clamp(15px,1.55vw,17px)/1.65 'Alegreya', serif; overflow-wrap: break-word;
}

/* ============================================================
   Quotes page — filter chips + load-more
   ============================================================ */
.q-chip {
  font: 600 12px/1 'Fira Sans', sans-serif; letter-spacing: .04em;
  color: #F2E9D9; background: none; border: 1px solid #2A2620; border-radius: 2px;
  padding: 8px 12px; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.q-chip:hover { border-color: #D23A2C; }
.q-chip[aria-pressed="true"] { color: #15130D; background: #FFE600; border-color: #FFE600; }
.q-more-wrap { text-align: center; padding: 8px 0 12px; }

/* ============================================================
   Keyboard focus (#11) — brand ring instead of the default blue.
   Red on yellow-background elements so the ring stays visible.
   ============================================================ */
:focus-visible { outline: 2px solid #FFE600; outline-offset: 3px; }
.gnav-cta:focus-visible, .btn-primary:focus-visible, .read-btn:focus-visible,
.q-chip[aria-pressed="true"]:focus-visible { outline-color: #D23A2C; }

/* Skip-to-content (#16): visually hidden until focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #FFE600; color: #15130D; text-decoration: none;
  font: 600 13px/1 'Fira Sans', sans-serif; letter-spacing: .04em;
  padding: 12px 18px;
}
.skip-link:focus { left: 0; }

/* ============================================================
   Archive index rows (#6) — post links (date / title / →).
   Replaces the old accordion buttons; styles extracted to classes.
   ============================================================ */
.post { border-bottom: 1px solid #221F19; }
.arow {
  width: 100%; display: flex; align-items: baseline; gap: 22px;
  padding: 20px 0 6px; color: inherit; text-decoration: none;
}
.arow-date { flex: 0 0 auto; width: 70px; font: 500 12px/1.3 'Fira Sans', sans-serif; letter-spacing: .06em; color: #A39A88; padding-top: 6px; }
.arow-title { flex: 1; min-width: 0; font-weight: 600; font-size: clamp(17px,2vw,21px); line-height: 1.22; letter-spacing: -.01em; transition: color .2s ease; }
.arow-sign { flex: 0 0 auto; font: 400 18px/1 'Fira Sans', sans-serif; color: #b3471f; width: 18px; text-align: center; padding-top: 4px; transition: transform .2s ease, color .2s ease; }
.arow:hover .arow-title, .arow:focus-visible .arow-title { color: #FFE600; }
.arow:hover .arow-sign { color: #FFE600; transform: translateX(3px); }
.arow-x { margin: 0 0 20px; padding-left: 92px; font: 400 16px/1.5 'Alegreya', serif; opacity: .8; }
@media (max-width: 640px) {
  .arow { gap: 14px; }
  .arow-date { width: 54px; }
  .arow-x { padding-left: 0; }
}

/* Per-post pages (#6). */
.post-page { max-width: 860px; margin: 0 auto; padding: 26px 28px 60px; }
.pp-kicker { margin: 26px 0 0; font: 600 12px/1 'Fira Sans', sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #A39A88; }
.pp-kicker b { color: #D23A2C; font-weight: 600; }
.pp-title { margin: 10px 0 26px; font-weight: 800; font-size: clamp(26px,4vw,40px); line-height: 1.12; letter-spacing: -.015em; }
.pp-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 34px; }
.pp-nav a {
  color: #F2E9D9; text-decoration: none; border: 1px solid #2A2620; border-radius: 2px;
  padding: 11px 15px; font: 600 12px/1.35 'Fira Sans', sans-serif; letter-spacing: .03em;
  max-width: 46%; transition: border-color .2s ease, color .2s ease;
}
.pp-nav a:hover { border-color: #FFE600; color: #FFE600; }
.pp-nav a span { display: block; font: 500 9px/1 'Fira Sans', sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8E8675; margin-bottom: 5px; }
.pp-back { display: inline-block; margin-top: 18px; color: #A39A88; text-decoration: none; font: 600 12px/1 'Fira Sans', sans-serif; letter-spacing: .08em; text-transform: uppercase; transition: color .2s ease; }
.pp-back:hover { color: #FFE600; }

/* Footer copyright line under the footer nav. */
.footer-copy { max-width: 1180px; margin: 0 auto; padding: 0 28px 26px; text-align: center; font: 500 11px/1 'Fira Sans', sans-serif; letter-spacing: .1em; color: #8E8675; }

/* ============================================================
   Design pass — hierarchy, polish, modern touches
   ============================================================ */

/* (8) Cross-page view transitions: subtle crossfade on same-origin navigation.
   Progressive enhancement — browsers without support simply ignore it. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* (5) In-content text links — consistent treatment for body copy (bios, posts). */
main p a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(242,233,217,.38);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}
main p a:hover { color: #FFE600; text-decoration-color: #FFE600; }

/* (2) Hero "new book" pill — the hero's one call to action. */
.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px; padding: 9px 14px;
  font: 600 11px/1.4 'Fira Sans', sans-serif; letter-spacing: .09em; text-transform: uppercase;
  color: #FFE600; text-decoration: none;
  border: 1px solid rgba(255,230,0,.45); border-radius: 2px;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.hero-pill .hp-dot { width: 6px; height: 6px; border-radius: 50%; background: #D23A2C; flex: 0 0 auto; }
.hero-pill:hover { background: #FFE600; color: #15130D; border-color: #FFE600; }
.hero-pill:hover .hp-dot { background: #15130D; }

/* (3) Pre-footer contact strip (subpages + posts; home already ends on Επικοινωνία). */
.pre-footer {
  border-top: 1px solid #2A2620;
  max-width: 1180px; margin: 0 auto; padding: 44px 28px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px 26px;
  text-align: center;
}
.pre-footer a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 12px 18px; text-decoration: none; border: 1px solid #2A2620; border-radius: 2px;
  font: 700 12px/1 'Fira Sans', sans-serif; letter-spacing: .06em; text-transform: uppercase;
  color: #F2E9D9; transition: border-color .2s ease, color .2s ease;
}
.pre-footer a span[lang="en"] { font-size: 9px; letter-spacing: .16em; color: #8E8675; transition: color .2s ease; }
.pre-footer a:hover { border-color: #FFE600; color: #FFE600; }
.pre-footer a:hover span[lang="en"] { color: #FFE600; }

/* (6) Portrait treatment: warm grade + offset red edge tying photos to the palette. */
.portrait-frame { box-shadow: 14px 14px 0 -2px #D23A2C; }
.portrait-frame img { filter: saturate(.94) sepia(.07) contrast(1.02); }

/* (7) Contact-tile icons. */
.ct-lab { display: inline-flex; align-items: center; gap: 11px; min-width: 0; }
.ct-lab svg { width: 17px; height: 17px; flex: 0 0 auto; opacity: .85; }