/*
 * Auto Otpad — boje.
 *
 * Zatečeno je bilo vatrogasno crveno (#e8442e / #ff3b30) na skoro crnoj
 * podlozi, uz jak crveni preljev preko cijelog poziva na dnu. Crvena u tolikoj
 * količini čita se kao upozorenje, a ne kao poziv — i pojede sve ostalo na
 * strani.
 *
 * Novo: grafitna podloga sa blagim plavim tonom umjesto mrtve crne, i jedan
 * topli jantarni naglasak. Jantarna je boja radionice — svjetlo, mesing,
 * ulje — i primjerena je poslu, a mnogo manje viče. Čelično plava služi kao
 * druga boja za mirne elemente, da naglasak ostane rijedak i time jak.
 *
 * Fajl se učitava POSLIJE teme, pa mijenja boje bez diranja `style.css`.
 * Skidanjem ovog fajla sve se vraća na staro.
 */

:root {
  /* Podloge — od najtamnije ka svjetlijoj. */
  --ao-dno:      #12141a;
  --ao-podloga:  #171a22;
  --ao-kartica:  #1d212b;
  --ao-ivica:    #2a3040;

  /* Naglasak. */
  --ao-zar:      #f0a02a;   /* jantar — glavno dugme i istaknuto */
  --ao-zar-jak:  #ffb648;
  --ao-zar-tam:  #c97f14;

  /* Druga boja, za mirne elemente. */
  --ao-celik:    #5b8db8;

  /* Tekst. */
  --ao-tekst:    #e9edf4;
  --ao-tiho:     #98a3b5;
}

/* --- podloge --------------------------------------------------------- */

body,
.site-header,
.hero,
.section,
.footer,
.site-footer {
  background-color: var(--ao-podloga) !important;
}

.section--gray,
.faq-section {
  background-color: var(--ao-dno) !important;
}

/* Hero je imao tamni preljev sa crvenim sjajem u uglu. */
.hero {
  background-image:
    radial-gradient(900px 420px at 78% -10%, rgba(240, 160, 42, .10), transparent 65%),
    radial-gradient(700px 380px at 8% 0%, rgba(91, 141, 184, .08), transparent 60%) !important;
}

/* --- tekst ------------------------------------------------------------ */

body,
.hero__title,
.section__title,
.cta__title {
  color: var(--ao-tekst) !important;
}

.hero__subtitle,
.cta__text,
.ao-korak p,
.faq-item__answer p {
  color: var(--ao-tiho) !important;
}

.hero__highlight {
  color: var(--ao-zar) !important;
}

/* --- dugmad ----------------------------------------------------------- */

.btn--primary,
.hero__search-btn {
  background: var(--ao-zar) !important;
  border-color: var(--ao-zar) !important;
  /* Na jantarnoj podlozi bijelo slovo ima slab kontrast; tamno je čitljivije. */
  color: #1a1206 !important;
  font-weight: 700 !important;
}

.btn--primary:hover,
.hero__search-btn:hover {
  background: var(--ao-zar-jak) !important;
  border-color: var(--ao-zar-jak) !important;
}

.btn--outline,
.btn--outline-light {
  border-color: var(--ao-ivica) !important;
  color: var(--ao-tekst) !important;
  background: transparent !important;
}

.btn--outline:hover,
.btn--outline-light:hover {
  border-color: var(--ao-zar) !important;
  color: var(--ao-zar) !important;
}

/* --- kartice i ivice --------------------------------------------------- */

.category-card,
.brand-card,
.oglas-card,
.faq-item,
.ao-korak,
.firm-card {
  background: var(--ao-kartica) !important;
  border-color: var(--ao-ivica) !important;
}

.category-card:hover,
.brand-card:hover,
.oglas-card:hover {
  border-color: var(--ao-zar-tam) !important;
}

/* --- poziv na dnu ------------------------------------------------------ */

/*
 * Bio je pun crveni preljev preko cijele širine. Sada je mirna tamna ploča
 * sa jantarnom ivicom — istakne se, a ne nadjača stranu.
 */
.cta {
  background: linear-gradient(180deg, #202535 0%, #1a1e29 100%) !important;
  border: 1px solid var(--ao-zar-tam) !important;
  box-shadow: 0 0 0 1px rgba(240, 160, 42, .06),
              0 24px 60px -30px rgba(0, 0, 0, .9) !important;
}

.cta__title,
.cta__text {
  color: var(--ao-tekst) !important;
}

.cta .btn--primary {
  background: var(--ao-zar) !important;
  color: #1a1206 !important;
}

/* --- zaglavlje --------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--ao-ivica) !important;
}

.site-header__link:hover {
  color: var(--ao-zar) !important;
}

/* Veza „Tražim dio" je glavna radnja na sajtu i nosi boju naglaska. */
.site-header__link[href*="trazim-dio"],
.mobile-menu__link[href*="trazim-dio"] {
  color: var(--ao-zar) !important;
}

/* --- obrazac ----------------------------------------------------------- */

.ao-forma {
  background: var(--ao-kartica) !important;
  border: 1px solid var(--ao-ivica);
}

.ao-forma input,
.ao-forma textarea {
  background: #12151d !important;
  border-color: var(--ao-ivica) !important;
  color: var(--ao-tekst) !important;
}

.ao-forma input:focus,
.ao-forma textarea:focus {
  outline: none;
  border-color: var(--ao-zar) !important;
  box-shadow: 0 0 0 3px rgba(240, 160, 42, .14);
}

.ao-forma button {
  background: var(--ao-zar) !important;
  color: #1a1206 !important;
}

.ao-korak__broj {
  background: var(--ao-zar) !important;
  color: #1a1206 !important;
}

.ao-cip:hover {
  border-color: var(--ao-zar) !important;
  color: var(--ao-zar) !important;
}

/* --- razmaci i logo ---------------------------------------------------- */

/*
 * Naslovna je između podnaslova i obrasca imala prazninu od dvjestotinjak
 * piksela — obrazac je padao ispod pregiba, a on je jedina radnja na strani.
 */
.hero {
  padding-bottom: 8px !important;
}

.hero + .section {
  padding-top: 10px !important;
}

/* Logo je ostao vatrogasno crven pa se tuče sa jantarnom. */
.site-header__logo svg,
.site-footer__logo svg,
.site-header__logo svg *,
.site-footer__logo svg * {
  fill: var(--ao-zar) !important;
  color: var(--ao-zar) !important;
}

.site-header__logo span,
.site-footer__logo span {
  color: var(--ao-tekst) !important;
}

/* --- telefon ----------------------------------------------------------- */

/*
 * Dugme „Imate otpad? Pišite nam" je sa hamburgerom prelazilo širinu
 * ekrana, pa se cijela strana pomjerala ustranu. Na uskom ekranu ostaje
 * kratak natpis — mejl je i dalje jedan dodir.
 */
@media (max-width: 600px) {
  .site-header__actions .btn--primary {
    font-size: 0 !important;          /* sakrij duži natpis */
    padding: 8px 12px !important;
    white-space: nowrap;
  }
  .site-header__actions .btn--primary::after {
    content: "Imate otpad?";
    font-size: 13px;
    font-weight: 700;
  }
}

@media (max-width: 420px) {
  .site-header__actions .btn--primary::after {
    content: "Pišite";
  }
}

/* Ništa ne smije da gura stranu ustranu. */
html, body {
  overflow-x: hidden;
}

/* --- veze u tekstu ----------------------------------------------------- */

/*
 * Ostale su crvene iz stare palete pa se tuku sa jantarnom. Sve veze unutar
 * sadržaja idu u boju naglaska.
 */
.ao-imenik__uvod a,
.ao-grupa__uvod a,
.ao-imenik__poziv a,
.ao-firma__poziv a,
.ao-firma__sitno a,
.ao-strana a,
.entry-content a,
.cta__text a {
  color: var(--ao-zar) !important;
  text-decoration: none;
}

.ao-imenik__uvod a:hover,
.ao-grupa__uvod a:hover,
.ao-imenik__poziv a:hover,
.ao-strana a:hover,
.entry-content a:hover {
  text-decoration: underline;
}