@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.31.0/dist/tabler-icons.min.css');

/* ============================================================
   SentinelStack — tamna tema
   Zalijepiti u Izgled > Prilagodi > Dodatni CSS
   ili u child temu kao style.css
   ============================================================ */

:root {
  --ss-bg:        #0B1B2B;
  --ss-bg-alt:    #102538;
  --ss-card:      #132A3F;
  --ss-line:      #2A4864;
  --ss-line-soft: #1D3550;
  --ss-text:      #F2F6FA;
  --ss-body:      #9AB0C4;
  --ss-muted:     #7C93A8;
  --ss-amber:     #E0A040;
  --ss-amber-ink: #1A1004;
  --ss-amber-bg:  #3A2A0E;
  --ss-amber-tx:  #F0C783;
  --ss-radius:    10px;
  --ss-wrap:      1290px;
}

/* --- osnova ------------------------------------------------ */
body {
  background: var(--ss-bg);
  color: var(--ss-body);
  -webkit-font-smoothing: antialiased;
}

body h1, body h2, body h3, body h4 { color: var(--ss-text); font-weight: 500; }
body a { color: var(--ss-amber); }

.ss-hero, .ss-section, .ss-accent, .ss-strip,
.ss-box, .ss-quietnote {
  padding: 2rem 1.75rem;
  margin: 0;
}

.ss-hero > *, .ss-section > *, .ss-accent > *,
.ss-strip > *, .ss-quietnote > * {
  max-width: var(--ss-wrap);
  margin-left: auto;
  margin-right: auto;
}

.ss-alt { background: var(--ss-bg-alt); }

@media (min-width: 782px) {
  .ss-hero, .ss-section, .ss-accent, .ss-strip,
  .ss-box, .ss-quietnote { padding: 3.5rem 1.5rem; }
}

/* WordPress umeće .wp-block-group__inner-container između grupe i njezine
   djece, pa grid na vanjskoj grupi vidi samo taj jedan omotač i sve se
   stisne u prvi stupac. Rješenje: raspored postavljamo NA omotač. */
.ss-cards, .ss-tiers, .ss-rows, .ss-steps, .ss-step, .ss-strip {
  display: block;
}

.ss-cards > .wp-block-group__inner-container {
  display: grid;
  gap: .6rem;
  align-items: start;
}

.ss-tiers > .wp-block-group__inner-container {
  display: grid;
  gap: .6rem;
  align-items: start;
}

.ss-rows > .wp-block-group__inner-container,
.ss-steps > .wp-block-group__inner-container {
  display: grid;
  gap: 1.1rem;
}

.ss-step > .wp-block-group__inner-container {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: .1rem .8rem;
}

.ss-strip > .wp-block-group__inner-container {
  display: grid;
  gap: .6rem 1rem;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: var(--ss-wrap);
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 782px) {
  .ss-cards > .wp-block-group__inner-container {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: .9rem;
  }
  .ss-tiers > .wp-block-group__inner-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem;
  }
}

/* --- hero -------------------------------------------------- */
.ss-hero { padding-top: 2.5rem; }

.ss-eyebrow {
  font-size: .68rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ss-amber);
  margin: 0 0 .75rem;
}

.ss-hero h1 {
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0 0 .75rem;
}

@media (min-width: 782px) { .ss-hero h1 { font-size: 2.4rem; } }

.ss-lead {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ss-body);
  max-width: 46ch;
  margin: 0 0 1.5rem;
}

/* --- gumbi ------------------------------------------------- */
.ss-btn { margin-bottom: .5rem; }

.ss-btn .wp-block-button__link,
.ss-btn a.wp-element-button {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 8px;
  padding: .85rem 1.25rem;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  transition: filter .15s ease;
}

@media (min-width: 600px) {
  .ss-btn .wp-block-button__link { display: inline-block; width: auto; }
}

.ss-btn--primary .wp-block-button__link {
  background: var(--ss-amber);
  color: var(--ss-amber-ink);
  border: 2px solid var(--ss-amber);
}

.ss-btn--primary .wp-block-button__link:hover { filter: brightness(1.08); }

.ss-btn--ghost .wp-block-button__link {
  background: transparent;
  color: #C9D8E5;
  border: 1px solid #3A5872;
}

.ss-btn--ghost .wp-block-button__link:hover { border-color: var(--ss-amber); }

/* --- traka povjerenja -------------------------------------- */
.ss-strip {
  background: var(--ss-bg-alt);
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.ss-strip > .wp-block-group__inner-container { align-items: center; }

.ss-strip__item {
  font-size: .95rem;
  color: #8EA6BC;
  display: flex;
  align-items: center;
  gap: .5rem;
  line-height: 1.4;
}

.ss-strip__item .ti { color: var(--ss-amber); font-size: 1.05rem; flex-shrink: 0; }

/* --- naglašeni blok ---------------------------------------- */
.ss-accent > h2,
.ss-accent > p {
  border-left: 3px solid var(--ss-amber);
  padding-left: 1rem;
}

.ss-accent h2 { font-size: 1.2rem; margin: 0 0 .6rem; }
.ss-accent p  { font-size: .95rem; line-height: 1.75; margin: 0 0 .75rem; max-width: 62ch; }

/* --- sekcije i kartice ------------------------------------- */
.ss-section h2 { font-size: 1.2rem; margin: 0 0 1rem; }
.ss-section > .ss-lead { margin-bottom: 1.25rem; }

.ss-cards { max-width: var(--ss-wrap); }

.ss-card {
  background: var(--ss-card);
  border-radius: var(--ss-radius);
  padding: 1rem 1.1rem;
}

.ss-card h3 {
  font-size: .95rem;
  margin: 0 0 .4rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.ss-card h3 .ti { color: var(--ss-amber); font-size: 1.2rem; }
.ss-card p { font-size: .87rem; line-height: 1.6; color: #8EA6BC; margin: 0; }

.ss-card--link h3 a { color: var(--ss-text); text-decoration: none; }
.ss-card--link:hover { outline: 1px solid var(--ss-line); }
.ss-card--link h3 a:hover { color: var(--ss-amber); }

/* --- redovi ------------------------------------------------ */
.ss-rows { max-width: 66ch; }

.ss-row { border-left: 2px solid var(--ss-line); padding-left: 1rem; }
.ss-row h3 { font-size: .95rem; margin: 0 0 .25rem; }
.ss-row h3 .ti { color: var(--ss-amber); margin-right: .4rem; }
.ss-row p { font-size: .87rem; line-height: 1.65; color: #8EA6BC; margin: 0; }

/* --- popisi ------------------------------------------------ */
.ss-ticks, .ss-checks { list-style: none; padding: 0; margin: 0; max-width: 62ch; }

.ss-ticks li, .ss-checks li {
  font-size: .9rem;
  line-height: 1.6;
  color: var(--ss-body);
  padding: .45rem 0 .45rem 1.75rem;
  position: relative;
}

.ss-ticks li::before, .ss-checks li::before {
  font-family: 'tabler-icons';
  content: '\ea5e';
  position: absolute;
  left: 0;
  color: var(--ss-amber);
}

.ss-checks li::before { content: '\eb7e'; }

/* --- koraci ------------------------------------------------ */
.ss-steps { max-width: 66ch; }

.ss-step__n {
  grid-row: span 2;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--ss-amber-bg);
  color: var(--ss-amber-tx);
  font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  margin: 0;
}

.ss-step h3 { font-size: .95rem; margin: .1rem 0 .2rem; }
.ss-step p  { font-size: .87rem; line-height: 1.6; color: #8EA6BC; margin: 0; }

/* --- razine usluge ----------------------------------------- */
.ss-tiers { max-width: var(--ss-wrap); }

.ss-tier {
  border: 1px solid var(--ss-line);
  border-radius: var(--ss-radius);
  padding: 1rem 1.1rem;
}

.ss-tier--featured { border: 2px solid var(--ss-amber); }
.ss-tier h3 { font-size: 1rem; margin: 0 0 .2rem; }
.ss-tier__price { font-size: .78rem; color: var(--ss-muted); margin: 0 0 .7rem; }
.ss-tier p:last-child { font-size: .85rem; line-height: 1.8; color: #8EA6BC; margin: 0; }

/* --- istaknuti okvir i CTA --------------------------------- */
.ss-box {
  border: 2px solid var(--ss-amber);
  border-radius: 12px;
  padding: 1.4rem 1.2rem;
  margin: 1.5rem 1.75rem;
  max-width: var(--ss-wrap);
}

@media (min-width: 782px) {
  .ss-box { margin: 2rem auto; padding: 2rem; }
}

.ss-box h2 { font-size: 1.1rem; margin: 0 0 .5rem; }
.ss-box p  { font-size: .9rem; line-height: 1.65; color: #8EA6BC; }
.ss-box--cta { text-align: center; }
.ss-box--cta .wp-block-buttons { justify-content: center; }

.ss-badge {
  display: inline-block;
  background: var(--ss-amber-bg);
  color: var(--ss-amber-tx);
  font-size: .7rem;
  padding: .25rem .6rem;
  border-radius: 6px;
  margin: 0 0 .6rem;
}

/* --- tiha napomena ----------------------------------------- */
.ss-quietnote p {
  font-size: .9rem;
  line-height: 1.7;
  color: #8EA6BC;
  max-width: 66ch;
  margin: 0;
}

.ss-note { font-size: .78rem; color: var(--ss-muted); line-height: 1.6; }

/* --- kontakt ----------------------------------------------- */
.ss-contact h3 a { color: var(--ss-text); text-decoration: none; font-size: 1.05rem; }
.ss-contact h3 a:hover { color: var(--ss-amber); }

/* --- izjave klijenata -------------------------------------- */
.ss-quote { border: 0; margin: 0; padding: 0; }
.ss-quote p { font-size: .9rem; line-height: 1.7; color: #8EA6BC; font-style: italic; margin: 0 0 .7rem; }
.ss-quote cite { font-size: .78rem; color: var(--ss-muted); font-style: normal; }

/* --- obrazac ----------------------------------------------- */
.ss-form { max-width: 520px; }

.ss-form label {
  display: block;
  font-size: .78rem;
  color: var(--ss-body);
  margin: 0 0 .35rem;
}

.ss-form input[type=text],
.ss-form input[type=email],
.ss-form select,
.ss-form textarea {
  width: 100%;
  background: var(--ss-bg);
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  padding: .7rem .8rem;
  font-size: .95rem;
  color: var(--ss-text);
  margin: 0 0 .9rem;
  font-family: inherit;
}

.ss-form input:focus, .ss-form select:focus, .ss-form textarea:focus {
  outline: none;
  border-color: var(--ss-amber);
}

.ss-form textarea { min-height: 110px; resize: vertical; }

.ss-form button {
  width: 100%;
  background: var(--ss-amber);
  color: var(--ss-amber-ink);
  border: 0;
  border-radius: 8px;
  padding: .9rem;
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
}

.ss-form button:hover { filter: brightness(1.08); }

.ss-hp { position: absolute !important; left: -9999px !important; }

.ss-msg { border-radius: 8px; padding: .8rem 1rem; font-size: .9rem; margin: 0 0 1rem; }
.ss-msg--ok  { background: #10331F; color: #A6D9BA; }
.ss-msg--err { background: #3A1618; color: #E9AAAC; }

/* ============================================================
   Kadence kompatibilnost
   Kadence sadržaj stavlja u bijeli okvir (.content-bg) i iznad
   njega crta naslov stranice. Bez ovog bloka svijetli tekst
   završi na bijeloj podlozi i postane nevidljiv.
   ============================================================ */

.content-bg,
article.entry.content-bg,
.content-container.site-container,
.entry-content-wrap,
.site-main,
#inner-wrap,
#main {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.entry-content-wrap { padding: 0 !important; }

.content-container.site-container {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* automatski naslov stranice iznad sadržaja — ne treba nam,
   svaka stranica ima vlastiti H1 u hero bloku */
.entry-hero-container-inner,
.page-hero-section,
.entry-hero-section,
.page .entry-header .entry-title {
  display: none !important;
}

/* zaglavlje i podnožje */
#masthead, .site-header, .site-header-wrap, .site-header-row,
.site-top-header-wrap, .site-main-header-wrap,
#colophon, .site-footer, .site-footer-wrap,
.site-middle-footer-wrap, .site-bottom-footer-wrap {
  background: var(--ss-bg) !important;
  border-color: var(--ss-line-soft) !important;
}

.site-branding a, .site-title,
.header-navigation a, .site-header a { color: var(--ss-text) !important; }

.header-navigation a:hover, .site-header a:hover { color: var(--ss-amber) !important; }

.menu-toggle-icon .menu-toggle-bar,
.menu-toggle svg { color: var(--ss-text) !important; fill: var(--ss-text) !important; }

.site-footer, .site-footer a, .site-footer p { color: var(--ss-body) !important; }

/* ============================================================
   Nadjačavanje tema-margina
   Kadence-ov `.entry-content p` ima veću specifičnost od naših
   klasa, pa bi svakom odlomku dodao 2rem donje margine. Zato
   margine unutar naših blokova postavljamo izričito.
   ============================================================ */

.ss-strip__item,
.ss-card p, .ss-row p, .ss-step p, .ss-step__n,
.ss-tier p:last-child, .ss-quietnote p, .ss-note,
.ss-bar p, .ss-form p { margin-block: 0 !important; }

.ss-eyebrow     { margin: 0 0 .75rem !important; }
.ss-lead        { margin: 0 0 1.5rem !important; }
.ss-accent p    { margin: 0 0 .75rem !important; }
.ss-tier__price { margin: 0 0 .7rem !important; }
.ss-badge       { margin: 0 0 .6rem !important; }
.ss-box p       { margin: 0 0 1rem !important; }

/* --- izbornik ---------------------------------------------- */
.header-navigation .header-menu-container > ul > li > a,
.main-navigation .menu > li > a,
.header-navigation ul li a { font-size: .92rem; }

/* --- ljepljivo zaglavlje ------------------------------------ */
/* Kadence pri lijepljenju dodaje klasu item-is-fixed i vlastitu
   pozadinu, pa je ovdje vracamo na nasu tamnu. */
.site-header-row-container.item-is-fixed,
.site-header-row-container.item-is-fixed .site-header-row-container-inner,
#masthead.item-is-fixed,
.site-header-sticky-wrapper .site-header-row {
  background: var(--ss-bg) !important;
  border-bottom: 1px solid var(--ss-line-soft) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.item-is-fixed .site-branding a,
.item-is-fixed .header-navigation a { color: var(--ss-text) !important; }

.item-is-fixed .header-navigation a:hover { color: var(--ss-amber) !important; }

/* --- podnožje ----------------------------------------------- */
.site-footer,
.site-footer p,
.site-footer a,
.site-bottom-footer-inner-wrap,
.footer-html { font-size: .78rem; line-height: 1.6; }

.site-bottom-footer-wrap { padding-top: 1rem; padding-bottom: 1rem; }

.site-footer a { color: var(--ss-body) !important; text-decoration: none; }
.site-footer a:hover { color: var(--ss-amber) !important; }

/* --- lijepljiva traka -------------------------------------- */
.ss-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: #0E2136;
  border-top: 1px solid var(--ss-line-soft);
  padding: .7rem 1.75rem;
  display: flex;
  align-items: center;
  gap: .7rem;
}

@media (min-width: 782px) { .ss-bar { display: none; } }

.ss-bar__t { font-size: .78rem; color: var(--ss-text); font-weight: 500; line-height: 1.3; }
.ss-bar__s { font-size: .72rem; color: var(--ss-muted); }
.ss-bar__l { flex: 1; min-width: 0; }

.ss-bar a {
  background: var(--ss-amber);
  color: var(--ss-amber-ink);
  font-size: .85rem;
  font-weight: 500;
  padding: .6rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
}

body { padding-bottom: 64px; }

@media (min-width: 782px) { body { padding-bottom: 0; } }