/* Osnova: reset, tipografija, raspored, pristupačnost. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--gold);
  font: 400 17px/1.7 var(--f-body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

@media (max-width: 767px) {
  body {
    font-size: 16px;
  }
}

img,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

h1,
h2,
h3,
p,
figure,
ul,
ol,
blockquote {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

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

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

/* Lenis */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}

/* Raspored */
.container {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.section {
  padding-block: clamp(72px, 10vw, 140px);
}

main {
  display: block;
}

.page-top {
  padding-top: calc(var(--header-h) + clamp(40px, 7vw, 96px));
}

/* Tipografija */
.lbl {
  font: 400 11px/1.4 var(--f-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}

.h1,
.h2,
.h3 {
  font-family: var(--f-display);
  font-weight: 400;
  text-transform: uppercase;
  color: var(--gold-hi);
  letter-spacing: 0.02em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: none;
}

.h1 {
  font-size: clamp(26px, 3.1vw, 46px);
  line-height: 1.28;
}

.h2 {
  font-size: clamp(21px, 2.05vw, 28px);
  line-height: 1.32;
}

.h3 {
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.txt {
  max-width: 60ch;
  text-wrap: pretty;
}

.txt + .txt {
  margin-top: 1em;
}

.eur {
  font-family: var(--f-body);
  font-style: normal;
  font-weight: 400;
  font-size: 1.05em;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: calc(var(--z-menu) + 1);
  padding: 12px 16px;
  background: var(--gold);
  color: var(--ink);
  font: 400 10px/1 var(--f-display);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transform: translateY(-160%);
  transition: transform 200ms var(--ease-out);
}

.skip-link:focus-visible {
  transform: none;
}

/* Pojavljivanje pri skrolovanju (spec §6.3). Skriveno samo kad JS radi. */
.reveal {
  transition:
    opacity 800ms var(--ease-out),
    transform 800ms var(--ease-out);
  transition-delay: calc(var(--i, 0) * 70ms);
}

html.js .reveal:not(.is-in) {
  opacity: 0;
  transform: translateY(24px);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: opacity 200ms ease;
    transition-delay: 0ms;
  }
  html.js .reveal:not(.is-in) {
    transform: none;
  }
}

/* Prelaz između stranica: kratko pretapanje (spec §6.3). Browseri bez podrške prelaze bez animacije. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 250ms;
  animation-timing-function: ease;
}

.site-header {
  view-transition-name: site-header;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}