/* ==========================================================================
   CERT.hr — child tema za Divi
   Izvor: brand book 1.1 (CERT set: neutrali + Blue 100 + Beige + Beige 50)
   i dizajn „CERT.hr Redesign" 2a. Ispravci prema WCAG 2.2 AA su označeni s [A11Y].

   Klase se dodaju u Diviju kroz polje „CSS Class" (sekcija, red ili modul).
   Pozadine sekcija se NE postavljaju u Diviju, nego klasom cert-s--*.
   ========================================================================== */

:root {
  --black-100: #0E0E0E;
  --black-75: #4A4A4A;
  --black-50: #878787;   /* na svijetloj podlozi samo dekor (2,98:1); na tamnoj smije tekst (5,4:1) */
  --white-100: #D7D4CD;
  --white-75: #E1DFDA;
  --white-50: #EBEAE6;   /* najsvjetlija boja — čista bijela nije dopuštena */
  --blue: #61D1FA;
  --green: #A6FF59;
  --beige: #C7AB85;
  --beige-50: #E3D5C2;

  --font: 'Inter', Arial, sans-serif;
  --radius: 4px;           /* styleguide: polja, kartice, obavijesti */
  --gutter: 48px;
  --content: 1344px;     /* 1440 − 2 × 48 */
  --section-y: 96px;

  /* Tipografska ljestvica iz design systema (design-system/README.md, odluka 1. 10. 2026.).
     Naslovi se između mobitela i desktopa mijenjaju postupno (clamp: mobitel → 1440 px). */
  --fs-hero: clamp(44px, 5.84vw, 84px);  --lh-hero: 1.05;    /* 84/88 · 700 · −2 % (samo naslovnica) */
  --fs-h1: clamp(36px, 4.45vw, 64px);    --lh-h1: 1.125;     /* 64/72 · 700 · −2 % */
  --fs-h2: clamp(32px, 3.34vw, 48px);    --lh-h2: 1.167;     /* 48/56 · 500 · −1,5 % */
  --fs-h3: clamp(28px, 2.78vw, 40px);    --lh-h3: 1.2;       /* 40/48 · 500 · −1,5 % */
  --fs-h4: clamp(26px, 2.23vw, 32px);    --lh-h4: 1.25;      /* 32/40 · 500 · −1 % */
  --fs-h5: clamp(22px, 1.67vw, 24px);    --lh-h5: 1.333;     /* 24/32 · 600 */
  --fs-h6: 20px;                         --lh-h6: 1.4;       /* 20/28 · 600 */
  --fs-lg: 18px;                         --lh-lg: 1.556;     /* tekst veliki 18/28 (tekst stranica) */
  --fs-md: 16px;                         --lh-md: 1.5;       /* tekst osnovni 16/24, gumb */
  --fs-sm: 14px;                         --lh-sm: 1.429;     /* tekst mali 14/20, labela */
  --fs-xs: 12px;                         --lh-xs: 1.333;     /* napomena 12/16, nadnaslov (verzal, +8 %) */
  --fw-heading: 500;                     /* debljina H2–H4; jedno mjesto za promjenu */
}

/* ---------- Osnova ---------- */
/* html body: jače od Divijeva Customizera, koji na test2 postavlja font bez rezervnog sans-serifa (→ Times) */
html body,
html body input,
html body textarea,
html body select,
body {
  font-family: var(--font);
  font-weight: 400;                 /* tekst je Regular (ljestvica); Divi Customizer na test2 postavlja 500 */
  color: var(--black-100);
  background: var(--white-50);
  -webkit-font-smoothing: antialiased;
}
.cert-s *, .cert-s *::before, .cert-s *::after,
.cert-footer *, .btn, .cert-skip { box-sizing: border-box; }
#page-container,
#main-content,
#main-content .container { background-color: var(--white-50); }

.cert-icon { display: inline-block; width: 1.25em; height: 1.25em; flex: none; vertical-align: middle; }

/* Fokus: 2 px Off-Black s razmakom; na tamnoj podlozi plavi (11:1) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--black-100);
  outline-offset: 2px;
}
.cert-s--dark :focus-visible,
.cert-footer :focus-visible { outline-color: var(--blue); }

.cert-skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 1000;
  padding: 12px 20px;
  font: 600 var(--fs-sm)/1 var(--font);
  color: var(--black-100);
  background: var(--blue);
  border-radius: 999px;
  text-decoration: none;
}
.cert-skip:focus { top: 16px; }

/* ---------- Divi raspored: sekcije i redovi ---------- */
.et_pb_section.cert-s { padding: var(--section-y) 0; }
.cert-s .et_pb_row {
  width: calc(100% - 2 * var(--gutter));
  max-width: var(--content);
  padding: 0;
}
.cert-s .et_pb_row + .et_pb_row { margin-top: 44px; }
.cert-s .et_pb_module:last-child { margin-bottom: 0; }

.et_pb_section.cert-s--light { background-color: var(--white-50); color: var(--black-100); }
.et_pb_section.cert-s--dark  { background-color: var(--black-100); color: var(--white-50); }
.et_pb_section.cert-s--blue  { background-color: var(--blue); color: var(--black-100); }
.et_pb_section.cert-s--beige { background-color: var(--beige-50); color: var(--black-100); }

/* Divi postavlja boju naslova i razmake paragrafa — u našim sekcijama ih preuzimamo */
.cert-s h1, .cert-s h2, .cert-s h3, .cert-s h4 { color: inherit; font-family: var(--font); padding-bottom: 0; }
.cert-s p:last-of-type { padding-bottom: 0; }
/* Divi daje listama u modulima brojeve/točke i uvlaku — naše liste imaju vlastitu numeraciju */
.cert-s ol.cert-list, .cert-s ol.cert-steps,
.cert-s ul.cert-alerts, .cert-s ul.cert-news, .cert-s ul.cert-tiles, .cert-s ul.cert-social__list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.cert-s .cert-list > li, .cert-s .cert-steps > li,
.cert-s .cert-alerts > li, .cert-s .cert-news > li, .cert-s .cert-tiles > li, .cert-s .cert-social__list > li { list-style: none; margin-left: 0; }
.cert-s .cert-list > li::marker, .cert-s .cert-steps > li::marker { content: none; }
/* WordPress (wpautop) u Code modulu ubacuje <br> i prazne <p> među naše elemente */
.cert-tiles br, .cert-social br, .cert-edu-grid br, .cert-list br, .cert-steps br, .cert-actions br, .cert-blockhead br, .cert-alerts br, .cert-news br { display: none; }
.et_pb_code_inner > p:empty { display: none; }

/* ---------- Tipografija (klase na Text/Heading modulu) ---------- */
.cert-eyebrow,
.cert-eyebrow p,
h2.cert-eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--black-75);                 /* [A11Y] dizajn: #878787 (2,98:1) → Off-Black 75 (7,4:1) */
}
.cert-s--dark .cert-eyebrow,
.cert-s--dark .cert-eyebrow p { color: var(--black-50); }   /* 5,4:1 na Off-Black 100 */
.cert-s--blue .cert-eyebrow,
.cert-s--blue .cert-eyebrow p { color: var(--black-100); }

/* Točka ispred nadnaslova: zelena „uživo" (pulsira) ili plava */
.cert-eyebrow--live p::before,
.cert-eyebrow--live:not(:has(p))::before,
.cert-eyebrow--blue p::before,
.cert-eyebrow--blue:not(:has(p))::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
}
.cert-eyebrow--blue p::before,
.cert-eyebrow--blue:not(:has(p))::before { background: var(--blue); }
.cert-eyebrow--live p::before,
.cert-eyebrow--live:not(:has(p))::before { animation: cert-pulse 2.4s ease-out infinite; }
@keyframes cert-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(166, 255, 89, .55); }
  70%  { box-shadow: 0 0 0 10px rgba(166, 255, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(166, 255, 89, 0); }
}
.cert-s--dark .cert-eyebrow--strong,
.cert-s--dark .cert-eyebrow--strong p { font-size: var(--fs-sm); font-weight: 600; color: var(--white-50); }

.cert-display h1,
h1.cert-display {
  margin: 0;
  font-size: var(--fs-hero);
  font-weight: 700;
  line-height: var(--lh-hero);
  letter-spacing: -.02em;
}
/* Točka na kraju naslova ukinuta (4. 11. 2026.); skriva i ostatke u sadržaju */
.cert-dot { display: none; }

.cert-h2 h2,
h2.cert-h2 {
  margin: 0;
  font-size: var(--fs-h2);
  font-weight: var(--fw-heading);
  line-height: var(--lh-h2);
  letter-spacing: -.015em;
}
.cert-h2--xl h2,
h2.cert-h2--xl { font-size: var(--fs-h2); line-height: var(--lh-h2); }

.cert-lead p,
p.cert-lead { margin: 0; padding: 0; max-width: 520px; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--black-75); }
.cert-s--dark .cert-lead p,
.cert-s--dark p.cert-lead { color: var(--black-50); }   /* 5,4:1 */
.cert-body p,
p.cert-body { margin: 0; padding: 0; max-width: 440px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--black-75); }
.cert-s--dark .cert-body p { color: var(--black-50); }
.cert-s--blue .cert-body p { color: var(--black-100); font-size: var(--fs-md); }

/* Poveznica „Sve novosti →" */
.cert-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--black-100);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.cert-more:hover { text-decoration-thickness: 2px; }
.cert-s--dark .cert-more { font-size: var(--fs-sm); color: var(--blue); }   /* 11:1 */
.cert-more .cert-icon { width: 18px; height: 18px; }
/* Strelica kad je poveznica upisana bez SVG-a (npr. u Divi Code modulu) */
.cert-more:not(:has(svg))::after {
  content: '';
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url('../img/arrow_forward.svg') center / contain no-repeat;
          mask: url('../img/arrow_forward.svg') center / contain no-repeat;
}

/* ---------- Gumbi (pill) — vrijedi za .btn i za Divi Button modul s istom klasom ---------- */
.btn,
.et_pb_button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 24px;
  font-family: var(--font);
  font-size: var(--fs-md);   /* UI/Gumb 16/24 Semi Bold, visina 44 px */
  font-weight: 600;
  line-height: 24px;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid var(--black-100);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s, transform .1s;
}
.btn:active { transform: scale(.97); }
.btn .cert-icon { width: 18px; height: 18px; }
.et_pb_button.btn::after { display: none; }   /* Divijeva ikona gumba */
.et_pb_button.btn:hover { padding: 8px 24px; }

/* Strelica kao Material ikona (za Divi Button modul, gdje ne možemo ubaciti SVG) */
.btn--arrow::after,
.et_pb_button.btn--arrow::after {
  content: '' !important;
  display: inline-block !important;
  position: static !important;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  opacity: 1 !important;
  background: currentColor;
  -webkit-mask: url('../img/arrow_forward.svg') center / contain no-repeat;
          mask: url('../img/arrow_forward.svg') center / contain no-repeat;
}

.btn-lg,
.et_pb_button.btn-lg,
.et_pb_button.btn-lg:hover { min-height: 44px; padding: 8px 32px; font-size: var(--fs-md); font-weight: 600; }   /* styleguide nema veći gumb od 44 px */

.btn-blue { color: var(--black-100); background: var(--blue); border-color: var(--blue); }
.btn-blue:hover { color: var(--black-100); background: var(--white-50); border-color: var(--white-50); }
.cert-s--light .btn-blue:hover { border-color: var(--black-100); }

.btn-dark { color: var(--white-50); background: var(--black-100); }
.btn-dark:hover { color: var(--black-100); background: var(--white-50); border-color: var(--black-100); }

.btn-outline { color: var(--black-100); background: transparent; }
.btn-outline:hover { color: var(--white-50); background: var(--black-100); }

/* Obrub na tamnoj: Off-Black 75 obrub je dekor, tekst Off-White 50 (16:1) */
.btn-ghost { color: var(--white-50); background: transparent; border: 2px solid var(--black-75); }
.btn-ghost:hover { color: var(--blue); background: transparent; border-color: var(--blue); }

.cert-actions { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- Oznake kategorija i meta ---------- */
.cert-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--fs-xs); font-weight: 600; }
.cert-tag {
  display: inline-block;
  padding: 4px 8px;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--white-50);
  background: var(--black-100);
  border-radius: var(--radius);
}
.cert-tag--savjeti   { color: var(--black-100); background: var(--beige-50); }
.cert-tag--dogadanja,
.cert-tag--kampanja  { color: var(--black-100); background: var(--blue); }
.cert-tag--ranjivosti { color: var(--black-100); background: var(--white-100); }

/* Cijela kartica klikabilna: <a class="cert-stretch"> u naslovu pokriva karticu */
.cert-stretch { color: inherit; text-decoration: none; }
.cert-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.cert-stretch:focus-visible { outline: none; }
.cert-alert:has(.cert-stretch:focus-visible),
.cert-news__item:has(.cert-stretch:focus-visible),
.cert-tile:has(.cert-stretch:focus-visible) { outline: 2px solid var(--blue); outline-offset: 3px; }
.cert-s--light .cert-news__item:has(.cert-stretch:focus-visible) { outline-color: var(--black-100); }

/* ---------- Hero (2a) ---------- */
.et_pb_section.cert-hero {
  position: relative;
  overflow: hidden;
  padding: var(--section-y) 0 56px;
}
.cert-hero .et_pb_row { position: relative; z-index: 1; }
/* Vizual (fotke u heksagonima, assets/img/hero-foto-3.webp, od 4. 11. korisnikov CERT HERO2.png; izvor u projekti/web/cert/hero-foto/).
   Vezan je uz prvi red heroa: ide od vrha sekcije do malo iznad „Aktualnih upozorenja",
   desno poravnat s rubom sadržaja — nikad ne prelazi preko upozorenja. */
.cert-hero > .et_pb_row:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: clamp(380px, 32vw, 460px);
}
.et_pb_section.cert-hero > .et_pb_row:first-child::after {
  content: '';
  /* Divi na .et_pb_row::after ima clearfix (height: 0; visibility: hidden) — poništiti */
  height: auto !important;
  visibility: visible !important;
  clear: none;
  line-height: normal;
  position: absolute;
  z-index: -1;
  right: 0;
  top: calc(-1 * var(--section-y) + 24px);
  bottom: -16px;      /* razmak do „Aktualnih upozorenja" je 44 px (.et_pb_row + .et_pb_row) */
  width: min(48%, 680px);
  background: url('../img/hero-foto-3.webp') right center / contain no-repeat;
  pointer-events: none;
}
.cert-hero__intro { max-width: 820px; display: flex; flex-direction: column; gap: 32px; }
.cert-hero .cert-hero__intro .et_pb_module { margin-bottom: 0; }
.cert-hero .cert-row-alerts { margin-top: 88px; }

/* Zaglavlje bloka: nadnaslov lijevo, poveznica desno */
.cert-blockhead { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 16px; }
.cert-blockhead .cert-more { margin-left: auto; white-space: nowrap; }
.cert-blockhead--lg { align-items: flex-end; margin-bottom: 44px; }
.cert-blockhead--lg .cert-eyebrow { margin-bottom: 12px; }

/* ---------- Aktualna upozorenja: kartice ---------- */
.cert-alerts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.cert-alert {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 28px;
  border-radius: var(--radius);
  transition: background-color .15s, border-color .15s;
}
.cert-alert__title { flex: 1; margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-h6); letter-spacing: 0; }
.cert-alert > .cert-icon { width: 22px; height: 22px; }
.cert-alert--blue { color: var(--black-100); background: var(--blue); }
.cert-alert--blue:hover { background: var(--white-50); }
.cert-alert--blue .cert-tag { color: var(--blue); background: var(--black-100); }   /* 11:1 */
.cert-alert--outline { color: var(--white-50); border: 1px solid var(--black-75); }
.cert-alert--outline:hover { border-color: var(--blue); }
.cert-alert--outline .cert-meta time { color: var(--black-50); }   /* 5,4:1 */
.cert-alert--outline > .cert-icon { color: var(--blue); }

/* ---------- Usluge: numerirana lista (2a) ---------- */
.cert-list { margin: 0; padding: 0; list-style: none; counter-reset: cert-list; border-top: 2px solid var(--black-100); }
.cert-list li { counter-increment: cert-list; margin: 0; padding: 0; border-bottom: 1px solid var(--black-50); }
.cert-list a {
  display: grid;
  grid-template-columns: 56px minmax(0, 280px) 1fr auto;
  gap: 24px;
  align-items: baseline;
  padding: 24px 8px;
  color: var(--black-100);
  text-decoration: none;
  transition: background-color .15s;
}
.cert-list a::before {
  content: '/' counter(cert-list, decimal-leading-zero);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--black-75);                 /* [A11Y] dizajn: #878787 → Off-Black 75 */
}
.cert-list a:hover { background: var(--white-75); }   /* dizajn: #F6F5F2 nije u brand booku */
.cert-list__title { font-size: var(--fs-h6); font-weight: 600; letter-spacing: 0; }
.cert-list__desc { font-size: var(--fs-sm); color: var(--black-75); }
.cert-list .cert-icon { align-self: center; width: 22px; height: 22px; }

/* ---------- Postupak: koraci na plavoj (2a) ---------- */
.cert-steps { margin: 0; padding: 0; list-style: none; counter-reset: cert-step; }
.cert-steps li {
  counter-increment: cert-step;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 24px;
  margin: 0;
  padding: 24px 0;
  border-bottom: 1px solid var(--black-100);
}
.cert-steps li:last-child { border-bottom: 0; }
.cert-steps li::before { content: counter(cert-step, decimal-leading-zero); font-size: var(--fs-md); font-weight: 600; }
.cert-steps h3 { margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-h6); }
.cert-steps p { margin: 4px 0 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); }

/* ---------- Novosti (2a) ---------- */
.cert-news { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cert-news__item {
  position: relative;
  display: flex;
  flex-direction: column;
  color: var(--black-100);
  background: var(--white-50);            /* dizajn: #F6F5F2 nije u brand booku */
  border: 1px solid var(--white-100);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .15s;
}
.cert-news__item:hover { border-color: var(--black-100); }
.cert-news__media { height: 180px; background: var(--white-100); }
.cert-news__media:empty { display: none; }
.cert-news__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-news__body { display: flex; flex-direction: column; gap: 8px; padding: 24px 24px 24px; }
.cert-news__body time { color: var(--black-75); font-weight: 600; }   /* [A11Y] dizajn: #878787 */
.cert-news__title { margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-h6); }
.cert-news__excerpt { margin: 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-75); }

.cert-news__item--featured { color: var(--white-50); background: var(--black-100); border-color: var(--black-100); }
.cert-news__item--featured .cert-news__media { height: 300px; background: var(--black-75); }
.cert-news__item--featured .cert-news__body { padding: 24px 28px 32px; }
.cert-news__item--featured .cert-news__title { font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: 0; }
.cert-news__item--featured time,
.cert-news__item--featured .cert-news__excerpt { color: var(--black-50); }   /* 5,4:1 na tamnoj */

/* ---------- Brojke: bež traka (2a) ---------- */
.cert-stats__heading { margin-bottom: 36px; }
.cert-stats { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: 0; border-top: 2px solid var(--black-100); }
.cert-stats__item { display: flex; flex-direction: column; padding: 28px 24px 0; border-right: 1px solid var(--beige); }
.cert-stats__item:first-child { padding-left: 0; }
.cert-stats__item:last-child { padding-right: 0; border-right: 0; }
.cert-stats dd { order: 1; margin: 0; font-size: var(--fs-h1); font-weight: 700; line-height: 1; letter-spacing: -.025em; }
.cert-stats dt { order: 2; margin-top: 8px; font-size: var(--fs-sm); font-weight: 400; color: var(--black-75); }   /* 6,2:1 na Beige 50 */
.cert-stats__sign { color: var(--black-75); }   /* [A11Y] dizajn: #2E9CC9 nije brend boja (2,2:1) */

/* ---------- Znanje i edukacija: tamne pločice (2a) ---------- */
.et_pb_section.cert-edu { position: relative; overflow: hidden; }
.et_pb_section.cert-edu::after {
  content: '';
  position: absolute;
  right: -50px;
  bottom: -80px;
  width: 260px;
  height: 300px;
  opacity: .25;
  background: url('../img/hex-koncentricni.svg') center / contain no-repeat;
  pointer-events: none;
}
.cert-edu .et_pb_row { position: relative; z-index: 1; }
.cert-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 20px; margin: 0; padding: 0; list-style: none; }
.cert-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 32px 28px;
  color: var(--white-50);
  border: 1px solid var(--black-75);
  border-radius: var(--radius);
  transition: border-color .15s;
}
.cert-tile:hover { border-color: var(--blue); }
.cert-tile__kicker { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--blue); }
.cert-tile__kicker--beige { color: var(--beige); }   /* 8,9:1 na Off-Black 100 */
.cert-tile h3 { margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; }
.cert-tile p { flex: 1; margin: 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-50); }
.cert-tile > .cert-icon { width: 22px; height: 22px; }

/* Društvene mreže lijevo od kartica (naslovnica, crna sekcija) */
.cert-edu-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 48px; align-items: start; }
.cert-edu-tiles { min-width: 0; }
.cert-social .cert-eyebrow { margin: 0 0 16px; padding: 0; }
.cert-s ul.cert-social__list { display: flex; flex-direction: column; gap: 8px; }
.cert-social__list a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: var(--fs-h5);
  line-height: var(--lh-h5);
  font-weight: 600;
  color: var(--white-50);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}
.cert-social__list a:hover { color: var(--blue); text-decoration-thickness: 2px; }
.cert-social__list .cert-icon { width: 24px; height: 24px; }

/* ---------- Footer: design system „Podnožje — Veliko, 3 stupca" (Figma 143:335), tamna tema ---------- */
.cert-footer {
  --f-bg: var(--black-100);
  --f-text: var(--white-50);        /* 16:1 */
  --f-muted: var(--white-100);      /* 13:1 */
  --f-line: var(--black-75);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
  color: var(--f-text);
  background: var(--f-bg);
  border-top: 1px solid var(--f-line);   /* odvaja footer od tamne sekcije iznad */
}
.cert-footer--light {
  --f-bg: var(--white-50);
  --f-text: var(--black-100);
  --f-muted: var(--black-75);       /* 7,4:1 */
}
.cert-footer--light :focus-visible { outline-color: var(--black-100); }
.cert-footer__inner {
  display: flex;
  flex-direction: column;
  gap: 64px;
  max-width: 1440px;
  margin: 0 auto;
  padding: 64px var(--gutter) 32px;
}
.cert-footer__main { display: flex; align-items: flex-start; gap: 64px; }
.cert-footer__logo { flex: 0 1 480px; min-width: 160px; }
.cert-footer__logo a { display: inline-flex; }
.cert-footer__logo img { display: block; width: auto; height: 36px; max-width: 100%; }
.cert-footer__cols { display: flex; flex: 1 1 0; align-items: flex-start; gap: 64px; min-width: 620px; }
.cert-footer__col { flex: 1 1 0; min-width: 0; }
/* Dva popisa poveznica su jedna skupina pod zajedničkim naslovom (širine dva stupca) */
.cert-footer__col--nav { flex: 2 1 64px; }
.cert-footer__lists { display: flex; align-items: flex-start; gap: 64px; }
.cert-footer__lists > ul { flex: 1 1 0; min-width: 0; }
/* Verzal samo na naslovima skupina (UI/Nadnaslov: 12/16, 600, +8 %); poveznice i podaci su običnim slovima */
.cert-footer .cert-footer__heading {
  margin: 0 0 20px;
  padding: 4px 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: var(--lh-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--f-muted);
}
.cert-footer__contact { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.cert-footer__contact > div { display: flex; flex-wrap: wrap; gap: 0 8px; }
.cert-footer__contact dt { font-weight: 600; }
.cert-footer__contact dd { margin: 0; }
.cert-footer .cert-footer__links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0; padding: 0; list-style: none; }
.cert-footer a { color: var(--f-text); }
.cert-footer__contact a { display: inline-block; text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: 3px; }
.cert-footer__contact a:hover { text-decoration-thickness: 2px; }
.cert-footer__links a { display: inline-block; padding: 2px 0; text-decoration: none; }   /* cilj 28 px */
.cert-footer__links a:hover,
.cert-footer__links a[aria-current="page"] { text-decoration: underline; text-underline-offset: 4px; }
/* isto kao u headeru: Divi Customizer boja poveznica nadjačava klase */
.et-db #et-boc .et-l .cert-footer a,
.et-db #et-boc .et-l .cert-footer a:hover { color: var(--f-text); }
.cert-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 24px;
  border-top: 1px solid var(--f-line);
}
.cert-footer__bottom p { margin: 0; padding: 0; color: var(--f-muted); }
/* Logotip CARNET prati temu: SVG kao maska, boja iz teksta */
.cert-footer__carnet {
  flex: none;
  display: block;
  width: 125px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url(../img/carnet.svg) center / contain no-repeat;
  mask: url(../img/carnet.svg) center / contain no-repeat;
}
@media (forced-colors: active) { .cert-footer__carnet { background: CanvasText; } }

/* ==========================================================================
   Predlošci teme (bez Divija): arhiva novosti, objava, podstranice
   ========================================================================== */
.cert-tpl, .cert-tpl *, .cert-tpl *::before, .cert-tpl *::after { box-sizing: border-box; }
.cert-container { width: calc(100% - 2 * var(--gutter)); max-width: var(--content); margin: 0 auto; }
.cert-flip { display: inline-flex; transform: scaleX(-1); }

/* Hero podstranice (2c–2g) */
.cert-tpl-hero { padding: 48px 0 32px; color: var(--white-50); background: var(--black-100); }

/* Objava: tekst lijevo, istaknuta slika desno u tamnom dijelu */
.cert-tpl-hero--post { padding: 40px 0 56px; }
.cert-tpl-hero--post .cert-container {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 56px;
  align-items: center;
}
.cert-tpl-hero--post .cert-tpl-hero__title { margin-bottom: 0; }
.cert-tpl-hero--post .cert-tpl-hero__lead { margin: 20px 0 0; }
.cert-tpl-hero__media { margin: 0; }
.cert-tpl-hero__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.cert-tpl-hero__media figcaption { margin-top: 8px; font-size: var(--fs-xs); color: var(--black-50); }
/* Bez slike: heksagoni iz naslovnice kao dekor */
/* Heksagoni (inline SVG iz inc/heksagoni.php); boje prema podlozi heroa */
.cert-tpl-hero__deco { justify-self: end; width: 100%; max-width: 280px; }
.cert-tpl-hero__deco svg { display: block; width: 100%; height: auto; }
.hx-1 { fill: var(--blue); }
.hx-2 { fill: var(--beige); }
.hx-3 { fill: var(--black-75); }
.cert-tpl-hero--bez .hx-2 { fill: var(--black-75); }
.cert-tpl-hero--bez .hx-3 { fill: var(--black-100); }

/* Bež hero (prilagođeno polje stranice cert_hero = bez) */
.cert-tpl-hero--bez { color: var(--black-100); background: var(--beige-50); }
.cert-tpl-hero--bez .cert-tpl-hero__lead { color: var(--black-75); }          /* 6,4:1 na Beige 50 */
.cert-tpl-hero--bez .cert-crumbs li,
.cert-tpl-hero--bez .cert-crumbs span { color: var(--black-75); }   /* 6,4:1 */
.cert-tpl-hero--bez .cert-crumbs li + li::before { color: var(--black-75); }
.cert-tpl-hero--bez .cert-crumbs a,
.cert-tpl-hero--bez .cert-crumbs a:hover { color: var(--black-100); }
.cert-tpl-hero--bez .cert-eyebrow,
.cert-tpl-hero--bez .cert-step-label { color: var(--black-75); }
.cert-tpl-hero--bez .cert-tpl-hero__media figcaption { color: var(--black-75); }
/* Filtri u bež heru (Novosti) */
.cert-tpl-hero--bez .cert-chip { color: var(--black-100); border-color: var(--black-75); }
.cert-tpl-hero--bez .cert-chip:hover { color: var(--black-100); background: var(--white-50); border-color: var(--black-100); }
.cert-tpl-hero--bez .cert-chip[aria-current="page"] { color: var(--white-50); background: var(--black-100); border-color: var(--black-100); }
.cert-tpl-hero .cert-eyebrow { margin-bottom: 16px; }
.cert-tpl-hero__title {
  margin: 0 0 32px;
  padding: 0;
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-h1);
  letter-spacing: -.02em;
  color: inherit;
}
.cert-tpl-hero__title--post { max-width: 960px; font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: -.015em; }
.cert-tpl-hero__lead { max-width: 640px; margin: -12px 0 32px; padding: 0; font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--black-50); }

/* Putanja */
.cert-crumbs ol { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0 0 24px; padding: 0; list-style: none; font-size: var(--fs-sm); }
.cert-crumbs li { display: inline-flex; align-items: center; color: var(--black-50); }
.cert-crumbs li + li::before { content: '/'; margin: 0 8px; color: var(--black-75); }
.cert-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--white-100); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cert-crumbs a:hover { color: var(--white-50); text-decoration-thickness: 2px; }
.cert-crumbs [aria-current] { color: var(--black-50); }
/* Dugi naslov objave u putanji skraćujemo; puni naslov je u H1 odmah ispod */
.cert-crumbs li:last-child { min-width: 0; }
.cert-crumbs li:last-child span { display: inline-block; max-width: 36ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.cert-meta--hero { margin-bottom: 16px; }
.cert-meta--hero time { color: var(--black-50); font-weight: 600; }

/* Filtri kategorija */
.cert-chips ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cert-chip {
  display: inline-flex;
  align-items: center;
  min-height: 32px;   /* UI/Gumb mali 14/20, 32 px */
  padding: 4px 16px;
  font-size: var(--fs-sm);
  line-height: 20px;
  font-weight: 600;
  color: var(--white-100);
  text-decoration: none;
  border: 1px solid var(--black-75);
  border-radius: var(--radius);
  transition: border-color .15s, color .15s;
}
.cert-chip:hover { color: var(--white-50); border-color: var(--blue); }
.cert-chip[aria-current="page"] { font-weight: 600; color: var(--black-100); background: var(--blue); border-color: var(--blue); }

/* Tijelo predloška */
.cert-tpl-body { padding: 64px 0 88px; background: var(--white-50); }
.cert-empty { font-size: var(--fs-md); color: var(--black-75); }

/* Redovi arhive (2e) */
.cert-archive { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--black-100); }
.cert-row {
  position: relative;
  display: grid;
  grid-template-columns: 280px 160px 1fr auto;
  gap: 32px;
  align-items: center;
  margin: 0;
  padding: 24px 8px;
  border-bottom: 1px solid var(--black-50);
  transition: background-color .15s;
}
.cert-row:hover { background: var(--white-75); }
.cert-row:has(.cert-stretch:focus-visible) { outline: 2px solid var(--black-100); outline-offset: 2px; }
.cert-row__media { height: 150px; overflow: hidden; border-radius: var(--radius); background: var(--white-100) url('../img/hex-ring.svg') center / 56px no-repeat; }
.cert-row__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cert-row__meta { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--black-75); }
.cert-row__title { margin: 0 0 8px; padding: 0; font-size: var(--fs-h5); font-weight: 600; line-height: var(--lh-h5); letter-spacing: 0; color: var(--black-100); }
.cert-row .cert-news__excerpt { margin: 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-75); }
.cert-row > .cert-icon { width: 22px; height: 22px; }

/* Paginacija */
.cert-pager ul { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 32px 0 0; padding: 0; list-style: none; }
.cert-pager a, .cert-pager span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--black-100);
  text-decoration: none;
  border: 1px solid var(--black-50);
  border-radius: var(--radius);
}
.cert-pager a:hover { border-color: var(--black-100); background: var(--white-75); }
.cert-pager [aria-current="page"] { color: var(--white-50); background: var(--black-100); border-color: var(--black-100); font-weight: 600; }
.cert-pager .dots { border: 0; }
.cert-pager .prev, .cert-pager .next { border-color: transparent; }
.cert-pager .cert-icon { width: 18px; height: 18px; }

/* Objava: tekst lijevo, bočni stupac desno */
/* Sadržaj + bočni stupac kao centrirana cjelina (800 + 64 + 320 = 1184 px);
   hero objave/podstranice i povezane novosti poravnati su na istu širinu */
.cert-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 800px) 320px;
  justify-content: center;
  gap: 64px;
  align-items: start;
}
.cert-article-layout,
.cert-tpl-related .cert-container { max-width: 1184px; }
.cert-article { max-width: 800px; }
.cert-prose > p:first-child { font-size: var(--fs-h6); line-height: var(--lh-h6); }

.cert-aside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 32px; }
.cert-aside__facts { margin: 0; border-top: 2px solid var(--black-100); }
.cert-aside__facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--black-50); font-size: var(--fs-sm); }
.cert-aside__facts dt { color: var(--black-75); }
.cert-aside__facts dd { margin: 0; font-weight: 600; text-align: right; }
.cert-aside__facts a { color: var(--black-100); text-decoration: underline; text-underline-offset: 3px; }
.cert-aside__label { margin: 0 0 12px; padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-75); }
.cert-aside__share ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cert-aside__share a,
.cert-copy {
  display: inline-flex;
  align-items: center;
  min-height: 32px;   /* UI/Gumb mali */
  padding: 4px 16px;
  font: 600 var(--fs-sm)/20px var(--font);
  color: var(--black-100);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--black-75);
  border-radius: 999px;
  cursor: pointer;
}
.cert-aside__share a:hover,
.cert-copy:hover { color: var(--white-50); background: var(--black-100); border-color: var(--black-100); }
.cert-aside__card { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; color: var(--white-50); background: var(--black-100); border-radius: var(--radius); }
.cert-aside__card :focus-visible { outline-color: var(--blue); }
.cert-aside__card-title { margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; color: inherit; }
.cert-aside__card p { margin: 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-50); }
.cert-aside__card .btn { margin-top: 4px; }
.cert-aside__mail a { color: var(--blue); text-decoration: none; font-size: var(--fs-sm); }
.cert-aside__mail a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert-article__figure { margin: 0 0 40px; }
.cert-article__figure img { display: block; width: 100%; height: auto; border-radius: var(--radius); }
.cert-article__figure figcaption { margin-top: 8px; font-size: var(--fs-sm); color: var(--black-75); }
.cert-article__back { margin: 48px 0 0; padding: 24px 0 0; border-top: 1px solid var(--black-50); }

.cert-prose { font-size: var(--fs-lg); line-height: var(--lh-lg); color: var(--black-100); overflow-wrap: anywhere; }   /* duge adrese u tekstu ne smiju širiti stranicu na mobitelu */
.cert-prose > * { margin: 0 0 20px; padding: 0; }
.cert-prose h2 { margin: 40px 0 16px; font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: var(--lh-h4); letter-spacing: -.01em; color: inherit; }
.cert-prose h3 { margin: 32px 0 12px; font-size: var(--fs-h5); font-weight: 600; line-height: var(--lh-h5); color: inherit; }
.cert-prose h4 { margin: 24px 0 8px; font-size: var(--fs-h6); font-weight: 600; color: inherit; }
.cert-prose a { color: var(--black-100); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cert-prose a:hover { text-decoration-thickness: 2px; background: rgba(97, 209, 250, .35); }
.cert-prose ul, .cert-prose ol { padding-left: 1.4em; }
/* Divijev reset briše oznake lista — vraćamo ih u tekstu (osim naših posebnih lista) */
.cert-prose ul:not(.cert-links) { list-style: disc; }
.cert-prose ol:not(.cert-numbered) { list-style: decimal; }
.cert-prose li > ul { list-style: circle; margin-top: 8px; }
.cert-prose li { margin-bottom: 8px; }
.cert-prose ul li::marker { color: var(--black-75); }
.cert-prose blockquote { margin: 32px 0; padding: 4px 0 4px 24px; font-size: var(--fs-h6); font-weight: 600; border-left: 3px solid var(--blue); }
.cert-prose table { width: 100%; font-size: var(--fs-md); border-collapse: collapse; }
.cert-prose th, .cert-prose td { padding: 8px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--black-50); }
.cert-prose th { font-weight: 600; border-bottom: 2px solid var(--black-100); }
/* WordPressov blok Tablica dodaje okvir oko svake ćelije — koristimo samo vodoravne linije */
.cert-prose .wp-block-table { margin: 0 0 24px; overflow-x: auto; }
.cert-prose .wp-block-table table { border: 0; border-top: 2px solid var(--black-100); }
.cert-prose .wp-block-table th,
.cert-prose .wp-block-table td { border: 0; border-bottom: 1px solid var(--black-50); }
.cert-prose .wp-block-table thead { border: 0; }
.cert-prose .wp-block-table thead th { border-bottom: 2px solid var(--black-100); }
.cert-prose td code { white-space: nowrap; }
.cert-prose img { max-width: 100%; height: auto; border-radius: var(--radius); }
.cert-prose code { padding: 2px 8px; font-size: .9em; background: var(--white-100); border-radius: var(--radius); }
.cert-prose hr { height: 0; border: 0; border-top: 1px solid var(--black-50); }
/* Prilog (blok Datoteka) kao redak s gumbom */
.cert-prose .wp-block-file {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
  padding: 16px 20px;
  background: var(--white-75);
  border-radius: var(--radius);
}
.cert-prose .wp-block-file a:not(.wp-block-file__button) { font-weight: 600; }
.cert-prose .wp-block-file .wp-block-file__button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-left: auto;
  padding: 8px 20px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--white-50);
  text-decoration: none;
  background: var(--black-100);
  border-radius: 999px;
}
.cert-prose .wp-block-file .wp-block-file__button:hover { color: var(--black-100); background: var(--blue); }

/* Podstranica: isti raspored heroa kao objava, desno heksagoni */
.cert-tpl-hero--page .cert-container {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 56px;
  align-items: center;
}
.cert-tpl-hero--page .cert-tpl-hero__title { margin-bottom: 0; }
.cert-tpl-hero--page .cert-tpl-hero__lead { margin: 20px 0 0; }
.cert-tpl-hero--page .cert-chips { margin-top: 28px; }
/* Putanja bez trenutne stranice: zadnja stavka se ne skraćuje ni ne skriva */
.cert-crumbs--links li:last-child { display: inline-flex !important; }
.cert-crumbs--links li:last-child a { max-width: none; }
.cert-tpl-hero--page .cert-tpl-hero__deco { max-width: 200px; }

/* Navigacija rubrike u bočnom stupcu */
.cert-aside__nav .cert-aside__label a { color: inherit; text-decoration: none; }
.cert-aside__nav .cert-aside__label a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cert-aside__nav ul { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--black-100); }
.cert-aside__nav li { margin: 0; border-bottom: 1px solid var(--white-100); }
.cert-aside__nav a:not(.cert-aside__label a) {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  font-size: var(--fs-md);
  line-height: 1.35;
  color: var(--black-100);
  text-decoration: none;
  transition: background-color .15s;
}
.cert-aside__nav a:not(.cert-aside__label a):hover { background: var(--white-75); }
/* Aktivna stranica: blaga plava podloga (Off-Black tekst na njoj > 12:1) */
.cert-aside__nav a[aria-current="page"],
.cert-aside__nav a[aria-current="page"]:hover { font-weight: 600; background: rgba(97, 209, 250, .3); }

/* Elementi sadržaja podstranica */
.cert-prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.cert-prose .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 24px;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--white-50);
  text-decoration: none;
  background: var(--black-100);
  border: 1.5px solid var(--black-100);
  border-radius: 999px;
}
.cert-prose .wp-block-button__link:hover { color: var(--black-100); background: var(--blue); border-color: var(--blue); }
.cert-prose .is-style-outline .wp-block-button__link { color: var(--black-100); background: transparent; }
.cert-prose .is-style-outline .wp-block-button__link:hover { color: var(--white-50); background: var(--black-100); border-color: var(--black-100); }

/* Numerirana lista /01 (kao u dizajnu 2c) */
.cert-prose ol.cert-numbered { padding: 0; list-style: none; counter-reset: cert-num; border-top: 2px solid var(--black-100); }
.cert-prose ol.cert-numbered > li {
  counter-increment: cert-num;
  position: relative;
  margin: 0;
  padding: 16px 0 16px 64px; /* broj lijevo, cijeli sadržaj stavke zajedno desno */
  border-bottom: 1px solid var(--white-100);
}
.cert-prose ol.cert-numbered > li::before {
  content: '/' counter(cert-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 16px;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.9;
  color: var(--black-75);
}

/* Napomena (bež okvir) */
.cert-prose .cert-note,
.cert-prose p.cert-note:last-of-type { padding: 20px 24px; background: var(--beige-50); border-radius: var(--radius); }   /* Divi zadnjem odlomku miče donji padding (p:not(.has-background):last-of-type) */
.cert-prose .cert-note > * { margin: 0 0 8px; }
.cert-prose .cert-note > *:last-child { margin-bottom: 0; }

/* Popis poveznica sa strelicom */
.cert-prose ul.cert-links { padding: 0; list-style: none; border-top: 2px solid var(--black-100); }
.cert-prose ul.cert-links > li { margin: 0; border-bottom: 1px solid var(--black-50); }
.cert-prose ul.cert-links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 8px;
  font-weight: 600;
  text-decoration: none;            /* redak s rubovima i strelicom je dovoljno prepoznatljiv kao poveznica */
  text-underline-offset: 4px;
}
.cert-prose ul.cert-links a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.cert-prose ul.cert-links a::after {
  content: '';
  flex: none;
  width: 22px;
  height: 22px;
  background: currentColor;
  -webkit-mask: url('../img/arrow_forward.svg') center / contain no-repeat;
          mask: url('../img/arrow_forward.svg') center / contain no-repeat;
}
.cert-prose ul.cert-links a:hover { background: var(--white-75); }
/* Poveznica s nazivom i opisom („<strong>Spam</strong> [SPAM] — …"): naziv u stalnom stupcu, da opisi budu poravnati */
.cert-prose ul.cert-links a:has(> strong:first-child) {
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr) 22px;
  column-gap: 24px;
  font-weight: 400;
}
.cert-prose ul.cert-links a:has(> strong:first-child) > strong { font-weight: 600; }
@media (max-width: 640px) {
  .cert-prose ul.cert-links a:has(> strong:first-child) { grid-template-columns: minmax(0, 1fr) 22px; row-gap: 4px; }
  .cert-prose ul.cert-links a:has(> strong:first-child) > strong { grid-column: 1; }
  .cert-prose ul.cert-links a:has(> strong:first-child)::after { grid-column: 2; grid-row: 1 / span 2; }
}

/* Harmonika (blok Detalji) */
.cert-prose .wp-block-details { margin: 0; border-bottom: 1px solid var(--black-50); }
.cert-prose .wp-block-details:first-of-type,
.cert-prose h2 + .wp-block-details,
.cert-prose p + .wp-block-details { border-top: 2px solid var(--black-100); }
.cert-prose .wp-block-details + .wp-block-details { border-top: 0; }
.cert-prose .wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 56px;
  padding: 12px 4px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.cert-prose .wp-block-details summary::-webkit-details-marker { display: none; }
.cert-prose .wp-block-details summary::after {
  content: '';
  flex: none;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask: url('../img/expand_more.svg') center / contain no-repeat;
          mask: url('../img/expand_more.svg') center / contain no-repeat;
  transition: transform .15s;
}
.cert-prose .wp-block-details[open] summary::after { transform: rotate(180deg); }
.cert-prose .wp-block-details summary:hover { background: var(--white-75); }
.cert-prose .wp-block-details > :not(summary) { margin: 0 4px 16px; }
.cert-prose .wp-block-details dl { margin: 0 0 16px; }
.cert-prose .wp-block-details dt { font-weight: 600; margin-top: 12px; }
.cert-prose .wp-block-details dd { margin: 4px 0 0; color: var(--black-75); font-size: var(--fs-md); }

/* Traka s činjenicama (O nama): grupa „cert-facts" s odlomcima, prvi dio podebljan */
.cert-prose .cert-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 8px 0 32px; border-top: 2px solid var(--black-100); }
.cert-prose .cert-facts > p { margin: 0 !important; max-width: none;   /* WP „constrained" raspored centrira djecu (margin auto) — u mreži ih to pomiče */
   padding: 20px 24px 20px 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-75); }
.cert-prose .cert-facts > p + p { padding-left: 24px; border-left: 1px solid var(--white-100); }
.cert-prose .cert-facts strong { display: block; margin-bottom: 8px; font-size: var(--fs-h4); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--black-100); }

/* Kartice (članstva, kontakti): lista „cert-cards", prvi podebljani dio je naslov kartice */
.cert-prose ul.cert-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; list-style: none; }
.cert-prose ul.cert-cards > li { margin: 0; padding: 20px 24px; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--black-75); background: var(--white-75); border-radius: var(--radius); }
.cert-prose ul.cert-cards > li strong:first-child { display: block; margin-bottom: 4px; font-size: var(--fs-lg); color: var(--black-100); }
.cert-prose ul.cert-cards a { color: var(--black-100); }
.cert-prose code.cert-fingerprint { white-space: normal; word-break: break-all; }

/* Istraži teme: obrazac s filtrima */
.cert-filters {
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 16px;
  align-items: end;
  margin: 0 0 32px;
  padding: 24px;
  background: var(--white-75);
  border-radius: var(--radius);
}
.cert-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cert-field label { font-size: var(--fs-sm); font-weight: 600; color: var(--black-100); }
.cert-field input,
.cert-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  font: 400 var(--fs-md)/1.2 var(--font);
  color: var(--black-100);
  background: var(--white-50);
  border: 1.5px solid var(--black-75);   /* 7,4:1 — rub polja vidljiv (WCAG 1.4.11) */
  border-radius: var(--radius);
  appearance: none;
}
.cert-field select {
  padding-right: 40px;
  background: var(--white-50) url('../img/expand_more.svg') right 10px center / 22px no-repeat;
}
.cert-field input::placeholder { color: var(--black-75); opacity: 1; }
.cert-field input:focus-visible,
.cert-field select:focus-visible { outline: 2px solid var(--black-100); outline-offset: 2px; border-color: var(--black-100); }
.cert-filters__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; }

/* Brze poveznice na teme */
.cert-topics { margin: 0 0 40px; }
.cert-topics ul, .cert-years ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cert-topic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 8px 8px 16px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--black-100);
  text-decoration: none;
  border: 1px solid var(--black-75);
  border-radius: 999px;
}
.cert-topic:hover { background: var(--white-75); }
.cert-topic[aria-current="true"] { font-weight: 600; background: rgba(97, 209, 250, .3); border-color: var(--black-100); }
.cert-topic__count { min-width: 26px; padding: 2px 8px; font-size: var(--fs-xs); font-weight: 600; text-align: center; background: var(--white-100); border-radius: 999px; }

.cert-results__title { margin: 0 0 16px; padding: 0; font-size: var(--fs-h5); font-weight: 600; color: var(--black-100); }
.cert-row__type { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-75); }

/* Arhiva po godinama */
.cert-years { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--white-100); }
.cert-chip--light { color: var(--black-100); border-color: var(--black-75); }
.cert-chip--light:hover { color: var(--black-100); background: var(--white-75); border-color: var(--black-100); }
.cert-chip--light[aria-current="page"] { color: var(--black-100); background: var(--blue); border-color: var(--blue); }

/* ==========================================================================
   Savjeti i preporuke
   ========================================================================== */
/* Ulazna stranica: kategorije kao velike kartice */
.cert-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.cert-group {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 300px;
  padding: 32px 28px 28px;
  color: var(--black-100);
  background: var(--white-75);          /* svijetle kartice (4. 11. 2026.: „Savjeti su pretamni") */
  border: 1px solid var(--white-100);
  border-radius: var(--radius);
  transition: background-color .15s, color .15s;
}
.cert-group__num { font-size: var(--fs-sm); font-weight: 600; color: var(--black-75); }
.cert-group__title { margin: 0; padding: 0; font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: var(--lh-h4); letter-spacing: -.01em; color: inherit; }
.cert-group__desc { flex: 1; margin: 0; padding: 0; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--black-75); }
.cert-group__meta { margin: 0; padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-75); }
.cert-group > .cert-icon { width: 26px; height: 26px; color: var(--black-100); }
.cert-group:hover { color: var(--black-100); background: var(--blue); border-color: var(--blue); }
.cert-group:hover .cert-group__num,
.cert-group:hover .cert-group__desc,
.cert-group:hover .cert-group__meta,
.cert-group:hover > .cert-icon { color: var(--black-100); }
.cert-group:has(.cert-stretch:focus-visible) { outline: 2px solid var(--black-100); outline-offset: 3px; }
/* U pripremi: nije poveznica */
.cert-group--soon,
.cert-group--soon:hover { color: var(--black-100); background: transparent; border: 1.5px dashed var(--black-75); }
.cert-group--soon .cert-group__num,
.cert-group--soon:hover .cert-group__num { color: var(--black-75); }
.cert-group--soon .cert-group__desc,
.cert-group--soon:hover .cert-group__desc { color: var(--black-75); }
.cert-group--soon .cert-group__meta,
.cert-group--soon:hover .cert-group__meta { align-self: flex-start; padding: 4px 8px; color: var(--black-100); background: var(--beige-50); border-radius: var(--radius); }

/* Razina: opis lijevo, koraci desno */
.cert-level { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; padding: 40px 0 56px; border-top: 2px solid var(--black-100); scroll-margin-top: 24px; }
.cert-level:first-child { padding-top: 0; border-top: 0; }
.cert-level__head { position: sticky; top: 32px; }
.cert-level__num { display: inline-block; margin: 0 0 16px; padding: 4px 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-100); background: var(--blue); border-radius: var(--radius); }
.cert-level__title { margin: 0 0 12px; padding: 0; font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: var(--lh-h4); letter-spacing: -.01em; color: var(--black-100); }
.cert-level__desc { margin: 0 0 12px; padding: 0; font-size: var(--fs-md); line-height: var(--lh-md); color: var(--black-75); }
.cert-level__count { margin: 0; padding: 0; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-75); }

/* Numerirani popis savjeta / koraka */
.cert-advice { margin: 0; padding: 0; list-style: none; counter-reset: cert-advice; border-top: 2px solid var(--black-100); }
.cert-level .cert-advice { border-top-width: 1px; border-top-color: var(--white-100); }
.cert-advice__item { counter-increment: cert-advice; margin: 0; border-bottom: 1px solid var(--white-100); }
.cert-advice__link {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 16px;
  align-items: start;
  padding: 24px 8px;
  color: var(--black-100);
  text-decoration: none;
  transition: background-color .15s;
}
.cert-advice__link::before { content: '/' counter(cert-advice, decimal-leading-zero); padding-top: 4px; font-size: var(--fs-sm); font-weight: 600; color: var(--black-75); }
.cert-advice__link:hover { background: var(--white-75); }
.cert-advice__title { margin: 0; padding: 0; font-size: var(--fs-h6); font-weight: 600; line-height: var(--lh-h6); letter-spacing: 0; color: var(--black-100); }
.cert-advice__desc { margin: 8px 0 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--black-75); }
.cert-advice__link > .cert-icon { align-self: center; width: 22px; height: 22px; }

/* Savjet: oznaka koraka u heru, prethodni / sljedeći */
.cert-step-label { margin: 0 0 16px; }
.cert-s--dark .cert-step-label { color: var(--blue); }
.cert-stepnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 48px 0 0; }
.cert-stepnav__link { display: flex; flex-direction: column; gap: 8px; min-height: 88px; padding: 16px 20px; color: var(--black-100); text-decoration: none; background: var(--white-75); border-radius: var(--radius); transition: background-color .15s; }
.cert-stepnav__link:hover { background: rgba(97, 209, 250, .3); }
.cert-stepnav__link--next { text-align: right; align-items: flex-end; }
.cert-stepnav__dir { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--black-75); }
.cert-stepnav__dir .cert-icon { width: 16px; height: 16px; }
.cert-stepnav__title { font-size: var(--fs-md); font-weight: 600; line-height: 1.35; }
.cert-stepnav + .cert-article__back { margin-top: 24px; }

/* Bočni popis koraka je numeriran */
.cert-aside__nav ol { margin: 0; padding: 0; list-style: none; counter-reset: cert-side; border-top: 2px solid var(--black-100); }
.cert-aside__nav ol > li { counter-increment: cert-side; }
.cert-aside__nav ol a:not(.cert-aside__label a)::before { content: counter(cert-side, decimal-leading-zero); flex: none; width: 30px; font-size: var(--fs-xs); font-weight: 600; color: var(--black-75); }

/* Povezane novosti */
.cert-tpl-related { padding: 72px 0 96px; background: var(--white-75); border-top: 1px solid var(--white-100); }
.cert-tpl-related__title { margin: 0; padding: 0; font-size: var(--fs-h4); font-weight: var(--fw-heading); line-height: var(--lh-h4); letter-spacing: -.01em; color: var(--black-100); }
.cert-news--even { grid-template-columns: repeat(3, 1fr); }
.cert-tpl .cert-news { margin: 0; padding: 0; list-style: none; }

@media (max-width: 1024px) {
  .cert-row { grid-template-columns: 200px 1fr auto; gap: 8px 24px; }
  .cert-row__media { grid-row: 1 / span 2; height: 120px; }
  .cert-row__meta { flex-direction: row; align-items: center; }
  .cert-row__body { grid-column: 2; }
  .cert-row > .cert-icon { grid-column: 3; grid-row: 1 / span 2; }
  .cert-news--even { grid-template-columns: 1fr; }
  .cert-tpl-hero--post .cert-container,
  .cert-tpl-hero--page .cert-container { grid-template-columns: 1fr; gap: 32px; }
  .cert-tpl-hero__media { max-width: 640px; }
  .cert-tpl-hero__deco { display: none; }
  .cert-filters { grid-template-columns: 1fr 1fr; }
  .cert-groups { grid-template-columns: 1fr; }
  .cert-group { min-height: 0; }
  .cert-level { grid-template-columns: 1fr; gap: 24px; }
  .cert-level__head { position: static; }
  .cert-field--search { grid-column: 1 / -1; }
  .cert-article-layout { grid-template-columns: 1fr; gap: 48px; }
  .cert-aside { position: static; max-width: 720px; }
}
@media (max-width: 640px) {
  .cert-tpl-hero { padding: 32px 0 24px; }
  .cert-tpl-hero--post { padding: 24px 0 40px; }
  .cert-crumbs li:last-child { display: none; }
  .cert-crumbs ol { margin-bottom: 16px; }
  .cert-tpl-body { padding: 40px 0 64px; }
  .cert-row { grid-template-columns: 1fr auto; padding: 20px 0; }
  .cert-prose .cert-facts, .cert-prose ul.cert-cards { grid-template-columns: 1fr; }
  .cert-filters { grid-template-columns: 1fr; padding: 16px; }
  .cert-stepnav { grid-template-columns: 1fr; }
  .cert-stepnav__link--next { text-align: left; align-items: flex-start; }
  .cert-advice__link { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; }
  .cert-prose .cert-facts > p + p { padding-left: 0; border-left: 0; border-top: 1px solid var(--white-100); }
  .cert-row__media { grid-row: auto; grid-column: 1 / -1; height: 180px; }
  .cert-row__meta, .cert-row__body { grid-column: 1; }
  .cert-row > .cert-icon { grid-column: 2; grid-row: 2 / span 2; }
}

/* ---------- Responzivno ---------- */
@media (max-width: 1180px) {
  .cert-hero > .et_pb_row:first-child { min-height: 340px; }
  .cert-hero > .et_pb_row:first-child::after { width: 42%; }
}
@media (max-width: 1024px) {
  :root { --gutter: 32px; --section-y: 72px; }
  .cert-hero > .et_pb_row:first-child { min-height: 0; }
  .cert-hero > .et_pb_row:first-child::after { display: none; }
  .cert-hero .cert-row-alerts { margin-top: 56px; }
  .cert-alerts, .cert-news { grid-template-columns: 1fr; }
  .cert-news__item--featured .cert-news__media { height: 220px; }
  .cert-list a { grid-template-columns: 44px 1fr auto; row-gap: 4px; }
  .cert-list__title { grid-column: 2; }
  .cert-list__desc { grid-column: 2; grid-row: 2; }
  .cert-list .cert-icon { grid-column: 3; grid-row: 1 / span 2; }
  .cert-footer__main { flex-direction: column; gap: 40px; }
  .cert-footer__logo { flex: none; }
  .cert-footer__cols { align-self: stretch; min-width: 0; gap: 32px; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --section-y: 56px; }
  .cert-tiles { grid-auto-flow: row; grid-template-columns: 1fr; }
  .cert-stats { grid-auto-flow: row; grid-template-columns: 1fr; }
  .cert-stats__item,
  .cert-stats__item:nth-child(2n) { padding: 24px 0; border-right: 0; border-top: 1px solid var(--beige); }
  .cert-stats__item:first-child { border-top: 0; }
  .cert-blockhead--lg { flex-wrap: wrap; }
  .cert-actions .btn { width: 100%; }
  .cert-footer__inner { gap: 40px; padding-top: 48px; }
  .cert-footer__cols { flex-direction: column; }
  .cert-footer__col { flex: none; align-self: stretch; }
  .cert-footer__lists { gap: 24px; }
  .cert-footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .btn:active { transform: none; }
}

/* Postavke kolačića: gumb izgleda kao poveznica u footeru; CookieYesova plutajuća ikona se skriva (design-system/README.md) */
.cert-footer__links .cert-footer__cookie {
  display: inline-block;
  margin: 0;
  padding: 2px 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--f-text);
  text-align: left;
  cursor: pointer;
}
.cert-footer__links .cert-footer__cookie:hover { text-decoration: underline; text-underline-offset: 4px; }
.cky-btn-revisit-wrapper { display: none !important; }

/* ==========================================================================
   Statistika incidenata — [cert_statistika] (inc/statistika.php, assets/js/statistika.js)
   Tamne kartice: plavi stupci na Off-Black 100 (11:1), tekst Off-White. Bez novih nijansi.
   ========================================================================== */
.cert-sr {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Podstranica bez bočnog stupca (nije u izborniku): tekst ostaje 800 px, grafovi idu u punu širinu */
.cert-article-layout--full { grid-template-columns: minmax(0, 1fr); }
.cert-article-layout--full .cert-article { max-width: none; }
.cert-article-layout--full .cert-prose > :not(.cert-stats-page) { max-width: 800px; }

.cert-nowrap { white-space: nowrap; }
.cert-stats-page { display: flex; flex-direction: column; gap: 32px; margin: 0 0 32px; }
.cert-prose .cert-stats-page > * { margin: 0; }
.cert-chart {
  margin: 0;
  padding: 32px;
  background: var(--black-100);
  color: var(--white-50);
  border-radius: var(--radius);
  font-size: var(--fs-md);
  line-height: var(--lh-md);
}
.cert-chart :focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cert-chart__head { margin: 0 0 24px; }
.cert-prose .cert-chart__title,
.cert-chart__title {
  margin: 0;
  padding: 0;
  font-size: var(--fs-h6);
  line-height: var(--lh-h6);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--white-50);
}
.cert-chart__sub { margin: 4px 0 0; padding: 0; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--white-100); }

/* Brojke iznad dnevnih grafova */
.cert-chart__kpi { display: flex; flex-wrap: wrap; gap: 8px 40px; margin: -8px 0 24px; padding: 0; }
.cert-chart__kpi dt { font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--white-100); }
.cert-chart__kpi dd { margin: 4px 0 0; font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Raspodjela: vodoravni stupci kao tablica */
.cert-prose .cert-hbar,
.cert-hbar { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cert-prose .cert-hbar th,
.cert-prose .cert-hbar td,
.cert-hbar th, .cert-hbar td {
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--black-75);
  vertical-align: middle;
  color: var(--white-50);
  font-weight: 400;
}
.cert-hbar tbody tr:last-child > * { border-bottom: 0; }
.cert-hbar th { width: 42%; padding-right: 16px; text-align: left; }
.cert-hbar__cell { width: auto; }
.cert-hbar__bar { display: block; min-width: 2px; height: 16px; background: var(--blue); border-radius: 0 var(--radius) var(--radius) 0; }
.cert-prose .cert-hbar .cert-hbar__num,
.cert-hbar__num { width: 48px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.cert-prose .cert-hbar .cert-hbar__pct,
.cert-hbar__pct { width: 72px; text-align: right; color: var(--white-100); font-variant-numeric: tabular-nums; }

/* Dnevni grafovi */
.cert-chart__plot { position: relative; padding: 8px 0 32px 48px; }
.cert-chart__area { position: relative; height: 240px; touch-action: pan-y; }
.cert-chart__grid { position: absolute; inset: 8px 0 32px 0; pointer-events: none; }
.cert-chart__grid span { position: absolute; left: 48px; right: 0; border-top: 1px solid var(--black-75); }
.cert-chart__grid b {
  position: absolute; right: calc(100% + 8px); top: -8px;
  font-size: var(--fs-xs); line-height: 16px; font-weight: 400; color: var(--white-100);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cert-chart__x { position: absolute; left: 48px; right: 0; bottom: 0; height: 24px; }
.cert-chart__x span {
  position: absolute; top: 8px; transform: translateX(-50%);
  font-size: var(--fs-xs); line-height: 16px; color: var(--white-100); white-space: nowrap;
}
.cert-vbars { display: flex; align-items: flex-end; gap: 2px; height: 100%; }
.cert-vbar { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; }
.cert-vbar i { display: block; width: 100%; min-height: 0; background: var(--blue); border-radius: var(--radius) var(--radius) 0 0; }
.cert-vbars:has(.is-active) .cert-vbar:not(.is-active) i { opacity: .5; }
.cert-line { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cert-line__stroke { fill: none; stroke: var(--blue); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }

.cert-chart__rule { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--white-100); pointer-events: none; }
.cert-chart__dot {
  position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px;
  background: var(--blue); border: 2px solid var(--black-100); border-radius: 50%; pointer-events: none;
}
.cert-chart__tip {
  position: absolute; top: -8px; z-index: 2; transform: translate(-50%, -100%);
  display: flex; gap: 4px; align-items: baseline; flex-wrap: nowrap;
  padding: 8px 12px; white-space: nowrap; pointer-events: none;
  background: var(--white-50); color: var(--black-100);
  border-radius: var(--radius); font-size: var(--fs-sm); line-height: var(--lh-sm);
}
.cert-chart__tip span:first-child { margin-right: 8px; color: var(--black-75); }
.cert-chart__tip.is-left { transform: translate(-100%, -100%); }
.cert-chart__tip.is-right { transform: translate(0, -100%); }
.cert-chart__tip[hidden], .cert-chart__rule[hidden], .cert-chart__dot[hidden] { display: none; }

/* Tablica podataka */
.cert-chart__data { margin-top: 16px; }
.cert-chart__data summary {
  display: inline-flex; align-items: center; min-height: 44px; cursor: pointer;
  font-size: var(--fs-sm); font-weight: 600; color: var(--white-50);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cert-chart__data summary:hover { text-decoration-thickness: 2px; }
.cert-chart__table { margin-top: 8px; max-height: 360px; overflow: auto; }
.cert-prose .cert-chart__table table,
.cert-chart__table table { width: 100%; border: 0; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--lh-sm); }
.cert-prose .cert-chart__table th,
.cert-prose .cert-chart__table td,
.cert-chart__table th, .cert-chart__table td {
  padding: 8px 12px 8px 0; border: 0; border-bottom: 1px solid var(--black-75);
  color: var(--white-50); text-align: left; font-variant-numeric: tabular-nums;
}
.cert-prose .cert-chart__table thead th,
.cert-chart__table thead th { position: sticky; top: 0; background: var(--black-100); font-weight: 600; color: var(--white-100); border-bottom: 1px solid var(--white-100); }
.cert-chart__table tbody th { font-weight: 400; }

@media (max-width: 640px) {
  .cert-chart { padding: 24px 16px; }
  .cert-chart__area { height: 200px; }
  .cert-chart__kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .cert-chart__kpi dt { letter-spacing: .04em; }
  .cert-chart__kpi dd { font-size: var(--fs-h6); line-height: var(--lh-h6); }
  .cert-hbar tr { display: grid; grid-template-columns: 1fr auto auto; column-gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--black-75); }
  .cert-hbar tbody tr:last-child { border-bottom: 0; }
  .cert-prose .cert-hbar th, .cert-prose .cert-hbar td,
  .cert-hbar th, .cert-hbar td { border: 0; padding: 0; width: auto; }
  .cert-hbar th { grid-column: 1 / -1; padding: 0 0 4px; }
  .cert-hbar__cell { align-self: center; }
}
@media (forced-colors: active) {
  .cert-hbar__bar, .cert-vbar i { background: CanvasText; }
  .cert-line__stroke { stroke: CanvasText; }
}
@media print {
  .cert-chart { background: none; color: var(--black-100); border: 1px solid var(--black-100); }
}

/* ---------- Pretraga i 404 ---------- */
.cert-searchform {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  max-width: 800px;
  margin: 0 0 48px;
  padding: 24px;
  background: var(--white-75);
  border-radius: var(--radius);
}
.cert-searchform .cert-field { flex: 1; }
.cert-searchform .btn { flex: none; min-height: 48px; }
.cert-noresults { max-width: 800px; }
.cert-noresults > h2:first-child { margin-top: 0; }
@media (max-width: 640px) {
  .cert-searchform { flex-direction: column; align-items: stretch; padding: 16px; }
}
@media (max-width: 1024px) {
  .cert-edu-grid { grid-template-columns: 1fr; gap: 32px; }
  .cert-s ul.cert-social__list { flex-direction: row; flex-wrap: wrap; gap: 8px 32px; }
}

/* ---------- Obavijest o kolačićima (CookieYes) — boje i tekstovi su u postavkama dodatka (REST, 4. 11. 2026.),
   ovdje oblik prema brendu: Inter, zaobljenja 4 px, gumbi pill 44 px, bez čiste bijele ---------- */
.cky-consent-container, .cky-modal, .cky-preference-center { font-family: var(--font) !important; }
.cky-consent-container .cky-consent-bar,
.cky-modal .cky-preference-center { border-radius: var(--radius) !important; box-shadow: 0 8px 32px rgba(14, 14, 14, .18) !important; }
.cky-consent-container .cky-btn,
.cky-modal .cky-btn {
  min-height: 44px;
  padding: 8px 20px !important;
  font-size: var(--fs-sm) !important;
  font-weight: 600 !important;
  border-width: 1.5px !important;
  border-radius: 999px !important;
}
.cky-consent-container .cky-title,
.cky-modal .cky-preference-title { font-weight: 600 !important; }
.cky-consent-container :focus-visible,
.cky-modal :focus-visible { outline: 2px solid var(--black-100) !important; outline-offset: 2px !important; }
.cky-modal .cky-btn-close img,
.cky-consent-container .cky-banner-btn-close img { filter: brightness(0); }
.cky-modal .cky-switch input[type="checkbox"]::before { background: var(--white-50) !important; }
.cky-modal .cky-audit-table { border-radius: var(--radius); }

/* ==========================================================================
   Mobitel (4. 11. 2026., korisnik: „na mobilnoj su fontovi na nekim mjestima ogromni",
   „vizuali u heroima se ne vide — u pozadinu sa smanjenom prozirnošću")
   ========================================================================== */
@media (max-width: 640px) {
  /* Manja ljestvica naslova nego u design systemu (Hero 44 → 42, H1 36 → 30, H2 32 → 26 …); tekst ostaje 18 */
  :root {
    --fs-hero: 42px;   /* korisnik: „mrvicu veći" (bilo 38) */
    --fs-h1: 30px;
    --fs-h2: 26px;
    --fs-h3: 24px;
    --fs-h4: 22px;
    --fs-h5: 20px;
    --fs-h6: 18px;
  }
  /* WordPressove veličine iz editora („Velik", „Vrlo velik") u tekstu */
  .cert-prose .has-large-font-size,
  .cert-prose .has-x-large-font-size,
  .cert-prose .has-xx-large-font-size { font-size: var(--fs-h5) !important; line-height: var(--lh-h5) !important; }
}

/* Vizual heroa ispod 1024 px: u pozadini, desno, prigušen. Tekst preko njega dobiva najjaču boju,
   da kontrast ostane AA i tamo gdje se preklapaju. */
@media (max-width: 1024px) {
  .cert-tpl-hero { position: relative; overflow: hidden; }
  .cert-tpl-hero .cert-container { position: relative; z-index: 1; }
  .cert-tpl-hero__deco {
    display: block;
    position: absolute;
    z-index: 0;
    top: 50%;
    right: -64px;
    width: 240px;
    max-width: none;
    transform: translateY(-50%);
    opacity: .16;
    pointer-events: none;
  }
  .cert-tpl-hero--bez .cert-tpl-hero__deco { opacity: .2; }
  .cert-tpl-hero--page .cert-tpl-hero__deco { max-width: none; }
  /* tekst preko vizuala */
  .cert-s--dark.cert-tpl-hero .cert-tpl-hero__lead,
  .cert-s--dark.cert-tpl-hero .cert-crumbs li,
  .cert-s--dark.cert-tpl-hero .cert-crumbs [aria-current] { color: var(--white-100); }
  .cert-tpl-hero--bez .cert-tpl-hero__lead,
  .cert-tpl-hero--bez .cert-crumbs li,
  .cert-tpl-hero--bez .cert-crumbs span { color: var(--black-100); }

  /* Naslovnica: fotke u heksagonima u pozadini prvog reda */
  .et_pb_section.cert-hero > .et_pb_row:first-child::after {
    display: block;
    z-index: -1;
    top: -24px;
    right: -20%;
    bottom: auto;
    width: 90%;
    height: 100% !important;   /* osnovno pravilo ima height: auto !important (Divijev clearfix) */
    opacity: .18;
    background-position: right top;
  }
  .cert-s--dark.cert-hero .cert-lead p,
  .cert-s--dark.cert-hero p.cert-lead { color: var(--white-100); }
}

/* Potpisi slika (autor/izvor, 4. 11. 2026.): sitno, Off-Black 75 na svijetloj i bež podlozi.
   Na tamnom heru Off-Black 75 ima 2,1:1 (ne prolazi WCAG) → ondje ostaje Off-Black 50 (5,4:1). */
.cert-article__figure figcaption,
.cert-prose figcaption,
.cert-prose .wp-element-caption { margin-top: 8px; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--black-75); text-align: left; }
.cert-tpl-hero__media figcaption a,
.cert-article__figure figcaption a,
.cert-prose figcaption a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.cert-tpl-hero__media figcaption a:hover,
.cert-prose figcaption a:hover { text-decoration-thickness: 2px; }

/* Redak bez oznake i datuma (Istraži teme) */
.cert-row--bez-meta { grid-template-columns: 280px 1fr auto; }
@media (max-width: 1024px) {
  .cert-row--bez-meta { grid-template-columns: 200px 1fr auto; }
  .cert-row--bez-meta .cert-row__media { grid-row: auto; }
  .cert-row--bez-meta .cert-row__body { grid-column: 2; }
  .cert-row--bez-meta > .cert-icon { grid-column: 3; grid-row: auto; }
}
@media (max-width: 640px) {
  .cert-row--bez-meta { grid-template-columns: 1fr auto; }
  .cert-row--bez-meta .cert-row__media { grid-column: 1 / -1; }
  .cert-row--bez-meta .cert-row__body { grid-column: 1; }
  .cert-row--bez-meta > .cert-icon { grid-column: 2; grid-row: 2; }
}

/* ---------- Galerija, video i ugradnje u tekstu (0.10.9) ---------- */
.cert-prose .wp-block-gallery { gap: 8px; margin: 0 0 24px; }
.cert-prose .wp-block-gallery .wp-block-image img { border-radius: var(--radius); }
.cert-prose .wp-block-gallery .wp-block-image figcaption {   /* potpis preko slike: WP stavlja gradijent, zadržavamo ga radi kontrasta */
  font-size: var(--fs-xs); line-height: 1.4;
}
.cert-prose .wp-block-gallery > .wp-element-caption,
.cert-prose .wp-block-video figcaption,
.cert-prose .wp-block-embed figcaption,
.cert-prose .wp-block-image figcaption { margin-top: 8px; font-size: var(--fs-xs); line-height: 1.4; color: var(--black-75); text-align: left; }
.cert-prose .wp-block-video video { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--black-100); }
.cert-prose .wp-block-embed { margin: 0 0 24px; }
.cert-prose .wp-block-embed iframe { max-width: 100%; border: 0; border-radius: var(--radius); }
.cert-prose .wp-block-embed.wp-has-aspect-ratio iframe { width: 100%; }
/* Divijev FitVids omota iframe u još jedan okvir 16:9 (.fluid-width-video-wrapper), a WP već
   drži omjer preko ::before → dvostruka visina, prazno gore i dolje. Gasimo FitVidsov okvir. */
.wp-block-embed.wp-has-aspect-ratio .fluid-width-video-wrapper { position: static !important; padding-top: 0 !important; }

/* Lightbox slika: gumb za povećanje u bojama brenda (WP ga prikazuje na hover i fokus) */
.cert-prose .wp-lightbox-container button { width: 44px; height: 44px; padding: 0; background: var(--black-100); border-radius: var(--radius); }
.cert-prose .wp-lightbox-container button svg { fill: var(--white-50); }
.cert-prose .wp-lightbox-container button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }