/* ---------------------------------------------------------------------
   Pasica za privolitev.

   Svoja datoteka, ker jo nalozijo VSE strani — svetovna na platnu in tri
   z besedilom, ki imata sicer vsaka svoj slog. Barve so zapisane
   neposredno in ne prek spremenljivk: `site.css` in `doc.css` ju
   poimenujeta enako, a ne enako definirata, in pasica mora izgledati
   isto povsod.
   --------------------------------------------------------------------- */

#consent {
  position: fixed;
  left: 50%;
  bottom: max(1rem, env(safe-area-inset-bottom));
  transform: translate(-50%, 130%);
  z-index: 50;
  width: min(46rem, calc(100vw - 2rem));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1.4rem;
  padding: 1rem 1.2rem;
  background: #0e131d;
  border: 2px solid #f9c22e;
  border-radius: 3px;
  box-shadow: 0 12px 44px rgba(0, 0, 0, .6);
  font: 400 13px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: #f9f7f3;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1);
}
#consent.show { transform: translate(-50%, 0); }

#consent p { margin: 0; flex: 1 1 20rem; opacity: .9; }
#consent strong { color: #f9c22e; }
#consent a { color: #f9c22e; }

.consent-buttons { display: flex; gap: .6rem; flex: 0 0 auto; }

#consent button {
  font: inherit;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .7rem 1.1rem;         /* >= 44 px visoko, za prst in ne za miško */
  border-radius: 2px;
  cursor: pointer;
  border: 2px solid transparent;
}
.consent-no {
  background: none;
  color: #f9f7f3;
  border-color: rgba(249, 247, 243, .3);
}
.consent-no:hover { border-color: #f9f7f3; }
.consent-yes {
  background: #f9c22e;
  color: #0e131d;
  font-weight: 700;
  box-shadow: 0 3px 0 #b8891a;
}
.consent-yes:hover { transform: translateY(2px); box-shadow: 0 1px 0 #b8891a; }
#consent button:focus-visible { outline: 3px solid #f9f7f3; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #consent { transition: none; transform: translate(-50%, 0); }
  .consent-yes:hover { transform: none; }
}

@media (max-width: 480px) {
  #consent { font-size: 12px; }
  .consent-buttons { width: 100%; }
  #consent button { flex: 1; }
}