/* ============================================================
   EcoReuse – Shared Stylesheet
   ============================================================ */

/* RESET & BASE */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
}

body {
  background: #f7f9fb;
  color: #222;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
}

/* Apply dark mode instantly before paint to avoid flash */
body.dark-init {
  background: #111 !important;
  color: #eee !important;
}

.container {
  width: 90%;
  max-width: 1200px;
  margin: auto;
}

/* ── NAV ── */
nav {
  background: white;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  transition: background 0.3s, box-shadow 0.3s;
}

.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
}

nav h2 {
  color: #2e7d32;
  font-size: 1.3rem;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

nav h2 a {
  color: inherit;
  text-decoration: none;
}

.nav-right {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 2px;
  margin-right: 12px;
}

.nav-links a {
  text-decoration: none;
  color: #444;
  font-weight: 500;
  font-size: 0.92rem;
  padding: 7px 14px;
  border-radius: 6px;
  transition: background 0.2s, color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  background: #f0f5f0;
  color: #2e7d32;
}

.nav-divider {
  width: 1px;
  height: 22px;
  background: #e0e0e0;
  margin: 0 12px;
  flex-shrink: 0;
  transition: background 0.3s;
}

/* ── LANGUAGE DROPDOWN ── */
.lang-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.lang-selected {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: #444;
  font-family: 'Inter', sans-serif;
  background: transparent;
  border: none;
  transition: background 0.2s, color 0.2s;
  user-select: none;
}

.lang-selected:hover {
  background: #f0f5f0;
  color: #2e7d32;
}

.lang-selected .lang-flag { font-size: 1rem; line-height: 1; }
.lang-selected .lang-caret { font-size: 9px; color: #aaa; transition: transform 0.2s; margin-left: 1px; }
.lang-dropdown.open .lang-selected { background: #f0f5f0; color: #2e7d32; }
.lang-dropdown.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  overflow: hidden;
  min-width: 110px;
  z-index: 100;
}

.lang-dropdown.open .lang-menu { display: block; }

.lang-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #444;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: 'Inter', sans-serif;
}

.lang-option:hover { background: #f0f5f0; color: #2e7d32; }
.lang-option.active { color: #2e7d32; font-weight: 600; }
.lang-option .lang-flag { font-size: 1rem; }

/* ── DARK MODE TOGGLE ── */
.theme-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: 10px;
}

.toggle-icon { font-size: 13px; line-height: 1; transition: opacity 0.2s; }

.toggle-track {
  width: 42px;
  height: 24px;
  border-radius: 12px;
  background: #e0e0e0;
  cursor: pointer;
  position: relative;
  transition: background 0.3s;
  flex-shrink: 0;
  border: none;
  padding: 0;
  outline: none;
}

.toggle-track.on { background: #2e7d32; }

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 4px rgba(0,0,0,0.18);
  transition: transform 0.25s cubic-bezier(.4,0,.2,1);
}

.toggle-track.on .toggle-thumb { transform: translateX(18px); }

/* ── PAGE HERO (inner pages) ── */
.page-hero {
  background: linear-gradient(135deg, #2e7d32 0%, #1b5e20 100%);
  color: white;
  padding: 70px 0 60px;
  text-align: center;
}

.page-hero h1 { font-size: 2.6rem; margin-bottom: 12px; letter-spacing: -0.5px; }
.page-hero p  { font-size: 1.1rem; opacity: 0.88; max-width: 560px; margin: 0 auto; }

@media (max-width: 768px) {
  .page-hero h1 { font-size: 2rem; }
}

/* ── FOOTER ── */
footer {
  text-align: center;
  padding: 30px;
  font-size: 14px;
  background: #eee;
  transition: background 0.3s, color 0.3s;
}

/* ── COOKIE BANNER ── */
#cookie-banner {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 32px));
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  padding: 20px 24px;
  z-index: 9999;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  animation: cookie-in 0.35s cubic-bezier(.4,0,.2,1);
}

#cookie-banner.hide {
  animation: cookie-out 0.3s cubic-bezier(.4,0,.2,1) forwards;
}

@keyframes cookie-in {
  from { opacity: 0; transform: translateX(-50%) translateY(16px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes cookie-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to   { opacity: 0; transform: translateX(-50%) translateY(16px); }
}

.cookie-icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; margin-top: 2px; }
.cookie-body { flex: 1; }
.cookie-body p { font-size: 0.84rem; color: #555; line-height: 1.5; margin-bottom: 12px; }
.cookie-body p a { color: #2e7d32; text-decoration: underline; }
.cookie-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.cookie-btn {
  padding: 7px 16px;
  border-radius: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s, color 0.2s;
}

.cookie-btn.accept { background: #2e7d32; color: white; }
.cookie-btn.accept:hover { background: #245f26; }
.cookie-btn.decline { background: #f0f0f0; color: #555; }
.cookie-btn.decline:hover { background: #e4e4e4; color: #333; }

/* ── INDEX PAGE ── */
.hero {
  position: relative;
  height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("Slike/hardware-closeup.webp") center/cover no-repeat;
  z-index: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  padding: 20px;
}

.hero h1 { font-size: 3.5rem; margin-bottom: 20px; line-height: 110%; }
.hero p  { font-size: 1.2rem; margin-bottom: 30px; }

.hero-btn {
  display: inline-block;
  padding: 12px 28px;
  background: #2ecc71;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s;
}

.hero-btn:hover { background: #27ae60; }

section { padding: 80px 0; }
section h2 { text-align: center; margin-bottom: 40px; font-size: 32px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.card {
  background: white;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  text-align: left;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.3s;
}

/* Hover zoom */
.card:hover {
  transform: scale(1.04);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.card img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 6px;
  margin-bottom: 15px;
}

.impact { background: #2e7d32; color: white; }

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 60px;
  text-align: center;
}

.stat h3 { font-size: 40px; }

.cta { text-align: center; background: #111; color: white; }

.btn {
  display: inline-block;
  padding: 12px 28px;
  background: #2ecc71;
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s;
  margin-top: 20px;
}

.btn:hover { background: #27ae60; }

/* ── O NAMA PAGE ── */
.section-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #2e7d32;
  margin-bottom: 8px;
}

.mission-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.mission-text p { color: #555; font-size: 1rem; line-height: 1.75; margin-top: 16px; }

.mission-visual {
  background: white;
  border-radius: 12px;
  box-shadow: 0 6px 24px rgba(0,0,0,0.07);
  overflow: hidden;
}

.mission-visual img { width: 100%; height: 300px; object-fit: cover; display: block; }

@media (max-width: 768px) {
  .mission-split { grid-template-columns: 1fr; gap: 32px; }
}

.values-section { background: white; transition: background 0.3s; }

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.value-card {
  background: #f7f9fb;
  border-radius: 10px;
  padding: 28px 22px;
  transition: background 0.3s, box-shadow 0.2s;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); }

.value-icon {
  width: 112px;
  height: 112px;
  border-radius: 20px;
  background: #eaf5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: background 0.3s;
}

.value-icon .material-icons { font-size: 60px; color: #2e7d32; }
.value-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; text-align: left; width: 100%; }
.value-card p  { font-size: 0.88rem; color: #666; line-height: 1.6; text-align: left; width: 100%; }

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 40px;
}

.team-card {
  background: white;
  border-radius: 12px;
  padding: 28px 20px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transition: background 0.3s;
}

.team-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2e7d32, #2ecc71);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.team-avatar .material-icons { font-size: 32px; color: white; }
.team-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 4px; }
.team-card p  { font-size: 0.83rem; color: #888; }

.map-section { background: #f0f5f0; transition: background 0.3s; }

.map-layout {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
  align-items: start;
  margin-top: 40px;
}

@media (max-width: 768px) {
  .map-layout { grid-template-columns: 1fr; }
}

.map-info h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 16px; }

.map-detail { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 14px; }

.map-detail-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: #eaf5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}

.map-detail-icon .material-icons { font-size: 18px; color: #2e7d32; }
.map-detail-text { font-size: 0.9rem; color: #555; line-height: 1.5; }
.map-detail-text strong { display: block; color: #222; font-weight: 600; margin-bottom: 2px; }

.map-embed { border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0,0,0,0.10); height: 360px; }
.map-embed iframe { width: 100%; height: 100%; border: none; display: block; }

/* ── KONTAKT PAGE ── */
.contact-section { padding: 72px 0; }

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 768px) {
  .contact-layout { grid-template-columns: 1fr; gap: 36px; }
}

.contact-info-title  { font-size: 1.3rem; font-weight: 700; margin-bottom: 6px; }
.contact-info-subtitle { font-size: 0.9rem; color: #777; margin-bottom: 28px; }

.contact-item { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 20px; }

.contact-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #eaf5ea;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.3s;
}

.contact-item-icon .material-icons { font-size: 20px; color: #2e7d32; }

.contact-item-text strong { display: block; font-size: 0.88rem; font-weight: 700; margin-bottom: 2px; }
.contact-item-text span  { font-size: 0.88rem; color: #666; }
.contact-item-text a     { color: #2e7d32; text-decoration: none; font-size: 0.88rem; }
.contact-item-text a:hover { text-decoration: underline; }

.form-card {
  background: white;
  border-radius: 14px;
  padding: 36px 32px;
  box-shadow: 0 6px 28px rgba(0,0,0,0.07);
  transition: background 0.3s, box-shadow 0.3s;
}

.form-title    { font-size: 1.2rem; font-weight: 700; margin-bottom: 4px; }
.form-subtitle { font-size: 0.86rem; color: #888; margin-bottom: 24px; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 480px) {
  .form-row { grid-template-columns: 1fr; }
  .form-card { padding: 24px 18px; }
}

.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 0.82rem; font-weight: 600; color: #555; margin-bottom: 6px; }

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 13px;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Inter', sans-serif;
  color: #222;
  background: #fafafa;
  transition: border-color 0.2s, background 0.2s;
  outline: none;
}

.form-group input:focus,
.form-group textarea:focus { border-color: #2e7d32; background: white; }

.form-group textarea { resize: vertical; min-height: 110px; }

.form-group select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.form-submit {
  width: 100%;
  padding: 12px;
  background: #2e7d32;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: background 0.2s, transform 0.15s;
  margin-top: 4px;
}

.form-submit:hover  { background: #245f26; }
.form-submit:active { transform: scale(0.99); }

.form-success { display: none; text-align: center; padding: 24px 0 8px; }
.form-success-icon { font-size: 2.8rem; margin-bottom: 12px; }
.form-success h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.form-success p  { font-size: 0.88rem; color: #777; }

/* ============================================================
   DARK MODE - Optimizirano za klasu na <html> elementu
   ============================================================ */

.dark body { 
    background: #111; 
    color: #eee; 
}

/* Navigacija */
.dark nav { 
    background: #1a1a1a; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.3); 
}

.dark .nav-links a { color: #bbb; }
.dark .nav-links a:hover,
.dark .nav-links a.active { 
    background: #2a2a2a; 
    color: #2ecc71; 
}

.dark .nav-divider { background: #333; }

/* Mobilni meni - jako bitno da pozadina ne ostane bijela */
@media (max-width: 768px) {
    .dark .nav-right {
        background: #1a1a1a;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    }
}

/* Jezik Dropdown */
.dark .lang-selected { color: #bbb; }
.dark .lang-selected:hover,
.dark .lang-dropdown.open .lang-selected { 
    background: #2a2a2a; 
    color: #2ecc71; 
}
.dark .lang-menu { 
    background: #1f1f1f; 
    box-shadow: 0 4px 16px rgba(0,0,0,0.4); 
    border: 1px solid #333;
}
.dark .lang-option { color: #bbb; }
.dark .lang-option:hover { 
    background: #2a2a2a; 
    color: #2ecc71; 
}
.dark .lang-option.active { color: #2ecc71; }

/* Theme Toggle Prekidač */
.dark .toggle-track { background: #3a3a3a; }
.dark .toggle-track.on { background: #2e7d32; }
.dark .toggle-thumb { background: #eee; }

/* Footer */
.dark footer { 
    background: #1a1a1a; 
    color: #888; 
    border-top: 1px solid #222;
}

/* Cookie Banner */
.dark #cookie-banner { 
    background: #1f1f1f; 
    box-shadow: 0 8px 32px rgba(0,0,0,0.4); 
    border-top: 2px solid #2e7d32;
}
.dark .cookie-body p  { color: #aaa; }
.dark .cookie-btn.decline { 
    background: #2a2a2a; 
    color: #aaa; 
}
.dark .cookie-btn.decline:hover { 
    background: #333; 
    color: #ccc; 
}

/* --- Index Stranica --- */
.dark .card { 
    background: #1f1f1f; 
    border: 1px solid #2a2a2a;
}
.dark .card h3 { color: #eee; }
.dark .card p { color: #aaa; }

/* --- O nama --- */
.dark .values-section { background: #161616; }
.dark .value-card { 
    background: #1f1f1f; 
    border: 1px solid #2a2a2a;
}
.dark .value-card p { color: #999; }
.dark .team-card { background: #1f1f1f; }
.dark .team-card p { color: #777; }
.dark .map-section { background: #161616; }
.dark .map-detail-text { color: #aaa; }
.dark .map-detail-text strong { color: #ddd; }
.dark .mission-text p { color: #aaa; }
.dark .mission-visual { 
    background: #1f1f1f; 
    box-shadow: 0 6px 24px rgba(0,0,0,0.5); 
}

/* --- Kontakt --- */
.dark .form-card { 
    background: #1a1a1a; 
    box-shadow: 0 6px 28px rgba(0,0,0,0.4); 
    border: 1px solid #2a2a2a;
}
.dark .form-title { color: #eee; }
.dark .form-subtitle { color: #666; }
.dark .form-group label { color: #999; }
.dark .form-group input,
.dark .form-group select,
.dark .form-group textarea { 
    background: #111; 
    border-color: #333; 
    color: #eee; 
}
.dark .form-group input:focus,
.dark .form-group textarea:focus { 
    border-color: #2ecc71; 
    background: #161616; 
}
.dark .contact-info-subtitle { color: #666; }
.dark .contact-item-icon { background: #1f2e1f; }
.dark .contact-item-text span { color: #888; }
.dark .contact-item-text a { color: #2ecc71; }
.dark .form-success p { color: #888; }

/* Hamburger Button (hidden by default) */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #2e7d32;
}

@media (max-width: 768px) {
  .menu-toggle { display: block; }

  .nav-right {
    display: none; /* Hide menu by default on mobile */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    flex-direction: column;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    gap: 20px;
  }

  /* Show menu when 'active' class is added via JS */
  .nav-right.active {
    display: flex;
  }

  .nav-links {
    flex-direction: column;
    width: 100%;
    text-align: center;
  }

  .nav-divider { display: none; } /* Hide divider on mobile */
  
  .dark .nav-right { background: #1a1a1a; }
}