/* =====================================================
   Shared site chrome: the header and the button system.

   These rules were duplicated inline in all 9 pages, which is how they drifted
   apart (the buttons on 8 pages were still an older reading of the Figma
   design). They now live here once, taken verbatim from index.html (Pocetna).

   Loaded BEFORE each page's inline <style>, so page-specific overrides —
   .hero-h-actions .btn-blue, .s-cta .btn-white and friends — still win.
   ===================================================== */

/* ===== Header ===== */
.header { position: absolute; left: 16px; right: 16px; top: 16px; height: 108px; z-index: 20; }
.header-bg { position: absolute; inset: 0; background: rgba(255,255,255,0.8); border-radius: 22px; }
.header-inner { position: relative; max-width: 1480px; height: 100%; margin: 0 auto; }
.header-logo { position: absolute; left: 88px; top: 32px; width: 128.408px; height: 43.628px; }
.header-logo img { width: 100%; height: 100%; }
.header-logo-text { position: absolute; left: 231px; top: 39px; font-family: 'Roboto', sans-serif; font-weight: 600; font-size: 9.987px; line-height: 10px; color: #6e7a8c; white-space: nowrap; }
.main-nav { display: contents; }
.nav-link { position: absolute; top: 43px; font-weight: 500; font-size: 18px; line-height: normal; color: #6e7a8c; white-space: nowrap; }
.nav-onama { left: 428px; }
.nav-clanovi { left: 534px; }
.nav-sponzori { left: 638px; }
.lang { position: absolute; right: 352px; top: 47px; width: 70px; height: 19px; }
.lang-globe { position: absolute; left: 0; top: 0; width: 18px; height: 18px; }
.lang-label { position: absolute; left: 28px; top: 1px; font-weight: 500; font-size: 14px; color: #6e7a8c; white-space: nowrap; }
.lang-chevron { position: absolute; left: 56px; top: 6px; width: 12px; height: 6px; }

/* ===== Buttons ===== */
/* The 2px border is a top-to-bottom gradient (white -> #cbceff); that lit-top/shaded-bottom
   lip is what gives the buttons their raised look — there is no drop shadow in the design. */
.btn-blue { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; padding: var(--btn-py, 16px) var(--btn-px, 32px); border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(to bottom, #006aff, #0057d1) padding-box, linear-gradient(to bottom, #ffffff, #cbceff) border-box; }
.btn-blue p { font-weight: 500; font-size: 18px; line-height: 1.6; color: #dbeaff; white-space: nowrap; }
.btn-white { position: relative; z-index: 0; display: inline-flex; align-items: center; justify-content: center; padding: 16px 32px; border: 2px solid transparent; border-radius: 20px;
  background: linear-gradient(#fdfdff, #fdfdff) padding-box, linear-gradient(to bottom, #ffffff, #cbceff) border-box; }
.btn-white p { font-weight: 500; font-size: 18px; line-height: 1.6; color: #6e7a8c; white-space: nowrap; }
/* Order matters from here down: the Kontakt button carries both .btn-blue and
   .header-kontakt, and .header-kontakt has to land after .btn-blue to win the
   `position` declaration at equal specificity. Keep this sequence intact. */
.header-kontakt { position: absolute; right: 181px; top: 26px; }
.header-burger { position: absolute; right: 88px; top: 28px; width: 56px; height: 56px; border: none; background: none; cursor: pointer; padding: 0; }
.header-burger .burger-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.header-burger .burger-lines { position: absolute; left: 20px; top: 22px; width: 17px; height: 13px; }
.nav-link { transition: color 0.2s ease; }
.nav-link:hover { color: #006aff; }

/* ===== Hover states (from Figma prototype variants) ===== */
/* Hover = Figma "Variant2": fill gradient flips, border goes fully white,
   and the two sponsor buttons reveal an arrow (310px -> 332px). No shadow, no scaling. */
.btn-blue::after { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(to bottom, #0057d1, #006aff); opacity: 0; transition: opacity 0.25s ease; }
.btn-blue:hover::after { opacity: 1; }
.btn-blue p { position: relative; z-index: 1; }
.btn-blue:hover { background: linear-gradient(to bottom, #0057d1, #006aff) padding-box, linear-gradient(to bottom, #ffffff, #ffffff) border-box; }
.btn-white p { transition: color 0.25s ease; }
.btn-white:hover { background: linear-gradient(#ffffff, #ffffff) padding-box, linear-gradient(to bottom, #ffffff, #ffffff) border-box; }
.btn-white:hover p { color: #9eaabd; }
.btn-arrow { display: inline-block; max-width: 0; margin-left: 0; opacity: 0; overflow: hidden; vertical-align: bottom; transition: max-width 0.25s ease, margin-left 0.25s ease, opacity 0.25s ease; }
.btn-blue:hover .btn-arrow { max-width: 1.4em; margin-left: 0.3em; opacity: 1; }

@media (max-width: 1279px) {
  .header { height: 88px; }
  .header-inner { max-width: none; display: flex; align-items: center; padding: 0 24px; }
  .header-logo { position: relative; left: auto; top: auto; width: 110px; height: 37.4px; flex-shrink: 0; }
  .header-logo-text { display: none; }
  .main-nav { display: flex; gap: 32px; margin-left: 40px; position: relative; }
  .nav-link { position: static; font-size: 16px; }
  .lang { position: relative; right: auto; top: auto; width: auto; height: auto; display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .lang-globe, .lang-label, .lang-chevron { position: static; }
  .header-kontakt { position: relative; right: auto; top: auto; margin-left: 20px; --btn-py: 12px; --btn-px: 24px; }
  .header-kontakt p { font-size: 16px; }
  .header-burger { position: relative; right: auto; top: auto; margin-left: 16px; width: 48px; height: 48px; flex-shrink: 0; }
  .header-burger .burger-lines { left: 15.5px; top: 17.5px; }
}

@media (max-width: 768px) {
  .header { left: 12px; right: 12px; top: 12px; height: 64px; }
  .header-inner { padding: 0 14px; }
  .header-bg { border-radius: 16px; }
  .header-logo { width: 96px; height: 32.6px; }
  .main-nav { display: none; }
  .lang { display: none; }
  .header-kontakt { margin-left: auto; --btn-py: 10px; --btn-px: 18px; border-radius: 14px; }
  .header-kontakt::after { border-radius: 12px; }
  .header-kontakt p { font-size: 14px; }
  .header-burger { width: 44px; height: 44px; margin-left: 10px; }
  .header-burger .burger-lines { left: 13.5px; top: 15.5px; }
  .btn-white { padding: 14px 28px; }
}