/* =========================================================================
   event-registration-max.css
   Goodin Company event registration page — Sitefinity 14.4 page template
   Companion stylesheet for EventRegistrationMax.cshtml

   The "max" event registration template: tall hero with partner logos
   and feature highlights, four-card overview, side-by-side Event Details
   (matching the simple template's two-col pattern), three-card Venue
   section, register section with form / help panel / what-to-expect,
   and footer. Use this stylesheet for events that need the full
   pre-register sales surface; use event-confirmation-simple.css for
   simpler one-day training events.

   ARCHITECTURE
   ------------
   Layer 1 — BRAND PALETTE       :root tokens, the only place hex/rgb/hsl
                                  literals are permitted in this file.
   Layer 2 — DERIVED VARIANTS    color-mix() derivations from Layer 1
                                  (hover, active, soft, line, ring, ...).
   Layer 3 — BOOTSTRAP THEMING   Bootstrap CSS-variable overrides at :root
                                  (global) and per-component (scoped).
   Layer 4 — GOODIN COMPONENTS   House components that EXTEND Bootstrap,
                                  never replace it. Use alongside .btn /
                                  .card / .form-control, not instead of.
   Layer 5 — PAGE COMPONENTS     Page-specific styling for the max event
                                  registration template. Token references
                                  only — no hex literals.
   Layer 6 — RESPONSIVE          Bootstrap-aligned breakpoints
                                  (sm 576 / md 768 / lg 992 / xl 1200).

   ========================================================================= */


/* =========================================================================
   LAYER 1 — BRAND PALETTE
   The single source of truth for hex literals on this page.
   Sourced from the Goodin Company Brand Guide. To rebrand, edit only here.
   ========================================================================= */
:root {
  /* Primary blues */
  --gd-blue:        #0061aa;
  --gd-royal:       #005696;
  --gd-midnight:    #1b3244;
  --gd-denim:       #2773ae;
  --gd-sky:         #549fd9;

  /* Accents */
  --gd-goldenrod:     #fbb040;
  --gd-pumpkin:       #da621e;
  --gd-stoplight:     #f44336;
  --gd-earth:         #4eaa79;
  --gd-accent-subtle: #d5a35d;  /* Muted gold/tan — completed-step indicators, soft accents. */

  /* Neutrals */
  --gd-white:       #ffffff;
  --gd-pale:        #f0f0f0;
  --gd-shadow:      #d9d9d9;
  --gd-darkgray:    #666666;
  --gd-black:       #191919;

  /* Brand colors as RGB triplets (mirror the hex values above).
     Required for rgba() alpha treatments and for Bootstrap interop
     (--bs-*-rgb). Keep in sync with the hex tokens above. */
  --gd-blue-rgb:        0, 97, 170;
  --gd-royal-rgb:       0, 86, 150;
  --gd-midnight-rgb:    27, 50, 68;
  --gd-denim-rgb:       39, 115, 174;
  --gd-sky-rgb:         84, 159, 217;
  --gd-goldenrod-rgb:   251, 176, 64;
  --gd-pumpkin-rgb:     218, 98, 30;
  --gd-stoplight-rgb:   244, 67, 54;
  --gd-earth-rgb:         78, 170, 121;
  --gd-accent-subtle-rgb: 213, 163, 93;
  --gd-white-rgb:         255, 255, 255;
  --gd-black-rgb:         25, 25, 25;
}


/* =========================================================================
   LAYER 2 — DERIVED VARIANTS
   color-mix() derivations from Layer 1. Each brand color may produce:
     -hover    8% darker  (interactive hover)
     -active  16% darker  (pressed state)
     -soft    10% white   (tinted background on light surfaces)
     -line   ~12% alpha   (subtle borders)
     -ring   ~30% alpha   (focus rings)
     -deep   ~20% darker  (gradient end stops)

   Add a derivation here when you need it; do not invent ad-hoc mixes
   in component rules. If a derivation is used twice, it belongs here.
   ========================================================================= */
:root {
  /* Blue */
  --gd-blue-hover:    color-mix(in srgb, var(--gd-blue) 92%, black);
  --gd-blue-active:   color-mix(in srgb, var(--gd-blue) 84%, black);
  --gd-blue-soft:     color-mix(in srgb, var(--gd-blue) 10%, white);
  --gd-blue-line:     color-mix(in srgb, var(--gd-blue) 18%, transparent);
  --gd-blue-ring:     color-mix(in srgb, var(--gd-blue) 30%, transparent);

  /* Royal (link hover) */
  --gd-royal-hover:   color-mix(in srgb, var(--gd-royal) 92%, black);

  /* Midnight (body text + dark surfaces) */
  --gd-midnight-line: color-mix(in srgb, var(--gd-midnight) 12%, transparent);
  --gd-midnight-deep: color-mix(in srgb, var(--gd-midnight) 80%, black);

  /* Goldenrod */
  --gd-goldenrod-hover:  color-mix(in srgb, var(--gd-goldenrod) 92%, black);
  --gd-goldenrod-active: color-mix(in srgb, var(--gd-goldenrod) 84%, black);
  --gd-goldenrod-soft:   color-mix(in srgb, var(--gd-goldenrod) 12%, white);
  --gd-goldenrod-ring:   color-mix(in srgb, var(--gd-goldenrod) 30%, transparent);

  /* Pumpkin (focus indicator color) */
  --gd-pumpkin-ring:  color-mix(in srgb, var(--gd-pumpkin) 30%, transparent);

  /* Stoplight (alert/danger derived states) */
  --gd-stoplight-hover:  color-mix(in srgb, var(--gd-stoplight) 92%, black);
  --gd-stoplight-active: color-mix(in srgb, var(--gd-stoplight) 84%, black);

  /* Sky (info / soft backgrounds) */
  --gd-sky-soft:    color-mix(in srgb, var(--gd-sky) 12%, white);

  /* White-on-dark alpha treatments (panels, dividers, outline buttons) */
  --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);

  /* Reusable shadow tokens */
  --gd-shadow-soft: 0 10px 30px rgba(var(--gd-black-rgb), 0.10);
  --gd-shadow-card: 0 10px 22px rgba(var(--gd-midnight-rgb), 0.12);
  --gd-shadow-cta:  0 14px 35px rgba(var(--gd-pumpkin-rgb), 0.28);
  --gd-shadow-deep: 0 30px 70px rgba(var(--gd-black-rgb), 0.26);
  --gd-shadow-fab:  0 8px 22px rgba(var(--gd-black-rgb), 0.25);

  /* Sticky-header offset for in-page anchor jumps */
  --gd-header-offset: 90px;
}


/* =========================================================================
   LAYER 3 — BOOTSTRAP THEMING
   Override Bootstrap's CSS variables to repaint stock components in
   Goodin colors. These are the LEVERS — change the mapping here to
   ripple a new look across .btn-*, .text-*, .alert-*, links, etc.
   ========================================================================= */
:root {
  /* Global theme tokens */
  --bs-primary:        var(--gd-blue);
  --bs-primary-rgb:    var(--gd-blue-rgb);
  --bs-secondary:      var(--gd-midnight);
  --bs-secondary-rgb:  var(--gd-midnight-rgb);
  --bs-warning:        var(--gd-goldenrod);
  --bs-warning-rgb:    var(--gd-goldenrod-rgb);
  --bs-danger:         var(--gd-stoplight);
  --bs-danger-rgb:     var(--gd-stoplight-rgb);
  --bs-success:        var(--gd-earth);
  --bs-success-rgb:    var(--gd-earth-rgb);
  --bs-info:           var(--gd-sky);
  --bs-info-rgb:       var(--gd-sky-rgb);

  /* Body */
  --bs-body-color:        var(--gd-midnight);
  --bs-body-color-rgb:    var(--gd-midnight-rgb);
  --bs-body-bg:           var(--gd-white);
  --bs-body-font-family:  "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --bs-secondary-color:   var(--gd-darkgray);     /* drives .text-muted */

  /* Links */
  --bs-link-color:           var(--gd-blue);
  --bs-link-color-rgb:       var(--gd-blue-rgb);
  --bs-link-hover-color:     var(--gd-royal);
  --bs-link-hover-color-rgb: var(--gd-royal-rgb);

  /* Borders */
  --bs-border-color:     var(--gd-shadow);
  --bs-border-radius:    12px;
  --bs-border-radius-lg: 16px;
  --bs-border-radius-xl: 20px;
}

/* Component-scoped Bootstrap btn overrides for brand-accurate hover/active. */
.btn-primary {
  --bs-btn-color:               var(--gd-white);
  --bs-btn-bg:                  var(--gd-blue);
  --bs-btn-border-color:        var(--gd-blue);
  --bs-btn-hover-bg:            var(--gd-blue-hover);
  --bs-btn-hover-border-color:  var(--gd-blue-hover);
  --bs-btn-active-bg:           var(--gd-blue-active);
  --bs-btn-active-border-color: var(--gd-blue-active);
}
.btn-warning {
  --bs-btn-color:               var(--gd-black);
  --bs-btn-bg:                  var(--gd-goldenrod);
  --bs-btn-border-color:        var(--gd-goldenrod);
  --bs-btn-hover-bg:            var(--gd-goldenrod-hover);
  --bs-btn-hover-border-color:  var(--gd-goldenrod-hover);
  --bs-btn-hover-color:         var(--gd-black);
  --bs-btn-active-bg:           var(--gd-goldenrod-active);
  --bs-btn-active-border-color: var(--gd-goldenrod-active);
  --bs-btn-active-color:        var(--gd-black);
}
.btn-danger {
  --bs-btn-bg:           var(--gd-stoplight);
  --bs-btn-border-color: var(--gd-stoplight);
  --bs-btn-hover-bg:     var(--gd-stoplight-hover);
  --bs-btn-active-bg:    var(--gd-stoplight-active);
}


/* =========================================================================
   LAYER 4 — GOODIN COMPONENTS
   House components and shape variants. Always EXTEND Bootstrap (apply
   these classes alongside .btn / .card / .form-control), never replace.
   ========================================================================= */

/* ---- BUTTONS ----------------------------------------------------------- */

/* .btn-goodin — house button chrome (compose with .btn + color variant). */
.btn-goodin {
  --bs-btn-border-radius: 999px;
  --bs-btn-padding-x:     1.25rem;
  --bs-btn-padding-y:     0.85rem;
  --bs-btn-font-weight:   700;
  --bs-btn-font-family:   "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  --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;
  letter-spacing: 0.2px;
  white-space: nowrap;
  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background-color 0.12s ease,
    border-color 0.12s ease;
}
.btn-goodin:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px var(--gd-midnight-line);
}
.btn-goodin:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--gd-pumpkin-ring);
}

/* .btn-register — primary registration CTA (goldenrod). */
.btn-register {
  --bs-btn-color:               var(--gd-black);
  --bs-btn-bg:                  var(--gd-goldenrod);
  --bs-btn-border-color:        var(--gd-goldenrod);
  --bs-btn-hover-bg:            var(--gd-goldenrod-hover);
  --bs-btn-hover-color:         var(--gd-black);
  --bs-btn-hover-border-color:  var(--gd-goldenrod-hover);
  --bs-btn-active-bg:           var(--gd-goldenrod-active);
  --bs-btn-active-color:        var(--gd-black);
  box-shadow: var(--gd-shadow-cta);
}

/* .btn-on-dark — outline-style button on dark surfaces (hero secondary CTA). */
.btn-on-dark {
  --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);
}

/* .btn-on-light — soft button on light surfaces (e.g. "Back to top" link). */
.btn-on-light {
  --bs-btn-color:               var(--gd-midnight);
  --bs-btn-bg:                  var(--gd-blue-soft);
  --bs-btn-border-color:        var(--gd-blue-line);
  --bs-btn-hover-color:         var(--gd-midnight);
  --bs-btn-hover-bg:            color-mix(in srgb, var(--gd-blue-soft) 80%, var(--gd-blue));
  --bs-btn-hover-border-color:  var(--gd-blue-line);
}

/* .btn-icon-circle — circular icon button (shape variant). */
.btn-icon-circle {
  --bs-btn-padding-x:     0;
  --bs-btn-padding-y:     0;
  --bs-btn-border-radius: 999px;
  width:  3.25rem;
  height: 3.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.btn-icon-circle svg {
  width:  2.2rem;
  height: 2.2rem;
  display: block;
}

/* .btn-back-to-top — fixed-position floating action button. */
.btn-back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  background: radial-gradient(var(--gd-pale), var(--gd-goldenrod));
  color: var(--gd-black);
  box-shadow: var(--gd-shadow-fab);
}
.btn-back-to-top:hover {
  background: radial-gradient(var(--gd-pale), var(--gd-goldenrod-hover));
  color: var(--gd-black);
}


/* ---- COLOR UTILITIES --------------------------------------------------- */
.text-accent-subtle {
  color: var(--gd-accent-subtle);
}


/* ---- CARDS ------------------------------------------------------------- */

/* .card-event — Goodin event card with banded header (.card-top). */
.card-event {
  --bs-card-bg:            var(--gd-white);
  --bs-card-border-color:  var(--gd-shadow);
  --bs-card-border-radius: 20px;
  box-shadow: var(--gd-shadow-card);
  overflow: hidden;
}
/* SF-safe `>`: .card-top and .card-body are direct children of .card-event
   in the template; placeholders sit INSIDE them, not between. */
.card-event > .card-top {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--gd-shadow);
  background: linear-gradient(90deg, var(--gd-blue-soft), var(--gd-sky-soft));
}
.card-event > .card-top h3 {
  margin: 0;
  font-family: "Raleway", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--gd-midnight);
  font-size: 1.1rem;
  line-height: 1.25;
}
.card-event > .card-top p {
  margin: 0.25rem 0 0;
  color: var(--gd-darkgray);
}
.card-event > .card-body {
  padding: 1.1rem;
}


/* ---- FORM CONTROLS ----------------------------------------------------- */

/* .form-control-on-dark — input style for dark panels. */
.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);
}


/* ---- .form-on-dark — form-container modifier --------------------------- */

.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);
}

.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;
}

/* 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);
}

/* Labels */
.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);
  }
}

/* ---- 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);
}

/* 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;
}

/* 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);
}

/* 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);
}

/* 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;
}

/* 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;
}

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

/* 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);
}


/* Multi-step navigation — completed steps use accent-subtle (form-scoped). */
.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);
}


/* 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:              var(--gd-goldenrod-hover);
  --bs-btn-hover-color:           var(--gd-black);
  --bs-btn-hover-border-color:    var(--gd-goldenrod-hover);
  --bs-btn-active-bg:             var(--gd-goldenrod-active);
  --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);
}


/* ---- LAYOUT PRIMITIVES ------------------------------------------------- */

/* Section heading row — title left, optional CTA right. */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.section-head h2 {
  margin: 0 0 0.5rem;
  font-family: "Raleway", "Inter", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 700;
  color: var(--gd-royal);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-head p {
  margin: 0;
  max-width: 72ch;
}

/* Feature row — icon tile + heading/text. */
.feature {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.feature-icon {
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: var(--gd-blue-soft);
  border: 1px solid var(--gd-blue-line);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.feature-icon svg {
  width: 22px;
  height: 22px;
  color: var(--gd-blue);
}
.feature p {
  margin: 0.25rem 0 0;
  color: var(--gd-darkgray);
}

/* Radio "chip" group used in the registration form. */
.radio-group,
.check-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.95rem;
  border-radius: 999px;
  background: var(--gd-blue-soft);
  border: 1px solid var(--gd-blue-line);
}
.choice input { width: auto; }


/* =========================================================================
   LAYER 5 — PAGE COMPONENTS
   Page-specific styling for the max event registration template.
   Token references only.
   ========================================================================= */

/* ---- BASE -------------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: linear-gradient(180deg,
    var(--gd-blue-soft) 0%,
    var(--gd-white) 22%,
    var(--gd-blue-soft) 100%);
  line-height: 1.5;
}
img { max-width: 100%; display: block; }


/* ---- LAYOUT ------------------------------------------------------------ */
.container {
  width: min(calc(100% - 2rem), 1240px);
  margin-inline: auto;
}
section { padding: 1.5rem 0; }


/* ---- HEADER ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--gd-blue);
  border-bottom: 1px solid var(--gd-white-soft-08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.site-header .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 76px;
}
.brand-lockup {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--gd-white);
  font-weight: 700;
  text-decoration: none;
}
.brand-lockup img { height: 42px; width: auto; }
.brand-lockup small {
  display: block;
  color: var(--gd-white-text-86);
  font-weight: 500;
}
.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--gd-white-text-92);
  font-weight: 600;
}
.primary-nav a { opacity: 0.9; }
.primary-nav a:hover { opacity: 1; }
.mobile-toggle { display: none; }


/* ---- HERO -------------------------------------------------------------- */
/* Hero background image is parametrized via --page-hero-bg-image so per-event
   pages can override the banner (drop a `<style>` block into ExtraCSS, set
   --page-hero-bg-image, --page-hero-bg-position, --page-hero-bg-size). The
   default falls back to the brand gradient with no banner image. */
.hero {
  --page-hero-bg-image: none;
  --page-hero-bg-position: center;
  --page-hero-bg-size: cover;

  position: relative;
  min-height: 760px;
  display: flex;
  align-items: center;
  color: var(--gd-white);
  background:
    linear-gradient(180deg,
      rgba(var(--gd-black-rgb), 0.15) 0%,
      rgba(var(--gd-black-rgb), 0.35) 55%,
      rgba(var(--gd-black-rgb), 0.86) 100%),
    var(--page-hero-bg-image) var(--page-hero-bg-position) / var(--page-hero-bg-size) no-repeat,
    linear-gradient(135deg,
      var(--gd-royal) 0%,
      var(--gd-midnight) 65%,
      var(--gd-midnight-deep) 100%);
  overflow: hidden;
  padding: 0;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%,
      rgba(var(--gd-blue-rgb), 0.05),
      rgba(var(--gd-blue-rgb), 0) 38%),
    linear-gradient(90deg,
      rgba(var(--gd-midnight-rgb), 0.28),
      rgba(var(--gd-midnight-rgb), 0.08) 48%,
      rgba(var(--gd-midnight-rgb), 0.18));
  pointer-events: none;
}
.hero-logo-row { min-height: 96px; }
.hero-logo {
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 10px 18px rgba(var(--gd-black-rgb), 0.35));
}
/* Logo size variants — apply alongside .hero-logo as needed. The CMS
   user adds these to <img> tags inside the HeroLogo placeholder. */
.hero-logo-host    { max-height: 60px; }   /* Goodin / hosting brand */
.hero-logo-partner { max-height: 80px; }   /* manufacturer / sponsor */
.hero-logo-feature { max-height: 90px; }   /* additional feature partner */
.hero-logo-divider {
  width: 1px;
  height: 72px;
  background: var(--gd-white-soft-35);
}
.hero-content { max-width: 980px; }
.hero-tagline {
  color: var(--gd-goldenrod);
  font-size: clamp(0.8rem, 1.5vw, 1.15rem);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(var(--gd-black-rgb), 0.45);
}
.hero h1 {
  margin: 0;
  color: var(--gd-white);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -0.055em;
  text-transform: uppercase;
  text-shadow: 0 8px 28px rgba(var(--gd-black-rgb), 0.5);
  font-size: clamp(2rem, 3.1vw + 1rem, 3.2rem);
}
.hero h1 .hero-h1-accent { color: var(--gd-goldenrod); }
.hero-amp {
  display: inline-grid;
  place-items: center;
  width: 0.95em;
  height: 0.95em;
  margin-inline: 0.06em;
  color: var(--gd-white);
  font-size: 0.72em;
  vertical-align: 0.08em;
}
.hero-lead {
  max-width: 820px;
  color: var(--gd-white-text-92);
  font-size: clamp(1.02rem, 1.35vw, 1.25rem);
  text-shadow: 0 2px 10px rgba(var(--gd-black-rgb), 0.5);
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.hero-feature-row {
  border-top: 1px solid color-mix(in srgb, var(--gd-goldenrod) 72%, transparent);
}
.hero-feature {
  color: var(--gd-white);
  text-align: left;
}
.hero-feature img {
  width: 78px;
  height: 78px;
  flex: 0 0 auto;
}
.hero-feature h2 {
  margin: 0 0 0.15rem;
  color: var(--gd-white);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}
.hero-feature p {
  margin: 0;
  color: var(--gd-white-text-92);
  font-size: 0.92rem;
  line-height: 1.28;
}

/* Hero eyebrow — small date/time line above the headline. Styled by
   utility classes from the Content Block (e.g. .text-white .small .fw-bold);
   no dedicated rule needed unless an event needs a specific accent. */

/* Hero deadline — pill-style "Registration closes [date]" callout.
   Shared with event-confirmation-simple.css. */
.hero-deadline {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 0.05rem;
  line-height: 1.1;
  margin-top: 0.5rem;
}
.hero-deadline-label {
  color: var(--gd-accent-subtle);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(var(--gd-black-rgb), 0.4);
}
.hero-deadline-date {
  font-family: "Raleway", "Inter", "Segoe UI", sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.005em;
  text-shadow: 0 2px 12px rgba(var(--gd-black-rgb), 0.4);
  line-height: 1.1;
}

/* Generic SVG icon size used inline in CTAs and nav. */
.icon { width: 22px; height: 22px; flex: 0 0 auto; }


/* ---- OVERVIEW ---------------------------------------------------------- */
#overview .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.1rem;
}


/* ---- EVENT DETAILS ----------------------------------------------------- */
/* Two-card side-by-side layout shared with event-confirmation-simple.css.
   Cards stack on the same .day-card base; the wrapper splits the row
   into two equal columns at >= 992px and stacks below that. */
#agenda .agenda-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
#agenda .day-card .day-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
#agenda table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
#agenda th,
#agenda td {
  padding: 0.7rem 0.6rem;
  border-bottom: 1px solid var(--gd-shadow);
  vertical-align: top;
}
#agenda th {
  text-align: left;
  font-family: "Raleway", "Inter", "Segoe UI", sans-serif;
  color: var(--gd-midnight);
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
/* Detail-name column in the Details card (left column of each row). */
#agenda .agenda-two-col table td:first-child {
  width: 155px;
  font-weight: 800;
  color: var(--gd-midnight);
}
#agenda .agenda-two-col .card-body {
  padding: 1.1rem 1.35rem;
}


/* ---- VENUE ------------------------------------------------------------- */
.venue-media-wrap {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--gd-shadow-card);
  border: 1px solid var(--gd-shadow);
  background: var(--gd-white);
}
.venue-media-link { display: block; }
.venue-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.venue-media-actions {
  position: absolute;
  left: 0.9rem;
  top: 0.9rem;
  z-index: 2;
}


/* ---- REGISTER --------------------------------------------------------- */
#register.register {
  background:
    linear-gradient(0deg,
      rgba(var(--gd-midnight-rgb), 0.92),
      rgba(var(--gd-midnight-rgb), 0.92)),
    radial-gradient(1000px 420px at 75% 25%,
      rgba(var(--gd-goldenrod-rgb), 0.20) 0%,
      rgba(var(--gd-black-rgb), 0) 55%),
    radial-gradient(1100px 520px at 15% 35%,
      rgba(var(--gd-sky-rgb), 0.22) 0%,
      rgba(var(--gd-black-rgb), 0) 60%),
    linear-gradient(135deg,
      var(--gd-royal) 0%,
      var(--gd-midnight) 65%,
      var(--gd-midnight-deep) 100%);
  color: var(--gd-white);
}
#register .section-head h2 { color: var(--gd-white); }
#register .section-head p  { color: var(--gd-white-text-86); }

.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
  gap: 1.6rem;
  align-items: start;
}

/* .registration-card — white-card baseline. */
.registration-card {
  background: var(--gd-white);
  color: var(--gd-midnight);
  border-radius: 30px;
  padding: 2rem;
  box-shadow: var(--gd-shadow-deep);
}

/* .registration-card.form-on-dark — translucent-dark surface variant. */
.registration-card.form-on-dark {
  background: var(--gd-white-soft-10);
  border:     1px solid var(--gd-white-soft-22);
  color:      var(--gd-white);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.field      { display: grid; gap: 0.5rem; }
.field.full { grid-column: 1 / -1; }
.registration-card label {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--gd-midnight);
}

/* White-card inputs (excluded when .form-on-dark is present). */
.registration-card:not(.form-on-dark) input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="file"]),
.registration-card:not(.form-on-dark) select,
.registration-card:not(.form-on-dark) textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--gd-midnight-line);
  padding: 0.95rem 1rem;
  font: inherit;
  color: var(--gd-midnight);
  background: var(--gd-white);
}
.registration-card:not(.form-on-dark) textarea {
  min-height: 130px;
  resize: vertical;
}
.registration-card:not(.form-on-dark) input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="reset"]):not([type="button"]):not([type="file"]):focus,
.registration-card:not(.form-on-dark) select:focus,
.registration-card:not(.form-on-dark) textarea:focus {
  outline: 0;
  border-color: var(--gd-blue);
  box-shadow: 0 0 0 4px var(--gd-blue-ring);
}
.registration-card .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  align-items: center;
}
.helper-text {
  color: var(--gd-darkgray);
  font-size: 0.9rem;
}

/* Registration aside (help + "what to expect" panels) */
#register .aside {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
#register .aside .panel {
  border-radius: 20px;
  background: var(--gd-white-soft-10);
  border: 1px solid var(--gd-white-soft-22);
  box-shadow: var(--gd-shadow-soft);
  padding: 1.1rem;
  color: var(--gd-white);
}
#register .aside .panel h3,
#register .aside .panel .panel-title {
  margin: 0 0 0.35rem;
  color: var(--gd-white);
  font-family: "Raleway", "Inter", "Segoe UI", sans-serif;
  font-weight: 700;
}
#register .aside .panel p {
  color: var(--gd-white-text-86);
}
#register .aside .panel .form-label {
  display: block;
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  color: var(--gd-white-text-92);
}


/* ---- FOOTER ------------------------------------------------------------ */
footer[role="contentinfo"] {
  background: var(--gd-midnight-deep);
  color: var(--gd-white-text-86);
  padding: 1.6rem 0;
  border-top: 1px solid var(--gd-white-soft-10);
}
footer[role="contentinfo"] a {
  color: var(--gd-white-text-92);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Small-text utility (size only; color inherits). */
.text-xs { font-size: 0.875rem; }


/* ---- SCROLL OFFSETS ---------------------------------------------------- */
/* Sticky-header compensation for anchor jumps. */
#top, #overview, #agenda, #venue, #register {
  scroll-margin-top: var(--gd-header-offset);
}


/* ---- SITEFINITY CONTENT BLOCK — DEFENSIVE TEXT FALLBACKS ---------------
   Sitefinity wraps Content Block output in two empty <div>s. These rules
   keep unclassed text on the right surface color via inheritance.
   ----------------------------------------------------------------------- */

.hero .hero-content > div {
  color: inherit;
}

#register.register .form-wrap > .registration-card > div,
#register.register .aside .panel > div {
  color: inherit;
}

.card-event .card-body > div,
.card-event .card-body .feature > div {
  color: var(--bs-body-color);
}

footer[role="contentinfo"] .text-xs > div {
  color: inherit;
}


/* =========================================================================
   LAYER 6 — RESPONSIVE
   Bootstrap-aligned breakpoints (sm 576 / md 768 / lg 992).
   Mobile-first: stack, then enable side-by-side at md / lg.
   ========================================================================= */

/* ---- < 992px (tablet & below) -------------------------------------------- */
@media (max-width: 991.98px) {
  /* Form layout collapses to single column */
  .form-wrap {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Event Details two-col stacks on tablets and below */
  #agenda .agenda-two-col {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Overview from 4-up to 2-up */
  #overview .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  /* Hero a touch shorter on tablets */
  .hero { min-height: 620px; }
}

/* ---- < 768px (mobile) ---------------------------------------------------- */
@media (max-width: 767.98px) {
  section { padding: 1.25rem 0; }

  /* Form fields collapse to 1 column */
  .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Overview 2-up → 1-up */
  #overview .grid-4 {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Header: show hamburger, hide horizontal nav */
  .primary-nav { display: none; }
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--gd-white-soft-10);
    border: 1px solid var(--gd-white-soft-22);
    color: var(--gd-white);
    border-radius: 10px;
    width: 44px;
    height: 44px;
  }

  /* Hero typography & padding */
  .hero { min-height: 540px; }
  .hero-actions { gap: 0.6rem; }
  .hero-logo-divider { display: none; }
  .hero-logo-row { gap: 1rem; flex-wrap: wrap; }

  /* Registration card padding */
  .registration-card { padding: 1.25rem; }

}

/* ---- < 576px (small mobile) --------------------------------------------- */
@media (max-width: 575.98px) {
  .container { width: calc(100% - 1.25rem); }

  /* Section heading: title and CTA stack */
  .section-head { flex-direction: column; align-items: flex-start; }

  /* Sitefinity inline radio groups: wrap onto multiple lines */
  .form-on-dark ul.list-inline > li.form-check-inline {
    margin: 0 0.9rem 0.4rem 0;
  }

  /* Agenda table: tighter padding */
  #agenda th,
  #agenda td { padding: 0.55rem 0.4rem; }
  #agenda td.time { width: auto; }
}