/* RPA · Contact block + form. Shared atoms (.rpa-eyebrow, .rpa-display, .rpa-btn, .rpa-link,
   .rpa-link-arrow) are the theme's. Form controls are styled here because only this widget has them. */

.rpa-contact-block {
  --_text: var(--rpa-c-text, var(--rpa-ink));
  --_muted: var(--rpa-c-muted, var(--rpa-slate));
  --_rule: var(--rpa-c-rule, var(--rpa-rule));
  --_rule-strong: var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  --_surface: var(--rpa-c-surface, var(--rpa-paper));
  --_field: var(--rpa-bone);
  display: grid;
  gap: clamp(3rem, 2rem + 4vw, 5rem) clamp(2.5rem, 7vw, 8rem);
  color: var(--_text);
}
.rpa-contact-block.is-tone-bone { --_field: var(--rpa-paper); }
.rpa-contact-block.is-tone-ink,
.rpa-contact-block.is-tone-petrol { --_field: color-mix(in srgb, var(--rpa-on-dark) 7%, transparent); }

@media (min-width: 1000px) {
  .rpa-contact-block { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
  .rpa-contact-block--no-form { grid-template-columns: minmax(0, 1fr); }
}

/* ---- left: details */
.rpa-contact-block__info { min-width: 0; }
.rpa-contact-block__eyebrow {
  padding-block-end: 1rem;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  border-block-end: 1px solid var(--_rule-strong);
}
.rpa-contact-block__title { font-size: var(--rpa-step-4); max-width: 13ch; margin: 0 0 1.5rem; }
.rpa-contact-block__text { max-width: 44ch; margin: 0; font-size: var(--rpa-step-0); line-height: var(--rpa-leading-body); color: var(--_muted); }

.rpa-contact-block__details { margin: clamp(2rem, 1.5rem + 2vw, 3.5rem) 0 0; border-block-start: 1px solid var(--_rule); }
.rpa-contact-block__line {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
  padding-block: 0.9rem;
  border-block-end: 1px solid var(--_rule);
}
.rpa-contact-block__line-label {
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_muted);
}
.rpa-contact-block__line-value {
  margin: 0;
  font-size: var(--rpa-step-1);
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Narrow phones: label over value, and the value scales with the screen, so an email address
   sets on one line down to 320px instead of breaking mid-word ("…risetprimaasia.c / om"). */
@media (max-width: 479.98px) {
  .rpa-contact-block__line { grid-template-columns: minmax(0, 1fr); gap: 0.25rem; }
  .rpa-contact-block__line-value { font-size: min(var(--rpa-step-1), 5.6vw); }
}

.rpa-contact-block__cols {
  display: grid;
  gap: 2rem clamp(1.5rem, 3vw, 3rem);
  margin-block-start: clamp(2rem, 1.5rem + 2vw, 3.5rem);
}
@media (min-width: 560px) {
  .rpa-contact-block__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-contact-block__group--address { grid-column: 1 / -1; }
}
.rpa-contact-block__group-title { margin: 0 0 0.75rem; }
.rpa-contact-block__address,
.rpa-contact-block__hours { margin: 0; max-width: 52ch; font-size: var(--rpa-step-0); line-height: 1.6; }
.rpa-contact-block__hours { font-variant-numeric: tabular-nums; }
.rpa-contact-block__social { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; font-size: var(--rpa-step-0); }
.rpa-contact-block__ext { font-family: var(--rpa-mono); font-size: 0.8em; }

/* Eyebrow only (no headline, no intro): its rule is the top rule of the details list, so the
   empty headline slot — two margins and a second rule ~50px lower — closes up. */
.rpa-contact-block__head--bare .rpa-contact-block__eyebrow { margin-block-end: 0; }
.rpa-contact-block__head--bare + .rpa-contact-block__details { margin-block-start: 0; border-block-start: 0; }

/* Phones and small tablets: someone who came to write should not scroll past address, hours and
   social links first. The info column dissolves into the block's own grid so the order can be
   headline → phone/email → FORM → address, hours, social. Source order (and so reading order for
   assistive tech at this width) stays logical: details, then form, then the rest. */
@media (max-width: 767.98px) {
  .rpa-contact-block { row-gap: 0; }
  .rpa-contact-block__info { display: contents; }
  .rpa-contact-block__head { order: 1; }
  .rpa-contact-block__details { order: 2; }
  .rpa-contact-block__form { order: 3; margin-block-start: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
  .rpa-contact-block__cols { order: 4; margin-block-start: clamp(2.5rem, 2rem + 3vw, 3.5rem); }
}

/* ---- right: the form, on a ruled sheet */
.rpa-contact-block__form {
  min-width: 0;
  padding: clamp(1.5rem, 1rem + 2.5vw, 3rem);
  border: 1px solid var(--_rule-strong);
  border-radius: var(--rpa-radius);
}
.rpa-contact-block__form-title {
  padding-block-end: 1rem;
  margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem);
  border-block-end: 1px solid var(--_rule);
}

.rpa-contact-form__grid { display: grid; gap: 1.5rem clamp(1rem, 2vw, 1.75rem); }
@media (min-width: 640px) {
  .rpa-contact-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-contact-form__field--company,
  .rpa-contact-form__field--message { grid-column: 1 / -1; }
}
.rpa-contact-form__field { min-width: 0; }
.rpa-contact-form__label {
  display: block;
  margin-block-end: 0.5rem;
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--_text);
}
.rpa-contact-form__optional { color: var(--_muted); text-transform: none; letter-spacing: 0.02em; }

.rpa-contact-form .rpa-contact-form__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.8rem 1rem;
  border: 1px solid var(--_rule-strong);
  border-radius: var(--rpa-radius);
  background: var(--_field);
  color: var(--_text);
  font: inherit;
  font-size: var(--rpa-step-0);
  line-height: 1.5;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color var(--rpa-dur-1) var(--rpa-ease), background-color var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-contact-form .rpa-contact-form__input--area { min-height: 10rem; resize: vertical; }
.rpa-contact-form .rpa-contact-form__input:hover { border-color: var(--_text); }
.rpa-contact-form .rpa-contact-form__input:focus-visible {
  border-color: var(--_text);
  outline: 2px solid var(--rpa-c-focus, var(--rpa-indigo));
  outline-offset: 2px;
}
/* Invalid: a heavier ink frame plus the written message — never colour alone. */
.rpa-contact-form .is-invalid .rpa-contact-form__input { border-color: var(--_text); box-shadow: inset 0 0 0 1px var(--_text); }
.rpa-contact-form__error {
  display: flex;
  gap: 0.5em;
  margin: 0.5rem 0 0;
  font-size: var(--rpa-step--1);
  font-weight: 500;
  line-height: 1.45;
  color: var(--_text);
}
.rpa-contact-form__error::before { content: "!"; flex: none; font-family: var(--rpa-mono); font-weight: 700; }

.rpa-contact-form__summary {
  margin-block-end: 1.75rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--_text);
  border-inline-start-width: 4px;
  border-radius: var(--rpa-radius);
  font-size: var(--rpa-step-0);
  line-height: 1.5;
}
.rpa-contact-form__summary-title { margin: 0; font-weight: 600; }
.rpa-contact-form__summary ul { margin: 0.5rem 0 0; padding-inline-start: 1.1rem; }
.rpa-contact-form__summary a { color: var(--rpa-c-link, var(--rpa-indigo)); text-decoration: underline; text-underline-offset: 0.2em; }

/* Honeypot: clipped rather than display:none, which some bots check for. */
.rpa-contact-form__hp { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.rpa-contact-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-block-start: 2rem;
}
.rpa-contact-form__actions .rpa-btn { cursor: pointer; }
.rpa-contact-form__note { flex: 1 1 16rem; margin: 0; max-width: 40ch; font-size: var(--rpa-step--1); line-height: 1.5; color: var(--_muted); }
.rpa-contact-form__note a { color: var(--rpa-c-link, var(--rpa-indigo)); text-decoration: underline; text-underline-offset: 0.2em; }

/* ---- success */
.rpa-contact-form--sent { scroll-margin-top: calc(var(--rpa-header-h) + 2rem); padding-block: clamp(1rem, 4vw, 3rem); }
.rpa-contact-form { scroll-margin-top: calc(var(--rpa-header-h) + 6rem); }
.rpa-contact-form__sent-mark { margin: 0 0 1.25rem; color: var(--rpa-verdigris); }
.rpa-contact-block.is-tone-paper .rpa-contact-form__sent-mark,
.rpa-contact-block.is-tone-bone .rpa-contact-form__sent-mark { color: var(--rpa-c-accent, var(--rpa-petrol)); }
.rpa-contact-form__sent-title { font-size: var(--rpa-step-3); max-width: 16ch; margin: 0 0 1.25rem; }
.rpa-contact-form__sent-text { max-width: 44ch; margin: 0 0 1.75rem; color: var(--_muted); }
.rpa-contact-form__again { margin: 0; }

/* Links here are .rpa-link (theme). Elementor's `.elementor a { text-decoration: none }` ties with the
   theme's `a.rpa-link` and loads later, so the underline is re-asserted at widget specificity. */
.rpa-contact-block .rpa-contact-block__link {
  color: var(--rpa-c-link, var(--rpa-indigo));
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
}
.rpa-contact-form__hp input { width: 1px; min-width: 0; padding: 0; border: 0; }