/* =========================================================================
   goodin-event-form.css
   Shared form stylesheet for the Goodin Company event registration system
   Sitefinity 14.4 — companion to event-confirmation-simple.css and
   event-registration-max.css (and any future event template).

   PURPOSE
   -------
   Single source of truth for the form-on-dark treatment used inside the
   #register section across all event registration page templates. The
   form widget is the same Sitefinity Form across all events, so its
   styling lives here rather than being duplicated per page.

   USAGE
   -----
   Reference this stylesheet from the Sitefinity Page Template *before*
   the page-specific stylesheet so page rules can override if needed:

       <link rel="stylesheet" href="/path/goodin-event-form.css">
       <link rel="stylesheet" href="/path/event-confirmation-simple.css">

   The consuming page CSS provides the brand palette tokens (--gd-blue,
   --gd-midnight, --gd-goldenrod, --gd-white, --gd-stoplight, --gd-earth,
   --gd-sky, --gd-darkgray, --gd-black). This file declares the *derived*
   tokens (color-mix variants, alpha treatments, rgb triplets) it consumes
   internally; if the page CSS already defines them with identical values
   the duplicate is harmless (CSS variables resolve at use-site).

   APPLY VIA
   ---------
   Add `class="form-on-dark"` to the Sitefinity form container (or its
   wrapping .registration-card) to flip controls into the translucent-
   on-dark palette. For a single isolated input on a dark surface, use
   `class="form-control-on-dark"` on the input.

   ARCHITECTURE
   ------------
   1. Form-derived tokens (additive — declared as fallback)
   2. .form-control-on-dark — single-input variant
   3. .form-on-dark — form-container modifier and its sub-rules
      3a. text utility overrides on dark
      3b. form-control / form-select translucent palette
      3c. form-label and required-field highlight
      3d. form-check (radio / checkbox + label)
      3e. Sitefinity ul.list-inline radio groups
      3f. fine-print fieldset block layout
      3g. validation messages
      3h. Sitefinity form-container, form-section-header
      3i. fine-print compliance copy
      3j. form-text help copy
      3k. datasheet-people multi-attendee grid
      3l. multi-step navigation completed-step accent
      3m. form widget action buttons (Next / Submit / Back)
   4. Responsive — small-screen ul.list-inline wrap
   ========================================================================= */


/* =========================================================================
   1. FORM-DERIVED TOKENS  (additive — supports the .form-on-dark family)
   color-mix() and rgb-triplet derivations from the Goodin brand palette.
   Declared here so this file is self-contained; the consuming page CSS
   may also declare these (with identical values) and that is harmless.
   ========================================================================= */
:root {
  /* RGB triplets for rgba() interop */
  --gd-blue-rgb:        0, 97, 170;
  --gd-midnight-rgb:    27, 50, 68;
  --gd-goldenrod-rgb:   251, 176, 64;
  --gd-pumpkin-rgb:     218, 98, 30;
  --gd-stoplight-rgb:   244, 67, 54;
  --gd-sky-rgb:         84, 159, 217;
  --gd-black-rgb:       25, 25, 25;
  --gd-white-rgb:       255, 255, 255;

  /* Accent rings used by form focus states */
  --gd-goldenrod-ring:  color-mix(in srgb, var(--gd-goldenrod) 30%, transparent);
  --gd-pumpkin-ring:    color-mix(in srgb, var(--gd-pumpkin)   30%, transparent);

  /* Subtle gold for completed steps in the multi-step nav */
  --gd-accent-subtle:   #d5a35d;

  /* White-on-dark alpha treatments (form surfaces, dividers) */
  --gd-white-soft-08:   color-mix(in srgb, var(--gd-white)  8%, transparent);
  --gd-white-soft-10:   color-mix(in srgb, var(--gd-white) 10%, transparent);
  --gd-white-soft-16:   color-mix(in srgb, var(--gd-white) 16%, transparent);
  --gd-white-soft-22:   color-mix(in srgb, var(--gd-white) 22%, transparent);
  --gd-white-soft-35:   color-mix(in srgb, var(--gd-white) 35%, transparent);
  --gd-white-text-86:   color-mix(in srgb, var(--gd-white) 86%, transparent);
  --gd-white-text-92:   color-mix(in srgb, var(--gd-white) 92%, transparent);
}


/* =========================================================================
   2. .form-control-on-dark — single-input variant for dark panels
   Use on individual inputs that sit on a dark surface but are not inside
   a .form-on-dark container (e.g. a single search field in the hero).
   ========================================================================= */
.form-control-on-dark {
  background-color: var(--gd-white-soft-10);
  border: 1px solid var(--gd-white-soft-22);
  color: var(--gd-white);
  border-radius: 14px;
}
.form-control-on-dark::placeholder {
  color: color-mix(in srgb, var(--gd-white) 55%, transparent);
}
.form-control-on-dark:focus {
  outline: none;
  background-color: var(--gd-white-soft-16);
  border-color: var(--gd-sky);
  box-shadow: 0 0 0 4px var(--gd-pumpkin-ring);
  color: var(--gd-white);
}


/* =========================================================================
   3. .form-on-dark — form-container modifier
   Apply to a Sitefinity form container (or wrapping .registration-card)
   to flip every form control inside into the translucent-on-dark palette.
   ========================================================================= */
.form-on-dark {
  --bs-form-invalid-color:        var(--gd-stoplight);
  --bs-form-invalid-border-color: var(--gd-stoplight);
  --bs-form-valid-color:          var(--gd-earth);
  --bs-form-valid-border-color:   var(--gd-earth);
}

/* ---- 3a. Text utility overrides on dark ---- */
.form-on-dark .text-secondary {
  color: var(--gd-white-text-86) !important;
}
.form-on-dark .text-muted {
  color: color-mix(in srgb, var(--gd-white) 65%, transparent) !important;
}

/* ---- 3b. Bootstrap form controls — translucent-on-dark.
   Specificity 0,0,2,0 beats single-class element rules. ---- */
.form-on-dark .form-control,
.form-on-dark .form-select {
  background-color: var(--gd-white-soft-10);
  border-color:     var(--gd-white-soft-35);
  color:            var(--gd-white);
  border-radius:    14px;
}
.form-on-dark .form-control::placeholder {
  color:   color-mix(in srgb, var(--gd-white) 55%, transparent);
  opacity: 1;
}
.form-on-dark .form-control:focus,
.form-on-dark .form-select:focus {
  background-color: var(--gd-white-soft-16);
  border-color:     var(--gd-sky);
  box-shadow:       0 0 0 4px var(--gd-pumpkin-ring);
  color:            var(--gd-white);
}

/* ---- 3c. Labels and required-field highlight ---- */
.form-on-dark .form-label {
  color:         var(--gd-white-text-92);
  font-weight:   700;
  margin-bottom: 0.35rem;
}

/* Required-field highlight via :has() (modern browsers; degrades on older). */
@supports selector(label:has(+ input)) {
  .form-on-dark label.form-label:has(+ input[required]),
  .form-on-dark label.form-label:has(+ select[required]),
  .form-on-dark label.form-label:has(+ textarea[required]) {
    color: var(--gd-white);
  }
}

/* ---- 3d. form-check (radio / checkbox + label) ---- */
.form-on-dark .form-check {
  display:     flex;
  align-items: flex-start;
  gap:         0.6rem;
  flex-wrap:   nowrap;
  width:       100%;
}

/* min-width: 0 lets the label shrink past intrinsic content size so the
   description wraps instead of forcing a narrow column. */
.form-on-dark .form-check-label,
.form-on-dark .form-check label {
  flex:      1 1 auto;
  min-width: 0;
  color:     var(--gd-white-text-92);
}

.form-on-dark .form-check-label,
.form-on-dark div[fine="print"] {
  font-size:   x-small;
  font-weight: normal;
}

.form-on-dark .form-check-input,
.form-on-dark input[type="checkbox"],
.form-on-dark input[type="radio"] {
  width:   1.1em;
  height:  1.1em;
  padding: 0;
  margin:  0.2rem 0 0 0;
  flex:    0 0 auto;
}
.form-on-dark .form-check-input {
  background-color: var(--gd-white);
  border:           1px solid var(--gd-white-soft-35);
}
.form-on-dark .form-check-input[type="checkbox"] {
  border-radius: 4px;
}
.form-on-dark .form-check-input[type="radio"] {
  border-radius: 50%;
}
.form-on-dark .form-check-input:checked {
  background-color: var(--gd-goldenrod);
  border-color:     var(--gd-goldenrod);
}
.form-on-dark .form-check-input:focus {
  outline:      none;
  border-color: var(--gd-goldenrod);
  box-shadow:   0 0 0 4px var(--gd-pumpkin-ring);
}

/* ---- 3e. Sitefinity-rendered radio groups (<ul.list-inline> > <li.form-check-inline>).
   ul renders as block; li items render inline with horizontal spacing. ---- */
.form-on-dark ul.list-inline {
  display:      block;
  padding-left: 0;
  margin:       0;
  list-style:   none;
}
.form-on-dark ul.list-inline {
  display:      inline-block;
  margin:       0 1.25rem 0 0;
  vertical-align: middle;
}
.form-on-dark ul.list-inline > li.form-check-inline:last-child {
  margin-right: 0;
}
.form-on-dark ul.list-inline > li.form-check-inline .form-check {
  display:     inline-flex;
  align-items: center;
  gap:         0.5rem;
  margin:      0;
  padding:     0;
  width:       auto;
}
.form-on-dark ul.list-inline > li.form-check-inline label {
  font-size:   0.95rem;
  line-height: 1.2;
  margin:      0;
}

/* ---- 3f. Fine-print fieldset block layout ---- */
.fine-print .form-check-label{
    font-size:x-small !important;
	order: 2
}
.fine-print .form-check-input{
	font-size:large;
	order: 1
}
.fine-print li.form-check.form-check-inline{
	display:inline-flex;
}

.form-on-dark fieldset.fine-print,
.form-on-dark fieldset:has(> .form-check.fine-print) {
  display: block;
  width:   100%;
  border:  0;
  padding: 0;
  margin:  0 0 1rem 0;
}
.form-on-dark fieldset.fine-print > legend,
.form-on-dark fieldset > legend {
  display:       block;
  width:         100%;
  margin-bottom: 0.5rem;
  font-weight:   700;
  font-size:     0.95rem;
  color:         var(--gd-white);
}

/* ---- 3g. Validation messages (Bootstrap + Sitefinity-rendered) ---- */
.form-on-dark .invalid-feedback,
.form-on-dark [data-sf-role="error-message"] {
  display:    block;
  font-size:  0.85rem;
  margin-top: 0.35rem;
  color:      var(--gd-stoplight);
}

/* ---- 3h. Sitefinity form widget container — keep wrapper divs from breaking grid ---- */
.form-on-dark [data-sf-role="form-container"] {
  max-width: 100%;
}

/* Sitefinity-rendered form section headers */
.form-on-dark .form-section-header h3 {
  color:       var(--gd-white);
  font-family: "Raleway", "Inter", "Segoe UI", sans-serif;
  font-weight: 700;
  font-size:   1.25rem;
}

/* ---- 3i. Fine print — compliance/disclosure copy ---- */
.form-on-dark .fine-print,
.form-on-dark .fine-print label,
.form-on-dark .fine-print legend,
.form-on-dark .fine-print .form-check-label,
.form-on-dark .form-check.fine-print label,
.form-on-dark .form-check.fine-print .form-check-label,
.form-on-dark fieldset.fine-print legend,
.form-on-dark fieldset.fine-print label {
  color:       var(--gd-white-text-86);
  line-height: 1.35;
  font-size:   0.75rem;
  font-weight: 400;
}

/* ---- 3j. Help text (Sitefinity .form-text) ---- */
.form-on-dark .form-text {
  color: var(--gd-white-text-86);
}

/* ---- 3k. Datasheet attendee grid (Sitefinity multi-attendee widget) ---- */
.form-on-dark .datasheet-people .table,
.form-on-dark .datasheet-grid-table {
  --bs-table-bg:           var(--gd-white-soft-08);
  --bs-table-color:        var(--gd-white);
  --bs-table-border-color: var(--gd-white-soft-22);
  --bs-table-active-bg:    transparent;
  --bs-table-hover-bg:     transparent;
}
.form-on-dark .datasheet-people .table thead th,
.form-on-dark .datasheet-grid-table th {
  color:          var(--gd-white-text-92);
  text-transform: revert;
}
.form-on-dark .datasheet-people .form-check-label {
  color: var(--gd-white-text-92);
}
.form-on-dark .datasheet-people .form-check-input {
  border-color: var(--gd-white-soft-35);
}

/* ---- 3l. Multi-step navigation — completed steps use accent-subtle ---- */
.form-on-dark [data-sf-role="form-container"] .bg-success,
.form-on-dark .form-stepper .bg-success,
.form-on-dark .step.completed,
.form-on-dark .step.complete,
.form-on-dark .step.is-complete,
.form-on-dark li.completed,
.form-on-dark .stepper-item.completed,
.form-on-dark [data-step-status="completed"] {
  background-color: var(--gd-accent-subtle);
  border-color:     var(--gd-accent-subtle);
  color:            var(--gd-white);
}

/* ---- 3m. Form widget action buttons — Next/Submit goldenrod, Back/Previous outline ---- */
.form-on-dark .btn-primary,
.form-on-dark button[type="submit"].btn {
  --bs-btn-color:                 var(--gd-black);
  --bs-btn-bg:                    var(--gd-goldenrod);
  --bs-btn-border-color:          var(--gd-goldenrod);
  --bs-btn-hover-bg:              color-mix(in srgb, var(--gd-goldenrod) 92%, black);
  --bs-btn-hover-color:           var(--gd-black);
  --bs-btn-hover-border-color:    color-mix(in srgb, var(--gd-goldenrod) 92%, black);
  --bs-btn-active-bg:             color-mix(in srgb, var(--gd-goldenrod) 84%, black);
  --bs-btn-active-color:          var(--gd-black);
  --bs-btn-disabled-bg:           var(--gd-darkgray);
  --bs-btn-disabled-border-color: var(--gd-darkgray);
  --bs-btn-disabled-color:        var(--gd-white);
  --bs-btn-disabled-opacity:      0.4;
}

.form-on-dark .btn-secondary,
.form-on-dark .btn-outline-secondary {
  --bs-btn-color:               var(--gd-white);
  --bs-btn-bg:                  var(--gd-white-soft-08);
  --bs-btn-border-color:        var(--gd-white-soft-35);
  --bs-btn-hover-color:         var(--gd-white);
  --bs-btn-hover-bg:            var(--gd-white-soft-16);
  --bs-btn-hover-border-color:  var(--gd-white-soft-35);
  --bs-btn-active-bg:           var(--gd-white-soft-22);
  --bs-btn-active-color:        var(--gd-white);
}


/* =========================================================================
   4. RESPONSIVE — small-screen ul.list-inline wrap
   Bootstrap-aligned breakpoint (sm 575.98px). On phones the inline radio
   groups need to wrap onto multiple lines so they don't overflow.
   ========================================================================= */
@media (max-width: 575.98px) {
  .form-on-dark ul.list-inline > li.form-check-inline {
    margin: 0 0.9rem 0.4rem 0;
  }
}