/* ============================================================
   HERO SECTION
   ============================================================ */

:root {
  --hero-text:           #ffffff;
  --hero-btn-solid-bg:   #ffffff;
  --hero-btn-solid-text: #000000;
}

/* ── WRAPPER ── */
.hero {
  position: relative;
  width: 100%;
  width: 100%;
  height: 950px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #111111;
  background-image: url('/images/hero-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

/* ── NAV floats over hero ── */
.hero .site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
}

/* ── CONTENT AREA — 290px from top, aligned to left edge of 1420px ── */
.hero__content {
  position: absolute;
  top: 290px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: var(--max-content);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

/* ── BH1 ── */
.bh1 {
  font-family: var(--font-mont);
  font-size: calc(18.45px * 0.94);
  font-weight: var(--fw-regular);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  color: var(--hero-text);
  margin: 0;
  padding: 0;
  text-align: center;
}

/* ── HERO HEADING — 40px below bh1 ── */
.hero__heading {
  margin: 40px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: var(--fw-regular);
  text-align: center;
}

.hero__heading-line {
  display: block;
  line-height: 1.05;
}

.hero__heading-line .h1-mont {
  font-family: var(--font-mont);
  font-size: var(--fs-h1-mont);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-default);
  color: var(--hero-text);
  vertical-align: baseline;
}

.hero__heading-line .h1-dutch {
  font-family: var(--font-dutch);
  font-size: var(--fs-h1-dutch);
  font-weight: 400;
  font-style: italic;
  letter-spacing: var(--ls-default);
  color: var(--hero-text);
  vertical-align: baseline;
}

/* ── PARAGRAPH — 40px below heading ── */
.hero__sub {
  margin: 40px 0 0 0;
  font-family: var(--font-mont);
  font-size: var(--fs-p);
  font-weight: var(--fw-regular);
  line-height: var(--lh-p);
  letter-spacing: var(--ls-default);
  color: var(--hero-text);
  text-align: center;
}

/* ── BUTTONS — 65px below paragraph ── */
.hero__buttons {
  margin-top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
}


/* ══════════════════════════════════════════════════
   SOLID BUTTON — "Besplatne konsultacije"
   Devolfs "Book a free call" style:
   On hover, text slides UP and an identical copy
   slides in from the bottom. Pure visual swap, no
   width change, no extra elements outside button.
   ══════════════════════════════════════════════════ */

.hero__btn--solid {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mont);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  color: #000000;
  background: #ffffff;
  border: none;
  border-radius: 5px;
  padding: 12px 25px;
  white-space: nowrap;
  cursor: pointer;
  overflow: hidden;
  line-height: 1.2;
}

/* Text track — viewport showing only one label at a time.
   The track is exactly 1em tall (one line). Inside it, two
   identical labels are stacked. On hover, the track translates
   up by 1em so the second label lands where the first was.
*/
.hero__btn--solid .btn-track {
  position: relative;
  display: block;
  height: 1.2em;
  overflow: hidden;
}

.hero__btn--solid .btn-track__inner {
  display: block;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0.2, 1);
}

.hero__btn--solid .btn-track__inner > span {
  display: block;
  height: 1.2em;
  line-height: 1.2;
}

.hero__btn--solid:hover .btn-track__inner {
  transform: translateY(-1.2em);
}


/* ══════════════════════════════════════════════════
   GHOST BUTTON — "Pogledaj usluge"
   Plain white text, no background, no border.
   Hover: underline draws left→right, same as nav links.
   ══════════════════════════════════════════════════ */

.hero__btn--ghost {
  display: inline-flex;
  align-items: center;
  padding: 12px 25px;
  background: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}

.ghost-text {
  position: relative;
  font-family: var(--font-mont);
  font-size: var(--fs-nav);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-default);
  color: #ffffff;
}

.ghost-text::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.3s ease;
}

.hero__btn--ghost:hover .ghost-text::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ── HERO FADE UP — all content elements ── */
.bh1,
.hero__heading,
.hero__sub,
.hero__buttons {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeUp 1.6s ease-out forwards;
}

.hero__heading { animation-delay: 0.15s; }
.hero__sub     { animation-delay: 0.3s; }
.hero__buttons { animation-delay: 0.45s; }

@keyframes heroFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}