/* Contact page. Ported from the locked prototype (ui_kits/contact/contact.css + contact-v2.css).
   The page always uses the "v2" light variant, so the two files are merged into their final values: every rule below is
   the v2 result, with the same selector order, so specificity and cascade outcomes are unchanged.
   Left out because the locked design never shows them: the hero photo (.ct-hero-bg, hidden by v2), the dark hero
   gradient, the native <select> styling (the form uses a combobox) and the .ct-ico img colour filter (icons are SVG).
   Non-standard media queries (1000px, 600px) are the prototype's own and are listed in docs/DEVIATIONS.md. */

.ct-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--navy); padding: clamp(56px, 8vw, 104px) 0 clamp(64px, 8vw, 112px); }
.ct-head { max-width: 720px; margin: 0 auto clamp(40px, 5vw, 64px); }
.ct-eyebrow { margin: 0 0 14px; color: var(--gold); font: 800 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.ct-head h1 { margin: 0; font: 400 clamp(40px, 5vw, 64px)/1.05 var(--serif); letter-spacing: -.02em; }
.ct-head p:not(.ct-eyebrow) { margin: 18px auto 0; max-width: 600px; color: var(--navy); font: 400 17px/1.7 var(--sans); text-wrap: pretty; }

/* The form sits alone in a centred Bootstrap column (page-contact.php: .row.justify-content-center > .col-lg-10.col-xl-8). */

/* Form */
.ct-form { align-self: stretch; position: relative; padding: clamp(24px, 2.6vw, 36px); border-radius: 10px; }
/* Fields: Bootstrap .row inside the padded card (the row's 10px side overhang sits inside the card padding, >= 24px).
   col-6 per field, col-12 for .ct-f--wide, status and submit; one column at <= 600. */
.ct-fields { --bs-gutter-x: 20px; --bs-gutter-y: 22px; }
.ct-f { display: grid; gap: 9px; min-width: 0; } /* grid, not flex: when a neighbour shows an error line the stretched cell spreads label and input exactly as the prototype did */
.ct-f label { font: 400 16px/1.2 var(--serif); color: var(--navy); }
.ct-f label i { font-style: normal; color: var(--gold); margin-left: 4px; }
.ct-f :is(input, textarea) { width: 100%; box-sizing: border-box; min-height: 50px; padding: 0 16px; border: 1px solid rgb(17 29 51 / 32%); border-radius: 10px; background-color: #fff; color: var(--navy); -webkit-text-fill-color: var(--navy); font: 400 15px var(--sans); transition: border-color .2s ease, background .2s ease; }
.ct-f textarea { min-height: 140px; padding: 14px 16px; resize: vertical; line-height: 1.6; }
.ct-f :is(input, textarea):-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #fff inset; }
.ct-f :is(input, textarea)::placeholder { color: var(--ink-muted); -webkit-text-fill-color: var(--ink-muted); opacity: 1; }
.ct-f :is(input, textarea):hover { border-color: rgb(17 29 51 / 60%); }
.ct-f :is(input, textarea):focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgb(17 29 51 / 12%); background-color: #fff; }
/* Same keyboard ring as the global button / link focus (base.css: 3px gold at 55%, 4px offset); it replaces the faint halo. */
.ct-f :is(input, textarea):focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 55%, transparent); outline-offset: 4px; box-shadow: none; }
.ct-f[data-invalid] :is(input, textarea) { border-color: #c0392b; }
.ct-err { margin: 0; color: #b3261e; font: 500 12px/1.4 var(--sans); }

.ct-submit { gap: 18px; margin-top: calc(var(--bs-gutter-y) + 6px); }
.ct-submit .button { min-width: 200px; justify-content: center; white-space: nowrap; }
.ct-submit .button:disabled { opacity: .45; cursor: not-allowed; }
.ct-note { margin: 0; color: var(--ink-muted); font: 400 13px/1.5 var(--sans); }
.ct-note span { color: var(--gold); }
.ct-status { box-sizing: border-box; width: calc(100% - var(--bs-gutter-x)); max-width: none; margin-inline: calc(var(--bs-gutter-x) / 2); margin-bottom: 0; padding: 14px 16px; border-radius: 10px; font: 500 14px/1.5 var(--sans); color: var(--navy); }
.ct-status--ok { background: rgb(208 176 106 / 18%); border: 1px solid var(--cyan); }
.ct-status--err { background: rgb(192 57 43 / 8%); border: 1px solid #c0392b; }

/* Animated outline around the form */
@property --ct-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes ctTrace { to { --ct-a: 360deg; } }
.ct-form::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none; background: conic-gradient(from var(--ct-a), rgb(17 29 51 / 22%) 0deg, rgb(17 29 51 / 22%) 250deg, var(--navy) 310deg, #3d5a8c 335deg, rgb(17 29 51 / 22%) 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: ctTrace 7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .ct-form::before { animation: none; background: var(--navy); } }

@media (max-width: 600px) { .ct-fields > .col-6 { width: 100%; } .ct-submit .button { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .ct-submit .button, .ct-f :is(input, textarea), .ct-combo-btn::after { transition: none; } }

/* Country combobox (enhanced by contact.js) */
.ct-combo { position: relative; }
.ct-combo input { padding-right: 44px; cursor: pointer; }
.ct-combo input[data-has-value]::placeholder { color: var(--navy); -webkit-text-fill-color: var(--navy); }
.ct-combo.is-open input { cursor: text; }
.ct-combo-btn { position: absolute; top: 0; right: 0; width: 44px; height: 50px; padding: 0; border: 0; background: none; cursor: pointer; }
.ct-combo-btn::after { content: ""; box-sizing: border-box; position: absolute; top: 19px; left: 17px; width: 7px; height: 7px; border-right: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy); transform: rotate(45deg); transition: transform .15s ease; }
.ct-combo.is-open .ct-combo-btn::after { top: 23px; transform: rotate(-135deg); }
.ct-combo-list { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 264px; margin: 0; padding: 6px; overflow-y: auto; overscroll-behavior: contain; list-style: none; border: 1px solid rgb(17 29 51 / 18%); border-radius: 10px; background: #fff; box-shadow: 0 14px 36px rgb(17 29 51 / 16%); }
.ct-combo-list li { padding: 10px 12px; border-radius: 6px; color: var(--navy); font: 400 15px/1.3 var(--sans); cursor: pointer; }
.ct-combo-list li.is-hi { background: var(--tp-gold-tint-3, #f6efe1); }
.ct-combo-list li.is-sel { font-weight: 600; }
.ct-combo-list li.is-sel::after { content: "✓"; float: right; color: var(--gold); }
.ct-combo-list .ct-combo-empty { color: var(--ink-muted); cursor: default; }