/* ============================
   CarSite – motoryzacyjny skin
   Plik: site/static/css/custom.css
   Statyczne obrazy:
     /images/hero.jpg
     /images/usluga-mechanika.jpg
     /images/usluga-geo.jpg
   ============================ */

/* Kolory i akcenty */
:root{
  --auto-bg:#0b0d10;        /* tło */
  --auto-card:#12161c;      /* karty/sekcje */
  --auto-soft:#171c22;      /* lekko jaśniejsze tło */
  --auto-text:#eaeef3;      /* podstawowy tekst */
  --auto-text-dim:#c8cfd8;  /* przygaszony tekst */
  --auto-accent:#e10600;    /* czerwony „racing” */
  --auto-accent-2:#ffcc00;  /* żółty – CTA alternatywny */
  --auto-border:#232935;    /* delikatne obrysy */
}

/* Bazowe tła / typografia */
html, body{
  background:var(--auto-bg);
  color:var(--auto-text);
}

::selection{ background: color-mix(in oklab, var(--auto-accent) 35%, #fff 65%); color:#000; }
a{ color:var(--auto-text); }
a:hover{ color:#fff; opacity:.9; }

/* Nawigacja i stopka */
.navbar, .navbar-menu, .footer{
  background:var(--auto-bg) !important;
  color:var(--auto-text);
  border-bottom:1px solid var(--auto-border);
}
.navbar-item, .navbar-link{ color:var(--auto-text) !important; }
.navbar-item.is-active, .navbar-item:hover,
.navbar-link.is-active, .navbar-link:hover{ color:#fff !important; }

/* Hero – foto z warsztatu + przyciemnienie */
.hero{
  position:relative;
  background:
    linear-gradient(180deg, rgba(11,13,16,.78), rgba(11,13,16,.92)),
    url('/images/hero.jpg') center / cover no-repeat;
  color:var(--auto-text);
}
.hero.is-large{ min-height: 72vh; }
.hero .title{ color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.55); }
.hero .subtitle{ color:var(--auto-text-dim); max-width: 48rem; }

/* Odznaka z godzinami/USP – możesz użyć w hero */
.badge-hours{
  display:inline-block; margin-left:.5rem;
  padding:.35rem .6rem; border-radius:.45rem;
  border:1px solid rgba(255,255,255,.22);
  color:#fff; font-size:.9rem; opacity:.9;
}

/* Sekcje i „karty” */
.section{ background:var(--auto-bg); }
.box, .card, .tile{
  background:var(--auto-card);
  color:var(--auto-text);
  border:1px solid var(--auto-border);
  border-radius:14px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.box:hover, .card:hover, .tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
  border-color: color-mix(in oklab, var(--auto-border) 70%, #fff 30%);
}

/* Kafelki usług – warianty z tłem foto (opcjonalnie pod kafle .box/.card) */
.bg-mechanika{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('/images/usluga-mechanika.jpg') center/cover no-repeat;
  color:#fff;
}
.bg-geo{
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)),
    url('/images/usluga-geo.jpg') center/cover no-repeat;
  color:#fff;
}

/* Przyciski – czerwony/gold jako akcenty */
.button{
  transition: transform .08s ease, filter .08s ease, box-shadow .12s ease;
}
.button:active{ transform: translateY(1px); }

.button.is-dark,
.button.is-link,
.button.is-danger{
  background:var(--auto-accent) !important;
  border-color: transparent !important;
  color:#fff !important;
}
.button.is-dark:hover{ filter: brightness(1.08); }

.button.is-primary{
  background:var(--auto-accent-2) !important;
  border-color: transparent !important;
  color:#111 !important;
}
.button.is-light{
  background:#222;
  color:#fff;
  border-color:#222;
}
.button.is-light:hover{ filter: brightness(1.08); }

/* Formularze – ciemne pola, wyraźne focusy */
.input, .textarea, .select select{
  background:var(--auto-soft);
  color:var(--auto-text);
  border:1px solid var(--auto-border);
  border-radius:10px;
}
.input::placeholder, .textarea::placeholder{ color:#9aa3af; }
.input:focus, .textarea:focus, .select select:focus{
  border-color: var(--auto-accent);
  box-shadow: 0 0 0 .2rem color-mix(in oklab, var(--auto-accent) 25%, transparent 75%);
}

/* Mapa w kontakcie */
#kontakt iframe{
  border-radius:12px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* Drobne helpery */
hr{ background:var(--auto-border); }
.title, .subtitle{ color:var(--auto-text); }

/* Anchor offset – gdy klikasz w #uslugi itd. */
[id]{ scroll-margin-top: 84px; }
html{ scroll-behavior:smooth; }

/* Mobile – delikatne korekty */
@media (max-width: 1023px){
  .hero.is-large{ min-height: 64vh; }
  .navbar-menu{ backdrop-filter: blur(6px); }
}
@media (max-width: 768px){
  .hero{ background-position:center 25%; }
  .button + .button{ margin-left:.5rem; }
}