/* ==========================================================================
   CONTENT — everything the editor creates in the page editor

   Every selector here starts with .content, because the theme wraps the whole
   page content in that wrapper. That is not decoration but a rule: if a rule
   does not start with .content, it does not belong in this file.

   The page frame, the header and the footer are in assets/theme.css
   Colors and measurements are in style.css
   ========================================================================== */


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

.content > * + * { margin-top: 1rem; }

/* The page title is a Heading block, like any other text. The line beneath it
   is the bottom border of the heading itself, so it does not have to be added
   as a separate block. */
.content h1 {
  font-size: var(--fs-page-title); font-weight: 600;
  color: var(--brand-blue); line-height: 1.2;
  margin: 0 0 1.5rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--rule);
}
.content > h1:first-child { margin-top: 0; }

.content h2 { font-size: 1.3rem; margin-top: 2rem; color: var(--text); }
.content h3 { font-size: 1.1rem; margin-top: 1.5rem; }

.content ul, .content ol { padding-left: 1.3rem; }
.content li + li { margin-top: .3rem; }

/* Justified paragraphs are NOT here. They are switched on and off in wp-admin
   → Site settings, together with the screen width below which the text stays
   left, so the rule is printed by inc/settings.php. */


/* ==========================================================================
   BUTTONS — the built-in Button block
   ========================================================================== */

/* The same look as the buttons on the home page: two columns, same color and
   height. A single standalone button should not stretch across half the width. */
.content .wp-block-buttons {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem;
  margin-top: 2rem;
}
.content .wp-block-buttons:has(> :only-child) { grid-template-columns: minmax(0, 18rem); }
.content .wp-block-button { display: block; }
.content .wp-block-button__link {
  display: block; width: 100%; padding: .85rem 1.1rem; text-align: center;
  background: var(--button-bg); color: var(--text-on-brand);
  text-decoration: none; border-radius: var(--radius);
  font-weight: 600; font-size: inherit; line-height: inherit;
}
.content .wp-block-button__link:hover { background: var(--button-bg-hover); }


/* ==========================================================================
   PDF LISTING — the built-in File block
   ========================================================================== */

.content .wp-block-file {
  display: flex; align-items: baseline; gap: .7rem;
  margin: 0; padding: .85rem .3rem;
  border-top: 1px solid var(--hairline);
}
.content .wp-block-file + .wp-block-file { margin-top: 0; }
.content .wp-block-file:last-of-type { border-bottom: 1px solid var(--hairline); }

/* WordPress's own block style shrinks the File block to .8em. A listing reads
   at the size of the rest of the page, like the lists of people. The selector
   repeats WordPress's own with .content in front, so it wins whatever order
   the two stylesheets load in. */
.content .wp-block-file:not(.wp-element-button) { font-size: inherit; }

.content .wp-block-file a:first-child {
  color: var(--link); text-decoration: none; font-weight: 600;
}
.content .wp-block-file a:first-child:hover { text-decoration: underline; }

/* the file type and size are added by functions.php — only when they are
   turned on in wp-admin → Site settings, which they are not by default */
.content .file-meta {
  margin-left: auto; color: var(--text-muted);
  font-size: .82rem; white-space: nowrap; flex: none;
}

/* The „Download“ button and the PDF preview are DISABLED by default — that is
   set in assets/editor.js, when the block is inserted. Nothing is hidden here:
   if the editor turns them on in the sidebar, they show up.
   So all we do here is give them a look. */
.content .wp-block-file__button {
  flex: none; order: 3;
  padding: .2rem .6rem; font-size: .8rem; font-weight: 600;
  background: none; color: var(--link);
  border: 1px solid var(--hairline); border-radius: var(--radius);
  text-decoration: none;
}
.content .wp-block-file__button:hover {
  border-color: var(--brand-blue); background: var(--blue-100);
}

/* The PDF preview takes a full row below the name, when it is enabled. */
.content .wp-block-file__embed {
  flex-basis: 100%; order: 4;
  margin-top: .6rem; border: 1px solid var(--hairline);
}


/* ==========================================================================
   LINKS THAT OPEN IN A NEW TAB

   We target target="_blank" — that is, what the editor actually chose, either
   in the dialog when inserting the link, or in the sidebar of the File block.
   Nothing is added at render time; this is only the look.
   ========================================================================== */

/* A small marker that the link opens in a new tab. Opening a new tab without
   warning is a well known accessibility complaint, so let it be visible
   beforehand.

   display: inline-block is essential here. A link's underline does not carry
   into atomic boxes, so the arrow stays un-underlined. The gap is padding
   INSIDE that box, not an outer margin — a margin would remain part of the
   link, so it would be underlined and the line would break.

   Can be turned off in wp-admin → Site settings (inc/settings.php). */
.content a[target="_blank"]::after {
  content: "\2197";
  display: inline-block;
  padding-left: .2em;
  font-size: .8em;
  opacity: .75;
}

/* Not in a PDF listing — every row is a document, so, as in the lists of
   people below, a column of arrows would only be noise */
.content .wp-block-file a[target="_blank"]::after { content: none; }

/* One link in a sentence without the arrow — the "No arrow" button in the
   editor's toolbar (assets/editor.js). It wraps the link text in
   <span class="no-arrow">, and depending on the order things were done in
   the span ends up either inside the <a> or around it, so both are covered. */
.content a[target="_blank"]:has(.no-arrow)::after,
.content .no-arrow a[target="_blank"]::after { content: none; }


/* ==========================================================================
   LISTS OF PEOPLE AND INSTITUTIONS

   NOTE: these are the only three class names the block editor does not
   produce on its own. Nobody has to type them any more — functions.php
   registers three patterns that carry them, and the editor inserts a ready
   list and types over the names. See "Patterns for the lists of people".

   They are used on /clanovi/, /organi/predsednistvo/,
   /organi/predsednik-i-potpredsednici/ and /organi/nadzorni-odbor/, and on
   their English counterparts under /en/.

   They therefore also live inside the page content in the database. If they
   are ever renamed again, the content has to be updated in the same pass —
   both the class attribute and the {"className":"…"} in the block comment.

   If the need for them goes away, this whole section is deleted.
   ========================================================================== */

/* A list without bullets, with a line between entries. Thirty two-line
   entries would otherwise run together into a wall of text. */
.content .member-list { list-style: none; padding-left: 0; }
.content .member-list li { padding: .6rem 0; border-top: 1px solid var(--hairline); }
.content .member-list li + li { margin-top: 0; }
.content .member-list li:last-child { border-bottom: 1px solid var(--hairline); }

/* The second line of an entry: deputy, title or institution. */
.content .deputy,
.content .role { color: var(--text-muted); font-size: .92em; }

/* When a whole list is external links, seventy arrows in a row are just
   noise — the context already makes it obvious where they lead. */
.content .member-list a[target="_blank"]::after { content: none; }


/* ==========================================================================
   NARROW SCREENS
   ========================================================================== */

@media (max-width: 720px) {
  .content .wp-block-file { flex-wrap: wrap; }
  .content .file-meta { margin-left: 0; flex-basis: 100%; }
}