/* /assets/css/post.css
   Frontend-Look für Einzel-Blogbeitrag
   – nutzt zentrale Theme-Variablen aus /core/theme.php
*/

/* ===========================
   Basis & Reset
   =========================== */

@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

/* Farben & Variablen kommen zentral aus theme_print_inline_css,
   hier KEIN eigenes :root mehr. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

/* Seitenhintergrund + Grundschrift
   -> wird über Theme-Studio gesteuert:
   - --body-bg (CSS-String, z.B. Gradients)
   - --theme-font-family
   - --theme-text-color
   - --yellow / --green / --green-dark
*/
body.site {
  font-family: var(--theme-font-family, "Montserrat", sans-serif);
  color: var(--theme-text-color, #ffffff);

  background: var(
    --body-bg,
    radial-gradient(circle at 0% 0%, var(--yellow, #E8FF3A) 0, rgba(0, 0, 0, 0) 40%),
    linear-gradient(
      135deg,
      var(--green-dark, #0e5a37) 0,
      var(--green, #137547) 55%,
      #064e3b 100%
    )
  );
  background-attachment: fixed;
}

/* bessere Focus-Sichtbarkeit mit Akzentfarbe */
:focus-visible {
  outline: 2px solid var(--yellow, #E8FF3A);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ===========================
   Buttons & Chips
   =========================== */

/* Primärer Button – nutzt dieselben Farben wie btn-main */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  border: 1px solid rgba(250, 250, 250, 0.15);

  background: var(--btn-primary-bg, var(--yellow, #E8FF3A));
  color: var(--btn-primary-text, var(--green-dark, #0e5a37));

  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;

  box-shadow:
    0 12px 30px rgba(15, 23, 42, 0.85),
    inset 0 1px 0 rgba(255, 255, 255, 0.65);

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

.btn:hover {
  transform: translateY(-1px);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  filter: brightness(1.05);
}

.btn:active {
  transform: translateY(0);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.9),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Kategorie-Chips (unter Titel / Meta) */
.chip {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  text-decoration: none;

  border: 1px solid var(--surface-border, rgba(148, 163, 184, 0.9));
  background: var(--surface-dark, rgba(15, 23, 42, 0.8));
  color: var(--text-on-dark, rgba(229, 231, 235, 0.92));
}

.chip.small {
  font-size: 0.75rem;
}

/* ===========================
   Post-Layout
   =========================== */

.post-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 6.5rem 1.5rem 3.5rem; /* Platz unter der fixen Navi */
  box-sizing: border-box;
}

.post-article {
  background: var(--surface-dark, rgba(15, 23, 42, 0.9));
  border-radius: 1.4rem;
  border: 1px solid var(--surface-border, rgba(148, 163, 184, 0.7));
  box-shadow:
    0 24px 65px rgba(15, 23, 42, 0.96),
    0 0 0 1px rgba(15, 23, 42, 0.85);
  padding: 1.6rem 1.7rem 1.9rem;
  color: var(--text-on-dark, rgba(226, 232, 240, 0.94));
}

/* Header-Bereich im Beitrag */

.post-header {
  margin-bottom: 1.3rem;
}

.post-title {
  font-size: var(--post-title-size, 1.9rem);
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--post-title-color, var(--yellow, #E8FF3A));
  margin-bottom: 0.35rem;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.8rem;
  color: rgba(209, 213, 219, 0.9);
}

/* Titelbild */

.post-cover {
  width: 100%;
  height: auto;
  border-radius: 1.1rem;
  margin: 1rem 0 0.7rem;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.9);
  object-fit: cover;
}

/* Kategorien-Chips-Gruppe unterhalb der Meta */
.post-categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.2rem;
}

/* Inhalt */

.post-content {
  font-size: 0.96rem;
  line-height: 1.7;
  color: var(--text-on-dark, rgba(226, 232, 240, 0.94));
}

.post-content p + p {
  margin-top: 0.7rem;
}

.post-content h2,
.post-content h3,
.post-content h4 {
  margin-top: 1.4rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.post-content h2 { font-size: 1.3rem; }
.post-content h3 { font-size: 1.15rem; }
.post-content h4 { font-size: 1.05rem; }

.post-content ul,
.post-content ol {
  margin: 0.6rem 0 0.6rem 1.3rem;
}

.post-content a {
  color: var(--link-color, var(--yellow, #E8FF3A));
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

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

.post-content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.9rem;
  margin: 0.8rem 0;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.9);
}

/* Zurück-Link unter dem Artikel */

.post-back-nav {
  margin-top: 1.6rem;
}

/* ===========================
   Responsive
   =========================== */

@media (max-width: 768px) {
  .post-main {
    padding: 6rem 1.1rem 3rem;
  }

  .post-article {
    padding: 1.25rem 1.2rem 1.6rem;
  }

  .post-title {
    font-size: calc(var(--post-title-size, 1.9rem) * 0.85);
  }
}