/* cards */

.content .cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0px;
  text-align: left;
  border: 1px solid var(--border);
}

.content .widecards {
  text-align: left;
  border: 1px solid var(--border);
}

.cntnt_showfaqs .weblet_content h2,
.cntnt_faq_list .weblet_content h2 {
  /* display: block; */
  /* margin: 0 1rem;*/
}
.cntnt_showfaqs .weblet_content img,
.cntnt_faq_list .weblet_content img {
  /* display: block; */
  margin: 0;
}
.cntnt_showfaqs .weblet_content .cardheader,
.cntnt_faq_list .weblet_content .cardheader {
    display: inline-flex;
}
.cntnt_showfaqs .weblet_content p,
.cntnt_faq_list .weblet_content p {
}

.content .card {
  position: relative;
  background: var(--bg-card);
  padding: 1rem;
  /* padding-top: 32px; */
  border: 1px solid var(--border);
}
.dotted {
  border: 3px dotted var(--border) !important;
}
.dashed {
  border: 2px dashed var(--border) !important;
}
.left_accent {
    border-left: 5px solid var(--accent) !important;
}
.left_warning {
    border-left: 5px solid var(--warning) !important;
}
.top_accent {
    border-top: 5px solid var(--accent) !important;
}
.top_warning {
    border-top: 5px solid var(--warning) !important;
}
.content .card h2 {
    color: var(--warning)
}
    /* Blockquotes */
.content blockquote {
      border-left: 4px solid #ddd;
      padding-left: 1rem;
      margin: 1.5rem 0;
      font-style: italic;
      color: var(--text-secondary);
    }

    /* Tables */
    .content details .table-wrapper,
    .content .content_item_description .table-wrapper {
      overflow-x: auto;
    }
    .content details table,
    .content .content_item_description table {
      width: 100%;
      border-collapse: collapse;
      margin: 2rem 0;
      font-size: 16px;
      /* background: #fff;*/
    }
    .content details table {
      margin: 0;
    }
    .content details th, 
    .content details td,
    .content .content_item_description th, 
    .content .content_item_description td {
      padding: 0.75rem 1rem;
      text-align: left;
      border-bottom: 1px solid #e6e6e6;
    }
    .content details th,
    .content .content_item_description th {
      background: var(--bg-th);
      font-weight: 600;
      /* color: #333;*/
    }
    .content details tr:nth-child(even),
    .content .content_item_description tr:nth-child(even) {
      background: var(--bg-tr);
    }
    .content details tr:hover,
    .content .content_item_description tr:hover {
      background: var(--bg-tr-hover);
    }

.content_list_description img,
.content_item_description img,
.content_list_image img,
.content_item_image img {
      display: block;
      /* margin: 1.5rem auto; */
      max-width: 100%;
      height: auto;
      margin-bottom: 1.2em;
}

.img_align_left {
    margin: 0 1em 1em 0;
}
.img_align_right {
    margin: 0 0 1em 1em;
}
/* --------------------------------------------------------------------------------------------------------
 * specifically for forms
 */
/* --------------------------------------------------------------------------------------------------------
 * specifically for news archive in table
 */

.html_news_archive a:link,
.html_news_archive a:visited {
	text-decoration: none;
}
.html_news_archive a:hover,
.html_news_archive a:active {
	text-decoration: underline;
}
.html_news_archive ul {
	list-style: none;
}
.html_news_archive ul ul {
	margin-left: 16px;
}


/* HSP architectural content refinements */
.content .cards,
.content .widecards,
.assess .cards,
.assess .result-cards {
  gap: 18px;
  border: none;
  display: grid;
}

.content .card,
.assess .card,
.assess .result-card,
.box {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 28px;
}

.left_accent,
.top_accent {
  border-color: var(--border) !important;
  border-left: 4px solid var(--accent) !important;
}

.left_warning,
.top_warning {
  border-color: var(--border) !important;
  border-left: 4px solid var(--accent) !important;
}

.content .card h2 {
  color: var(--text-primary);
}

.content blockquote {
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
  color: var(--text-primary);
  font-style: normal;
  font-weight: 650;
}

.content details th,
.content .content_item_description th,
.content .content_list_description th {
  background: var(--structure-soft);
  color: var(--structure);
}

.content details tr:nth-child(even),
.content .content_item_description tr:nth-child(even),
.content .content_list_description tr:nth-child(even) {
  background: #fff;
}

.content details tr:hover,
.content .content_item_description tr:hover,
.content .content_list_description tr:hover {
  background: var(--accent-soft);
}

/* Optional layout helpers for authored CMS HTML */
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
}

.diagram {
  background: var(--structure-soft);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.04);
}

.loop {
  display: grid;
  gap: 14px;
}

.loop-horizontal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 34px 0;
}

.loop-item,
.loop-horizontal span {
  padding: 16px 18px;
  border-radius: 16px;
  background: white;
  text-align: center;
  font-weight: 800;
  color: var(--structure);
}

.loop-item.highlight,
.loop-horizontal span.highlight {
  background: var(--accent);
  color: #fff;
}

.arrow {
  text-align: center;
  color: var(--text-muted);
  font-size: 20px;
}

.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: 18px;
  margin-top: 42px;
  margin-bottom: 42px;
}

.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.step span {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: white;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  margin-bottom: 18px;
}

.card-accent {
  background: var(--accent-soft) !important;
  border-color: #e7a28f !important;
}

.card-structure {
  background: var(--structure-soft) !important;
}

@media (max-width: 900px) {
  .hero-grid,
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}