/* =============================================================================
   Site style guide - clean centered marketing layout + aligned lists
   Load after readability.css / cards.css
   ============================================================================= */

:root {
  --sg-text: #212529;
  --sg-muted: #495057;
  --sg-accent: #3d4db8;
  --sg-success: #198754;
  --sg-prose-max: 42rem;
  --sg-list-gap: 0.85rem;
  --sg-icon-size: 1.1rem;
}

/* ----- Section headings: always centered ----- */
.portfolio-block > .container > .heading,
.heading,
.heading.text-center {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}

.heading h1,
.heading h2,
.heading h3,
.heading span {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.heading span {
  display: block;
  max-width: 40rem;
  color: var(--sg-muted) !important;
}

/* ----- Hero / intro blocks ----- */
.portfolio-block.block-intro,
.portfolio-block.block-intro .container,
.portfolio-block.block-intro .about-me,
.portfolio-block.block-intro .text-center {
  text-align: center !important;
}

.portfolio-block.block-intro .about-me,
.portfolio-block.block-intro .text-center.mx-auto {
  max-width: var(--sg-prose-max);
  margin-inline: auto;
}

.portfolio-block.block-intro h1,
.portfolio-block.block-intro .lead,
.portfolio-block.block-intro p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--sg-prose-max);
}

/* ----- Marketing cards: centered copy ----- */
.special-skill-item,
.special-skill-item .card-body,
.special-skill-item .card-title,
.special-skill-item .card-text,
.card.text-center,
.card.text-center .card-body,
.card.text-center .card-title,
.card.text-center .card-text,
.card.text-center .h5 {
  text-align: center !important;
}

/* ----- Prose columns (about, depth, FAQ): centered column, clean left text ----- */
[data-depth-block] .mx-auto,
[data-faq-block] .mx-auto,
.prose-column,
.portfolio-block.skills .col-lg-10.mx-auto,
.portfolio-block.skills .col-xl-8.mx-auto {
  text-align: left;
}

/* Center narrative paragraphs in the shared marketing content column */
.portfolio-block .col-lg-10.col-xl-8.mx-auto > p,
.portfolio-block .col-lg-10.col-xl-8.mx-auto > .lead {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: var(--sg-prose-max);
}

[data-depth-block] h2,
[data-faq-block] .heading,
[data-faq-block] h2,
.portfolio-block.skills .col-lg-10.mx-auto > div > h2,
.portfolio-block.skills .col-xl-8.mx-auto > div > h2 {
  text-align: center !important;
}

[data-faq-block] .mx-auto h3,
[data-faq-block] .mx-auto .h5 {
  text-align: left;
  margin-top: 0.25rem;
}

[data-faq-block] .mx-auto > .mb-4:not(:last-child) {
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* ----- Native content lists (about, articles) ----- */
.content-list,
.prose-column ul:not(.list-unstyled):not(.row),
.portfolio-block.skills .col-lg-10.mx-auto ul:not(.row),
.portfolio-block.skills .col-xl-8.mx-auto ul:not(.row),
[data-depth-block] ul:not(.row),
[data-faq-block] ul:not(.row) {
  list-style: none;
  padding: 0;
  margin: 1.25rem auto 1.5rem;
  max-width: var(--sg-prose-max);
  text-align: left;
}

.content-list li,
.prose-column ul:not(.list-unstyled):not(.row) li,
.portfolio-block.skills .col-lg-10.mx-auto ul:not(.row) li,
.portfolio-block.skills .col-xl-8.mx-auto ul:not(.row) li,
[data-depth-block] ul:not(.row) li,
[data-faq-block] ul:not(.row) li {
  position: relative;
  padding-left: 1.35rem;
  margin-bottom: var(--sg-list-gap);
  line-height: 1.65;
  color: var(--sg-muted);
  text-align: left;
}

.content-list li:last-child,
.prose-column ul:not(.list-unstyled):not(.row) li:last-child,
.portfolio-block.skills .col-lg-10.mx-auto ul:not(.row) li:last-child,
.portfolio-block.skills .col-xl-8.mx-auto ul:not(.row) li:last-child {
  margin-bottom: 0;
}

.content-list li::before,
.prose-column ul:not(.list-unstyled):not(.row) li::before,
.portfolio-block.skills .col-lg-10.mx-auto ul:not(.row) li::before,
.portfolio-block.skills .col-xl-8.mx-auto ul:not(.row) li::before,
[data-depth-block] ul:not(.row) li::before,
[data-faq-block] ul:not(.row) li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--sg-accent);
}

.content-list li strong,
.portfolio-block.skills .col-lg-10.mx-auto ul li strong,
.portfolio-block.skills .col-xl-8.mx-auto ul li strong {
  color: var(--sg-text);
}

/* ----- Icon checklists (services tiers, etc.) ----- */
.list-unstyled.text-start,
.card .list-unstyled {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 1.25rem !important;
  text-align: left !important;
  width: 100%;
}

.list-unstyled.text-start li,
.card .list-unstyled li {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.75rem;
  margin: 0 0 var(--sg-list-gap) !important;
  padding: 0 !important;
  line-height: 1.55;
  text-align: left !important;
}

.list-unstyled.text-start li:last-child,
.card .list-unstyled li:last-child {
  margin-bottom: 0 !important;
}

.list-unstyled.text-start li i.fa-check,
.list-unstyled.text-start li i.fa,
.card .list-unstyled li i.fa-check,
.card .list-unstyled li i.fa {
  flex: 0 0 var(--sg-icon-size);
  width: var(--sg-icon-size);
  margin: 0.2rem 0 0 !important;
  padding: 0 !important;
  text-align: center;
  color: var(--sg-success) !important;
}

.list-unstyled.text-start li span,
.card .list-unstyled li span {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left !important;
  color: var(--sg-muted) !important;
  line-height: 1.55;
}

/* In centered tier cards, keep the checklist as a tidy left-aligned block */
.card.text-center .list-unstyled.text-start {
  display: inline-block;
  width: auto;
  max-width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
}

/* ----- Feature rows (div + fa-check pattern on migration pages) -----
   Absolute icon + flowing text (not multi-child flex). Flex was treating
   <strong> and the trailing text node as separate items, which squeezed
   labels like "vs Hyper-V:" into a tiny column and wrapped mid-phrase.
   enhanceHtml also wraps copy in .feature-row__body for consistency. ----- */
.feature-row,
.portfolio-block.website .text > div > .mb-3:has(> .fa),
.portfolio-block.website .text > div > .mb-2:has(> .fa),
.card-body > div > .mb-3:has(> .fa-check),
.card-body > div > .mb-2:has(> .fa-check),
.card-body > div > .mb-3:has(> .fa-times),
.card-body > div > .mb-2:has(> .fa-times) {
  display: block !important;
  position: relative;
  padding-left: calc(var(--sg-icon-size) + 0.75rem) !important;
  text-align: left !important;
  margin-bottom: var(--sg-list-gap) !important;
  line-height: 1.55;
  color: inherit;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.feature-row > .fa-check,
.feature-row > .fa-times,
.feature-row > .fa,
.portfolio-block.website .text > div > .mb-3 > .fa-check,
.portfolio-block.website .text > div > .mb-3 > .fa,
.portfolio-block.website .text > div > .mb-2 > .fa-check,
.portfolio-block.website .text > div > .mb-2 > .fa,
.card-body > div > .mb-3:has(> .fa-check) > .fa-check,
.card-body > div > .mb-2:has(> .fa-check) > .fa-check,
.card-body > div > .mb-3:has(> .fa-times) > .fa-times,
.card-body > div > .mb-2:has(> .fa-times) > .fa-times {
  position: absolute !important;
  left: 0 !important;
  top: 0.25rem !important;
  width: var(--sg-icon-size);
  margin: 0 !important;
  padding: 0 !important;
  text-align: center;
  flex: none;
}

.feature-row > .fa-check,
.portfolio-block.website .text > div > .mb-3 > .fa-check,
.portfolio-block.website .text > div > .mb-2 > .fa-check,
.card-body > div > .mb-3:has(> .fa-check) > .fa-check,
.card-body > div > .mb-2:has(> .fa-check) > .fa-check {
  color: var(--sg-success) !important;
}

.feature-row > .feature-row__body,
.feature-row > span:not(.fa) {
  display: inline;
  text-align: left !important;
}

.feature-row > .feature-row__body strong,
.feature-row > strong,
.feature-row span strong {
  display: inline;
  white-space: normal;
}

/* Remove Bootstrap me-2 side margin - absolute left owns spacing */
.feature-row > .fa.me-2,
.portfolio-block.website .text .fa.me-2,
.card-body .mb-3 > .fa.me-2,
.card-body .mb-2 > .fa.me-2 {
  margin-right: 0 !important;
}

/* ----- Nested white cards in gradient sections (audits, health checks, cost comparisons) -----
   Center the content block in the card; keep checklist/cost rows as a tidy
   left-aligned column inside that centered block (icons stay aligned). ----- */
.portfolio-block.website .card:not(.special-skill-item) {
  text-align: center !important;
  background-color: #ffffff !important;
  color: var(--sg-text) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  padding: clamp(1.1rem, 2.5vw, 1.5rem) !important;
  color: var(--sg-text) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > h3,
.portfolio-block.website .card:not(.special-skill-item) .card-body > h4,
.portfolio-block.website .card:not(.special-skill-item) .card-body > p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 28rem;
  width: 100%;
  color: var(--sg-text) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > h4 {
  margin-bottom: 0.85rem !important;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--sg-text) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p {
  margin-bottom: 0.75rem !important;
  line-height: 1.45;
  color: var(--sg-text) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p.mt-3 {
  margin-top: 1rem !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p.text-success,
.portfolio-block.website .card:not(.special-skill-item) .card-body > p:last-child {
  margin-bottom: 0 !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p.text-success {
  color: var(--sg-success) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p.text-success strong {
  color: var(--sg-success) !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > p .text-muted,
.portfolio-block.website .card:not(.special-skill-item) .text-muted {
  color: var(--sg-muted) !important;
}

/* Checklist / cost / feature lists: centered column, left-aligned rows */
.portfolio-block.website .card:not(.special-skill-item) .card-body > div {
  width: 100%;
  max-width: 26rem;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0.35rem;
  text-align: left !important;
  color: var(--sg-text) !important;
}

/* Plain cost lines (no check icons): compact stacked list - WCAG AA on white */
.portfolio-block.website .card:not(.special-skill-item) .card-body > div:not(:has(.fa-check)):not(:has(.feature-row)) > div {
  text-align: left !important;
  margin: 0 0 0.2rem !important;
  padding: 0 !important;
  line-height: 1.45 !important;
  color: #343a40 !important;
  font-size: 0.95rem !important;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > div:has(.feature-row),
.portfolio-block.website .card:not(.special-skill-item) .card-body > div:has(.fa-check) {
  margin-bottom: 0.5rem;
}

.portfolio-block.website .card:not(.special-skill-item) .card-body > .btn,
.portfolio-block.website .card:not(.special-skill-item) .card-body > a.btn {
  align-self: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ----- CTAs ----- */
.portfolio-block .d-flex.justify-content-center,
.about-me .d-flex,
.block-intro .d-flex.flex-wrap {
  justify-content: center !important;
}

/* ----- Topic hub ----- */
[data-seo-topic-hub] .heading {
  text-align: center !important;
}

[data-seo-topic-hub] ul.row {
  justify-content: center;
}

[data-seo-topic-hub] li,
[data-seo-topic-hub] a.footer-nav-link {
  text-align: center;
}

/* ----- Website gradient copy ----- */
.portfolio-block.website .text {
  text-align: center !important;
}

.portfolio-block.website .text > h3 {
  text-align: center !important;
  margin-bottom: 1.25rem;
}

.portfolio-block.website .text > div {
  display: block;
  max-width: 36rem;
  width: 100%;
  text-align: left !important;
  margin-inline: auto;
}

.portfolio-block.website .text > .mt-4,
.portfolio-block.website .text > .mt-5 {
  text-align: center;
}

.portfolio-block.website .text .d-flex {
  justify-content: center !important;
}