/* Sve je ograničeno na .tp kako se ne bi sudaralo s Drupal temom.

   Tipografija (usklađeno s htz.hr i WCAG 2.2 AA):
   - proza (opisi, sažetak, napomene, kontrole): Quicksand – 17px/1.5 za tekst, najmanje 14px;
     ispod 16px debljina 600 jer je Quicksand tanak i zaobljen pa na malim veličinama gubi čitljivost
   - podaci (brojke, tablice, oznake promjene, grafovi): Montserrat – jasnije znamenke
   - naslovi: Montserrat
   - prored bez jedinica, da korisnički stilovi za razmak teksta (WCAG 1.4.12) ne lome raspored
   Kontrast (izmjereno): tekst 13,8:1, prigušeni tekst ≥ 5,2:1, rubovi kontrola i fokus ≥ 3:1. */
body{ margin:0; }
.tp{
  --navy:#003764; --navy-2:#093B63; --gold:#FAA71A; --grey:#F0F1F1;
  --text:#2D2D2D; --muted:#5C6670; --line:#DADDDF; --control-edge:#8A939B;
  --pos:#2F6F68; --pos-bg:#E3EEED; --neg:#C42B1C; --neg-bg:#FBE6E2;
  --radius:8px; --gap:24px; --card-bg:var(--grey); --content:1340px; /* širina sadržaja kao na htz.hr */
  --font-text:Quicksand, foco, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --font-head:Montserrat, foco, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --focus:var(--navy);
  font-family:var(--font-text); font-size:17px; font-weight:500; line-height:1.5;
  color:var(--text); -webkit-font-smoothing:antialiased;
}
.tp *, .tp *::before, .tp *::after{ box-sizing:border-box; }
.tp :is(h2, h3, p, dl, dd){ margin:0; }
.tp :is(h2, h3){ font-family:var(--font-head); }
/* fokus: tamnoplavi obrub 12:1 na svijetloj, zlatni 6:1 na tamnoj pozadini (WCAG 2.4.7, 1.4.11) */
.tp :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.tp-band--navy, .tp-summary{ --focus:var(--gold); }
.tp-sr{ position:absolute; top:0; left:0; width:1px; height:1px; margin:-1px; padding:0; border:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#sadrzaj:focus{ outline:none; }

/* Layout */
.tp-container{ max-width:calc(var(--content) + 48px); margin-inline:auto; padding-inline:24px; }
.tp-band{ padding-block:64px; }
.tp-band--top{ padding-top:40px; }
.tp-band--alt{ background:var(--grey); --card-bg:#fff; }
.tp-band--navy{ background:var(--navy); color:#fff; padding-block:24px; }
.tp-grid{ display:grid; gap:var(--gap); grid-template-columns:repeat(2, minmax(0, 1fr)); }
.tp-grid--r{ grid-template-columns:minmax(0, 1fr) minmax(0, 1.3fr); }
.tp-pair{ grid-auto-flow:column; grid-template-rows:auto auto; }

/* Naslovi sekcija (HTZ: kicker + naslov + lead, centrirano) */
.tp-head{ max-width:720px; margin:0 auto 32px; text-align:center; }
.tp-pair .tp-head{ margin-bottom:0; }
.tp-kicker{ margin-bottom:8px; font-family:var(--font-head); font-size:14px; font-weight:600; line-height:1.4; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.tp-head h2{ font-size:30px; line-height:1.25; font-weight:600; }
.tp-head p:last-child:not(.tp-kicker){ max-width:64ch; margin:12px auto 0; color:var(--muted); }

/* Kartice i grafovi */
.tp-card{ min-width:0; padding:24px; border-radius:var(--radius); background:var(--card-bg); }
.tp-card h3{ margin-bottom:16px; font-size:20px; line-height:1.3; font-weight:600; }
.tp-chart{ position:relative; height:340px; }
.tp-chart--tall{ height:460px; }
.tp-chart canvas{ max-width:100%; }
.tp-note{ margin-top:12px; padding-top:12px; border-top:1px solid var(--line); font-size:15px; font-weight:600; line-height:1.5; color:var(--muted); }

/* Podaci iz grafa (tekstualna alternativa, WCAG 1.1.1) */
.tp-data{ margin-top:16px; border-top:1px solid var(--line); }
.tp-data summary{
  display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:10px 0; cursor:pointer;
  color:var(--navy); font-size:15px; font-weight:700; line-height:1.4; text-decoration:underline; text-underline-offset:3px;
}
.tp-data summary::-webkit-details-marker{ display:none; }
.tp-data summary::before{ content:""; width:7px; height:7px; border:solid currentColor; border-width:0 2px 2px 0; transform:rotate(-45deg); transition:transform .15s; }
.tp-data[open] summary::before{ transform:rotate(45deg); }
.tp-data .tp-table-wrap{ max-height:none; }

/* Kontrole */
.tp-toolbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px; margin-bottom:32px; }
.tp-toolbar__group, .tp-toolbar__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; }
.tp-label{ font-size:16px; font-weight:700; line-height:1.4; }
.tp-seg{ display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:var(--grey); }
.tp-seg button, .tp-seg__single{ min-height:40px; padding:8px 18px; border:0; border-radius:999px; background:none; color:var(--navy); font:inherit; font-size:16px; font-weight:600; line-height:1.4; white-space:nowrap; }
.tp-seg button{ cursor:pointer; }
.tp-seg [aria-pressed="true"]{ background:var(--navy); color:#fff; }
.tp-band--navy .tp-seg{ background:var(--navy-2); }
.tp-band--navy .tp-seg button{ color:#fff; }
.tp-band--navy .tp-seg [aria-pressed="true"]{ background:var(--gold); color:var(--navy); }
.tp-metric{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:12px 16px; }
.tp-metric__hint{ flex-basis:100%; text-align:center; font-size:15px; font-weight:600; line-height:1.4; }

.tp-btn{
  display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:10px 20px;
  border:1px solid var(--navy); border-radius:999px; background:var(--navy); color:#fff;
  font:inherit; font-size:16px; font-weight:600; line-height:1.4; text-decoration:none; cursor:pointer;
}
.tp-btn::after{ content:""; width:6px; height:6px; border:solid currentColor; border-width:1.5px 1.5px 0 0; transform:rotate(45deg); }
.tp-btn:hover{ background:var(--navy-2); }
.tp-btn--ghost{ background:#fff; color:var(--navy); }
.tp-btn--ghost:hover{ background:var(--grey); }

.tp-field{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:-8px auto 32px; }
.tp-field label, .tp-field__label{ display:block; font-size:15px; font-weight:700; line-height:1.4; color:var(--text); }
.tp-field__label{ margin-bottom:8px; }
.tp-select, .tp-search{ min-height:44px; border:1px solid var(--control-edge); border-radius:999px; background-color:#fff; color:var(--text); font:inherit; font-size:16px; line-height:1.4; }
.tp-select{
  min-width:260px; padding:10px 44px 10px 18px; appearance:none; font-weight:600; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23003764' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 18px center;
}
.tp-search{ width:100%; margin-bottom:12px; padding:10px 18px; }

/* Tablice – podaci u Montserratu, najmanje 14px */
/* position:relative je nužan: skriveni <caption class="tp-sr"> je apsolutno pozicioniran i bez ovoga
   "pobjegne" iz okvira koji se pomiče pa na mobitelu proširi cijelu stranicu (vodoravni overflow) */
.tp-table-wrap{ position:relative; max-height:460px; overflow:auto; border-top:1px solid var(--line); }
.tp-table-wrap--compact{ max-height:360px; }
.tp-table{ width:100%; border-collapse:collapse; font-family:var(--font-head); font-size:15px; font-weight:500; line-height:1.4; }
.tp-table :is(th, td){ padding:10px; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; }
.tp-table thead th{
  position:sticky; top:0; z-index:1; background:var(--card-bg);
  color:var(--navy); font-size:14px; font-weight:700; white-space:nowrap;
}
.tp-table tbody th{ font-weight:600; }
.tp-table th button{ all:unset; display:inline-flex; align-items:center; gap:6px; min-height:24px; cursor:pointer; }
.tp-table th button:hover{ text-decoration:underline; }
.tp-sort{ font-size:12px; color:var(--muted); }
[aria-sort] .tp-sort{ color:var(--navy); }
.tp-table tbody tr:hover{ background:rgb(0 55 100 / .04); }
.tp-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tp-table .num button{ flex-direction:row-reverse; }
.tp-empty{ padding:16px 10px; color:var(--muted); font-family:var(--font-text); font-weight:600; }
.tp-pill{ display:inline-block; padding:3px 9px; border-radius:999px; font-family:var(--font-head); font-size:14px; font-weight:600; line-height:1.4; white-space:nowrap; }
.tp-pill.up{ background:var(--pos-bg); color:var(--pos); }
.tp-pill.down{ background:var(--neg-bg); color:var(--neg); }

/* KPI + sažetak */
.tp .tp-kpis{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap); margin-bottom:var(--gap); }
.tp-kpi{ padding:24px; border-radius:var(--radius); background:var(--grey); }
.tp-kpi__label{ font-size:17px; font-weight:600; color:var(--muted); }
.tp-kpi__value{ margin:4px 0 10px; font-family:var(--font-head); font-size:32px; font-weight:600; line-height:1.2; color:var(--navy); }
.tp-summary{ padding:32px 40px; border-radius:var(--radius); background:var(--navy); color:#fff; }
.tp-summary .tp-kicker{ margin-bottom:12px; color:var(--gold); }
.tp-summary p:last-child{ max-width:75ch; font-size:19px; line-height:1.6; }

/* Izvor i metodologija */
.tp-source{ padding-block:48px; border-top:1px solid var(--line); font-size:16px; line-height:1.6; color:var(--muted); }
.tp-source h2{ margin-bottom:12px; font-size:18px; font-weight:600; color:var(--text); }
.tp-source p{ max-width:75ch; margin-bottom:10px; }
.tp-source strong{ color:var(--text); font-weight:700; }

/* Visoki kontrast (Windows): stanja koja se inače vide samo bojom pozadine */
@media (forced-colors: active){
  .tp-seg [aria-pressed="true"]{ outline:2px solid CanvasText; outline-offset:-2px; }
  .tp-pill{ border:1px solid; }
}
@media (prefers-reduced-motion: reduce){
  .tp *, .tp *::before, .tp *::after{ transition:none !important; }
}

@media (max-width:1060px){
  .tp-grid, .tp-grid--r{ grid-template-columns:minmax(0, 1fr); }
  .tp-pair{ grid-auto-flow:row; }
  .tp .tp-kpis{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .tp-container{ padding-inline:16px; }
  .tp-band{ padding-block:48px; }
  .tp-head h2{ font-size:24px; }
  .tp-card h3{ font-size:18px; }
  .tp .tp-kpis{ grid-template-columns:minmax(0, 1fr); }
  .tp-kpi__value{ font-size:28px; }
  .tp-summary{ padding:24px; }
  .tp-card{ padding:20px 16px; }
  .tp-chart, .tp-chart--tall{ height:400px; }
  .tp-toolbar, .tp-toolbar__actions{ flex-direction:column; align-items:stretch; }
  .tp-btn{ justify-content:center; }
  .tp-field{ align-items:stretch; }
  .tp-select{ width:100%; min-width:0; }
  .tp-table{ font-size:14px; }
  .tp-table :is(th, td){ padding:8px 6px; }
  .tp-summary p:last-child{ font-size:17px; }
  /* odabir razdoblja od ruba do ruba, kao gumbi ispod njega; gumbi su jedan pored drugoga
     kad stanu, a kad ne stanu svaki se raširi na cijeli red */
  .tp-toolbar__group .tp-seg{ display:flex; flex-wrap:wrap; width:100%; border-radius:24px; }
  .tp-toolbar__group .tp-seg button{ flex:1 1 auto; }
}

@media print{
  .tp-toolbar__actions, .tp-field, .tp-search, .tp-field__label, .tp-data, .tp-metric__hint, .tp .tp-seg button:not([aria-pressed="true"]){ display:none; }
  .tp .tp-seg, .tp .tp-seg [aria-pressed="true"]{ padding:0; background:none; color:inherit; }
  .tp-band, .tp-band--alt, .tp-band--navy{ padding-block:16px; background:none; color:inherit; --card-bg:#fff; }
  .tp-card, .tp-kpi, .tp-summary{ border:1px solid var(--line); background:#fff; color:var(--text); }
  .tp-grid, .tp-grid--r{ grid-template-columns:1fr 1fr; }
  .tp-pair{ grid-auto-flow:column; }
  .tp-table-wrap{ max-height:none; overflow:visible; }
  .tp-chart{ height:230px; }
  .tp-chart--tall{ height:280px; }
  .tp section, .tp-card{ break-inside:avoid; }
}

/* ===== Hero i footer u stilu www.htz.hr (header je u htz-header.css; klase .demo-* su zadržane iz ranije verzije) ===== */
.demo{ --d-navy:#003764; --d-bar:#012D53; --d-btn:#0C2749; --d-tile:#093B63; --d-gold:#FAA71A;
  font-family:Quicksand, foco, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-weight:500; color:#fff; }
.demo :is(h1, h2){ font-family:Montserrat, foco, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.demo *{ box-sizing:border-box; }
.demo a{ color:inherit; text-decoration:none; transition:color .2s; }
.demo a:hover{ color:var(--d-gold); }
.demo :focus-visible{ outline:3px solid var(--d-gold); outline-offset:2px; }
.demo ul{ margin:0; padding:0; list-style:none; }
.demo-in{ position:relative; max-width:calc(1340px + 48px); margin-inline:auto; padding-inline:24px; }

/* poveznica za preskakanje izbornika (WCAG 2.4.1) – vidljiva tek kad dobije fokus */
.demo-skip{ position:absolute; z-index:100; top:8px; left:8px; padding:12px 20px; border-radius:999px;
  background:#FAA71A; color:#003764; font:600 16px/1.4 Quicksand, foco, system-ui, sans-serif; text-decoration:none;
  transform:translateY(-200%); }
.demo-skip:focus{ transform:none; outline:3px solid #003764; outline-offset:2px; }

/* header: bez pretrage i izbora jezika – hamburger preuzima margin-left:auto koji je imala pretraga;
   tema na mobitelu kod otvorenog izbornika skriva logo i na njegovo mjesto stavlja izbor jezika –
   bez izbora jezika kut bi ostao prazan, pa logo ostaje vidljiv */
/* tema otvaranjem izbornika zaključava stranicu (body.panel-open{overflow:hidden}) pa desni scrollbar
   nestane i sadržaj poskoči; na desktopu je izbornik padajući, pa zaključavanje ne treba */
@media screen and (min-width:992px){
  html body.panel-open{ overflow:visible; }
}
@media screen and (max-width:991.98px){
  .htz-header header .region-header .navbar__dropdown-toogle{ margin-left:auto; }
  body.panel-open .htz-header header .region-header .navbar-header{ display:block; }
}

/* hero */
.demo-hero{ min-height:460px; overflow:hidden; background:linear-gradient(180deg, #003764 0%, #002849 100%); }
.demo-hero .demo-in{ padding-block:40px 80px; }
.demo-crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:0; padding:0; list-style:none; font-size:15px; font-weight:600; line-height:1.4; }
.demo-crumbs li + li::before{ content:"/"; margin-right:12px; }
.demo-crumbs svg{ display:block; width:18px; height:18px; }
.demo-hero__text{ position:relative; z-index:1; max-width:560px; margin-top:80px; }
.demo-hero h1{ margin:0 0 20px; font-size:35px; line-height:1.2; font-weight:600; }
.demo-hero p{ margin:0; font-size:17px; line-height:1.5; }
.demo-tiles{ position:absolute; top:100px; right:24px; width:562px; height:273px; }
.demo-tiles span{ position:absolute; border-radius:14px; background:var(--d-tile); }
.demo-tiles span:nth-child(1){ left:137px; top:0; width:136px; height:136px; }
.demo-tiles span:nth-child(2){ left:0; top:137px; width:136px; height:136px; }
.demo-tiles span:nth-child(3){ right:0; top:0; width:273px; height:273px; }

/* footer */
.demo-foot{ position:relative; margin-top:48px; padding:83px 0 40px; background:var(--d-navy); font-size:17px; line-height:1.5; }
.demo-foot .demo-in{ max-width:calc(1310px + 48px); } /* footer na htz.hr je uži od sadržaja (1310 px) */
.demo-top{ position:absolute; top:-25px; left:50%; translate:-50% 0; display:grid; place-items:center; width:50px; height:50px;
  border:0; border-radius:50%; background:var(--d-gold); color:var(--d-navy); cursor:pointer; }
.demo-top svg{ width:20px; height:20px; }
.demo-foot__grid{ display:grid; grid-template-columns:415fr 283fr 246fr 270fr; gap:32px; }
.demo-foot h2{ margin:0 0 16px; font-size:17px; font-weight:700; }
.demo-foot__brand h2{ font-size:16px; }
.demo-foot__brand img{ display:block; height:68px; width:auto; max-width:160px; margin-bottom:48px; font-size:12px; }
.demo-foot li + li{ margin-top:20px; }
.demo-news{ display:flex; align-items:center; max-width:330px; padding:4px 4px 4px 18px; border-radius:999px; background:#fff; }
.demo-news input{ flex:1; min-width:0; border:0; background:none; font:inherit; font-size:15px; color:#1E1E1E; outline:none; }
.demo-news button{ display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; background:var(--d-bar); color:#fff; cursor:pointer; }
.demo-news button svg{ width:18px; height:18px; }
.demo-stores{ display:flex; flex-wrap:wrap; gap:14px; }
.demo-stores img{ display:block; height:40px; width:auto; font-size:11px; }
.demo-foot__bottom{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 32px;
  margin-top:49px; padding-top:33px; border-top:1px solid rgb(255 255 255 / .2); font-size:15px; font-weight:600; }
.demo-copy{ margin:0; }
.demo-legal{ display:flex; flex-wrap:wrap; gap:20px; font-size:14px; }
.demo-legal li + li{ margin-top:0; }
.demo-foot__bottom svg{ display:block; width:20px; height:20px; }
.demo-m{ display:none; }

@media (max-width:1060px){
  .demo-tiles{ display:none; }
  .demo-hero{ min-height:0; }
  .demo-hero__text{ margin-top:48px; }
  .demo-foot__grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  .demo-in{ padding-inline:16px; }
  .demo-hero .demo-in{ padding-block:24px 48px; }
  .demo-hero h1{ font-size:30px; }
}
/* footer na mobitelu (htz.hr, Bootstrap xs): logo, harmonika s linkovima, newsletter, aplikacija;
   dno centrirano – LinkedIn, copyright, pravni linkovi jedan ispod drugog */
@media (max-width:767.98px){
  .demo-foot{ padding-top:64px; }
  .demo-foot__grid{ display:flex; flex-direction:column; gap:0; }
  .demo-foot__brand{ display:contents; }
  .demo-foot__brand img{ margin-bottom:40px; }
  .demo-foot nav{ order:1; border-top:1px solid rgb(255 255 255 / .4); }
  .demo-foot nav:last-of-type{ border-bottom:1px solid rgb(255 255 255 / .4); }
  .demo-foot nav h2{ margin:0; }
  .demo-acc{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; padding:18px 0;
    border:0; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer; }
  .demo-acc svg{ flex:none; width:22px; height:22px; transition:rotate .2s; }
  .demo-acc[aria-expanded="true"] svg{ rotate:180deg; }
  .demo-foot nav ul{ padding:2px 0 28px; }
  .demo-foot__brand h2{ order:2; margin:56px 0 16px; }
  .demo-news{ order:3; max-width:none; }
  .demo-foot__app{ order:4; margin-top:48px; }
  .demo-foot__app h2{ margin-bottom:14px; font-size:16px; font-weight:500; }
  .demo-m{ display:inline; }
  .demo-foot__bottom{ flex-direction:column; gap:0; margin-top:44px; padding-top:0; border-top:0; text-align:center; }
  .demo-social{ order:-1; margin-bottom:40px; }
  .demo-copy{ margin-bottom:36px; }
  .demo-legal{ flex-direction:column; align-items:center; gap:8px; }
}
@media print{ .htz-header, .demo-foot, .demo-tiles{ display:none; } .demo-hero{ min-height:0; background:none; color:#1E1E1E; } }
/* ===== /hero i footer ===== */