/* contact block (Phase 3 Stage 4 + template styles).
   Field and input styling come from css/components/forms.css; the block emits
   .contact-form, which that sheet styles. This file adds only the optional
   "Template style" panel treatments chosen in the block Settings, each keyed by
   a contact-section--{style} modifier on the section. The bespoke campaign
   pages that hand-styled .contact-form (a white card, a brand-colour box) fold
   into these. Colour is always a token; the panel re-colours per brand.

   The modifier targets .contact-form, which is the form column in every
   display_style (form / form-left / form-right), so only the form panels, never
   the copy column beside it. */

/* h2 inherited the global heading clamp (up to 3rem), reading almost as large as
   a page h1 — and contact blocks often carry several h2s (Our Address /
   Telephone / Email …), which looks heavy. Cap them, same rule as the content
   block's .pull-out-content h2. */
.contact-section h2 { font-size: clamp(2rem, 4vw, 2.2rem); }

/* --- Card: the form column becomes an elevated light panel ---------------
   Text is pinned to the light-ground tokens so it stays legible even when the
   section itself is a dark or coloured ground (bg-blue, bg-dark-blue, bg-red).
   Two classes + descendant outranks bridge.css's on-dark section text rules. */
.contact-section--card .contact-form {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-panel);
}
.contact-section--card .contact-form,
.contact-section--card .contact-form :is(p, li, label, .frm_primary_label, .frm_description) {
  color: var(--text);
}
.contact-section--card .contact-form :is(h2, h3, h4, .content-area-title) {
  color: var(--text-heading);
}
.contact-section--card .contact-form a:not(.btn):not(.frm_button_submit) {
  color: var(--link);
}

/* --- Accent: the form column becomes a brand-colour panel with light text ---
   Inputs keep their own white fill and border (forms.css); only the surrounding
   panel and its labels re-colour. Sits best on a dark or neutral section. */
.contact-section--accent .contact-form {
  background: var(--surface-brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-panel);
}
.contact-section--accent .contact-form :is(h2, h3, h4, .content-area-title, p, li, label, .frm_primary_label, .frm_description) {
  color: var(--text-on-brand);
}