@import url("../fonts/fonts.css");

@layer reset, base, layout, components, utils;

/* ============================================================ tokens */
:root {
  color-scheme: light dark;

  --paper:      light-dark(#edeee8, #14171a);
  --paper-deep: light-dark(#e4e6dd, #101315);
  --sheet:      light-dark(#f8f9f4, #1b1f22);
  --sheet-2:    light-dark(#f1f2eb, #21262a);
  --ink:        light-dark(#171c19, #e8eae3);
  --ink-soft:   light-dark(#59615a, #a2aaa4);
  --ink-faint:  light-dark(#7d857e, #7d857e);
  --rule:       light-dark(#c9ccc0, #333a38);
  --rule-soft:  light-dark(#dcdfd4, #262c2a);
  --stamp:      light-dark(#2f3e9e, #98a6ff);
  --stamp-ink:  light-dark(#ffffff, #12151c);
  --stamp-wash: light-dark(#e6e8f6, #1d2233);

  --f-text: "Spectral", ui-serif, Georgia, "Times New Roman", serif;
  --f-code: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* fluid scale, ~1.25 → 1.31 */
  --t-xs:   clamp(0.75rem, 0.73rem + 0.10vw, 0.813rem);
  --t-sm:   clamp(0.875rem, 0.85rem + 0.12vw, 0.938rem);
  --t-base: clamp(1.0rem, 0.96rem + 0.20vw, 1.125rem);
  --t-md:   clamp(1.16rem, 1.09rem + 0.34vw, 1.42rem);
  --t-lg:   clamp(1.42rem, 1.28rem + 0.68vw, 2.0rem);
  --t-xl:   clamp(1.85rem, 1.55rem + 1.45vw, 3.0rem);
  --t-2xl:  clamp(2.35rem, 1.75rem + 2.90vw, 4.4rem);

  --sp-1: 0.375rem; --sp-2: 0.75rem;  --sp-3: 1.125rem; --sp-4: 1.75rem;
  --sp-5: 2.75rem; --sp-6: 4rem;      --sp-7: 6rem;     --sp-8: 8.5rem;

  --measure: 63ch;
  --page: 78rem;
  --r-s: 3px; --r-m: 7px; --r-l: 12px;
}

/* ============================================================ reset */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { min-height: 100svh; -webkit-font-smoothing: antialiased; }
  img, svg, video { display: block; max-width: 100%; height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  h1, h2, h3, h4 { font-weight: 600; text-wrap: balance; }
  p, li { text-wrap: pretty; }
  ul, ol { padding: 0; list-style: none; }
}

/* ============================================================ base */
@layer base {
  body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--f-text);
    font-size: var(--t-base);
    line-height: 1.68;
    font-variant-numeric: oldstyle-nums;
  }

  a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-color: var(--stamp); }

  :focus-visible { outline: 2px solid var(--stamp); outline-offset: 3px; border-radius: 2px; }

  ::selection { background: var(--stamp); color: var(--stamp-ink); }

  code, .code, .mono { white-space: nowrap; font-family: var(--f-code); font-variant-numeric: lining-nums tabular-nums; font-size: 0.86em; letter-spacing: -0.01em; }

  h1 { font-size: var(--t-2xl); line-height: 1.02; letter-spacing: -0.021em; font-weight: 600; }
  h2 { font-size: var(--t-xl); line-height: 1.1;  letter-spacing: -0.016em; }
  h3 { font-size: var(--t-md); line-height: 1.25; letter-spacing: -0.008em; }
  h4 { font-size: var(--t-base); line-height: 1.35; font-weight: 600; }

  strong { font-weight: 600; }
  em { font-style: italic; }
  hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-5) 0; }

  @view-transition { navigation: auto; }
}

/* ============================================================ layout */
@layer layout {
  .wrap { width: min(100% - 2.5rem, var(--page)); margin-inline: auto; }
  @media (min-width: 48rem) { .wrap { width: min(100% - 5rem, var(--page)); } }

  /* the register spine: a marginal rule the page hangs off, like a ledger margin */
  .spine { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
  @media (min-width: 62rem) {
    .spine { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--sp-5); }
    .spine > .spine__mark { border-right: 1px solid var(--rule); padding-right: var(--sp-3); }
  }
  .spine__mark { color: var(--ink-soft); font-size: var(--t-sm); line-height: 1.5; }
  .spine__mark b { display: block; font-weight: 600; color: var(--ink); }

  section { padding-block: var(--sp-6); }
  /* sidra ne smiju zavrsiti ispod ljepljivog zaglavlja */
  :target, section[id], [id^="glavno"] { scroll-margin-top: 5.5rem; }
  section + section { border-top: 1px solid var(--rule-soft); }
  @media (min-width: 62rem) { section { padding-block: var(--sp-7); } }

  .prose > * + * { margin-top: var(--sp-3); }
  .prose p, .prose li { max-width: var(--measure); }
  .prose h3 { margin-top: var(--sp-4); }
  .prose ul { display: grid; gap: var(--sp-2); }
  .prose ul li { padding-left: 1.35rem; position: relative; }
  .prose ul li::before {
    content: ""; position: absolute; left: 0; top: 0.72em;
    width: 0.55rem; height: 1px; background: var(--stamp);
  }
  .prose ol { display: grid; gap: var(--sp-2); counter-reset: n; }
  .prose ol li { padding-left: 2rem; position: relative; counter-increment: n; }
  .prose ol li::before {
    content: counter(n); position: absolute; left: 0; top: 0.06em;
    font-family: var(--f-code); font-size: 0.78em; color: var(--stamp);
  }

  .lede { font-size: var(--t-md); line-height: 1.5; max-width: 46ch; color: var(--ink-soft); }
  .lede strong { color: var(--ink); font-weight: 500; }
}

/* ============================================================ components */
@layer components {

  /* ---- masthead */
  .masthead {
    position: sticky; top: 0; z-index: 40;
    background: color-mix(in oklab, var(--paper) 88%, transparent);
    backdrop-filter: blur(10px) saturate(1.1);
    border-bottom: 1px solid var(--rule-soft);
  }
  .masthead__in { display: flex; align-items: center; gap: var(--sp-3); min-height: 4.1rem; }
  .brand { display: inline-flex; align-items: baseline; gap: 0.5rem; text-decoration: none; margin-right: auto; }
  .brand__name { font-size: 1.32rem; font-weight: 600; letter-spacing: -0.02em; }
  .brand__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--stamp); align-self: center; }
  .brand__tag { font-size: var(--t-xs); color: var(--ink-faint); display: none; }
  @media (min-width: 52rem) { .brand__tag { display: inline; } }

  .nav { display: none; }
  .nav ul { display: flex; align-items: center; gap: clamp(0.9rem, 1.6vw, 1.8rem); }
  .nav a { text-decoration: none; font-size: var(--t-sm); color: var(--ink-soft); padding-block: 0.35rem; border-bottom: 1px solid transparent; }
  .nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
  .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--stamp); }
  @media (min-width: 62rem) { .nav { display: block; } .nav-toggle { display: none; } }

  .nav-toggle {
    background: none; border: 1px solid var(--rule); border-radius: var(--r-s);
    padding: 0.4rem 0.7rem; font-size: var(--t-sm); cursor: pointer; color: var(--ink);
  }
  body:has(#navmenu[data-open="true"]) { overflow: hidden; }
  #navmenu[data-open="true"] {
    display: block; position: fixed; inset: 4.1rem 0 0; z-index: 39;
    background: var(--paper); padding: var(--sp-4) 1.25rem; overflow-y: auto;
  }
  #navmenu[data-open="true"] ul { display: grid; gap: 0; }
  #navmenu[data-open="true"] li { border-bottom: 1px solid var(--rule-soft); }
  #navmenu[data-open="true"] a { display: block; padding: 0.9rem 0; font-size: var(--t-md); color: var(--ink); border: 0; }

  /* ---- buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.68rem 1.25rem; border-radius: var(--r-m); border: 1px solid transparent;
    text-decoration: none; font-size: var(--t-sm); font-weight: 500; letter-spacing: 0.002em;
    transition: background-color .16s ease, color .16s ease, border-color .16s ease;
  }
  .btn--solid { background: var(--stamp); color: var(--stamp-ink); }
  .btn--solid:hover { background: color-mix(in oklab, var(--stamp) 86%, var(--ink)); }
  .btn--line { border-color: var(--rule); color: var(--ink); }
  .btn--line:hover { border-color: var(--stamp); color: var(--stamp); }
  .btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

  /* ---- hero */
  .hero { padding-block: clamp(3rem, 7vw, 6.5rem) var(--sp-6); }
  .hero__claim { max-width: 20ch; }
  .hero__claim .quiet { color: var(--ink-soft); }
  .hero__body { margin-top: var(--sp-4); display: grid; gap: var(--sp-4); }
  @media (min-width: 62rem) {
    .hero__body { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--sp-6); align-items: start; }
  }

  /* ---- register strip: the product's real artifacts, ruled like a book */
  .register {
    background: var(--sheet); border: 1px solid var(--rule);
    border-radius: var(--r-l); overflow: hidden;
  }
  .register__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
    padding: 0.85rem 1.1rem; border-bottom: 1px solid var(--rule);
    background: var(--sheet-2); font-size: var(--t-xs); color: var(--ink-soft);
  }
  .register__row { display: grid; gap: 0.2rem; padding: 1rem 1.1rem; }
  .register__row + .register__row { border-top: 1px solid var(--rule-soft); }
  .register__key { font-size: var(--t-xs); color: var(--ink-faint); }
  .register__val { font-size: var(--t-sm); }
  .register__val .code { color: var(--stamp); font-weight: 500; }
  @container (min-width: 34rem) {
    .register__row { grid-template-columns: 9.5rem minmax(0,1fr); gap: 0.35rem var(--sp-3); align-items: baseline; }
    .register__key { text-align: right; }
  }
  .register-wrap { container-type: inline-size; }

  /* ---- cards without the card kit: sheets separated by rules, not shadows */
  .sheets { display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .sheet { padding-block: var(--sp-4); border-bottom: 1px solid var(--rule); display: grid; gap: var(--sp-2); }
  @media (min-width: 55rem) {
    .sheet { grid-template-columns: 12rem minmax(0, 1fr); gap: var(--sp-4); align-items: start; }
    .sheet--wide { grid-template-columns: 16rem minmax(0, 1fr); }
  }
  .sheet__title { font-size: var(--t-md); letter-spacing: -0.008em; }
  .sheet__title a { text-decoration: none; }
  .sheet__title a:hover { text-decoration: underline; text-decoration-color: var(--stamp); }
  .sheet__body > * + * { margin-top: var(--sp-2); }
  .sheet__body p { max-width: var(--measure); }

  /* ---- module blocks */
  .modules { display: grid; gap: var(--sp-3); }
  @media (min-width: 58rem) { .modules { grid-template-columns: repeat(3, 1fr); } }
  .module {
    display: grid; gap: var(--sp-2); align-content: start;
    padding: var(--sp-4) var(--sp-3) var(--sp-4);
    background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-l);
    text-decoration: none;
  }
  .module:hover { border-color: var(--stamp); }
  .module h3 { font-size: var(--t-md); }
  .module p { font-size: var(--t-sm); color: var(--ink-soft); }
  .module__code { font-family: var(--f-code); font-size: var(--t-xs); color: var(--stamp); }
  .module__more { font-size: var(--t-sm); color: var(--stamp); }

  /* ---- org tree (the one animated moment) */
  .tree { width: 100%; max-width: 40rem; color: var(--ink-soft); }
  .tree .edge { stroke: var(--rule); stroke-width: 1; fill: none; }
  .tree .edge--implied { stroke: var(--stamp); stroke-dasharray: 3 3; }
  .tree .node { fill: var(--sheet); stroke: var(--rule); }
  .tree .node--on { fill: var(--stamp-wash); stroke: var(--stamp); }
  .tree text { font-family: var(--f-text); font-size: 11px; fill: var(--ink); }
  .tree text.sub { fill: var(--ink-faint); font-size: 9.5px; }
  @media (prefers-reduced-motion: no-preference) {
    /* pune linije se crtaju; isprekidane se pojavljuju, da im uzorak ostane vidljiv */
    .tree .edge:not(.edge--implied) { stroke-dasharray: 240; stroke-dashoffset: 240; animation: draw 1s ease-out .2s forwards; }
    .tree .edge--implied { opacity: 0; animation: fade .6s ease-out 1.15s forwards; }
    .tree .node, .tree text { opacity: 0; animation: fade .5s ease-out forwards; }
    .tree .node { animation-delay: .5s; } .tree text { animation-delay: .65s; }
    .tree .node--on, .tree text.on { animation-delay: 1.35s; }
  }
  @keyframes draw { to { stroke-dashoffset: 0; } }
  @keyframes fade { to { opacity: 1; } }

  /* ---- pull quote / statement */
  .statement {
    font-size: var(--t-lg); line-height: 1.28; letter-spacing: -0.014em;
    max-width: 26ch; border-left: 2px solid var(--stamp); padding-left: var(--sp-3);
  }

  /* ---- table */
  .table-wrap { overflow-x: auto; }
  table { border-collapse: collapse; width: 100%; font-size: var(--t-sm); }
  th, td { text-align: left; padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
  th { font-weight: 600; border-bottom-color: var(--rule); }
  td .code { color: var(--stamp); }

  /* ---- verticals */
  .verts { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
  .vert { display: grid; gap: 0.35rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-soft); }
  @media (min-width: 55rem) { .vert { grid-template-columns: 17rem minmax(0,1fr); gap: var(--sp-4); align-items: baseline; } }
  .vert h3 { font-size: var(--t-base); font-weight: 600; letter-spacing: 0; }
  .vert p { font-size: var(--t-sm); color: var(--ink-soft); max-width: 60ch; }

  /* ---- note / caution */
  .note {
    background: var(--sheet); border: 1px solid var(--rule); border-left: 2px solid var(--stamp);
    border-radius: var(--r-s); padding: var(--sp-3); font-size: var(--t-sm); color: var(--ink-soft);
  }
  .note > * + * { margin-top: var(--sp-2); }
  .note strong { color: var(--ink); }

  /* ---- status / roadmap */
  .phases { display: grid; gap: 0; border-top: 1px solid var(--rule); }
  .phase { display: grid; gap: 0.3rem; padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule-soft); }
  @media (min-width: 48rem) { .phase { grid-template-columns: 3.4rem 1fr auto; gap: var(--sp-3); align-items: baseline; } }
  .phase__no { font-family: var(--f-code); font-size: var(--t-xs); color: var(--ink-faint); }
  .phase__state { font-size: var(--t-xs); color: var(--ink-soft); }
  .phase--done .phase__no, .phase--now .phase__no { color: var(--stamp); }
  .phase--now .phase__state { color: var(--stamp); }

  /* ---- cta band */
  .cta { background: var(--paper-deep); border-top: 1px solid var(--rule); }
  .cta__in { display: grid; gap: var(--sp-3); padding-block: var(--sp-6); }
  @media (min-width: 55rem) { .cta__in { grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: var(--sp-5); } }

  /* ---- form */
  .field { display: grid; gap: 0.35rem; margin-bottom: var(--sp-3); }
  .field label { font-size: var(--t-sm); }
  .field input, .field textarea, .field select {
    background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-s);
    padding: 0.62rem 0.75rem; font-size: var(--t-sm); width: 100%;
  }
  .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--stamp); }
  .field small { font-size: var(--t-xs); color: var(--ink-faint); }
  .form { max-width: 34rem; }


  /* ---- kontakt obrazac */
  .formcard {
    background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--r-l);
    padding: var(--sp-4) var(--sp-3);
  }
  @media (min-width: 40rem) { .formcard { padding: var(--sp-4); } }
  .formcard h2 { margin-bottom: var(--sp-3); }
  .form { max-width: none; }
  .field-row { display: grid; gap: 0 var(--sp-3); }
  @media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }
  .field textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
  .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: right 1rem center, right 0.72rem center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 2rem; }
  .field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #a3352b; }
  /* mamac za robote — skriven i od preglednika i od čitača zaslona */
  .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .forma-status { margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-s); font-size: var(--t-sm); border: 1px solid var(--rule); }
  .forma-status[data-state="ok"] { border-left: 2px solid var(--stamp); background: var(--stamp-wash); }
  .forma-status[data-state="err"] { border-left: 2px solid #a3352b; background: var(--sheet-2); }

  /* ---- footer */
  .foot { border-top: 1px solid var(--rule); padding-block: var(--sp-5) var(--sp-4); font-size: var(--t-sm); }
  .foot__cols { display: grid; gap: var(--sp-4); }
  @media (min-width: 55rem) { .foot__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--sp-4); } }
  .foot h3 { font-size: var(--t-sm); font-weight: 600; letter-spacing: 0; margin-bottom: var(--sp-2); }
  .foot ul { display: grid; gap: 0.4rem; }
  .foot a { color: var(--ink-soft); text-decoration: none; }
  .foot a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--stamp); }
  .foot__base { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--rule-soft); color: var(--ink-faint); font-size: var(--t-xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
  .foot__legallinks { display: inline-flex; flex-wrap: wrap; gap: var(--sp-3); }


  /* ---- certifikati i članstva: tamna traka, jer su službeni logotipi bijeli i ne smiju se prebojati */
  .foot__certs {
    margin-top: var(--sp-4);
    background: light-dark(#171c19, #0f1214);
    color: light-dark(#edeee8, #e8eae3);
    border-radius: var(--r-l);
    padding: var(--sp-4) var(--sp-3);
    display: grid; gap: var(--sp-3); align-items: center;
  }
  @media (min-width: 58rem) {
    .foot__certs { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--sp-5); padding: var(--sp-4); }
  }
  .foot__certtext h3 { color: inherit; font-size: var(--t-base); margin-bottom: 0.4rem; }
  .foot__certtext p { font-size: var(--t-sm); line-height: 1.6; color: light-dark(#c2c7c0, #a2aaa4); max-width: 42ch; }
  .foot__certtext strong { color: inherit; font-weight: 600; }
  .foot__badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
  .foot__badges img { height: 3.4rem; width: auto; }
  .foot__badges img.badge--wide { height: 1.65rem; }
  @media (min-width: 58rem) { .foot__badges { justify-content: flex-end; } }

  /* ---- breadcrumb */
  .crumbs { font-size: var(--t-xs); color: var(--ink-faint); padding-top: var(--sp-4); }
  .crumbs a { color: var(--ink-soft); text-decoration: none; }
  .crumbs a:hover { text-decoration: underline; }
}

/* ============================================================ utils */
@layer utils {
  .skip {
    position: absolute; left: -9999px; top: 0; background: var(--stamp); color: var(--stamp-ink);
    padding: 0.6rem 1rem; z-index: 60; border-radius: 0 0 var(--r-s) 0;
  }
  .skip:focus { left: 0; }
  .stack-4 > * + * { margin-top: var(--sp-4); }
  .stack-3 > * + * { margin-top: var(--sp-3); }
  .stack-5 > * + * { margin-top: var(--sp-5); }
  .as-h3 { font-size: var(--t-md); line-height: 1.25; letter-spacing: -0.008em; }
  .muted { color: var(--ink-soft); }
  .small { font-size: var(--t-sm); }
  .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}