/**
 * Page-specific additions to KAIROS's shared public-site theme.
 * Covers public CiviCRM profiles, including signup profiles 58 and 69.
 * The original Drupal 7 theme's common styling lives in kairos-public.css.
 */
body.kairos-public--profile .kairos-public-panel {
  padding: 54px 48px 65px 96px !important;
}

/* Drupal's 16px base with 2em headings gives 32px, not the 28px of v4.2.
 * Its page-title class has zero margins, retaining the original field start. */
body.kairos-public--profile .kairos-public-panel :is(h1, .crm-title, .crm-page-title) {
  margin: 0;
  font: 700 32px/1.5 'PT Sans', Arial, sans-serif;
  color: #669;
}

/* CiviCRM 6.16 civicrm.css gives .crm-public .crm-section zero margin.
 * The original Drupal page retained separation between profile field rows.
 * The ID is intentional: the former rule never won the core CSS cascade. */
body.kairos-public--profile #crm-container.crm-public .crm-section {
  display: flow-root;
  margin: 0 0 12px !important;
  padding: 0;
}

body.kairos-public--profile .kairos-public-panel .crm-section > .label {
  float: left;
  margin: 0;
  padding: 6px 8px 0 0;
  color: #545454;
  font: 400 14px/1.45 'PT Serif', Georgia, serif;
  text-align: right;
}

body.kairos-public--profile .kairos-public-panel .crm-section > .content {
  line-height: 1.5;
}

body.kairos-public--profile .kairos-public-panel .crm-section :is(input[type='text'], input[type='email'], input[type='tel'], input[type='number'], select) {
  min-height: 38px;
}

/* CiviCRM 6.16 checkbox groups are divs, NOT tables. Core gives every
 * crm-option-label-pair a fractional flex-basis; this spreads two options
 * across the entire content width. Restore Drupal 7's compact columns while
 * honouring the configured options_per_line count and original order. */
body.kairos-public--profile #crm-container.crm-public .crm-multiple-checkbox-radio-options.crm-options-per-line {
  display: grid !important;
  grid-template-columns: repeat(var(--crm-opts-per-line, 1), max-content);
  column-gap: 9px;
  row-gap: 7px;
  justify-content: start;
  width: max-content;
  max-width: 100%;
}

body.kairos-public--profile #crm-container.crm-public .crm-multiple-checkbox-radio-options.crm-options-per-line > .crm-option-label-pair {
  flex: none !important;
  min-width: 0;
}

body.kairos-public--profile .kairos-public-panel .crm-section :is(input[type='checkbox'], input[type='radio']) {
  margin: 0 4px 0 0;
  vertical-align: middle;
}

body.kairos-public--profile .kairos-public-panel .crm-submit-buttons {
  margin-top: 18px;
}

@media (max-width: 700px) {
  body.kairos-public--profile .kairos-public-panel {
    padding: 26px 18px 38px !important;
  }

  body.kairos-public--profile .kairos-public-panel .crm-section > .label {
    float: none;
    margin-bottom: 4px;
    padding: 0;
    text-align: left;
  }

  /* One column on small screens; never allow wide labels to create overflow. */
  body.kairos-public--profile #crm-container.crm-public .crm-multiple-checkbox-radio-options.crm-options-per-line {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    row-gap: 8px;
  }

  body.kairos-public--profile #crm-container.crm-public .crm-multiple-checkbox-radio-options.crm-options-per-line .crm-option-label-pair label {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}