/* Typography for migrated WP content rendered inside the new templates.
   Lives in /css/rok-content.css and is loaded per-route via TemplateRenderer.
   Sits ON TOP of /css/index.css; matches the template heading / body voice
   without re-introducing Divi's chrome. */

.rok-content {
  font-family: 'Roboto', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: #333;
  max-width: 760px;
  margin-inline: auto;
}

.rok-content > * + * { margin-top: 1rem; }

.rok-content h1,
.rok-content h2,
.rok-content h3,
.rok-content h4,
.rok-content h5,
.rok-content h6 {
  font-family: 'Roboto', system-ui, sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.01em;
  line-height: 1.05;
  color: #0b0b0c;
  margin-top: 2.5rem;
  margin-bottom: .75rem;
}
.rok-content h1 { font-size: clamp(36px, 4.4vw, 56px); margin-top: 0; }
.rok-content h2 { font-size: clamp(28px, 3.2vw, 40px); }
.rok-content h3 { font-size: clamp(22px, 2.4vw, 28px); }
.rok-content h4 { font-size: 18px; letter-spacing: .02em; }

.rok-content p { margin: 0 0 1rem; color: #333; }
.rok-content p strong { color: #0b0b0c; font-weight: 700; }

.rok-content a {
  color: var(--rok-orange);
  text-decoration: underline;
  text-decoration-color: rgba(234, 91, 10, .35);
  text-underline-offset: 3px;
  transition: color .15s, text-decoration-color .15s;
}
.rok-content a:hover {
  color: #0b0b0c;
  text-decoration-color: #0b0b0c;
}

.rok-content ul, .rok-content ol {
  padding-left: 1.25rem;
  margin: 0 0 1rem;
}
.rok-content ul { list-style: none; padding-left: 0; }
.rok-content ul > li {
  position: relative;
  padding-left: 1.25rem;
  margin-bottom: .5rem;
}
.rok-content ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: .65em;
  width: 6px; height: 6px;
  background: var(--rok-orange);
}

.rok-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 14px;
}
.rok-content table th,
.rok-content table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid #ececec;
  vertical-align: top;
}
.rok-content table th {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
  color: #0b0b0c;
  background: #fafaf8;
}
.rok-content table tr:nth-child(even) td { background: #fafaf8; }

.rok-content img {
  max-width: 100%;
  height: auto;
  margin: 1.5rem 0;
}

.rok-content blockquote {
  border-left: 3px solid var(--rok-orange);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: #555;
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
}

.rok-content iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  margin: 1.5rem 0;
  background: #0b0b0c;
}

.rok-content hr {
  border: 0;
  height: 1px;
  background: #ececec;
  margin: 2rem 0;
}

.rok-content code {
  background: #f5f5f3;
  padding: 1px 6px;
  font-size: 14px;
  font-family: var(--rok-font-body);
}

/* Download-button rows that came over from the legacy site */
.rok-content .btn-container {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 2rem 0;
}
.rok-content .btn-container > div { display: contents; }
.rok-content .btn-container a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #0b0b0c;
  color: #fff;
  text-decoration: none;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: background .2s;
}
.rok-content .btn-container a:hover {
  background: var(--rok-orange);
  color: #fff;
}

/* ----- COMPARISON TABLE (.ft-table) -------------------------------------
   Migrated from WP — currently used on /produktvergleich/ +
   /en/comparison-grinding-machines/. Header row carries product image +
   link, body rows mix numeric specs with `<span class="stars">` ratings
   (★ characters). Sits inside .rok-content so it inherits link colors;
   we widen the article wrapper via :has() when an ft-table is present. */

.pg-text.rok-content:has(.ft-table) {
  max-width: none;
}

.rok-content .ft-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2rem 0;
  font-size: 14px;
  background: #fff;
  border-top: 1px solid var(--rok-border);
}
.rok-content .ft-table th,
.rok-content .ft-table td {
  padding: 16px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rok-border);
  background: transparent;
}
.rok-content .ft-table tr.head th {
  background: #fafaf8;
  padding: 24px 18px 20px;
  vertical-align: bottom;
  border-bottom: 2px solid var(--rok-ink);
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
}
.rok-content .ft-table tr.head th:first-child {
  background: transparent;
  border-bottom-color: transparent;
}
.rok-content .ft-table tr.head th img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
  margin: 0 0 12px;
  background: #fff;
}
.rok-content .ft-table tr.head th a,
.rok-content .ft-table tr.head th span > a {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -.005em;
  font-size: 15px;
  color: var(--rok-ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition: color .15s, border-color .15s;
}
.rok-content .ft-table tr.head th a:hover,
.rok-content .ft-table tr.head th span > a:hover {
  color: var(--rok-orange);
  border-bottom-color: var(--rok-orange);
}
.rok-content .ft-table tbody tr:not(.head):nth-child(even) td {
  background: #fafaf8;
}
.rok-content .ft-table tbody tr:not(.head):hover td {
  background: #fff5ec;
}
.rok-content .ft-table td:first-child {
  font-weight: 700;
  color: var(--rok-ink);
  width: 220px;
  white-space: nowrap;
}
.rok-content .ft-table .stars {
  display: inline-flex;
  gap: 2px;
  color: var(--rok-orange);
  font-size: 18px;
  line-height: 1;
  letter-spacing: 1px;
}
/* Annotation under a star rating — e.g. "Diamantscheibe „light"" for
   the Heron's concrete-grinding row. Sits on its own line, dark text,
   so the rating itself reads cleanly without widening the column. */
.rok-content .ft-table .ft-note {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--rok-ink);
  font-style: normal;
  font-weight: 400;
}
.rok-content .ft-table tbody td sup {
  font-size: .75em;
}

/* Intro lead paragraph above a comparison table — used on
   /produktvergleich/ and the EN sibling. Slightly larger than body,
   muted color, tight max width so it doesn't overrun the table band. */
.rok-content > p.ft-intro {
  font-size: 17px;
  line-height: 1.6;
  color: var(--rok-fg-muted);
  max-width: 720px;
  margin: 0 0 1.75rem;
}

/* PDP-style section head inside a .rok-content body (used on
   /produktvergleich/ to anchor the comparison table). Cancels the
   default rok-content/pg-text H2 underline so the headline rhythm
   matches the product detail pages exactly. */
.pg-text.rok-content .pdp-section-head {
  margin: 0 0 32px;
}
.pg-text.rok-content .pdp-section-head h2 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-top: 14px;
}

/* Eignungsgrade legend below the table */
.rok-content p.legende {
  font-size: 13px;
  color: var(--rok-fg-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  background: #fafaf8;
  border-left: 3px solid var(--rok-orange);
  margin: 1rem 0 2rem;
}
.rok-content p.legende .stars {
  color: var(--rok-orange);
  font-size: 16px;
  margin: 0 4px;
}

/* Mobile: horizontal scroll with sticky label column. We don't have a
   dedicated .ft-wrap from the WP HTML, so we scroll the table directly. */
@media (max-width: 900px) {
  .rok-content .ft-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rok-content .ft-table tbody,
  .rok-content .ft-table tr {
    display: table;
    width: max-content;
    min-width: 100%;
    table-layout: fixed;
  }
  .rok-content .ft-table th,
  .rok-content .ft-table td {
    min-width: 180px;
  }
  .rok-content .ft-table td:first-child,
  .rok-content .ft-table th:first-child {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 1;
    box-shadow: 1px 0 0 var(--rok-border);
  }
  .rok-content .ft-table tbody tr:not(.head):nth-child(even) td:first-child {
    background: #fafaf8;
  }
}

/* Auto-generated gallery from [et_pb_gallery]; resolved at render-time. */
.rok-content .rok-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 1.5rem 0;
}
.rok-content .rok-gallery img {
  margin: 0;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Partner-Logo-Wand: konvertiert aus dem Divi `[dipl_logo_slider]` (CAS-Seite).
   Logos sind herstellereigene Marken — `contain` (nicht `cover`) bewahrt das
   Seitenverhältnis, der ruhige graue Rahmen vereinheitlicht die Wand. */
.rok-content .rok-logos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin: 1.5rem 0;
  padding: 0;
  list-style: none;
}
.rok-content .rok-logos a,
.rok-content .rok-logos img {
  display: block;
}
.rok-content .rok-logos img {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  padding: 12px;
  background: var(--rok-white);
  border: var(--rok-border-w) solid var(--rok-border);
  border-radius: var(--rok-radius-2);
  transition: box-shadow var(--rok-dur-base) var(--rok-ease);
}
.rok-content .rok-logos a:hover img {
  box-shadow: var(--rok-shadow-md);
}