/*
Theme Name: WM Miasteczko Julianów
Template: twentytwentyfour
Description: Lekki child theme dla strony wspólnoty mieszkaniowej Miasteczko Julianów. Zawiera wyłącznie szablony stron i style - logika biznesowa jest w wtyczce wm-core.
Version: 0.3.5
Text Domain: wm-child
*/

:root {
	--wm-navy: #0f172a;
	--wm-navy-soft: #17213a;
	--wm-beige: #756d65;
	--wm-beige-soft: #837b72;
	--wm-red: #dd183b;
	--wm-white: #ffffff;
	--wm-font: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: var(--wm-beige);
	color: var(--wm-white);
	font-family: var(--wm-font);
}

body a {
	color: var(--wm-white);
	text-decoration: none;
}

body a:hover,
body a:focus {
	color: var(--wm-red);
}

/* Motyw nadrzędny (Twenty Twenty-Four) narzuca ciemny kolor nagłówkom
 * przez swoje style globalne - wymuszamy biały wszędzie w naszych szablonach. */
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: var(--wm-white);
}

/* Treść ogłoszeń/przetargów pochodzi z edytora WP (Gutenberg), który przez
 * motyw nadrzędny narzuca własną czcionkę blokom - wymuszamy Segoe UI
 * (czcionkę strony) na całej zawartości kart, niezależnie od tego. */
.wm-card,
.wm-card * {
	font-family: var(--wm-font) !important;
}

/* ---------------------------------------------------------------------
 * Header
 * ------------------------------------------------------------------- */

.wm-site-header {
	background-color: var(--wm-navy);
	color: var(--wm-white);
	padding: 1rem 0;
	position: sticky;
	top: 0;
	z-index: 100;
}

/* Ta sama szerokość/wyśrodkowanie co karty treści: .wm-card ma max-width
 * 1100px + własny padding 2rem (razem 1164px szerokości "na zewnątrz"),
 * wewnątrz .wm-main z paddingiem 1.5rem - stąd 1100+2*32+2*24=1212px. Dzięki
 * temu logo i przyciski zaczynają/kończą się dokładnie tam, gdzie granatowe
 * okna ogłoszeń/przetargów (a nie tam, gdzie zaczyna się ich wewnętrzny tekst). */
.wm-header-inner {
	max-width: 1212px;
	margin: 0 auto;
	padding: 0 1.5rem;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.wm-site-header .wm-logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.wm-site-header .wm-logo-link img {
	display: block;
	height: 80px;
	width: auto;
}

.wm-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	cursor: pointer;
	margin-left: auto;
	flex-shrink: 0;
}

.wm-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--wm-white);
	margin: 0 auto;
}

.wm-zone-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
	flex: 1;
}

.wm-zone-nav a {
	display: inline-block;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 2px;
	padding: 0.5rem 1.1rem;
	font-weight: 600;
	font-size: 0.9rem;
	white-space: nowrap;
}

.wm-zone-nav a:hover,
.wm-zone-nav a:focus {
	background-color: var(--wm-red);
	border-color: var(--wm-red);
	color: var(--wm-white);
}

/* Strefa, w której aktualnie się znajdujesz (zalogowany/a) - podświetlona na beżowo. */
.wm-zone-nav a.wm-zone-nav-active {
	background-color: var(--wm-beige);
	border-color: var(--wm-beige);
	color: var(--wm-white);
}

.wm-zone-nav a.wm-zone-nav-active:hover,
.wm-zone-nav a.wm-zone-nav-active:focus {
	background-color: var(--wm-red);
	border-color: var(--wm-red);
}

/* ---------------------------------------------------------------------
 * Main content areas
 * ------------------------------------------------------------------- */

.wm-main {
	background-color: var(--wm-beige);
	padding: 3rem 1.5rem;
}

.wm-card {
	background-color: var(--wm-navy);
	color: var(--wm-white);
	border-radius: 6px;
	padding: 2rem;
	flex: 1 1 320px;
	max-height: 480px;
	overflow-y: auto;
}

/* Wyróżnienie kluczowych informacji w treści (np. w ogłoszeniach) - czerwony akcent na granatowym tle karty. */
.wm-highlight {
	color: var(--wm-red);
	font-weight: 600;
}

/* Okna granatowe -> suwak beżowy; okna beżowe -> suwak granatowy (dotyczy całej strony). */
.wm-card {
	scrollbar-width: thin;
	scrollbar-color: var(--wm-beige) var(--wm-navy-soft);
}

.wm-card::-webkit-scrollbar {
	width: 10px;
}

.wm-card::-webkit-scrollbar-track {
	background: var(--wm-navy-soft);
	border-radius: 6px;
}

.wm-card::-webkit-scrollbar-thumb {
	background: var(--wm-beige);
	border-radius: 6px;
}

.wm-card h2,
.wm-card h3 {
	border-left: 4px solid var(--wm-red);
	padding-left: 0.75rem;
	margin-top: 0;
	text-align: left;
}

.wm-card h2 {
	font-size: 1.4rem;
	margin-bottom: 1rem;
}

.wm-card h3 {
	font-size: 1.1rem;
	margin-bottom: 0.5rem;
}

.wm-card p {
	text-align: left;
}

/* Ramka wokół pojedynczego elementu wewnątrz sekcji (ogłoszenie, przetarg,
 * pozycja danych kontaktowych itd.) - beżowa, żeby odróżnić poszczególne
 * pozycje na granatowym tle karty. */
.wm-item-frame,
.wm-przetargi-lista .wm-przetarg {
	border: 1px solid var(--wm-beige);
	border-radius: 4px;
	padding: 1em 1.25em;
	margin-bottom: 1em;
	text-align: left;
}

.wm-item-frame:last-child,
.wm-przetargi-lista .wm-przetarg:last-child {
	margin-bottom: 0;
}

.wm-card + .wm-card {
	margin-top: 0;
}

.wm-main > .wm-card {
	max-width: 1100px;
	margin: 0 auto 2rem;
}

/* ---------------------------------------------------------------------
 * Tabele i formularze wewnątrz granatowych kart (izolacja kontrastu)
 * ------------------------------------------------------------------- */

.wm-card table,
.wm-zgloszenia,
.wm-harmonogram,
.wm-harmonogram-wykonawca {
	width: 100%;
	border-collapse: collapse;
	color: var(--wm-white);
}

.wm-card th,
.wm-card td,
.wm-zgloszenia th,
.wm-zgloszenia td,
.wm-harmonogram th,
.wm-harmonogram td,
.wm-harmonogram-wykonawca th,
.wm-harmonogram-wykonawca td {
	border: 1px solid var(--wm-beige);
	padding: 0.5em 0.75em;
	text-align: left;
	vertical-align: top;
}

.wm-card input[type="text"],
.wm-card input[type="email"],
.wm-card input[type="password"],
.wm-card input[type="date"],
.wm-card input[type="datetime-local"],
.wm-card select,
.wm-card textarea {
	background-color: var(--wm-white);
	color: var(--wm-navy);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	padding: 0.5em 0.6em;
	font-family: var(--wm-font);
}

.wm-card button[type="submit"],
.wm-main button[type="submit"] {
	background-color: var(--wm-red);
	color: var(--wm-white);
	border: none;
	border-radius: 2px;
	padding: 0.6em 1.4em;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--wm-font);
}

.wm-card button[type="submit"]:hover,
.wm-main button[type="submit"]:hover {
	opacity: 0.85;
}

.wm-przetargi-lista {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------
 * Formularz logowania (wp_login_form() w page-logowanie.php)
 * ------------------------------------------------------------------- */

.wm-card #loginform {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	max-width: 400px;
}

.wm-card #loginform .login-username,
.wm-card #loginform .login-password {
	display: flex;
	align-items: center;
	margin: 0;
}

.wm-card #loginform .login-username label,
.wm-card #loginform .login-password label {
	width: 160px;
	flex-shrink: 0;
	margin: 0;
}

.wm-card #loginform .login-username input,
.wm-card #loginform .login-password input {
	background-color: var(--wm-beige);
	color: var(--wm-white);
	border: 1px solid rgba(255, 255, 255, 0.6);
	border-radius: 3px;
	padding: 0.5em 0.6em;
	flex: 0 1 240px;
	max-width: 240px;
}

.wm-card #loginform .login-remember {
	margin: 0;
}

.wm-card #loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
}

.wm-card #loginform .login-remember input[type="checkbox"] {
	accent-color: var(--wm-beige);
	width: 16px;
	height: 16px;
}

.wm-card #loginform .login-submit {
	display: flex;
	justify-content: flex-end;
	margin: 0;
}

.wm-card #loginform #wp-submit {
	background-color: var(--wm-beige);
	color: var(--wm-white);
	border: none;
	border-radius: 3px;
	padding: 0.6em 1.6em;
	font-weight: 600;
	cursor: pointer;
	font-family: var(--wm-font);
}

.wm-card #loginform #wp-submit:hover {
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
 * Footer
 * ------------------------------------------------------------------- */

.wm-site-footer {
	background-color: var(--wm-navy);
	color: var(--wm-white);
	text-align: center;
	padding: 1.5rem;
}

/* ---------------------------------------------------------------------
 * Przewijanie do góry
 * ------------------------------------------------------------------- */

#wm-scroll-top {
	position: fixed;
	right: 30px;
	bottom: 30px;
	width: 40px;
	height: 40px;
	background-color: var(--wm-red);
	color: var(--wm-white);
	border-radius: 4px;
	border: none;
	display: none;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 99;
}

#wm-scroll-top.is-visible {
	display: flex;
}

#wm-scroll-top:hover {
	opacity: 0.85;
}

/* ---------------------------------------------------------------------
 * Responsywność
 * ------------------------------------------------------------------- */

@media (max-width: 767px) {
	.wm-header-inner {
		flex-wrap: wrap;
	}

	.wm-nav-toggle {
		display: flex;
	}

	.wm-zone-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		margin-top: 1rem;
		justify-content: flex-start;
	}

	.wm-zone-nav.is-open {
		display: flex;
	}

	.wm-zone-nav a {
		text-align: center;
	}

	/* Formularz logowania: na wąskich ekranach etykieta i pole jedno pod
	 * drugim, zamiast obok siebie w stałej szerokości (na desktopie 160px
	 * etykiety + 240px pola nie mieszczą się na telefonie i pole wystawało
	 * poza kartę). */
	.wm-card #loginform .login-username,
	.wm-card #loginform .login-password {
		flex-direction: column;
		align-items: stretch;
		gap: 0.3rem;
	}

	.wm-card #loginform .login-username label,
	.wm-card #loginform .login-password label {
		width: auto;
	}

	.wm-card #loginform .login-username input,
	.wm-card #loginform .login-password input {
		max-width: 100%;
		flex: 1 1 auto;
		width: 100%;
		box-sizing: border-box;
	}
}