/**
 * Minimalan, neutralan, pristupačan fallback izgled za .bn-push-button —
 * osigurava da kontrola bude uočljiva i upotrebljiva čak i bez ijedne
 * teme-specifične linije. Tema (npr. .push-subscribe-btn u Tarickova
 * css/design-system.css) po potrebi nadjačava izgled preko iste klase koja
 * se dodaje na isto dugme — ovaj CSS je sigurnosna mreža, ne konačan dizajn.
 */

.bn-push-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 44px;
  padding: 0.6em 1.2em;
  font: inherit;
  font-size: 0.95rem;
  color: #ffffff;
  background: #3730a3;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
}

.bn-push-button:hover {
  background: #312e81;
}

.bn-push-button:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 2px;
}

.bn-push-button[aria-pressed="true"] {
  background: #15803d;
}

.bn-push-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/*
 * Bez ovoga bi HTML5 "hidden" atribut bio nadjačan pravilom ".bn-push-button
 * { display: inline-flex }" iznad — autorski CSS koji eksplicitno postavlja
 * display uvijek nadjača UA-pravilo "[hidden] { display: none }", bez obzira
 * na specifičnost. Isti obrazac kao ".dropdown-menu[hidden]" u
 * design-system.css teme.
 */
.bn-push-button[hidden] {
  display: none;
}

.bn-push-unsupported {
  font-size: 0.85rem;
  opacity: 0.85;
  margin: 0;
}

.bn-push-status {
  display: block;
  font-size: 0.85rem;
  margin-top: 0.4em;
}

@media (prefers-color-scheme: dark) {
  .bn-push-button {
    background: #4f46e5;
  }
  .bn-push-button:hover {
    background: #6d28d9;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bn-push-button {
    transition: none;
  }
}

/**
 * Diskretan discovery banner — dodatni put do iste subscribe kontrole, ne
 * odvojena logika. Bez animacije pri pojavljivanju/nestajanju (samo "hidden"
 * atribut) — jednostavnije i inherentno ne krši prefers-reduced-motion, jer
 * ga nema šta da krši. Tema (design-system.css, odjeljak 29) doteruje boje
 * na stvarne Blindography tokene preko iste klase.
 */
.bn-push-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 1em 1.25em;
  margin: 1em auto;
  /* Bočni razmak od ivice ekrana na uskim širinama — bez ovoga bi kutija
   * (koja, za razliku od .container, ima vidljivu pozadinu/sjenu/zaobljene
   * uglove) doslovno dodirivala ivice ekrana na mobitelu, jer "margin: ...
   * auto" sam po sebi ne daje razmak kad je element već pun širine
   * kontejnera. max() prelazi na fiksnih 16px čim automatsko centriranje
   * padne ispod toga (isti obrazac kao .container u temi, koja koristi
   * var(--space-4) — ovdje literalna vrijednost jer ovaj fajl mora raditi
   * i bez teme). */
  margin-left: max(16px, calc((100% - 1200px) / 2));
  margin-right: max(16px, calc((100% - 1200px) / 2));
  max-width: 1200px;
  background: #eef1ff;
  border-left: 4px solid #3730a3;
  border-radius: 10px;
}

.bn-push-banner-content {
  flex: 1 1 240px;
}

.bn-push-banner-eyebrow {
  margin: 0 0 0.2em;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #3730a3;
}

.bn-push-banner-text {
  margin: 0;
  font-size: 0.95rem;
}

.bn-push-banner-actions {
  display: flex;
  gap: 0.6em;
  flex-wrap: wrap;
}

/* Isti razlog kao .bn-push-button[hidden] iznad — bez ovoga banner ostaje
 * vizuelno prikazan i nakon što JS ispravno postavi hidden = true (dismiss,
 * uspješna pretplata, već-pretplaćen korisnik...), jer ".bn-push-banner {
 * display: flex }" nadjačava "[hidden] { display: none }". */
.bn-push-banner[hidden] {
  display: none;
}

/* Isti razlog, treći put: #bn-push-banner-subscribe je obično <button
 * class="button">, a tema (design-system.css, odjeljak 9) postavlja
 * "display: inline-flex" na SVAKO dugme na web stranici. Bez ovoga, JS-ovo
 * "subscribeBtn.hidden = true" (iOS varijanta bannera, gdje dugme za
 * pretplatu namjerno ne treba postojati) ne bi imalo nikakav vizuelni
 * efekat. */
#bn-push-banner-subscribe[hidden] {
  display: none;
}

@media (prefers-color-scheme: dark) {
  .bn-push-banner {
    background: #1a1f3d;
    border-left-color: #4f46e5;
  }
  .bn-push-banner-eyebrow {
    color: #8b85f0;
  }
}

/**
 * Minimalan, neutralan fallback izgled za formu prijave na newsletter —
 * isti "sigurnosna mreža, ne konačan dizajn" princip kao .bn-push-button
 * na vrhu ovog fajla. Polja forme koriste ISTI ".form-group"/".field-error"/
 * ".button-full-width" markup kao page-kontakt.php u temi (vidi
 * Newsletter_Frontend::render_form() docblock) — taj izgled već dolazi iz
 * design-system.css teme (odjeljak FORMS), pa ovdje nije potrebno ništa
 * ponavljati za sama polja. Ostaje samo razmak oko cijele regije i izgled
 * poruke o ishodu prijave (".bn-newsletter-notice-*"), koje design-system.css
 * ne pokriva jer su specifične za ovaj dodatak.
 */
.bn-newsletter-region {
  margin: 1.5em 0;
}

.bn-newsletter-notice {
  padding: 0.75em 1em;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 1em;
}

/* Rezervisan #bn-newsletter-result div je uvijek u DOM-u (JS ga samo puni
 * tekstom, vidi newsletter-subscribe.js docblock — dinamički UMETNUT
 * role="alert" element čitači ekrana ponekad ne prepoznaju pouzdano) — bez
 * ovoga bi prazna kutija s paddingom stalno zauzimala prostor prije prve
 * predaje forme. Isti ":empty" obrazac kao .field-error u design-system.css
 * teme. */
.bn-newsletter-notice:empty {
  display: none;
}

.bn-newsletter-notice-ok {
  background: #eafaf0;
  color: #157a3d;
}

.bn-newsletter-notice-error {
  background: #fef2f2;
  color: #c81e1e;
}

@media (prefers-color-scheme: dark) {
  .bn-newsletter-notice-ok {
    background: #113322;
    color: #4ade80;
  }
  .bn-newsletter-notice-error {
    background: #3a1414;
    color: #f87171;
  }
}

/* Diskretna animacija pri pojavljivanju poruke o ishodu — čisto vizuelno,
 * za korisnike koji je mogu vidjeti (čitač ekrana dobija istu informaciju
 * odmah preko role="alert" + pomjerenog fokusa, bez obzira na animaciju).
 * Namjerno isključena pod prefers-reduced-motion, isti obrazac kao
 * .bn-push-button transition ranije u ovom fajlu. */
@media (prefers-reduced-motion: no-preference) {
  .bn-newsletter-notice--animate {
    animation: bn-newsletter-notice-in 0.35s ease-out;
  }
}

@keyframes bn-newsletter-notice-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}