/* Najlepse Note – Global Theme (Light/Dark) */

:root{
  --nn-header-height: 72px;

  --nn-bg: #ffffff;
  --nn-text: #111111;
  --nn-card: #f6f6f6;
  --nn-border: rgba(0,0,0,.12);
  --nn-accent: #f1c40f;

  --nn-font: "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --nn-radius: 14px;
}

html.nn-dark{
  --nn-bg: #0b0d10;
  --nn-text: #f2f2f2;
  --nn-card: #11151a;
  --nn-border: rgba(255,255,255,.14);
  --nn-accent: #f1c40f;
}

@media (prefers-color-scheme: dark){
  html:not(.nn-light):not(.nn-dark){
    --nn-bg: #0b0d10;
    --nn-text: #f2f2f2;
    --nn-card: #11151a;
    --nn-border: rgba(255,255,255,.14);
    --nn-accent: #f1c40f;
  }
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background: var(--nn-bg);
  color: var(--nn-text);
  font-family: var(--nn-font);
}

a{ color: var(--nn-text); }
a:hover{ opacity:.92; }

a:focus-visible,
button:focus-visible{
  outline: 2px solid var(--nn-accent);
  outline-offset: 2px;
}

.nn-container{
  width: min(1100px, calc(100% - 2rem));
  margin-inline:auto;
}

/* =========================
   Header
   ========================= */

.nn-site-header{
  border-bottom: 1px solid var(--nn-border);
  background: var(--nn-bg);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nn-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  min-height: var(--nn-header-height);
  padding: .75rem 0;
  position: relative;
}

.nn-brand{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:900;
  text-decoration:none;
  min-width: 0;
}

.nn-brand .nn-logo{
  width:34px;
  height:34px;
  border-radius:10px;
  background: var(--nn-card);
  border:1px solid var(--nn-border);
  display:grid;
  place-items:center;
  flex: 0 0 auto;
}

.nn-site-title{
  font-weight:900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Header: Logo (Light/Dark) */
.nn-site-logo{
  height: 34px;
  width: auto;
  display: inline-block;
  flex: 0 0 auto;
}

.logo-dark{ display:none; }
html.nn-dark .logo-light{ display:none; }
html.nn-dark .logo-dark{ display:inline-block; }

/* System dark when no explicit selection */
@media (prefers-color-scheme: dark){
  html:not(.nn-light):not(.nn-dark) .logo-light{ display:none; }
  html:not(.nn-light):not(.nn-dark) .logo-dark{ display:inline-block; }
}

/* =========================
   Desktop nav
   ========================= */

.nn-nav .nn-menu,
.nn-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  align-items:center;
}

.nn-nav a{
  text-decoration:none;
  font-weight:800;
  padding: .35rem .2rem;
}

/* =========================
   Header actions (social + theme)
   ========================= */

.nn-header-actions{
  display:flex;
  align-items:center;
  gap:.75rem;
}

.nn-social{
  display:flex;
  align-items:center;
  gap:.35rem;
}

.nn-social-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:999px;
  border: 1px solid var(--nn-border);
  background: var(--nn-card);
  text-decoration:none;
}

.nn-social-link svg{
  fill: var(--nn-text);
}

.nn-theme-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.55rem .75rem;
  border-radius: 999px;
  border: 1px solid var(--nn-border);
  background: var(--nn-card);
  color: var(--nn-text);
  cursor:pointer;
  font-weight:900;
}

/* =========================
   Mobile nav toggle (hamburger)
   - usklađeno sa header.php: .nn-nav-toggle + #nn-primary-nav
   ========================= */

.nn-nav-toggle{
  display:none;
  background:transparent;
  border: 1px solid var(--nn-border);
  background: var(--nn-card);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  cursor:pointer;
  align-items:center;
  justify-content:center;
  padding:0;
}

.nn-burger{
  display:block;
  width:22px;
  height:2px;
  background: currentColor;
  position:relative;
}

.nn-burger::before,
.nn-burger::after{
  content:"";
  position:absolute;
  left:0;
  width:22px;
  height:2px;
  background: currentColor;
}

.nn-burger::before{ top:-7px; }
.nn-burger::after{ top:7px; }

/* Mobile behavior */
@media (max-width: 900px){
  /* prikazi hamburger */
  .nn-nav-toggle{ display:inline-flex; }

  /* desktop nav sakrij (dok nije otvoren) */
  .nn-nav{
    display:none;
    position:absolute;
    left: 0;
    right: 0;
    top: calc(100% + 10px);
    padding: 14px;
    border-radius: var(--nn-radius);
    border: 1px solid var(--nn-border);
    background: var(--nn-card);
    z-index: 9999;
  }

  .nn-nav.is-open{
    display:block;
  }

  .nn-nav .nn-menu,
  .nn-nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:8px;
  }

  .nn-nav a{
    padding: 12px 12px;
    border-radius: 12px;
    background: transparent;
  }

  .nn-nav a:hover{
    background: rgba(0,0,0,.06);
  }
  html.nn-dark .nn-nav a:hover{
    background: rgba(255,255,255,.08);
  }

  /* da header ne bude pretrpan: socijalne ikonice malo manje */
  .nn-social-link{
    width:34px;
    height:34px;
  }

  .nn-site-title{
    max-width: 32vw;
  }
}

/* =========================
   Footer
   ========================= */

.nn-site-footer{
  border-top: 1px solid var(--nn-border);
  margin-top: 4rem;
  padding: 2.5rem 0 2rem;
  background: var(--nn-bg);
}

.nn-footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:1.25rem;
}

@media (max-width: 900px){
  .nn-footer-grid{ grid-template-columns: 1fr; }
}

.footer-widget-title{
  margin:0 0 .6rem;
  font-size:1rem;
}

.nn-footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--nn-border);
}

.nn-footer-menu ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
}

.nn-footer-menu a{
  text-decoration:none;
  font-weight:800;
}