/**
 * @file node.css
 * Verid — Node
 *
 * Styles for article/node display. Editorial reading experience
 * with proper measure, rhythm, and hierarchy.
 */

/* ─── Node article wrapper ──────────────────────────────── */

.node {
  max-width: var(--verid-content-max);
}

/* ─── Node header ───────────────────────────────────────── */

.node > header {
  margin-block-end: var(--verid-space-6);
  padding-block-end: 0;
}

.node__title {
  font-family: var(--verid-font-display);
  font-size: var(--verid-text-4xl);
  font-weight: 500;
  line-height: var(--verid-leading-tight);
  letter-spacing: -0.025em;
  color: var(--verid-color-heading);
  margin-block: 0 var(--verid-space-6);
  hyphens: auto;
  overflow-wrap: break-word;
}

.node__title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--verid-transition-fast);
}

.node__title a:hover {
  color: var(--verid-color-accent);
}

/* ─── Node meta / submitted info ────────────────────────── */

.node__meta {
  display: flex;
  align-items: center;
  gap: var(--verid-space-4);
  flex-wrap: wrap;
  font-size: var(--verid-text-sm);
  color: var(--verid-color-text-secondary);
}

.node__author-image {
  flex-shrink: 0;
}

.node__author-image img {
  width: 36px;
  height: 36px;
  border-radius: var(--verid-radius-full);
  object-fit: cover;
}

.node__author {
  font-weight: 600;
  color: var(--verid-color-text);
}

/* ─── Node content ──────────────────────────────────────── */

.node__content {
  font-size: var(--verid-text-md);
  line-height: var(--verid-leading-loose);
  color: var(--verid-color-text);
}

/* Vertical spacing between content elements */
.node__content > * + * {
  margin-block-start: var(--verid-space-6);
}

.node__content h2 {
  font-size: var(--verid-text-2xl);
  margin-block-start: var(--verid-space-12);
  margin-block-end: var(--verid-space-4);
  padding-block-start: var(--verid-space-4);
  border-top: 1px solid var(--verid-color-border);
}

.node__content h3 {
  font-size: var(--verid-text-xl);
  margin-block-start: var(--verid-space-10);
  margin-block-end: var(--verid-space-3);
}

.node__content h4 {
  font-size: var(--verid-text-lg);
  margin-block-start: var(--verid-space-8);
  margin-block-end: var(--verid-space-2);
}

/* ─── Teaser view mode ──────────────────────────────────── */

.node--view-mode-teaser {
  padding: var(--verid-space-8);
  border: 1px solid var(--verid-color-border);
  border-radius: var(--verid-radius-md);
  transition: box-shadow var(--verid-transition), border-color var(--verid-transition);
  max-width: 100%;
}

.node--view-mode-teaser:hover {
  box-shadow: var(--verid-shadow);
  border-color: var(--verid-color-border);
}

.node--view-mode-teaser .node__title {
  font-size: var(--verid-text-xl);
  margin-block-end: var(--verid-space-4);
}

.node--view-mode-teaser > header {
  border-bottom: none;
  padding-block-end: 0;
  margin-block-end: var(--verid-space-4);
}

.node--view-mode-teaser .node__content {
  font-size: var(--verid-text-base);
  line-height: var(--verid-leading-normal);
  color: var(--verid-color-text-secondary);
}

/* ─── Callout / highlight box (via classes) ─────────────── */

.node__content .callout,
.node__content .highlight-box {
  background-color: var(--verid-color-surface);
  border: 1px solid var(--verid-color-border);
  border-radius: var(--verid-radius-md);
  padding: var(--verid-space-6) var(--verid-space-8);
  margin-block: var(--verid-space-8);
}

.node__content .callout--accent {
  background-color: var(--verid-color-accent-light);
  border-color: var(--verid-color-accent-pale);
}


/* ─── Kontaktformular: Datenschutzhinweis ───────────────── */

.contact-form__privacy {
  font-size: var(--verid-text-sm);
  color: var(--verid-color-text-muted);
  margin-block: var(--verid-space-4) var(--verid-space-6);
  line-height: var(--verid-leading-relaxed);
}

/* Zusätzlicher Abstand über dem Submit-Button */
.contact-message-sitewide-form .form-actions {
  margin-block-start: var(--verid-space-2);
}

/* ─── Cookie-Einstellungen Button ───────────────────────── */

a[href="#cookie-settings"],
.btn-cookie-settings {
  display: inline-block;
  padding: 0.5rem 1.375rem;
  background: var(--verid-color-accent);
  color: #fff;
  border: none;
  border-radius: var(--verid-radius-full);
  font-family: var(--verid-font-body);
  font-size: var(--verid-text-sm);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--verid-transition-fast);
  white-space: nowrap;
}

a[href="#cookie-settings"]:hover,
.btn-cookie-settings:hover {
  background: var(--verid-color-accent-hover);
  color: #fff;
  text-decoration: none;
}