/* =========================================================
   Zomniverse — Learn Documentation Theme
   PubMed / Official Journal Style
   Plain White, Responsive, Academic, Clinical
   File: public_html/zomniverse/Styles/modes/learn/learn-docs.css
========================================================= */

/* =========================================================
   COLOR TOKENS — PUBMED / OFFICIAL JOURNAL PALETTE
========================================================= */

:root {
  /* Canvas */
  --gb-learn-bg: #ffffff;
  --gb-learn-page-bg: #ffffff;

  /* Text */
  --gb-learn-text-primary: #1f2933;
  --gb-learn-text-secondary: #374151;
  --gb-learn-text-muted: #6b7280;

  /* Headings */
  --gb-learn-heading: #111827;

  /* PubMed-like blue */
  --gb-learn-link: #1a5a96;
  --gb-learn-link-hover: #0b426f;
  --gb-learn-accent: #2f6f9f;

  /* Rules / borders */
  --gb-learn-divider: #cfd8e3;
  --gb-learn-divider-soft: #e5e7eb;
  --gb-learn-border: #d9dee7;

  /* Notes */
  --gb-learn-quote-bg: #f8fafc;
  --gb-learn-quote-border: #9aa9ba;

  /* Code */
  --gb-learn-pre-bg: #f3f4f6;
  --gb-learn-pre-border: #d1d5db;
  --gb-learn-code-bg: #eef2f7;
  --gb-learn-code-text: #111827;
  --gb-learn-code-word: #edf2f7;

  /* Tables */
  --gb-learn-table-border: #d7dde6;
  --gb-learn-table-header-bg: #eef3f8;
  --gb-learn-table-header-text: #111827;

  /* Page shadows */
  --gb-learn-page-shadow:
    0 18px 38px rgba(15, 23, 42, 0.08),
    0 1px 2px rgba(15, 23, 42, 0.08);
}

/* =========================================================
   WORKSPACE
========================================================= */

.learn-workspace {
  background: var(--gb-learn-bg);
  color: var(--gb-learn-text-primary);

  font-family:
    Georgia,
    "Times New Roman",
    Times,
    serif;

  font-size: 16px;
  line-height: 1.65;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#learn-workspace.learn-workspace {
  background: var(--gb-learn-bg) !important;
  color: var(--gb-learn-text-primary);
}

/* =========================================================
   MARKDOWN CONTENT STACK
========================================================= */

#learn-md-content.learn-md-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;

  width: 100%;
  max-width: none;
  margin: 0 auto;
}

/* Hide empty generated sections */
#learn-md-content > .learn-md-section:empty,
#learn-md-content > .learn-md-section:not(:has(*)) {
  display: none;
}

/* =========================================================
   PAGE CARD — OFFICIAL JOURNAL VIEW
========================================================= */

#learn-md-content > .learn-md-section {

  position: relative;
  box-sizing: border-box;
  width: min(100%, 820px);
  background: var(--gb-learn-page-bg);

  color: var(--gb-learn-text-primary);

  font-family:
    Georgia,
    "Times New Roman",
    Times,
    serif;

  font-size: 14.5px;
  line-height: 1.55;
}

/* =========================================================
   HEADINGS
========================================================= */

.learn-workspace h1,
.learn-workspace h2,
.learn-workspace h3,
.learn-workspace h4,
#learn-md-content > .learn-md-section h1,
#learn-md-content > .learn-md-section h2,
#learn-md-content > .learn-md-section h3,
#learn-md-content > .learn-md-section h4 {
  color: var(--gb-learn-heading);
  line-height: 1.2;
}

.learn-workspace h1,
#learn-md-content > .learn-md-section h1 {
  margin: 0 0 28px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.learn-workspace h2,
#learn-md-content > .learn-md-section h2 {
  margin: 36px 0 13px;

  padding-bottom: 7px;
  border-bottom: 1px solid var(--gb-learn-divider-soft);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 19px;
  font-weight: 700;
}

.learn-workspace h3,
#learn-md-content > .learn-md-section h3 {
  margin: 28px 0 10px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 16px;
  font-weight: 700;
}

.learn-workspace h4,
#learn-md-content > .learn-md-section h4 {
  margin: 22px 0 8px;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 14.5px;
  font-weight: 700;
}

/* Disable old decorative heading gradients */
.learn-workspace h1::after,
.learn-workspace h2::after,
#learn-md-content > .learn-md-section h1::after,
#learn-md-content > .learn-md-section h2::after {
  display: none !important;
}

/* =========================================================
   TEXT
========================================================= */

.learn-workspace p,
#learn-md-content > .learn-md-section p {
  margin: 0 0 13px;
  color: var(--gb-learn-text-primary);
}

#learn-md-content > .learn-md-section p {
  text-align: justify;
  hyphens: auto;
}

.learn-workspace strong {
  font-weight: 700;
}

.learn-workspace em {
  font-style: italic;
  color: var(--gb-learn-text-secondary);
}

/* Captions */
#learn-md-content > .learn-md-section p:has(strong:first-child) {
  line-height: 1.45;
  color: var(--gb-learn-text-secondary);
}

/* =========================================================
   LINKS
========================================================= */

.learn-workspace a,
#learn-md-content > .learn-md-section a {
  color: var(--gb-learn-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.learn-workspace a:hover,
#learn-md-content > .learn-md-section a:hover {
  color: var(--gb-learn-link-hover);
}

/* =========================================================
   LISTS
========================================================= */

.learn-workspace ul,
.learn-workspace ol,
#learn-md-content > .learn-md-section ul,
#learn-md-content > .learn-md-section ol {
  margin: 12px 0 18px 26px;
  padding: 0;
}

.learn-workspace li,
#learn-md-content > .learn-md-section li {
  margin-bottom: 6px;
}

.learn-workspace li::marker,
#learn-md-content > .learn-md-section li::marker {
  color: var(--gb-learn-text-secondary);
}

/* =========================================================
   BLOCKQUOTES / NOTES
========================================================= */

.learn-workspace blockquote,
#learn-md-content > .learn-md-section blockquote {
  margin: 28px 0;
  padding: 14px 20px;

  border-left: 4px solid var(--gb-learn-quote-border);
  background: var(--gb-learn-quote-bg);

  color: var(--gb-learn-text-secondary);
  font-style: normal;
}

.learn-workspace blockquote p:last-child,
#learn-md-content > .learn-md-section blockquote p:last-child {
  margin-bottom: 0;
}

/* =========================================================
   HORIZONTAL RULE
========================================================= */

.learn-workspace hr,
#learn-md-content > .learn-md-section hr {
  border: none;
  height: 1px;
  margin: 42px 0;

  background: var(--gb-learn-divider);
}

/* =========================================================
   CODE — OFFICIAL DOCUMENTATION STYLE
========================================================= */

.learn-workspace pre,
.learn-workspace details pre,
#learn-md-content > .learn-md-section pre {
  margin: 22px 0;
  padding: 14px 16px;

  background: var(--gb-learn-pre-bg);
  color: var(--gb-learn-code-text);

  border: 1px solid var(--gb-learn-pre-border);
  border-radius: 4px;

  overflow-x: auto;

  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;
  line-height: 1.5;
}

.learn-workspace code,
#learn-md-content > .learn-md-section :not(pre) > code {
  background: var(--gb-learn-code-bg);
  color: var(--gb-learn-code-text);

  padding: 1px 5px;
  border: 1px solid #dbe2ea;
  border-radius: 3px;

  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: 0.88em;
}

/* Prevent double styling inside fenced blocks */
.learn-workspace pre code,
.learn-workspace details pre code,
#learn-md-content > .learn-md-section pre code {
  display: block;

  background: transparent !important;
  color: inherit !important;

  padding: 0;
  border: 0;
  border-radius: 0;

  font-family:
    "JetBrains Mono",
    "SFMono-Regular",
    Consolas,
    "Liberation Mono",
    monospace;

  font-size: inherit;
  line-height: inherit;

  white-space: pre;
  overflow-x: auto;
}

/* Reset syntax highlighter spans */
.learn-workspace pre code span,
.learn-workspace details pre code span,
.learn-workspace pre span,
.learn-workspace details pre span,
#learn-md-content > .learn-md-section pre span {
  background: transparent !important;
}

.learn-workspace pre ::selection,
.learn-workspace details pre ::selection,
#learn-md-content > .learn-md-section pre ::selection {
  background: rgba(47, 111, 159, 0.22);
}

/* =========================================================
   TABLES
========================================================= */

.learn-workspace table,
#learn-md-content > .learn-md-section table {
  width: 100%;
  margin: 24px 0 28px;

  border-collapse: collapse;
  table-layout: auto;

  font-size: 12.85px;
  line-height: 1.35;
}

.learn-workspace th,
.learn-workspace td,
#learn-md-content > .learn-md-section th,
#learn-md-content > .learn-md-section td {
  padding: 7px 9px;

  border-top: 1px solid var(--gb-learn-table-border);
  border-bottom: 1px solid var(--gb-learn-table-border);

  text-align: left;
  vertical-align: top;
}

.learn-workspace th,
#learn-md-content > .learn-md-section th {
  background: var(--gb-learn-table-header-bg);
  color: var(--gb-learn-table-header-text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-weight: 700;
}

.learn-workspace tbody tr:nth-child(even),
#learn-md-content > .learn-md-section tbody tr:nth-child(even) {
  background: #fafbfc;
}

/* Auto-grouped table captions */
.learn-table-group {
  break-inside: avoid;
  page-break-inside: avoid;
  margin: 22px 0 28px;
}

.learn-table-group .learn-table-caption {
  margin: 0 0 8px !important;

  color: var(--gb-learn-text-secondary);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12.5px;
  line-height: 1.45;

  break-after: avoid;
  page-break-after: avoid;
}

.learn-table-group table {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* =========================================================
   IMAGES & FIGURES
========================================================= */

.learn-workspace img,
#learn-md-content > .learn-md-section img {
  max-width: 100%;
  display: block;
  margin: 30px auto 12px;
}

.learn-workspace img + em,
#learn-md-content > .learn-md-section img + em {
  display: block;

  margin-top: 7px;

  color: var(--gb-learn-text-muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 12.5px;
  line-height: 1.4;
  text-align: center;
}

/* =========================================================
   DETAILS / COLLAPSIBLE SECTIONS
========================================================= */

.learn-workspace details {
  margin: 26px 0;
  padding: 0;
  border-radius: 4px;

  background: #ffffff;
  box-shadow: none;

  overflow: hidden;
}

.learn-workspace details summary {
  list-style: none;
}

.learn-workspace details summary::-webkit-details-marker {
  display: none;
}

.learn-workspace details > summary {
  position: relative;

  display: flex;
  align-items: center;
  gap: 10px;

  padding: 13px 18px 13px 42px;

  cursor: pointer;
  user-select: none;

  background: #f4f7fb;
  border-bottom: 1px solid transparent;

  color: var(--gb-learn-heading);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;

  transition:
    background-color 160ms ease,
    border-color 160ms ease;
}

/* Chevron circle */
.learn-workspace details > summary::after {
  content: "";

  position: absolute;
  left: 14px;
  top: 50%;

  width: 18px;
  height: 18px;

  border-radius: 999px;
  background: #ffffff;
  border: 1px solid var(--gb-learn-divider);

  transform: translateY(-50%);
}

/* Chevron stroke */
.learn-workspace details > summary::before {
  content: "";

  position: absolute;
  left: 21px;
  top: 50%;
  z-index: 1;

  width: 5px;
  height: 5px;

  border-right: 2px solid var(--gb-learn-link);
  border-bottom: 2px solid var(--gb-learn-link);

  transform: translateY(-58%) rotate(-45deg);
  transform-origin: 50% 50%;

  transition: transform 180ms cubic-bezier(.22,.61,.36,1);
}

.learn-workspace details[open] > summary {
  background: #eef3f8;
  border-bottom-color: var(--gb-learn-border);
}

.learn-workspace details[open] > summary::before {
  transform: translateY(-65%) rotate(45deg);
}

.learn-workspace details > summary:hover {
  background: #eef3f8;
}

.learn-workspace details > summary:focus-visible {
  outline: 2px solid rgba(47, 111, 159, 0.28);
  outline-offset: 2px;
}

.learn-workspace details > *:not(summary) {
  margin-left: 20px;
  margin-right: 20px;
}

.learn-workspace details > summary + * {
  margin-top: 20px;
}

.learn-workspace details > :last-child {
  margin-bottom: 22px;
}

.learn-workspace details h1,
.learn-workspace details h2,
.learn-workspace details h3 {
  margin-top: 18px;
}

.learn-workspace details pre {
  margin-left: 0;
  margin-right: 0;
}

/* =========================================================
   MERMAID DIAGRAMS
========================================================= */

.mermaid {
  text-align: center;
}

.learn-canvas .mermaid svg,
#learn-md-content > .learn-md-section .mermaid svg {
  max-width: 100%;
  height: auto;
}

/* Mermaid container inside page cards */
#learn-md-content > .learn-md-section .mermaid {
  box-sizing: border-box;

  width: 100%;
  max-width: 100%;

  height: 420px;
  max-height: fit-content;

  margin: 22px 0;
  padding: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
  border-radius: 4px;

  overflow: hidden;
  text-align: center;
}

#learn-md-content > .learn-md-section .mermaid svg {
  display: block;

  width: auto !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: 100% !important;

  margin: 0 auto !important;
  overflow: visible !important;
}

#learn-md-content > .learn-md-section .mermaid.mermaid-vertical svg {
  height: 100% !important;
  max-height: 100% !important;

  width: auto !important;
  max-width: 100% !important;
}

#learn-md-content > .learn-md-section .mermaid.mermaid-wide svg {
  width: 100% !important;
  max-width: 100% !important;

  height: auto !important;
  max-height: 100% !important;
}

#learn-md-content > .learn-md-section .mermaid foreignObject {
  max-width: 100%;
  overflow: visible;
}

/* Mermaid node cleanup */
.learn-canvas .mermaid .node rect,
.learn-canvas .mermaid .node polygon {
  rx: 4;
  ry: 4;
  stroke-width: 1.2px;
}

.learn-canvas .mermaid .node text {
  font-weight: 500;
  fill: #111827;
}

.learn-canvas .mermaid .edgePath path {
  stroke-width: 1.25px;
  stroke-linecap: round;
}

.learn-canvas .mermaid marker path {
  fill: #374151;
}

/* =========================================================
   RESPONSIVE PAGE MODE
========================================================= */

@media (max-width: 900px) {
  #learn-workspace.learn-workspace {
    padding: 20px 10px 72px;
  }

  #learn-md-content.learn-md-content {
    gap: 28px;
  }

  #learn-md-content > .learn-md-section {
    width: 100%;

    min-height: auto;
    height: auto;
    max-height: none;

    font-size: 15.5px;
    line-height: 1.62;

    overflow: visible;
  }

  #learn-md-content > .learn-md-section::before {
    top: 26px;
    left: 28px;
    right: 28px;

    font-size: 11.5px;
  }

  #learn-md-content > .learn-md-section::after {
    top: 26px;
    right: 28px;

    font-size: 11.5px;
  }

  #learn-md-content > .learn-md-section p {
    text-align: left;
    hyphens: none;
  }

  #learn-md-content > .learn-md-section h1 {
    font-size: 24px;
  }

  #learn-md-content > .learn-md-section h2 {
    font-size: 18px;
  }

  #learn-md-content > .learn-md-section h3 {
    font-size: 15.5px;
  }

  #learn-md-content > .learn-md-section .mermaid {
    height: 380px;
    max-height: 380px;
  }
}

@media (max-width: 700px) {
  .learn-workspace details {
    margin: 22px 0;
  }

  .learn-workspace details > summary {
    padding: 12px 14px 12px 40px;
    font-size: 13.5px;
  }

  .learn-workspace details > summary::after {
    left: 12px;
  }

  .learn-workspace details > summary::before {
    left: 19px;
  }

  .learn-workspace details > *:not(summary) {
    margin-left: 15px;
    margin-right: 15px;
  }
}

@media (max-width: 600px) {
  #learn-workspace.learn-workspace {
    padding: 14px 8px 64px;
  }

  #learn-md-content.learn-md-content {
    gap: 22px;
  }

  #learn-md-content > .learn-md-section::before {
    top: 23px;
    left: 18px;
    right: 18px;
  }

  #learn-md-content > .learn-md-section::after {
    top: 23px;
    right: 18px;
  }

  #learn-md-content > .learn-md-section h1 {
    font-size: 22px;
  }

  #learn-md-content > .learn-md-section h2 {
    font-size: 17px;
  }

  #learn-md-content > .learn-md-section h3 {
    font-size: 15px;
  }

  #learn-md-content > .learn-md-section .mermaid {
    height: 330px;
    max-height: 330px;
    padding: 8px;
  }
}

/* =========================================================
   MOBILE RESPONSIVE TABLES
========================================================= */

#learn-md-content table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

#learn-md-content th,
#learn-md-content td {
  vertical-align: top;
  overflow-wrap: normal;
  word-break: normal;
}

@media (max-width: 900px) {
  #learn-md-content table {
    display: block;
    width: 100%;
    max-width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    white-space: nowrap;
    -webkit-overflow-scrolling: touch;

    border-collapse: separate;
    border-spacing: 0;
  }

  #learn-md-content thead,
  #learn-md-content tbody,
  #learn-md-content tr {
    width: max-content;
    min-width: 100%;
  }

  #learn-md-content th,
  #learn-md-content td {
    min-width: max-content;
    padding: 10px 13px;

    font-size: clamp(0.88rem, 3.6vw, 1rem);
    line-height: 1.45;

    white-space: nowrap;
  }

  #learn-md-content th {
    position: sticky;
    top: 0;
    z-index: 2;
  }

  #learn-md-content table::after {
    content: "Swipe table →";
    display: block;

    position: sticky;
    left: 0;

    padding: 8px 4px 0;

    font-family:
      Arial,
      Helvetica,
      sans-serif;

    font-size: 0.72rem;
    color: var(--gb-learn-text-muted);
    opacity: 0.75;
  }
}

@media (max-width: 600px) {
  #learn-md-content table {
    margin: 22px 0;
  }

  #learn-md-content th,
  #learn-md-content td {
    padding: 9px 12px;
    font-size: 0.92rem;
  }
}

/* =========================================================
   SCREEN-ONLY FIXED A4 MODE
   Keeps desktop cards looking like official PDF pages.
   Mobile overrides above keep it responsive.
========================================================= */

@media screen and (min-width: 901px) {
  #learn-md-content > .learn-md-section {
    width: min(100%, 820px) !important;
    background: #ffffff !important;
  }
}

/* =========================================================
   PRINT / PDF CLEANUP
========================================================= */

@media print {
  .learn-workspace,
  #learn-workspace.learn-workspace {
    background: #ffffff !important;
    padding: 0 !important;
  }

  #learn-md-content.learn-md-content {
    display: block;
  }

  #learn-md-content > .learn-md-section {
    width: auto !important;
    min-height: auto !important;

    margin: 0 !important;
    padding: 0 !important;

    border: none !important;
    box-shadow: none !important;

    page-break-after: always;
    break-after: page;
  }

  #learn-md-content > .learn-md-section::before,
  #learn-md-content > .learn-md-section::after {
    display: none !important;
  }

  a {
    color: #000000 !important;
    text-decoration: underline;
  }
}