/* 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 (Pyszny Owoc, sad): ciepły kremowy papier, głęboka sadownicza
   zieleń na panelach i nagłówkach, liściasta zieleń na linkach, dojrzała
   czerwień jabłka jako jeden akcent CTA. Serif Literata w nagłówkach, Instrument
   Sans w tekście. Nazwy tokenów zostają z pierwowzoru (atrament = kolor ciemny,
   bursztyn = akcent CTA) — zmieniają się tylko wartości. */

/* ---- 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: #16331f;      /* głęboka sadownicza zieleń — panel hero, nagłówki */
  --papier: #f7f4ec;        /* ciepły kremowy papier — tło */
  --wrzos: #4a7c3f;         /* liściasta zieleń — linki, akcje */
  --wrzos-ciemny: #3a6331;
  --bursztyn: #d1462f;      /* dojrzała czerwień jabłka — JEDEN akcent CTA */
  --grafit: #2c2a24;        /* tekst */
  --mgla: #b7c9a9;          /* tekst drugorzędny na ciemnej zieleni */
  --szept: #6d7064;         /* tekst drugorzędny na papierze */
  --rule: #e6e1d3;
  --biel: #fffdf8;
  --max: 50rem;
  --nav-h: 72px;            /* wysokość przyklejonej nawigacji — używana też przez scroll-margin kotwic */
  --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;
}

/* ---- przewijanie z kotwicami ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---- przyklejona nawigacja (jednostronicowa, wzorzec letsweb) ---- */
.nav {
  position: sticky; top: 0; z-index: 100;
  transition: background .35s ease, border-color .35s ease, backdrop-filter .35s ease;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: color-mix(in srgb, var(--papier) 82%, transparent);
  backdrop-filter: saturate(1.2) blur(10px);
  border-bottom-color: var(--rule);
}
.nav-inner {
  max-width: 64rem; margin: 0 auto; padding: 0 1.25rem;
  height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav .brand { display: inline-flex; align-items: center; gap: .55rem; color: var(--atrament); text-decoration: none; }
.nav .glyph { width: 30px; height: 30px; }
.nav .word { font-family: var(--font-display); font-weight: 700; font-size: 1.22rem; letter-spacing: -.02em; }
.nav .links { display: flex; gap: 1.6rem; font-size: .98rem; }
.nav .links a { color: var(--szept); text-decoration: none; font-weight: 500; position: relative; }
.nav .links a:hover, .nav .links a.active { color: var(--atrament); }
.nav .links a.ulink.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--wrzos); border-radius: 2px;
}
.nav .plink { color: var(--wrzos) !important; font-weight: 600 !important; }
.nav .right { display: flex; align-items: center; gap: 1rem; }
.nav-cta { padding: .5rem 1.1rem; font-size: .92rem; }
.burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: none; border: 0; cursor: pointer; }
.burger span { display: block; height: 2px; width: 100%; background: var(--atrament); border-radius: 2px; transition: transform .25s ease, opacity .2s ease; }
.nav.open .burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.open .burger span:nth-child(2) { opacity: 0; }
.nav.open .burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.mobile-menu { display: none; }

/* ---- main / sekcje ---- */
main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 4rem; }
main.wide { max-width: 64rem; padding-top: 0; }
/* scroll-margin: nagłówek sekcji ląduje ~12px pod przyklejoną nawigacją, na
   desktopie i mobile (śledzi --nav-h). padding-top < scroll-margin, więc górna
   część sekcji chowa się pod nawigacją, a widoczny jest nagłówek. */
.section { scroll-margin-top: calc(var(--nav-h) - 1.75rem); padding: 2.5rem 0 3.5rem; border-top: 1px solid var(--rule); }
.section:first-of-type { border-top: 0; }
.section > h2 { font-size: clamp(1.6rem, 4vw, 2.1rem); margin: 0 0 0.35rem; }
.section .lead-2 { color: var(--szept); margin: 0 0 1.75rem; max-width: 42rem; }
/* Usunięto animację wejścia .reveal (opacity:0 → .in): chowała sekcję docelową
   kotwicy, gdy obserwator nie zdążył jej odsłonić po skoku — „nie widać nagłówka”.
   Sekcje są teraz zawsze widoczne; klasa .reveal w HTML jest bezczynna. */

/* ---- stopka ---- */
footer.site { border-top: 1px solid var(--rule); color: var(--szept); font-size: 0.85rem; }
footer.site .inner {
  max-width: 64rem; margin: 0 auto; padding: 1.4rem 1.25rem;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap;
}
footer.site .foot-links { display: flex; gap: 1.1rem; flex-wrap: wrap; }
footer.site a { color: var(--szept); text-decoration: none; }
footer.site a:hover { color: var(--wrzos); }
footer.site .footer-login { color: var(--wrzos); }
.footer-ver { font-family: ui-monospace, monospace; font-size: 11px; opacity: .65; }

@media (max-width: 760px) {
  .nav .links, .nav-cta { display: none; }
  .burger { display: flex; }
  :root { --nav-h: 64px; }   /* niższa nawigacja na mobile → scroll-margin sam się dostraja */
  /* OUT OF FLOW: dropdown hangs below the sticky nav as an overlay (top:100%),
     so opening it never changes document height. Wcześniej menu było w flow
     wewnątrz .nav — jego rozwinięcie spychało całą stronę o ~420px w dół, więc
     skok do kotwicy liczył się przy otwartym menu, a zamknięcie w trakcie
     animacji dawało „przestrzelenie" nagłówka na mobile. Absolute = brak shiftu. */
  .mobile-menu {
    position: absolute; left: 0; right: 0; top: 100%;
    display: flex; flex-direction: column; max-height: 0; overflow: hidden; padding: 0 1.25rem;
    background: color-mix(in srgb, var(--papier) 97%, transparent);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid transparent;
    transition: max-height .32s ease, padding .32s ease, border-color .32s ease;
  }
  .nav.open .mobile-menu { max-height: 420px; padding: .4rem 1.25rem 1.1rem; border-bottom-color: var(--rule); }
  .mobile-menu a { padding: .8rem .1rem; font-size: 1.05rem; color: var(--atrament); text-decoration: none; border-bottom: 1px solid var(--rule); }
  .mobile-menu a:last-of-type { border-bottom: 0; }
  .mobile-menu .m-cta { margin-top: .8rem; text-align: center; color: #fff; }
  footer.site .inner { flex-direction: column; align-items: flex-start; }
}

/* ---- 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 --- */
article.post :target { scroll-margin-top: 2rem; }  /* blog: nie przyklejaj celu do góry (nie dotyka sekcji strony głównej) */

/* 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);
}