/* ==========================================================================
   Core blocks, wearing the portal's own clothes.

   theme.json already carries colour, type scale and layout width — the things
   it can express, it should, because the editor reads them too and an author
   then sees what a visitor will see. This file is only for what theme.json
   cannot say: component shapes the site already has, and the accessibility
   guarantees the rest of the portal is held to.

   The rule that governs every declaration here: a block must not introduce a
   look the portal does not already have. A table built from core/table has to
   be the same object as a table in a migrated page, or a reader learns the
   layout twice.

   Loaded on the front end only where a record actually has blocks, and as the
   editor canvas stylesheet (inc/bloki.php).
   ========================================================================== */

/* ----------------------------------------------------------- figure reset */

/* Table, image and gallery are <figure>, and the browser's default stylesheet
   gives a figure `margin: 1em 40px`. Measured on the demo page: paragraphs,
   quote, columns and the file block all began at x=170, while the table and
   the image began at x=210 — every block aligned except the two that are
   figures, which reads as a mistake rather than a margin.

   WordPress's own stylesheet resets this; the portal dequeues it, so the reset
   has to be restated here. */
.wp-block-table,
.wp-block-image,
.wp-block-gallery {
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------------------------ table */

/* Same object as .data-table, which every migrated table is rendered as. */
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
}
.wp-block-table :is(th, td) {
  padding: 14px 16px;
  text-align: left;
  font-size: 15.5px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.wp-block-table thead th {
  background: var(--tint);
  font-size: 13.5px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--teal-deep);
  font-weight: 700;
}
.wp-block-table tbody th { font-weight: 700; }
.wp-block-table tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* A wide table must scroll inside its own box, never take the page sideways
   with it — 1.4.10, which the whole portal is tested against. */
.wp-block-table { overflow-x: auto; }

.wp-block-table figcaption {
  margin-top: var(--s-2);
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------------------------------------------------------------- columns */

.wp-block-columns { gap: var(--s-5); }

/* WordPress stacks columns below 782px. This portal's own grids reflow at the
   width where the content stops fitting rather than at a device guess, and two
   columns of Slovene prose stop fitting well before 782px. */
@media (max-width: 900px) {
  .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: wrap; }
  .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
    flex-basis: 100% !important;
  }
}

/* ------------------------------------------------------------------ quote */

.wp-block-quote {
  margin: var(--s-6) 0;
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
  border-left: 4px solid var(--teal);
}
.wp-block-quote cite {
  display: block;
  margin-top: var(--s-3);
  font-size: var(--step--1);
  font-style: normal;
  color: var(--muted);
}

/* ---------------------------------------------------------------- details */

/* The same disclosure the content normaliser produces for migrated collapse
   widgets, so an accordion an editor builds and one we converted are one
   component rather than two that resemble each other.
 *
   That sentence was not true until tools/zlozljivi.php made it matter. The 150
   migrated disclosures now carry BOTH classes — `wp-block-details disclosure`
   — and blocks.css loads after components.css, so every value that disagreed
   here silently won: the panel lost padding, the summary dropped from the
   display face at 700 to the body face at 600, and its target shrank from 44px
   to 24px. The values below are components.css's `.disclosure`, so whichever
   rule the cascade picks the reader sees the same panel. */
.wp-block-details {
  margin-block: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}
.wp-block-details > summary {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--teal-deep);
  cursor: pointer;
  list-style: none;
  min-height: 44px;                       /* 2.5.8 target size, with room */
}
.wp-block-details > summary::-webkit-details-marker { display: none; }
.wp-block-details > summary::before {
  content: "";
  width: .55em;
  height: .55em;
  flex: none;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .15s;
}
.wp-block-details[open] > summary::before { transform: rotate(-135deg); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-details > summary::before { transition: none; }
}

/* ---------------------------------------------------------------- buttons */

/* theme.json sets the colour and radius; these are the states it cannot. */
.wp-block-button__link {
  padding: .7em 1.5em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
/* The text colour is restated on every filled :hover here: site.css has
   a:hover{color:var(--teal-deep)}, which outranks the block's own colour, and
   painted these buttons' text the colour of their hover background — the
   File block's »Prenos« was invisible (tools/hover-kontrast.mjs, 5. 10. 2026). */
.wp-block-button__link:hover { background-color: var(--accent-hover); color: var(--on-brand); }
.wp-block-button__link:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

/* --------------------------------------------------------- image, gallery */

.wp-block-image img { border-radius: var(--r); }
.wp-block-image figcaption,
.wp-block-gallery figcaption {
  margin-top: var(--s-2);
  font-size: var(--step--1);
  color: var(--muted);
  text-align: left;
}
.wp-block-gallery { gap: var(--s-3); }

/* ------------------------------------------------------------------- file */

/* The block an editor should reach for instead of the Dokument record type,
   which renders on no public page. Given the shape of a download so it reads
   as one, and the file type belongs in the link text — the content scanner
   requires that of every other document link on the portal. */
.wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3);
  margin: var(--s-4) 0;
  padding: var(--s-3) var(--s-4);
  background: var(--tint);
  border-radius: var(--r);
}
.wp-block-file a:not(.wp-block-file__button) {
  font-weight: 600;
  color: var(--teal-deep);
}
.wp-block-file__button {
  background: var(--teal);
  color: var(--on-brand);
  border-radius: 10px;
  padding: .55em 1.2em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.wp-block-file__button:hover { background: var(--teal-deep); color: var(--on-brand); }
.wp-block-file__button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* -------------------------------------------------------------- separator */

.wp-block-separator {
  margin: var(--s-6) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------------ lists */

.wp-block-list { padding-left: 1.25em; }
.wp-block-list li + li { margin-top: var(--s-2); }

/* ----------------------------------------------------------- editor canvas */

/* The editor renders blocks without the theme's page wrapper, so the measure
   has to be restated or an author composes against a width no visitor sees. */
.editor-styles-wrapper {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--card);
}