/**
 * Novelumo Article Layouts: components
 */

.novelumo-article.nla-root .nla-lead,
.novelumo-article.nla-root .nla-audience,
.novelumo-article.nla-root .nla-callout,
.novelumo-article.nla-root .nla-example,
.novelumo-article.nla-root .nla-checklist,
.novelumo-article.nla-root .nla-procon,
.novelumo-article.nla-root .nla-table-wrap,
.novelumo-article.nla-root .nla-faq,
.novelumo-article.nla-root .nla-source {
  margin: var(--nla-space-component) 0;
}

.novelumo-article.nla-root .nla-lead {
  padding: 25px 27px;
  border: 1px solid #d7e4f4;
  border-left: 6px solid var(--nla-color-primary);
  border-radius: var(--nla-radius);
  background: #fbfdff;
}

.novelumo-article.nla-root .nla-audience {
  padding: 24px 26px;
  border: 1px solid #b9d3f2;
  border-radius: var(--nla-radius);
  background: var(--nla-color-info-bg);
}

.novelumo-article.nla-root .nla-audience__title,
.novelumo-article.nla-root .nla-callout__title {
  margin: 0 0 12px;
  color: var(--nla-color-primary-dark);
  font-weight: 700;
}

.novelumo-article.nla-root .nla-audience__list {
  margin: 0;
  padding-left: 1.45em;
}

.novelumo-article.nla-root .nla-callout {
  padding: 23px 25px;
  border: 1px solid var(--nla-color-border);
  border-radius: var(--nla-radius);
  background: #fff;
}

.novelumo-article.nla-root .nla-callout--summary {
  border-left: 6px solid var(--nla-color-primary);
  background: var(--nla-color-info-bg);
}

.novelumo-article.nla-root .nla-callout--note {
  border-color: #f1d18a;
  border-left: 6px solid #e59a00;
  background: #fff7df;
}

.novelumo-article.nla-root .nla-callout--note .nla-callout__title {
  color: #8a5600;
}

.novelumo-article.nla-root .nla-callout--warning {
  border-color: #efb7b2;
  border-left: 6px solid var(--nla-color-bad);
  background: var(--nla-color-bad-bg);
}

.novelumo-article.nla-root .nla-callout--warning .nla-callout__title {
  color: var(--nla-color-bad);
}

.novelumo-article.nla-root .nla-example {
  overflow: hidden;
  border: 1px solid var(--nla-color-border);
  border-radius: var(--nla-radius);
  background: #fff;
}

.novelumo-article.nla-root .nla-example__label {
  margin: 0;
  padding: 9px 20px;
  font-weight: 700;
}

.novelumo-article.nla-root .nla-example__body {
  padding: 22px 24px;
}

.novelumo-article.nla-root .nla-example--good {
  border-color: #b8dfba;
  background: var(--nla-color-good-bg);
}

.novelumo-article.nla-root .nla-example--good .nla-example__label {
  background: #d9efda;
  color: var(--nla-color-good);
}

.novelumo-article.nla-root .nla-example--bad {
  border-color: #f0bbb7;
  background: var(--nla-color-bad-bg);
}

.novelumo-article.nla-root .nla-example--bad .nla-example__label {
  background: #fbd7d4;
  color: var(--nla-color-bad);
}

.novelumo-article.nla-root .nla-example--neutral .nla-example__label {
  background: #e8f1fb;
  color: var(--nla-color-primary-dark);
}

.novelumo-article.nla-root .nla-steps {
  margin: 28px 0 32px;
  padding: 0;
  list-style: none;
  counter-reset: nla-step;
}

.novelumo-article.nla-root .nla-step {
  position: relative;
  min-height: 32px;
  margin: 0;
  padding: 1px 0 12px 42px;
  counter-increment: nla-step;
}

.novelumo-article.nla-root .nla-step + .nla-step {
  margin-top: 8px;
}

.novelumo-article.nla-root .nla-step::before {
  content: counter(nla-step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: var(--nla-color-primary-dark);
  color: #fff;
  font-size: 0.88em;
  font-weight: 700;
  line-height: 1;
}

.novelumo-article.nla-root .nla-step__title {
  display: block;
  margin-bottom: 2px;
  color: var(--nla-color-primary-dark);
  font-weight: 700;
}

.novelumo-article.nla-root .nla-step > :last-child {
  margin-bottom: 0;
}

.novelumo-article.nla-root .nla-checklist {
  padding: 23px 25px;
  border: 1px solid #b9d3f2;
  border-radius: var(--nla-radius);
  background: #f7fbff;
  list-style: none;
}

.novelumo-article.nla-root .nla-checklist li {
  position: relative;
  padding-left: 1.8em;
}

.novelumo-article.nla-root .nla-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--nla-color-primary);
  font-weight: 700;
}

.novelumo-article.nla-root .nla-procon {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 20px;
}

.novelumo-article.nla-root .nla-procon__item {
  display: flex;
  height: 100%;
  flex-direction: column;
  padding: 22px 24px;
  border: 1px solid var(--nla-color-border);
  border-radius: var(--nla-radius);
}

.novelumo-article.nla-root .nla-procon__item--pro {
  background: var(--nla-color-good-bg);
}

.novelumo-article.nla-root .nla-procon__item--con {
  background: var(--nla-color-bad-bg);
}

.novelumo-article.nla-root .nla-procon__title {
  margin: 0 0 10px;
  font-weight: 700;
}

.novelumo-article.nla-root .nla-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--nla-color-border);
  border-radius: 10px;
  -webkit-overflow-scrolling: touch;
}

.novelumo-article.nla-root .nla-table {
  width: 100%;
  min-width: 620px;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  background: #fff;
}

.novelumo-article.nla-root .nla-table th,
.novelumo-article.nla-root .nla-table td {
  padding: 13px 15px;
  border: 0;
  border-right: 1px solid var(--nla-color-border);
  border-bottom: 1px solid var(--nla-color-border);
  text-align: left;
  vertical-align: top;
}

.novelumo-article.nla-root .nla-table th {
  background: #3f6f9f;
  color: #fff;
  font-weight: 700;
}

.novelumo-article.nla-root .nla-table tr:last-child td {
  border-bottom: 0;
}

.novelumo-article.nla-root .nla-table th:last-child,
.novelumo-article.nla-root .nla-table td:last-child {
  border-right: 0;
}

.novelumo-article.nla-root .nla-faq {
  border-top: 1px solid var(--nla-color-border);
}

.novelumo-article.nla-root .nla-faq__item {
  border-bottom: 1px solid var(--nla-color-border);
}

.novelumo-article.nla-root .nla-faq__item[open] {
  background: #fff;
}

.novelumo-article.nla-root .nla-faq__item[open] .nla-faq__question {
  border-bottom: 1px solid var(--nla-color-border);
  background: #f8fafc;
}

.novelumo-article.nla-root .nla-faq__question {
  position: relative;
  padding: 18px 42px 18px 44px;
  color: var(--nla-color-primary-dark);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.novelumo-article.nla-root .nla-faq__question::-webkit-details-marker {
  display: none;
}

.novelumo-article.nla-root .nla-faq__question::before {
  content: "Q";
  position: absolute;
  left: 10px;
  color: var(--nla-color-primary);
  font-weight: 700;
}

.novelumo-article.nla-root .nla-faq__question::after {
  content: "+";
  position: absolute;
  right: 12px;
  color: var(--nla-color-muted);
  font-size: 1.3em;
  line-height: 1;
}

.novelumo-article.nla-root .nla-faq__item[open] .nla-faq__question::after {
  content: "−";
}

.novelumo-article.nla-root .nla-faq__answer {
  padding: 0 18px 22px 44px;
}

.novelumo-article.nla-root .nla-source {
  padding: 18px 20px;
  border: 1px solid var(--nla-color-border);
  border-radius: 9px;
  background: #fafbfc;
  color: var(--nla-color-muted);
  font-size: 0.9em;
}

@media (max-width: 767px) {
  .novelumo-article.nla-root .nla-lead,
  .novelumo-article.nla-root .nla-audience,
  .novelumo-article.nla-root .nla-callout,
  .novelumo-article.nla-root .nla-example__body,
  .novelumo-article.nla-root .nla-checklist,
  .novelumo-article.nla-root .nla-procon__item {
    padding: 19px;
  }

  .novelumo-article.nla-root .nla-procon {
    grid-template-columns: 1fr;
  }

  .novelumo-article.nla-root .nla-step {
    padding-left: 38px;
  }

  .novelumo-article.nla-root .nla-step::before {
    width: 28px;
    height: 28px;
  }
}