/*
 * V.BuildCC — Contact Us (contact.php). Loaded after assets/css/home.css; everything is prefixed ct-.
 * Colours and fonts come from the shared tokens; the values the Contact brief fixes are set on .ct below.
 */

.ct {
  --ct-dark: #16513B;            /* buttons: dark green with white text (7.9:1) */
  --ct-dark-hover: #0F3D2C;
  --ct-text: #172033;
  --ct-muted: #526071;
  --ct-border: #E5E9ED;
  --ct-tint: #F6F7F3;
  --ct-card: #FFFFFF;
  --ct-error: #B42318;
  --ct-radius: 16px;
  --ct-input-radius: 10px;
  --ct-space: clamp(2.25rem, 6vw, 5rem);        /* 36px mobile → 80px desktop */
  color: var(--ct-text);
}
:root[data-theme="dark"] .ct {
  --ct-dark: #86C440;
  --ct-dark-hover: #9AD357;
  --ct-text: var(--vb-text);
  --ct-muted: var(--vb-text-muted);
  --ct-border: var(--vb-border);
  --ct-tint: var(--vb-bg-alt);
  --ct-card: var(--vb-card);
  --ct-error: #FDA29B;
}

/* ---------- type ---------- */
.ct-h1 {
  font-family: var(--font-heading);
  font-size: clamp(1.875rem, 1.2rem + 2.9vw, 3.375rem);   /* 30px → 54px */
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--ct-text);
  margin: 0.75rem 0 1rem;
  text-wrap: balance;
}
.ct-h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ct-text);
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
.ct-h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; line-height: 1.35; color: var(--ct-text); margin: 0 0 0.3rem; }
.ct-lead { font-size: clamp(1rem, 0.95rem + 0.35vw, 1.125rem); line-height: 1.65; color: var(--ct-muted); max-width: 46ch; margin: 0; }
.ct-body { font-size: 1rem; line-height: 1.65; color: var(--ct-muted); margin: 0; }
.ct-note { font-size: 0.875rem; line-height: 1.6; color: var(--ct-muted); margin: 0.75rem 0 0; }
/* Khmer: heading font, no negative tracking, taller lines so subscripts and vowels are never clipped */
html.lang-km :is(.ct-h1, .ct-h2, .ct-h3, .ct-card__label, .ct-field label, .ct-btn) { font-family: var(--font-heading-km); letter-spacing: normal; }
html.lang-km .ct-h1 { line-height: 1.45; }
html.lang-km :is(.ct-h2, .ct-h3) { line-height: 1.55; }
html.lang-km :is(.ct-lead, .ct-body, .ct-note, .ct-hint, .ct-error, .ct-privacy, .ct-alert) { font-family: var(--font-body-km); line-height: 1.85; }

/* ---------- sections ---------- */
.ct-section { padding-block: var(--ct-space); }
.ct-section--flush { padding-top: 0; }
.ct-section--tint { background: var(--ct-tint); }

/* ---------- hero (compact, two columns) ---------- */
.ct-hero { padding-block: clamp(1.75rem, 4vw, 3rem) 0; }
.ct-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.ct-hero__link { margin-top: 1.5rem; min-height: 44px; }
.ct-hero__media { border-radius: 18px; overflow: hidden; background: var(--ct-tint); height: clamp(260px, 26vw, 360px); border: 1px solid var(--ct-border); }
.ct-hero__media picture, .ct-hero__media img { display: block; width: 100%; height: 100%; }
.ct-hero__media img { object-fit: cover; }

/* ---------- contact options + form ---------- */
.ct-main { display: grid; grid-template-columns: minmax(0, 0.38fr) minmax(0, 0.62fr); gap: clamp(2rem, 3.5vw, 3rem); align-items: start; }
.ct-talk .ct-body { max-width: 40ch; }
.ct-cards { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.75rem; }
.ct-card { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.1rem; background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: 14px; }
.ct-card__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: var(--vb-green-tint); color: var(--vb-green-ink); }
.ct-card__body { display: flex; flex-direction: column; min-width: 0; }
.ct-card__label { margin: 0; font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; line-height: 1.5; color: var(--ct-muted); }
.ct-card__value, .ct-card__action {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px;      /* comfortable touch target */
  font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; color: var(--ct-text);
  text-decoration: none; overflow-wrap: anywhere;
}
.ct-card__value + .ct-card__value { margin-top: -0.4rem; }
.ct-card__value:hover, .ct-card__action:hover { color: var(--vb-green-ink); text-decoration: underline; text-underline-offset: 4px; }
.ct-card__action { font-size: 0.9375rem; color: var(--vb-green-ink); }
.ct-card__text { margin: 0.2rem 0 0; font-size: 0.975rem; line-height: 1.6; color: var(--ct-text); }
.ct-hours { margin: 1.25rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ct-muted); }
.ct-hours strong { color: var(--ct-text); font-weight: 600; }

.ct-formwrap { scroll-margin-top: calc(var(--header-h, 80px) + 16px); }   /* the sticky header never covers the form */
.ct-form, .ct-success { background: var(--ct-card); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 1px 2px rgba(23, 32, 51, 0.04); }
.ct-form { display: grid; gap: 1.1rem; }
.ct-form .ct-h2, .ct-form .ct-body, .ct-form .ct-note { margin: 0; }
.ct-form .ct-body { margin-top: -0.6rem; }
.ct-form .ct-note { margin-top: -0.6rem; }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1rem; }
.ct-group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 0.5rem; }
.ct-field { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.ct-field label { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.5; color: var(--ct-text); }
.ct-req { color: var(--ct-error); }
.ct-optional { font-family: var(--font-body); font-weight: 400; font-size: 0.875rem; color: var(--ct-muted); }
html.lang-km .ct-optional { font-family: var(--font-body-km); }
.ct-field input, .ct-field select, .ct-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid #C9D1D9;                    /* 3:1 against white: the field edge stays visible */
  border-radius: var(--ct-input-radius);
  background: var(--ct-card);
  color: var(--ct-text);
  font: inherit;
  font-size: 1rem;                               /* 16px: no zoom on iOS */
  line-height: 1.5;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
:root[data-theme="dark"] .ct-field :is(input, select, textarea) { border-color: var(--vb-border-strong); }
html.lang-km .ct-field :is(input, select, textarea) { font-family: var(--font-body-km); line-height: 1.8; }
.ct-field textarea { min-height: 150px; resize: vertical; }
.ct-field select { appearance: none; -webkit-appearance: none; padding-right: 2.5rem; background-repeat: no-repeat; background-position: right 0.85rem center; background-size: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23526071' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
.ct-field ::placeholder { color: #7A8591; opacity: 1; }
.ct-field :is(input, select, textarea):hover { border-color: #9AA5B1; }
.ct-field :is(input, select, textarea):focus-visible { outline: none; border-color: var(--ct-dark); box-shadow: 0 0 0 3px rgba(22, 81, 59, 0.28); }
.ct-field :is(input, textarea)[aria-invalid="true"] { border-color: var(--ct-error); }
.ct-field :is(input, textarea)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.22); }
.ct-hint { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ct-muted); }
.ct-error { margin: 0; font-size: 0.875rem; line-height: 1.55; font-weight: 500; color: var(--ct-error); }
.ct-error[hidden], .ct-alert[hidden], .ct-success[hidden], .ct-form[hidden] { display: none; }
.ct-alert { margin: 0; padding: 0.85rem 1rem; border-radius: 10px; background: #FEF3F2; border: 1px solid #FECDCA; color: #912018; font-size: 0.9375rem; line-height: 1.6; }
:root[data-theme="dark"] .ct-alert { background: rgba(240, 68, 56, 0.12); border-color: rgba(240, 68, 56, 0.4); color: #FDA29B; }
.ct-alert:focus-visible, .ct-success:focus-visible { outline: 3px solid var(--ct-dark); outline-offset: 3px; }
/* field kept out of sight for people, left empty by them */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.ct-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  width: 100%; min-height: 52px; padding: 0.75rem 1.5rem;
  border: 0; border-radius: 12px;
  background: var(--ct-dark); color: #fff;
  font-family: var(--font-heading); font-size: 1rem; font-weight: 600; line-height: 1.3; text-decoration: none;
  cursor: pointer;
  transition: background-color var(--transition-fast);
}
:root[data-theme="dark"] .ct-btn { color: #10210A; }
.ct-btn:hover { background: var(--ct-dark-hover); color: #fff; }
:root[data-theme="dark"] .ct-btn:hover { color: #10210A; }
.ct-btn:focus-visible { outline: 3px solid var(--ct-dark); outline-offset: 3px; }
.ct-btn[disabled] { opacity: 0.75; cursor: progress; }
.ct-btn--inline { width: auto; margin-top: 1.25rem; }
.ct-btn__spinner { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; animation: ct-spin 0.8s linear infinite; }
.ct-btn[aria-busy="true"] .ct-btn__spinner { display: inline-block; }
@keyframes ct-spin { to { transform: rotate(360deg); } }
.ct-privacy { margin: 0; font-size: 0.875rem; line-height: 1.6; color: var(--ct-muted); }
.ct-privacy a { color: var(--vb-green-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

.ct-success { text-align: left; }
.ct-success__tick { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--vb-green-tint); color: var(--vb-green-ink); margin-bottom: 1rem; }
.ct-success .vb-link { margin-top: 1.25rem; min-height: 44px; }

/* ---------- office location (rendered only when the address is configured) ---------- */
.ct-map { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: stretch; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--ct-border); border-radius: var(--ct-radius); background: var(--ct-card); }
.ct-map__info .ct-body + .ct-body { margin-top: 0.6rem; }
.ct-map__frame { min-height: 280px; border-radius: 12px; background: var(--ct-tint); border: 1px dashed var(--vb-border-strong); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.25rem; padding: 1.25rem; text-align: center; overflow: hidden; }
.ct-map__frame.is-loaded { padding: 0; border-style: solid; }
.ct-map__frame iframe { width: 100%; height: 100%; min-height: 320px; border: 0; display: block; }

/* ---------- what happens next ---------- */
.ct-steps { list-style: none; margin: clamp(1.25rem, 2.5vw, 2rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 2rem); }
.ct-step { display: flex; gap: 1rem; align-items: flex-start; }
.ct-step__num { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ct-card); border: 1.5px solid var(--vb-green); color: var(--vb-green-ink); font-family: var(--font-heading); font-weight: 700; }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .ct-main, .ct-map { grid-template-columns: minmax(0, 1fr); }
  .ct-talk .ct-body { max-width: 60ch; }
  .ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ct-steps { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ct-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .ct-hero__media { height: auto; aspect-ratio: 16 / 9; }      /* no fixed height on small screens */
}
@media (max-width: 640px) {
  .ct-row, .ct-cards { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .ct-btn__spinner { animation: none; border-top-color: rgba(255, 255, 255, 0.4); }
  .ct-field :is(input, select, textarea), .ct-btn { transition: none; }
}