/* ========= Oochale Footer ========= */
:root{
  --oo-gold:#f8f9fd; --oo-dark:#38424b; --oo-muted:#c9ced4; --oo-white:#fff;
  --oo-max:75rem; --oo-gap:clamp(.75rem,2vw,1.75rem); --oo-radius:.625rem;

  --oo-title-xl:clamp(1.75rem,2.2vw + 1rem,2.75rem);
  --oo-title-lg:clamp(1rem,1.2vw + .9rem,1.25rem);
  --oo-text:clamp(.9rem,.4vw + .85rem,1rem);
  --oo-small:clamp(.75rem,.2vw + .72rem,.85rem);

  --oo-icon:clamp(1.1rem,.6vw + 1rem,1.375rem);
  --oo-btn:clamp(2.25rem,1.2vw + 2rem,2.75rem);
  --oo-input-pad-y:clamp(.4rem,.6vw,.7rem);
  --oo-input-pad-x:clamp(.4rem,.8vw,.75rem);
  --oo-caret-size:clamp(1.25rem,.8vw + 1rem,1.5rem);

  /* novi: razmak između .oo-left i .oo-dyn na desktopu */
  --oo-cols-gap-desktop: .75rem; /* "mrvicu" – povisi npr. na 1rem ako želiš */
}

.oo-footer {
    margin-top: 60px;
}

.oo-container{ max-width:var(--oo-max); margin:0 auto; padding-inline:clamp(.75rem,2vw,1rem); }
.screen-reader-text{ position:absolute; left:-9999px; }

/* ---------- Newsletter bar ---------- */
.oo-footer__join{ background:var(--oo-gold); color:#1b1f23; padding-block:clamp(1.25rem,3.5vw,2.25rem); text-align:center; }
.oo-join__title{ font-size:var(--oo-title-xl); font-weight:700; margin:0 0 .35em; }
.oo-join__subtitle{ font-size:clamp(1rem,.6vw + .95rem,1.125rem); margin:0 0 1.1em; color:#2a2f36; }
.oo-join__form{ max-width:min(42rem,92%); margin:0 auto; }
.oo-input{ display:grid; grid-template-columns:2.75rem 1fr var(--oo-btn); align-items:center; background:var(--oo-white); border-radius:.5rem; padding:var(--oo-input-pad-y) var(--oo-input-pad-x); }
.oo-input__icon{ display:flex; align-items:center; justify-content:center; color:#6f6f6f; }
.oo-input__icon svg{ width:var(--oo-icon); height:var(--oo-icon); }
.oo-input input{ width:100%; border:0; outline:0; font-size:var(--oo-text); padding:.5rem .5rem; background:transparent; color:#000; }
.oo-btn{ border:0; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.oo-btn--arrow{ inline-size:var(--oo-btn); block-size:var(--oo-btn); border-radius:50%; }
.oo-btn--arrow:hover{ background:#00000010; }
.oo-join__legal{ font-size:var(--oo-small); line-height:1.45; margin:.75rem auto 0; max-width:min(48rem,96%); color:#333; }
.oo-join__legal a{ color:#1f2a44; text-decoration:underline; }

/* ---------- Dark footer ---------- */
.oo-footer__main{ background:var(--oo-dark); color:var(--oo-white); padding-block:clamp(1.25rem,3vw,1.75rem); }

/* Skini max-width samo u footeru – neka se rastegne na širinu parenta */
.oo-footer__main > .oo-container{ max-width:none !important; width:100% !important; }

/* Glavni “red” (default = stacked; desktop -> flex centriran) */
.oo-footer__grid{
  display:block; /* mobile default */
  gap:var(--oo-gap);
  align-items:start;
  padding-inline:clamp(1rem,5vw,2.25rem);
  box-sizing:border-box;
}

/* Lijevi blok: logo + social */
.oo-left{ display:grid; grid-template-columns:minmax(140px,220px) minmax(0,520px); column-gap:clamp(1rem,3vw,2rem); align-items:start; }
.oo-brand img{ display:block; height:clamp(2.2rem,1.2vw + 1.6rem,2.8rem); width:auto; max-width:220px; object-fit:contain; }
.oo-social-stack{ min-width:0; max-width:520px; }

/* Desne sekcije: auto širine */
.oo-dyn{ display:flex; flex-wrap:wrap; gap:clamp(1rem,2vw,2rem); align-items:flex-start; margin-top:var(--oo-gap); }
.oo-dyn > .oo-col{ flex:0 0 auto; width:auto; max-width:none; }

/* Akordeoni */
.oo-col{ border:0; }
.oo-col__title{ font-size:var(--oo-title-lg); font-weight:700; line-height:1.25; list-style:none; display:flex; align-items:center; justify-content:space-between; cursor:default; margin:0 0 .6rem; position:relative; }
.oo-col > summary::-webkit-details-marker{ display:none; }
.oo-col > summary::after{
  content:""; inline-size:var(--oo-caret-size); block-size:var(--oo-caret-size); margin-inline-start:.5rem;
  display:inline-block; background-image:var(--oo-caret-img, url('../images/icons/down.png'));
  background-size:contain; background-position:center; background-repeat:no-repeat; transform:rotate(0deg) scale(.75);
  transition:transform .2s ease, opacity .2s ease; opacity:0;
}
.oo-col[open] > summary::after{ transform:rotate(180deg) scale(.75); }
.oo-links{ margin:0; padding:0; list-style:none; display:grid; gap:clamp(.35rem,.6vw,.5rem); }
.oo-links a{ color:var(--oo-white); text-decoration:none; font-size:var(--oo-text); }
.oo-links a:hover{ text-decoration:underline; }

/* Social / region */
.oo-social{ display:flex; flex-wrap:wrap; gap:clamp(.5rem,1.2vw,.75rem); row-gap:clamp(.4rem,1vw,.6rem); list-style:none; padding:0; margin:.4rem 0 1rem; align-items:center; }
.oo-social__link{ inline-size:clamp(2.25rem,1.2vw + 2rem,2.75rem); block-size:clamp(2.25rem,1.2vw + 2rem,2.75rem); display:inline-flex; align-items:center; justify-content:center; background:#2c353d; border-radius:50%; color:#fff; }
.oo-social__link:hover{ background:#34404a; }
.oo-social__link svg{ width:var(--oo-icon); height:var(--oo-icon); }
.oo-region{ display:flex; align-items:center; gap:.6rem; color:var(--oo-muted); margin-top:.35rem; font-size:var(--oo-text); }
.oo-region__links a{ color:var(--oo-white); margin-right:.6rem; text-decoration:none; }
.oo-region__links a:hover{ text-decoration:underline; }

/* Copyright */
.oo-footer__legal{ border-top:1px solid #44515c; margin-top:clamp(1rem,2vw,1.5rem); padding-top:clamp(.75rem,1.6vw,1.125rem); display:flex; justify-content:center; }
.oo-legal__copy{ color:var(--oo-muted); font-size:var(--oo-small); margin:.5rem 0 0; text-align:center; }

/* ===== Desktop (>=981px): centriraj L+R paket i smanji međurazmak ===== */
@media (min-width:61.5rem){
  .oo-footer__grid{
    display:flex;
    justify-content:center;       /* cijeli paket (left+right) u sredinu */
    align-items:flex-start;
    column-gap: var(--oo-cols-gap-desktop); /* ← smanjeni razmak */
    row-gap:0;
  }
  .oo-left{  margin-right:0; }    /* sigurnosno – bez dodatnih margina */
  .oo-dyn{   margin-top:0; margin-left:0; }

  .oo-social{ flex-wrap:nowrap; } /* ikone u jednom redu */
}

/* ===== Mobile (<981px) ===== */
@media (max-width:61.5rem){
  .oo-left{ grid-template-columns:1fr; row-gap:clamp(.9rem,3vw,1.4rem); margin-top:clamp(.75rem,3.5vw,1.5rem); margin-bottom:clamp(1.75rem,6vw,3rem); }
  .oo-brand{ display:flex; justify-content:center; }
  .oo-brand img{ margin-inline:auto; }

  .oo-social-stack{ text-align:center; margin-top:clamp(.75rem,2.5vw,1.25rem); margin-inline:auto; display:flex; flex-direction:column; align-items:center; max-width:100%; }
  .oo-social-stack .oo-col__title{ width:100%; display:flex; justify-content:center; }

  .oo-social{ justify-content:center; width:100%; flex-wrap:nowrap; gap:clamp(.45rem,3.2vw,.65rem); }
  .oo-social__link{ inline-size:clamp(1.9rem,6vw,2.3rem); block-size:clamp(1.9rem,6vw,2.3rem); }
  .oo-social__link svg{ width:clamp(1rem,4.2vw,1.2rem); height:clamp(1rem,4.2vw,1.2rem); }

  .oo-dyn{ display:block; margin-top:var(--oo-gap); }
  .oo-col__title{ font-size:clamp(1rem,.6vw + .9rem,1.05rem); padding-block:.75rem; margin:0; border-top:1px solid #44515c; cursor:pointer; }
  .oo-dyn > .oo-col:first-of-type .oo-col__title{ border-top:0; }
  .oo-col > summary::after{ opacity:1; }
  .oo-col[open] .oo-links{ padding-block:.5rem; }
  .oo-links{ gap:clamp(.3rem,.6vw,.45rem); }
}

@media (max-width:32rem){
  .oo-join__title{ font-size:clamp(1.5rem,6vw,1.75rem); }
  .oo-input{ grid-template-columns:2.5rem 1fr calc(var(--oo-btn) - .25rem); }
}