/*
Theme Name: Księgusek
Theme URI: https://ksiegusek.pl
Author: Księgusek
Author URI: https://ksiegusek.pl
Description: Custom block theme for Biuro Rachunkowe Księgusek — modern, calm accounting brand. Built from scratch, no page builder, design tokens driven by theme.json.
Version: 1.1.6
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 7.4
Text Domain: ksiegusek
*/

/* ---------------------------------------------------------------------
   Base rules that theme.json cannot express: focus states, the hero
   "fake product UI" mockup, the FAQ accordion, and the scroll-in
   animation. Kept intentionally small — most design comes from
   theme.json presets, not hand-written CSS.
   ------------------------------------------------------------------- */

:where(a, button, .wp-block-button__link, summary) {
	transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}

:where(a, button, .wp-block-button__link, summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 3px;
	border-radius: 4px;
}

.wp-block-button__link:hover,
.ksiegusek-card:hover {
	transform: translateY(-2px);
}

/* Hard backstop against horizontal page overflow: theme.json's heading sizes (h1=60px,
   h2=42px) are fixed, not fluid, so a single long word with no natural break point (e.g.
   "Porozmawiajmy") can be wider than a phone viewport and push the whole page into
   horizontal scroll. Confirmed on /kontakt/ and /oferta/prowadzenie-ksiegowosci/. This
   guarantees it can never happen again, regardless of future copy changes. */
.wp-block-heading,
.wp-block-post-content p,
.ksiegusek-section p {
	overflow-wrap: break-word;
}

/* Heading sizes scaled down for phones — theme.json's 60/42/28px scale is print-poster
   sized for a 390px screen even when words DO fit; this also widens the safety margin
   against the overflow issue above instead of relying on overflow-wrap alone.
   Overriding the custom properties themselves (rather than targeting h1/h2/h3 tags) means
   this reaches every usage — theme.json's element defaults AND any block that sets an
   explicit "has-hero-font-size"/"has-h2-font-size"/"has-h3-font-size" utility class —
   without having to out-specificity anything (see the theme.json specificity gotcha in
   CLAUDE.md; redefining the variable sidesteps it entirely). */
@media (max-width: 600px) {
	:root {
		--wp--preset--font-size--hero: 38px;
		--wp--preset--font-size--h2: 28px;
		--wp--preset--font-size--h3: 22px;
	}
}

/* Reusable section wrapper spacing hook (used by patterns).
   Horizontal padding matters here: on any viewport narrower than the section's own
   contentSize (which includes every mobile width), there is otherwise NO side gutter —
   WordPress's root-padding-aware alignment feature needs styles.spacing.padding set in
   theme.json to emit it automatically, which we never set, so content was rendering flush
   against the screen edge. Set it directly instead of depending on that mechanism. */
.ksiegusek-section {
	padding-top: var(--wp--preset--spacing--70);
	padding-bottom: var(--wp--preset--spacing--70);
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

@media (max-width: 782px) {
	.ksiegusek-section {
		padding-top: var(--wp--preset--spacing--60);
		padding-bottom: var(--wp--preset--spacing--60);
	}
}

/* Header CTA — at narrow widths there isn't enough room next to the logo and hamburger
   trigger for "Umów konsultację" to fit on one line (it wraps to 3 cramped lines).
   Let the button drop to its own full-width row instead of shrinking the text. */
@media (max-width: 600px) {
	.site-header-row {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--30);
	}

	.site-header-row .wp-block-buttons {
		width: 100%;
	}

	.site-header-row .wp-block-buttons .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Card */
.ksiegusek-card {
	background: var(--wp--preset--color--white);
	border-radius: 14px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--40);
}

/* Hero "fake dashboard" mock UI — replaces stock photography */
.ksiegusek-mock-screen {
	background: var(--wp--preset--color--white);
	border-radius: 20px;
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--40);
	max-width: 380px;
	margin-left: auto;
}

.ksiegusek-mock-screen__dot-row {
	display: flex;
	gap: 6px;
	margin-bottom: var(--wp--preset--spacing--30);
}

.ksiegusek-mock-screen__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--background);
}

.ksiegusek-mock-screen__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--text);
}

.ksiegusek-mock-screen__row:last-child {
	border-bottom: none;
}

.ksiegusek-mock-screen__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--white);
	flex-shrink: 0;
}

/* Line-style icon wrapper used inside cards (bolt, phone, chat, users) */
.ksiegusek-icon svg {
	width: 36px;
	height: 36px;
	color: var(--wp--preset--color--teal);
	margin-bottom: var(--wp--preset--spacing--30);
	display: block;
}

/* Numbered step badge used in "Jak wygląda współpraca" */
.ksiegusek-step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	margin-bottom: var(--wp--preset--spacing--30);
}

/* Offer service cards — fixed-ish width, wraps on smaller screens */
.ksiegusek-offer-card {
	flex: 1 1 260px;
	max-width: 280px;
}

@media (max-width: 600px) {
	.ksiegusek-offer-card {
		max-width: 100%;
	}
}

/* FAQ accordion — native <details>/<summary>, zero JS */
.ksiegusek-faq-item {
	border-bottom: 1px solid var(--wp--preset--color--background);
	padding: var(--wp--preset--spacing--30) 0;
}

.ksiegusek-faq-item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	font-weight: 600;
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--h3);
}

.ksiegusek-faq-item summary::-webkit-details-marker {
	display: none;
}

.ksiegusek-faq-item summary::after {
	content: "+";
	font-size: 28px;
	line-height: 1;
	color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

.ksiegusek-faq-item[open] summary::after {
	content: "\2212";
}

.ksiegusek-faq-item p {
	margin-top: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--text);
}

/* WPForms fields — WPForms Lite ships text/email/textarea inputs with bare browser
   default styling (square corners, thin gray border). Bring them in line with the
   site's rounded, soft-bordered design language. */
.wpforms-container input[type="text"],
.wpforms-container input[type="email"],
.wpforms-container textarea {
	border: 1px solid rgba(31, 42, 68, 0.18);
	border-radius: 10px;
	padding: 12px 16px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text);
	background: var(--wp--preset--color--background);
}

.wpforms-container input[type="text"]:focus,
.wpforms-container input[type="email"]:focus,
.wpforms-container textarea:focus {
	outline: 2px solid var(--wp--preset--color--teal);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--teal);
}

/* WPForms checkbox field — WPForms wraps choices in a bare <ul><li>, which shows a
   default browser bullet next to the checkbox with no styling applied. */
.wpforms-container .wpforms-field-checkbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wpforms-container .wpforms-field-checkbox li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.wpforms-container .wpforms-field-checkbox input[type="checkbox"] {
	margin-top: 4px;
	accent-color: var(--wp--preset--color--teal);
	flex-shrink: 0;
}

/* WPForms submit button — WPForms Lite ships with an unstyled default button,
   so we bring it in line with the theme's core/button styling from theme.json. */
.wpforms-container .wpforms-submit-container button.wpforms-submit {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
	border: none;
	border-radius: 14px;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	padding: 16px 28px;
	cursor: pointer;
}

.wpforms-container .wpforms-submit-container button.wpforms-submit:hover {
	background: var(--wp--preset--color--teal);
	transform: translateY(-2px);
}

/* Subtle reveal-on-scroll — progressive enhancement only */
.ksiegusek-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .5s ease, transform .5s ease;
}

.ksiegusek-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.ksiegusek-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}