/* ==========================================================================
   navweed (Garten) — Element-Mapping + Komponenten
   Teil 1: stylt native WordPress/Astra-Elemente über die Tokens.
   Teil 2: .nw-* Komponentenklassen für das Bewertungs-Plugin.
   ========================================================================== */

/* =====================================================================
   TEIL 1 — Astra / native Elemente
   ===================================================================== */

body,
.ast-container,
.entry-content {
  font-family: var(--nw-font-body);
  color: var(--nw-text);
  line-height: var(--nw-lh-base);
}

body { background: var(--nw-bg); }

h1, h2, h3, h4,
.entry-title,
.ast-archive-title,
.site-title {
  font-family: var(--nw-font-display);
  font-weight: 700;
  line-height: var(--nw-lh-tight);
  letter-spacing: -0.012em;
  color: var(--nw-text);
  text-wrap: balance;
}

.entry-content a,
a { color: var(--nw-primary); }
.entry-content a:hover, a:hover { color: var(--nw-primary-hover); }

:focus-visible {
  outline: 3px solid var(--nw-ring);
  outline-offset: 2px;
}

/* Astra-Buttons & WP-Block-Buttons → Primär */
.ast-button,
.button,
button.menu-link,
input[type="submit"],
.wp-block-button__link,
.wp-element-button {
  font-family: var(--nw-font-body);
  font-weight: 600;
  background: var(--nw-primary);
  color: var(--nw-primary-contrast);
  border: 1.5px solid transparent;
  border-radius: var(--nw-radius-control);
  padding: 13px 20px;
  line-height: 1;
  transition: background var(--nw-t-fast), transform var(--nw-t-fast);
}
.ast-button:hover,
.button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
  background: var(--nw-primary-hover);
  color: var(--nw-primary-contrast);
}
.ast-button:active,
input[type="submit"]:active,
.wp-element-button:active { transform: translateY(1px); }

/* Native Formularfelder */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
  font-family: var(--nw-font-body);
  font-size: var(--nw-fs-base);
  color: var(--nw-text);
  background: var(--nw-field-fill);
  border: 1.5px solid var(--nw-border-strong);
  border-radius: var(--nw-radius-input);
  padding: 12px 14px;
  transition: border-color var(--nw-t-fast), box-shadow var(--nw-t-fast);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--nw-primary);
  box-shadow: 0 0 0 3px var(--nw-ring);
}

/* Native Tabellen */
.entry-content table,
table.nw-data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--nw-fs-sm);
  background: var(--nw-surface);
  border: 1px solid var(--nw-border);
  border-radius: var(--nw-radius-card);
  overflow: hidden;
}
.entry-content table th {
  text-align: left;
  font-size: var(--nw-fs-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nw-text-faint);
  padding: 12px 16px;
  border-bottom: 1.5px solid var(--nw-border);
}
.entry-content table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--nw-border);
}
.entry-content table tr:last-child td { border-bottom: none; }


/* =====================================================================
   TEIL 2 — navweed Komponenten (.nw-*)
   Für das Bewertungs-Plugin: Markup mit diesen Klassen ausgeben.
   ===================================================================== */

/* ---- Buttons ---- */
.nw-btn {
  --_bg: var(--nw-primary);
  --_fg: var(--nw-primary-contrast);
  --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--nw-sp-2);
  font-family: var(--nw-font-body); font-weight: 600; font-size: var(--nw-fs-base);
  line-height: 1; letter-spacing: -0.005em;
  padding: 13px 20px;
  border-radius: var(--nw-radius-control);
  border: 1.5px solid var(--_bd);
  background: var(--_bg); color: var(--_fg);
  cursor: pointer; text-decoration: none;
  transition: background var(--nw-t-fast), border-color var(--nw-t-fast),
              transform var(--nw-t-fast);
}
.nw-btn:hover { background: var(--nw-primary-hover); color: var(--nw-primary-contrast); text-decoration: none; }
.nw-btn:active { transform: translateY(1px); }
.nw-btn--secondary { --_bg: var(--nw-surface); --_fg: var(--nw-primary); --_bd: var(--nw-primary-soft-border); }
.nw-btn--secondary:hover { background: var(--nw-primary-soft); color: var(--nw-primary); }
.nw-btn--ghost { --_bg: transparent; --_fg: var(--nw-text); --_bd: var(--nw-border-strong); }
.nw-btn--ghost:hover { background: var(--nw-surface-2); color: var(--nw-text); }
.nw-btn--danger { --_bg: var(--nw-danger); --_fg: #fff; }
.nw-btn--danger:hover { background: oklch(0.48 0.17 25); }
.nw-btn--sm { padding: 8px 14px; font-size: var(--nw-fs-sm); }
.nw-btn--lg { padding: 16px 28px; font-size: var(--nw-fs-lg); }
.nw-btn--block { display: flex; width: 100%; }
.nw-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---- CTA / Affiliate ---- */
.nw-cta {
  display: inline-flex; align-items: center; gap: var(--nw-sp-2);
  background: var(--nw-primary); color: var(--nw-primary-contrast);
  font-weight: 700; font-size: var(--nw-fs-lg);
  padding: 15px 22px; border-radius: var(--nw-radius-control);
  box-shadow: var(--nw-shadow-md);
  transition: background var(--nw-t-fast), transform var(--nw-t-fast);
}
.nw-cta:hover { background: var(--nw-primary-hover); color: var(--nw-primary-contrast); text-decoration: none; transform: translateY(-1px); }
.nw-cta__ext { opacity: 0.8; }

/* ---- Formfelder ---- */
.nw-field { display: flex; flex-direction: column; gap: var(--nw-sp-2); margin-bottom: var(--nw-sp-5); }
.nw-label { font-size: var(--nw-fs-sm); font-weight: 600; color: var(--nw-text); display: inline-flex; align-items: center; gap: 4px; }
.nw-req { color: var(--nw-danger); font-weight: 700; }
.nw-help { font-size: var(--nw-fs-sm); color: var(--nw-text-muted); margin-top: -2px; }
.nw-input, .nw-textarea, .nw-select {
  font-family: var(--nw-font-body); font-size: var(--nw-fs-base); color: var(--nw-text);
  background: var(--nw-field-fill); border: 1.5px solid var(--nw-border-strong);
  border-radius: var(--nw-radius-input); padding: 12px 14px; width: 100%;
  transition: border-color var(--nw-t-fast), box-shadow var(--nw-t-fast);
}
.nw-input::placeholder, .nw-textarea::placeholder { color: var(--nw-text-faint); }
.nw-input:focus, .nw-textarea:focus, .nw-select:focus {
  outline: none; border-color: var(--nw-primary); box-shadow: 0 0 0 3px var(--nw-ring);
}
.nw-textarea { min-height: 84px; resize: vertical; line-height: var(--nw-lh-snug); }

/* ---- Segment-Toggle ---- */
.nw-seg { display: inline-flex; background: var(--nw-surface-2); border: 1.5px solid var(--nw-border); border-radius: var(--nw-radius-control); padding: 3px; gap: 2px; }
.nw-seg__btn {
  font-family: var(--nw-font-body); font-size: var(--nw-fs-sm); font-weight: 600;
  color: var(--nw-text-muted); background: transparent; border: none;
  padding: 9px 16px; border-radius: calc(var(--nw-radius-control) - 3px);
  cursor: pointer; white-space: nowrap;
  transition: background var(--nw-t-fast), color var(--nw-t-fast);
}
.nw-seg__btn:hover { color: var(--nw-text); }
.nw-seg__btn[aria-pressed="true"] { background: var(--nw-primary); color: var(--nw-primary-contrast); box-shadow: var(--nw-shadow-sm); }

/* ---- Emoji-Skala ---- */
.nw-rate { display: inline-flex; gap: var(--nw-sp-2); flex-wrap: wrap; }
.nw-rate__opt {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--nw-font-body); font-size: var(--nw-fs-sm); font-weight: 700;
  color: var(--nw-text-muted); background: var(--nw-surface);
  border: 1.5px solid var(--nw-border); border-radius: var(--nw-radius-control);
  padding: 9px 13px; cursor: pointer;
  transition: border-color var(--nw-t-fast), background var(--nw-t-fast), color var(--nw-t-fast), transform var(--nw-t-fast);
}
.nw-rate__opt .nw-rate__emoji { font-size: 1.15rem; line-height: 1; filter: grayscale(0.15); }
.nw-rate__opt:hover { border-color: var(--nw-primary-soft-border); transform: translateY(-1px); }
.nw-rate__opt[aria-pressed="true"] { background: var(--nw-primary); border-color: var(--nw-primary); color: var(--nw-primary-contrast); }
.nw-rate__opt[aria-pressed="true"] .nw-rate__emoji { filter: none; }

/* ---- Sterne ---- */
.nw-stars { display: inline-flex; align-items: center; gap: 6px; }
.nw-stars__icons { color: var(--nw-star); letter-spacing: 2px; font-size: 1.05rem; line-height: 1; }
.nw-stars__val { font-weight: 600; color: var(--nw-text); font-size: var(--nw-fs-sm); }
.nw-stars__count { color: var(--nw-text-faint); font-size: var(--nw-fs-sm); }

/* ---- Badges ---- */
.nw-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--nw-fs-xs); font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--nw-radius-pill);
  background: var(--nw-surface-2); color: var(--nw-text-muted); border: 1px solid var(--nw-border);
}
.nw-badge--public { background: var(--nw-primary-soft); color: var(--nw-primary-hover); border-color: var(--nw-primary-soft-border); }
.nw-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.7; }

/* ---- Karten ---- */
.nw-card { background: var(--nw-surface); border: 1px solid var(--nw-border); border-radius: var(--nw-radius-card); padding: var(--nw-sp-6); }
.nw-card__title { font-family: var(--nw-font-display); font-size: var(--nw-fs-h3); font-weight: 700; margin-bottom: var(--nw-sp-5); }

/* ---- Tabellen (Komponente) ---- */
.nw-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--nw-fs-sm); }
.nw-table thead th {
  text-align: left; font-size: var(--nw-fs-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--nw-text-faint); padding: 12px 16px; border-bottom: 1.5px solid var(--nw-border);
}
.nw-table tbody td { padding: 14px 16px; border-bottom: 1px solid var(--nw-border); color: var(--nw-text); vertical-align: middle; }
.nw-table tbody tr:last-child td { border-bottom: none; }
.nw-table tbody tr { transition: background var(--nw-t-fast); }
.nw-table tbody tr:hover { background: var(--nw-surface-2); }
.nw-table__wrap { background: var(--nw-surface); border: 1px solid var(--nw-border); border-radius: var(--nw-radius-card); overflow: hidden; }

/* ---- Metadaten (key/value) ---- */
.nw-meta { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--nw-fs-sm); }
.nw-meta th { text-align: left; font-weight: 600; color: var(--nw-text-muted); background: var(--nw-surface-2); padding: 11px 16px; width: 38%; border-bottom: 1px solid var(--nw-border); white-space: nowrap; }
.nw-meta td { padding: 11px 16px; color: var(--nw-text); border-bottom: 1px solid var(--nw-border); }
.nw-meta tr:last-child th, .nw-meta tr:last-child td { border-bottom: none; }
.nw-meta__wrap { border: 1px solid var(--nw-border); border-radius: var(--nw-radius-card); overflow: hidden; }

/* ---- Stats ---- */
.nw-stats { display: flex; gap: var(--nw-sp-7); flex-wrap: wrap; }
.nw-stat__num { font-family: var(--nw-font-display); font-size: 2.4rem; font-weight: 700; line-height: 1; color: var(--nw-primary); letter-spacing: -0.02em; }
.nw-stat__label { font-size: var(--nw-fs-sm); color: var(--nw-text-muted); margin-top: 6px; }

/* ---- Score ---- */
.nw-score { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; }
.nw-score b { font-family: var(--nw-font-display); }
.nw-score small { color: var(--nw-text-faint); font-weight: 500; }

/* ---- "Deine Wertung" ---- */
.nw-mywert { display: flex; align-items: center; gap: var(--nw-sp-3); background: var(--nw-primary-soft); border: 1px solid var(--nw-primary-soft-border); border-radius: var(--nw-radius-card); padding: 14px 18px; }
.nw-mywert__label { font-size: var(--nw-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--nw-primary-hover); }

/* ---- Utilities ---- */
.nw-divider { height: 1px; background: var(--nw-border); border: none; margin: var(--nw-sp-5) 0; }
.nw-muted { color: var(--nw-text-muted); }
.nw-row { display: flex; gap: var(--nw-sp-3); align-items: center; flex-wrap: wrap; }