/* ============================================================
   NORMSTUDIO ZNAMCNI SLOJ (brand layer)
   Nalozi se ZADNJI, za binifox vendor CSS + normstudio.css + custom.css.
   Aditiven premium sloj: tipografija, barvni zamik na mornarsko/zlato,
   prefinjeni gumbi, kartice, fokus stanja. NE spreminja postavitve teme.
   Razveljavitev: odstrani <link> v templates/partials/head.php.
   ============================================================ */

/* ---------- 1. Pisave (self-hosted, variabilni woff2) ---------- */

/* Plus Jakarta Sans, naslovna (latin) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Plus Jakarta Sans, naslovna (latin-ext, sumniki) */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Manrope, tekstovna (latin) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-var-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Manrope, tekstovna (latin-ext, sumniki) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/assets/fonts/manrope-var-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Znamcni zetoni ---------- */
/* Prepis obstojecih zetonov: nebesno modro #2FA8DF zamenja jeklena
   mornarska, ki se sklada z ze vgrajenimi sekcijami (#12324a + #c9a24b). */
:root {
  /* nova znamcna paleta */
  --nsb-navy: #12324a;          /* primarna mornarska */
  --nsb-navy-deep: #0d2536;     /* globlja mornarska (hover, glava) */
  --nsb-steel: #1d4e74;         /* jeklena modra, akcenti na svetlem */
  --nsb-gold: #c9a24b;          /* zlata, akcent */
  --nsb-gold-dark: #8f7020;     /* temna zlata, berljiva na belem */
  --nsb-gold-light: #d9b96e;    /* svetla zlata, akcent na temnem */
  --nsb-ink: #1c2b38;           /* skoraj crna z modrim odtenkom */
  --nsb-muted: #52626f;         /* umirjeno modrosivo besedilo */
  --nsb-mist: #f3f6f9;          /* hladna nevtralna podlaga */
  --nsb-line: #dfe6ec;          /* obrobe z modrim odtenkom */
  --nsb-font-display: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
  --nsb-font-body: "Manrope", "Segoe UI", Arial, sans-serif;

  /* preusmeritev podedovanih zetonov iz custom.css / normstudio.css */
  --ns-primary: var(--nsb-steel);
  --ns-primary-hover: #163d5c;
  --ns-primary-dark: var(--nsb-navy);
  --ns-primary-light: var(--nsb-gold-light);
  --ns-primary-rgb: 18, 50, 74;
  --ns-navy: var(--nsb-navy);
  --ns-muted: var(--nsb-muted);
  --ns-display: var(--nsb-font-display);
}

/* ---------- 3. Tipografija ---------- */
body,
body.norm-page {
  font-family: var(--nsb-font-body);
  color: var(--nsb-muted);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.section-title,
.slider-title,
.latest-blog-title,
.ms-title,
.ab-item-title,
.norm-footer__col-title,
.cookie-consent__title {
  font-family: var(--nsb-font-display);
  font-weight: 700;
  letter-spacing: -0.012em;
}

/* Sekcijski naslovi: iz zgoscenih verzalk v umirjen premium zapis */
.section-title {
  text-transform: none;
  letter-spacing: -0.018em;
  line-height: 1.18;
  text-wrap: balance;
}

.slider-title {
  letter-spacing: -0.02em;
  line-height: 1.12;
}

p {
  line-height: 1.72;
}

strong, b {
  color: var(--nsb-ink);
  font-weight: 700;
}

/* Nadnaslovi (eyebrow): temna zlata, sirok razmik, drobna teza */
.section-eyebrow,
.sub-title,
.ns-eyebrow,
.hub-intro span,
.ecosystem-group__head span,
.capability-block__head span,
.tech-card__eyebrow {
  font-family: var(--nsb-font-body);
  color: var(--nsb-gold-dark);
  font-weight: 700;
  letter-spacing: .16em;
}

/* ---------- 4. Gumbi ---------- */
.tp-btn {
  background: var(--nsb-navy);
  border-color: var(--nsb-navy);
  color: #fff;
  font-family: var(--nsb-font-display);
  font-weight: 600;
  font-size: 16px;
  text-transform: none;
  letter-spacing: .01em;
  border-radius: 8px;
  transition: color .25s ease, box-shadow .25s ease, transform .25s ease;
}

/* drsni hover sloj teme prebarvamo v zlato */
.tp-btn::before {
  background: var(--nsb-gold);
}

.tp-btn:hover,
.tp-btn:focus-visible {
  background: var(--nsb-navy);
  border-color: var(--nsb-gold);
  color: var(--nsb-navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(18, 50, 74, .22);
}

.squire-btn,
.service-card .squire-btn {
  background: var(--nsb-navy);
  border-color: var(--nsb-navy);
  font-family: var(--nsb-font-display);
  font-weight: 600;
}

.btn-secondary,
.ns-btn-outline {
  border-color: var(--nsb-navy);
  color: var(--nsb-navy);
  font-family: var(--nsb-font-display);
  font-weight: 600;
}

.btn-secondary:hover,
.ns-btn-outline:hover {
  background: var(--nsb-navy);
  border-color: var(--nsb-navy);
  color: #fff;
}

/* ---------- 5. Glava in navigacija ---------- */
/* Nevtralno temno glavo potegnemo v znamcno mornarsko */
.norm-binfox-header {
  background: rgba(13, 30, 44, .96);
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.norm-binfox-header.sticky {
  background: #0d1e2c;
}

.main-menu ul li a {
  font-family: var(--nsb-font-body);
  font-weight: 600;
  letter-spacing: .01em;
}

/* aktivna in hover povezava v temni glavi: svetla zlata */
.norm-binfox-header .main-menu a.active,
.norm-binfox-header .main-menu ul li:hover > a {
  color: var(--nsb-gold-light) !important;
}

/* ---------- 6. Povezave, fokus, izbor ---------- */
a {
  transition: color .18s ease;
}

a:hover {
  color: var(--nsb-gold-dark);
}

:focus-visible {
  outline: 2px solid var(--nsb-gold);
  outline-offset: 3px;
}

::selection {
  background: var(--nsb-navy);
  color: #fff;
}

/* ---------- 7. Kartice in povrsine ---------- */
.grey-bg {
  background: var(--nsb-mist);
}

.detail-card,
.norm-ecosystem-card,
.combinations-card,
.norm-price-card,
.capability-card,
.ecosystem-card,
.reference-card {
  transition: box-shadow .28s ease, border-color .28s ease, transform .28s ease;
}

.detail-card:hover,
.norm-ecosystem-card:hover,
.combinations-card:hover,
.norm-price-card:hover,
.capability-card:hover {
  box-shadow: 0 18px 44px rgba(18, 50, 74, .12);
  border-color: rgba(201, 162, 75, .45);
}

/* ikone na temnih storitvenih karticah: svetla zlata namesto temne modre */
.service-card__media i {
  color: var(--nsb-gold-light);
}

/* zlata akcentna crtica pred hero podnaslovom */
.slider-sub-title::before {
  background: var(--nsb-gold) !important;
}

/* ---------- 8. Obrazci ---------- */
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--nsb-navy);
  box-shadow: 0 0 0 3px rgba(201, 162, 75, .22);
}

.contact-form input,
.contact-form select,
.contact-form textarea,
button {
  font-family: var(--nsb-font-body);
}

/* ============================================================
   9. ODZIVNI POPRAVKI NASLOVOV
   Znamcni display sloj (Plus Jakarta Sans) je sirsi od prvotne
   zgoscene teme, zato so se veliki naslovi in imena domen
   (NORMSTUDIO.SI, Presnemavanje.si) lomili sredi zetona ali
   prelivali iz kartic. Naslovi domen jih prilagodimo sirini boksa.
   ============================================================ */

/* Hub kartica: naslov domene "NORMSTUDIO.SI" mora v ENO vrstico.
   Boks kartice je fiksne sirine (~282px) na vseh sirinah, izvorni
   41px + overflow-wrap:anywhere pa je token lomil sredi besede
   (tudi na namizju). Zmanjsamo, da se prilega povsod. Velja globalno,
   ker je napaka prisotna na vseh sirinah, a le za ta en element. */
.norm-hub-spokes__hub h3 {
  font-size: clamp(1.55rem, 3.2vw, 2.05rem);
  line-height: 1.08;
  overflow-wrap: break-word;
}

/* --- samo mobilno (do 767px): desktop teh elementov je ze v redu --- */
@media (max-width: 767px) {
  /* Splosna zascita: noben dolg zeton (domena, URL) naj ne
     povzroci vodoravnega preliva na ozkem zaslonu. */
  h1, h2, h3, h4,
  .section-title,
  .slider-title,
  .latest-blog-title {
    overflow-wrap: break-word;
    word-break: normal;
  }

  /* Ekosistemske kartice: imena domen (Presnemavanje.si, Digitalizacija.si)
     naj se prilegajo kartici namesto prelivanja. */
  .latest-blog-title {
    font-size: clamp(1.5rem, 6.4vw, 2.05rem);
    line-height: 1.14;
  }

  /* Sekcijski naslovi: rahlo umirimo, da ne dominirajo na ozkem zaslonu. */
  .section-title {
    font-size: clamp(1.65rem, 6vw, 2.1rem);
    line-height: 1.2;
  }
}