/* ==========================================================================
   Ogłoszenia Rabka - warstwa wyglądu na DirectoryPress / ClassiAds Pro
   Prefiks własnych klas: ogl-

   Motyw ma kolor marki #5580FF, który na białym tle daje 3,55:1 - poniżej
   normy WCAG AA dla zwykłego tekstu. Ten sam odcień przyciemniony do #476AD4
   daje 4,91:1. Koral #F27D66 (2,66:1) zostaje wyłącznie jako wypełnienie,
   nigdy pod tekst.
   ========================================================================== */

:root {
	--ogl-tlo:            #F6F7FA;
	--ogl-powierzchnia:   #FFFFFF;
	--ogl-powierzchnia-2: #EDF0F6;
	--ogl-linia:          #DFE3EC;
	--ogl-linia-mocna:    #C4CBDA;
	--ogl-tekst:          #2A2F3A;
	--ogl-tekst-mocny:    #121722;
	--ogl-szept:          #69718E;
	--ogl-akcent:         #476AD4;
	--ogl-akcent-ciemny:  #36529F;
	--ogl-akcent-tlo:     #E9EDFA;
	--ogl-cieplo:         #AE5A49;
	--ogl-promien:        10px;
	--ogl-cien:           0 1px 2px rgba(18,23,34,.05), 0 6px 18px rgba(18,23,34,.07);
}

body {
	background: var(--ogl-tlo);
	color: var(--ogl-tekst);
	-webkit-font-smoothing: antialiased;
}

a {
	color: var(--ogl-akcent);
}

a:hover,
a:focus {
	color: var(--ogl-akcent-ciemny);
}

h1, h2, h3, h4, h5, h6 {
	color: var(--ogl-tekst-mocny);
	letter-spacing: -0.012em;
	line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Skala nagłówków

   Motyw miesza trzy skale naraz (h1: 2em, 36px i 46px; h2: 30px i 38px),
   przez co ta sama ranga nagłówka wygląda inaczej na różnych podstronach.
   -------------------------------------------------------------------------- */

h1 { font-size: 32px; }
h2 { font-size: 25px; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }

@media (min-width: 768px) {
	h1 { font-size: 38px; }
	h2 { font-size: 28px; }
	h3 { font-size: 22px; }
}

/* --------------------------------------------------------------------------
   Karty ogłoszeń
   -------------------------------------------------------------------------- */

.directorypress-listing,
.listing-grid-item,
.directorypress-listing-item-holder,
.directorypress-category-item {
	background: var(--ogl-powierzchnia);
	border: 1px solid var(--ogl-linia);
	border-radius: var(--ogl-promien);
	box-shadow: var(--ogl-cien);
	overflow: hidden;
	transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.directorypress-listing:hover,
.listing-grid-item:hover,
.directorypress-category-item:hover {
	border-color: var(--ogl-linia-mocna);
	transform: translateY(-2px);
	box-shadow: 0 2px 4px rgba(18,23,34,.06), 0 10px 26px rgba(18,23,34,.10);
}

.directorypress-listing-title,
.directorypress-listing-title a {
	color: var(--ogl-tekst-mocny);
	font-weight: 600;
	letter-spacing: -0.01em;
}

.directorypress-listing-title a:hover {
	color: var(--ogl-akcent);
}

.listing-bottom-metas,
.listing-location,
.directorypress-field-icon {
	color: var(--ogl-szept);
	font-size: 14px;
}

.directorypress-listing-figure img,
.listing-grid-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   Przyciski
   -------------------------------------------------------------------------- */

.button,
.button-link,
input[type="submit"],
button[type="submit"],
.directorypress-button {
	border-radius: 999px !important;
	font-weight: 600;
	letter-spacing: .01em;
	padding: 10px 22px;
	border: 1px solid transparent;
	transition: background-color .15s ease, border-color .15s ease;
}

.button,
input[type="submit"],
button[type="submit"] {
	background: var(--ogl-akcent) !important;
	border-color: var(--ogl-akcent) !important;
	color: #fff !important;
}

.button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
	background: var(--ogl-akcent-ciemny) !important;
	border-color: var(--ogl-akcent-ciemny) !important;
}

/* --------------------------------------------------------------------------
   Pola formularzy

   Motyw daje im 2-3 px zaokrąglenia i cienką, jasną kreskę - na tle karty
   pola gubią się wzrokowo.
   -------------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea {
	border: 1px solid var(--ogl-linia-mocna) !important;
	border-radius: 8px !important;
	background: var(--ogl-powierzchnia);
	color: var(--ogl-tekst);
	padding: 10px 12px;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--ogl-akcent) !important;
	box-shadow: 0 0 0 3px var(--ogl-akcent-tlo);
}

::placeholder {
	color: var(--ogl-szept);
	opacity: 1;
}

/* --------------------------------------------------------------------------
   Widoczny fokus klawiatury

   Motyw gasi obrys w 76 miejscach. :focus-visible pokazuje go tylko przy
   nawigacji klawiaturą - mysz go nie wywoła.
   -------------------------------------------------------------------------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--ogl-akcent) !important;
	outline-offset: 2px !important;
	border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Treść stron i wpisów
   -------------------------------------------------------------------------- */

.entry-content,
.page-content,
.single-content {
	font-size: 17px;
	line-height: 1.7;
	color: var(--ogl-tekst);
}

.entry-content h2,
.page-content h2 {
	margin: 36px 0 12px;
}

.entry-content h3,
.page-content h3 {
	margin: 28px 0 10px;
}

.entry-content a,
.page-content a {
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: var(--ogl-linia-mocna);
}

.entry-content a:hover,
.page-content a:hover {
	text-decoration-color: var(--ogl-akcent);
}

.entry-content table,
.page-content table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ogl-linia);
	border-radius: var(--ogl-promien);
	overflow: hidden;
	margin: 24px 0;
	font-size: 15.5px;
}

.entry-content th,
.page-content th {
	background: var(--ogl-powierzchnia-2);
	text-align: left;
	font-weight: 600;
}

.entry-content th, .entry-content td,
.page-content th, .page-content td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--ogl-linia);
	vertical-align: top;
}

/* --------------------------------------------------------------------------
   Wąskie ekrany

   Cel dotknięcia poniżej 44 px jest trudny do trafienia kciukiem - wytyczna
   WCAG 2.5.8. Motyw daje pozycjom menu i przyciskom kart znacznie mniej.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.entry-content,
	.page-content,
	.single-content {
		font-size: 16.5px;
	}

	.button,
	.button-link,
	input[type="submit"],
	button[type="submit"] {
		min-height: 44px;
		padding: 11px 20px;
	}

	.menu-item > a,
	.directorypress-listing-title a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}
}

/* Szanujemy ustawienie systemowe ograniczenia ruchu. */
@media (prefers-reduced-motion: reduce) {
	.directorypress-listing,
	.listing-grid-item,
	.directorypress-category-item {
		transition: none;
	}

	.directorypress-listing:hover,
	.listing-grid-item:hover,
	.directorypress-category-item:hover {
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   Proporcje obrazow  /* proporcje-obrazow */

   Dolozylismy obrazom atrybuty width i height, zeby przegladarka rezerwowala
   miejsce i uklad nie skakal przy wczytywaniu. Ale gdy arkusz ustawia tylko
   szerokosc, przegladarka bierze wysokosc doslownie z atrybutu i obraz wychodzi
   rozciagniety. height:auto przywraca proporcje, zachowujac rezerwacje miejsca.
   -------------------------------------------------------------------------- */

img {
	max-width: 100%;
}

img[width][height] {
	height: auto;
}

/* Obrazy, ktorym motyw celowo nadaje wymiary przez CSS (kadry, tla kart),
   zostawiamy w spokoju - tam wysokosc jest zamierzona. */
img[style*="height"],
.wp-post-image[style*="height"] {
	height: revert;
}