/****************************ASISA FOUNDATION FORMS****************************/
/* The Foundation's Umbraco Forms theme (6.8 Contact Us, AB#100775 / AB#100776; the base for 8 Forms,
   AB#100793 / AB#100794). Every rule is scoped under .brand-foundation .umbraco-forms-Foundation: the
   second class is the wrapper Umbraco Forms writes for a form rendered with the "Foundation" theme, and
   only a Foundation page loads this sheet, so nothing here can reach ASISA, Academy or ESD, or a
   Foundation form rendered with any other theme.

   Views/Partials/Forms/Themes/Foundation/Form.cshtml does NOT load Umbraco Forms' default stylesheet.
   The rules that carry behaviour (the honeypot and the conditionally hidden fields) are NOT here: they
   are in foundation-forms-theme.css, which the theme loads itself, because the theme can be picked on
   pages that never load this sheet. This file is looks only, validation colours included.

   Styled today: text inputs, selects, textareas and tick boxes, which is what the Contact Us frame
   draws. 8.1 Forms (AB#100793) makes this the field pattern for every Foundation form: a bold label with
   its asterisk, placeholder text in the input, a rounded input with a light border, and the outlined
   pill. Foundation form pages fall back to this theme when no theme is picked (Forms/FoundationFormTheme.cs). Date picker inputs (input.datepickerfield) and file uploads (.fileUpload) are not, because no
   Foundation form has one yet; 8 Forms (AB#100793 / AB#100794) styles them when its frames call for one.

   Measured off design/foundation-contact-us/enquiry-form.jpg (1440 wide; subtract the 132 px caption
   strip from any file y). Every value says where it came from: "frame:" is a measurement, ESTIMATE is
   not. The frame has no error state and no mobile layout, so those values are all ESTIMATE. */

.brand-foundation .umbraco-forms-Foundation {
  --fnd-form-accent: #A137B7;             /* frame: the button's border and text; ASISA Foundation Signature Colour/100 */
  --fnd-form-border: #D3D2D7;             /* frame: the input outline, sampled (211, 210, 215) */
  --fnd-form-ink: #262626;                /* the Foundation's body text, as the Contact Us page uses */
  --fnd-form-placeholder: #636363;        /* frame: the placeholder text ("First name", "you@gmail.com"), darkest
                                             ink sampled (99, 99, 99) (AB#100793) */
  --fnd-form-error: #B42318;              /* ESTIMATE: no error state in the frame (Q#16) */
  --fnd-form-width: 750px;                /* frame: x 345 to 1095 */
  --fnd-form-gap: 32px;                   /* frame: two 359 px columns with 32 px between them */
  --fnd-form-input: 45px;                 /* frame: the single-line inputs */
  --fnd-form-textarea: 127px;             /* frame: the message box */
  --fnd-form-row: 29px;                   /* frame: about 29 px from one input's foot to the next label */
  --fnd-form-label-gap: 8px;              /* frame: about 8 px from a label's foot to its input */
  --fnd-form-button-height: 38px;         /* frame: the submit pill */
  --fnd-form-button-width: 130px;         /* frame: about 130 px wide */

  color: var(--fnd-form-ink);
  margin: 0 auto;
  max-width: var(--fnd-form-width);
}

/* ---- the default stylesheet's fieldset reset (hiding is in foundation-forms-theme.css) ---- */

.brand-foundation .umbraco-forms-Foundation fieldset {
  border: none;
  margin: 0;
  min-width: 0;                           /* a fieldset's default min-width stops the columns shrinking */
  padding: 0;
}

/* ---- the columns: the editor sets them in the form designer (a 6 + 6 row is the frame's pair) ---- */

.brand-foundation .umbraco-forms-Foundation .row-fluid {
  display: flex;
  gap: 0 var(--fnd-form-gap);
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container {
  flex: 12 1 0;                           /* col-md-12 and anything unknown take the full row */
  min-width: 0;
}

/* Bootstrap gives every .col-md-N column width: 100% and 15 px side padding in content-box, so once the
   row stacks on a phone each column is 30 px wider than the screen and the page scrolls sideways
   (AB#105933 gap 1.1: 390 px of page on a 360 px screen). The theme's own gap spaces the columns, so the
   padding goes. It also brings desktop to the frame: the form is 750 px across (x 345 to 1095) and a
   6 + 6 pair is two 359 px columns, where the padding had left 720 px and 329 px of input. This covers
   the field columns and the submit row's col-md-12 alike. */
.brand-foundation .umbraco-forms-Foundation .row-fluid > [class*="col-md-"] {
  box-sizing: border-box;
  padding-left: 0;
  padding-right: 0;
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container.col-md-3 { flex-grow: 3; }
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container.col-md-4 { flex-grow: 4; }
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container.col-md-6 { flex-grow: 6; }
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container.col-md-8 { flex-grow: 8; }
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-container.col-md-9 { flex-grow: 9; }

/* ---- one field: label, input, help and validation ---- */

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-field {
  margin: 0 0 var(--fnd-form-row) 0;
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-label,
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-legend {
  display: block;
  font-size: 16px;                        /* ESTIMATE: the labels read 16 px at 1440 */
  font-weight: 700;                       /* frame: bold labels ("First name*"); 8.1 Forms (AB#100793) asks for a
                                             bold label above each field */
  line-height: 1.4;
  margin: 0 0 var(--fnd-form-label-gap) 0;
  padding: 0;
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-indicator {
  color: inherit;                         /* frame: the asterisk is the label's own ink, sampled (28, 28, 28),
                                             and sits hard against the label ("First name*") (AB#100793) */
  margin-left: 0;
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-tooltip {
  display: block;
  font-size: 14px;                        /* ESTIMATE */
  margin: 0 0 var(--fnd-form-label-gap) 0;
}

.brand-foundation .umbraco-forms-Foundation input.text,
.brand-foundation .umbraco-forms-Foundation select,
.brand-foundation .umbraco-forms-Foundation textarea {
  background: #FFFFFF;
  border: 1px solid var(--fnd-form-border);
  border-radius: 6px;                     /* frame: rounded corners, the curve runs about 6 px each way at
                                             x 345, y 1472 in enquiry-form.jpg (AB#100793) */
  box-sizing: border-box;
  color: var(--fnd-form-ink);
  display: block;
  font: inherit;
  height: var(--fnd-form-input);
  margin: 0;
  padding: 0 12px;                        /* ESTIMATE */
  width: 100%;
}

.brand-foundation .umbraco-forms-Foundation input.text::placeholder,
.brand-foundation .umbraco-forms-Foundation textarea::placeholder {
  color: var(--fnd-form-placeholder);
  opacity: 1;                             /* Firefox dims a placeholder by default; the frame's grey is the grey */
}

.brand-foundation .umbraco-forms-Foundation textarea {
  height: var(--fnd-form-textarea);
  padding: 10px 12px;                     /* ESTIMATE */
  resize: vertical;
}

.brand-foundation .umbraco-forms-Foundation input.text:focus,
.brand-foundation .umbraco-forms-Foundation select:focus,
.brand-foundation .umbraco-forms-Foundation textarea:focus {
  border-color: var(--fnd-form-accent);   /* ESTIMATE: no focus state in the frame */
  outline: 2px solid var(--fnd-form-accent);
  outline-offset: 0;
}

.brand-foundation .umbraco-forms-Foundation .input-validation-error {
  border-color: var(--fnd-form-error);
}

.brand-foundation .umbraco-forms-Foundation .field-validation-error,
.brand-foundation .umbraco-forms-Foundation .validation-summary-errors {
  color: var(--fnd-form-error);
  display: block;
  font-size: 14px;                        /* ESTIMATE */
  margin-top: 4px;
}

/* ---- tick boxes, including the data consent field an editor adds for Q#84 ---- */

.brand-foundation .umbraco-forms-Foundation .checkbox input,
.brand-foundation .umbraco-forms-Foundation .checkboxlist input,
.brand-foundation .umbraco-forms-Foundation .radiobuttonlist input,
.brand-foundation .umbraco-forms-Foundation .dataconsent input {
  accent-color: var(--fnd-form-accent);
  height: auto;
  margin-right: 8px;
  width: auto;
}

/* ---- the consent line: the tick box beside its words, with the Privacy Policy as a link ---- */
/* Q#84 interim wording (Theresa Scott, 9 Oct 2026): "I agree to the ASISA Foundation Privacy Policy."
   The words come from the form's Data Consent field; Fieldtypes/FieldType.DataConsent.cshtml keeps
   its link (AB#100775, AB#100793). No frame draws this line, so every value is ESTIMATE. */

.brand-foundation .umbraco-forms-Foundation .dataconsent .umbraco-forms-field-wrapper {
  --fnd-consent-text-start: 21px;         /* the tick box (13 px) plus its 8 px gap: where the words start */
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;                        /* lets the validation message take its own line below the words */
}

/* The consent field's validation message (AB#100793 QA note, 16 Oct 2026). The wrapper is a flex row, so
   the message sat on the same line, right after "Privacy Policy" and a little lower. It now takes a full
   line under the consent words, starting where the words start, in the same style as the other fields. */
.brand-foundation .umbraco-forms-Foundation .dataconsent .field-validation-error {
  flex-basis: 100%;
  margin-top: 6px;
  padding-left: var(--fnd-consent-text-start);
}

.brand-foundation .umbraco-forms-Foundation .dataconsent .umbraco-forms-field-wrapper input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 3px;                        /* ESTIMATE: sits on the first line's cap height */
}

.brand-foundation .umbraco-forms-Foundation .fnd-consent__copy {
  cursor: pointer;
  font-size: 14px;                        /* ESTIMATE */
  font-weight: 400;
  line-height: 1.4;
}

.brand-foundation .umbraco-forms-Foundation .fnd-consent__copy a {
  color: inherit;
  text-decoration: underline;
}

.brand-foundation .umbraco-forms-Foundation .fnd-consent__copy a:hover,
.brand-foundation .umbraco-forms-Foundation .fnd-consent__copy a:focus-visible {
  color: var(--fnd-form-accent);
}

/* ---- the submit pill, at the left edge of the form ---- */

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-navigation {
  justify-content: flex-start;            /* FRAME: the pill starts at the form's left edge (x 345). The
                                             PR 54951 review had centred it; QA flagged the difference on
                                             AB#100793 (16 Oct 2026), so the frame wins. The .row-fluid rule
                                             above makes this a flex row, so text-align alone cannot move it */
  padding: 8px 0 0 0;                     /* ESTIMATE */
  text-align: left;
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-navigation .btn {
  background: transparent;
  border: 2px solid var(--fnd-form-accent);
  border-radius: calc(var(--fnd-form-button-height) / 2);
  color: var(--fnd-form-accent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  height: var(--fnd-form-button-height);
  margin: 0 12px 0 0;                     /* no left margin, so the first pill sits on the form's left edge */
  min-width: var(--fnd-form-button-width);
  padding: 0 24px;                        /* ESTIMATE */
}

.brand-foundation .umbraco-forms-Foundation .umbraco-forms-navigation .btn:hover,
.brand-foundation .umbraco-forms-Foundation .umbraco-forms-navigation .btn:focus-visible {
  background: var(--fnd-form-accent);     /* ESTIMATE: no hover state in the frame */
  color: #FFFFFF;
}

/* ---- narrow screens: no mobile frame, so the breakpoint is ESTIMATE ---- */

@media (max-width: 767px) {
  .brand-foundation .umbraco-forms-Foundation .row-fluid {
    flex-direction: column;
  }
}

/* ---- touch: a tick box a finger can hit (AB#105933 gap 1.3) ----
   The browser draws a 13 x 13 px box. On a phone or any touch screen the box grows to 24 x 24 px
   (WCAG 2.5.8) and its label takes 12 px above and below, so the box and the words it is tied to
   (label for=) make one tap row at least 44 px tall. Desktop with a mouse keeps the smaller box. */

@media (max-width: 767px), (pointer: coarse) {
  .brand-foundation .umbraco-forms-Foundation .checkbox input,
  .brand-foundation .umbraco-forms-Foundation .checkboxlist input,
  .brand-foundation .umbraco-forms-Foundation .radiobuttonlist input,
  .brand-foundation .umbraco-forms-Foundation .dataconsent input {
    height: 24px;
    vertical-align: middle;
    width: 24px;
  }

  .brand-foundation .umbraco-forms-Foundation .checkboxlist label,
  .brand-foundation .umbraco-forms-Foundation .radiobuttonlist label {
    display: inline-block;
    padding: 12px 0;
  }

  .brand-foundation .umbraco-forms-Foundation .dataconsent .umbraco-forms-field-wrapper input[type="checkbox"] {
    margin-right: 0;                      /* the label's padding fills the gap, so no dead strip between them */
    margin-top: 10px;                     /* centres the box on the first line of the padded label */
  }

  .brand-foundation .umbraco-forms-Foundation .fnd-consent__copy {
    padding: 12px 0 12px 10px;
  }

  .brand-foundation .umbraco-forms-Foundation .dataconsent .umbraco-forms-field-wrapper {
    --fnd-consent-text-start: 34px;       /* the 24 px touch box plus the label's 10 px left padding */
  }
}