/* Wspólny arkusz dla stron Astro ORAZ szablonów Go (blog, admin) — jeden plik,
   żeby blog renderowany serwerowo wyglądał identycznie jak reszta strony.

   Identyfikacja (2026-07-31): atrament + papier w chłodnym fiolecie, serif
   Literata w nagłówkach (blog o psychice = rzecz do CZYTANIA), Instrument Sans
   w tekście. Sygnatura strony głównej — „oddychająca" plama atramentu — żyje
   w index.astro; tu są tokeny, z których korzysta. */

/* ---- fonty (self-hosted, latin + latin-ext dla polskich znaków) ---- */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/instrumentsans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/fonts/instrumentsans-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: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/literata-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Literata';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/literata-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;
}

/* ---- tokeny ---- */
:root {
  --atrament: #201839;      /* głęboki fioletowy atrament — panel hero, nagłówki */
  --papier: #f6f4fa;        /* chłodny liliowy papier — tło */
  --wrzos: #6a4fc2;         /* linki, akcje */
  --wrzos-ciemny: #56409e;
  --bursztyn: #e3a54a;      /* JEDEN ciepły akcent — główne CTA */
  --grafit: #2b2735;        /* tekst */
  --mgla: #a99fc7;          /* tekst drugorzędny na atramencie */
  --szept: #6f6880;         /* tekst drugorzędny na papierze */
  --rule: #e3ddf0;
  --biel: #fffdfa;
  --max: 50rem;
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--papier);
  color: var(--grafit);
  line-height: 1.65;
  font-size: 1.02rem;
}

h1, h2, h3 {
  font-family: var(--font-display);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--atrament);
}

a { color: var(--wrzos); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--wrzos);
  outline-offset: 2px;
}

/* ---- nagłówek / stopka ---- */
header.site {
  border-bottom: 1px solid var(--rule);
  background: var(--papier);
}
header.site .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 1.5rem;
  flex-wrap: wrap;
}
header.site .brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--atrament);
  text-decoration: none;
}
header.site .brand:hover { color: var(--wrzos); }
header.site nav { margin-left: auto; }
header.site nav a {
  color: var(--szept);
  text-decoration: none;
  margin-left: 1.25rem;
  font-weight: 500;
}
header.site nav a:hover { color: var(--atrament); }

main {
  max-width: var(--max);
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}
main.wide { max-width: 64rem; }
/* Nagłówek i stopka trzymają szerokość swojej strony, żeby logo równało się z
   lewą krawędzią treści (na stronie głównej „wide" = 64rem, nie 46/50rem). */
header.site.wide .inner, footer.site.wide .inner { max-width: 64rem; }

footer.site {
  border-top: 1px solid var(--rule);
  color: var(--szept);
  font-size: 0.85rem;
}
footer.site .inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem 1.25rem;
}
/* dyskretny link do panelu — wtapia się w stopkę (kolor jak reszta), akcent
   dopiero na hover; gość go nie zauważy, redaktor wie gdzie kliknąć. */
footer.site .footer-login { color: var(--szept); text-decoration: none; }
footer.site .footer-login:hover { color: var(--wrzos); text-decoration: underline; }
footer.site .dot { opacity: 0.5; }

/* ---- przyciski ---- */
button, .btn {
  display: inline-block;
  background: var(--wrzos);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-size: 0.95rem;
  font-family: var(--font-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
button:hover, .btn:hover { background: var(--wrzos-ciemny); }
button.secondary, .btn.secondary {
  background: transparent;
  color: var(--wrzos);
  border: 1px solid var(--wrzos);
}
button.secondary:hover, .btn.secondary:hover { background: rgba(106, 79, 194, 0.08); }
button.danger { background: #b3261e; }
button.danger:hover { background: #8f1e18; }

/* ---- blog ---- */
.post-list { list-style: none; padding: 0; margin-top: 2rem; }
.post-list li {
  display: grid;
  grid-template-columns: clamp(110px, 28%, 156px) 1fr;
  gap: 1.15rem;
  align-items: start;
  margin: 0 0 2.25rem;
}
.post-list .thumb {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--rule);
}
.post-list .thumb img, .post-list .thumb-ph { width: 100%; height: 100%; display: block; }
.post-list .thumb img { object-fit: cover; }
.post-list .thumb-ph { display: flex; align-items: center; justify-content: center; }
.post-list .thumb-ph b {
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.82);
}
@media (max-width: 30rem) {
  .post-list li { grid-template-columns: 1fr; }
  .post-list .thumb { aspect-ratio: 16 / 7; }
}
.post-list .when {
  color: var(--szept);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.post-list h2 { margin: 0.15rem 0 0.3rem; font-size: 1.45rem; }
.post-list h2 a { color: var(--atrament); text-decoration: none; }
.post-list h2 a:hover { color: var(--wrzos); }
.post-list p { margin: 0.25rem 0 0; color: var(--szept); }

article.post .when {
  color: var(--szept);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.25rem;
}
article.post h1 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin-top: 0.25rem; }
article.post img { max-width: 100%; border-radius: 10px; }

/* Zdjęcie główne wpisu — wyrównanie wybierane per-wpis w panelu (pole „align").
   Środek = blok, tekst tylko nad i pod; lewo/prawo = opływanie tekstem (float). */
article.post img.cover { display: block; margin: 0 auto 1.2rem; max-width: 28rem; }
article.post img.cover-left  { float: left;  margin: 0.3rem 1.4rem 0.9rem 0; max-width: 44%; }
article.post img.cover-right { float: right; margin: 0.3rem 0 0.9rem 1.4rem; max-width: 44%; }
article.post::after { content: ""; display: block; clear: both; } /* domknięcie opływania */
@media (max-width: 34rem) {
  /* wąski ekran: opływanie się nie mieści → blok na całą szerokość */
  article.post img.cover-left, article.post img.cover-right {
    float: none; margin: 0 auto 1.2rem; max-width: 100%;
  }
}

/* To samo dla obrazków z treści wstawionych komponentem „Obraz (z wyrównaniem)"
   — blok <figure class="cover cover-*">. */
article.post figure.cover { margin: 0 auto 1.2rem; max-width: 28rem; }
article.post figure.cover img { display: block; width: 100%; height: auto; border-radius: 10px; }
article.post figure.cover-left  { float: left;  margin: 0.3rem 1.4rem 0.9rem 0; max-width: 44%; }
article.post figure.cover-right { float: right; margin: 0.3rem 0 0.9rem 1.4rem; max-width: 44%; }
@media (max-width: 34rem) {
  article.post figure.cover-left, article.post figure.cover-right {
    float: none; margin: 0 auto 1.2rem; max-width: 100%;
  }
}

/* podpis pod zdjęciem: autor + źródło (link) — dyskretnie, w kolorze drugorzędnym */
article.post figure.cover .cover-cap {
  margin-top: 0.45rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--szept);
}
article.post figure.cover .cover-cap .cap-s { color: var(--wrzos); text-decoration: none; }
article.post figure.cover .cover-cap .cap-s:hover { text-decoration: underline; }
article.post figure.cover .cover-cap .cap-a + .cap-s::before { content: " · "; color: var(--szept); }

/* tagi wpisu — pigułki pod treścią; szablon renderuje je tylko, gdy są jakieś */
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0.4rem 0 1rem; }
.post-tags a {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--wrzos);
  background: color-mix(in srgb, var(--wrzos) 9%, transparent);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0.22rem 0.7rem;
  text-decoration: none;
}
.post-tags a:hover { background: color-mix(in srgb, var(--wrzos) 16%, transparent); border-color: var(--wrzos); }

/* --- cel kotwicy: podświetlenie po wejściu z odnośnika /blog/…/#id --- */
:target { scroll-margin-top: 2rem; }               /* nie przyklejaj celu do góry */

/* nagłówki / akapity / listy — chwilowy błysk tła */
article.post h1:target, article.post h2:target, article.post h3:target,
article.post p:target, article.post li:target {
  /* podświetlenie obejmuje TEKST (fit-content), nie całą szerokość bloku — dzięki
     temu nie wchodzi pod obrazek opływany z boku. */
  width: fit-content;
  max-width: 100%;
  border-radius: 6px;
  animation: anchor-pulse 2.75s ease-out;   /* 5 jaskrawych, mieniących się błysków, potem znika */
}
@keyframes anchor-pulse {
  0%       { background-color: hsl(48 100% 55% / 0.85); }
  10%      { background-color: transparent; }
  20%      { background-color: hsl(320 100% 62% / 0.82); }
  30%      { background-color: transparent; }
  40%      { background-color: hsl(190 100% 52% / 0.82); }
  50%      { background-color: transparent; }
  60%      { background-color: hsl(275 100% 66% / 0.82); }
  70%      { background-color: transparent; }
  80%      { background-color: hsl(140 85% 48% / 0.82); }
  90%, 100% { background-color: transparent; }
}

/* obraz (treść lub okładka) — ramka podświetlenia, która zostaje subtelna */
article.post figure.cover:target {
  animation: anchor-frame 2.75s ease-out;   /* 5 mieniących się błysków ramki, potem znika */
}
@keyframes anchor-frame {
  0%       { box-shadow: 0 0 0 4px hsl(48 100% 55%), 0 0 0 14px hsl(48 100% 55% / 0.5); }
  10%      { box-shadow: 0 0 0 0 transparent; }
  20%      { box-shadow: 0 0 0 4px hsl(320 100% 62%), 0 0 0 14px hsl(320 100% 62% / 0.5); }
  30%      { box-shadow: 0 0 0 0 transparent; }
  40%      { box-shadow: 0 0 0 4px hsl(190 100% 52%), 0 0 0 14px hsl(190 100% 52% / 0.5); }
  50%      { box-shadow: 0 0 0 0 transparent; }
  60%      { box-shadow: 0 0 0 4px hsl(275 100% 66%), 0 0 0 14px hsl(275 100% 66% / 0.5); }
  70%      { box-shadow: 0 0 0 0 transparent; }
  80%      { box-shadow: 0 0 0 4px hsl(140 85% 48%), 0 0 0 14px hsl(140 85% 48% / 0.5); }
  90%, 100% { box-shadow: 0 0 0 0 transparent; }
}

@media (prefers-reduced-motion: reduce) {
  article.post h1:target, article.post h2:target, article.post h3:target,
  article.post p:target, article.post li:target {
    animation: none; background-color: hsl(45 100% 50% / 0.28);
  }
  article.post figure.cover:target { animation: none; box-shadow: 0 0 0 3px hsl(45 100% 50%); }
}

/* --- komentarze (Remark42 @ comments.letsweb.biz) --- */
.comments { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.comments-title {
  font-family: var(--font-display); font-size: 1.4rem; letter-spacing: -0.01em;
  color: var(--atrament); margin: 0 0 1.2rem;
}
article.post blockquote {
  margin: 1.25rem 0;
  padding: 0.35rem 1.15rem;
  border-left: 3px solid var(--wrzos);
  color: var(--szept);
  font-family: var(--font-display);
  font-size: 1.05rem;
}
article.post pre {
  background: var(--atrament);
  color: var(--papier);
  padding: 1rem;
  border-radius: 10px;
  overflow-x: auto;
}

/* ---- admin ---- */
.admin table { width: 100%; border-collapse: collapse; }
.admin th, .admin td { text-align: left; padding: 0.5rem; border-bottom: 1px solid var(--rule); }
.admin .status-draft { color: var(--szept); }
.admin .status-published { color: #2e7d32; }

.editor { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.editor textarea {
  width: 100%;
  min-height: 28rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
  padding: 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  resize: vertical;
  background: var(--biel);
}
.editor .preview {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 0 1rem;
  overflow-y: auto;
  max-height: 30rem;
  background: var(--biel);
}
@media (max-width: 60rem) { .editor { grid-template-columns: 1fr; } }

.editor-toolbar { margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.editor-toolbar .hint { color: var(--szept); font-size: 0.8rem; }

.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.field input[type="text"] {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--biel);
}

/* --- Szukajka w nagłówku (strona główna) --------------------------------
   Pole obok logo (mniejsze, --pagefind-ui-scale), wyniki w absolutnie
   pozycjonowanej „szufladzie" wysuwającej się POD nagłówkiem, nad hero. */
.header-search {
  position: relative;
  flex: 0 1 18rem;
  min-width: 9rem;
  align-self: center;
  margin-left: 0.5rem;
  --pagefind-ui-scale: 0.72;
  --pagefind-ui-primary: var(--wrzos);
  --pagefind-ui-text: var(--atrament);
  --pagefind-ui-border: var(--rule);
  --pagefind-ui-background: var(--papier);
}
.header-search .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
  position: absolute;
  top: calc(100% + 0.65rem);
  left: 0;
  width: min(36rem, 86vw);
  z-index: 60;
  background: var(--papier);
  border: 1px solid var(--rule);
  border-radius: 10px;
  box-shadow: 0 14px 36px rgba(32, 24, 57, 0.18);
  padding: 0.25rem 1.1rem 1.1rem;
  max-height: 65vh;
  overflow: auto;
}

/* --- Nagłówek na mobile: jeden rząd (logo | szukajka | hamburger) -------- */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: 0.4rem;
  color: var(--atrament);
  cursor: pointer;
  line-height: 0;
}
@media (max-width: 760px) {
  header.site { position: relative; }
  header.site .inner {
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
  }
  header.site .brand { font-size: 1.05rem; white-space: nowrap; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  /* Menu chowa się do rozwijanego panelu pod nagłówkiem */
  header.site nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 55;
    flex-direction: column;
    background: var(--papier);
    border-bottom: 1px solid var(--rule);
    box-shadow: 0 10px 24px rgba(32, 24, 57, 0.12);
    padding: 0.25rem 1rem 0.75rem;
    margin: 0;
  }
  header.site.nav-open nav { display: flex; }
  header.site nav a {
    margin: 0;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--rule);
  }
  header.site nav a:last-child { border-bottom: 0; }
  /* Szukajka: wypełnia środek rzędu; szuflada wyników na szerokość ekranu.
     position: static → szuflada kotwiczy się do header.site (relative). */
  .header-search {
    position: static;
    flex: 1 1 auto;
    min-width: 0;
    margin-left: 0;
    --pagefind-ui-scale: 0.65;
  }
  /* 16px na inpucie — mniejszy font powoduje auto-zoom przy fokusu na iOS */
  .header-search .pagefind-ui__search-input { font-size: 16px; }
  /* Szuflada NA CAŁĄ szerokość ekranu: form Pagefinda musi zostać relative
     (kotwiczy lupkę i „Wyczyść"), więc szufladę wyjmujemy z jego układu przez
     position:fixed względem viewportu; wysokość nagłówka podaje --header-h
     (mierzona skryptem w Base). */
  .header-search .pagefind-ui__drawer:not(.pagefind-ui__hidden) {
    position: fixed;
    top: calc(var(--header-h, 3.5rem) + 0.5rem);
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    max-height: 70vh;
  }
}