/* 
  KRZAKI THEME - TYPOGRAPHY & LAYOUT 
  Optimized for Polish language and linear reading experience.
*/


/* Fauna One - Static Font Faces */
/* Regular */
@font-face {
  font-family: 'Fauna One';
  src: url('/fonts/FaunaOne-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Color Palette */
  --color-bg: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #555555;
  --color-accent: #2c3e50; /* Deep blue-grey for headings */
  --color-border: #e0e0e0;

  /* Typography Scale */
  --font-body: 'Fauna One', 'Times New Roman', Times, serif;
  --font-heading: 'Fauna One', 'Times New Roman', Times, serif; 

  /* Base size: 18px is great for desktop, slightly larger for comfort */
  --size-base: 1.125rem; 
  --line-height-body: 1.75; /* Slightly increased for Literata's x-height */
  --line-height-heading: 1.3;
  
  /* Measure: 68ch is good, but let's tighten slightly for better rhythm */
  --measure: 65ch; 
  
  --spacing-unit: 1rem;
  --container-padding: 1.5rem;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%; /* Respect user browser settings */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: var(--line-height-body);
  font-size: var(--size-base);
  overflow-x: hidden;
}

/* Layout Container */
.layout-container {
  max-width: calc(var(--measure) + (var(--container-padding) * 2));
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Header & Footer */
.site-header {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 3rem;
}

.site-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-accent);
  text-decoration: none;
  letter-spacing: -0.02em;
}

.site-footer {
  margin-top: 4rem;
  padding: 2rem 0;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: 0.9rem;
  text-align: center;
}

/* Content Stream (The Feed) */
.content-stream {
  /* No max-width here, the container handles it */
}

.post-entry {
  margin-bottom: 4rem;
}

/* Post Header */
.post-header {
  margin-bottom: 1.5rem;
}

.post-date {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  font-feature-settings: "tnum"; /* Tabular nums for alignment */
}

.post-title {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-variation-settings: "opsz" 24;
  font-weight: 700;
  line-height: var(--line-height-heading);
  color: var(--color-accent);
  margin-bottom: 0;
}

/* Typography Polish-Specifics */
.post-body {
  text-align: left;
  font-variation-settings: "opsz" 18; /* Optical size 18 matches our base size */
  font-weight: 400;
  
  /* Hyphenation for Polish */
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  
  /* Prevent widows/orphans roughly */
  orphans: 2;
  widows: 2;
}

.post-body p {
  margin-bottom: 1.5rem;
}

.post-body p:last-child {
  margin-bottom: 0;
}

/* Images & Captions */
.post-figure {
  margin: 2rem 0;
  width: 100%;
}

.post-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  /* Subtle shadow for depth */
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.post-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}

/* Separator */
.post-divider {
  border: 0;
  height: 1px;
  background-color: var(--color-border);
  margin: 3rem 0;
  opacity: 0.6;
}

/* Links */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  text-decoration-thickness: 2px;
}

/* Responsive Tweaks */
@media (max-width: 600px) {
  :root {
    --size-base: 1rem; /* Slightly smaller on mobile */
    --measure: 60ch;
  }
  
  .post-title {
    font-size: 1.5rem;
  }
}

/* Inline Images */
.inline-figure {
  margin: 2rem 0; /* Vertical rhythm */
  width: 100%;
  clear: both; /* Prevent text wrapping weirdly if you ever float images */
}

.inline-figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.inline-figure figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  line-height: 1.5;
}