/*
Theme Name: Maximus Child
Theme URI: https://maximus-sklep.pl/
Description: Motyw potomny sklepu maximus-sklep.pl oparty na wyglądzie Balasany (wariant A – klasyczny). Szablony dziedziczy po Varii (varia-wpcom), style i części szablonów przejmuje z Balasany (balasana-wpcom) – oba motywy muszą być zainstalowane.
Version: 1.2.4
Author: Firma Handlowo-Usługowa Maximus
Template: varia-wpcom
Requires at least: 5.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: maximus-child
*/

/*
 * Ładowany po balasana-wpcom/style.css – zawiera wyłącznie nadpisania.
 */

/* Paleta i czcionki
--------------------------------------------- */
:root {
	--maximus-green: #19744C;
	--maximus-green-dark: #145F3E;
	--maximus-gold: #D8AF54;
	--maximus-red: #BC2213;
	--maximus-text: #303030;
	--maximus-text-light: #505050;
	--maximus-placeholder: #5C5C5C;
	--maximus-on-green: #E3F1EA;
	--maximus-bg: #FFFFFF;
	--maximus-bg-light: #F5F5F5;
	--maximus-border: #E6E6E6;
	--maximus-font: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--maximus-width: 1200px;

	/* Balasana czyta te zmienne (var(--font-base / --font-headings, …)). */
	--font-base: var(--maximus-font);
	--font-headings: var(--maximus-font);
}

body {
	background-color: var(--maximus-bg);
	color: var(--maximus-text);
	font-family: var(--maximus-font);
	overflow-x: clip; /* 100vw tła nagłówka nie może dodać poziomego paska */
}

/* Elementy, w których Balasana wpisuje "Roboto Condensed" bez zmiennej. */
h1, h2, h3, h4, h5, h6,
.site-title,
.main-navigation,
.button,
button,
input[type="submit"],
.wp-block-button__link {
	font-family: var(--maximus-font);
}

/* Pasek informacyjny nad nagłówkiem
--------------------------------------------- */
.maximus-topbar {
	background-color: var(--maximus-green);
	color: var(--maximus-bg);
	font-size: 14px;
	line-height: 1.4;
	padding: 8px 24px;
	text-align: center;
}

/* Nagłówek – biały, na całą szerokość, z cienką linią u dołu
--------------------------------------------- */
.site-header {
	position: relative;
	z-index: 10; /* własny kontekst: tło pod treścią, podmenu nad treścią strony */
	flex-wrap: wrap;
	gap: 16px;
	max-width: var(--maximus-width);
	padding: 20px 24px;
}

.site-header::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: calc(50% - 50vw);
	width: 100vw;
	background-color: var(--maximus-bg);
	border-bottom: 1px solid var(--maximus-border);
}

.site-branding .site-logo img,
.maximus-logo img {
	display: block;
	height: 44px;
	max-height: none;
	width: auto;
}

.main-navigation a {
	font-size: 15px;
	font-weight: 500;
}

.maximus-header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}

.maximus-account {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
}

.maximus-account,
.maximus-account:link,
.maximus-account:visited {
	color: var(--maximus-text);
}

.maximus-account:hover {
	color: var(--maximus-green);
}

.maximus-cart,
.maximus-cart:link,
.maximus-cart:visited {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	padding: 0 16px;
	border-radius: 22px;
	background-color: var(--maximus-green);
	color: var(--maximus-bg);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}

.maximus-cart:hover,
.maximus-cart:focus {
	background-color: var(--maximus-green-dark);
	color: var(--maximus-bg);
}

/* Wspólne elementy strony głównej
--------------------------------------------- */
.maximus-home {
	padding: 0;
}

.maximus-container {
	box-sizing: border-box;
	max-width: var(--maximus-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 24px;
	padding-right: 24px;
}

.maximus-section {
	padding-top: 72px;
	padding-bottom: 72px;
}

.maximus-section + .maximus-section {
	padding-top: 0;
}

.maximus-section__header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 32px;
}

.maximus-home .maximus-section__title {
	margin: 0 0 32px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

.maximus-section__header .maximus-section__title {
	margin-bottom: 0;
}

.maximus-section__link {
	font-weight: 500;
	text-decoration: none;
}

.maximus-btn,
.maximus-btn:link,
.maximus-btn:visited {
	display: inline-block;
	padding: 14px 28px;
	border: 1.5px solid var(--maximus-green);
	border-radius: 6px;
	background-color: var(--maximus-green);
	color: var(--maximus-bg);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
}

.maximus-btn:hover,
.maximus-btn:focus {
	border-color: var(--maximus-green-dark);
	background-color: var(--maximus-green-dark);
	color: var(--maximus-bg);
}

.maximus-btn--outline,
.maximus-btn--outline:link,
.maximus-btn--outline:visited {
	background-color: transparent;
	color: var(--maximus-green);
}

.maximus-btn--outline:hover,
.maximus-btn--outline:focus {
	border-color: var(--maximus-green);
	background-color: var(--maximus-green);
	color: var(--maximus-bg);
}

/* Baner
--------------------------------------------- */
.maximus-hero {
	background-color: var(--maximus-bg-light);
}

.maximus-hero__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
	padding-top: 72px;
	padding-bottom: 72px;
}

.maximus-hero__text {
	flex: 1 1 420px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.maximus-hero__text > * {
	margin: 0;
}

/* Nadtytuł ze złotą kreską – złoto tylko jako ozdobnik, tekst zielony. */
.maximus-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--maximus-green);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.maximus-eyebrow::before {
	content: "";
	flex: none;
	width: 32px;
	height: 3px;
	background-color: var(--maximus-gold);
}

.maximus-home .maximus-hero__title {
	font-size: 48px;
	font-weight: 700;
	line-height: 1.1;
}

.maximus-hero__lead {
	color: var(--maximus-text-light);
	font-size: 18px;
	line-height: 1.6;
}

.maximus-hero__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 8px;
}

.maximus-hero__media {
	flex: 1 1 420px;
	height: 400px;
	border-radius: 12px;
	overflow: hidden;
	background-color: #E3E3E3;
}

.maximus-hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Kategorie
--------------------------------------------- */
.maximus-categories {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: 24px;
}

.maximus-category,
.maximus-category:link,
.maximus-category:visited {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--maximus-border);
	border-radius: 12px;
	color: var(--maximus-text);
	text-decoration: none;
}

.maximus-category:hover,
.maximus-category:focus {
	border-color: var(--maximus-green);
	color: var(--maximus-text);
}

/*
 * Kwadratowe pole jak zdjęcia produktów; contain zamiast cover, żeby
 * produkt na białym tle nie był przycinany niezależnie od proporcji zdjęcia.
 */
.maximus-category__media {
	aspect-ratio: 1 / 1;
	padding: 16px;
	border-bottom: 1px solid var(--maximus-border);
	background-color: var(--maximus-bg);
}

.maximus-category__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.2s ease;
}

.maximus-category:hover .maximus-category__media img,
.maximus-category:focus .maximus-category__media img {
	transform: scale(1.04);
}

.maximus-category__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 8px;
	padding: 20px;
}

.maximus-category__body > * {
	margin: 0;
}

.maximus-home .maximus-category__title {
	font-size: 20px;
	line-height: 1.3;
}

.maximus-category__desc {
	color: var(--maximus-text-light);
	line-height: 1.5;
}

.maximus-category__more {
	margin-top: auto;
	padding-top: 8px;
	color: var(--maximus-green);
	font-weight: 500;
}

/* Stopka – zielona, białe logo, złota linia nad prawami autorskimi
--------------------------------------------- */
/*
 * #colophon.maximus-footer – selektor z ID, żeby wygrać z regułami #colophon
 * (Balasana, Dodatkowy CSS). Ujemne marginesy wyciągają stopkę na całą
 * szerokość okna, nawet gdy rodzic jest węższy.
 */
#colophon.maximus-footer {
	box-sizing: border-box;
	width: auto;
	max-width: none;
	margin: 0 calc(50% - 50vw);
	padding: 0;
	background-color: var(--maximus-green);
	color: var(--maximus-bg);
	font-family: var(--maximus-font);
}

/* 100vw liczy też pasek przewijania – bez tego pojawia się poziomy scroll. */
html,
body {
	overflow-x: clip;
}

.maximus-footer__inner,
.maximus-footer__bottom {
	box-sizing: border-box;
	max-width: none;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.maximus-footer__inner {
	gap: 40px;
	padding: 56px 48px 32px;
}

.maximus-footer__brand {
	flex: 2 1 280px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.maximus-footer__brand .maximus-logo {
	align-self: flex-start;
}

.maximus-footer__brand .maximus-logo img {
	height: 40px;
}

.maximus-footer__brand p {
	margin: 0;
	color: var(--maximus-on-green);
	line-height: 1.6;
}

.maximus-footer__col {
	flex: 1 1 180px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.maximus-footer .maximus-footer__title {
	margin: 0 0 4px;
	color: var(--maximus-bg);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}

.maximus-footer__menu {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.maximus-footer a,
.maximus-footer a:link,
.maximus-footer a:visited {
	color: var(--maximus-on-green);
	text-decoration: none;
}

.maximus-footer a:hover,
.maximus-footer a:focus {
	color: var(--maximus-bg);
	text-decoration: underline;
}

.maximus-footer__bottom {
	justify-content: space-between;
	gap: 12px;
	padding: 20px 48px;
	border-top: 2px solid var(--maximus-gold);
	color: var(--maximus-on-green);
	font-size: 14px;
}

/* Telefon
--------------------------------------------- */
@media only screen and (max-width: 559px) {
	.maximus-home .maximus-hero__title {
		font-size: 34px;
	}

	.maximus-hero__inner,
	.maximus-section {
		padding-top: 48px;
		padding-bottom: 48px;
	}

	.maximus-hero__media {
		height: 260px;
	}

	.maximus-home .maximus-section__title {
		font-size: 26px;
	}

	/* Dwie kolumny kafelków, bez opisów. */
	.maximus-categories {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 12px;
	}

	.maximus-category__media {
		padding: 8px;
	}

	.maximus-category__body {
		padding: 12px;
	}

	.maximus-home .maximus-category__title {
		font-size: 16px;
	}

	.maximus-category__desc {
		display: none;
	}

	.maximus-footer__inner,
	.maximus-footer__bottom {
		padding-left: 24px;
		padding-right: 24px;
	}
}

/* Ozdobniki w złocie (linie, nie tekst)
--------------------------------------------- */
hr,
.wp-block-separator {
	border-color: var(--maximus-gold);
	color: var(--maximus-gold);
}

.wp-block-separator:not(.is-style-dots) {
	background-color: var(--maximus-gold);
}

.wp-block-separator.is-style-dots::before {
	color: var(--maximus-gold);
}

.wp-block-quote,
.wp-block-pullquote {
	border-color: var(--maximus-gold);
}