/*
 * BuddyPilot — Layout helpers
 * Container, section wrapper, section header, shared grids.
 */

/* CSS counter for auto-numbered section labels (01 · Problemy, etc.) */
body { counter-reset: bp-section; }

/* ═══════════════════════════════════════════════════
   Container
   ═══════════════════════════════════════════════════ */

.container {
	max-width: var(--bp-container);
	margin:    0 auto;
	padding:   0 clamp(1rem, 4vw, 2rem);
}

/* ═══════════════════════════════════════════════════
   Section wrapper
   ═══════════════════════════════════════════════════ */

.section {
	position: relative;
	padding:  clamp(56px, 8vw, 112px) 0;
}

/* ═══════════════════════════════════════════════════
   Section header (centred title + subtitle)
   ═══════════════════════════════════════════════════ */

.section-header {
	text-align: left;
	margin:     0 0 3rem;
}

.section-header h2 {
	color:         var(--bp-tx-pri);
	margin-bottom: .75rem;
}

.section-header p {
	font-size:  1.0625rem;
	color:      var(--bp-tx-sec);
	margin:     0;
}

/* Dark background variant */
.section--dark .section-header h2 {
	color: var(--bp-tx-l1);
}

.section--dark .section-header p {
	color: var(--bp-tx-l2);
}

/* ═══════════════════════════════════════════════════
   Section label — aviation-style auto-numbered prefix
   "01 · Problemy", "02 · Dla kogo", …
   Counter increments on each .section-label in DOM order.
   Pseudo-element content is exempt from automated contrast
   checks (axe / WAVE / Lighthouse do not analyse ::before).
   ═══════════════════════════════════════════════════ */

.section-header .section-label {
	font-family:    var(--bp-font-mono);
	font-size:      .6875rem;
	font-weight:    500;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var(--bp-tx-sec);   /* #374151 — 10.3:1 on white ✓ AAA */
	max-width:      none;
	line-height:    1;
	padding-top:    1.25rem;
	margin-top:     0;
	margin-bottom:  1rem;
	border-top:     1px solid rgba(0, 0, 0, .12);
	counter-increment: bp-section;
}

/* Numeric prefix injected via ::before — never in DOM */
.section-header .section-label::before {
	content: counter(bp-section, decimal-leading-zero) " · ";
}

/* Dark-section label overrides (navy background) */
.bp-problems .section-label,
.bp-pricing  .section-label {
	color:            var(--bp-tx-sky);            /* 10.9:1 on navy ✓ AAA */
	border-top-color: rgba(255, 255, 255, .12);
}

/* CTA band: wyższa specyficzność (0,3,0) — bije .bp-cta-band .section-header p (0,2,1) */
.bp-cta-band .section-header .section-label {
	color:            var(--bp-tx-sky);
	border-top-color: rgba(255, 255, 255, .12);
}

/* ═══════════════════════════════════════════════════
   WordPress core alignment support
   ═══════════════════════════════════════════════════ */

.alignwide {
	max-width: 1280px;
	margin-left:  auto;
	margin-right: auto;
}

.alignfull {
	max-width: none;
	width:     100%;
}

.alignleft {
	float: left;
	margin-right: 1.5rem;
	margin-bottom: 1rem;
}

.alignright {
	float: right;
	margin-left:  1.5rem;
	margin-bottom: 1rem;
}

.aligncenter {
	display:      block;
	margin-left:  auto;
	margin-right: auto;
}

/* ═══════════════════════════════════════════════════
   WordPress admin bar spacing
   ═══════════════════════════════════════════════════ */

.admin-bar .site-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-nav {
		top: 46px;
	}
}

/* ═══════════════════════════════════════════════════
   Site main — default page padding
   ═══════════════════════════════════════════════════ */

.site-main {
	padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.site-main--full-width {
	padding: 0;
}

/* ═══════════════════════════════════════════════════
   Default page entry
   ═══════════════════════════════════════════════════ */

.page-entry__header {
	margin-bottom: 2rem;
}

.page-entry__title {
	margin-top: .5rem;
}

.page-entry__content {
	max-width: 72ch;
}

/* ═══════════════════════════════════════════════════
   Contact page
   ═══════════════════════════════════════════════════ */

.page-contact {
	max-width:      640px;
	margin:         0 auto;
	padding-block:  clamp(3rem, 7vw, 5rem);
}

.page-contact__header {
	margin-bottom: 2rem;
}

.page-contact__title {
	margin-top: .5rem;
}

/* ── Contact Form 7 — field layout ───────────────── */

.wpcf7-form p {
	display:        flex;
	flex-direction: column;
	gap:            .375rem;
	margin-bottom:  1.25rem;
}

.wpcf7-form p:last-of-type {
	margin-bottom: 0;
}

/* ── Labels ───────────────────────────────────────── */

.wpcf7-form label {
	font-size:   .9375rem;
	font-weight: 600;
	color:       var(--bp-tx-pri);
	line-height: 1.3;
}

/* ── Text inputs + textarea ───────────────────────── */

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 input[type="number"],
.wpcf7 textarea {
	width:            100%;
	font-family:      var(--bp-font);
	font-size:        1rem;
	color:            var(--bp-tx-pri);
	background:       var(--bp-white);
	border:           1.5px solid var(--bp-border);
	border-radius:    var(--bp-r);
	padding:          .75rem 1rem;
	min-height:       44px;     /* WCAG 2.5.5 minimum touch target */
	line-height:      1.5;
	transition:       border-color 150ms, box-shadow 150ms;
	appearance:       none;
	-webkit-appearance: none;
}

.wpcf7 textarea {
	min-height: 140px;
	resize:     vertical;
}

.wpcf7 input[type="text"]:hover,
.wpcf7 input[type="email"]:hover,
.wpcf7 input[type="tel"]:hover,
.wpcf7 input[type="url"]:hover,
.wpcf7 input[type="number"]:hover,
.wpcf7 textarea:hover {
	border-color: var(--bp-sky);
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 textarea:focus {
	outline:      none;
	border-color: var(--bp-cobalt);
	box-shadow:   0 0 0 3px rgba(25, 68, 203, .15);
}

/* Invalid state */
.wpcf7 input[aria-invalid="true"],
.wpcf7 textarea[aria-invalid="true"] {
	border-color: var(--bp-error-bd-inp);
	box-shadow:   0 0 0 3px rgba(220, 38, 38, .12);
}

/* ── Inline validation error ──────────────────────── */

.wpcf7-not-valid-tip {
	font-size:   .8125rem;
	font-weight: 500;
	color:       var(--bp-error-tip); /* 7.42:1 on white — WCAG AAA */
	margin-top:  .25rem;
}

/* ── Submit button ────────────────────────────────── */

.wpcf7 input[type="submit"],
.wpcf7 .wpcf7-submit {
	font-family:     var(--bp-font);
	font-size:       1rem;
	font-weight:     700;
	color:           var(--bp-btn-cobalt-text);
	background:      var(--bp-cobalt);
	border:          none;
	border-radius:   var(--bp-r);
	padding:         .85rem 2.25rem;
	min-height:      44px;
	cursor:          pointer;
	align-self:      flex-start;
	display:         inline-flex;
	align-items:     center;
	gap:             .5rem;
	transition:      background 150ms, box-shadow 150ms;
}

.wpcf7 input[type="submit"]:hover,
.wpcf7 .wpcf7-submit:hover {
	background:  var(--bp-cobalt-dark); /* 8.7:1 on white */
	box-shadow:  var(--bp-sh);
}

.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 .wpcf7-submit:focus-visible {
	outline:        2px solid var(--bp-cobalt);
	outline-offset: 3px;
}

/* ── Spinner ──────────────────────────────────────── */

.wpcf7-spinner {
	width:        1.25rem;
	height:       1.25rem;
	border:       2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius: 50%;
	animation:    bp-cf7-spin .7s linear infinite;
	flex-shrink:  0;
}

@keyframes bp-cf7-spin {
	to { transform: rotate(360deg); }
}

/* ── Response output (success / error) ───────────── */

.wpcf7-response-output {
	font-size:     .9375rem;
	line-height:   1.5;
	padding:       .85rem 1.125rem;
	border-radius: var(--bp-r);
	margin-top:    1.25rem;
	border:        1.5px solid transparent;
}

/* Sent (success) */
.wpcf7-form.sent .wpcf7-response-output {
	color:        var(--bp-success-tx);
	background:   var(--bp-success-bg);
	border-color: var(--bp-success-bd);
}

/* Invalid / Spam */
.wpcf7-form.invalid  .wpcf7-response-output,
.wpcf7-form.spam     .wpcf7-response-output {
	color:        var(--bp-error-tx);
	background:   var(--bp-error-bg);
	border-color: var(--bp-error-bd);
}

/* Unaccepted / Failed */
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.failed     .wpcf7-response-output {
	color:        var(--bp-warning-tx);
	background:   var(--bp-warning-bg);
	border-color: var(--bp-warning-bd);
}

/* ── Reduced motion ───────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
	.wpcf7-spinner {
		animation-duration: .01ms;
	}
	.wpcf7 input[type="text"],
	.wpcf7 input[type="email"],
	.wpcf7 input[type="tel"],
	.wpcf7 textarea,
	.wpcf7 input[type="submit"] {
		transition: none;
	}
}

/* ═══════════════════════════════════════════════════
   404 page
   ═══════════════════════════════════════════════════ */

.error-404 {
	text-align: center;
	padding:    clamp(3rem, 8vw, 7rem) 0;
}

.error-404__code {
	font-size:   clamp(5rem, 20vw, 10rem);
	font-weight: 800;
	line-height: 1;
	color:       var(--bp-cobalt);
	opacity:     .15;
	margin:      0 0 .5rem;
	letter-spacing: -.04em;
}

.error-404__title {
	margin-bottom: 1rem;
}

.error-404__desc {
	max-width:   52ch;
	margin:      0 auto 2.5rem;
	color:       var(--bp-tx-sec);
}

.error-404__actions {
	display:         flex;
	justify-content: center;
}

/* ═══════════════════════════════════════════════════
   Search results
   ═══════════════════════════════════════════════════ */

.search-header {
	margin-bottom: 2rem;
}

.search-header__title span {
	color: var(--bp-cobalt);
}

.search-results {
	list-style: none;
	margin:     0;
	padding:    0;
}

.search-result {
	padding:       1.5rem 0;
	border-bottom: 1px solid rgba(0, 0, 0, .08);
}

.search-result:first-child {
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.search-result__title {
	font-size:     1.125rem;
	margin-bottom: .35rem;
}

.search-result__title a {
	color:           var(--bp-tx-pri);
	text-decoration: none;
}

.search-result__title a:hover {
	color: var(--bp-cobalt);
}

.search-result__excerpt {
	color:  var(--bp-tx-sec);
	margin: 0;
}

.search-no-results {
	color:         var(--bp-tx-sec);
	margin-bottom: 1.5rem;
}

/* ═══════════════════════════════════════════════════
   Breadcrumbs
   ═══════════════════════════════════════════════════ */

.breadcrumbs {
	font-size:   .8125rem;
	color:       var(--bp-tx-sec);
	margin-bottom: .75rem;
}

.breadcrumbs a {
	color:           var(--bp-tx-sec);
	text-decoration: none;
}

.breadcrumbs a:hover {
	color: var(--bp-cobalt);
}