/*
 * WP 02 — Contact page (pattern workingprint/w2-contact-page) and the
 * [workingprint_contact_form] form (inc/w2-contact-form.php).
 * Figma "Contact — Desktop" 463:1610 (1920 wide), "Contact — Mobile" 466:1846 (440 wide),
 * wp2/form-field 463:1609, wp2/filter-chip 448:730.
 */

/* the contact page uses the dark nav (Figma wp2/nav on black) */
body:has(.w2c-hero) .w2-nav { background: var(--c-black); color: var(--c-white); border-bottom-color: rgba(255, 255, 255, .35); }

.w2c-hero p, .w2c-faq p { margin: 0; }

/* ---------- 01 contact (463:1628) ---------- */
.w2c-hero { overflow: clip; }
.w2c-hero > .w2-in {
	display: grid; grid-template-columns: calc(800 * var(--u)) 1fr; column-gap: calc(80 * var(--u)); align-items: start;
	grid-template-areas: "label label" "title title" "pick card" "info card";
	grid-template-rows: auto auto auto 1fr;
	padding-top: calc(90 * var(--u)); padding-bottom: calc(282 * var(--u));
}
.w2c-hero .w2-in > * { margin: 0; }
.w2c-hero__label { grid-area: label; }
.w2c-hero__title {
	grid-area: title; --fs: 311; height: calc(270 * var(--u)); line-height: calc(270 * var(--u)); margin-top: calc(20 * var(--u)) !important;
	letter-spacing: 0; word-spacing: 0; position: relative; top: calc(36 * var(--u));
}
.w2c-hero__talk { position: relative; top: calc(16 * var(--u)); margin-left: calc(-29 * var(--u)); }
.w2c-hero__pick { grid-area: pick; margin-top: calc(102 * var(--u)) !important; }
.w2c-hero__pick > * { margin: 0 !important; }
.w2c-hero__ask { --fs: 64; line-height: 1.2; }
.w2c-hero__info { grid-area: info; padding-top: calc(72 * var(--u)); display: flex; flex-direction: column; align-items: flex-start; }
.w2c-hero__info > * { margin: 0 !important; }
.w2c-hero__skier { position: absolute !important; margin: 0 !important; z-index: 0; }

/* reason chips = radios that belong to the form (wp2/filter-chip On Dark / On Dark Active) */
.w2c-reasons { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); max-width: calc(720 * var(--u)); margin-top: calc(13 * var(--u)); }
.w2c-reason { position: relative; display: inline-flex; cursor: pointer; }
.w2c-reason input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.w2c-reason .w2-chip { border-color: var(--c-white); color: var(--c-white); }
.w2c-reason:hover .w2-chip { background: rgba(255, 255, 255, .14); }
.w2c-reason input:checked + .w2-chip { background: var(--c-white); color: var(--c-black); }
.w2c-reason input:focus-visible + .w2-chip { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

/* direct details */
.w2c-direct { display: flex; flex-direction: column; gap: calc(14 * var(--u)); }
.w2c-direct > * { margin: 0 !important; }
.logged-in .w2c-direct.is-placeholder, .editor-styles-wrapper .w2c-direct.is-placeholder { display: flex !important; }
.w2c-direct__label { --fs: 13; letter-spacing: 1px; line-height: 1.3; color: rgba(255, 255, 255, .55); }
.w2c-direct__value { --fs: 34; line-height: 1.17; white-space: nowrap; }
.w2c-hero__btns { margin-top: calc(159 * var(--u)) !important; }

/* playful reply meter */
.w2c-meter { display: flex; flex-direction: column; gap: calc(12 * var(--u)); margin-top: calc(46 * var(--u)) !important; }
.w2c-meter > * { margin: 0 !important; }
.w2c-meter__label { --fs: 13; font-weight: 500; letter-spacing: 1px; line-height: 1.3; color: var(--c-yellow); }
.w2c-meter__bar { position: relative; width: calc(560 * var(--u)); height: max(8px, calc(14 * var(--u))); background: rgba(255, 255, 255, .18); overflow: hidden; }
.w2c-meter__bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 30.4%; background: var(--c-yellow); transform-origin: left; animation: w2c-fill 1.6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes w2c-fill { from { transform: scaleX(0); } }
.w2c-meter__text { --fs: 20; line-height: 1.2; }

.w2c-status { display: flex; flex-wrap: wrap; align-items: center; column-gap: .6em; margin-top: calc(52 * var(--u)) !important; }
.w2c-status > * { margin: 0 !important; }
.w2c-status__text { --fs: 14; font-weight: 500; letter-spacing: .8px; line-height: 1.3; }
.w2c-status__text.w2-dot::before { width: max(8px, calc(12 * var(--u))); height: max(8px, calc(12 * var(--u))); margin-right: calc(12 * var(--u)); }

/* ---------- form card (463:1670) ---------- */
.w2c-card {
	grid-area: card; position: relative; z-index: 1; box-sizing: border-box; min-height: calc(905 * var(--u)); margin-top: calc(102 * var(--u)) !important;
	padding: calc(42 * var(--u)); border: max(8px, calc(14 * var(--u))) solid var(--c-yellow);
	background: var(--c-white); color: var(--c-black);
	box-shadow: calc(24 * var(--u)) calc(24 * var(--u)) 0 rgba(98, 55, 255, .85);
	scroll-margin-top: 24px;
}
.w2c-card > * { margin: 0 !important; }
.w2c-card__title { --fs: 72; line-height: 1.2; }
.w2c-card__intro { --fs: 19; line-height: 1.5; max-width: calc(700 * var(--u)); margin-top: calc(4 * var(--u)) !important; }

.w2c-form { gap: calc(24 * var(--u)); }
.w2c-card > .w2c-form { margin-top: calc(55 * var(--u)) !important; }
.w2c-form > * { margin: 0; }
.w2c-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(24 * var(--u)); }
.w2c-field { margin: 0; }
.w2c-form label { margin-bottom: calc(10 * var(--u)); font-size: max(11px, calc(12 * var(--u))); font-weight: 500; color: var(--c-black); }
.w2c-form input:not([type="radio"]), .w2c-form textarea {
	display: block; padding: calc(16 * var(--u)) calc(18 * var(--u)); border: 1.5px solid var(--c-black); background: var(--c-white); color: var(--c-black);
	font-size: max(16px, calc(18 * var(--u))); line-height: 1.2; transition: border-color .2s ease, box-shadow .2s ease;
}
.w2c-form textarea { height: calc(180 * var(--u)); min-height: 120px; }
.w2c-form ::placeholder { color: #8c8c8c; opacity: 1; }
.w2c-form input:hover, .w2c-form textarea:hover { box-shadow: calc(4 * var(--u)) calc(4 * var(--u)) 0 var(--c-yellow); }
.w2c-form input:focus, .w2c-form textarea:focus { outline: 2px solid var(--c-purple); outline-offset: 0; box-shadow: none; }

/* "Attach a job description" -> optional link field */
.w2c-attach { border: 1.5px dashed var(--c-black); }
.w2c-attach summary { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)) calc(18 * var(--u)); list-style: none; cursor: pointer; }
.w2c-attach summary::-webkit-details-marker { display: none; }
.w2c-attach__plus { font-family: var(--f-gothic); font-size: max(24px, calc(32 * var(--u))); line-height: 1; color: var(--c-purple); transition: transform .25s ease; }
.w2c-attach[open] .w2c-attach__plus { transform: rotate(45deg); }
.w2c-attach__text { font-family: var(--f-mono); font-size: max(10px, calc(13 * var(--u))); letter-spacing: .6px; line-height: 1.3; text-transform: uppercase; }
.w2c-attach summary:hover .w2c-attach__text { color: var(--c-purple); }
.w2c-attach .w2c-field { padding: 0 calc(18 * var(--u)) calc(18 * var(--u)); }

.w2c-form__foot { display: flex; align-items: center; gap: calc(32 * var(--u)); margin-top: calc(16 * var(--u)) !important; }
.w2c-form button { flex: none; justify-self: auto; transition: filter .2s ease, transform .2s ease; }
.w2c-form button:hover { filter: brightness(1.12); transform: translateX(4px); }
.w2c-form button:focus-visible { outline: 2px solid var(--c-purple); outline-offset: 3px; }
.w2c-form__fine { max-width: calc(440 * var(--u)); margin: 0; font-family: var(--f-mono); font-size: max(10px, calc(12 * var(--u))); letter-spacing: .4px; line-height: 1.5; text-transform: uppercase; color: rgba(0, 0, 0, .55); }

.w2c-form .w2-form__note { margin: 0; font-size: max(15px, calc(18 * var(--u))); line-height: 1.4; }
.w2-form__note.is-error { border-color: var(--c-pink); background: #ffe9f2; color: var(--c-black); }

/* ---------- 02 recruiter FAQ (463:1705) ---------- */
.w2c-faq { background: var(--c-yellow); color: var(--c-black); z-index: 2; }
.w2c-faq > .w2-in { box-sizing: border-box; min-height: calc(720 * var(--u)); padding-top: calc(100 * var(--u)); padding-bottom: calc(80 * var(--u)); }
.w2c-faq .w2-in > * { margin: 0 !important; }
.w2c-faq__body > * { margin: 0 !important; }
.w2c-faq__title { --fs: 140; line-height: .85; margin-top: calc(22 * var(--u)) !important; position: relative; z-index: 1; }
.w2c-faq__grid { display: grid; grid-template-columns: repeat(4, calc(400 * var(--u))); column-gap: calc(40 * var(--u)); margin-top: calc(101 * var(--u)) !important; position: relative; z-index: 3; }
.w2c-faq__item { border-top: 2px solid var(--c-black); padding-top: calc(28 * var(--u)); }
.w2c-faq__item > * { margin: 0 !important; }
.w2c-faq__q { --fs: 13; font-weight: 500; letter-spacing: 1px; line-height: 1.3; color: var(--c-pink); }
.w2c-faq__question { --fs: 48; line-height: .95; max-width: calc(380 * var(--u)); min-height: calc(140 * var(--u)); margin-top: calc(13 * var(--u)) !important; }
.w2c-faq__answer { --fs: 20; line-height: 1.5; max-width: calc(380 * var(--u)); }
.w2c-faq__collage, .w2c-faq__model { position: absolute !important; margin: 0 !important; z-index: 2; }
.w2c-faq__collage { left: calc(927 * var(--u)); top: calc(-257 * var(--u)); width: calc(875 * var(--u)); height: calc(616 * var(--u)); }
.w2c-faq__model { left: calc(946 * var(--u)); top: calc(-188 * var(--u)); width: calc(471 * var(--u)); height: calc(548 * var(--u)); }
.w2c-faq__collage img, .w2c-faq__model img { object-fit: contain !important; }
/* while the answers are still placeholders, visitors only see the collage band */
body:not(.logged-in):not(.editor-styles-wrapper) .w2c-faq:has(.w2c-faq__body.is-placeholder) > .w2-in { min-height: calc(360 * var(--u)); padding: 0 var(--gx); }

/* ---------- mobile (466:1846) ---------- */
@media (max-width: 899px) {
	.w2c-hero > .w2-in { display: flex; flex-direction: column; align-items: stretch; gap: calc(28 * var(--u)); padding-top: calc(48 * var(--u)); padding-bottom: calc(64 * var(--u)); }
	.w2c-hero .w2-in > *:not(.w2c-hero__skier) { position: relative; z-index: 1; }
	.w2c-hero__title { --fs: 115; height: auto; line-height: calc(96 * var(--u)); white-space: normal; top: calc(-8 * var(--u)); }
	.w2c-hero__title > span { display: block; height: calc(96 * var(--u)); margin: 0; }
	.w2c-hero__talk { height: calc(100 * var(--u)) !important; line-height: calc(100 * var(--u)); top: 0; margin-top: calc(4 * var(--u)) !important; }
	.w2c-hero__skier { left: calc(238 * var(--u)); top: calc(40 * var(--u)); width: calc(173 * var(--u)); height: calc(206 * var(--u)); }
	.w2c-hero__skier img { object-fit: contain !important; }
	.w2c-hero__pick { margin-top: 0 !important; display: flex; flex-direction: column; gap: calc(28 * var(--u)); }
	.w2c-hero__ask { --fs: 40; }
	.w2c-reasons { gap: calc(8 * var(--u)); max-width: none; margin-top: 0; }
	.w2c-reason .w2-chip { font-size: max(12px, calc(14 * var(--u))); padding: calc(12 * var(--u)) calc(20 * var(--u)); }

	.w2c-card { min-height: 0; margin-top: 0 !important; padding: calc(30 * var(--u)) calc(26 * var(--u)); border-width: calc(10 * var(--u)); box-shadow: calc(12 * var(--u)) calc(12 * var(--u)) 0 rgba(98, 55, 255, .85); }
	.w2c-card__title { --fs: 48; }
	.w2c-card__intro { --fs: 16; margin-top: calc(18 * var(--u)) !important; }
	.w2c-form { gap: calc(18 * var(--u)); }
	.w2c-card > .w2c-form { margin-top: calc(18 * var(--u)) !important; }
	.w2c-form__row { grid-template-columns: 1fr; gap: calc(18 * var(--u)); }
	.w2c-form textarea { height: calc(180 * var(--u)); }
	.w2c-attach summary { gap: calc(10 * var(--u)); padding: calc(14 * var(--u)); }
	.w2c-attach__plus { font-size: calc(28 * var(--u)); }
	.w2c-attach__text { font-size: max(10px, calc(11 * var(--u))); letter-spacing: .4px; }
	.w2c-attach__more { display: none; }
	.w2c-form__foot { flex-direction: column; align-items: stretch; gap: calc(18 * var(--u)); margin-top: 0 !important; }
	.w2c-form button { justify-content: space-between; height: calc(56 * var(--u)); width: 100%; }
	.w2c-form__fine { max-width: none; font-size: max(10px, calc(11 * var(--u))); letter-spacing: .3px; }

	.w2c-hero__info { padding-top: 0; align-items: stretch; gap: calc(28 * var(--u)); }
	.w2c-direct { gap: calc(10 * var(--u)); }
	.w2c-direct__label { --fs: 12; font-weight: 500; }
	.w2c-direct__value { --fs: 26; }
	.w2c-hero__btns { margin-top: 0 !important; }
	.w2c-hero__btns .wp-block-button, .w2c-hero__btns .wp-block-button__link { width: 100%; justify-content: space-between; }
	.w2c-meter { margin-top: 0 !important; gap: calc(10 * var(--u)); }
	.w2c-meter__label { --fs: 12; }
	.w2c-meter__bar { width: 100%; height: calc(12 * var(--u)); }
	.w2c-meter__text { --fs: 17; }
	.w2c-status { margin-top: 0 !important; }
	.w2c-status__text { --fs: 11; letter-spacing: .6px; }
	.w2c-status__text.w2-dot::before { width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin-right: calc(10 * var(--u)); }

	.w2c-faq > .w2-in { min-height: 0; padding-top: calc(48 * var(--u)); padding-bottom: calc(64 * var(--u)); }
	.w2c-faq__title { --fs: 64; line-height: .9; margin-top: calc(24 * var(--u)) !important; }
	.w2c-faq__grid { grid-template-columns: 1fr; gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)) !important; }
	.w2c-faq__item { padding-top: calc(8 * var(--u)); }
	.w2c-faq__q { --fs: 12; }
	.w2c-faq__question { --fs: 36; max-width: none; min-height: 0; margin: calc(8 * var(--u)) 0 !important; }
	.w2c-faq__answer { --fs: 17; max-width: none; }
	/* no collage on mobile: hide the whole band while the answers are placeholders */
	body:not(.logged-in):not(.editor-styles-wrapper) .w2c-faq:has(.w2c-faq__body.is-placeholder) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.w2c-meter__bar::before { animation: none; }
	.w2c-form button, .w2c-attach__plus { transition: none; }
}