/* ================================================================
   VMS — GUTENBERG BLOG SCOPED CSS
   Client: MR Concrete Iowa
   Built: 2026-06-24
   Scope: .single-post .entry-content (frontend)
          .editor-styles-wrapper (Gutenberg editor)
   ================================================================ */


/* ================================================================
   CONTENT WRAPPER
   ================================================================ */
.single-post .entry-content,
.editor-styles-wrapper {
  font-family:  "Roboto", sans-serif;
  font-size:    1.2rem;
  color:        #1E1E1E;
  line-height:  1.65;
}


/* ================================================================
   HEADINGS
   ================================================================ */
.single-post .entry-content h1,
.editor-styles-wrapper h1 {
  font-family:  "IBM Plex Sans Devanagari", sans-serif !important;
  font-size:    2.8rem;
  font-weight:  600;
  color:        #000000 !important;
  line-height:  1.3em;
  margin:       2.5rem 0 1rem !important;
}

.single-post h1.wp-block-heading,
.single-post .entry-title {
  font-size:    2.7rem;
  line-height:  1.15em;
  margin-top:   1rem !important;
}

.single-post .entry-content h2,
.editor-styles-wrapper h2 {
  font-family:  "IBM Plex Sans Devanagari", sans-serif !important;
  font-size:    2.2rem;
  font-weight:  600;
  color:        #000000 !important;
  line-height:  1.3em;
  margin:       2.5rem 0 1rem !important;
}

.single-post .entry-content h3,
.editor-styles-wrapper h3 {
  font-family:  "IBM Plex Sans Devanagari", sans-serif !important;
  font-size:    2.6rem;
  font-weight:  600;
  color:        #000000 !important;
  line-height:  1.3em;
  margin:       2rem 0 0.75rem !important;
}

.single-post .entry-content h4,
.editor-styles-wrapper h4 {
  font-family:    "Roboto", sans-serif !important;
  font-size:      1rem;
  font-weight:    700;
  color:          #000000 !important;
  line-height:    1.4;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin:         1.75rem 0 0.5rem !important;
}

.single-post .entry-content h5,
.editor-styles-wrapper h5 {
  font-family:  "Roboto", sans-serif !important;
  font-size:    0.95rem;
  font-weight:  700;
  color:        #000000 !important;
  line-height:  1.4;
  margin:       1.5rem 0 0.5rem !important;
}

.single-post .entry-content h6,
.editor-styles-wrapper h6 {
  font-family:  "Roboto", sans-serif !important;
  font-size:    0.85rem;
  font-weight:  700;
  color:        #000000 !important;
  line-height:  1.4;
  margin:       1.25rem 0 0.5rem !important;
}

.single-post .entry-content h2 + h3,
.single-post .entry-content h3 + h4,
.editor-styles-wrapper h2 + h3,
.editor-styles-wrapper h3 + h4 {
  margin-top: 0.5rem !important;
}


/* ================================================================
   PARAGRAPH
   ================================================================ */
.single-post .entry-content p,
.editor-styles-wrapper p {
  font-size:    1.2rem;
  font-weight:  400;
  color:        #1E1E1E;
  line-height:  1.65;
  margin:       0 0 1.6em;
}

/* Lead paragraph — add class "lead" to opening paragraph block */
.single-post .entry-content p.lead,
.editor-styles-wrapper p.lead {
  font-size:     1.35rem;
  line-height:   1.7;
  color:         #000000;
  margin-bottom: 2em;
}


/* ================================================================
   LISTS
   ================================================================ */
.single-post .entry-content ul,
.single-post .entry-content ol,
.editor-styles-wrapper ul,
.editor-styles-wrapper ol {
  font-size:   1.2rem;
  color:       #1E1E1E;
  line-height: 1.25;
  margin:      0 0 1.6em 0;
  padding:     0;
}

.single-post .entry-content ul,
.editor-styles-wrapper ul {
  list-style: none;
}

.single-post .entry-content ul li,
.editor-styles-wrapper ul li {
  position:      relative;
  padding-left:  1.5rem;
  margin-bottom: 0.5rem;
}

/* Default: SVG circle-check */
.single-post .entry-content ul li::before,
.editor-styles-wrapper ul li::before {
  content:           '' !important;
  position:          absolute;
  left:              0;
  top:               0.2em;
  width:             16px !important;
  height:            16px !important;
  border-radius:     0 !important;
  background-color:  transparent !important;
  background-image:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23D60000' stroke='%23D60000' stroke-width='1.5' d='M 25 2 C 12.309534 2 2 12.309534 2 25 C 2 37.690466 12.309534 48 25 48 C 37.690466 48 48 37.690466 48 25 C 48 12.309534 37.690466 2 25 2 z M 25 4 C 36.609534 4 46 13.390466 46 25 C 46 36.609534 36.609534 46 25 46 C 13.390466 46 4 36.609534 4 25 C 4 13.390466 13.390466 4 25 4 z M 34.988281 14.988281 A 1.0001 1.0001 0 0 0 34.171875 15.439453 L 23.970703 30.476562 L 16.679688 23.710938 A 1.0001 1.0001 0 1 0 15.320312 25.177734 L 24.316406 33.525391 L 35.828125 16.560547 A 1.0001 1.0001 0 0 0 34.988281 14.988281 z'%3E%3C%2Fpath%3E%3C%2Fsvg%3E") !important;
  background-repeat: no-repeat;
  background-size:   contain;
}

/* Dot — add class "list-dot" to ul block */
.single-post .entry-content ul.list-dot li::before,
.editor-styles-wrapper ul.list-dot li::before {
  content:          '' !important;
  background-image: none !important;
  background-color: #D60000 !important;
  border-radius:    50% !important;
  width:            8px !important;
  height:           8px !important;
  top:              0.4em !important;
}

/* Checkmark — add class "list-check" to ul block */
.single-post .entry-content ul.list-check li::before,
.editor-styles-wrapper ul.list-check li::before {
  content:          '✓' !important;
  background-image: none !important;
  background-color: transparent !important;
  width:            auto !important;
  height:           auto !important;
  border-radius:    0 !important;
  top:              0.1em !important;
  color:            #D60000;
  font-weight:      700;
  font-size:        0.9rem;
}

.single-post .entry-content .wp-block-social-links li::before,
.editor-styles-wrapper .wp-block-social-links li::before {
  display: none !important;
}

/* Arrow — add class "list-arrow" to ul block */
.single-post .entry-content ul.list-arrow li::before,
.editor-styles-wrapper ul.list-arrow li::before {
  content:          '→' !important;
  background-image: none !important;
  background-color: transparent !important;
  width:            auto !important;
  height:           auto !important;
  border-radius:    0 !important;
  top:              0.1em !important;
  color:            #D60000;
  font-size:        0.9rem;
}

.single-post .entry-content ol,
.editor-styles-wrapper ol {
  list-style:   decimal;
  padding-left: 1.5rem;
}

.single-post .entry-content ol li,
.editor-styles-wrapper ol li {
  padding-left:  0.4rem;
  margin-bottom: 0.5rem;
}

.single-post .entry-content ol li::marker,
.editor-styles-wrapper ol li::marker {
  color:       #D60000;
  font-weight: 700;
}

.single-post .entry-content ul ul,
.single-post .entry-content ol ol,
.single-post .entry-content ul ol,
.single-post .entry-content ol ul,
.editor-styles-wrapper ul ul,
.editor-styles-wrapper ol ol,
.editor-styles-wrapper ul ol,
.editor-styles-wrapper ol ul {
  margin-top:    0.4rem;
  margin-bottom: 0.4rem;
}


/* ================================================================
   INLINE SPANS
   highlight2 — pill label, light gray background
   highlight3 — pill label, dark tint background
   ================================================================ */
.single-post .entry-content span.highlight2,
.editor-styles-wrapper span.highlight2 {
  color:            #D60000;
  font-family:      "Roboto", sans-serif;
  font-weight:      600;
  background-color: rgb(238, 238, 238);
  border-radius:    50px;
  padding:          5px 12px;
}

.single-post .entry-content span.highlight3,
.editor-styles-wrapper span.highlight3 {
  color:            #D60000;
  font-family:      "Roboto", sans-serif;
  font-weight:      600;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius:    50px;
  padding:          5px 12px;
}


/* ================================================================
   CALLOUT BLOCK
   Group block > Additional CSS Class: callout-block
   Best for: key insights, expert tips, important notes
   ================================================================ */
.single-post .entry-content .callout-block,
.editor-styles-wrapper .callout-block {
  background-color: #F5F5F5;
  border-left:      3px solid #D60000;
  padding:          1.5rem 2rem;
  margin:           2rem 0;
}

.single-post .entry-content .callout-block p,
.editor-styles-wrapper .callout-block p {
  margin-bottom: 0;
  font-size:     1.1rem;
  line-height:   1.7;
}

.single-post .entry-content .callout-block p:not(:last-child),
.editor-styles-wrapper .callout-block p:not(:last-child) {
  margin-bottom: 0.75rem;
}

.single-post .entry-content .callout-block strong,
.editor-styles-wrapper .callout-block strong {
  color: #000000;
}

.single-post .entry-content .callout-block ul,
.single-post .entry-content .callout-block ol,
.editor-styles-wrapper .callout-block ul,
.editor-styles-wrapper .callout-block ol {
  margin-bottom: 0;
}


/* ================================================================
   HIGHLIGHT BLOCK
   Group block > Additional CSS Class: highlight-block
   Best for: neutral callouts, stats, supporting content
   ================================================================ */
.single-post .entry-content .highlight-block,
.editor-styles-wrapper .highlight-block {
  background-color: #F6F6F6;
  border-radius:    6px;
  padding:          1.75rem 2rem;
  margin:           2rem 0;
}

.single-post .entry-content .highlight-block p,
.editor-styles-wrapper .highlight-block p {
  margin-bottom: 0;
}

.single-post .entry-content .highlight-block p:not(:last-child),
.editor-styles-wrapper .highlight-block p:not(:last-child) {
  margin-bottom: 0.75rem;
}


/* ================================================================
   BLOCKQUOTE
   ================================================================ */
.single-post .entry-content blockquote,
.single-post .entry-content .wp-block-quote,
.editor-styles-wrapper blockquote,
.editor-styles-wrapper .wp-block-quote {
  border-left: 3px solid #D60000;
  padding:     0.25rem 1.5rem;
  margin:      2rem 0;
  background:  transparent;
}

.single-post .entry-content blockquote p,
.single-post .entry-content .wp-block-quote p,
.editor-styles-wrapper blockquote p,
.editor-styles-wrapper .wp-block-quote p {
  font-size:     1.3rem;
  line-height:   1.6;
  color:         #000000;
  font-style:    italic;
  margin-bottom: 0;
}

.single-post .entry-content .wp-block-quote cite,
.single-post .entry-content .wp-block-quote footer,
.editor-styles-wrapper .wp-block-quote cite,
.editor-styles-wrapper .wp-block-quote footer {
  font-size:  0.95rem;
  font-style: normal;
  color:      #888888;
  margin-top: 0.5rem;
  display:    block;
}


/* ================================================================
   SEPARATOR
   ================================================================ */
.single-post .entry-content hr,
.single-post .entry-content .wp-block-separator,
.editor-styles-wrapper hr,
.editor-styles-wrapper .wp-block-separator {
  border:     none;
  border-top: 2px solid #E0E0E0;
  margin:     3rem 0;
}

.single-post .entry-content .wp-block-separator.is-style-wide,
.editor-styles-wrapper .wp-block-separator.is-style-wide {
  border-top-color: #E0E0E0;
  border-top-width: 1px;
}


/* ================================================================
   BUTTONS
   ================================================================ */
.single-post .entry-content .wp-block-button .wp-block-button__link,
.editor-styles-wrapper .wp-block-button .wp-block-button__link {
  font-family:      "Roboto", sans-serif;
  font-weight:      500;
  font-size:        1rem;
  padding:          12px 24px;
  border-radius:    7px;
  border:           1px solid #D60000;
  background-color: #D60000;
  color:            #FFFFFF;
  text-decoration:  none;
  transition:       background-color 0.2s ease, color 0.2s ease;
}

.single-post .entry-content .wp-block-button .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button .wp-block-button__link:hover {
  background-color: transparent;
  color:            #D60000;
}

.single-post .entry-content .wp-block-button.is-style-outline .wp-block-button__link,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color:            #D60000;
}

.single-post .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: #D60000;
  color:            #FFFFFF;
}


/* ================================================================
   IMAGES
   ================================================================ */
.single-post .entry-content figure,
.editor-styles-wrapper figure {
  margin: 2rem 0;
}

.single-post .entry-content figure img,
.editor-styles-wrapper figure img {
  border-radius: 7px;
  display:       block;
  max-width:     100%;
  height:        auto;
}

.single-post .entry-content figcaption,
.single-post .entry-content .wp-element-caption,
.editor-styles-wrapper figcaption,
.editor-styles-wrapper .wp-element-caption {
  font-size:  0.9rem;
  color:      #888888;
  text-align: center;
  margin-top: 0.5rem;
  font-style: italic;
}

/* ================================================================
   BLOG HERO IMAGE
   ================================================================ */

.single-post figure.hero-image {
    width: 1000px;
    max-width: calc(100vw - 80px);
    margin: 2rem auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

.single-post figure.hero-image img {
    width: 100%;
    display: block;
    border-radius: 7px;
}


/* ================================================================
   INLINE ELEMENTS
   ================================================================ */
.single-post .entry-content a,
.editor-styles-wrapper a {
  color:                 #D60000;
  text-decoration:       underline;
  text-underline-offset: 3px;
}

.single-post .entry-content a:hover,
.editor-styles-wrapper a:hover {
  text-decoration: none;
}

.single-post .entry-content strong,
.single-post .entry-content b,
.editor-styles-wrapper strong,
.editor-styles-wrapper b {
  font-weight: 700;
  color:       #000000;
}

.single-post .entry-content em,
.single-post .entry-content i,
.editor-styles-wrapper em,
.editor-styles-wrapper i {
  font-style: italic;
}


/* ================================================================
   TABLE
   ================================================================ */
.single-post .entry-content table,
.editor-styles-wrapper table {
  width:           100%;
  border-collapse: collapse;
  margin:          2rem 0;
  font-size:       1rem;
}

.single-post .entry-content table th,
.editor-styles-wrapper table th {
  background-color: #D60000;
  color:            #FFFFFF;
  font-weight:      600;
  padding:          12px 16px;
  text-align:       left;
}

.single-post .entry-content table td,
.editor-styles-wrapper table td {
  padding:       10px 16px;
  border-bottom: 1px solid #E0E0E0;
  color:         #1E1E1E;
}

.single-post .entry-content table tr:nth-child(even) td,
.editor-styles-wrapper table tr:nth-child(even) td {
  background-color: #F6F6F6;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 768px) {
  .single-post .entry-content h1,
  .editor-styles-wrapper h1 {
    font-size: 2.2rem;
  }
  .single-post .entry-content h2,
  .editor-styles-wrapper h2 {
    font-size: 1.9rem;
  }
  .single-post .entry-content h3,
  .editor-styles-wrapper h3 {
    font-size: 2rem;
  }
  .single-post .entry-content h4,
  .editor-styles-wrapper h4 {
    font-size: 0.95rem;
  }
  .single-post .entry-content p,
  .single-post .entry-content ul,
  .single-post .entry-content ol,
  .editor-styles-wrapper p,
  .editor-styles-wrapper ul,
  .editor-styles-wrapper ol {
    font-size: 1.1rem;
  }
  .single-post .entry-content .callout-block,
  .single-post .entry-content .highlight-block,
  .editor-styles-wrapper .callout-block,
  .editor-styles-wrapper .highlight-block {
    padding: 1.25rem 1.25rem;
  }
    
  .single-post figure.hero-image {
    width: calc(100vw - 32px);
    max-width: calc(100vw - 32px);
    left: auto;
    margin-left: auto;
    margin-right: auto;
    transform: none;
  }
}