/* =========================================================================
   Treasureforce Site Kit — base
   Body, headings, links, selection/focus, .tf-prose and typography utilities.
   Values are identical to the Elementor kit (bg #0c0c0e, Inter 400 15/1.55,
   headings 500 / -0.015em, links accent) — we do not fight the kit.

   Elementor note ("optimized markup" ON): CSS classes sit on the widget
   wrapper (.elementor-widget), so every typography helper targets both
     .tf-x                                         (raw HTML / templates)
     .elementor-widget-heading.tf-x .elementor-heading-title
     .elementor-widget-text-editor.tf-x (+ its <p>)
   SR: Osnovni stilovi i tipografske klase.
   ========================================================================= */

/* ---- Document ---------------------------------------------------------- */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}
[id] { scroll-margin-top: 105px; }

body {
  margin: 0;
  background: var(--tf-bg);
  color: var(--tf-text);
  font-family: var(--tf-font);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

*, *::before, *::after { box-sizing: border-box; }

img, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tf-font);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.12;
}

a {
  color: var(--tf-accent);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color .25s;
}
a:hover { color: var(--tf-accent-300); }

::selection {
  background: rgba(212, 167, 44, .3);
  color: var(--tf-text);
}

:focus:not(:focus-visible) { outline: none; }
:focus-visible {
  outline: 2px solid var(--tf-accent);
  outline-offset: 2px;
}

/* Paragraph spacing inside helper-classed Text Editor widgets */
.elementor-widget-text-editor[class*="tf-"] p:last-child { margin-bottom: 0; }

/* ---- Layout helpers ---------------------------------------------------- */
/* tf-container: boxed 1400px wrapper used by the PHP templates */
.tf-container {
  width: 100%;
  max-width: var(--tf-container);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--tf-gutter);
  padding-right: var(--tf-gutter);
}

/* tf-sticky: sticky column (desktop), static below 900px */
.tf-sticky,
.elementor-element.tf-sticky {
  position: sticky;
  --position: sticky;
  top: var(--tf-sticky-top);
  align-self: flex-start;
}
.admin-bar .tf-sticky { top: calc(var(--tf-sticky-top) + 32px); }

/* ---- Dividers ---------------------------------------------------------- */
.tf-divider-top { border-top: 1px solid var(--tf-divider); }
.tf-divider-bottom { border-bottom: 1px solid var(--tf-divider); }
.elementor-element.tf-divider-top { border-top: 1px solid var(--tf-divider); }
.elementor-element.tf-divider-bottom { border-bottom: 1px solid var(--tf-divider); }

/* tf-hr: rule fading out at both ends (raw <hr> or Elementor Divider widget) */
hr.tf-hr,
.tf-hr:not(.elementor-widget) {
  height: 1px;
  border: 0;
  margin: 16px 0;
  background: linear-gradient(to right, transparent, var(--tf-divider) 48px, var(--tf-divider) calc(100% - 48px), transparent);
}
.elementor-widget-divider.tf-hr .elementor-divider-separator {
  border: 0;
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, var(--tf-divider) 48px, var(--tf-divider) calc(100% - 48px), transparent);
}

/* ---- Kicker ------------------------------------------------------------ */
.tf-kicker:not(.elementor-widget),
.elementor-widget-heading.tf-kicker .elementor-heading-title,
.elementor-widget-text-editor.tf-kicker p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  font-family: var(--tf-font);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tf-accent-300);
}
.elementor-widget-heading.tf-kicker .elementor-heading-title,
.elementor-widget-text-editor.tf-kicker p { margin: 0; }
.elementor-widget-text-editor.tf-kicker { font-size: 12px; color: var(--tf-accent-300); }

.tf-kicker:not(.elementor-widget)::before,
.elementor-widget-heading.tf-kicker .elementor-heading-title::before,
.elementor-widget-text-editor.tf-kicker p::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  background: var(--tf-accent);
}
.tf-kicker.tf-kicker--noline::before,
.tf-kicker--noline .elementor-heading-title::before,
.tf-kicker--noline p::before { display: none; }

/* ---- Headings ---------------------------------------------------------- */
.tf-h-display, .elementor-widget-heading.tf-h-display .elementor-heading-title,
.tf-h-xl, .elementor-widget-heading.tf-h-xl .elementor-heading-title,
.tf-h-lg, .elementor-widget-heading.tf-h-lg .elementor-heading-title,
.tf-h-md, .elementor-widget-heading.tf-h-md .elementor-heading-title,
.tf-h-sm, .elementor-widget-heading.tf-h-sm .elementor-heading-title,
.tf-h-card, .elementor-widget-heading.tf-h-card .elementor-heading-title {
  font-family: var(--tf-font);
  font-weight: 500;
  color: var(--tf-text);
}
h1.tf-h-display, h2.tf-h-display, h1.tf-h-xl, h2.tf-h-xl, h2.tf-h-lg, h2.tf-h-md, h3.tf-h-md,
h2.tf-h-sm, h3.tf-h-sm, h3.tf-h-card { margin: 0; }

.tf-h-display, .elementor-widget-heading.tf-h-display .elementor-heading-title {
  font-size: clamp(52px, 8vw, 124px);
  line-height: .92;
  letter-spacing: -.04em;
}
.tf-h-xl, .elementor-widget-heading.tf-h-xl .elementor-heading-title {
  font-size: clamp(32px, 4.2vw, 60px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.tf-h-lg, .elementor-widget-heading.tf-h-lg .elementor-heading-title {
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.02;
  letter-spacing: -.03em;
}
.tf-h-md, .elementor-widget-heading.tf-h-md .elementor-heading-title {
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.05;
  letter-spacing: -.025em;
}
.tf-h-sm, .elementor-widget-heading.tf-h-sm .elementor-heading-title {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.tf-h-card, .elementor-widget-heading.tf-h-card .elementor-heading-title {
  font-size: 30px;
  line-height: 1.12;
  letter-spacing: -.02em;
}

/* ---- Body copy --------------------------------------------------------- */
.tf-lead, .elementor-widget.tf-lead :is(.elementor-heading-title, p, li) {
  font-size: 19px;
  line-height: 1.55;
  color: var(--tf-n400);
}
.tf-body-lg, .elementor-widget.tf-body-lg :is(.elementor-heading-title, p, li) {
  font-size: 17px;
  line-height: 1.55;
  color: var(--tf-n400);
}
.tf-body, .elementor-widget.tf-body :is(.elementor-heading-title, p, li) {
  font-size: 15px;
  line-height: 1.55;
  color: var(--tf-n400);
}
.tf-muted, .elementor-widget.tf-muted :is(.elementor-heading-title, p, li) {
  font-size: 13px;
  line-height: 1.55;
  color: var(--tf-n500);
}
.tf-caption, .elementor-widget.tf-caption :is(.elementor-heading-title, p, li) {
  font-size: 11px;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tf-n600);
}
.tf-accent, .elementor-widget.tf-accent :is(.elementor-heading-title, p, li) { color: var(--tf-accent); }
.tf-accent-300, .elementor-widget.tf-accent-300 :is(.elementor-heading-title, p, li) { color: var(--tf-accent-300); }
/* inline spans inside headings, e.g. <span class="tf-accent">markets.</span> */
.elementor-heading-title .tf-accent { color: var(--tf-accent); }
.elementor-heading-title .tf-accent-300 { color: var(--tf-accent-300); }

/* ---- Max-width helpers ------------------------------------------------- */
.tf-max-22ch, .elementor-widget.tf-max-22ch :is(.elementor-heading-title, p) { max-width: 22ch; }
.tf-max-34ch, .elementor-widget.tf-max-34ch :is(.elementor-heading-title, p) { max-width: 34ch; }
.tf-max-36ch, .elementor-widget.tf-max-36ch :is(.elementor-heading-title, p) { max-width: 36ch; }
.tf-max-40ch, .elementor-widget.tf-max-40ch :is(.elementor-heading-title, p) { max-width: 40ch; }
.tf-max-44ch, .elementor-widget.tf-max-44ch :is(.elementor-heading-title, p) { max-width: 44ch; }
.tf-max-48ch, .elementor-widget.tf-max-48ch :is(.elementor-heading-title, p) { max-width: 48ch; }
.tf-max-60ch, .elementor-widget.tf-max-60ch :is(.elementor-heading-title, p) { max-width: 60ch; }
.tf-max-70ch, .elementor-widget.tf-max-70ch :is(.elementor-heading-title, p) { max-width: 70ch; }
.elementor-widget[class*="tf-max-"] { max-width: none; }
/* centred blocks: add tf-mx-auto to centre the measure */
.tf-mx-auto, .elementor-widget.tf-mx-auto :is(.elementor-heading-title, p) { margin-left: auto; margin-right: auto; }

/* ---- Small helpers ----------------------------------------------------- */
/* centred text (widget or raw element); tf-kicker--center centres the kicker line + label */
.tf-center, .elementor-widget.tf-center { text-align: center; }
.elementor-widget.tf-kicker--center { text-align: center; }
.tf-kicker--center :is(p, .elementor-heading-title), .tf-kicker.tf-kicker--center:not(.elementor-widget) { justify-content: center; }
/* text colour (e.g. a value next to muted labels) */
.tf-text, .elementor-widget.tf-text :is(.elementor-heading-title, p, li) { color: var(--tf-text); }
/* card title: Inter 500 17px (small cards with an image on top) */
.tf-card__title, .elementor-widget-heading.tf-card__title .elementor-heading-title {
  margin: 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--tf-text);
}
/* underlined text link ("All articles"): 14px, 1px gold rule */
a.tf-link-underline, .tf-link-underline a {
  font-size: 14px;
  color: var(--tf-text);
  text-decoration: none;
  border-bottom: 1px solid var(--tf-accent);
  padding-bottom: 2px;
  transition: color .2s;
}
a.tf-link-underline:hover, .tf-link-underline a:hover { color: var(--tf-accent); }

/* ---- Prose (blog post body) ------------------------------------------- */
.tf-prose {
  max-width: 70ch;
  font-size: 17px;
  line-height: 1.7;
  color: var(--tf-n300);
}
.tf-prose > :first-child { margin-top: 0; }
.tf-prose > :last-child { margin-bottom: 0; }
.tf-prose p { margin: 0 0 20px; }
.tf-prose h2, .tf-prose h3, .tf-prose h4 {
  color: var(--tf-text);
  font-weight: 500;
  margin: 40px 0 14px;
}
.tf-prose h2 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; }
.tf-prose h3 { font-size: 26px; letter-spacing: -.02em; line-height: 1.2; }
.tf-prose h4 { font-size: 20px; letter-spacing: -.015em; line-height: 1.25; }
.tf-prose a {
  color: var(--tf-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tf-prose a:hover { color: var(--tf-accent-300); }
.tf-prose strong { color: var(--tf-text); font-weight: 600; }
.tf-prose ul, .tf-prose ol { margin: 0 0 22px; padding-left: 1.3em; }
.tf-prose li { margin: 0 0 8px; padding-left: .2em; }
.tf-prose ul li::marker { color: var(--tf-accent); }
.tf-prose ol li::marker { color: var(--tf-accent); font-variant-numeric: tabular-nums; }
.tf-prose blockquote,
.tf-prose .wp-block-quote {
  margin: 28px 0;
  padding: 8px 0 8px 24px;
  border-left: 2px solid var(--tf-accent);
  font-size: 24px;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--tf-text);
}
.tf-prose blockquote p { margin: 0; }
.tf-prose blockquote cite { display: block; margin-top: 10px; font-size: 13px; font-style: normal; color: var(--tf-n500); letter-spacing: 0; }
.tf-prose figure { margin: 28px 0; }
.tf-prose img { border-radius: var(--tf-radius-md); }
.tf-prose figcaption { margin-top: 8px; font-size: 12px; color: var(--tf-n500); }
.tf-prose hr { height: 1px; border: 0; margin: 36px 0; background: linear-gradient(to right, transparent, var(--tf-divider) 48px, var(--tf-divider) calc(100% - 48px), transparent); }
.tf-prose code { font-size: .9em; padding: 2px 6px; border-radius: var(--tf-radius-sm); background: var(--tf-surface); }
.tf-prose table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 24px; }
.tf-prose th, .tf-prose td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--tf-divider); }
.tf-prose th { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tf-n500); font-weight: 500; }

/* ---- Screen-reader text ----------------------------------------------- */
.tf-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width: 900px) {
  .tf-sticky,
  .elementor-element.tf-sticky { position: static; --position: static; }
}
@media (max-width: 600px) {
  .tf-lead, .elementor-widget.tf-lead :is(.elementor-heading-title, p, li) { font-size: 17px; }
  .tf-prose { font-size: 16px; }
  .tf-prose blockquote { font-size: 21px; padding-left: 18px; }
}