/* ============================================================
   BLACKWAY · brand mark — single source of truth
   Renders the real client-supplied PNG (`blackway-logo.png`)
   as a background image on a `.bw-mark` span. The HTML markup
   stays:
       <span class="bw-mark bw-mark--sm">BLACKWAY</span>
   …so all 22 HTML files pick up the correct artwork without
   any per-file edits.

   The text inside the span stays in the DOM (read by screen
   readers + crawlers) but is visually hidden via text-indent.

   Aspect ratio of the source PNG:  2016 × 226  =  8.92 : 1
   ============================================================ */

.bw-mark{
  display:inline-block;
  background-image:url('blackway-logo.png');
  background-position:center;
  background-repeat:no-repeat;
  background-size:contain;
  aspect-ratio: 2016 / 226;
  vertical-align:middle;
  user-select:none;
  text-indent:101%;
  white-space:nowrap;
  overflow:hidden;
  max-width:100%;
}

/* Sizes — width-driven so aspect-ratio derives the height.
   This keeps the mark responsive: when the container is
   narrower than the configured width, max-width:100% kicks
   in and the height shrinks proportionally. */
.bw-mark--xs{ width:124px;            }   /* ≈ 14px tall */
.bw-mark--sm{ width:196px;            }   /* ≈ 22px tall — nav, intro, dock */
.bw-mark--md{ width:374px;            }   /* ≈ 42px tall — admin sidebar */
.bw-mark--lg{ width:min(856px,82vw);  }   /* ≈ 96px tall (cap) — footer */
.bw-mark--xl{ width:min(1600px,90vw); }   /* ≈ 180px tall (cap) — login splash */

/* Modifiers retained for backward compatibility.
   The PNG is static; --shimmer no longer animates a CSS
   gradient (the artwork itself is the brand mark). Kept
   as a no-op so existing class names don't 404. */
.bw-mark--shimmer{ /* no-op — real PNG is the source of truth */ }

/* Force pure white (slightly brighter) for backgrounds
   where the PNG's natural off-white reads too soft. */
.bw-mark--mono{ filter:brightness(1.08) contrast(1.02); }

/* Inline placement inside body copy. */
.bw-mark--inline{ display:inline-block; vertical-align:baseline; }

/* Visually hidden helper — screen-reader-only text where the
   .bw-mark sits next to copy that already says "BLACKWAY". */
.bw-mark__a11y{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Reduced motion: nothing animated to disable. */

/* ============================================================
   Language toggle — EN default, EL via [data-lang="el"]
   The Greek mirror of any string is wrapped in `.copy-el`,
   the English original gets `.copy-en`. Sibling elements
   (typically <span> or <p> with lang="en|el"). `display:revert`
   lets each element fall back to its native default — block
   for h1/h2/p/div, inline for span — so we don't have to
   override per-tag.
   ============================================================ */
.copy-el { display: none; }
html[data-lang="el"] .copy-en { display: none; }
html[data-lang="el"] .copy-el { display: revert; }

/* ============================================================
   SHARED NAV + MOBILE SIDEBAR + FAB  (subpages)
   Home (direction/index.html) keeps its own inline copy with the
   scroll-reveal hero behaviour. Subpages use `.nav--solid`.
   ============================================================ */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:20px 38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  transition:padding .4s var(--ease),background .4s var(--ease),backdrop-filter .4s var(--ease)}
.nav__brand{justify-self:start}
.nav__brand .bw-mark{width:180px;transition:width .4s var(--ease)}
.nav.scrolled,.nav--solid{padding:13px 38px;background:rgba(0,0,0,.72);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav.scrolled .nav__brand .bw-mark,.nav--solid .nav__brand .bw-mark{width:152px}
.nav__links{display:flex;gap:30px;list-style:none;justify-self:center}
.nav__links a{font-size:11px;letter-spacing:.32em;text-transform:uppercase;position:relative;padding:6px 0;font-weight:500;color:#fff;font-family:var(--variable);font-variation-settings:'wght' 500}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--silver-3);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1);transform-origin:left}
.nav__right{display:flex;align-items:center;gap:22px;justify-self:end}
.nav__lang{display:flex;gap:8px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--silver-1);font-weight:500;font-family:var(--variable)}
.nav__lang span{cursor:pointer;transition:color .2s}
.nav__lang span.active{color:var(--bone)}
.nav__lang span:hover{color:var(--bone)}
.nav__cta{font-size:11px;letter-spacing:.32em;text-transform:uppercase;border:1px solid var(--silver-1);padding:11px 24px;color:#fff;font-weight:500;font-family:var(--variable);transition:background .25s,color .25s,border-color .25s}
.nav__cta:hover{background:var(--bone);color:var(--black);border-color:var(--bone)}
.nav__toggle{display:none;width:44px;height:44px;background:transparent;border:none;cursor:pointer;position:relative;z-index:1002;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:0}
.nav__toggle span{display:block;width:24px;height:2px;background:var(--bone);transition:transform .35s var(--ease),opacity .25s var(--ease)}
.nav__lang--m{display:none}
@media(max-width:920px){
  .nav{display:flex;justify-content:space-between;align-items:center;position:relative;padding:14px 16px}
  .nav.scrolled,.nav--solid{padding:12px 16px}
  .nav__links,.nav__right{display:none!important}
  .nav__toggle{display:flex}
  .nav__brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);justify-self:auto}
  .nav__brand .bw-mark{width:132px}
  .nav.scrolled .nav__brand .bw-mark,.nav--solid .nav__brand .bw-mark{width:124px}
  .nav__lang--m{display:flex;gap:10px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--silver-1);font-family:var(--variable);font-variation-settings:'wght' 600}
  .nav__lang--m span{cursor:pointer}
  .nav__lang--m span.active{color:var(--bone)}
}
@media(max-width:380px){.nav__brand .bw-mark{width:114px}.nav__toggle{width:38px}}

.sidebar{position:fixed;top:0;left:0;bottom:0;z-index:1001;width:min(84vw,370px);
  background:rgba(7,7,7,.99);border-right:1px solid var(--line-strong);
  display:flex;flex-direction:column;padding:30px 30px 34px;
  transform:translateX(-100%);transition:transform .5s var(--ease);
  overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:30px 0 80px -30px rgba(0,0,0,.9)}
.sidebar.open{transform:translateX(0)}
.sidebar__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:34px}
.sidebar__head .bw-mark{width:150px}
.sidebar__close{background:transparent;border:none;color:var(--silver-2);font-size:30px;line-height:1;cursor:pointer;width:42px;height:42px}
.sidebar__close:hover{color:var(--bone)}
.sidebar__nav{display:flex;flex-direction:column}
.sidebar__nav a{padding:17px 0;border-bottom:1px solid var(--line);font-family:var(--variable);font-variation-settings:'wght' 500;font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--bone);transition:color .2s,padding-left .25s var(--ease)}
.sidebar__nav a:hover{color:#fff;padding-left:8px}
.sidebar__lang{display:flex;gap:16px;margin-top:24px;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--silver-1);font-family:var(--variable)}
.sidebar__lang span{cursor:pointer}.sidebar__lang span.active{color:var(--bone)}
.sidebar__book{margin-top:auto;padding-top:28px;display:flex;flex-direction:column;gap:10px}
.sidebar__book-lbl{font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--silver-1);font-family:var(--variable);font-variation-settings:'wght' 600;margin-bottom:4px}
.sidebar__book .btn{width:100%;justify-content:center;padding:15px 24px}
.sidebar__backdrop{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.45);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s var(--ease)}
.sidebar__backdrop.open{opacity:1;visibility:visible}
body.sidebar-open{overflow:hidden}

.fab{position:fixed;right:22px;bottom:22px;z-index:96;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.fab__menu{display:flex;flex-direction:column;align-items:flex-end;gap:10px;opacity:0;transform:translateY(10px) scale(.96);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fab.open .fab__menu,.fab:hover .fab__menu{opacity:1;transform:none;pointer-events:auto}
.fab__item{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;background:rgba(10,10,10,.94);backdrop-filter:blur(12px);border:1px solid var(--line-strong);color:var(--bone);font-family:var(--variable);font-variation-settings:'wght' 600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;box-shadow:0 14px 40px -16px rgba(0,0,0,.9);transition:border-color .25s,transform .25s var(--ease)}
.fab__item:hover{border-color:var(--silver-1);transform:translateX(-3px)}
.fab__item .ic{font-size:14px}
.fab__item--wa .ic{color:#3ad48a}
.fab__toggle{width:60px;height:60px;border-radius:50%;border:1px solid var(--line-strong);background:var(--bone);color:var(--black);font-size:24px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;box-shadow:0 18px 50px -16px rgba(232,232,232,.5),0 0 0 1px rgba(255,255,255,.05) inset;transition:transform .35s var(--ease)}
.fab__toggle:hover{transform:translateY(-3px) scale(1.04)}
.fab.open .fab__toggle{transform:translateY(-2px) scale(1.05)}
@media(max-width:520px){.fab{right:16px;bottom:16px}.fab__toggle{width:54px;height:54px;font-size:22px}}