/*
 * Notes design system
 * Shared by Elementor HTML notes, new PressPilot notes, and older AI Studio notes.
 */

.full-width-container,
.entry-content .full-width-container,
.single-post .entry-content .full-width-container,
.page .entry-content .full-width-container,
.dr-note-factory {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.prose,
.entry-content .prose,
.dr-note-factory {
  width: 100% !important;
  max-width: none !important;
  color: var(--dr-text-soft) !important;
  font-family: var(--dr-font) !important;
  font-size: clamp(17px, 1.08vw, 20px) !important;
  line-height: 1.78 !important;
}

.prose > *:first-child,
.dr-note-factory > *:first-child {
  margin-top: 0 !important;
}

.prose h1,
.dr-note-factory h1,
.presspilot-note-title h1 {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 0 18px !important;
  padding: clamp(14px, 2.6vw, 28px) !important;
  border: 1px solid var(--dr-border) !important;
  border-radius: var(--dr-radius-lg) !important;
  background: var(--dr-gradient) !important;
  color: var(--dr-text) !important;
  font-size: clamp(34px, 5vw, 64px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.045em !important;
  text-align: center !important;
}

.presspilot-note-title.clinical-card {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  margin: 0 0 clamp(14px, 2.2vw, 24px) !important;
}

.presspilot-note-title p {
  max-width: 900px !important;
  margin: 0 auto 18px !important;
  text-align: center !important;
}

.clinical-card,
.dr-note-factory section,
.prose .clinical-card,
.prose .content-card,
.prose .concept-card,
.prose .key-point,
.prose .clinical-note,
.prose .highlight-box,
.prose .mnemonic,
.prose .exam-tip,
.prose .definition,
.prose .explanation {
  width: 100% !important;
  max-width: none !important;
  margin: clamp(16px, 2.4vw, 28px) 0 !important;
  padding: clamp(14px, 2.4vw, 26px) !important;
  border: 1px solid var(--dr-border) !important;
  border-left: 1px solid var(--dr-border) !important;
  border-radius: var(--dr-radius-lg) !important;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  color: var(--dr-text-soft) !important;
  overflow: visible !important;
}

.clinical-card::before,
.clinical-card::after,
.dr-note-factory section::before,
.dr-note-factory section::after,
.prose .content-card::before,
.prose .content-card::after,
.prose .key-point::before,
.prose .key-point::after,
.prose .clinical-note::before,
.prose .clinical-note::after {
  box-shadow: none !important;
}

.prose h2,
.clinical-card h2,
.dr-note-factory h2 {
  display: block !important;
  width: 100% !important;
  margin: 0 0 16px !important;
  padding: 12px 16px !important;
  border: 1px solid var(--dr-border) !important;
  border-radius: var(--dr-radius-md) !important;
  background: linear-gradient(100deg, rgba(245, 243, 255, 0.98), rgba(224, 242, 254, 0.82)) !important;
  color: var(--dr-text) !important;
  font-size: clamp(25px, 2.25vw, 38px) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
}

.prose h3,
.clinical-card h3,
.dr-note-factory h3,
.prose h4,
.clinical-card h4 {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  max-width: 100% !important;
  margin: 14px 0 10px !important;
  padding: 7px 12px !important;
  border: 1px solid var(--dr-border-cool) !important;
  border-radius: 999px !important;
  background: rgba(224, 242, 254, 0.86) !important;
  color: var(--dr-blue-deep) !important;
  font-size: clamp(19px, 1.45vw, 25px) !important;
  line-height: 1.25 !important;
}

.prose p,
.prose li,
.prose td,
.prose th,
.dr-note-factory p,
.dr-note-factory li,
.dr-note-factory td,
.dr-note-factory th {
  color: var(--dr-text-soft) !important;
}

.prose strong,
.prose b,
.dr-note-factory strong,
.dr-note-factory b,
.strong2,
.strong3 {
  color: var(--dr-purple-deep) !important;
  font-weight: 750 !important;
  background: transparent !important;
  text-decoration: none !important;
}

.strong3 {
  color: var(--dr-purple) !important;
}

.prose em,
.prose i:not(.fas):not(.fa):not([class^="fa-"]) {
  color: #047857 !important;
  background: rgba(209, 250, 229, 0.8) !important;
  border-radius: 7px !important;
  padding: 0.06em 0.25em !important;
}

.prose ul,
.prose ol,
.dr-note-factory ul,
.dr-note-factory ol {
  padding-left: clamp(20px, 3vw, 34px) !important;
  margin: 10px 0 14px !important;
}

.prose li,
.dr-note-factory li {
  margin: 9px 0 !important;
}

.prose li::marker,
.dr-note-factory li::marker {
  color: var(--dr-purple) !important;
  font-weight: 800 !important;
}

.prose hr,
.dr-note-factory hr {
  height: 1px !important;
  border: 0 !important;
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.35), transparent) !important;
  margin: 26px 0 !important;
}

.table-responsive,
.dr-table-scroll,
.prose .table-responsive,
.dr-note-factory .dr-table-scroll {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 14px 0 18px !important;
  border: 1px solid var(--dr-border) !important;
  border-radius: var(--dr-radius-md) !important;
  background: #fff !important;
}

.table-responsive table,
.dr-table-scroll table,
.prose table,
.dr-note-factory table {
  width: 100% !important;
  min-width: 680px !important;
  border-collapse: collapse !important;
  margin: 0 !important;
}

.prose table th,
.dr-note-factory table th {
  background: #ede9fe !important;
  color: #312e81 !important;
  font-weight: 800 !important;
}

.prose table th,
.prose table td,
.dr-note-factory table th,
.dr-note-factory table td {
  padding: 12px 14px !important;
  border: 1px solid rgba(139, 92, 246, 0.16) !important;
  vertical-align: top !important;
}

.prose table tr:nth-child(even) td,
.dr-note-factory table tr:nth-child(even) td {
  background: rgba(250, 245, 255, 0.55) !important;
}

@media (max-width: 768px) {
  .prose,
  .entry-content .prose,
  .dr-note-factory {
    font-size: 17px !important;
  }

  .prose h1,
  .dr-note-factory h1,
  .presspilot-note-title h1 {
    font-size: clamp(27px, 8.2vw, 40px) !important;
    padding: 13px 10px !important;
    border-radius: var(--dr-radius-md) !important;
  }

  .clinical-card,
  .dr-note-factory section,
  .prose .content-card,
  .prose .concept-card,
  .prose .key-point,
  .prose .clinical-note,
  .prose .highlight-box,
  .prose .mnemonic,
  .prose .exam-tip,
  .prose .definition,
  .prose .explanation {
    border-radius: 14px !important;
    padding: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .prose h2,
  .clinical-card h2,
  .dr-note-factory h2 {
    font-size: clamp(22px, 7vw, 31px) !important;
    padding: 11px 12px !important;
  }

  .prose h3,
  .clinical-card h3,
  .dr-note-factory h3,
  .prose h4,
  .clinical-card h4 {
    display: flex !important;
    width: fit-content !important;
    max-width: 100% !important;
    white-space: normal !important;
    font-size: 18px !important;
  }

  .table-responsive table,
  .dr-table-scroll table,
  .prose table,
  .dr-note-factory table {
    min-width: 640px !important;
  }
}