/* tibu-afrika sections/contact.css */

/*
 * The Contact route's own section partial: the "Talk to us directly" channel
 * list (patterns/contact-direct.php). Loaded right after theme.css on the
 * front end and in the editor (includes/assets.php), under the same rules:
 * presets and color-mix() only, no hex, no preset variable declared (D-13).
 * Every selector is scoped under .tibu-section--contact-direct.
 *
 * The rows are the companion plugin's stacked tibu/contact-details markup (it
 * ships no CSS, Phase 5 D-28), styled here as the footer styles its own copy:
 * one row per channel, 16px apart, values that wrap anywhere. Unlike the
 * footer, each row shows its label, because the Astro channel icons are not
 * ported in Phase 7 (a recorded Phase 9 parity item).
 */

/* The 48rem measure: one column in Phase 7 (Phase 10 adds the form beside it). */
.tibu-section--contact-direct.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
}

/*
 * The Astro aside card: brand-grey 10% fill, 40% border, 2xl radius, 24px
 * padding. Core kebab-cases a preset slug for its variable, splitting digits
 * from letters, so the 2xl radius preset prints as --2-xl.
 */
.tibu-section--contact-direct .tibu-contact-panel {
  box-sizing: border-box;
  padding: var(--wp--preset--spacing--6);
  border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-grey) 40%, transparent);
  border-radius: var(--wp--preset--border-radius--2-xl);
  background-color: color-mix(in srgb, var(--wp--preset--color--brand-grey) 10%, transparent);
}

.tibu-section--contact-direct .tibu-contact-panel > h2 {
  margin-block: 0 var(--wp--preset--spacing--4);
  color: var(--wp--preset--color--brand-maroon);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 700;
  letter-spacing: normal;
  line-height: 1.556;
}

.tibu-section--contact-direct .tibu-contact-panel > .tibu-contact-details {
  margin-block: 0;
}

.tibu-section--contact-direct .tibu-contact-details .tibu-list {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--4);
  margin: 0;
  padding: 0;
  color: var(--wp--preset--color--ink-900);
  list-style: none;
}

.tibu-section--contact-direct .tibu-contact-details [data-tibu-contact] {
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--1);
  min-width: 0;
  margin: 0;
}

.tibu-section--contact-direct .tibu-contact-details .tibu-contact-label {
  color: var(--wp--preset--color--ink-500);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.43;
}

.tibu-section--contact-direct .tibu-contact-details .tibu-link,
.tibu-section--contact-direct .tibu-contact-details .tibu-detail {
  overflow-wrap: anywhere;
}

.tibu-section--contact-direct .tibu-contact-details .tibu-link {
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  transition: color 150ms;
}

.tibu-section--contact-direct .tibu-contact-details .tibu-link:hover {
  color: var(--wp--preset--color--brand-maroon);
}

/* Source Contact presentation, scoped to the managed form section. */
.tibu-section--contact-form { background:var(--wp--preset--color--surface-0); }
.tibu-section--contact-form.is-layout-constrained > .tibu-contact-layout { max-width:var(--wp--style--global--wide-size); }
.tibu-contact-layout { gap:2.5rem; align-items:flex-start; }
.tibu-section--contact-form h2 { color:var(--wp--preset--color--brand-maroon); }
.tibu-contact-form { font:inherit; min-width:0; }
.tibu-contact-form .forminator-row { display:flex; gap:1.25rem; margin-bottom:1.25rem; }
.tibu-contact-form .forminator-col { flex:1; min-width:0; }
.tibu-contact-form label { display:block; font-size:.875rem; font-weight:600; margin-bottom:.25rem; }
.tibu-contact-form input:not([type=hidden]):not([type=checkbox]):not([type=radio]),
.tibu-contact-form textarea,
.tibu-contact-form select { box-sizing:border-box; width:100%; padding:.75rem 1rem; border:1px solid color-mix(in srgb,var(--wp--preset--color--brand-grey) 40%,transparent); border-radius:1rem; background:var(--wp--preset--color--surface-0); color:inherit; font:inherit; }
.tibu-contact-form textarea { min-height:10rem; resize:vertical; }
.tibu-contact-form button { cursor:pointer; padding:.75rem 1.5rem; border:0; border-radius:1rem; background:var(--wp--preset--color--brand-blue); color:var(--wp--preset--color--surface-0); font:inherit; font-weight:600; }
.tibu-contact-form :is(input,textarea,select,button):focus-visible { outline:2px solid var(--wp--preset--color--brand-blue); outline-offset:2px; }
.tibu-contact-form .forminator-error-message { display:block; color:var(--wp--preset--color--brand-maroon); font-size:.875rem; margin-top:.25rem; }
.tibu-contact-form .forminator-response-message { padding:1rem; border-left:4px solid var(--wp--preset--color--brand-blue); border-radius:1rem; margin-bottom:1.5rem; }
.tibu-contact-form .forminator-response-message[aria-hidden=true] { display:none; }
.tibu-contact-layout .tibu-contact-panel { padding:1.5rem; border:1px solid color-mix(in srgb,var(--wp--preset--color--brand-grey) 40%,transparent); border-radius:1rem; background:color-mix(in srgb,var(--wp--preset--color--brand-grey) 10%,transparent); }
@media(max-width:640px) { .tibu-contact-form .forminator-row { flex-direction:column; } }