/* =====================================================================
   UKKMS CMS  -  Glavni stil
   Paleta: mornarsko plava (štit) + zlatni akcent
   ===================================================================== */
:root{
    --navy:      #0d2a4d;
    --navy-2:    #12386b;
    --navy-3:    #1c4d8f;
    --gold:      #c9a24b;
    --gold-dark: #a8842f;
    --red:       #b3252b;
    --ink:       #1e2733;
    --muted:     #5c6b7a;
    --line:      #e2e8f0;
    --bg:        #ffffff;
    --bg-soft:   #f4f7fb;
    --radius:    10px;
    --shadow:    0 6px 24px rgba(13,42,77,.08);
    --shadow-lg: 0 14px 40px rgba(13,42,77,.14);
    --maxw:      1180px;
    --ff:        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;font-family:var(--ff);color:var(--ink);background:var(--bg);
    line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--navy-3);text-decoration:none;transition:color .2s}
a:hover{color:var(--gold-dark)}
h1,h2,h3,h4{font-family:Georgia,"Times New Roman",serif;line-height:1.25;color:var(--navy);margin:0 0 .6em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 22px}

/* ---------- Dugmad ---------- */
.btn{
    display:inline-block;background:var(--navy);color:#fff;padding:12px 26px;
    border-radius:var(--radius);font-weight:600;border:2px solid var(--navy);
    cursor:pointer;transition:.2s;letter-spacing:.02em;
}
.btn:hover{background:var(--navy-3);border-color:var(--navy-3);color:#fff}
.btn--lg{padding:15px 40px;font-size:1.1rem}
.btn--sm{padding:8px 18px;font-size:.9rem}
.btn--join{background:var(--gold);border-color:var(--gold);color:var(--navy)}
.btn--join:hover{background:var(--gold-dark);border-color:var(--gold-dark);color:#fff}

/* ---------- Gornja traka ---------- */
.topbar{background:var(--navy);color:#cdd8e6;font-size:.85rem}
.topbar__inner{display:flex;justify-content:space-between;align-items:center;padding:8px 22px;gap:14px;flex-wrap:wrap}
.topbar a{color:#cdd8e6;margin-right:18px}
.topbar a:hover{color:var(--gold)}

/* ---------- Zaglavlje ---------- */
.site-header{background:#fff;border-bottom:1px solid var(--line);position:relative}
.site-header__inner{display:flex;align-items:center;gap:24px;padding:16px 22px}
.brand{display:flex;align-items:center;gap:14px;color:var(--navy)}
.brand__logo{width:56px;height:auto}
.brand__text strong{display:block;font-size:1.35rem;color:var(--navy);letter-spacing:.04em;font-family:Georgia,serif}
.brand__text small{display:block;font-size:.72rem;color:var(--muted);max-width:340px;line-height:1.3}
.header__slogan{margin-left:auto;text-align:right;font-size:.85rem;color:var(--muted);display:none}
.header__slogan em{color:var(--navy)}
.header__slogan span{display:block;font-size:.75rem}
.btn--join{white-space:nowrap}

/* ---------- Navigacija ---------- */
.mainnav{background:var(--navy);position:sticky;top:0;z-index:100;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.mainnav .container{display:flex;align-items:center}
.mainnav__list{list-style:none;display:flex;margin:0;padding:0;flex-wrap:wrap}
.mainnav__list>li{position:relative}
.mainnav__list a{color:#e7eefa;display:block;padding:15px 20px;font-weight:600;font-size:.95rem;letter-spacing:.02em}
.mainnav__list>li:hover>a,.mainnav__list>li.active>a{background:var(--navy-3);color:#fff}
.mainnav__list .has-children>a::after{content:"▾";margin-left:6px;font-size:.7em}
.submenu{list-style:none;margin:0;padding:0;position:absolute;top:100%;left:0;background:var(--navy-2);
    min-width:230px;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s;z-index:120}
.has-children:hover .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{padding:12px 18px;font-size:.9rem;font-weight:500}
.submenu a:hover{background:var(--navy-3)}
.mainnav__toggle{display:none;background:none;border:0;cursor:pointer;padding:14px 12px;margin-left:auto;flex-direction:column;gap:5px}
.mainnav__toggle span{width:26px;height:3px;background:#fff;border-radius:2px}

/* ---------- Hero ---------- */
.hero{
    background:linear-gradient(rgba(9,28,53,.86),rgba(9,28,53,.90)),
        url("https://static.wixstatic.com/media/7e0f63_3724cdfa366b4af7a0cc4ae2bef05074.png/v1/fit/w_2500,h_1330,al_c/7e0f63_3724cdfa366b4af7a0cc4ae2bef05074.png") center/cover;
    color:#fff;text-align:center;padding:88px 0;
}
.hero h1{color:#fff;font-size:2.5rem;max-width:900px;margin:0 auto .3em}
.hero__slogan{font-size:1.2rem;font-style:italic;color:#dbe6f5;margin-bottom:1.6em}
.hero__slogan span{color:var(--gold);font-style:normal;font-size:1rem}

/* ---------- Sekcije ---------- */
.section{padding:64px 0}
.section--muted{background:var(--bg-soft)}
.section__title{font-size:2rem;position:relative;margin-bottom:1.2em}
.section__title::after{content:"";display:block;width:64px;height:4px;background:var(--gold);margin-top:12px;border-radius:2px}
.section__head{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px}
.section__head .section__title{margin-bottom:.4em}
.link-more{font-weight:600;color:var(--gold-dark)}

/* ---------- Pozdravna riječ ---------- */
.welcome{display:grid;grid-template-columns:1.7fr 1fr;gap:48px;align-items:start}
.welcome__photo img{border-radius:var(--radius);box-shadow:var(--shadow-lg);width:100%}
.welcome__sign{margin-top:1.4em;color:var(--navy)}

/* ---------- Profili ---------- */
.profiles{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.profile-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--navy);
    border-radius:var(--radius);padding:30px 26px;box-shadow:var(--shadow);transition:.25s}
.profile-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-top-color:var(--gold)}
.profile-card__icon{font-size:2.4rem;color:var(--gold);margin-bottom:.2em}
.profile-card h3{font-size:1.25rem}
.profile-card__body{font-size:.95rem;color:var(--muted)}
.profile-card__body p{margin:.6em 0}

/* ---------- Vijesti ---------- */
.news-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:26px}
.news-grid--2{grid-template-columns:repeat(2,1fr)}
.news-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);display:flex;flex-direction:column;transition:.25s}
.news-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.news-card__img{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--bg-soft)}
.news-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.news-card:hover .news-card__img img{transform:scale(1.06)}
.news-card__body{padding:20px 22px;display:flex;flex-direction:column;gap:8px;flex:1}
.news-card__body time{font-size:.8rem;color:var(--gold-dark);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.news-card__body h3{font-size:1.12rem;margin:0}
.news-card__body h3 a{color:var(--navy)}
.news-card__body p{color:var(--muted);font-size:.92rem;margin:0;flex:1}

/* ---------- News layout sa sidebar ---------- */
.news-layout{display:grid;grid-template-columns:1fr 320px;gap:40px;align-items:start}
.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-bottom:26px;box-shadow:var(--shadow)}
.side-box h4{font-size:1.1rem;border-bottom:2px solid var(--gold);padding-bottom:8px;display:inline-block}
.side-item{display:flex;gap:12px;align-items:center;margin:14px 0;color:var(--ink)}
.side-item img{width:64px;height:48px;object-fit:cover;border-radius:6px;flex:none}
.side-item span{font-size:.88rem;font-weight:600;line-height:1.3}
.side-item:hover span{color:var(--gold-dark)}

/* ---------- Paginacija ---------- */
.pagination{display:flex;gap:8px;justify-content:center;margin-top:40px;flex-wrap:wrap}
.pagination a{width:42px;height:42px;display:grid;place-items:center;border:1px solid var(--line);
    border-radius:8px;font-weight:600;color:var(--navy);background:#fff}
.pagination a:hover{background:var(--bg-soft)}
.pagination a.is-current{background:var(--navy);color:#fff;border-color:var(--navy)}

/* ---------- Page hero ---------- */
.page-hero{background:linear-gradient(120deg,var(--navy),var(--navy-3));color:#fff;padding:56px 0}
.page-hero h1{color:#fff;margin:0;font-size:2.2rem}
.page-hero__meta{color:#cdd8e6;margin:.4em 0 0}
.breadcrumbs{color:#b9c8dc;font-size:.85rem;margin:0 0 .5em}
.breadcrumbs a{color:var(--gold)}

/* ---------- Rich text ---------- */
.content-narrow{max-width:880px;margin:0 auto}
.rich-text{font-size:1.03rem;color:#2c3947}
.rich-text h3{font-size:1.4rem;margin-top:1.6em;color:var(--navy)}
.rich-text p{margin:1em 0}
.rich-text ul,.rich-text ol{margin:1em 0;padding-left:1.4em}
.rich-text li{margin:.5em 0}
.rich-text a{color:var(--navy-3);text-decoration:underline}
.rich-text blockquote{border-left:4px solid var(--gold);background:var(--bg-soft);
    margin:1.6em 0;padding:16px 24px;border-radius:0 8px 8px 0;font-style:italic;color:#33465c}
.single__cover{width:100%;border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:1.6em}

/* ---------- Single vijest hero ---------- */
.single__hero{min-height:360px;background-size:cover;background-position:center;display:flex;align-items:flex-end}
.single__hero-overlay{width:100%;background:linear-gradient(rgba(9,28,53,0),rgba(9,28,53,.9));padding:60px 0 32px;color:#fff}
.single__hero-overlay h1{color:#fff;max-width:900px}
.single__date{color:var(--gold);font-weight:600}
.tags{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.tag{background:var(--bg-soft);border:1px solid var(--line);color:var(--navy);
    padding:6px 14px;border-radius:20px;font-size:.82rem;font-weight:600}
.back-link{margin-top:28px}

/* ---------- Tim ---------- */
.team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:30px}
.team-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
    box-shadow:var(--shadow);transition:.25s}
.team-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.team-card__photo{aspect-ratio:3/4;background:var(--bg-soft);overflow:hidden}
.team-card__photo img{width:100%;height:100%;object-fit:cover}
.team-card__info{padding:20px 22px}
.team-card__info h3{margin:0 0 .2em;font-size:1.2rem}
.team-card__role{color:var(--gold-dark);font-weight:600;margin:0 0 .8em}
.team-card__meta{font-size:.88rem;color:var(--muted);margin:.3em 0}

/* ---------- FAQ accordion ---------- */
.faq-intro{color:var(--muted);margin-bottom:2em}
.accordion__item{border:1px solid var(--line);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff}
.accordion__head{width:100%;display:flex;align-items:center;gap:16px;background:#fff;border:0;
    padding:20px 22px;cursor:pointer;text-align:left;font-family:inherit}
.accordion__head:hover{background:var(--bg-soft)}
.accordion__num{color:var(--gold);font-weight:700;font-size:1.1rem;font-family:Georgia,serif}
.accordion__q{flex:1;font-weight:600;color:var(--navy);font-size:1.05rem}
.accordion__icon{font-size:1.5rem;color:var(--navy);transition:transform .2s}
.accordion__item.is-open .accordion__icon{transform:rotate(45deg)}
.accordion__body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.accordion__body .rich-text{padding:0 22px 22px}

/* ---------- Kontakt ---------- */
.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.contact-info hr{border:0;border-top:1px solid var(--line);margin:20px 0}
.contact-info p{margin:.5em 0}
.contact-map{margin-top:20px}
.form label{display:block;margin-bottom:16px;font-weight:600;color:var(--navy);font-size:.92rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form input,.form textarea{width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);
    border-radius:8px;font-family:inherit;font-size:1rem;font-weight:400;color:var(--ink)}
.form input:focus,.form textarea:focus{outline:none;border-color:var(--navy-3);box-shadow:0 0 0 3px rgba(28,77,143,.12)}
.alert{padding:14px 18px;border-radius:8px;margin-bottom:18px;font-weight:600}
.alert--success{background:#e7f6ec;color:#1c7a3f;border:1px solid #b8e2c6}
.alert--error{background:#fdeaea;color:#a12127;border:1px solid #f2c2c4}

/* ---------- Footer ---------- */
.site-footer{background:var(--navy);color:#c3d1e3;margin-top:20px}
.site-footer__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;padding:56px 22px 40px}
.footer-col h4{color:#fff;font-size:1.05rem;border-bottom:2px solid var(--gold);padding-bottom:8px;display:inline-block;margin-bottom:14px}
.footer-col p{font-size:.9rem;margin:.5em 0}
.footer-col a{color:#c3d1e3}
.footer-col a:hover{color:var(--gold)}
.site-footer__bottom{background:#081d38;padding:16px 0;font-size:.85rem;text-align:center;color:#8aa0bd}

/* ---------- Responsive ---------- */
@media(min-width:1080px){.header__slogan{display:block}}
@media(max-width:960px){
    .welcome{grid-template-columns:1fr}
    .welcome__photo{max-width:340px;margin:0 auto}
    .profiles{grid-template-columns:1fr}
    .news-layout{grid-template-columns:1fr}
    .news-grid--2{grid-template-columns:1fr}
    .contact-layout{grid-template-columns:1fr}
    .site-footer__grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
    .site-header__inner{flex-wrap:wrap}
    .brand__text small{display:none}
    .header__slogan{display:none}
    .mainnav .container{position:relative}
    .mainnav__toggle{display:flex}
    .mainnav__list{display:none;width:100%;flex-direction:column;background:var(--navy-2)}
    body.nav-open .mainnav__list{display:flex}
    .submenu{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;background:var(--navy)}
    .has-children>a::after{content:""}
    .form__row{grid-template-columns:1fr}
    .hero h1{font-size:1.8rem}
    .section{padding:44px 0}
}
@media(max-width:480px){
    .site-footer__grid{grid-template-columns:1fr}
    .topbar__inner{justify-content:center;text-align:center}
}