/* =====================================================================
   modern.css — warstwa odświeżająca wygląd (additive refinement layer)
   ---------------------------------------------------------------------
   Ten plik NIE zmienia układu, znaczników ani rozmieszczenia elementów.
   Dokłada wyłącznie kosmetyczne usprawnienia: czytelniejszą typografię,
   miększe cienie, delikatne animacje hover, lepsze stany focus.
   Ładowany PO style.css, więc nadpisuje tylko wybrane właściwości.
   Aby cofnąć wszystkie zmiany: usuń <link ... modern.css> ze stron
   (albo skasuj ten plik). Nic więcej nie trzeba.
   ===================================================================== */

/* 1. Wygładzenie czcionek (ostrzejszy, nowocześniejszy tekst) ---------- */
body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* 2. Lepszy kontrast tekstu (#999 jest zbyt jasny -> słaba czytelność).
      Ciemniejszy odcień poprawia czytelność i wygląda świeżej.         */
body {
	color: #5b6573;
}

/* 3. Zaznaczanie tekstu w kolorze marki ------------------------------- */
::selection {
	background: rgba(0, 128, 1, 0.18);
	color: #1f2733;
}
::-moz-selection {
	background: rgba(0, 128, 1, 0.18);
	color: #1f2733;
}

/* 4. Czytelne obramowanie focus dla osób korzystających z klawiatury
      (dostępność + porządek wizualny). :focus-visible nie pokazuje
      obrysu przy kliknięciu myszą.                                     */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
	outline: 2px solid #008001;
	outline-offset: 2px;
}

/* 5. Miększe, bardziej rozproszone cienie kart zamiast twardego 2px.
      Dodatkowo subtelne uniesienie przy najechaniu (mikrointerakcja).  */
.team-box,
.services-two,
.price-box,
.price-box-two,
.faq-box,
.testimonials,
.post-container,
.login-box,
.author-box,
.reply-box {
	box-shadow: 0 6px 24px rgba(60, 72, 88, 0.08);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.team-box:hover,
.services-two:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 32px rgba(60, 72, 88, 0.14);
}

/* Zdjęcia w kartach/galerii – delikatniejszy cień zamiast czarnego.    */
.features-two img,
.services-three img,
.port-item img,
.img-rounded {
	box-shadow: 0 8px 24px rgba(60, 72, 88, 0.12);
}

/* 6. Przyciski – płynne przejścia, lekka głębia i uniesienie na hover.
      Kolory marki pozostają bez zmian.                                 */
.btn {
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.btn-green,
.btn-blue,
.btn-red,
.btn-pink,
.btn-purple,
.btn-orange {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}

.btn-green:hover,
.btn-green:focus,
.btn-blue:hover,
.btn-blue:focus {
	transform: translateY(-2px);
	box-shadow: 0 10px 22px rgba(0, 128, 1, 0.26);
}

/* 7. Pola formularza – zaokrąglenie i miękki pierścień focus.
      Zachowuje stałą szerokość obramowania (1px) także w focus,
      dzięki czemu pola nie "skaczą" przy kliknięciu.                   */
.form-control {
	border-radius: 8px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-control:focus {
	border: 1px solid #008001;
	box-shadow: 0 0 0 3px rgba(0, 128, 1, 0.12);
}

/* 8. Animowane podkreślenie linków w menu (subtelne, bez zmiany układu).
      Pseudo-element jest pozycjonowany absolutnie, więc nie przesuwa
      tekstu.                                                            */
.kepler-nav .navbar-nav > li > a {
	position: relative;
}

.kepler-nav .navbar-nav > li > a::after {
	content: "";
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 4px;
	height: 2px;
	background: #008001;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.25s ease;
}

.kepler-nav .navbar-nav > li > a:hover::after,
.kepler-nav .navbar-nav > li.active > a::after {
	transform: scaleX(1);
}

/* Na widoku mobilnym (rozwijane menu) chowamy podkreślenie,
   żeby nie kolidowało z pionową listą.                                 */
@media (max-width: 991px) {
	.kepler-nav .navbar-nav > li > a::after {
		display: none;
	}
}

/* 9. Stopka – nieco lżejsze linie i płynny hover linków.               */
.pages-links li a,
.widget-links li a {
	transition: color 0.2s ease, padding-left 0.2s ease;
}

.pages-links li a:hover {
	color: #008001;
	text-decoration: none;
	padding-left: 4px;
}

/* 10. Domyślnie responsywne obrazy (zabezpieczenie przed wyjściem
       poza kontener na małych ekranach).                              */
img {
	max-width: 100%;
}

/* 11. Płynne pojawianie się sekcji tła i drobne wygładzenie ikon.      */
.circle-icon {
	box-shadow: 0 8px 20px rgba(0, 128, 1, 0.18);
}