@charset "UTF-8";
/* CSS Document */

/* ============================================================
   Maxprog Blog Rich Content Blocks
   For AI-generated WordPress blog articles
   Theme wrapper: .entry-content
   ============================================================ */


/* ------------------------------------------------------------
   Base rich blocks
   ------------------------------------------------------------ */

.entry-content .mp-card {
  background: #ffffff;
  border: 1px solid #d9e4ef;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.entry-content .mp-example {
  background: #fbfdff;
  border: 1px solid #cfddec;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.entry-content .mp-callout {
  background: #f3f8fc;
  border-left: 5px solid #3B6895;
  border-radius: 12px;
  padding: 15px 18px;
  margin: 20px 0;
}

.entry-content .mp-warning {
  background: #fff8ec;
  border-left: 5px solid #d88722;
  border-radius: 12px;
  padding: 15px 18px;
  margin: 20px 0;
}

.entry-content .mp-checklist {
  background: #f7fbf4;
  border: 1px solid #d8eacb;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 22px 0;
}

.entry-content .mp-takeaways {
  background: #f4f8fd;
  border: 1px solid #d6e4f2;
  border-radius: 14px;
  padding: 16px 18px;
  margin: 22px 0;
}


/* ------------------------------------------------------------
   Two-column comparison grid
   ------------------------------------------------------------ */

.entry-content .mp-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 22px 0;
}


/* ------------------------------------------------------------
   Pills / labels
   ------------------------------------------------------------ */

.entry-content .mp-pill {
  display: inline-block;
  background: #e8f2fb;
  color: #3B6895;
  border: 1px solid #c8dced;
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px 0;
}


/* Optional emoji marker */
.entry-content .mp-emoji {
  display: inline-block;
  font-size: 21px;
  line-height: 1;
  margin-right: 6px;
  vertical-align: -2px;
}


/* ------------------------------------------------------------
   Headings inside rich blocks
   ------------------------------------------------------------ */

.entry-content .mp-card h3,
.entry-content .mp-example h3,
.entry-content .mp-callout h3,
.entry-content .mp-warning h3,
.entry-content .mp-checklist h3,
.entry-content .mp-takeaways h3 {
  margin-top: 0;
  margin-bottom: 10px;
}


/* ------------------------------------------------------------
   Lists inside rich blocks
   ------------------------------------------------------------ */

.entry-content .mp-card ul,
.entry-content .mp-example ul,
.entry-content .mp-callout ul,
.entry-content .mp-warning ul,
.entry-content .mp-checklist ul,
.entry-content .mp-takeaways ul {
  margin-top: 10px;
  margin-bottom: 0;
  padding-left: 22px;
}

.entry-content .mp-card li,
.entry-content .mp-example li,
.entry-content .mp-callout li,
.entry-content .mp-warning li,
.entry-content .mp-checklist li,
.entry-content .mp-takeaways li {
  margin-bottom: 8px;
}

.entry-content .mp-card li:last-child,
.entry-content .mp-example li:last-child,
.entry-content .mp-callout li:last-child,
.entry-content .mp-warning li:last-child,
.entry-content .mp-checklist li:last-child,
.entry-content .mp-takeaways li:last-child {
  margin-bottom: 0;
}


/* ------------------------------------------------------------
   IMPORTANT:
   AI articles use <pre> instead of <p>.
   Force <pre> to behave like normal article text.
   ------------------------------------------------------------ */

.entry-content pre,
.entry-content .mp-card pre,
.entry-content .mp-example pre,
.entry-content .mp-callout pre,
.entry-content .mp-warning pre,
.entry-content .mp-checklist pre,
.entry-content .mp-takeaways pre {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  line-height: 1.65 !important;
  color: inherit !important;

  white-space: pre-wrap !important;
  word-wrap: break-word !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 10px 0 !important;
  overflow: visible !important;
}


/* Remove extra spacing when <pre> is first or last item in a block */
.entry-content .mp-card pre:first-child,
.entry-content .mp-example pre:first-child,
.entry-content .mp-callout pre:first-child,
.entry-content .mp-warning pre:first-child,
.entry-content .mp-checklist pre:first-child,
.entry-content .mp-takeaways pre:first-child {
  margin-top: 0 !important;
}

.entry-content .mp-card pre:last-child,
.entry-content .mp-example pre:last-child,
.entry-content .mp-callout pre:last-child,
.entry-content .mp-warning pre:last-child,
.entry-content .mp-checklist pre:last-child,
.entry-content .mp-takeaways pre:last-child {
  margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   Real code inside <pre><code>
   This keeps actual code examples readable.
   ------------------------------------------------------------ */

.entry-content pre code {
  display: block;
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace !important;
  font-size: 0.95em !important;
  line-height: 1.55 !important;
  background: #f6f8fa !important;
  border: 1px solid #d9e1e8 !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  color: #333333 !important;
  overflow-x: auto !important;
  white-space: pre-wrap !important;
}


/* Inline code */
.entry-content code {
  font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
  font-size: 0.95em;
}


/* ------------------------------------------------------------
   Blockquotes
   ------------------------------------------------------------ */

.entry-content blockquote {
  background: #f7f9fb;
  border-left: 5px solid #3B6895;
  border-radius: 10px;
  padding: 16px 18px;
  margin: 22px 0;
  font-style: italic;
}

.entry-content blockquote pre {
  margin: 0 !important;
  font-style: italic;
}


/* ------------------------------------------------------------
   Links inside rich blocks
   ------------------------------------------------------------ */

.entry-content .mp-card a,
.entry-content .mp-example a,
.entry-content .mp-callout a,
.entry-content .mp-warning a,
.entry-content .mp-checklist a,
.entry-content .mp-takeaways a {
  color: #3B6895;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ------------------------------------------------------------
   Horizontal separators
   ------------------------------------------------------------ */

.entry-content hr {
  border: 0;
  border-top: 1px solid #d9e4ef;
  margin: 28px 0;
}


/* ------------------------------------------------------------
   Spacing cleanup
   ------------------------------------------------------------ */

.entry-content .mp-card > *:first-child,
.entry-content .mp-example > *:first-child,
.entry-content .mp-callout > *:first-child,
.entry-content .mp-warning > *:first-child,
.entry-content .mp-checklist > *:first-child,
.entry-content .mp-takeaways > *:first-child {
  margin-top: 0 !important;
}

.entry-content .mp-card > *:last-child,
.entry-content .mp-example > *:last-child,
.entry-content .mp-callout > *:last-child,
.entry-content .mp-warning > *:last-child,
.entry-content .mp-checklist > *:last-child,
.entry-content .mp-takeaways > *:last-child {
  margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   Optional hover effect
   ------------------------------------------------------------ */

.entry-content .mp-card,
.entry-content .mp-example {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.entry-content .mp-card:hover,
.entry-content .mp-example:hover {
  box-shadow: 0 7px 20px rgba(0, 0, 0, 0.075);
  transform: translateY(-1px);
}


/* ------------------------------------------------------------
   Mobile layout
   ------------------------------------------------------------ */

@media (max-width: 700px) {
  .entry-content .mp-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .entry-content .mp-card,
  .entry-content .mp-example,
  .entry-content .mp-callout,
  .entry-content .mp-warning,
  .entry-content .mp-checklist,
  .entry-content .mp-takeaways {
    padding: 15px;
    margin: 18px 0;
    border-radius: 12px;
  }

  .entry-content .mp-pill {
    font-size: 12px;
    padding: 5px 10px;
  }

  .entry-content .mp-emoji {
    font-size: 19px;
  }

  .entry-content pre,
  .entry-content .mp-card pre,
  .entry-content .mp-example pre,
  .entry-content .mp-callout pre,
  .entry-content .mp-warning pre,
  .entry-content .mp-checklist pre,
  .entry-content .mp-takeaways pre {
    line-height: 1.6 !important;
  }

  .entry-content pre code {
    padding: 14px !important;
    border-radius: 10px !important;
  }
}