/* =====================================================================
   MEGAGEN — Professional redesign layer (loads AFTER enhance.css).
   Goal: an editorial, high-integrity medical-B2B feel — disciplined type,
   real hierarchy, tabular data, calm motion, accessible focus. Isolated
   here so the load-bearing rules in enhance.css stay untouched.
   Pattern: "Enterprise Gateway" · Style: "Accessible & Ethical".
   ===================================================================== */

/* ---------- 1. Typographic foundation ---------- */
body {
  line-height: var(--mg-lh, 1.8);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "kern";
}

/* NB: do NOT force a color here — headings must inherit their section's color
   so light text on dark sections/cards stays light (fixes dark-on-dark). */
h1, h2, h3, .mg-h1, .mg-h2, .mg-h3 {
  line-height: var(--mg-lh-tight, 1.14);
  font-weight: 800;
  text-wrap: balance;
}
h4, h5, h6 { line-height: var(--mg-lh-snug, 1.35); }

/* Long-form prose: comfortable measure + rhythm (articles, posts, legal) */
.mg-post__content, .mg-prose, .mg-research__body {
  max-width: 72ch;
  line-height: 2;
}
.mg-post__content p, .mg-prose p { margin: 0 0 1.15em; }

/* Kicker / eyebrow labels — accent, bold, compact. NB: no letter-spacing or
   uppercase — Persian is a cursive script and tracking/casing harm its joins. */
.mg-eyebrow, .mg-auth__eyebrow, .mg-kicker,
.mg-section__kicker, .mg-blog-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: var(--mg-fs-sm, .9375rem);
  font-weight: 700;
  color: var(--mg-accent, #0067b1);
}
/* An optional short accent rule before a kicker, editorial-style */
.mg-eyebrow::before, .mg-section__kicker::before {
  content: ""; inline-size: 22px; block-size: 2px; border-radius: 2px;
  background: currentColor; opacity: .6;
}

/* Numbers in data contexts should not jitter */
.mg-order__table, .mg-inv__table, .mg-proforma__table,
.mg-order__credit, .mg-dcard__val, .mg-inv__srow,
.mg-order__track, .mg-stat, table.widefat td {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum", "ss01";
}

::selection { background: var(--mg-accent, #0067b1); color: #fff; }

/* Anchor targets clear the fixed header */
:target { scroll-margin-top: 96px; }

/* ---------- 2. Links ---------- */
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* ---------- 3. Global focus-visible (accessibility + polish) ---------- */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[tabindex]:focus-visible, .mg-btn:focus-visible {
  outline: none;
  box-shadow: var(--mg-ring, 0 0 0 3px rgba(0,103,177,.30));
  border-radius: var(--mg-r-sm, 8px);
}

/* ---------- 4. Buttons ---------- */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 12px 26px;
  font-family: inherit; font-weight: 700; font-size: var(--mg-fs-sm, .9375rem);
  letter-spacing: -0.01em; line-height: 1; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--mg-r-pill, 999px);
  transition: transform var(--mg-dur, .24s) var(--mg-ease), box-shadow var(--mg-dur, .24s) var(--mg-ease),
              background-color var(--mg-dur, .24s) ease, color var(--mg-dur, .24s) ease, border-color var(--mg-dur, .24s) ease;
}
.mg-btn:active { transform: translateY(0) scale(.985); }
.mg-btn--sm { min-height: 38px; padding: 8px 16px; font-size: var(--mg-fs-xs, .8125rem); }

.mg-btn--primary {
  background: var(--mg-accent, #0067b1); color: #fff;
  box-shadow: 0 10px 26px -12px rgba(0,103,177,.7);
}
.mg-btn--primary:hover { background: var(--mg-accent-deep, #024e86); transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(0,103,177,.62); }

.mg-btn--ghost {
  background: var(--mg-bg, #fff); color: var(--mg-heading, #0a1626);
  border-color: var(--mg-border-strong, #d4dce7);
}
.mg-btn--ghost:hover { border-color: var(--mg-accent, #0067b1); color: var(--mg-accent, #0067b1); transform: translateY(-2px); }

/* Dark "menu" pill in the nav — keep bold ink, refine motion */
.mg-menu-btn { border-radius: var(--mg-r-pill, 999px); letter-spacing: -0.01em; }

/* ---------- 5. Forms ---------- */
.mg-field { display: block; margin-bottom: 15px; }
.mg-field > span, .mg-form label > span {
  display: block; margin-bottom: 7px;
  font-size: var(--mg-fs-sm, .9375rem); font-weight: 600; color: var(--mg-heading, #0a1626);
}
.mg-form input:not([type=checkbox]):not([type=radio]),
.mg-form select, .mg-form textarea,
.mg-field input, .mg-field select, .mg-field textarea {
  width: 100%; min-height: 46px; padding: 11px 14px;
  font: inherit; color: var(--mg-text, #0b1320);
  background: var(--mg-bg, #fff);
  border: 1px solid var(--mg-border-strong, #d4dce7); border-radius: var(--mg-r-sm, 10px);
  transition: border-color var(--mg-dur,.24s) ease, box-shadow var(--mg-dur,.24s) ease;
  -webkit-appearance: none; appearance: none;
}
.mg-form textarea, .mg-field textarea { min-height: 92px; line-height: 1.7; padding-top: 12px; }
.mg-form input:focus, .mg-form select:focus, .mg-form textarea:focus,
.mg-field input:focus, .mg-field select:focus, .mg-field textarea:focus {
  outline: none; border-color: var(--mg-accent, #0067b1);
  box-shadow: var(--mg-ring, 0 0 0 3px rgba(0,103,177,.30));
}
.mg-form input::placeholder, .mg-field input::placeholder,
.mg-form textarea::placeholder { color: var(--mg-faint, #8496a8); }

/* Notices */
.mg-note { border-radius: var(--mg-r, 14px); padding: 13px 16px; font-size: var(--mg-fs-sm, .9375rem); line-height: 1.7; border: 1px solid var(--mg-border, #e5eaf1); }
.mg-note--ok, .mg-note--success { background: #eaf7f0; border-color: #bfe6d1; color: #12633f; }
.mg-note--err, .mg-note--error { background: #fdeceb; border-color: #f5c9c5; color: #a02a1f; }

/* ---------- 6. Cards + surfaces ---------- */
.mg-dcard, .mg-auth__card, .mg-order__gate, .mg-blog-card, .mg-cat-card {
  border: 1px solid var(--mg-border, #e5eaf1);
  border-radius: var(--mg-r-lg, 22px);
  box-shadow: var(--mg-shadow-xs, 0 1px 2px rgba(11,19,32,.06));
}
.mg-blog-card, .mg-cat-card {
  transition: transform var(--mg-dur,.24s) var(--mg-ease), box-shadow var(--mg-dur,.24s) var(--mg-ease), border-color var(--mg-dur,.24s) ease;
}
.mg-blog-card:hover, .mg-cat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mg-shadow, 0 10px 34px -14px rgba(11,19,32,.16));
  border-color: var(--mg-border-strong, #d4dce7);
}

/* ---------- 7. Data tables (orders / invoice / admin) ---------- */
.mg-order__table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--mg-border, #e5eaf1); border-radius: var(--mg-r, 14px); overflow: hidden; }
.mg-order__table thead th {
  background: var(--mg-surface-2, #eef3f9); color: var(--mg-heading, #0a1626);
  font-size: var(--mg-fs-xs, .8125rem); font-weight: 700; letter-spacing: .02em;
  text-align: start; padding: 12px 14px; border-bottom: 1px solid var(--mg-border, #e5eaf1);
}
.mg-order__table tbody td { padding: 13px 14px; border-bottom: 1px solid var(--mg-border, #e5eaf1); vertical-align: middle; }
.mg-order__table tbody tr:last-child td { border-bottom: 0; }
.mg-order__table tbody tr { transition: background-color .18s ease; }
.mg-order__table tbody tr:hover { background: var(--mg-surface, #f5f8fc); }

/* Status pills — calm, semantic */
.mg-ostatus { display: inline-block; padding: 4px 11px; border-radius: var(--mg-r-pill,999px); font-size: var(--mg-fs-xs,.8125rem); font-weight: 700; background: var(--mg-surface-2,#eef3f9); color: var(--mg-heading,#0a1626); }
.mg-ostatus--paid, .mg-ostatus--delivered { background: #eaf7f0; color: #12633f; }
.mg-ostatus--canceled { background: #fdeceb; color: #a02a1f; }
.mg-ostatus--pending, .mg-ostatus--submitted { background: #fdf3e2; color: #8a5b06; }

/* ---------- 8. Nav refinement (visual only — never touches position/overflow) ---------- */
.mg-nav {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--mg-border, #e5eaf1);
  box-shadow: 0 10px 34px -16px rgba(11,19,32,.24), inset 0 1px 0 rgba(255,255,255,.7);
}
.mg-nav__brand { letter-spacing: -0.03em; }

/* ---------- 9. Section rhythm helpers ---------- */
.mg-container { max-width: var(--mg-container, 1200px); margin-inline: auto; padding-inline: clamp(18px, 5vw, 40px); }

/* ---------- 10. Refined scrollbar (desktop, subtle) ---------- */
@media (pointer: fine) {
  * { scrollbar-width: thin; scrollbar-color: var(--mg-border-strong, #d4dce7) transparent; }
  ::-webkit-scrollbar { width: 11px; height: 11px; }
  ::-webkit-scrollbar-thumb { background: var(--mg-border-strong, #d4dce7); border-radius: 999px; border: 3px solid var(--mg-bg, #fff); }
  ::-webkit-scrollbar-thumb:hover { background: var(--mg-faint, #8496a8); }
}

/* ---------- 11. Motion discipline ---------- */
@media (prefers-reduced-motion: reduce) {
  .mg-btn, .mg-blog-card, .mg-cat-card { transition: none !important; }
  .mg-btn:hover, .mg-blog-card:hover, .mg-cat-card:hover { transform: none !important; }
}






.mg-post__trust { width: min(100% - 32px, 900px); margin: 0 auto clamp(28px, 4vw, 48px); padding: clamp(20px, 3vw, 30px); border-inline-start: 3px solid var(--mg-accent, #0067b1); background: var(--mg-surface, #f5f8fc); color: var(--mg-text, #0b1320); }
.mg-post__trust h2 { margin: 0 0 18px; font-size: clamp(20px, 2.4vw, 28px); }
.mg-post__trust dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.mg-post__trust dl > div { min-width: 0; }
.mg-post__trust dt { color: var(--mg-muted, #56677b); font-size: 12px; font-weight: 700; }
.mg-post__trust dd { margin: 4px 0 0; font-weight: 700; overflow-wrap: anywhere; }
.mg-post__trust p { margin: 16px 0 0; line-height: 1.9; }
@media (max-width: 680px) { .mg-post__trust dl { grid-template-columns: 1fr; } }