/*
 * BuddyPilot — Contact page
 * 2-column layout: form + sidebar.
 * Adapts ui_kits/contact/kit.css to BP design tokens.
 *
 * WCAG AAA: all text contrast ratios >= 7:1 normal / >= 4.5:1 large text.
 */

/* ═══════════════════════════════════════════════════
   Page wrapper
   ═══════════════════════════════════════════════════ */

.page-template-page-contact .site-main {
	padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
}

/* ═══════════════════════════════════════════════════
   Page header
   ═══════════════════════════════════════════════════ */

.contact-page__header {
	margin-bottom: 2.5rem;
	max-width:     720px;
}

.contact-page__label {
	font-family:    var(--bp-font-mono);
	font-size:      .6875rem;
	font-weight:    500;
	letter-spacing: .12em;
	text-transform: uppercase;
	color:          var(--bp-tx-sec);
	line-height:    1;
	padding-top:    1.25rem;
	margin-bottom:  1rem;
	border-top:     1px solid rgba(0, 0, 0, .12);
	display:        inline-block;
}

.contact-page__intro {
	font-family: var(--bp-font-body);
	font-size:   1.0625rem;
	color:       var(--bp-tx-sec);
	line-height: 1.7;
	margin:      0;
	max-width:   60ch;
}

/* ═══════════════════════════════════════════════════
   2-column grid
   ═══════════════════════════════════════════════════ */

.contact-grid {
	display:               grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap:                   clamp(2rem, 5vw, 4rem);
	align-items:           start;
}

@media (max-width: 900px) {
	.contact-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Form
   ═══════════════════════════════════════════════════ */

.bp-contact-form {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
	max-width:      640px;
}

/* ── Field wrapper ─────────────────────────────────── */

.bp-cf-field:not([hidden]) {
	display:        flex;
	flex-direction: column;
	gap:            .375rem;
}

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

.bp-cf-field .req {
	color:       var(--bp-cobalt);
	margin-left: .15rem;
}

.bp-optional {
	font-weight: 400;
	color:       var(--bp-tx-sec);
}

/* ── Inputs / select / textarea ────────────────────── */

.bp-cf-field input[type="text"],
.bp-cf-field input[type="email"],
.bp-cf-field input[type="tel"],
.bp-cf-field 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;
	line-height:        1.5;
	transition:         border-color 150ms, box-shadow 150ms;
	appearance:         none;
	-webkit-appearance: none;
}

.bp-cf-field textarea {
	min-height: 140px;
	resize:     vertical;
}

/* Select keeps native OS arrow — no custom SVG, no appearance:none */
.bp-cf-field select {
	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;
	line-height:   1.5;
	transition:    border-color 150ms, box-shadow 150ms;
}

.bp-cf-field input:hover,
.bp-cf-field textarea:hover,
.bp-cf-field select:hover { border-color: var(--bp-sky); }

.bp-cf-field input:focus,
.bp-cf-field textarea:focus,
.bp-cf-field select:focus {
	outline:      none;
	border-color: var(--bp-cobalt);
	box-shadow:   0 0 0 3px rgba(25, 68, 203, .15);
}

.bp-cf-field .hint {
	font-family: var(--bp-font-body);
	font-size:   .8125rem;
	color:       var(--bp-tx-sec);
	margin:      0;
}

/* ── Two-column row ────────────────────────────────── */

.bp-cf-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
}

@media (max-width: 560px) {
	.bp-cf-row { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════
   Purpose chip picker
   ═══════════════════════════════════════════════════ */

.bp-purpose-grid {
	display:               grid;
	grid-template-columns: repeat(2, 1fr);
	gap:                   .5rem;
}

@media (max-width: 560px) {
	.bp-purpose-grid { grid-template-columns: 1fr; }
}

.bp-purpose-chip {
	display:       inline-flex;
	align-items:   center;
	gap:           .65rem;
	padding:       .85rem 1rem;
	background:    var(--bp-white);
	border:        1.5px solid var(--bp-border);
	border-radius: var(--bp-r);
	font-family:   var(--bp-font);
	font-size:     .9375rem;
	font-weight:   600;
	color:         var(--bp-tx-pri);
	cursor:        pointer;
	text-align:    left;
	line-height:   1.2;
	transition:    border-color 150ms, background 150ms, box-shadow 150ms;
}

.bp-purpose-chip:hover { border-color: var(--bp-cobalt); }

.bp-purpose-chip i {
	color:      var(--bp-cobalt);
	font-size:  14px;
	width:      18px;
	text-align: center;
	flex-shrink: 0;
}

.bp-purpose-chip.is-active {
	background:   var(--bp-cobalt);
	border-color: var(--bp-cobalt);
	color:        var(--bp-btn-cobalt-text);
	box-shadow:   0 4px 12px rgba(25, 68, 203, .18);
}

.bp-purpose-chip.is-active i { color: var(--bp-btn-cobalt-text); }

/* ═══════════════════════════════════════════════════
   RODO checkbox
   ═══════════════════════════════════════════════════ */

.bp-cf-check {
	display:       flex;
	gap:           .75rem;
	align-items:   flex-start;
	padding:       .75rem 1rem;
	background:    var(--bp-ice);
	border:        1.5px solid var(--bp-border);
	border-radius: var(--bp-r);
}

.bp-cf-check input[type="checkbox"] {
	width:        18px;
	height:       18px;
	margin-top:   2px;
	accent-color: var(--bp-cobalt);
	flex-shrink:  0;
}

.bp-cf-check label {
	font-family: var(--bp-font-body);
	font-size:   .8125rem;
	color:       var(--bp-tx-sec);
	line-height: 1.5;
	font-weight: 400;
	cursor:      pointer;
}

.bp-cf-check a {
	color:           var(--bp-cobalt);
	text-decoration: underline;
}

/* ═══════════════════════════════════════════════════
   Submit row
   ═══════════════════════════════════════════════════ */

.bp-cf-submit {
	display:     flex;
	gap:         1rem;
	align-items: center;
	margin-top:  .5rem;
	flex-wrap:   wrap;
}

.bp-cf-submit button {
	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;
	display:       inline-flex;
	align-items:   center;
	gap:           .5rem;
	transition:    background 150ms, box-shadow 150ms;
}

.bp-cf-submit button:hover {
	background: var(--bp-cobalt-dark);
	box-shadow: var(--bp-sh);
}

.bp-cf-submit button:focus-visible {
	outline:        2px solid var(--bp-cobalt);
	outline-offset: 3px;
}

.bp-cf-submit button:disabled {
	opacity: .65;
	cursor:  not-allowed;
}

.bp-cf-response {
	font-family: var(--bp-font-body);
	font-size:   .9375rem;
	color:       var(--bp-tx-sec);
}

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

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

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

/* ═══════════════════════════════════════════════════
   Success / error states
   ═══════════════════════════════════════════════════ */

.bp-contact-success {
	padding:       1rem 1.25rem;
	border-radius: var(--bp-r);
	background:    var(--bp-success-bg);
	border:        1.5px solid var(--bp-success-bd);
	color:         var(--bp-success-tx);
	font-family:   var(--bp-font-body);
	font-size:     .9375rem;
	line-height:   1.5;
	display:       flex;
	gap:           .75rem;
	align-items:   flex-start;
}

.bp-contact-success i {
	font-size:  1.125rem;
	margin-top: 1px;
	color:      var(--bp-success-tx);
	flex-shrink: 0;
}

.bp-cf-error {
	padding:       .85rem 1.125rem;
	border-radius: var(--bp-r);
	background:    var(--bp-error-bg);
	border:        1.5px solid var(--bp-error-bd);
	color:         var(--bp-error-tx);
	font-family:   var(--bp-font-body);
	font-size:     .9375rem;
	line-height:   1.5;
}

/* ═══════════════════════════════════════════════════
   Sidebar
   ═══════════════════════════════════════════════════ */

.contact-aside {
	display:        flex;
	flex-direction: column;
	gap:            1.25rem;
}

.contact-card {
	background:    var(--bp-ice);
	border:        1.5px solid var(--bp-border);
	border-radius: var(--bp-r-lg);
	padding:       1.5rem 1.75rem;
}

.contact-card h3 {
	font-family:    var(--bp-font);
	font-size:      .75rem;
	font-weight:    700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color:          var(--bp-cobalt);
	margin:         0 0 1rem;
}

.contact-card__row {
	display:       flex;
	gap:           .75rem;
	align-items:   flex-start;
	margin-bottom: .9rem;
	font-family:   var(--bp-font-body);
	font-size:     .9375rem;
	color:         var(--bp-tx-pri);
}

.contact-card__row:last-child { margin-bottom: 0; }

.contact-card__row i {
	color:       var(--bp-cobalt);
	width:       18px;
	margin-top:  3px;
	flex-shrink: 0;
}

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

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

.contact-card__row strong {
	display:     block;
	font-weight: 700;
}

/* Direct child span only — must NOT match bp-brand__buddy / bp-brand__pilot nested inside strong */
.contact-card__row > div > span {
	color:      var(--bp-tx-sec);
	font-size:  .8125rem;
	display:    block;
	margin-top: 2px;
}

/* ── Guarantee card (dark) ──────────────────────────── */

.contact-guarantee {
	background:    linear-gradient(180deg, var(--bp-dark) 0%, var(--bp-navy) 100%);
	border:        none;
	padding:       1.75rem;
	border-radius: var(--bp-r-lg);
	color:         var(--bp-tx-l1);
}

.contact-guarantee h3 {
	color: var(--bp-tx-sky);
}

.contact-guarantee p {
	font-family: var(--bp-font-body);
	font-size:   .9375rem;
	color:       var(--bp-tx-l2);
	line-height: 1.6;
	margin:      0;
	max-width:   none;
}

.contact-guarantee .icon {
	display:         inline-flex;
	width:           44px;
	height:          44px;
	border-radius:   50%;
	background:      rgba(147, 197, 253, .12);
	color:           var(--bp-tx-sky);
	align-items:     center;
	justify-content: center;
	font-size:       18px;
	margin-bottom:   .75rem;
}

/* ═══════════════════════════════════════════════════
   Reduced motion
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.bp-purpose-chip,
	.bp-cf-field input,
	.bp-cf-field textarea,
	.bp-cf-field select,
	.bp-cf-submit button {
		transition: none;
	}

	.bp-spinner {
		animation-duration: .01ms;
	}
}

/* ═══════════════════════════════════════════════════
   CF7 form — field containers and field resets
   (.bp-form-field is the wrapper class used in the
   CF7 form templates created via create-cf7-forms.php)
   ═══════════════════════════════════════════════════ */

/* Field wrapper — mirrors .bp-cf-field */
.bp-form-field {
	display:        flex;
	flex-direction: column;
	gap:            .375rem;
}

/* Space between chip picker and the first CF7 form */
.bp-cf7-wrap { margin-top: 1.5rem; }

/* CF7 auto-wraps shortcodes in <p> — strip margins */
.bp-form-field p,
.bp-cf7-wrap p {
	margin: 0;
	width:  100%;
}

/* wpcf7-form-control-wrap is a span — make it block */
.bp-form-field .wpcf7-form-control-wrap {
	display: block;
	width:   100%;
}

/* ── Form label (visual label above CF7 field) ──────── */

/*
 * When use_paragraph is not 0 in CF7, CF7 wraps field content in <p> and
 * inserts <br> between the label span and the input span. Hide the <br> so
 * the label sits flush above the field. Also add margin-bottom so the gap
 * is preserved whether the flex column gap or the <p>-wrapper path is active.
 */
.bp-form-field br { display: none; }

.bp-form-label {
	display:       block;
	font-family:   var(--bp-font);
	font-size:     .9375rem;
	font-weight:   600;
	color:         var(--bp-tx-pri);
	line-height:   1.3;
	margin-top:    1.25rem;  /* gap from the field above */
	margin-bottom: .375rem;  /* gap to the field below   */
}

/* First row of fields (2-column Name+Phone): no preceding field, reset top margin. */
.bp-form-row .bp-form-label { margin-top: 0; }

.bp-form-label .req {
	color:       var(--bp-cobalt);
	margin-left: .15rem;
}

.bp-form-label .bp-optional {
	font-weight: 400;
	color:       var(--bp-tx-sec);
	font-size:   .875rem;
}

/* ── Inputs / textarea ──────────────────────────────── */

.bp-form-field input[type="text"],
.bp-form-field input[type="email"],
.bp-form-field input[type="tel"],
.bp-form-field input[type="url"],
.bp-form-field 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;
	line-height:        1.5;
	transition:         border-color 150ms, box-shadow 150ms;
	appearance:         none;
	-webkit-appearance: none;
}

.bp-form-field textarea {
	min-height: 140px;
	resize:     vertical;
}

.bp-form-field input:hover,
.bp-form-field textarea:hover { border-color: var(--bp-sky); }

.bp-form-field input:focus,
.bp-form-field textarea:focus {
	outline:      none;
	border-color: var(--bp-cobalt);
	box-shadow:   0 0 0 3px rgba(25, 68, 203, .15);
}

/* ── Select — custom cobalt chevron ─────────────────── */

.bp-form-field select {
	width:              100%;
	font-family:        var(--bp-font);
	font-size:          1rem;
	color:              var(--bp-tx-pri);
	background-color:   var(--bp-white);
	background-image:   url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%231944CB' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat:  no-repeat;
	background-position: right 1rem center;
	background-size:    12px 8px;
	border:             1.5px solid var(--bp-border);
	border-radius:      var(--bp-r);
	padding:            .75rem 2.5rem .75rem 1rem;
	min-height:         44px;
	line-height:        1.5;
	transition:         border-color 150ms, box-shadow 150ms;
	appearance:         none;
	-webkit-appearance: none;
	cursor:             pointer;
}

.bp-form-field select:hover { border-color: var(--bp-sky); }

.bp-form-field select:focus {
	outline:      none;
	border-color: var(--bp-cobalt);
	box-shadow:   0 0 0 3px rgba(25, 68, 203, .15);
}

/* Placeholder option (first_as_label) */
.bp-form-field select option[value=""] { color: var(--bp-tx-sec); }

/* ── 2-column field row ──────────────────────────────── */

.bp-form-row {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   1rem;
}

@media (max-width: 560px) {
	.bp-form-row { grid-template-columns: 1fr; }
}

/* ── CF7 submit button ──────────────────────────────── */

.bp-cf7-wrap .wpcf7-submit {
	font-family:   var(--bp-font);
	font-size:     1rem;
	font-weight:   700;
	color:         #fff;
	background:    var(--bp-cobalt);
	border:        none;
	border-radius: var(--bp-r);
	padding:       .85rem 2.25rem;
	min-height:    44px;
	cursor:        pointer;
	display:       inline-flex;
	align-items:   center;
	gap:           .5rem;
	transition:    background 150ms, box-shadow 150ms;
	margin-top:    .5rem;
}

.bp-cf7-wrap .wpcf7-submit:hover {
	background: #1436a8;
	box-shadow: var(--bp-sh);
}

.bp-cf7-wrap .wpcf7-submit:focus-visible {
	outline:        2px solid var(--bp-cobalt);
	outline-offset: 3px;
}

.bp-cf7-wrap .wpcf7-submit:disabled { opacity: .65; cursor: not-allowed; }

/* ── Submit row (button + response note) ────────────── */

.bp-cf-submit-wrap {
	display:     flex;
	gap:         1rem;
	align-items: center;
	margin-top:  .5rem;
	flex-wrap:   wrap;
}

/* Cancel the standalone margin-top when inside the wrapper */
.bp-cf-submit-wrap .wpcf7-submit { margin-top: 0; }

.bp-cf-note {
	font-family: var(--bp-font-body);
	font-size:   .9375rem;
	color:       var(--bp-tx-sec);
}

/* CF7 spinner (shows during submission) */
.bp-cf7-wrap .wpcf7-spinner {
	width:            1.125rem;
	height:           1.125rem;
	border:           2px solid rgba(255, 255, 255, .4);
	border-top-color: #fff;
	border-radius:    50%;
	vertical-align:   middle;
	margin-left:      .5rem;
}

/* ── CF7 validation messages ────────────────────────── */

.bp-form-field .wpcf7-not-valid-tip {
	display:     block;
	font-family: var(--bp-font-body);
	font-size:   .8125rem;
	color:       #b91c1c;
	margin-top:  .25rem;
}

.bp-form-field .wpcf7-form-control.wpcf7-not-valid {
	border-color: #f87171;
	box-shadow:   0 0 0 3px rgba(239, 68, 68, .12);
}

/* ── CF7 response output (success / error banner) ───── */

.bp-cf7-wrap .wpcf7-response-output {
	font-family:   var(--bp-font-body);
	font-size:     .9375rem;
	line-height:   1.5;
	padding:       1rem 1.25rem;
	border-radius: var(--bp-r);
	margin-top:    .75rem;
	border:        1.5px solid transparent;
}

.bp-cf7-wrap .wpcf7-mail-sent-ok {
	background: #f0fdf4;
	border-color: #86efac;
	color:       #14532d;
}

.bp-cf7-wrap .wpcf7-mail-sent-ng,
.bp-cf7-wrap .wpcf7-aborted,
.bp-cf7-wrap .wpcf7-spam-blocked {
	background:   #fef2f2;
	border-color: #fca5a5;
	color:        #7f1d1d;
}

.bp-cf7-wrap .wpcf7-validation-errors,
.bp-cf7-wrap .wpcf7-acceptance-missing {
	background:   #fffbeb;
	border-color: #fde68a;
	color:        #78350f;
}

/* ── Purpose label above chip grid ─────────────────── */

.bp-purpose-label {
	font-family: var(--bp-font);
	font-size:   .9375rem;
	font-weight: 600;
	color:       var(--bp-tx-pri);
	margin:      0 0 .5rem;
}

/* ═══════════════════════════════════════════════════
   Reduced motion — CF7 additions
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
	.bp-form-field input,
	.bp-form-field textarea,
	.bp-form-field select,
	.bp-cf7-wrap .wpcf7-submit { transition: none; }
}