/* ==========================================================================
   Слободна Енергија
   One stylesheet, five sections: TOKENS / BASE / LAYOUT / COMPONENTS / PAGES.

   The palette and the three type families are fixed by the design brief and
   must not be changed. No Tailwind (see CONTRIBUTING.md), no gradients, no
   shadows, no icon fonts. Structure is drawn with 1px rules and flat colour
   planes; at most two backgrounds share a screen.
   ========================================================================== */

/* ============================ 1. TOKENS ================================== */

:root {
  /* Палета — фиксирана од брифот. Palette — fixed by the brief. */
  --pine:        #1B4B3A;  /* примарна / primary */
  --olive:       #6E7A44;  /* секундарна / secondary */
  --terracotta:  #C2542E;  /* акцент, повици на дејство / accent, CTA */
  --sun:         #E9B44C;  /* акцент за истакнување / highlight */
  --paper:       #F6EEE4;  /* основна подлога / base ground */
  --rule:        #E0D2BF;  /* линии и рамки / rules and borders */
  --ink:         #4A4438;  /* текст на светла подлога / text on light */
  --ink-on-dark: #A9BFB2;  /* текст на темна подлога / text on dark */

  /* Двете меѓутонски бои на хартијата од брифот. Пругите на местата за
     фотографии повеќе не ги користат — премногу се блиски за да се видат
     (види ја белешката кај .stripes) — но --stripe-b сѐ уште ја носи подлогата
     на излезните панели кај виџетите.
     The brief's two mid-tone paper colours. The photo-slot stripes no longer
     use them (see the note at .stripes) but --stripe-b still backs the widget
     output panels. */
  --stripe-a: #E5D9C9;
  --stripe-b: #F1E6D8;

  /* Варијанти само за ситен текст.
     Брифот бара и фиксирана палета и контраст ≥ 4.5:1. Двете не можат
     истовремено: олива на хартија дава 4,03, теракота 3,97. Затоа тука
     стојат само по нијанса потемни верзии на ИСТИТЕ бои — тонот и заситеноста
     се непроменети, симната е само светлината, точно колку да се помине прагот
     (4,50 и 4,52). Оригиналните вредности остануваат за крупна типографија,
     за полнежи и за рамки, каде прагот е 3:1 и палетата важи неизменета.

     Small-text-only variants. The brief demands both a fixed palette and
     ≥4.5:1 contrast; those cannot both hold — olive on paper measures 4.03 and
     terracotta 3.97. These are the SAME colours with hue and saturation
     untouched and lightness lowered just enough to clear the threshold (4.50
     and 4.52). The originals stay in use for display type, fills and borders,
     where the threshold is 3:1 and the palette holds as written. */
  --olive-text: #677240;
  --terracotta-text: #B34E2B;

  /* Типографија / Typography. Cyrillic-capable stacks only. */
  --font-display: "Playfair Display", "Noto Serif", Georgia, serif;
  --font-body:    "Manrope", "Noto Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", "Noto Sans Mono", ui-monospace, monospace;

  /* Ритам / Rhythm */
  --measure: 40rem;   /* ~640px, the brief's maximum prose width */
  --page:    76rem;
  --gutter:  1.5rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2.5rem;
  --space-6: 4rem;
  --space-7: 6rem;

  --radius-pill: 999px;
  --transition: 160ms ease;   /* the brief allows 150–200ms, buttons/links only */
}

/* Ленти-placeholder: дијагонални пруги, текстура а не украсен градиент.

   Со вредностите од брифот (#E5D9C9 врз #F1E6D8) пругите излегуваат на 1,13:1
   една спрема друга и 1,07:1 спрема подлогата — на екран тоа е празен кремаст
   правоаголник, а местото за фотографија воопшто не се препознава. Затоа тука
   се земени двете најоддалечени бои од истото семејство што брифот веќе ги
   дава — линиската #E0D2BF и хартијата #F6EEE4 — што дава 1,29:1. Сѐ уште
   мирно, но видливо. Пругите се и пошироки, за шарата да се чита на голема
   површина.

   With the brief's own values (#E5D9C9 on #F1E6D8) the stripes come out at
   1.13:1 against each other and 1.07:1 against the page — on screen that is a
   blank cream rectangle and the photo slot reads as nothing at all. So this
   uses the two furthest-apart colours the brief already provides from the same
   family, the rule colour and the paper, giving 1.29:1. Still quiet, but
   present. The bands are wider too, so the pattern reads at large sizes. */
.stripes {
  background-image: repeating-linear-gradient(
    45deg,
    var(--rule) 0, var(--rule) 12px,
    var(--paper) 12px, var(--paper) 24px
  );
}

/* ============================= 2. BASE =================================== */

*, *::before, *::after { box-sizing: border-box; }

/* Атрибутот `hidden` мора да победи над секое `display` од класа.
   Стиловите на авторот се појаки од стиловите на прелистувачот, па
   `.filters { display: flex }` тивко го поништуваше `hidden` — филтрите и
   копчето на помошникот се појавуваа кога JavaScript е исклучен, а не правеа
   ништо. Ова важи за сите три случаи одеднаш, наместо да се крпи еден по еден.

   The `hidden` attribute must beat any `display` a class sets. Author styles
   outrank the browser's own, so `.filters { display: flex }` was silently
   defeating `hidden` — the filter bar and the assistant's open button appeared
   with JavaScript off and did nothing. This covers the whole class of bug
   rather than patching each instance. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--pine);
  line-height: 1.15;
  margin: 0 0 var(--space-3);
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2.25rem, 6vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
h4 { font-size: 1.125rem; }

/* Точно еден курзивен збор во насловот — макрото heading() го наметнува ова.
   Exactly one italic word per heading; the heading() macro enforces it. */
.em {
  font-style: italic;
  font-weight: 500;
  color: var(--terracotta);
}

p { margin: 0 0 var(--space-3); max-width: var(--measure); }

a {
  color: var(--pine);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition);
}
a:hover { color: var(--terracotta-text); }

/* Видлив фокус насекаде — барање за пристапност во брифот.
   Visible focus everywhere; an accessibility requirement of the brief. */
:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
}

img { max-width: 100%; height: auto; display: block; }

hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-5) 0;
}

/* Ситни технички ознаки: 11–13px, разредено, со голема почетна буква.
   Small technical labels: 11–13px, letter-spaced, capitalised. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-text);
  font-weight: 500;
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pine);
  color: var(--paper);
  padding: var(--space-2) var(--space-3);
  z-index: 100;
}
.skip-link:focus { left: 0; }

/* ============================ 3. LAYOUT ================================== */

.wrap {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.prose { max-width: var(--measure); }

section { padding-block: var(--space-6); }

/* Темните секции се единствената втора подлога на екранот.
   Dark sections are the only second ground on a screen. */
.band-dark {
  background: var(--pine);
  color: var(--ink-on-dark);
}
.band-dark h1, .band-dark h2, .band-dark h3, .band-dark h4 { color: var(--paper); }

/* Насловите долу се кренати на h2 заради редоследот на нивоата; големината
   останува онаа на h3/h4 за да не се менува дизајнот.
   These headings were raised to h2 to fix the heading-level order; the size
   stays what it was so the design does not change. */
.news-item h2, .contact-aside h2 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }
.band-dark a { color: var(--sun); }
.band-dark a:hover { color: var(--paper); }
.band-dark .mono { color: var(--sun); }
.band-dark .rule { border-top-color: rgba(169, 191, 178, 0.28); }

/* Картичките носат сопствена подлога од хартија, па правилата за темната
   секција не смеат да влезат во нив: насловот се бојадисуваше со сончево жолта
   врз кремаста картичка — 1,65:1, практично нечитливо. Внатре во картичка
   важат бојите за светла подлога, без оглед на секцијата околу неа.

   Cards carry their own paper background, so the dark-section rules must not
   reach inside them: titles were being painted sun-yellow on a cream card at
   1.65:1, effectively unreadable. Inside a card the light-ground colours apply
   regardless of the section around it. */
.band-dark .card,
.band-dark .card p { color: var(--ink); }
.band-dark .card h1,
.band-dark .card h2,
.band-dark .card h3,
.band-dark .card h4 { color: var(--pine); }
.band-dark .card a { color: var(--pine); }
.band-dark .card a:hover { color: var(--terracotta-text); }
.band-dark .card .mono { color: var(--olive-text); }
.band-dark .card .rule { border-top-color: var(--rule); }
.band-dark .card dt { color: var(--olive-text); }
.band-dark .card dd { color: var(--ink); }
.band-dark .card:hover { border-color: var(--sun); }

.band-dark .status {
  border-color: rgba(169, 191, 178, 0.4);
  color: var(--paper);
}
.band-dark .status--aktiven { border-color: var(--sun); color: var(--sun); }
.band-dark .status--vo-podgotovka { border-color: var(--sun); color: var(--sun); }
.band-dark .status--nikulec { border-color: var(--ink-on-dark); color: var(--paper); }
.band-dark .status--zavrshen { border-color: rgba(169, 191, 178, 0.4); color: var(--ink-on-dark); }

.band-dark .card .status {
  border-color: var(--rule);
  color: var(--ink);
}
.band-dark .card .status--aktiven { border-color: var(--pine); color: var(--pine); }
.band-dark .card .status--vo-podgotovka { border-color: var(--sun); color: #8A6420; }
.band-dark .card .status--nikulec { border-color: var(--olive); color: var(--olive-text); }
.band-dark .card .status--zavrshen { border-color: var(--rule); color: var(--olive-text); }

.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }

.cols {
  display: grid;
  gap: var(--space-5);
}
@media (min-width: 48rem) {
  .cols-2 { grid-template-columns: repeat(2, 1fr); }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-4 { grid-template-columns: repeat(4, 1fr); }
}

/* ========================== 4. COMPONENTS ================================ */

/* --- Отворен прстен ------------------------------------------------------
   Круг со дебела линија и празнина од десната страна: „кругот на заедницата
   се отвора за уште еден“. Изведен само со CSS, без SVG — псевдо-елементот
   е во бојата на подлогата и ја сече линијата на 50% висина десно.

   The open ring: a thick-stroked circle broken on the right. Pure CSS, no
   SVG — the pseudo-element is painted in the background colour and notches
   the stroke at 50% height. Its colour must match whatever it sits on, hence
   the --on-dark variant. */
.ring {
  display: inline-block;
  width: 1em;
  height: 1em;
  border: 0.18em solid var(--pine);
  border-radius: 50%;
  position: relative;
  flex: none;
}
.ring::after {
  content: "";
  position: absolute;
  right: -0.02em;
  top: 50%;
  transform: translateY(-50%);
  /* Празнината е онолку широка колку линијата плус малку, и ниска — со 0.4em
     висина прстенот на мали големини престануваше да биде прстен и се читаше
     како буквата „С“. The gap is just wider than the stroke and kept short: at
     0.4em it stopped reading as a ring and became a letter C at small sizes. */
  width: 0.24em;
  height: 0.26em;
  background: var(--paper);
}
.ring--on-dark { border-color: var(--sun); }
.ring--on-dark::after { background: var(--pine); }
.ring--accent { border-color: var(--terracotta); }

/* --- Логотип ------------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.375rem;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;
}
.logo .ring { font-size: 1.1rem; }
.logo-a { color: var(--pine); }
.logo-b { color: var(--terracotta); font-style: italic; }
.band-dark .logo-a { color: var(--paper); }
.band-dark .logo-b { color: var(--sun); }

/* --- Копчиња -------------------------------------------------------------
   Целосно заоблени. Примарно = теракота полна; секундарно = 1.5px рамка.
   Fully rounded. Primary = filled terracotta; secondary = 1.5px pine border. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}

/* Полнежот е потемната верзија на теракота: копчето носи ситен текст и мора
   да помине 4,5:1 (види белешката кај --terracotta-text).
   The fill is the darker terracotta: the button carries small text and has to
   clear 4.5:1. */
.btn-primary {
  background: var(--terracotta-text);
  color: var(--paper);
  border-color: var(--terracotta-text);
}
.btn-primary:hover { background: #98421F; border-color: #98421F; color: var(--paper); }

.btn-secondary {
  background: transparent;
  color: var(--pine);
  border-color: var(--pine);
}
.btn-secondary:hover { background: var(--pine); color: var(--paper); }

.band-dark .btn-secondary { color: var(--paper); border-color: var(--ink-on-dark); }
.band-dark .btn-secondary:hover { background: var(--paper); color: var(--pine); }

.btn-sm { padding: 0.5rem 1.125rem; font-size: 0.875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* --- Ленти-placeholder за фотографии ------------------------------------- */

.photo-slot {
  position: relative;
  display: flex;
  align-items: flex-end;
  border: 1px solid var(--rule);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
/* Описот е она што го носи местото за фотографија: кажува што треба да дојде
   тука. Затоа е полна лента долу, а не мал ливче во агол.
   The caption is what carries the slot — it says what belongs here. Hence a
   full-width strip along the bottom rather than a small tab in the corner. */
.photo-slot .mono {
  margin: 0;
  width: 100%;
  padding: var(--space-3);
  background: var(--paper);
  border-top: 1px solid var(--rule);
  font-size: 0.75rem;
  line-height: 1.5;
}
.photo-slot--tall { aspect-ratio: 3 / 4; }
.photo-slot--wide { aspect-ratio: 16 / 9; }

/* Вистински фотографии — истата рамка како кај местата за фотографии, за да
   не се менува ритамот кога лентата ќе се замени со слика.
   Real photographs get the same frame the placeholders had, so the rhythm does
   not shift when a striped slot is replaced by an image. */
.card img,
.hero-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid var(--rule);
  background: var(--stripe-b);
}
.card img { aspect-ratio: 4 / 3; border-width: 0 0 1px 0; }
.hero-img { aspect-ratio: 16 / 9; }
.article-photo { aspect-ratio: 16 / 9; object-fit: cover; }

/* --- Бројки -------------------------------------------------------------- */

.stat { border-top: 1px solid var(--rule); padding-top: var(--space-3); }
.band-dark .stat { border-top-color: rgba(169, 191, 178, 0.28); }

.stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.5rem, 7vw, 3.5rem);
  line-height: 1;
  color: var(--pine);
  display: flex;
  align-items: baseline;
  gap: 0.15em;
}
.band-dark .stat-value { color: var(--paper); }
.stat-of { font-size: 0.4em; color: var(--olive-text); font-family: var(--font-body); font-weight: 600; }
.band-dark .stat-of { color: var(--ink-on-dark); }
.stat-label { font-weight: 600; margin: var(--space-2) 0 0; max-width: none; }
.stat-note { font-size: 0.875rem; color: var(--olive-text); margin: var(--space-1) 0 0; max-width: none; }
.band-dark .stat-note { color: var(--ink-on-dark); }

/* Ознаката „ЦЕЛ“ — отворен проект / хардверска лабораторија (open project / hardware lab)
   и ниту еден број не смее да се прочита како постигнат резултат.
   The "TARGET" badge — open project / hardware lab and no number may read
   as an achieved result. */
.stat-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--sun);
  color: var(--olive-text);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-2);
}
.band-dark .stat-badge { color: var(--sun); border-color: var(--sun); }

/* --- Чекори -------------------------------------------------------------- */

.step { display: flex; gap: var(--space-3); align-items: flex-start; }
.step .ring { font-size: 1.5rem; margin-top: 0.35rem; }
.step-n {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  color: var(--olive-text);
  display: block;
  margin-bottom: var(--space-1);
}

/* --- Картички за проекти -------------------------------------------------
   Без сенки. Рамка од 1px и рамна подлога, како што бара брифот.
   No shadows. A 1px rule and a flat ground, as the brief requires. */

.card {
  border: 1px solid var(--rule);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition);
}
.card:hover { border-color: var(--pine); }
.card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; }
.card h3 { margin-bottom: var(--space-2); }
.card h3 a { text-decoration: none; }
.card p { font-size: 0.9375rem; }
.card-foot {
  margin-top: auto;
  padding-top: var(--space-3);
  border-top: 1px solid var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

.meta { display: flex; flex-direction: column; }
.meta dt {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olive-text);
}
.meta dd { margin: 0; font-weight: 600; font-size: 0.9375rem; }

/* --- Статус -------------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  color: var(--ink);
}
.status::before {
  content: "";
  width: 0.5em; height: 0.5em;
  border-radius: 50%;
  background: currentColor;
}
.status--aktiven { border-color: var(--pine); color: var(--pine); }
.status--vo-podgotovka { border-color: var(--sun); color: #8A6420; }
.status--nikulec { border-color: var(--olive); color: var(--olive-text); }
.status--istrazhuvanje { border-color: var(--olive); color: var(--olive-text); }
.status--prototip { border-color: var(--terracotta); color: var(--terracotta-text); }
.status--zavrshen { border-color: var(--rule); color: var(--olive-text); }

/* --- Филтри -------------------------------------------------------------- */

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  padding-block: var(--space-3);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--space-5);
}
.filter-btn {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
}
.filter-btn:hover { border-color: var(--pine); }
.filter-btn[aria-pressed="true"] {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
}

/* --- Столбест графикон, само со CSS --------------------------------------
   Вистинска табела, за да остане читлива и без стилови и за читачи на екран.
   Ширината доаѓа од --v (0–100) поставено во HTML-от.

   A real table, so it stays readable unstyled and to screen readers. The bar
   width comes from --v (0–100) set inline in the markup. No chart library,
   per the brief. */

.chart { width: 100%; border-collapse: collapse; }
.chart caption {
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olive-text);
  padding-bottom: var(--space-3);
}
.band-dark .chart caption { color: var(--sun); }
.chart th, .chart td {
  text-align: left;
  padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  vertical-align: middle;
}
.band-dark .chart th, .band-dark .chart td {
  border-bottom-color: rgba(169, 191, 178, 0.28);
}
.chart th { font-weight: 600; white-space: nowrap; }
.chart td.bar-cell { width: 100%; }
/* Тенка ознака, заоблена само на слободниот крај — основата останува
   прицврстена на оската, за должините да се читаат точно.
   A thin mark, rounded only on the free end — the base stays anchored to the
   axis so the lengths stay honest to compare. */
.chart .bar {
  display: block;
  height: 0.625rem;
  min-width: 2px;
  width: calc(var(--v) * 1%);
  background: var(--sun);
  border-radius: 0 4px 4px 0;
}
.chart .bar--alt { background: var(--terracotta); }
.chart td.value { font-family: var(--font-mono); font-size: 0.8125rem; white-space: nowrap; }

/* --- Форми --------------------------------------------------------------- */

.field { margin-bottom: var(--space-4); max-width: var(--measure); }
.field label {
  display: block;
  font-weight: 600;
  font-size: 0.9375rem;
  margin-bottom: var(--space-2);
}
.field .req { color: var(--terracotta-text); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  transition: border-color var(--transition);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--pine); }
.field textarea { resize: vertical; min-height: 8rem; }

.field-error {
  display: block;
  color: #9E3B1B;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: var(--space-2);
}
.field[data-invalid] input,
.field[data-invalid] select,
.field[data-invalid] textarea { border-color: #9E3B1B; border-width: 1.5px; }

.form-note {
  font-size: 0.875rem;
  color: var(--olive-text);
  border-left: 2px solid var(--sun);
  padding-left: var(--space-3);
}

.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.radio-pill { position: relative; }
.radio-pill input {
  position: absolute;
  opacity: 0;
  width: 100%; height: 100%;
  margin: 0; cursor: pointer;
}
.radio-pill span {
  display: block;
  padding: 0.5rem 1.125rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color var(--transition), border-color var(--transition),
              color var(--transition);
}
.radio-pill input:checked + span {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
}
.radio-pill input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 3px; }

/* ============================= 5. PAGES ================================== */

/* --- Хедер --------------------------------------------------------------- */

.site-header { border-bottom: 1px solid var(--rule); }
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-3);
}
.nav { display: none; }
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.4vw, 1.5rem);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-list a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ink);
  transition: color var(--transition), border-color var(--transition);
}
.nav-list a:hover {
  color: var(--terracotta-text);
}
.nav-list a[aria-current="page"] {
  color: var(--pine);
  border-bottom: 2px solid var(--terracotta);
  padding-bottom: 2px;
}
.nav-list a[aria-current="page"]:hover {
  color: var(--terracotta-text);
  border-bottom-color: var(--terracotta-text);
}

.header-end { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }

.lang-switch {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.14em;
  text-decoration: none;
  color: var(--olive-text);
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.7rem;
  transition: border-color var(--transition), color var(--transition);
}
.lang-switch:hover { border-color: var(--pine); color: var(--pine); }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius-pill);
  padding: 0.4rem 0.9rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--ink);
  cursor: pointer;
}

.mobile-nav { border-top: 1px solid var(--rule); padding-block: var(--space-3); }
.mobile-nav[hidden] { display: none; }
.mobile-nav ul { list-style: none; margin: 0; padding: 0; }
.mobile-nav li + li { border-top: 1px solid var(--rule); }
.mobile-nav a {
  display: block;
  padding: var(--space-3) 0;
  text-decoration: none;
  font-weight: 600;
  color: var(--ink);
  transition: color var(--transition), padding var(--transition);
}
.mobile-nav a:hover {
  color: var(--terracotta-text);
}
.mobile-nav a[aria-current="page"] {
  color: var(--terracotta-text);
  font-weight: 700;
  padding-left: var(--space-2);
  border-left: 3px solid var(--terracotta);
}

@media (min-width: 62rem) {
  .nav { display: block; }
  .menu-toggle, .mobile-nav { display: none; }
}

/* Хедерот на тесен екран (брифот бара да се провери на 360px).
   На полна ширина редот носи логотип + EN + „Приклучи се“ + „Мени“, што на
   360px пробива околу двесте пиксели надвор. Затоа тука копчето „Приклучи се“
   се повлекува — истата врска стои прва во мобилното мени — а логотипот и
   растојанијата се стегнуваат.

   The header on a narrow screen (the brief asks for a 360px check). At full
   width the row carries logo + EN + "Join us" + "Menu", which overflows 360px
   by roughly two hundred pixels. So the join button withdraws here — the same
   link sits first in the mobile menu — and the logo and spacing tighten. */
@media (max-width: 34rem) {
  :root { --gutter: 1rem; }

  .header-inner { gap: var(--space-2); }
  .header-end { gap: var(--space-2); }

  .logo { font-size: 1.0625rem; }
  .logo .ring { font-size: 0.9rem; }

  .header-end .btn { display: none; }

  .menu-toggle { padding: 0.4rem 0.75rem; }
}

/* --- Херој --------------------------------------------------------------- */

.hero { padding-block: var(--space-6) var(--space-7); }
.hero-grid { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 56rem) {
  .hero-grid { grid-template-columns: 1.1fr 0.9fr; gap: var(--space-6); }
}
.hero .mono { display: block; margin-bottom: var(--space-4); }
.hero p { font-size: 1.1875rem; }

/* --- Лента со бројки ------------------------------------------------------ */

.stats-band { border-block: 1px solid var(--rule); padding-block: var(--space-5); }
.stats-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}
.stats-grid { display: grid; gap: var(--space-5); }
@media (min-width: 34rem) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }

/* --- Публики -------------------------------------------------------------- */

.audience {
  border-top: 2px solid var(--pine);
  padding-top: var(--space-3);
}
.audience h3 { font-size: 1.125rem; }
.audience p { font-size: 0.9375rem; }

/* --- Подножје ------------------------------------------------------------- */

.site-footer { background: var(--pine); color: var(--ink-on-dark); margin-top: var(--space-7); }
.site-footer h2 { color: var(--paper); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 800; }
.footer-grid { display: grid; gap: var(--space-5); padding-block: var(--space-6); }
@media (min-width: 48rem) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1.3fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li + li { margin-top: var(--space-2); }
.site-footer a { color: var(--ink-on-dark); text-decoration: none; }
.site-footer a:hover { color: var(--sun); }
.footer-bottom {
  border-top: 1px solid rgba(169, 191, 178, 0.28);
  padding-block: var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  font-size: 0.8125rem;
}
.newsletter { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.newsletter input {
  flex: 1 1 10rem;
  min-width: 0;
  padding: 0.6rem 0.9rem;
  border: 1px solid rgba(169, 191, 178, 0.4);
  background: transparent;
  color: var(--paper);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
}
.newsletter input::placeholder { color: rgba(169, 191, 178, 0.7); }

/* --- Статии --------------------------------------------------------------- */

.article-head { padding-block: var(--space-6) var(--space-5); border-bottom: 1px solid var(--rule); }
.article-body { padding-block: var(--space-5); font-size: 1.125rem; }
.article-body h2 { margin-top: var(--space-5); }
.article-body ul, .article-body ol { max-width: var(--measure); padding-left: 1.25rem; }
.article-body li + li { margin-top: var(--space-2); }
.article-body blockquote {
  margin: var(--space-4) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--sun);
  font-style: italic;
}
.article-body table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.article-body th, .article-body td {
  text-align: left; padding: var(--space-2) var(--space-3) var(--space-2) 0;
  border-bottom: 1px solid var(--rule);
}
.table-scroll { overflow-x: auto; }

.news-item { border-top: 1px solid var(--rule); padding-block: var(--space-4); }
.news-item h2 { margin-bottom: var(--space-1); }
.news-item h2 a { text-decoration: none; }

/* --- Виџети ---------------------------------------------------------------
   Прогресивно подобрување: без JavaScript, .widget-fallback останува видлив
   и .widget-live никогаш не се прикажува.
   Progressive enhancement: without JavaScript the fallback stays visible and
   the live panel is never shown. */

.widget { border: 1px solid var(--rule); padding: var(--space-4); margin-block: var(--space-4); }
.widget-live[hidden] { display: none; }
.widget-head {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  align-items: baseline; justify-content: space-between;
  margin-bottom: var(--space-3);
}
.widget-out {
  margin-top: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--rule);
  background: var(--stripe-b);
  font-size: 0.9375rem;
  min-height: 3rem;
}
.widget-out:empty { display: none; }
.widget pre {
  overflow-x: auto;
  background: var(--pine);
  color: var(--ink-on-dark);
  padding: var(--space-3);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
}
.endpoint-row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.endpoint-row input {
  flex: 1 1 14rem; min-width: 0;
  font-family: var(--font-mono); font-size: 0.8125rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--rule);
  border-radius: 4px; background: var(--paper); color: var(--ink);
}

.faq-list dt { font-weight: 700; margin-top: var(--space-3); }
.faq-list dd { margin: var(--space-1) 0 0; max-width: var(--measure); }

/* Помошникот: мал панел долу десно, се отвора со копче.
   The assistant: a small panel, bottom right, opened by a button. */
.assistant {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 50;
  max-width: calc(100vw - 2 * var(--gutter));
}
/* Копчето лебди врз содржината, па не смее да биде проѕирно — врз фотографија
   натписот беше нечитлив. The launcher floats over content, so it cannot be
   transparent: over a photograph the label was unreadable. */
.assistant > [data-assistant-open] {
  background: var(--paper);
  border-color: var(--pine);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.assistant-panel {
  width: min(22rem, calc(100vw - 2 * var(--gutter)));
  border: 1px solid var(--pine);
  background: var(--paper);
  margin-bottom: var(--space-2);
  display: flex;
  flex-direction: column;
  max-height: min(30rem, 70vh);
}
.assistant-panel[hidden] { display: none; }
.assistant-head {
  display: flex; align-items: center; gap: var(--space-2);
  padding: var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.assistant-head .ring { font-size: 1rem; }
.assistant-head strong { font-family: var(--font-display); font-size: 1rem; }
.assistant-close {
  margin-left: auto; background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--olive-text);
  letter-spacing: 0.12em;
}
.assistant-log { flex: 1; overflow-y: auto; padding: var(--space-3); font-size: 0.9375rem; }
.assistant-msg { margin-bottom: var(--space-3); }
.assistant-msg p { margin: 0; max-width: none; }
.assistant-msg a {
  display: inline-block;
  margin-top: var(--space-1);
  color: var(--pine);
  font-weight: 600;
  text-decoration: underline;
}
.assistant-msg a:hover {
  color: var(--terracotta-text);
}
.assistant-msg--you { text-align: right; color: var(--olive-text); }
.assistant-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: 1px solid var(--rule); }
.assistant-form input {
  flex: 1; min-width: 0; padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule); border-radius: var(--radius-pill);
  font-family: var(--font-body); font-size: 0.9375rem;
  background: var(--paper); color: var(--ink);
}

/* --- Дискусија ------------------------------------------------------------ */

.comments { border-top: 1px solid var(--rule); padding-top: var(--space-5); margin-top: var(--space-6); }

/* --- 404 ------------------------------------------------------------------ */

.notfound { padding-block: var(--space-7); text-align: left; }

/* ============================ 6. PRINT =================================== */

@media print {
  .site-header, .site-footer, .assistant, .filters, .btn-row { display: none; }
  body { background: #fff; color: #000; }
  a { text-decoration: underline; }
}