/* HROne article content — shared by the front-end (wp_enqueue_style) and the
   block editor (add_editor_style), so what you see while writing is what
   ships. Scope everything under .hrone-article-content (front end) /
   .editor-styles-wrapper (editor) so it never leaks into other templates. */

.hrone-article-content, .editor-styles-wrapper {
  font-family: Inter, sans-serif;
  color: #1C2321;
  font-size: 15px;
  line-height: 1.75;
  max-width: 760px;
}

.hrone-article-content h2, .editor-styles-wrapper h2 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  margin: 44px 0 14px;
  scroll-margin-top: 90px;
}

.hrone-article-content h3, .editor-styles-wrapper h3 {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 700;
  margin: 28px 0 10px;
}

.hrone-article-content p, .editor-styles-wrapper p { margin: 0 0 18px; }

.hrone-article-content ul, .hrone-article-content ol,
.editor-styles-wrapper ul, .editor-styles-wrapper ol {
  padding-left: 22px;
  margin: 0 0 20px;
}
.hrone-article-content li, .editor-styles-wrapper li { margin-bottom: 8px; }

.hrone-article-content img, .editor-styles-wrapper img {
  border-radius: 14px;
  max-width: 100%;
}
.hrone-article-content figcaption, .editor-styles-wrapper figcaption {
  font-size: 13px;
  color: #5B6663;
  margin-top: 8px;
}

/* Quote block */
.hrone-article-content blockquote, .editor-styles-wrapper blockquote {
  border-left: 3px solid #16A34A;
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  font-size: 15px;
  font-style: italic;
}
.hrone-article-content blockquote cite, .editor-styles-wrapper blockquote cite {
  display: block;
  font-size: 13px;
  font-style: normal;
  color: #5B6663;
  margin-top: 8px;
}

/* Table block */
.hrone-article-content table, .editor-styles-wrapper table {
  border-collapse: collapse;
  width: 100%;
  margin: 0 0 32px;
}
.hrone-article-content th, .hrone-article-content td,
.editor-styles-wrapper th, .editor-styles-wrapper td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid #E3E8E5;
  font-size: 13.5px;
  vertical-align: top;
}
.hrone-article-content thead th, .editor-styles-wrapper thead th {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #5B6663;
  font-weight: 700;
}
.hrone-article-content figure.wp-block-table,
.editor-styles-wrapper figure.wp-block-table {
  border: 1px solid #E3E8E5;
  border-radius: 12px;
  overflow: hidden;
  padding: 0;
}
.hrone-article-content figure.wp-block-table table,
.editor-styles-wrapper figure.wp-block-table table { margin: 0; }

/* Native Details block, used for the FAQ — no custom JS required */
.hrone-article-content details, .editor-styles-wrapper details {
  border-bottom: 1px solid #E3E8E5;
  padding: 14px 0;
}
.hrone-article-content summary, .editor-styles-wrapper summary {
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.hrone-article-content summary::-webkit-details-marker { display: none; }
.hrone-article-content summary::after, .editor-styles-wrapper summary::after {
  content: '+';
  float: right;
  color: #16A34A;
  font-size: 20px;
}
.hrone-article-content details[open] summary::after { content: '\2212'; }
.hrone-article-content details p, .editor-styles-wrapper details p {
  font-size: 14.5px;
  color: #5B6663;
  margin-top: 10px;
}

/* Group block style: "HROne Callout (green)" */
.is-style-hrone-callout-green {
  background: #EAF7EE;
  border: 1px solid #C7EAD2;
  border-radius: 14px;
  padding: 24px 26px;
  margin: 0 0 28px;
}
.is-style-hrone-callout-green p:last-child { margin-bottom: 0; }

/* Group block style: "HROne CTA (dark)" */
.is-style-hrone-callout-dark {
  background: #0F1713;
  border-radius: 16px;
  padding: 32px 36px;
  margin: 0 0 32px;
  color: #fff;
}
.is-style-hrone-callout-dark h3 { color: #fff; margin-top: 0; }
.is-style-hrone-callout-dark p { color: #9CA8A3; }
.is-style-hrone-callout-dark .wp-block-button__link {
  background: #16A34A;
  color: #fff;
  border-radius: 8px;
  font-weight: 700;
  padding: 11px 20px;
}

/* Group block style: "HROne Card" — used for the per-vendor fact cards */
.is-style-hrone-card {
  border: 1px solid #E3E8E5;
  border-radius: 12px;
  padding: 16px 18px;
}

/* Columns block style: "HROne Criteria Grid" — turns a Columns block into
   the 2-up bordered card grid used for the evaluation criteria. */
.is-style-hrone-criteria-grid { gap: 14px; }
.is-style-hrone-criteria-grid > .wp-block-column {
  border: 1px solid #E3E8E5;
  border-radius: 12px;
  padding: 16px 18px;
}

/* Vendor section header pattern: "01  Vendor name" */
.hrone-vendor-header {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 4px;
}
.hrone-vendor-header .hrone-vendor-number {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: #E3E8E5;
  margin: 0;
}
.hrone-vendor-header h2 { margin: 0 !important; }