/*
 * Generic page layout — styles a wrapper markup emitted ONLY by index.php,
 * the theme's fallback template for anything without its own dedicated
 * layout: plain WP pages (Regulamin, Polityka prywatności, …), WooCommerce
 * Cart / Checkout / My Account (their body is the_content() rendering a
 * WooCommerce shortcode, same mechanism as any other page — this theme has
 * no page.php, see index.php docblock), blog posts/archives, 404.
 *
 * Front page, Fresh Drop, shop archive and single product each render
 * through their own template and never output .page-content, so this rule
 * structurally can't reach them — no exclusion list needed, enqueued only
 * where index.php is actually the template (see inc/enqueue.php).
 */

.page-content {
	padding-block: var(--space-9);
}

@media (max-width: 640px) {
	.page-content {
		padding-block: var(--space-7);
	}
}

.page-content__title {
	margin-bottom: var(--space-6);
}

/*
 * Vertical rhythm between the_content()'s own top-level blocks (paragraphs,
 * headings, lists — base.css zeroes their margin globally). WooCommerce
 * shortcodes (Cart/Checkout/My Account) render a single top-level
 * div.woocommerce wrapper here, so this direct-child selector has no effect
 * on their internal spacing — their markup/CSS stays untouched.
 */
.page-content__body > * + * {
	margin-top: var(--space-5);
}

/*
 * Link do pliku w treści strony (np. formularz PDF w załączniku do
 * regulaminu). base.css zeruje wygląd linków, więc akapit z linkiem dostaje
 * w edytorze klasę "tiere-pdf-link" (Blok -> Zaawansowane -> Dodatkowe klasy
 * CSS). Pozostałe linki w treści stron zostają bez zmian.
 */
.page-content__body .tiere-pdf-link a {
	color: var(--color-brand-red);
	font-weight: var(--font-weight-medium);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-content__body .tiere-pdf-link a:hover,
.page-content__body .tiere-pdf-link a:focus-visible {
	color: var(--color-ink);
}

/*
 * Formularz kontaktowy [tiere_contact_form] (inc/contact-form.php) na stronach
 * Kontakt / Contact: pola z dolną linią jak formularze konta i zwrotów, przycisk
 * bazowy .button. Szerokość kolumny formularza (744 w ramce 1728).
 */
.contact-form {
	max-width: calc(744 * var(--u));
	margin-top: var(--space-7);
}

.contact-form__field {
	margin: 0;
}

.contact-form__field + .contact-form__field {
	margin-top: var(--space-5);
}

.contact-form__field label {
	display: block;
	margin-bottom: var(--space-2);
}

.contact-form__field input,
.contact-form__field textarea {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 0 var(--space-1);
	border: 0;
	border-bottom: 1px solid var(--color-muted);
	border-radius: var(--radius-0);
	background-color: transparent;
	color: var(--color-ink);
	font: inherit;
	font-size: max(16px, 1em);
}

.contact-form__field textarea {
	padding: var(--space-2);
	border: 1px solid var(--color-muted);
	resize: vertical;
}

.contact-form__field input:focus-visible,
.contact-form__field textarea:focus-visible {
	border-color: var(--color-ink);
	outline: 2px solid var(--color-ink);
	outline-offset: 2px;
}

.contact-form__field--error input,
.contact-form__field--error textarea {
	border-color: var(--color-brand-red);
}

.contact-form__error {
	display: block;
	margin-top: var(--space-1);
	color: var(--color-red-dark);
	font-size: var(--text-caption);
}

.contact-form__required {
	color: inherit;
}

.contact-form__notice {
	margin: 0 0 var(--space-5);
}

.contact-form__notice--success {
	font-weight: var(--font-weight-medium);
}

.contact-form__notice--error {
	color: var(--color-red-dark);
}

/* Pułapka antyspamowa poza ekranem (celowo nie display: none). */
.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form__submit {
	width: 100%;
	margin-top: var(--space-6);
	border: 0;
	cursor: pointer;
}

/*
 * Strona Kontakt: na desktopie treść w dwóch kolumnach po połowie - akapity
 * z danymi po lewej, formularz po prawej (od góry, przez wszystkie wiersze).
 * Na mobile kolejność z edytora: dane, pod nimi formularz.
 */
@media (min-width: 900px) {
	.page-content__body:has(> .contact-form) {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: calc(80 * var(--u));
		align-items: start;
	}

	.page-content__body:has(> .contact-form) > * {
		grid-column: 1;
	}

	.page-content__body:has(> .contact-form) > .contact-form {
		grid-column: 2;
		grid-row: 1 / span 20;
		max-width: none;
		margin-top: 0;
	}
}

/* Strona błędu 404 (404.php): wyśrodkowany tytuł, komunikat i dwa przyciski. */
.error-page {
	text-align: center;
}

.error-page__title {
	margin-bottom: var(--space-4);
}

.error-page__text {
	margin: 0 auto;
	max-width: 36rem;
}

.error-page__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-4);
	margin-top: var(--space-6);
}

/*
 * Strona Kontakt: akapity z danymi mają w edytorze klasę "tiere-contact"
 * (Blok -> Zaawansowane -> Dodatkowe klasy CSS). Telefon i e-mail jako
 * podkreślone linki (tel:, mailto:), żeby było widać, że są klikalne.
 */
.page-content__body .tiere-contact a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.page-content__body .tiere-contact a:hover,
.page-content__body .tiere-contact a:focus-visible {
	color: var(--color-brand-red);
}

/* WooCommerce: Moje konto (logowanie, rejestracja) */

.woocommerce-account .woocommerce-form-login {
	max-width: 520px;
	width: 100%;
}

.woocommerce-form-register .woocommerce-form-row--wide + p,
.woocommerce-form-register .woocommerce-privacy-policy-text {
	font-size: 12px;
	line-height: 1.4;
}

/* Checkout: przycisk wyboru Paczkomatu (InPost geowidget) */

#easypack_block_type_geowidget.easypack_show_geowidget {
	font-size: 14px !important;
	background-color: #1e1e1c !important;
	color: #ffffff !important;
	box-shadow: none !important;
	padding: 10px 20px !important;
	width: auto !important;
	white-space: normal !important;
}

/*
 * "Opłać zamówienie" (button#place_order) na stronie płatności za już
 * złożone zamówienie (endpoint order-pay kasy, szablon WooCommerce
 * checkout/form-pay.php, formularz #order_review). WooCommerce nadaje mu
 * fiolet przez ".woocommerce button.button.alt" - tu wygląd przycisku
 * głównego Tiere (components/button.css, "Kupuję i płacę" w kasie).
 * Selektor z id ma wyższą specyficzność niż reguły WooCommerce (także
 * ".woocommerce #payment #place_order"), więc nie potrzebuje !important.
 * Szerokość i położenie zostają z WooCommerce (na telefonie pełna szerokość).
 */
body.woocommerce-order-pay #order_review #place_order {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: calc(38 * var(--u));
	padding: 0 calc(7.45 * var(--u));
	border: 0;
	border-radius: var(--radius-0);
	background-color: var(--color-brand-red);
	box-shadow: none;
	color: var(--color-white);
	font-family: var(--font-family-base);
	font-size: calc(9.646 * var(--u));
	font-weight: var(--font-weight-medium);
	line-height: calc(16.69 * var(--u));
	text-transform: uppercase;
	transition: background-color 0.2s ease;
}

body.woocommerce-order-pay #order_review #place_order:hover:not(:disabled),
body.woocommerce-order-pay #order_review #place_order:focus-visible {
	background-color: var(--color-ink);
	color: var(--color-white);
}

/* Wyłączony (np. w trakcie wysyłania formularza): ten sam kolor, przygaszony. */
body.woocommerce-order-pay #order_review #place_order:disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

@media (min-width: 900px) {
	body.woocommerce-order-pay #order_review #place_order {
		min-height: calc(62.32 * var(--u));
		padding: 0 calc(20.39 * var(--u));
		color: var(--color-cream);
		font-size: calc(20 * var(--u));
		line-height: calc(45.68 * var(--u));
	}

	body.woocommerce-order-pay #order_review #place_order:hover:not(:disabled),
	body.woocommerce-order-pay #order_review #place_order:focus-visible {
		color: var(--color-cream);
	}
}