/* ===== Reset & tokens ===== */
*,*::before,*::after{
  box-sizing:border-box;
}

/* Mobile tap highlight off (prevents blue flash on tap) */
*{
  -webkit-tap-highlight-color: transparent;
}

a, button{
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

html,body{
  margin:0;
  padding:0;
  min-height: calc(var(--vh) * 100);
  height: calc(var(--vh) * 100);
  overscroll-behavior-y: none;
  touch-action: pan-y;
}

:root{
  --bg:#1a1a1a;
  --fg:#0b0c10;
  --nav-text:#1a1917;
  --nav-text-hover:#111111;
  --nav-shadow:0 8px 26px rgba(0,0,0,.20);
  /* global scrollbar */
  --scrollbar-thumb: rgba(255,255,255,.44);
  --scrollbar-thumb-hover: rgba(255,255,255,.75);
  --scrollbar-track: #3a3a3abb;
  --scrollbar-width: 7px;
  
  --nav-glass: rgba(255,255,255,.15);
  --nav-border: rgba(255,255,255,.18);
  --backdrop-mobile-blur: 8px;
  --vh: 1vh;
  /* Motion tokens – globalno za cijeli site */
  --motion-fast: 140ms;
  --motion-normal: 240ms;
  --motion-slow: 360ms;
  --ease-soft: cubic-bezier(.16, .84, .44, 1);
  --ease-smooth: cubic-bezier(.33, 1, .68, 1);
}

/* ===== Page background (image + gradient) ===== */
body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: var(--bg-h, calc(100vh + 50px));
  z-index: 0;
  pointer-events: none;

  background:
    var(--page-bg-desktop) center / cover no-repeat,
    radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
  background-color: transparent;

  transform: translateZ(0);
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fallback boja na html, a body mora biti proziran */
html {
  background: var(--bg);
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  background: transparent;
  color: var(--fg);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial;
  opacity: 0;
  transition: opacity var(--motion-normal, 240ms) var(--ease-soft, cubic-bezier(.16, .84, .44, 1));
}

/* Kada je stranica aktivna, dopuštamo da se pojavi */
body.is-active {
  opacity: 1;
}

.wrap{
  max-width:1200px;
  margin:0 auto;
  padding:20px;
}

/* ===== Header / Main navigation ===== */
.nav{
  position:relative;
  z-index:20;
  display:flex;
  justify-content:center;
  align-items:center;
  margin:10px 0 4px;
}

.nav .menu{
  display:flex;
  align-items:center;
  gap:clamp(14px,2.6vw,28px);
  padding:clamp(6px,1vw,10px) clamp(12px,2.4vw,22px);
  border-radius:999px;
  background:var(--nav-glass);
  backdrop-filter:blur(10px) saturate(1.2);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid var(--nav-border);
  box-shadow:var(--nav-shadow);
}

.nav .menu a{
  text-transform:uppercase;
  font-size: 1.1rem;
  letter-spacing:.12em;
  font-weight:700;
  font-family:"Garamond","Times New Roman",serif;
  text-decoration:none;
  color:var(--nav-text);
  opacity:.95;
  transition:
    color var(--motion-fast) var(--ease-soft),
    opacity var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-soft);
  text-shadow:0 1px 0 rgba(255,255,255,.25);
}

.nav .menu a:hover{
  color:var(--nav-text-hover);
  opacity:1;
  transform:translateY(-1px);
}

.nav .menu a[aria-current="page"]{
  text-decoration:underline;
  text-underline-offset:6px;
}

/* ===== Screen reader only utility ===== */
.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;
}

/* ===== About / Mission section (index) ===== */
.about{
  margin:30px 0 60px;
}

.about-title{
  margin:6px 0 4px;
  font-family:Garamond,"Times New Roman",serif;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-weight:900;
  color:#383731;
  text-align:center;
}

.about-lead{
  color:#3a392f;
  text-align:center;
  margin:8px auto 12px;
  max-width:720px;
  line-height:1.6;
}

.about-quote{
  background:var(--nav-glass);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  border:1px solid var(--nav-border);
  border-left:3px solid rgba(255,215,0,.35);
  border-radius:12px;
  box-shadow:var(--nav-shadow);
  padding:12px 18px;
  max-width:700px;
  margin:24px auto 0;
  text-align:center;
  font-style:italic;
}

/* About quote – subtle scroll fade-in */
.about-quote {
  transition: opacity 0.7s ease, transform 0.7s ease;
  font-size: 1.1rem;
}

/* početno stanje – dok nije "u kadru" */
.about-quote.animate-on-scroll {
  opacity: 0;
  transform: translateY(6px);
}

/* kad postane vidljiva */
.about-quote.animate-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Global glass scrollbar (window scroll) ===== */
/* Firefox – html/body */
html,
body {
  scrollbar-width: auto;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Global smooth scroll za cijelu stranicu */
html {
  scroll-behavior: smooth;
}

/* WebKit (Chrome, Edge, Safari desktop) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: var(--scrollbar-width);
  height: var(--scrollbar-width);
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

/* Global image rendering */
img {
  max-width: 100%;
  height: auto;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* ===== Accessible focus outline (global) ===== */
:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,209,60,0.25), 0 10px 30px rgba(0,0,0,0.12);
  border-radius: 10px;
}

/* ===== Reduced motion: respect user preferences ===== */
@media (prefers-reduced-motion: reduce){
  *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===== Mobile backdrop-filter & scrollbar tweaks ===== */
@media (max-width:900px){
  .nav .menu {
    -webkit-backdrop-filter: blur(var(--backdrop-mobile-blur));
    backdrop-filter: blur(var(--backdrop-mobile-blur));
  }
}

@media (max-width:900px){
  html::-webkit-scrollbar,
  body::-webkit-scrollbar {
    width:6px;
    height:6px;
  }

  html::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.22);
    border-radius: 999px;
  }
}


/* =========================================================
                            MEDIA
   ========================================================= */

/* 1) Very small phones (≤ 399px) */
@media (max-width: 399px) {
  /* Canvas & tipografija */
  .wrap {
    padding: 14px;
  }

  /* Navigacija */
  .nav {
    margin: 0px 0 30px;
  }

  .nav .menu {
    gap: 8px;
    padding: 7px 14px;
  }

  .nav .menu a {
    font-size: 0.9rem;
    letter-spacing: .10em;
  }

  .nav-left,
  .nav-right {
    display: none !important;
  }

  /* Background za mobitel – koristi page-specific varijable */
  body::before {
    background:
      var(--page-bg-mobile) center / cover no-repeat,
      radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
    background-color: #fff;
  }

  /* About blok */
  .about-quote {
    font-size: 0.9rem;
  }

  .about .about-lead,
  .about .about-quote {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 2) Phones (400px – 767px) */
@media (min-width: 400px) and (max-width: 767px) {
  /* Canvas & tipografija */
  .wrap {
    padding: 14px;
  }

  /* Navigacija */
  .nav {
    margin: 10px 0 10px;
    margin-bottom: 33px !important;
  }

  .nav .menu {
    gap: 11px;
    padding: 7px 21px;
  }

  .nav .menu a {
    font-size: 1.0rem;
    letter-spacing: .10em;
  }

  .nav-left,
  .nav-right {
    display: none !important;
  }

  /* About blok (index) */
  .about {
    margin: 20px 0 40px;
  }

  .about-quote {
    padding: 10px 14px;
    margin-top: 16px;
  }

  /* Background za mobitel – koristi page-specific varijable */
  body::before {
    background:
      var(--page-bg-mobile) center / cover no-repeat,
      radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
    background-color: #fff;
  }

  .about .about-lead,
  .about .about-quote {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 3) Tablets (768px – 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  html,
  body {
    overflow-y: auto !important;
  }

  .wrap {
    padding: 18px;
  }

  /* Navigacija */
  .nav {
    margin: 20px 0 20px;
    margin-bottom: 40px;
  }

  .nav .menu {
    gap: clamp(12px, 2.6vw, 18px);
    padding: 12px 20px;
  }

  .nav .menu a {
    font-size: 1.3rem;
    letter-spacing: .10em;
  }

  .nav-left,
  .nav-right {
    display: none !important;
  }

  /* Background za tablet – koristi page-specific varijable */
  body::before {
    background:
      var(--page-bg-mobile) center / cover no-repeat,
      radial-gradient(1200px 600px at 50% 0%, rgba(255,205,90,.14), transparent 60%);
    background-color: #fff;
  }

  /* About bloc – malo veći tekst na tabletima */
  .about-quote {
    font-size: 1.5rem;
  }

  .about .about-lead,
  .about .about-quote {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================================= */