/*
 * WP core block overrides and Doku block shared styles.
 * Loaded as both editor styles and frontend styles.
 */

/* ─── CORE BLOCKS ────────────────────────────────────────── */

.wp-block-paragraph { margin-bottom: 16px; }
/* A paragraph with a background is a box, so it is spaced as one rather than
   as text. Later than main.css's .entry-content p, at the same (0,1,1). */
p.has-background { margin-block: var(--space-block, 20px); }

.wp-block-code {
  background: var(--color-bg-code) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 8px);
  margin: var(--space-block, 20px) 0;
  overflow: hidden;
  /* The inset is the <code>'s; main.css's pre padding would double it. */
  padding: 0;
}
.wp-block-code code {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-code, 13.5px);
  line-height: 1.7;
  color: var(--color-text-code, #d4d4d4);
  display: block;
  padding: 20px;
}

.wp-block-preformatted,
.wp-block-verse {
  font-family: var(--font-mono, monospace);
  font-size: var(--text-code, 13.5px);
  line-height: 1.7;
  background: var(--color-bg-code, #1a1a1a);
  color: var(--color-text-code, #d4d4d4);
  padding: 20px;
  border-radius: var(--radius-lg, 8px);
  border: 1px solid var(--color-border, #ccc);
  overflow-x: auto;
  margin: var(--space-block, 20px) 0;
}

.wp-block-quote {
  border-left: 3px solid var(--color-accent, #3dd68c);
  padding: 8px 0 8px 16px;
  margin: var(--space-block, 20px) 0;
  font-style: italic;
  color: var(--color-text-dim, #4f4f4f);
}
.wp-block-quote cite {
  font-style: normal;
  font-size: var(--text-sm, 12px);
  color: var(--color-text-muted, #6e6e6e);
  display: block;
  margin-top: 8px;
}

/* A pullquote is set apart by size and a pair of rules rather than the quote's
   box, which main.css would otherwise paint on its inner blockquote inside core's
   4em of padding. */
.wp-block-pullquote {
  margin: var(--space-block, 20px) 0;
  padding: 32px 0;
  border-top: 1px solid var(--color-border, #ccc);
  border-bottom: 1px solid var(--color-border, #ccc);
  font-size: var(--text-h2, 1.375rem);
  line-height: 1.5;
}
.wp-block-pullquote blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-size: inherit;
}
/* Inherited, so a font size picked for the block reaches its text. */
.wp-block-pullquote p {
  font-size: inherit;
  line-height: inherit;
  color: var(--color-text-heading, #0a0a0a);
  text-wrap: balance;
}
.wp-block-pullquote cite {
  font-size: var(--text-sm, 12px);
  font-style: normal;
  color: var(--color-text-muted, #6e6e6e);
  margin-top: 16px;
}

/* On the figure, not the table: core's overflow-x: auto on the figure keeps a
   table's margin inside it, where it cannot collapse with its neighbors'. */
.wp-block-table { margin: var(--space-block, 20px) 0; }
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-md, .875rem);
}
.wp-block-table thead { border: none; }
.wp-block-table th {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-xs, 11px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--color-text-muted, #6e6e6e);
  padding: 8px 12px;
  text-align: left;
  border: none;
  border-bottom: 2px solid var(--color-border, #ccc);
}
.wp-block-table td {
  padding: 12px;
  border: none;
  border-bottom: 1px solid var(--color-border-subtle, #e0e0dc);
  vertical-align: top;
  color: var(--color-text, #1a1a1a);
}
/* A hyphen is a break opportunity and auto layout shrinks each column to its
   narrowest fit, so an identifier would split at every hyphen; the figure
   scrolls instead. Fixed layout is excluded: its equal columns cannot grow,
   so an unbreakable name would spill into the next cell. */
.wp-block-table table:not(.has-fixed-layout) :is(td, th) code { white-space: nowrap; }
.wp-block-table tr:last-child td { border-bottom: none; }
/* Core rules the footer off with a 3px currentColor bar; this is the header's
   rule mirrored. */
.wp-block-table tfoot { border-top: 2px solid var(--color-border, #ccc); }
/* Core's Stripes style paints #f0f0f0 rows and rule, which put dark mode's
   light text at 1.3:1. The code header's token is one step off the page in
   both schemes. :root clears core's inline (0,3,2) here and in the editor. */
:root .wp-block-table.is-style-stripes tbody tr:nth-child(odd) {
  background-color: var(--color-bg-code-header, #f0f0ee);
}
:root .wp-block-table.is-style-stripes {
  border-bottom-color: var(--color-border-subtle, #e0e0dc);
}
.wp-block-table tbody tr:hover td { background: var(--color-accent-hover, rgba(15,122,74,.08)); }

.wp-block-image img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md, 6px);
  border: 1px solid var(--color-border-subtle, #e0e0dc);
}
/* SVGs are diagrams on a transparent ground, so a frame would enclose the
   bounding box rather than the artwork. The extension is the only signal
   available: the importer keeps no class that marks a drawing. */
.wp-block-image img[src$=".svg" i],
.wp-block-image img[src*=".svg?" i] {
  border: none;
}
/* Every media and table caption reads as one. Left, not centered: the figure
   spans the content column, so a centered caption detaches from any image
   narrower than it. No bottom margin: the figure's own --space-block ends the
   block. A gallery's per-image captions are core's overlay and keep its look. */
.wp-block-image figcaption,
.wp-block-table figcaption,
.wp-block-audio figcaption,
.wp-block-video figcaption,
.wp-block-embed figcaption,
.wp-block-gallery.has-nested-images > .blocks-gallery-caption {
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-sm, 12px);
  line-height: 1.5;
  color: var(--color-text-muted, #6e6e6e);
  text-align: left;
  margin-top: 8px;
  margin-bottom: 0;
}

.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border-subtle, #e0e0dc);
  margin: 32px 0;
}
/* Override WP global-styles specificity (.wp-block-separator:not(.x):not(.y) = 0-3-0) */
.wp-block-separator:not(.is-style-wide):not(.is-style-dots) {
  width: 100%;
  max-width: 100%;
}

.wp-block-buttons { margin: var(--space-block, 20px) 0; }
/* Both variants are one box built one way: the same padding and the same 2px
   border, so the outline swaps the fill for a rule and changes nothing else.
   The filled one's border is transparent and the background paints to the
   border box, so it reads as solid. Core pays for the outline's border in
   padding instead — :root :where(...) at (0,1,0), restated again per style
   variation in block-style-variation-styles-inline-css, which loads after this
   file — and that landed the two buttons 4px apart in both axes. So the
   outline rule has to restate padding at (0,3,0); dropping it hands the
   measurement back to core. */
.wp-block-button__link {
  background: var(--color-accent, #3dd68c);
  color: var(--color-on-accent, #fff) !important;
  border: 2px solid transparent;
  border-radius: var(--radius-md, 6px);
  padding: 8px 20px;
  min-height: var(--tap-target-min, 44px);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-md, 14px);
  font-weight: 500;
  /* Literal fallback: this file is also loaded through add_editor_style(),
     inside an iframe main.css never reaches. */
  transition: opacity var(--duration-quick, .12s);
}
.wp-block-button__link:hover { opacity: .85; }

/* The File block's download link. Markup saved before WP 6.1 lacks
   .wp-element-button, so theme.json's button colors never reach it, and the
   reset in main.css strips core's (0,0,0) padding. */
.wp-block-file__button {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-target-min, 32px);
  padding: 4px 16px;
  border-radius: var(--radius-md, 6px);
  background: var(--color-accent, #0f7a4a);
  color: var(--color-on-accent, #fff);
  font-family: var(--font-sans, sans-serif);
  font-size: var(--text-md, 14px);
  font-weight: 500;
  text-decoration: none;
  transition: opacity var(--duration-quick, .12s);
}
/* Core shrinks the block to .8em, which leaves the file name smaller than the
   button beside it. :root outranks core's (0,2,0). */
:root .wp-block-file { font-size: var(--text-body, .9375rem); }
/* Color restated: theme.json's link hover paints it accent, on accent. */
.wp-block-file__button:hover {
  color: var(--color-on-accent, #fff);
  opacity: .85;
}
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  color: var(--color-accent, #3dd68c) !important;
  border: 2px solid var(--color-accent, #3dd68c);
  padding: 8px 20px;
}

/* Core's initial is 8.4em at weight 100; this one is set like the headings,
   two lines tall. */
.has-drop-cap:not(:focus)::first-letter {
  font-family: var(--font-mono, monospace);
  font-size: 3.5em;
  font-weight: 700;
  line-height: 1;
  margin: 0 8px 0 0;
}

.wp-block-list { padding-left: 24px; margin-bottom: 16px; }
.wp-block-list li {
  font-size: var(--text-body, .9375rem);
  line-height: 1.75;
  color: var(--color-text, #1a1a1a);
  margin-bottom: 4px;
}

.is-style-task-list { list-style: none; padding-left: 0; }
.task-list-item { padding-left: 0; }
.task-list-item--done { text-decoration: line-through; color: var(--color-text-muted, #6e6e6e); }
.task-list-item > .wp-block-list { margin-top: 4px; }

.wp-block-columns { gap: 24px; margin: var(--space-block, 20px) 0; }
.wp-block-column { min-width: 0; }

.wp-block-group { margin: var(--space-block, 20px) 0; }

/* ─── EDITOR OVERRIDES ───────────────────────────────────── */

.editor-styles-wrapper .wp-block {
  max-width: none;
}

.editor-styles-wrapper {
  background: var(--color-bg, #f6f6f4);
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-sans, sans-serif);
}

/* Accordion (core/details). Mirrors main.css's ACCORDION section, whose rules
   do not reach the editor canvas; the fallbacks are the light-mode tokens. The
   body opens without the front end's slide. */
.editor-styles-wrapper .wp-block-details {
  border: 1px solid var(--color-border-subtle, #e0e0dc);
  border-radius: var(--radius-md, 6px);
  margin: var(--space-block, 20px) 0;
  padding: 0 16px;
  overflow: hidden;
}
.editor-styles-wrapper .wp-block-details[open] { padding-bottom: 16px; }
.editor-styles-wrapper .wp-block-details > summary {
  position: relative;
  margin: 0 -16px;
  padding: 12px 48px 12px 16px;
  min-height: var(--tap-target-min, 32px);
  cursor: pointer;
  font-size: var(--text-md, 14px);
  font-weight: 500;
  color: var(--color-text-heading, #0a0a0a);
  background: var(--color-bg-aside, #efefed);
  list-style: none;
}
.editor-styles-wrapper .wp-block-details > summary::-webkit-details-marker { display: none; }
.editor-styles-wrapper .wp-block-details > summary::after {
  content: '';
  position: absolute;
  inset-block: 0;
  right: 16px;
  width: 15px;
  height: 15px;
  margin-block: auto;
  background-color: var(--color-text-muted, #6a6a6a);
  -webkit-mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat;
  mask: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")) center / contain no-repeat;
  transform: rotate(-90deg);
}
.editor-styles-wrapper .wp-block-details[open] > summary {
  margin-bottom: 16px;
  border-bottom: 1px solid var(--color-border-subtle, #e0e0dc);
}
.editor-styles-wrapper .wp-block-details[open] > summary::after { transform: rotate(0deg); }