/* === Design tokens (matching openprocurements.com homepage) === */
:root {
  --bg: #f6f5f1;
  --bg-2: #fbfaf6;
  --bg-3: #efede6;
  --line: #e1ddd2;
  --line-bright: #c9c4b6;
  --txt: #1a1c20;
  --txt-mute: #6e7384;
  --txt-faint: #9b9faa;
  --accent: #1d7a4d;
  --accent-2: #1e5fa8;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--txt);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; line-height: 1.55;
  background-image:
radial-gradient(circle at 92% -8%, rgba(29, 122, 77, .07), transparent 50%),
radial-gradient(circle at -10% 110%, rgba(30, 95, 168, .07), transparent 50%);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }
.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji, Android Emoji, EmojiSymbols, EmojiOne Mozilla, Twemoji Mozilla, Segoe UI Symbol, Noto Color Emoji Compat, emoji;
}

/* === Outer layout: re-target Bulma .section / .container === */
.section { padding: 0; }
.container { max-width: 1340px; margin: 0 auto; padding: 0 28px; }
.block { margin-bottom: 24px; }

/* === Listing-row card treatment ===
   In results.html (search, buyer, supplier, cpv-leaf, nuts), each
   tender result is a `<div class="block">` whose first child is a
   `<span class="tag">YYYY-MM-DD</span>` (the date_tag macro). Wrap
   each row in a cream card so the listing has the same visual
   weight as the country-home table — each row reads as a self-
   contained item with its own background, border, and breathing
   room. The `:has()` selector confines this to result-row blocks
   only, leaving heading/breadcrumb/contact-form blocks untouched. */
.block:has(> span.tag) {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px 20px;
  margin-bottom: 10px;
}

/* === Inline-text links inside body content ===
   By default `.block a` had `color: inherit; text-decoration: none`,
   which made tender titles, buyer-name parentheticals, "View the
   procurement »" links etc. visually indistinguishable from the
   surrounding text. Restore link affordance: subtle dotted underline,
   dark text, accent color on hover. Excludes anchors that are part
   of components with their own treatment (.tag, .breadcrumb li a,
   .pagination-link, .modal-close, .button, etc.). */
.block a:not(.tag):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next):not(.js-modal-trigger) {
  color: var(--txt);
  text-decoration: none;
  border-bottom: 1px dotted var(--line-bright);
  transition: color .15s ease, border-color .15s ease;
}
.block a:not(.tag):not(.button):not(.pagination-link):not(.pagination-previous):not(.pagination-next):not(.js-modal-trigger):hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
/* === Result-row snippet wrapper ===
   results.html wraps each tender's description snippet + the
   "View the procurement »" link in a single `<i>` element.
   Browser default italicises that whole block, which dominates
   the listing visually and reads as decorative rather than
   informational. Override the default: render the snippet
   upright, muted, slightly smaller, with a comfortable line
   height — visually subordinate to the tender title above and
   the chip row below. The block-level + max-width keeps long
   snippets to a readable measure on wide screens. The few
   legitimate italic uses (`<i>"value"</i>` in tender_details
   for quoted long-text values) live inside `.notification`,
   not `.block`, so they are unaffected. */
.block > i {
  display: block;
  font-style: normal;
  color: var(--txt-mute);
  font-size: 13.5px;
  line-height: 1.65;
  margin: 6px 0 0;
}
/* Listing-card markup ends `<i>snippet</i><br />` and then either
   the supplier chip row or — for cards without suppliers — nothing.
   The trailing `<br>` was harmless when `<i>` was inline; now that
   `<i>` is block-level the `<br>` adds ~22px of empty line-height
   below the snippet, making the card's bottom padding visibly
   larger than its top padding. Hide the `<br>` only when it is
   the last element child (i.e., no chip row follows it). When
   chips do follow, the `<br>` keeps its job of separating
   snippet from chips. */
.block > i + br:last-child { display: none; }
/* Inline anchors inside the snippet — "View the procurement »"
   and any urlized links — read as tertiary CTAs, not italic. */
.block > i a {
  color: var(--accent);
  font-style: normal;
  border-bottom: 1px dotted currentColor;
}
.block > i a:hover { color: var(--txt); border-bottom-color: var(--txt); }
/* Search-result highlight: results.html replaces the OpenSearch
   <em> tag with <b> on the highlighted-description fragment.
   Boost without shouting. */
.block > i b {
  color: var(--txt);
  font-weight: 500;
  background: rgba(29, 122, 77, 0.08);
  padding: 0 2px;
  border-radius: 2px;
}

/* === Reading-width cap for body paragraph text ===
   Stretching to 1280px on wide monitors is too long for comfortable
   reading. The .block top-level paragraphs get a max-width;
   tabular blocks (table, .country-kpis, pagination) keep their
   full width via more specific rules above. .block > i has its
   own max-width set in the snippet rule above. */
.block > p,
.block > div:not(.country-kpis):not([class*="tile"]):not([class*="card"]) > p {
  max-width: 72ch;
}

/* === Statusbar (re-target Bulma's .navbar) ===
   A pulse dot + brand wordmark is rendered via ::before / ::after
   pseudo-elements so the existing HTML markup is untouched. */
.navbar {
  display: flex !important;
  align-items: center;
  gap: 18px;
  max-width: 1340px;
  margin: 0 auto;
  padding: 24px 28px 14px !important;
  border-bottom: 1px solid var(--line);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--txt-mute);
  flex-wrap: wrap;
  background: transparent !important;
  min-height: auto !important;
  position: relative;
}
.navbar::before {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(29, 122, 77, 0.18);
  animation: pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%,100% { opacity: 1;   transform: scale(1);   box-shadow: 0 0 0 4px rgba(29,122,77,.18); }
  50%     { opacity: .55; transform: scale(.85); box-shadow: 0 0 0 6px rgba(29,122,77,.08); }
}
.navbar::after {
  content: "openprocurements.com";
  color: var(--txt);
  font-weight: 500;
  letter-spacing: .04em;
  margin-right: auto;
}
.navbar-end { order: 99; }

/* Search box: re-target Bulma's .input.is-medium.is-rounded */
.navbar form { margin: 0; }
.control.has-icons-right { position: relative; }
.input.is-medium.is-rounded {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 36px 9px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--txt);
  width: 320px;
  max-width: 60vw;
  transition: border-color .15s ease, background .15s ease;
  box-shadow: none;
  line-height: 1.4;
}
.input.is-medium.is-rounded::placeholder { color: var(--txt-faint); }
.input.is-medium.is-rounded:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.icon.is-medium.is-right {
  position: absolute;
  right: 10px; top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: .65;
  cursor: pointer;
}

/* === Hero / page heading: re-target .title and .subtitle === */
.title {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--txt);
  margin: 56px 0 10px;
}
.subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: 17px;
  line-height: 1.5;
  color: var(--txt-mute);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 32px;
  max-width: 72ch;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--txt);
}

/* Country-home KPI strip — mirrors global_index .heromet card-grid.
   Three cards (tenders / buyers / suppliers) with monospace numbers,
   tiny uppercase labels, subtle "since 1993" delta on the first card.
   Rendered only when landing.json was loaded (see index_new.html). */
.country-kpis {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 24px 0 32px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  border-radius: 6px;
  overflow: hidden;
}
.country-kpis .m {
  padding: 18px 24px;
  border-right: 1px solid var(--line);
}
.country-kpis .m:last-child { border-right: none; }
.country-kpis .m .k {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 10px;
}
.country-kpis .m .v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--txt);
  font-variant-numeric: tabular-nums;
}
@media (max-width: 800px) {
  .country-kpis { grid-template-columns: 1fr; }
  .country-kpis .m {
border-right: none;
border-bottom: 1px solid var(--line);
padding: 14px 18px;
  }
  .country-kpis .m:last-child { border-bottom: none; }
}

/* === Breadcrumb (tender / search-results pages) === */
.breadcrumb {
  margin: 18px 0 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: .04em;
}
.breadcrumb ul {
  display: flex; flex-wrap: wrap; align-items: center;
  list-style: none;
  padding: 0; margin: 0;
  gap: 4px 8px;
}
.breadcrumb li {
  display: inline-flex; align-items: center;
  list-style: none;
  color: var(--txt-mute);
}
.breadcrumb li + li::before {
  content: "/";
  margin-right: 8px;
  color: var(--txt-faint);
}
.breadcrumb li a {
  color: var(--txt-mute);
  transition: color .15s ease;
  border-bottom: 1px dotted transparent;
}
.breadcrumb li a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.breadcrumb li.is-active a,
.breadcrumb li.is-active {
  color: var(--txt);
  font-weight: 500;
  cursor: default;
}
.breadcrumb li.is-active a:hover {
  color: var(--txt);
  border-bottom-color: transparent;
}

/* === Tables: re-target Bulma's .table ===
   Used in two contexts:
 - country-home Recent procurements (.table.is-fullwidth)
 - tender-detail Procurement history (small 2-col, no .is-fullwidth)
   Both get the shared cream surface + hairline border + 6px radius
   so they read as designed components. The non-fullwidth variant
   gets tighter padding + smaller font so the small history table
   feels intentionally compact rather than oversized.  */
.table {
  border-collapse: collapse;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.table.is-fullwidth {
  width: 100%;
}
.table thead th {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  background: var(--bg-3);
  border: none;
  padding: 14px 20px;
  text-align: left;
  font-weight: 500;
}
.table tbody td {
  border: none;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  font-size: 14px;
  color: var(--txt);
  line-height: 1.5;
  /* `middle` aligns content vertically to the row's centre line —
 important when one cell holds a pill (taller, with its own
 padding) and the next holds plain text. With `top` the pill's
 text baseline ended up several px above the adjacent cell's
 text baseline, making rows look mis-aligned. */
  vertical-align: middle;
}
/* Compact treatment for the procurement-history table
   (.table.is-striped without .is-fullwidth). */
.table:not(.is-fullwidth) thead th {
  padding: 9px 14px;
  font-size: 10px;
}
.table:not(.is-fullwidth) tbody td {
  padding: 9px 14px;
  font-size: 13px;
}
.table tbody tr:last-child td { border-bottom: none; }
/* Drop both the Bulma `.is-striped` zebra (every second row tinted)
   and our own row-hover tint. The mid-row tinting reads as a
   lingering hover state and made the listing feel restless. The
   row already has a hairline bottom border for separation, the
   link inside the cell has its own hover affordance, so a row-
   level background change isn't pulling weight. */
.table.is-striped tbody tr,
.table tbody tr,
.table tbody tr:hover {
  background: transparent;
}
.table tbody td a { color: var(--txt); transition: color .15s ease; }
.table tbody td a:hover { color: var(--accent); }

/* === Pagination: re-target Bulma ===
   Source order in results_pagination.html is:
 1. <a class="pagination-previous"> (when applicable)
 2. <a class="pagination-next">     (when applicable)
 3. <ul class="pagination-list">
   Bulma's stylesheet uses `order` to lay them out as
 [previous]   [page-number list, centered]   [next]
   which is the layout users expect. We replicate that with
   explicit flex `order` values plus a flex:1 on the list so it
   grows to fill the middle space. */
.pagination {
  margin: 32px 0 24px;
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.pagination.is-large { font-size: 13px; }
.pagination-previous { order: 1; }
.pagination-list {
  order: 2;
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  list-style: none;
  padding: 0; margin: 0;
}
.pagination-next { order: 3; }
.pagination-list li { list-style: none; }
.pagination-previous, .pagination-next, .pagination-link, .pagination-ellipsis {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--txt);
  transition: border-color .15s ease, color .15s ease, background .15s ease;
  text-decoration: none;
}
.pagination-previous:hover, .pagination-next:hover, .pagination-link:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.pagination-link.is-current {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.pagination-ellipsis {
  background: transparent;
  border-color: transparent;
  color: var(--txt-faint);
}

/* === Box (related searches container): re-target Bulma === */
.box {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 22px 24px;
  margin-top: 32px;
  box-shadow: none;
}
.box .title.is-7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin: 0 0 14px;
}

/* === Tags (related-searches chips): re-target Bulma === */
.tag {
  display: inline-flex; align-items: center;
  height: auto;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  line-height: 1.35;
  background: var(--bg);
  color: var(--txt-mute);
  border: 1px solid var(--line);
  margin: 2px 4px 2px 0;
  text-decoration: none;
  white-space: nowrap;
}
.tag.is-rounded.is-link.is-light {
  background: rgba(29, 122, 77, 0.08);
  color: var(--accent);
  border-color: rgba(29, 122, 77, 0.20);
}
.tag.is-rounded.is-link.is-light:hover {
  background: rgba(29, 122, 77, 0.16);
  border-color: rgba(29, 122, 77, 0.40);
}

/* === Date / deadline tags ===
   Rendered by macros: date_tag → <span class="tag">YYYY-MM-DD</span>
   (covered by the generic .tag rule above), and deadline_tag →
   <span class="tag is-link is-uppercase has-text-weight-semibold">…</span>
   which needs its own warm-warning treatment to read as "deadline". */
.tag.is-link.is-uppercase,
span.tag.is-link.is-uppercase {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.04em;
  background: rgba(180, 83, 9, 0.07);
  color: #92400e;
  border-color: rgba(180, 83, 9, 0.22);
}
.is-uppercase { text-transform: uppercase; }

/* Buttons (occasional) */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.button:hover { border-color: var(--accent); color: var(--accent); }

/* === Notifications (tender-detail "procurement history" docs) ===
   Each notification is a wide document panel densely populated
   with short field-label / value pairs across many subsections.
   Body text is set in --txt-mute so the explicit hierarchy
   elements below (.has-text-weight-bold section headings,
   .has-text-weight-semibold subsection labels, accent-coloured
   links) read as the primary anchors. Relaxed line-height
   makes the long structured text comfortable to scan without
   feeling like a wall of bold legal copy. */
.notification {
  background: var(--bg-2);
  border: 1px solid var(--line);
  color: var(--txt-mute);
  padding: 22px 24px;
  border-radius: 6px;
  margin: 16px 0;
  font-size: 13.5px;
  line-height: 1.75;
  /* Long URLs in field values (buyer profile address, email, etc)
 must wrap inside the panel rather than overflow. */
  overflow-wrap: anywhere;
  word-wrap: break-word;
}
/* Long-text quoted values inside notifications were rendered as
   large italic blocks (legacy `<i>"value"</i>` markup in
   tender_details.html long_text fields). On the tender-detail
   page that ended up reading as a quoted-archive style rather
   than a calm data interface. Render them upright; the literal
   "…" quote characters in the markup keep the value visibly
   distinct from labels. */
.notification i {
  font-style: normal;
}
.notification.is-light,
.notification.is-info.is-light {
  background: var(--bg-2);
  border-color: var(--line);
  color: var(--txt);
}
/* Tender-detail history panels alternate between plain `.is-light`
   and `.is-info.is-light` to subtly mark notice-type/state. The
   original `is-info` cold-blue tint clashed with the warm palette;
   a pale sage tint keeps the differentiation while feeling part of
   the same card family. */
.notification.is-info.is-light {
  background: rgba(29, 122, 77, 0.045);
  border-color: rgba(29, 122, 77, 0.18);
}
.notification > b:first-child {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin-bottom: 6px;
}
.notification a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.notification a:hover { color: var(--txt); }

/* Document-panel hierarchy. tender_details.html structures each
   notification as:
 <b>panel title</b>            ← mono micro-label, set above
 <span class="has-text-weight-bold">section heading</span>     ← e.g. "Objekt"
 <span class="has-text-weight-semibold">subsection label</span>← e.g. "Upphandlingens omfattning"
 plain text                     ← field labels + values
   Give the two spans visibly different typographic roles so the
   dense field-list inside each panel becomes scannable.
   Locale-safe: no uppercase forced on the spans (the strings can
   be long localized phrases).  */
.has-text-weight-bold { font-weight: 600; }
.has-text-weight-semibold { font-weight: 500; }
.notification .has-text-weight-bold {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt);
  letter-spacing: -0.005em;
  margin-top: 22px;
}
.notification > b:first-child + br + .has-text-weight-bold {
  margin-top: 2px;
}
/* Subsection label (dark + medium weight) sits between the
   section heading (bold dark) and the muted body text.
   No uppercase — locale-safe; long Swedish/Polish/etc phrases
   stay readable. */
.notification .has-text-weight-semibold {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  color: var(--txt);
  letter-spacing: 0;
  margin-top: 12px;
}

/* Tender detail: tighten the section labels (Deadline, Suppliers,
   Who?, What?, Where?). Markup pattern is `<b>Label</b><br>...<br><br>`,
   which Bulma rendered as an unstyled bold + whitespace. Treat the
   <b> like a small mono label for visual rhythm. */
.block > b {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin-top: 12px;
}
/* Reduce the double <br> gap between section blocks */
.block > br + br { display: block; content: ""; margin-top: 6px; }

/* === Page titles ===
   Three sizes, all from the same family (Inter, light weight,
   tightly tracked) to feel like one shared design system across
   the country home, listing pages, and detail pages.
 - .title (no modifier)  → country landing hero (big)
 - .title.is-3           → listing/detail page titles
 - .title.is-7           → micro-label (related-searches header)
   Listing titles get a touch more top margin so breadcrumbs +
   title + subtitle have a clear three-step rhythm. The clamp
   scales gracefully so long localized strings don't blow out
   on narrow screens (no fixed widths). */
.title.is-3, h1.title.is-3 {
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 40px 0 4px;
  color: var(--txt);
}

/* === Tender-detail page rules ===
   Keyed off the unique pairing `<h1 class="title is-3">` followed
   immediately by `<h2 class="subtitle">` as direct children of a
   .block — only the tender-detail page has this structure. The
   listing pages have `h2.subtitle.is-4` nested INSIDE the h1 (not
   a sibling), and the country home has neither, so this :has()
   selector is tender-only. */

/* Top spacing: more modest gap above the title so the title
   area feels intentionally composed rather than detached from
   the breadcrumb. */
.block:has(> h1.title.is-3 + h2.subtitle) > h1.title.is-3 {
  margin-top: 18px;
}

/* Mute body text inside the tender-summary block so the intro
   description reads as secondary to the title and metadata
   labels. Explicit-color rules elsewhere (h1/h2, .block > b,
   .block a:not(...), table cells, .notification, ul markers)
   override locally for those elements; the nested .block
   (containing tender_details: history table + notifications)
   is reset to default body color so its descendants aren't
   further dimmed. */
.block:has(> h1.title.is-3 + h2.subtitle) {
  color: var(--txt-mute);
}
.block:has(> h1.title.is-3 + h2.subtitle) > .block {
  color: var(--txt);
}

/* Vertical rhythm for the tender-summary metadata groups.
   tender_new.html now uses block-level <p> wrappers for the
   description and per-section content (deadline text, suppliers
   description), with bare <ul> for list content. No legacy
   <br><br> spacers. The <b> labels become block-level mono
   micro-headings; b margin-top creates a uniform section gap
   and b margin-bottom creates the in-section label-to-content
   gap. <p> + <ul> get a small extra-top so the chip list sits
   a touch below its descriptive sentence. */
.block:has(> h1.title.is-3 + h2.subtitle) > b {
  display: block;
  margin: 22px 0 6px;
}
.block:has(> h1.title.is-3 + h2.subtitle) > p {
  margin: 0;
  max-width: 72ch;
}
.block:has(> h1.title.is-3 + h2.subtitle) > ul {
  margin: 0;
}
.block:has(> h1.title.is-3 + h2.subtitle) > p + ul {
  margin-top: 4px;
}
.block:has(> h1.title.is-3 + h2.subtitle) > * + .block {
  margin-top: 22px;
}
.title.is-4, h2.title.is-4 {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin: 28px 0 8px;
}
.title.is-7 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  font-weight: 500;
  margin: 0 0 14px;
}
.subtitle.is-3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--txt-mute);
  font-family: 'Inter', sans-serif;
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0 24px;
}
/* Subtitle inside the listing-page <h1> — reads as a meta-line
   under the title ("N active procurements"). Mono micro-label
   feel matches the homepage's section labels. */
.subtitle.is-4 {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--txt-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 8px 0 20px;
}
/* Tender-detail buyer line: an h2.subtitle holds the link to
   the buyer just below the tender title. Make it a prominent
   inline buyer link, not a faint subtitle. */
h2.subtitle {
  font-size: 18px;
  font-weight: 500;
  color: var(--txt);
  margin: -8px 0 18px;
}
h2.subtitle a {
  color: var(--txt);
  border-bottom: 1px dotted var(--line-bright);
  transition: color .15s ease, border-color .15s ease;
}
h2.subtitle a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Box-with-content variant: the tender-detail "related categories"
   block uses `<div class="box content is-small">` — one element
   carrying both .box and .content. The `.box.content` selector
   targets it directly (not as a descendant; .box.content == one
   element here). */
.box.content {
  font-size: 13px;
  line-height: 1.55;
}
.box.content.is-small {
  padding: 20px 22px;
}
.box.content.is-small .title.is-7 {
  margin-top: 0;
}

/* Tag color variants (used in search results for supplier chips) */
.tag.is-link.is-light,
.tag.is-link.is-light.is-rounded {
  background: rgba(29, 122, 77, 0.08);
  color: var(--accent);
  border-color: rgba(29, 122, 77, 0.20);
}
.tag.is-link.is-light:hover,
.tag.is-link.is-light.is-rounded:hover {
  background: rgba(29, 122, 77, 0.16);
  border-color: rgba(29, 122, 77, 0.40);
}
.tag.is-rounded {
  border-radius: 999px;
}

/* === Body content lists ===
   The Who/What/Where/Suppliers lists on tender-detail render as
   <ul><li>• item</li></ul> — the "•" is literal text in the
   markup. Suppress the default disc bullet so we don't end up
   with two bullets per row. Scoped to direct-child <ul> of
   .block so it does NOT cascade into deeper structures
   (e.g. the cpv_tree's nested <ul>s inside .box.content,
   which want browser-rendered bullets). */
.block > ul:not(.pagination-list) {
  list-style: none;
  padding-left: 0;
  margin: 6px 0;
}
.block > ul:not(.pagination-list) > li {
  line-height: 1.7;
}
/* CPV tree (cpv_tree macro) renders a nested-<ul> hierarchy inside
   a `.content` wrapper: `.box.content.is-small` on the tender-detail
   page (where the wrapper is a sibling of the main .block, not a
   descendant) and `.content.is-small` inside a `.card` on the cpv
   listing page. Target via `.content > ul ...` so both contexts
   match.

   L1 categories (direct children of the outer ul) read at full
   charcoal weight; L2 mute, L3+ faint — so the visual hierarchy
   matches the semantic depth. The current cpv (rendered as
   <strong> by the macro) gets its own color so per-level mute
   doesn't wash it out.

   Links pick up the shared accent treatment so the tree reads as
   a navigation component, not body text. */
.content > ul {
  list-style: disc outside;
  padding-left: 0;
  margin: 6px 0 6px 22px;
}
.content > ul ul {
  list-style-type: circle;
  margin: 4px 0 4px 18px;
}
.content > ul ul ul {
  list-style-type: square;
}
.content > ul li {
  line-height: 1.65;
  margin-bottom: 2px;
}
.content > ul > li {
  color: var(--txt);
}
.content > ul > ul > li {
  color: var(--txt-mute);
}
.content > ul > ul > ul > li {
  color: var(--txt-faint);
}
.content > ul li::marker {
  color: var(--txt-faint);
}
.content > ul li strong {
  color: var(--txt);
  font-weight: 600;
}
.content > ul a {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
  transition: color .15s ease;
}
.content > ul a:hover { color: var(--txt); }

/* Form controls (contact form / future filter UIs) */
.field { margin-bottom: 16px; }
.field .label {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--txt-mute);
  margin-bottom: 6px;
  font-weight: 500;
}
.field .control { display: block; }
.field .input,
.field .textarea,
.input:not(.is-medium):not(.is-rounded),
.textarea {
  appearance: none;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 9px 12px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: var(--txt);
  width: 100%;
  line-height: 1.5;
  box-shadow: none;
}
.field .textarea, .textarea {
  min-height: 140px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}
.field .input:focus,
.field .textarea:focus,
.textarea:focus {
  border-color: var(--accent);
  background: #fff;
  outline: none;
}
.help { font-size: 12px; color: var(--txt-mute); margin-top: 4px; }

/* Bulma's content-area body text */
.content p { margin: 0 0 12px; }
.content > * + * { margin-top: 8px; }

/* === Tile system (used on CPV listing pages for two-column layout) ===
   Bulma's tile is a flex-based 12-column grid. We approximate the
   `.is-N` size modifiers as percentages, and stack on narrow screens. */
.tile {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
}
.tile.is-vertical { flex-direction: column; }
.tile.is-12 { width: 100%; }
.tile.is-7 { flex: 0 0 58.33%; max-width: 58.33%; }
.tile.is-4 { flex: 0 0 33.33%; max-width: 33.33%; }
.tile.is-1 { flex: 0 0 8.33%; max-width: 8.33%; }
.tile > .tile { padding: 0 16px; }
.tile.is-12 > .tile:first-child { padding-left: 0; padding-right: 24px; }
.tile.is-12 > .tile:last-child  { padding-right: 0; padding-left: 24px; }
.tile .card { width: 100%; }
.tile .card-content { padding: 22px 24px; }
.tile .card .title.is-7 { margin-bottom: 12px; line-height: 1.4; }
@media (max-width: 800px) {
  .tile.is-12 { flex-direction: column; }
  .tile.is-7, .tile.is-4 { flex: 0 0 100%; max-width: 100%; padding: 0 !important; }
  .tile.is-1 { display: none; }
  .tile > .tile { padding: 0 0 16px; }
}

/* === Card (Bulma component, used on CPV listing pages) === */
.card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}
.card-content {
  padding: 18px 20px;
}

/* === Message (Bulma component, used on /contact/) === */
.message {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 6px;
  margin: 16px 0;
  overflow: hidden;
}
.message-header {
  background: var(--bg-3);
  padding: 12px 18px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  color: var(--txt);
  line-height: 1.4;
}
.message-header p { margin: 0; }
.message-body {
  padding: 16px 18px;
  color: var(--txt);
  line-height: 1.6;
}
.message.is-danger {
  border-color: rgba(185, 74, 58, 0.30);
}
.message.is-danger .message-header {
  background: rgba(185, 74, 58, 0.10);
  color: #a13d2c;
}
.message.is-success {
  border-color: rgba(29, 122, 77, 0.30);
}
.message.is-success .message-header {
  background: rgba(29, 122, 77, 0.10);
  color: var(--accent);
}

/* === Field group + submit button (used on /contact/) === */
.field.is-grouped {
  display: flex;
  align-items: center;
  gap: 8px;
}
.field.is-grouped > .control {
  flex-shrink: 0;
}
.button.is-link {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.button.is-link:hover {
  background: #166540;
  border-color: #166540;
  color: #fff;
}

/* Click affordance on `.is-clickable` and `.js-modal-trigger` */
.is-clickable, .js-modal-trigger { cursor: pointer; }
.js-modal-trigger {
  color: var(--accent);
  border-bottom: 1px dotted currentColor;
}
.js-modal-trigger:hover { color: var(--txt); }

/* Modal (used for "Show more" on long values in tender details) */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal.is-active { display: flex; }
.modal-background {
  position: absolute;
  inset: 0;
  background: rgba(26, 28, 32, 0.55);
}
.modal-content {
  position: relative;
  max-width: 720px;
  width: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.modal-content .box {
  margin: 0;
  background: transparent;
  border: none;
}
.modal-card {
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(26, 28, 32, 0.5);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  color: #fff;
  font-size: 0;
}
.modal-close::before, .modal-close::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 14px;
  height: 2px;
  background: #fff;
  transform: translate(-50%, -50%) rotate(45deg);
}
.modal-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close.is-large { width: 32px; height: 32px; top: 14px; right: 14px; }

/* === Footer: re-target Bulma's .footer === */
.footer {
  margin-top: 64px;
  padding: 28px 0 36px !important;
  border-top: 1px solid var(--line);
  background: transparent !important;
}
.footer .content.has-text-centered {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--txt-mute);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.6;
}
.footer .content.has-text-centered > a {
  color: var(--txt);
  border-bottom: 1px dotted currentColor;
  transition: color .15s ease, border-color .15s ease;
}
.footer .content.has-text-centered > a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.footer .content.has-text-centered > div {
  margin-top: 18px;
  font-size: 22px;
  letter-spacing: 0;
}
.footer .content.has-text-centered > div a {
  display: inline-block;
  padding: 4px 6px;
  border: none;
  text-decoration: none;
  transition: transform .15s ease;
}
.footer .content.has-text-centered > div a:hover { transform: scale(1.15); }
.footer .emoji { text-transform: none; letter-spacing: 0; }

/* Mobile */
@media (max-width: 720px) {
  .navbar { padding: 18px 20px 12px !important; gap: 10px 14px; }
  .navbar::after { font-size: 11px; }
  /* On mobile: keep pulse+brand on row 1, force the search box
 to its own row 2 by giving the .navbar-end div 100% basis.
 The desktop `order: 99` is preserved (was being overridden
 to 0 here, which placed search above the brand wordmark). */
  .navbar-end { flex: 0 0 100%; }
  .input.is-medium.is-rounded { width: 100%; max-width: 100%; }
  .container { padding: 0 20px; }
  .title { font-size: clamp(28px, 8vw, 44px); margin-top: 32px; }
  .table thead th, .table tbody td { padding: 12px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .navbar::before { animation: none !important; }
}