/* =============================================
   phpStudio - ArtGrbic  |  www.artgrbic.net
   /assets/css/style.css — olive + water (CLEAN FINAL)
   ============================================= */

/* ===== Variables ===== */
:root{
  --olive:#407345;         /* maslinasto zelena (primarna) */
  --olive-600:#5f7f1f;     /* tamnija */
  --olive-700:#204c24;     /* najtamnija (footer, ikone) */
  --accent:#1ea7a3;        /* vodeni akcenat */
  --ink:#0f172a;
  --paper:#ffffff;
  --wash:#f6fafb;

  /* Container */
  --container-max: 1320px;  /* željena širina */
  --container-pad: 16px;
}

/* ===== Global / Layout ===== */
*{ box-sizing:border-box; }
html, body { height:100%; }
body{
  margin:0; padding:0;
  display:flex; flex-direction:column; min-height:100vh;
  font-family:'Open Sans', sans-serif;
  color:var(--ink); background:var(--wash);
}
img, video{ max-width:100%; height:auto; display:block; }

/* Jedino pravilo za container */
.container{
  width:100%;
  max-width: var(--container-max);
  margin-left:auto;
  margin-right:auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
.container > .container{ max-width:100%; padding-left:0; padding-right:0; }
@media (min-width:1600px){ .container{ max-width:90vw; } }
@media (max-width:900px){
  .container{ max-width:none; padding-left:16px; padding-right:16px; }
}

/* ===== Header (GLASSY + čitljivost) ===== */
.site-header,
/* ===== Header (glassy tamniji) ===== */
.site-header.glassy {
  position: sticky;
  top: 0;
  z-index: 1000;

  /* tamnija staklena pozadina */
  background: rgba(0, 0, 0, 0.55);  /* crna sa 55% providnosti */
  backdrop-filter: saturate(1.05) blur(12px);
  -webkit-backdrop-filter: saturate(1.05) blur(12px);

  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:64px; }

/* LOGO kao slika (ostavljen mali po tvojoj meri) */
.logo{ display:flex; align-items:center; text-decoration:none; }
.logo img{ width:50px; height:auto; display:block; }
@media (max-width:900px){ .logo img{ width:50px; } }

/* NAV linkovi: svetli, tanki, sa blagim shadow-om radi čitljivosti */
.main-nav{ display:flex; gap:18px; align-items:center; }
.main-nav a{
  color:rgba(255,255,255,0.92);
  text-decoration:none;
  font-weight:300;
  padding:8px 10px; border-radius:10px;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.main-nav a:hover{ background:rgba(255,255,255,0.10); }

/* CTA dugme (ghost – koristi se i globalno) */
.btn-ghost{
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.65);
  border-radius:6px;
  color:#fff; text-decoration:none;
  background:rgba(255,255,255,0.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  font-weight:400;
  transition:background .2s, border-color .2s, transform .1s;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.btn-ghost:hover{ background:rgba(255,255,255,0.2); border-color:#fff; }
.btn-ghost.strong{ font-weight:600; }

/* Mobilni meni */
.nav-toggle{ display:none; background:none; border:0; font-size:24px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.35); }
@media (max-width:900px){
  .main-nav{
    position:fixed; inset:64px 0 auto 0;
    display:flex; flex-direction:column; gap:10px;
    background:rgba(0,0,0,0.55);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(255,255,255,0.12);
    padding:16px;
    transform:translateY(-120%); transition:.25s;
  }
  body.nav-open .main-nav{ transform:translateY(0); }
  .nav-toggle{ display:block; }
}

/* ===== Hero ===== */
.hero{
  padding:72px 0;
  background:
    radial-gradient(1200px 400px at 10% 0%, rgba(30,167,163,.18), transparent),
    radial-gradient(1200px 400px at 90% 0%, rgba(107,142,35,.18), transparent);
}
/* Tekst u hero-u ostaje u 1320px containteru */
.hero > .container{
  max-width: var(--container-max);
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left:auto;
  margin-right:auto;
}
.hero .h1{ font-size:44px; line-height:1.1; margin:0 0 12px; }
.hero p{ font-size:18px; opacity:.9; }
.hero .cta{
  margin-top:18px; display:inline-block; padding:12px 18px;
  background:var(--olive); color:#fff; text-decoration:none;
  border-radius:14px; font-weight:700;
}
.hero .cta:hover{ filter:brightness(.95); }

/* ===== Cards ===== */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; }
.card{
  background:var(--paper); border-radius:18px; padding:18px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 6px 24px rgba(0,0,0,.08);
}
.card h3{ margin:0 0 8px; }

/* ===== Footer (sticky + cik-cak + tipografija) ===== */
.site-footer{ margin-top:auto; background:var(--olive-700); color:#fff; position:relative; }
.site-footer a{ color:#fff; text-decoration:none; }
.site-footer a:hover{ opacity:.9; }

/* tanji tekst u footeru */
.site-footer,
.site-footer p,
.site-footer a,
.site-footer .ft-item,
.site-footer .footer-links a,
.site-footer .footer-copy { font-weight:300; }

/* Footer torn edge (suptilan zig-zag) */
.footer-shape{
  position:absolute; top:-34px; left:0;
  width:100%; height:34px; line-height:0; overflow:hidden; pointer-events:none; z-index:1;
  color:var(--olive-700);
}
.footer-shape svg{ display:block; width:100%; height:100%; }
.footer-shape polygon{ fill:currentColor; }
@media (max-width:900px){
  .footer-shape{ top:-28px; height:28px; }
}

/* Footer layout */
.footer-top{
  display:grid; grid-template-columns:1fr auto 1fr;
  aligninds:center; gap:24px; padding:24px 0;
}
.ft-col{ display:flex; flex-direction:column; gap:10px; }

/* Levo: adresa u tankom okviru + ikonica mape */
.ft-left .ft-item{ display:flex; align-items:center; gap:10px; }
.ft-address{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 12px; border:1px solid rgba(255,255,255,0.6);
  border-radius:6px; color:#fff; text-decoration:none; font-weight:300;
  transition:background .25s, border-color .25s;
}
.ft-address:hover{ background:rgba(255,255,255,0.1); border-color:#fff; }

/* Ikonice (mala bela „vodena“) */
.ico{
  display:inline-block; width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.15); position:relative;
}
.ico:after{ content:''; position:absolute; inset:4px; border-radius:50%; background:rgba(255,255,255,.25); }
.ico-map{
  mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 2C8.7 2 6 4.7 6 8c0 4.5 6 14 6 14s6-9.5 6-14c0-3.3-2.7-6-6-6zm0 8.2A2.2 2.2 0 1 1 12 5.8a2.2 2.2 0 0 1 0 4.4z"/></svg>'); mask-size:contain; background:#fff;
}

/* Sredina: logo */
.ft-center{ align-items:center; justify-content:center; }
.ft-logo img{ height:80px; width:auto; display:block; filter:drop-shadow(0 6px 18px rgba(0,0,0,.15)); }

/* Desno: social ikone */
.ft-right{ align-items:flex-end; }
.ft-social{ display:flex; gap:10px; flex-wrap:wrap; }
.si{
  display:inline-grid; place-items:center; width:40px; height:40px;
  border-radius:50%; border:1px solid rgba(255,255,255,.55);
  background:rgba(255,255,255,.08);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.si-svg{ width:20px; height:20px; fill:#ffffff; }
.si:hover{ background:rgba(255,255,255,.16); }

/* Linkovi u sredini */
.footer-links{
  display:flex; justify-content:center; gap:14px;
  padding:12px 16px;
  border-top:1px solid rgba(255,255,255,.15);
  border-bottom:1px solid rgba(0,0,0,.08);
}
.footer-links a{ padding:6px 10px; border-radius:12px; background:rgba(255,255,255,.06); }
.footer-links a:hover{ background:rgba(255,255,255,.16); }

/* Copy linija */
.footer-copy{ padding:12px 0; }
.footer-copy p{ margin:8px 0 0; text-align:center; opacity:.95; }
.footer-copy a{ text-decoration:none; }
.footer-copy a:hover { opacity:.85; }

/* ===== Mobile bottom action bar (transparent white) ===== */
.mobile-bar{
  position:fixed; bottom:0; left:0; right:0; z-index:1000;
  height:56px; display:flex; justify-content:space-around; align-items:center;
  background:rgba(255,255,255,.85); backdrop-filter:blur(6px);
  border-top:1px solid rgba(0,0,0,.08);
}
.mobile-bar .mb-btn{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-decoration:none; color:var(--ink); font-size:12px;
}
.mobile-bar .mb-btn:hover{ background:rgba(0,0,0,.03); }
.mobile-bar .mb-btn span{ font-size:11px; margin-top:2px; }
.mb-ico{ width:20px; height:20px; fill:var(--olive-700); }

@media (max-width:900px){
  .footer-top{ grid-template-columns:1fr; justify-items:center; text-align:center; }
  .ft-left, .ft-right{ align-items:center; }
  .ft-right{ margin-top:6px; }
  .footer-links{ flex-wrap:wrap; }
  body{ padding-bottom:60px; } /* visina mobile bar-a */
}
@media (min-width:901px){
  .mobile-bar{ display:none; }
}

/* ===== Full-bleed helpers ===== */
/* Uklonjen .hero.container koji je terao full-bleed na silu.
   Ako želiš full širinu neke sekcije, ručno primeni .section-full na nju. */
.section-full{
  max-width:none !important;
  width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* ===== Typography (Open Sans) ===== */
body { font-weight:400; line-height:1.6; font-size:16px; }
p { font-weight:300; margin:0 0 1em; }
h1, .h1 { font-weight:700; font-size:2.4rem; line-height:1.2; margin:0 0 .5em; }
h2, .h2 { font-weight:600; font-size:1.8rem; line-height:1.3; margin:0 0 .5em; }
h3, .h3 { font-weight:600; font-size:1.4rem; margin:0 0 .5em; }
@media (max-width:768px){
  h1, .h1 { font-size:1.8rem; }
  h2, .h2 { font-size:1.5rem; }
  h3, .h3 { font-size:1.2rem; }
}

/* ===== Rezervacije — moderna forma ===== */
.page-head.over-dark{ padding:40px 0 10px; color:#000; }
.page-head.over-dark .muted{ color:rgba(11, 10, 10, 0.7); font-weight:300; }

.form-card{
  background:var(--paper);
  border:1px solid rgba(0,0,0,.06);
  border-radius:14px;
  padding:18px;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
}
.form-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px; }
.fg{ display:flex; flex-direction:column; gap:8px; }
.fg-full{ grid-column:1 / -1; }

label{ font-weight:600; font-size:.95rem; }
input[type=text],
input[type=tel],
input[type=number],
input[type=date],
input[type=time],
textarea,
select{
  width:100%; padding:12px 12px;
  border:1px solid #e5e8ef; border-radius:10px; background:#fff; outline:none;
  transition:border-color .15s, box-shadow .15s;
  font-weight:400;
}
input::placeholder, textarea::placeholder{ color:#9aa3ad; }
input:focus, textarea:focus, select:focus{
  border-color:#c9d6df;
  box-shadow:0 0 0 4px rgba(30,167,163,.08);
}
input:invalid, select:invalid, textarea:invalid{ box-shadow:none; }

.seg{ display:flex; gap:14px; align-items:center; }
.seg label{ font-weight:400; }
.help{ color:#6b7280; font-size:.85rem; }

.form-actions{ margin-top:4px; display:flex; justify-content:flex-end; }
@media (max-width:900px){
  .form-grid{ grid-template-columns:1fr; }
  .form-actions{ justify-content:center; }
}
/* === CONTAINER NARROW FIX (override) === */
:root{
  --container-max: 1200px;     /* još uže; promeni po želji 1240/1280/1320 */
  --container-pad: 16px;
}

.container{
  max-width: var(--container-max) !important;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  margin-left: auto;
  margin-right: auto;
}

/* poništi ranije pravilo koje je širilo na 90vw */
@media (min-width:1600px){
  .container{ max-width: var(--container-max) !important; }
}

/* ako u hero-u ima .container, i on je sužen */
.hero > .container{
  max-width: var(--container-max) !important;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}
/* === MOBILE NAV STYLE FIX === */
@media (max-width:900px){
  .main-nav{
    background: rgba(255,255,255,0.9) !important;  /* skoro belo, providno */
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  }

  .main-nav a{
    color: rgba(30,30,30,0.9) !important;  /* tamno sivi font */
    font-weight: 400;
    text-shadow: none;                     /* ukloni senku */
  }

  .main-nav a:hover{
    background: rgba(0,0,0,0.05);          /* lagano sivo na hover */
  }
}
@media (max-width:900px){
  .main-nav a{
    display: block;
    padding: 10px 18px;   /* levo/desno uvećano na 18px */
  }
}
/* ===== Dugmad u hederu ===== */
.header-inner .btn-ghost {
  padding:8px 14px;
  border:1px solid rgba(255,255,255,0.65);
  border-radius:6px;
  color:#fff;
  text-decoration:none;
  background:rgba(255,255,255,0.14);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08);
  font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
  transition:background .2s, border-color .2s, transform .1s;
}
.header-inner .btn-ghost:hover {
  background:rgba(255,255,255,0.22);
  border-color:#fff;
}

/* ===== Globalna dugmad (forme, kartice itd.) ===== */
.btn,
button,
input[type=submit] {
  display:inline-block;
  padding:10px 18px;
  border-radius:8px;
  border:1px solid #204c24;
  background:#204c24;
  color:#fff;
  font-weight:600;
  cursor:pointer;
  transition:background .2s, opacity .2s;
}
.btn:hover,
button:hover,
input[type=submit]:hover {
  opacity:0.9;
}
/* Rezervacije: pretvori ghost dugme u zeleno samo unutar formi */
.form-card .btn-ghost {
  border-color: #204c24 !important;
  background: #204c24 !important;
  color: #fff !important;
  text-shadow: none !important;
}
.form-card .btn-ghost:hover {
  opacity: .9;
  background: #204c24 !important;
  border-color: #204c24 !important;
}
/* === HERO sekcija === */
.home-hero {
  position: relative;
  display: block;
  min-height: clamp(380px, 52vh, 620px);
  overflow: hidden;

  /* Heder je visok 64px → hero se gura gore za tu visinu */
  margin-top: -64px;

  background-image:
    radial-gradient(1200px 400px at 10% 0%, rgba(30,167,163,.30), transparent),
    radial-gradient(1200px 400px at 90% 0%, rgba(107,142,35,.30), transparent);
}
/* Mobilno: suzi tekstualni stub u hero-u (sve stranice) */
@media (max-width: 900px){
  .home-hero .inner > div,
  .ev-hero .inner > div,
  .evd-hero .inner > div,
  .play-hero .inner > div,
  .wed-hero .inner > div{
    max-width: 28rem;
    padding-inline: 16px;
    margin-inline: auto;
  }
}
@media (max-width: 900px){
  .alb-hero .inner > div{
    max-width: 28rem;
    padding-inline: 16px;
    margin-inline: auto;
  }
}
 /* === HERO donja ivica — nepravilna “iscepana” linija (kao trava) === */
.hero-torn{ position:relative; z-index:0; }
.hero-torn::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height: var(--edge-h, 40px);                 /* visina “krzna” */
  background: var(--next-bg, var(--wash));     /* boja sledeće sekcije */
  pointer-events:none; z-index:1;
}

/* Blaža varijanta (manje nazubljeno, mekši prelaz) */
.hero-torn--soft::after{
  height: var(--edge-h, 28px);
  clip-path: polygon(
    0% 74%,  12% 82%,  25% 72%,  38% 84%,
    52% 70%, 66% 83%,  80% 71%,  92% 80%,
    100% 75%, 100% 100%, 0% 100%
  );
}

/* Ređa varijanta (krupniji “faseti”, još mirnija linija) */
.hero-torn--sparse::after{
  height: var(--edge-h, 34px);
  clip-path: polygon(
    0% 72%,  20% 85%,  40% 70%,  60% 86%,
    80% 72%, 100% 78%,
    100% 100%, 0% 100%
  );
}

/* Mobilno: još pliće da deluje oštrije, ali i dalje blago */
@media (max-width: 900px){
  .hero-torn--soft::after{
    height: var(--edge-h, 24px);
    clip-path: polygon(
      0% 76%, 16% 84%, 34% 74%, 54% 84%,
      74% 72%, 92% 80%, 100% 76%,
      100% 100%, 0% 100%
    );
  }
  .hero-torn--sparse::after{
    height: var(--edge-h, 24px);
    clip-path: polygon(
      0% 74%, 28% 86%, 56% 72%, 84% 84%,
      100% 76%, 100% 100%, 0% 100%
    );
  }
}
/* Helperi (nije obavezno, samo olakšavaju) */
.next-bg-wash  { --next-bg: var(--wash); } /* #f6fafb */
.next-bg-white { --next-bg: #fff;        }

.edge-24 { --edge-h:24px; }
.edge-26 { --edge-h:26px; }
.edge-30 { --edge-h:30px; }
.edge-34 { --edge-h:34px; }