/**
 * Global Prose Styling
 *
 * Styles native Gutenberg blocks (headings, paragraphs, lists, tables, quotes)
 * and raw HTML content from the_content(). Uses :where() guards to never
 * override interact/typography or interact/button block styles.
 *
 * Loaded globally on frontend + editor.
 */

/* ----------------------------------------------------------------
   Link color — adapts to background
   Light backgrounds use the default link color (plum).
   Dark backgrounds override to the light variant.
   ---------------------------------------------------------------- */
:root {
  --link-color: var(--color-text-link-default);
  --link-color-hover: var(--color-text-link-default-hover);
}

.has-brand-primary-background-color,
.has-brand-tertiary-background-color,
.has-brand-plum-background-color,
.has-surface-dark-1-background-color,
.has-surface-dark-2-background-color,
.has-text-default-background-color,
.has-highlight-1-background-color,
.has-highlight-3-background-color,
.has-highlight-5-background-color {
  --link-color: var(--color-text-link-default-light);
  --link-color-hover: var(--color-text-link-default-light-hover);
}

/* ----------------------------------------------------------------
   Page Title (Page with Title template)
   ---------------------------------------------------------------- */
.entry-header .entry-title {
  font-family: var(--font-family-heading);
  font-size: var(--typo-h1-large, 52px);
  font-weight: var(--font-weight-medium, 500);
  line-height: 115%;
  letter-spacing: -0.02em;
  color: var(--color-text-default-default);
  margin: 0;
}

/* ----------------------------------------------------------------
   Headings — native Gutenberg + raw HTML
   Skip anything styled by interact/typography (.typo-*)
   ---------------------------------------------------------------- */
.entry-content :where(h1:not([class*="typo-"])),
.entry-content :where(h2:not([class*="typo-"])),
.entry-content :where(h3:not([class*="typo-"])),
.entry-content :where(h4:not([class*="typo-"])),
.entry-content :where(h5:not([class*="typo-"])),
.entry-content :where(h6:not([class*="typo-"])),
.wp-block-interact-text-content :where(h1:not([class*="typo-"])),
.wp-block-interact-text-content :where(h2:not([class*="typo-"])),
.wp-block-interact-text-content :where(h3:not([class*="typo-"])),
.wp-block-interact-text-content :where(h4:not([class*="typo-"])),
.wp-block-interact-text-content :where(h5:not([class*="typo-"])),
.wp-block-interact-text-content :where(h6:not([class*="typo-"])) {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-default-default);
}

.entry-content :where(h1:not([class*="typo-"])),
.entry-content :where(h2:not([class*="typo-"])),
.entry-content :where(h3:not([class*="typo-"])),
.wp-block-interact-text-content :where(h1:not([class*="typo-"])),
.wp-block-interact-text-content :where(h2:not([class*="typo-"])),
.wp-block-interact-text-content :where(h3:not([class*="typo-"])) {
  line-height: 115%;
  letter-spacing: -0.02em;
}

.entry-content :where(h4:not([class*="typo-"])),
.entry-content :where(h5:not([class*="typo-"])),
.entry-content :where(h6:not([class*="typo-"])),
.wp-block-interact-text-content :where(h4:not([class*="typo-"])),
.wp-block-interact-text-content :where(h5:not([class*="typo-"])),
.wp-block-interact-text-content :where(h6:not([class*="typo-"])) {
  line-height: 130%;
  letter-spacing: -0.01em;
}

.entry-content :where(h1:not([class*="typo-"])),
.wp-block-interact-text-content :where(h1:not([class*="typo-"])) {
  font-size: var(--typo-h1-large, 48px);
  margin: 0 0 var(--spacing-24);
}

.entry-content :where(h2:not([class*="typo-"])),
.wp-block-interact-text-content :where(h2:not([class*="typo-"])) {
  font-size: var(--typo-h2, 36px);
  margin: var(--spacing-48) 0 var(--spacing-16);
}

.entry-content :where(h3:not([class*="typo-"])),
.wp-block-interact-text-content :where(h3:not([class*="typo-"])) {
  font-size: var(--typo-h3, 32px);
  margin: var(--spacing-40) 0 var(--spacing-12);
}

.entry-content :where(h4:not([class*="typo-"])),
.wp-block-interact-text-content :where(h4:not([class*="typo-"])) {
  font-size: var(--typo-h4, 28px);
  margin: var(--spacing-32) 0 var(--spacing-12);
}

.entry-content :where(h5:not([class*="typo-"])),
.wp-block-interact-text-content :where(h5:not([class*="typo-"])) {
  font-size: var(--typo-h5, 24px);
  margin: var(--spacing-32) 0 var(--spacing-8);
}

.entry-content :where(h6:not([class*="typo-"])),
.wp-block-interact-text-content :where(h6:not([class*="typo-"])) {
  font-size: var(--typo-h6, 20px);
  margin: var(--spacing-24) 0 var(--spacing-8);
}

/* First child — no top margin */
.entry-content > :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child),
.wp-block-interact-text-content > :where(h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child) {
  margin-top: 0;
}

/* ----------------------------------------------------------------
   Paragraphs
   ---------------------------------------------------------------- */
.entry-content :where(p:not([class*="typo-"])),
.wp-block-interact-text-content :where(p:not([class*="typo-"])) {
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--color-text-default-default);
  margin: 0 0 var(--spacing-16);
}

.entry-content > p:last-child,
.wp-block-interact-text-content > p:last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Strong / Bold
   ---------------------------------------------------------------- */
.entry-content strong,
.entry-content b,
.wp-block-interact-text-content strong,
.wp-block-interact-text-content b {
  font-weight: var(--font-weight-semibold, 600);
}

/* ----------------------------------------------------------------
   Links
   ---------------------------------------------------------------- */
.entry-content :where(a:not([class])),
.wp-block-interact-text-content :where(a:not([class])) {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  transition: filter 0.2s ease;
}

.entry-content :where(a:not([class])):hover,
.wp-block-interact-text-content :where(a:not([class])):hover {
  filter: brightness(1.4);
}

/* ----------------------------------------------------------------
   Lists (ul / ol)
   ---------------------------------------------------------------- */
.entry-content :where(ul:not([class])),
.entry-content :where(ol:not([class])),
.entry-content .wp-block-list,
.wp-block-interact-text-content :where(ul:not([class])),
.wp-block-interact-text-content :where(ol:not([class])),
.wp-block-interact-text-content .wp-block-list {
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--color-text-default-default);
  margin: 0 0 var(--spacing-16);
  padding-left: var(--spacing-24);
}

.entry-content :where(ul:not([class])) li,
.entry-content :where(ol:not([class])) li,
.entry-content .wp-block-list li,
.wp-block-interact-text-content :where(ul:not([class])) li,
.wp-block-interact-text-content :where(ol:not([class])) li,
.wp-block-interact-text-content .wp-block-list li {
  margin-bottom: var(--spacing-6);
}

.entry-content :where(ul:not([class])) li::marker,
.entry-content .wp-block-list li::marker,
.wp-block-interact-text-content :where(ul:not([class])) li::marker,
.wp-block-interact-text-content .wp-block-list li::marker {
  color: var(--color-text-brand-primary);
}

/* Nested lists */
.entry-content :where(ul:not([class])) ul,
.entry-content :where(ul:not([class])) ol,
.entry-content :where(ol:not([class])) ul,
.entry-content :where(ol:not([class])) ol,
.entry-content .wp-block-list ul,
.entry-content .wp-block-list ol,
.wp-block-interact-text-content :where(ul:not([class])) ul,
.wp-block-interact-text-content :where(ul:not([class])) ol,
.wp-block-interact-text-content :where(ol:not([class])) ul,
.wp-block-interact-text-content :where(ol:not([class])) ol,
.wp-block-interact-text-content .wp-block-list ul,
.wp-block-interact-text-content .wp-block-list ol {
  margin-top: var(--spacing-6);
  margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Tables — Global
   Styles all tables: Gutenberg (.wp-block-table), legacy (.table
   wrapper), and raw <table> inside .entry-content or text-content.
   ---------------------------------------------------------------- */

/* Responsive scroll wrapper — works for .wp-block-table and legacy .table div */
.wp-block-table,
.entry-content .table,
.wp-block-interact-text-content .table {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  margin: var(--spacing-24) 0;
}

/* Base table styling */
.wp-block-table table,
.entry-content table,
.wp-block-interact-text-content table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  line-height: 160%;
  color: var(--color-text-default-default);
  border: 1px solid var(--color-border-default-default);
  border-radius: var(--border-radius-8);
  overflow: hidden;
}

/* Remove double margin when table is inside a scroll wrapper */
.wp-block-table table,
.entry-content .table table,
.wp-block-interact-text-content .table table {
  margin: 0;
}

/* Standalone table (no wrapper) — scroll wrapper via parent */
.entry-content > table,
.wp-block-interact-text-content > table {
  margin: var(--spacing-24) 0;
}


/* Table header cells */
.wp-block-table table th,
.entry-content table th,
.wp-block-interact-text-content table th {
  font-weight: var(--font-weight-medium, 500);
  text-align: left;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-bg-neutral-subtle);
  border-bottom: 2px solid var(--color-border-default-default);
}

/* Table data cells */
.wp-block-table table td,
.entry-content table td,
.wp-block-interact-text-content table td {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--color-border-default-default);
  vertical-align: top;
}

/* Last row — no bottom border */
.wp-block-table table tr:last-child td,
.entry-content table tr:last-child td,
.wp-block-interact-text-content table tr:last-child td {
  border-bottom: none;
}

/* Alternating row stripes (default + is-style-stripes) */
.wp-block-table table tbody tr:nth-child(even),
.wp-block-table.is-style-stripes table tbody tr:nth-child(odd),
.entry-content table tbody tr:nth-child(even),
.wp-block-interact-text-content table tbody tr:nth-child(even) {
  background-color: var(--color-bg-neutral-subtle);
}

/* Stripes variant — reset even rows, stripe odd instead (WP convention) */
.wp-block-table.is-style-stripes table tbody tr:nth-child(even) {
  background-color: transparent;
}

/* Tables without <thead> — treat first row as header */
.wp-block-table table:not(:has(thead)) tr:first-child td,
.entry-content table:not(:has(thead)) tr:first-child td,
.wp-block-interact-text-content table:not(:has(thead)) tr:first-child td {
  font-weight: var(--font-weight-medium, 500);
  background-color: var(--color-bg-neutral-subtle);
  border-bottom: 2px solid var(--color-border-default-default);
}

/* Bold text inside td acts as inline header */
.wp-block-table table td strong,
.entry-content table td strong,
.wp-block-interact-text-content table td strong {
  font-weight: var(--font-weight-medium, 500);
}

/* ----------------------------------------------------------------
   Blockquotes
   ---------------------------------------------------------------- */
.entry-content blockquote,
.entry-content .wp-block-quote,
.wp-block-interact-text-content blockquote,
.wp-block-interact-text-content .wp-block-quote {
  margin: var(--spacing-32) 0;
  padding: var(--spacing-24) var(--spacing-32);
  border-left: 4px solid var(--color-border-brand-primary);
  background-color: var(--color-bg-neutral-subtle);
  border-radius: 0 var(--border-radius-8) var(--border-radius-8) 0;
}

.entry-content blockquote p,
.entry-content .wp-block-quote p,
.wp-block-interact-text-content blockquote p,
.wp-block-interact-text-content .wp-block-quote p {
  font-size: var(--typo-body-large, 20px);
  font-style: italic;
  color: var(--color-text-default-default);
}

.entry-content blockquote cite,
.entry-content .wp-block-quote cite,
.wp-block-interact-text-content blockquote cite,
.wp-block-interact-text-content .wp-block-quote cite {
  display: block;
  margin-top: var(--spacing-12);
  font-size: var(--typo-body-small, 14px);
  font-style: normal;
  color: var(--color-text-default-soft);
}

/* ----------------------------------------------------------------
   Images
   ---------------------------------------------------------------- */
.entry-content img,
.wp-block-interact-text-content img {
  max-width: 100%;
  height: auto;
}

.entry-content figure,
.wp-block-interact-text-content figure {
  margin: var(--spacing-32) 0;
}

.entry-content figcaption,
.wp-block-interact-text-content figcaption {
  margin-top: var(--spacing-8);
  font-size: var(--typo-body-small, 14px);
  color: var(--color-text-default-soft);
  text-align: center;
}

/* ----------------------------------------------------------------
   Horizontal Rule
   ---------------------------------------------------------------- */
.entry-content hr,
.entry-content .wp-block-separator,
.wp-block-interact-text-content hr,
.wp-block-interact-text-content .wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border-default-default);
  margin: var(--spacing-48) 0;
}

/* ----------------------------------------------------------------
   Code / Pre
   ---------------------------------------------------------------- */
.entry-content code,
.wp-block-interact-text-content code {
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background-color: var(--color-bg-neutral-subtle);
  border-radius: var(--border-radius-4);
}

.entry-content pre,
.wp-block-interact-text-content pre {
  font-family: monospace;
  font-size: var(--typo-body-small, 14px);
  line-height: 160%;
  padding: var(--spacing-24);
  background-color: var(--color-bg-neutral-subtle);
  border-radius: var(--border-radius-12);
  overflow-x: auto;
  margin: var(--spacing-24) 0;
}

.entry-content pre code,
.wp-block-interact-text-content pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

/* ----------------------------------------------------------------
   Font Size Presets — Line Height
   WordPress adds .has-{slug}-font-size when a size preset is chosen.
   Body-scale sizes (S/M/L/XL) get comfortable 170% line-height.
   Heading-scale sizes (2XL/3XL/4XL) get tight 115% + letter-spacing.
   ---------------------------------------------------------------- */

/* Body-scale sizes (12–24px) — line-height 130%, matches .typo-body */
.has-x-small-font-size,
.has-small-font-size,
.has-medium-font-size,
.has-large-font-size,
.has-x-large-font-size {
  line-height: 130%;
  letter-spacing: -0.01em;
}

/* Heading-scale sizes h4–h6 range (28px) — line-height 130%, matches .typo-h4/.typo-h5/.typo-h6 */
.has-xx-large-font-size {
  line-height: 130%;
  letter-spacing: -0.01em;
}

/* Heading-scale sizes h1–h3 range (32–56px) — line-height 115%, matches .typo-h1/.typo-h2/.typo-h3 */
.has-xxx-large-font-size,
.has-xxxx-large-font-size,
.has-xxxxx-large-font-size,
.has-xxxxxx-large-font-size,
.has-xxxxxxx-large-font-size,
.has-xxxxxxxx-large-font-size {
  line-height: 115%;
  letter-spacing: -0.02em;
}

/* ----------------------------------------------------------------
   Editor Styles
   Auto-prefixed with .editor-styles-wrapper by add_editor_style().
   Uses .wp-block-* classes for proper specificity to beat WP defaults.
   Safe for interact/ blocks — they use .typo-* classes, not .wp-block-heading.
   ---------------------------------------------------------------- */

/* Editor canvas padding — prevent content from sticking to edges.
   .editor-styles-wrapper is the iframe body in the block editor — doesn't exist on frontend. */
.editor-styles-wrapper {
  padding-inline: var(--spacing-24);
}

/* Editor block spacing — tighten default WordPress gaps */
h1.wp-block-heading {
  margin: 0 0 var(--spacing-24);
}

h2.wp-block-heading {
  margin: var(--spacing-32) 0 var(--spacing-16);
}

h3.wp-block-heading {
  margin: var(--spacing-24) 0 var(--spacing-12);
}

h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
  margin: var(--spacing-24) 0 var(--spacing-8);
}

p.wp-block-paragraph {
  margin: 0 0 var(--spacing-16);
}

.wp-block-list {
  margin: 0 0 var(--spacing-16);
}

.wp-block-table {
  margin: var(--spacing-24) 0;
}

/* Editor headings — .wp-block-heading is added by Gutenberg, never by interact/typography */
h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading,
h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
  font-family: var(--font-family-heading);
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-default-default);
}

h1.wp-block-heading,
h2.wp-block-heading,
h3.wp-block-heading {
  line-height: 115%;
  letter-spacing: -0.02em;
}

h4.wp-block-heading,
h5.wp-block-heading,
h6.wp-block-heading {
  line-height: 130%;
  letter-spacing: -0.01em;
}

h1.wp-block-heading {
  font-size: var(--typo-h1-large, 48px);
}

h2.wp-block-heading {
  font-size: var(--typo-h2, 36px);
}

h3.wp-block-heading {
  font-size: var(--typo-h3, 32px);
}

h4.wp-block-heading {
  font-size: var(--typo-h4, 28px);
}

h5.wp-block-heading {
  font-size: var(--typo-h5, 24px);
}

h6.wp-block-heading {
  font-size: var(--typo-h6, 20px);
}

/* Editor paragraphs — .wp-block-paragraph is added by Gutenberg, never by interact/typography */
p.wp-block-paragraph {
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--color-text-default-default);
}

/* Editor strong / bold — scoped to core blocks to avoid leaking to header/footer */
.wp-block-paragraph strong,
.wp-block-paragraph b,
.wp-block-list strong,
.wp-block-list b,
.wp-block-quote strong,
.wp-block-quote b {
  font-weight: var(--font-weight-semibold, 600);
}

/* Editor links */
p.wp-block-paragraph a,
.wp-block-list a {
  color: var(--link-color);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1px;
  text-underline-offset: 1px;
  transition: filter 0.2s ease;
}

p.wp-block-paragraph a:hover,
.wp-block-list a:hover {
  filter: brightness(1.4);
}

/* Editor lists */
.wp-block-list {
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  font-weight: var(--font-weight-regular, 400);
  line-height: 130%;
  letter-spacing: -0.01em;
  color: var(--color-text-default-default);
  padding-left: var(--spacing-24);
}

.wp-block-list li {
  margin-bottom: var(--spacing-6);
}

/* Editor tables */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-family-base);
  font-size: var(--typo-body-medium, 16px);
  line-height: 160%;
  color: var(--color-text-default-default);
  border: 1px solid var(--color-border-default-default);
  border-radius: var(--border-radius-8);
  overflow: hidden;
}

.wp-block-table table th {
  font-weight: var(--font-weight-medium, 500);
  text-align: left;
  padding: var(--spacing-12) var(--spacing-16);
  background-color: var(--color-bg-neutral-subtle);
  border-bottom: 2px solid var(--color-border-default-default);
}

.wp-block-table table td {
  padding: var(--spacing-12) var(--spacing-16);
  border-bottom: 1px solid var(--color-border-default-default);
  vertical-align: top;
}

.wp-block-table table tr:last-child td {
  border-bottom: none;
}

.wp-block-table table tbody tr:nth-child(even) {
  background-color: var(--color-bg-neutral-subtle);
}

/* Editor quotes */
.wp-block-quote {
  margin: var(--spacing-32) 0;
  border-left: 4px solid var(--color-border-brand-primary);
  padding: var(--spacing-24) var(--spacing-32);
  background-color: var(--color-bg-neutral-subtle);
  border-radius: 0 var(--border-radius-8) var(--border-radius-8) 0;
}

.wp-block-quote p {
  font-size: var(--typo-body-large, 20px);
  font-style: italic;
  color: var(--color-text-default-default);
}

.wp-block-quote cite {
  display: block;
  margin-top: var(--spacing-12);
  font-size: var(--typo-body-small, 14px);
  font-style: normal;
  color: var(--color-text-default-soft);
}

/* Editor separator */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border-default-default);
  margin: var(--spacing-48) 0;
}

/* Editor code */
.wp-block-code {
  font-family: monospace;
  font-size: var(--typo-body-small, 14px);
  line-height: 160%;
  padding: var(--spacing-24);
  background-color: var(--color-bg-neutral-subtle);
  border-radius: var(--border-radius-12);
}

.wp-block-paragraph code,
.wp-block-list code,
.wp-block-heading code {
  font-family: monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background-color: var(--color-bg-neutral-subtle);
  border-radius: var(--border-radius-4);
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 979px) {
  .entry-content :where(h2:not([class*="typo-"])),
  .wp-block-interact-text-content :where(h2:not([class*="typo-"])) {
    font-size: var(--typo-h2-mobile, 32px);
  }

  .entry-content :where(h3:not([class*="typo-"])),
  .wp-block-interact-text-content :where(h3:not([class*="typo-"])) {
    font-size: var(--typo-h3-mobile, 28px);
  }

  .entry-content :where(h4:not([class*="typo-"])),
  .wp-block-interact-text-content :where(h4:not([class*="typo-"])) {
    font-size: var(--typo-h4-mobile, 24px);
  }
}

@media (max-width: 768px) {
  .wp-block-table table,
  .entry-content table,
  .wp-block-interact-text-content table {
    font-size: var(--typo-body-small, 14px);
  }

  .wp-block-table table th,
  .wp-block-table table td,
  .entry-content table th,
  .entry-content table td,
  .wp-block-interact-text-content table th,
  .wp-block-interact-text-content table td {
    padding: var(--spacing-8) var(--spacing-12);
  }

  .entry-header .entry-title {
    font-size: var(--typo-h1-large-mobile, 44px);
  }
}