/* =========================================================
   Podcast TG — Platform Stylesheet
   Clean, fast, slightly romantic. Provides the shared chrome
   (header/nav, main, footer, forms, flashes) for every page.

   Blog/podcast pages additionally load one of the theme
   stylesheets (app/assets/stylesheets/{default-style,fff,
   green,rainbow}.css) on top of this file, which restyle the
   header/nav/main/article/footer for that blog's own look.
   Keep selectors here generic so themes can safely override
   them; this file must also look good entirely on its own for
   pages with no blog in scope (auth, blog listing, etc).
   ========================================================= */

/* ---------- Design tokens ---------- */

:root {
  --rose-50: #fdf5f6;
  --rose-100: #fbe8ec;
  --rose-200: #f3cdd6;
  --rose-400: #e08aa0;
  --rose-600: #c05a76;
  --rose-700: #9c3f5a;
  --plum-800: #4a2436;
  --plum-900: #2e1725;

  --cream: #fffaf5;
  --ink: #2f2a2d;
  --ink-soft: #6b5c62;
  --border: #ecdfe1;

  --font-serif: Georgia, "Iowan Old Style", "Palatino Linotype", ui-serif, serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --radius: 10px;
  --shadow-sm: 0 1px 3px rgba(74, 36, 54, 0.08);
  --shadow-md: 0 6px 20px rgba(74, 36, 54, 0.12);
}

/* ---------- Reset & base ---------- */

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

html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  color: var(--plum-900);
  line-height: 1.25;
  font-weight: normal;
}

h1 { font-size: 2.1rem; margin: 0 0 0.6em; }
h2 { font-size: 1.5rem; margin: 1.6em 0 0.6em; }
h3 { font-size: 1.2rem; margin: 0 0 0.4em; }

p { margin: 0 0 1em; }

a {
  color: var(--rose-700);
  text-decoration: none;
}

a:hover {
  color: var(--rose-600);
  text-decoration: underline;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ---------- Header & navigation ---------- */

body > header {
  background: var(--plum-900);
  border-bottom: 3px solid var(--rose-400);
}

/* Three-zone layout: brand on the left (.site-nav__left), this blog's
   own pages truly centered (.site-nav__center) regardless of how wide
   the left/right zones' content is, and the "Blogs"/account menu on
   the right (.site-nav__right). Explicit 1fr/auto/1fr columns keep the
   center zone centered on the whole bar even though left and right
   hold different amounts of content. */
body > header nav.site-nav {
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 12px;
}

.site-nav__left {
  grid-column: 1;
  justify-self: start;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.site-nav__right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-width: 0;
}

.site-nav__brand {
  display: block;
  padding: 16px 18px 16px 0;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: normal;
}

body > header ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

body > header li {
  display: inline-block;
}

body > header a {
  display: block;
  padding: 16px 18px;
  color: var(--rose-100);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

body > header a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  text-decoration: none;
}

/* "Blogs" and account dropdowns, built from <details>/<summary> so they
   work with no JavaScript at all (a small Stimulus controller just adds
   click-outside-to-close and closes siblings). Kept visually neutral
   (not theme-tinted) since this is platform chrome, not blog content;
   selectors are boosted with two classes so they reliably win over any
   theme's generic "header a"/"header li" styling, incl. positional
   nth-child rules some themes use for their own top-level nav pills. */
.site-nav__dropdown {
  position: relative;
}

.site-nav__dropdown > summary {
  display: block;
  padding: 16px 18px;
  color: var(--rose-100);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  list-style: none;
  cursor: pointer;
}

.site-nav__dropdown > summary::-webkit-details-marker {
  display: none;
}

.site-nav__dropdown > summary::after {
  content: "\25be";
  margin-left: 6px;
  font-size: 0.75em;
  opacity: 0.85;
}

.site-nav__account > summary {
  display: flex;
  align-items: center;
  padding: 14px 18px;
}

.site-nav__account > summary::after {
  content: none;
}

.site-nav__dropdown > summary:hover,
.site-nav__dropdown[open] > summary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.site-nav__dropdown .site-nav__submenu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 20;
  min-width: 190px;
  margin: 4px 0 0;
  padding: 6px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.site-nav__dropdown .site-nav__submenu li {
  display: block;
  width: 100%;
}

.site-nav__dropdown .site-nav__submenu a {
  display: block;
  padding: 10px 14px;
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 4px);
  color: var(--plum-800);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  box-shadow: none;
}

.site-nav__dropdown .site-nav__submenu a:hover {
  background: var(--rose-50);
  color: var(--plum-900);
  text-decoration: none;
}

/* ---------- Main container ---------- */

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 36px 20px;
  min-height: 60vh;
}

/* ---------- Footer ---------- */

body > footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 20px 40px;
  color: var(--ink-soft);
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.88rem;
}

body > footer p {
  margin: 0.35em 0;
}

body > footer a {
  color: var(--rose-700);
  font-weight: 600;
}

/* ---------- Flash messages ---------- */

.flash {
  padding: 12px 16px;
  border-radius: var(--radius);
  margin-bottom: 24px;
  font-size: 0.95rem;
  border: 1px solid transparent;
}

.flash-notice {
  background: var(--rose-50);
  border-color: var(--rose-200);
  color: var(--plum-800);
}

.flash-alert {
  background: #fdecea;
  border-color: #f2c2bd;
  color: #7a2b20;
}

/* ---------- Lists (blogs index, generic content lists) ---------- */

main ul {
  padding-left: 0;
  list-style: none;
}

main ul li {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

main ul li:last-child {
  border-bottom: none;
}

/* Error message lists should keep their bullets */
.error_messages ul {
  list-style: disc;
  padding-left: 1.4em;
}

.error_messages ul li {
  border-bottom: none;
  padding: 2px 0;
}

/* ---------- Forms ---------- */

form {
  margin: 1em 0;
}

form .field,
form > div,
form details > div {
  margin-bottom: 18px;
}

form label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--plum-800);
}

form .field p {
  margin: 0 0 6px;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="datetime-local"],
input[type="search"],
input[type="url"],
textarea,
select {
  width: 100%;
  max-width: 480px;
  padding: 10px 12px;
  font-size: 1rem;
  font-family: var(--font-sans);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

textarea {
  max-width: 100%;
  resize: vertical;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px var(--rose-100);
}

input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
}

input[type="file"] {
  padding: 6px 0;
}

/* Collapsed "advanced options" section on the post form */
details.post-advanced {
  margin: 18px 0;
  padding: 2px 18px;
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
}

details.post-advanced summary {
  cursor: pointer;
  padding: 12px 0;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--plum-800);
  list-style: none;
}

details.post-advanced summary::-webkit-details-marker {
  display: none;
}

details.post-advanced summary::before {
  content: "\25b8  ";
}

details.post-advanced[open] summary::before {
  content: "\25be  ";
}

details.post-advanced[open] summary {
  border-bottom: 1px solid var(--rose-200);
}

details.post-advanced > div:first-of-type {
  margin-top: 16px;
}

details.post-advanced > div:last-of-type {
  margin-bottom: 14px;
}

/* Trix (rich text) editor, used for blog pages */
trix-editor {
  min-height: 220px;
  max-width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}

trix-editor:focus {
  outline: none;
  border-color: var(--rose-400);
  box-shadow: 0 0 0 3px var(--rose-100);
}

trix-toolbar .trix-button-row {
  background: var(--rose-50);
  border: 1px solid var(--border);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
}

.actions,
form input[type="submit"] {
  margin-top: 6px;
}

input[type="submit"],
button {
  display: inline-block;
  padding: 10px 22px;
  background: var(--rose-600);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s ease;
}

input[type="submit"]:hover,
button:hover {
  background: var(--rose-700);
}

.error_messages {
  background: #fdecea;
  border: 1px solid #f2c2bd;
  color: #7a2b20;
  padding: 14px 18px;
  border-radius: var(--radius);
  margin-bottom: 22px;
}

.error_messages h2 {
  margin: 0 0 8px;
  font-size: 1.05rem;
  color: #7a2b20;
}

/* ---------- In-browser audio recorder (new/edit post form) ---------- */

.audio-recorder__controls {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
}

.audio-recorder__hint {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

.audio-recorder__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.audio-recorder__button {
  padding: 8px 16px;
  font-size: 0.9rem;
}

.audio-recorder__button--stop {
  background: var(--plum-800);
}

.audio-recorder__button--stop:hover {
  background: var(--plum-900);
}

.audio-recorder__button--ghost {
  background: transparent;
  color: var(--rose-700);
  border: 1px solid var(--rose-200);
}

.audio-recorder__button--ghost:hover {
  background: var(--rose-100);
  color: var(--rose-700);
}

.audio-recorder__status {
  margin: 10px 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.audio-recorder__preview {
  margin-top: 10px;
}

.audio-recorder__unsupported {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-style: italic;
}

/* ---------- Articles / posts (fallback when no theme is loaded) ---------- */

#artikel {
  margin-top: 1em;
}

article {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-sm);
}

article header {
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

article h3 {
  font-size: 1.4rem;
}

article time {
  display: block;
  color: var(--ink-soft);
  font-size: 0.85rem;
}

.episode-meta {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}

.episode-meta span {
  margin-right: 12px;
}

article figure {
  margin: 18px 0 0;
  padding: 14px;
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
}

article figcaption {
  margin-bottom: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--plum-800);
}

audio {
  width: 100%;
}

/* ---------- Pagination ---------- */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 28px 0;
  padding: 0;
  list-style: none;
  justify-content: center;
}

.pagination a,
.pagination span {
  display: inline-block;
  padding: 7px 13px;
  border-radius: var(--radius);
  font-size: 0.9rem;
}

.pagination a {
  background: var(--rose-50);
  color: var(--rose-700);
  border: 1px solid var(--rose-200);
}

.pagination a:hover {
  background: var(--rose-100);
  text-decoration: none;
}

.pagination span.current {
  background: var(--rose-600);
  color: #fff;
}

.pagination span.disabled {
  color: var(--ink-soft);
  border: 1px solid var(--border);
}

/* ---------- Comments ---------- */

.comment {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.comment p {
  margin: 0 0 6px;
}

.comment strong {
  color: var(--plum-800);
}

.comment small {
  color: var(--ink-soft);
}

.replies {
  margin-left: 24px;
  padding-left: 16px;
  border-left: 2px solid var(--rose-200);
}

/* ---------- Blog pages nav (imprint/about/links/...), shown centered
   in the site nav's middle column. Deliberately does not set its own
   color/background: it inherits the current theme's header link colors
   (or the base ones above, when no theme is loaded) so it always has
   correct contrast against that theme's header background, and only
   adds a small underline accent plus tighter spacing to read as a
   secondary, "this blog's own pages" navigation. ---------- */

.site-nav__center {
  grid-column: 2;
  justify-self: center;
  min-width: 0;
}

.blog-pages-nav {
  gap: 4px 6px;
  justify-content: center;
}

.blog-pages-nav li {
  padding: 0;
  border-bottom: none;
}

.blog-pages-nav a {
  padding: 6px 25px;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
}

.blog-pages-nav a:hover {
  border-bottom-color: currentColor;
}

/* A blog page's own rich text content */
.trix-content {
  max-width: 100%;
}

.trix-content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* ---------- Buttons (links styled as buttons, e.g. home page CTAs) ---------- */

.button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 600;
  font-family: var(--font-sans);
}

.button:hover {
  text-decoration: none;
}

.button--primary {
  background: var(--rose-600);
  color: #fff;
}

.button--primary:hover {
  background: var(--rose-700);
  color: #fff;
}

.button--ghost {
  background: transparent;
  color: var(--rose-700);
  border: 1px solid var(--rose-200);
}

.button--ghost:hover {
  background: var(--rose-50);
  color: var(--rose-700);
}

/* ---------- Home / landing page ---------- */

.home-hero {
  text-align: center;
  padding: 32px 12px 16px;
}

.home-hero__eyebrow {
  margin: 0 0 4px;
  color: var(--rose-600);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.home-hero__title {
  font-size: 3rem;
  margin: 0 0 0.4em;
}

.home-hero__lead {
  max-width: 600px;
  margin: 0 auto 1.4em;
  color: var(--ink-soft);
  font-size: 1.1rem;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.home-section {
  margin: 3em 0;
}

.home-section h2 {
  text-align: center;
}

.home-section > p {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  color: var(--ink-soft);
}

.home-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 1.6em;
}

.home-feature {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
}

.home-feature__icon {
  font-size: 1.6rem;
  margin-bottom: 8px;
}

.home-feature h3 {
  margin: 0 0 0.4em;
  font-size: 1.1rem;
}

.home-feature p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.home-cta {
  text-align: center;
  padding: 32px 20px;
  background: var(--rose-50);
  border: 1px solid var(--rose-200);
  border-radius: var(--radius);
}

.home-cta p {
  max-width: 520px;
  margin: 0 auto 1.2em;
  color: var(--ink-soft);
}

/* ---------- Responsive ---------- */

@media (max-width: 700px) {
  body > header nav.site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 16px;
  }

  .site-nav__left,
  .site-nav__right {
    justify-self: stretch;
    justify-content: space-between;
  }

  .site-nav__center {
    justify-self: stretch;
  }

  .blog-pages-nav {
    justify-content: center;
    padding: 6px 0 4px;
  }

  body > header a {
    padding: 12px 14px;
  }

  main {
    padding: 24px 16px;
  }

  body > footer {
    padding: 20px 16px 32px;
  }

  h1 { font-size: 1.7rem; }

  .home-hero__title { font-size: 2.2rem; }

  article {
    padding: 18px;
  }
}