/* =============== VARS & LAYOUT SHELL =============== */
:root{
  --page-max: 940px;   /* promeni po sajtu (npr. 1000/1120) */
  --page-pad: 12px;    /* uskladi sa _hero.php ako ga koristiš */
  --brand:   #0b3f75;  /* teget akcenat (header/nav) */
  --focus:   #5fa8ff;  /* outline na fokus */
}

/* centriraj sadržaj i ogranici širinu */
.lo-wrap{
  max-width: var(--page-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--page-pad);
}

/* mobilni: uža logika i malo manji padding */
@media (max-width: 768px){
  :root{ --page-max: 720px; }
  .lo-wrap{ padding: 10px 12px; }
}

/* =============== BASE RESET =============== */
*{ margin:0; padding:0; box-sizing:border-box; }
html, body{ height:100%; }
body{
  background: #d5eeff;
  color:#000; font-family:Arial, Helvetica, sans-serif; font-size:12px;
}
a{ color:#0059ac; text-decoration:none; }
a:hover{ color:#ac0061; text-decoration:underline; }

/* =============== LAYOUT CONTAINERS =============== */

#header, #oglasi, .topjoin, #footer, .rulers, .titles, .texts{
  max-width: var(--page-max); width:100%; margin:0 auto;
}
#footer{ text-align:center; padding-top:10px; }
#footer p{ max-width:850px; width:100%; margin:0 auto; padding-bottom:10px; }

/* =============== MODERNI HEADER (responsive) =============== */
.lo-header{
  position:relative; background:var(--brand); color:#fff;
  border-bottom:1px solid rgba(0,0,0,.12);
}
.lo-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 0; /* horizontalni padding daje .lo-wrap */
}
.lo-header .brand{
  color:#fff; text-decoration:none;
  font-size:20px; font-weight:800; letter-spacing:-.2px;
  padding-left:4px;
}
.lo-header .nav{ display:flex; gap:6px; }
.lo-header .nav a{
  color:#fff; text-decoration:none;
  padding:8px 10px; border-radius:6px; opacity:.95;
}
.lo-header .nav a:hover{ background:rgba(255,255,255,.12); opacity:1; }
.lo-header .menu-toggle{
  display:none; border:0; background:transparent; color:#fff;
  font-size:22px; padding:6px 8px; line-height:1; border-radius:6px;
}
.lo-header .menu-toggle:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
@media (max-width: 640px){
  .lo-header .menu-toggle{ display:block; }
  .lo-header .nav{
    position:absolute; left:0; right:0; top:100%;
    background:var(--brand); border-bottom:1px solid rgba(255,255,255,.18);
    display:none; flex-direction:column; gap:6px; padding:8px 12px; z-index:999;
  }
  .lo-header .nav a{ padding:10px 8px; }
  .lo-header.is-open .nav{ display:flex; }
  .lo-header .brand{ flex:1; text-align:left; }
}

/* =============== (LEGACY) STARI NAV BLOKOVI – OCIŠCENO =============== */
/* Uklonjene sprite pozadine, prebaceno na fleks i “pill” linkove */
.navlinks, .navlinksbottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:10px 12px; padding:8px 12px; min-height:auto;
  background:none; background-image:none;
}
.navlinks > div, .navlinksbottom > div{
  display:block; float:none; height:auto; background:none !important;
}
.navlinks a, .navlinksbottom a{
  display:inline-block; white-space:nowrap; text-decoration:none;
  padding:8px 12px; line-height:1; font-size:14px; font-weight:600;
  color:var(--brand);
  background:linear-gradient(#ffffff, #fafbfd);
  border:1px solid var(--brand);
  border-radius:999px;               /* pill */
  box-shadow:0 1px 0 rgba(0,0,0,.05);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.navlinks a:visited, .navlinksbottom a:visited{ color:var(--brand); }
.navlinks a:hover, .navlinksbottom a:hover{
  background:var(--brand); color:#fff; border-color:var(--brand); text-decoration:none;
}
.navlinks a:active, .navlinksbottom a:active{ transform:translateY(1px); }
.navlinks a:focus-visible, .navlinksbottom a:focus-visible{
  outline:2px solid var(--focus); outline-offset:2px; box-shadow:0 0 0 3px rgba(95,168,255,.25);
}

/* Naslov iznad gradova */
.cities-title{
  text-align:center; font-size:20px; line-height:1.25;
  margin:16px 0 10px; color:var(--brand); letter-spacing:-.2px;
}

/* =============== OGLASI (stara tabela) =============== */
#oglasi{ margin-bottom:20px; padding-top:15px; }
#oglasi table{
  border-collapse:collapse; width:100%; max-width:900px; margin:0 auto;
  font-size:18px; color:#666;
}
#oglasi tr{ border-bottom:1px solid #ddd; }
#oglasi td{ padding:6px 8px; }
#oglasi .legend{ font-size:22px; color:#005075; height:auto; }
#oglasi .nr{ width:120px; }
#oglasi .tel{ width:220px; }
#oglasi .txt{ width:auto; }

/* mobilni prikaz tabele kao “kartice” */
@media (max-width: 768px){
  #oglasi table .legend{ display:none; }
  #oglasi table, #oglasi thead, #oglasi tbody, #oglasi tr, #oglasi td, #oglasi th{
    display:block; width:100% !important;
  }
  #oglasi tr{
    border:1px solid #e6e6e6; border-radius:8px; background:#fff;
    padding:10px; margin:10px 0;
  }
  #oglasi td{ border:0; padding:6px 0; }
  #oglasi td.nr{ font-weight:700; }
  #oglasi td.nr::before{ content:"Br. poruke / Datum: "; font-weight:600; color:#555; }
  #oglasi td.tel::before{ content:"Telefon: "; font-weight:600; color:#555; }
  #oglasi td.txt::before{ content:"Tekst: "; font-weight:600; color:#555; display:block; margin-bottom:4px; }
  #oglasi td.tel{
    background:#f6f8ff; border:1px solid #dfe6ff; padding:8px; border-radius:6px;
  }
}

/* =============== MEDIA / WIDGETS =============== */
img.xxx{ display:block; }
img, img[width], img[height]{ max-width:100% !important; height:auto !important; }
.fb-like-box, .fb-page, .fb_iframe_widget, .fb_iframe_widget > span, .fb_iframe_widget iframe{
  max-width:100% !important;
}

/* =============== PAGINACIJA (stari .archiv) =============== */
ul.archiv{
  list-style:none; margin:10px auto; padding:0;
  max-width:var(--page-max);
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  font-size:16px; font-weight:700;
}
ul.archiv li{
  display:inline-block; min-width:30px;
  background:#fff; border:1px solid #ddd;
  border-radius:6px;
  text-align:center; padding:0 10px; height:28px; line-height:28px;
}
ul.archiv li.ar{ min-width:auto; margin-right:6px; border:none; background:transparent; }
ul.archiv li a{
  display:inline-block; color:#0b3f75; text-decoration:none; padding:0 2px; height:100%;
}
ul.archiv li a:hover{ text-decoration:underline; }

/* =============== INTRO / TITLES (legacy – bez spriteova) =============== */
.introclip{ position:static; width:auto; padding:10px 0; font-size:13px; text-align:justify; }
.titles{ margin-top:10px; height:auto; background:none; }
.titles h2{ font-size:24px; font-style:italic; padding-top:0; text-indent:0; }

/* =============== HEADINGS & HELPERS =============== */
h3{ text-align:center; font-size:24px; margin:5px auto; }
h4{
  color:var(--brand); background:#e7f1ff;
  font-size:18px; width:auto; display:inline-block; padding:4px 8px; border-radius:6px;
  margin:0 0 10px 0;
}
.centered{ text-align:center; }

/* modern clearfix */
.clearfix::after, .cleared::after{ content:""; display:block; clear:both; }
.cleared{ display:block; }

/* =============== RESPONSIVE TWEAKS =============== */
@media (max-width: 992px){
  .texts{ padding:0 12px; }
}
@media (max-width: 480px){
  .texts p, #footer p{ font-size:14px; line-height:1.5; }
}

.content-box {
  background:#fff;
  border-radius:10px;
  padding:20px 24px;
  margin:20px auto;
  max-width:900px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
}