/* =========================================================================
   event-confirmation-simple.css
   Goodin Company event registration page — Sitefinity 14.4 page template
   Companion stylesheet for EventConfirmationSimple.cshtml

   Powers the simple single-day event registration layout: announcement
   bar, sticky header, hero (eyebrow + tagline + title + partner logo +
   deadline), centered overview lead, two-column event details
   (Details + Topics), register section with form / help panel /
   what-to-expect, and footer.

   The token system, class naming, and Bootstrap theming approach mirror
   the patterns in liberty-training-3.css so styles stay consistent
   across event registration pages.

   ORGANIZATION
   ------------
   1.  Design tokens (CSS custom properties)
   2.  Base / reset / typography
   3.  Layout primitives (.container, sections, .section-head, .muted)
   4.  Buttons (.btn / .button)
   5.  Header / sticky navigation
   6.  Hero
   7.  Card framework
   7a. Card qualifiers (.card-warning)
   7b. Alert qualifiers (.alert-goodin)
   8.  Section: #overview  (lead paragraph; tight transition)
   9.  Section: #agenda    (incl. .agenda-two-col)
   10. Section: #register
   11. Registration form   (registration-card + form-grid + .field)
   12. Aside / .panel
   13. Footer
   14. Back-to-Top button
   15. Responsive breakpoints
   16. Scroll offsets
   ========================================================================= */


/* =========================================================================
   1. DESIGN TOKENS
   ========================================================================= */
:root {

  /* Liberty palette (page-specific tokens — retained, see header note) */
  --liberty-goodin-blue:      #0d5ca6;
  --liberty-goodin-blue-deep: #083b73;
  --liberty-goodin-navy:      #0a2540;
  --liberty-goodin-gold:      #c58c3d;
  --liberty-goodin-orange:    #cf6b2f;
  --liberty-ink:              #122230;
  --liberty-muted:            #617181;
  --liberty-line:             rgba(11, 33, 56, 0.12);
  --liberty-surface:          #ffffff;
  --liberty-surface-alt:      #f5f8fc;
  --liberty-shadow:           0 18px 50px rgba(3, 27, 55, 0.16);
  --liberty-radius-xl:        28px;
  --liberty-radius-lg:        20px;
  --liberty-radius-md:        14px;
  --liberty-container:        1240px;

  /* Goodin Brand Palette (mirrors the Brand Guide) */
  --gd-blue:       #0061aa;
  --gd-royal:      #005696;
  --gd-midnight:   #1b3244;
  --gd-goldenrod:  #fbb040;
  --gd-pumpkin:    #da621e;
  --gd-stoplight:  #f44336;
  --gd-earth:      #4eaa79;
  --gd-sky:        #549fd9;
  --gd-denim:      #2773ae;
  --gd-white:      #ffffff;
  --gd-pale:       #f0f0f0;
  --gd-shadow:     #d9d9d9;
  --gd-darkgray:   #666666;
  --gd-black:      #191919;

  /* Generic radii / shadows */
  --radius-xl:   20px;
  --radius-lg:   16px;
  --radius-md:   12px;
  --shadow-soft: 0 10px 30px rgba(0, 0, 0, .10);
  --shadow-card: 0 10px 22px rgba(27, 50, 68, .12);
  --ring:        0 0 0 4px rgba(218, 98, 30, .30);

  /* Aliases used by legacy Liberty rules */
  --ink:       var(--liberty-ink);
  --muted:     var(--liberty-muted);
  --line:      var(--liberty-line);
  --surface:   var(--liberty-surface);
  --shadow:    var(--liberty-shadow);
  --container: var(--liberty-container);

  --header-offset: 90px;   /* sticky header height + ~10px buffer */
}


/* =========================================================================
   2. BASE / RESET / TYPOGRAPHY
   ========================================================================= */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--liberty-ink);
  background: linear-gradient(180deg, #eef4fb 0%, #ffffff 22%, #f6f9fd 100%);
  line-height: 1.5;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }

.muted   { color: var(--liberty-muted); }
.small   { font-size: .92rem; }
.text-xs { font-size: small; color: rgba(255, 255, 255, .86); }
.text-white { color: var(--gd-white) !important; }


/* =========================================================================
   3. LAYOUT PRIMITIVES
   ========================================================================= */
.container {
  width: min(calc(100% - 2rem), var(--liberty-container));
  margin-inline: auto;
  max-width: var(--liberty-container);
}

/* Canonical section padding used everywhere except the hero. */
section {
  padding: 1.5rem 0;
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.section-head p  { margin: 0; max-width: 72ch; }
.section-head h2 {
  margin: 0 0 .5rem;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 700;
  color: var(--gd-royal);
  font-size: clamp(1.6rem, 2vw + 1rem, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}


/* =========================================================================
   4. BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .9rem 1.1rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 700;
  font-family: "Open Sans", system-ui, sans-serif;
  letter-spacing: .2px;
  cursor: pointer;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease,
              background-color .12s ease, border-color .12s ease;
  white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:hover         { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(0, 0, 0, .14); }

.btn-primary {
  background: var(--gd-goldenrod);
  color: var(--gd-black);
  border-color: rgba(0, 0, 0, .08);
}
.btn-primary:hover { background: #ffc15f; }


/* Hero / form pill button (Liberty's .button system, retained for parity). */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 52px;
  padding: .9rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  transition: .2s ease;
}
.button-primary {
  background: #fbb040;
  color: #11253c;
  box-shadow: 0 14px 35px rgba(197, 140, 61, .28);
}
.button-secondary {
  background: rgba(255, 255, 255, .08);
  color: #fff;
  border-color: rgba(255, 255, 255, .2);
}
.button:hover { transform: translateY(-2px); }


/* =========================================================================
   5. HEADER / NAVIGATION
   ========================================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(18px);
  background: #0061aa;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.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: #fff;
  font-weight: 700;
}
.brand-lockup img   { height: 42px; width: auto; }
.brand-lockup small { display: block; color: rgba(255, 255, 255, .7); font-weight: 500; }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: rgba(255, 255, 255, .92);
  font-weight: 600;
}
.primary-nav a       { opacity: .9; }
.primary-nav a:hover { opacity: 1; }

.nav-cta {
  padding: .9rem 1.2rem;
  border-radius: 999px;
  background: #fbb040;
  color: #0f2339;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(197, 140, 61, .28);
}

.mobile-toggle { display: none; }

.icon { width: 22px; height: 22px; flex: 0 0 auto; }


/* =========================================================================
   6. HERO
   ========================================================================= */
.hero {
  position: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Hero must NOT inherit the global section padding override */
  padding: 0;
  background:
    radial-gradient(900px 400px at 20% 10%,
      rgba(84,159,217,.25) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(700px 320px at 85% 15%,
      rgba(251,176,64,.18) 0%, rgba(0,0,0,0) 55%),
    linear-gradient(135deg, #0a3a65 0%, #1b3244 55%, #132739 100%);
  color: var(--gd-white);
}


.hero-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
}
.hero-logo img {
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .35));
}

.hero-deadline {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: .05rem;
  line-height: 1.1;
}
.hero-deadline-label {
  color: #d5a35d;
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 2px 8px rgba(0, 0, 0, .4);
}
.hero-deadline-date {
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -.005em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .4);
  line-height: 1.1;
}
.hero-tagline {
  color: #d5a35d;
  font-size: clamp(.8rem, 1.5vw, 1.15rem);
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-shadow: 0 3px 12px rgba(0, 0, 0, .45);
}
.hero h1 {
  margin: 0;
  color: #fff;
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: -.055em;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .50);
  font-size: clamp(2rem, 3.1vw + 1rem, 3.2rem);
}


/* =========================================================================
   7. CARD FRAMEWORK
   ========================================================================= */
.card {
  background: var(--gd-white);
  border: 1px solid rgba(217, 217, 217, .65);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.card .card-top {
  padding: 1rem 1.1rem;
  border-bottom: 1px solid rgba(217, 217, 217, .65);
  background: linear-gradient(90deg, rgba(0, 97, 170, .08), rgba(84, 159, 217, .10));
}
.card .card-top h3 {
  margin: 0;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 700;
  color: var(--gd-midnight);
  font-size: 1.1rem;
  line-height: 1.25;
}
.card .card-top p { margin: .25rem 0 0; }
.card .card-body { padding: 1.1rem; }


/* -------------------------------------------------------------------------
   7a. CARD QUALIFIERS  (Bootstrap-style contextual variants)
   Mirrors the token system used by .alert-* utilities so a contextual
   card stays in visual sync with its alert sibling.

   .card-warning — Goodin-gold (#fbb040) derived warning palette.
   Re-declares the four Bootstrap warning tokens locally so Bootstrap's
   defaults (.alert-warning, .text-bg-warning, etc.) stay untouched.
   The card-top steps up from bg-subtle to border-subtle for visual
   hierarchy, while staying within the "subtle" warning palette so it
   never reads as alarming.

   Token derivation (mirrors Bootstrap's Sass tint-color / shade-color):
     bg-subtle      = mix(white, base, 80%)
     border-subtle  = mix(white, base, 60%)
     text-emphasis  = mix(black, base, 60%)
   ------------------------------------------------------------------------- */
.card.card-warning {
  --bs-warning-rgb:           251, 176, 64;   /* #fbb040 base */
  --bs-warning-bg-subtle:     #feefd9;
  --bs-warning-border-subtle: #fddfb3;
  --bs-warning-text-emphasis: #64461a;

  background-color: var(--bs-warning-bg-subtle);
  border-color:     var(--bs-warning-border-subtle);
  color:            var(--bs-warning-text-emphasis);
}
.card.card-warning .card-top {
  background:          var(--bs-warning-border-subtle);
  border-bottom-color: rgba(var(--bs-warning-rgb), .45);
  color:               var(--bs-warning-text-emphasis);
}
.card.card-warning .card-top h3,
.card.card-warning .card-top p,
.card.card-warning .card-body { color: var(--bs-warning-text-emphasis); }
.card.card-warning a { color: var(--bs-warning-text-emphasis); }



/* -------------------------------------------------------------------------
   7b. ALERT QUALIFIERS

   .alert-goodin — Goodin-branded alert.
   Patterned on Bootstrap's .alert-info (declares the four --bs-alert-*
   token slots). Background and text are pinned to the same values
   used by .card.card-warning .card-top so an .alert-goodin sitting next
   to a warning card reads as the same visual family.
   ------------------------------------------------------------------------- */
.alert-goodin {
  --bs-alert-color:        #64461a;                  /* = .card-warning text          */
  --bs-alert-bg:           #fddfb3;                  /* = .card-warning .card-top bg  */
  --bs-alert-border-color: rgba(251, 176, 64, .45);  /* = card-top divider            */
  --bs-alert-link-color:   #64461a;
}



/* =========================================================================
   8. SECTION: #overview
   ========================================================================= */
#overview {
  padding: 1.5rem 0 0;
}
#overview .lead {
  color: var(--gd-midnight);
  font-weight: 400;
}


/* =========================================================================
   9. SECTION: #agenda
   ========================================================================= */
#agenda { padding-top: .5rem; }

#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;
  margin-top: 0;
  font-size: .98rem;
}
#agenda th,
#agenda td {
  padding: .7rem .6rem;
  border-bottom: 1px solid rgba(217, 217, 217, .7);
  vertical-align: top;
}
#agenda th {
  text-align: left;
  font-family: "Raleway", system-ui, sans-serif;
  color: var(--gd-midnight);
  font-weight: 800;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .6px;
}

/* Two-column event-details layout (Detail + Information / Topics). */
#agenda .agenda-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  align-items: start;
}
#agenda .agenda-two-col table td:first-child {
  width: 155px;
  font-weight: 800;
  color: rgba(27, 50, 68, .88);
}
#agenda .agenda-two-col .card-body {
  padding: 1.1rem 1.35rem;
}


/* =========================================================================
   10. SECTION: #register
   ========================================================================= */
#register.register {
  background:
    linear-gradient(0deg, rgba(27, 50, 68, .92), rgba(27, 50, 68, .92)),
    radial-gradient(1000px 420px at 75% 25%, rgba(251, 176, 64, .20) 0%, rgba(0, 0, 0, 0) 55%),
    radial-gradient(1100px 520px at 15% 35%, rgba(84, 159, 217, .22) 0%, rgba(0, 0, 0, 0) 60%),
    linear-gradient(135deg, #0a3a65 0%, #1b3244 65%, #132739 100%);
  color: var(--gd-white);
}
#register .section-head h2 { color: var(--gd-white); }
#register .section-head p  { color: rgba(255, 255, 255, .86); }

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


/* =========================================================================
   11. REGISTRATION FORM
   ========================================================================= */
.registration-card {
  background: rgba(255, 255, 255, .98);
  color: var(--liberty-ink);
  border-radius: 30px;
  padding: 2rem;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .26);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.field      { display: grid; gap: .5rem; }
.field.full { grid-column: 1 / -1; }

.registration-card label {
  font-size: .9rem;
  font-weight: 700;
  color: #23394e;
}
.registration-card input,
.registration-card select,
.registration-card textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(11, 33, 56, .16);
  padding: .95rem 1rem;
  font: inherit;
  color: var(--liberty-ink);
  background: #fff;
}
.registration-card textarea { min-height: 130px; resize: vertical; }
.registration-card input:focus,
.registration-card select:focus,
.registration-card textarea:focus {
  outline: 0;
  border-color: var(--liberty-goodin-blue);
  box-shadow: 0 0 0 4px rgba(13, 92, 166, .12);
}

.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
}
.choice {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .75rem .95rem;
  border-radius: 999px;
  background: #f3f7fb;
  border: 1px solid rgba(11, 33, 56, .10);
}
.choice input { width: auto; }

.registration-card .form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1.25rem;
  align-items: center;
}
.helper-text { color: var(--liberty-muted); font-size: .9rem; }
.hidden      { display: none !important; }


/* =========================================================================
   12. ASIDE / .panel
   ========================================================================= */
#register .aside {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
#register .aside .panel {
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: var(--shadow-soft);
  padding: 1.1rem;
  color: #fff;
}
#register .aside .panel h3,
#register .aside .panel .panel-title {
  margin: 0 0 .35rem;
  color: #fff;
  font-family: "Raleway", system-ui, sans-serif;
  font-weight: 700;
}
#register .aside .panel p { color: rgba(255, 255, 255, .86); }

/* "Questions?" mini-form inside the help panel */
#register .aside .panel .form-label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  margin-bottom: .35rem;
  color: rgba(255, 255, 255, .92);
}
#register .aside .panel .form-control {
  width: 100%;
  padding: .75rem .8rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  transition: box-shadow .12s ease, border-color .12s ease,
              background-color .12s ease;
}
#register .aside .panel .form-control::placeholder {
  color: rgba(255, 255, 255, .55);
}
#register .aside .panel .form-control:focus {
  outline: none;
  box-shadow: var(--ring);
  border-color: rgba(84, 159, 217, .55);
  background: rgba(255, 255, 255, .16);
}
#register .aside .panel textarea.form-control {
  min-height: 110px;
  resize: vertical;
}


/* =========================================================================
   13. FOOTER
   ========================================================================= */
footer[role="contentinfo"] {
  background: #0f2231;
  color: rgba(255, 255, 255, .85);
  padding: 1.6rem 0;
  border-top: 1px solid rgba(255, 255, 255, .10);
}
footer[role="contentinfo"] a {
  color: rgba(255, 255, 255, .92);
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* =========================================================================
   14. BACK-TO-TOP BUTTON
   ========================================================================= */
.liberty-back-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .10);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .25);
  transition: transform .15s ease, opacity .15s ease, background .15s ease;
  opacity: .9;
}
.liberty-back-to-top:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, .16);
  opacity: 1;
  color: #fff;
}
.liberty-back-to-top:active        { transform: translateY(0); }
.liberty-back-to-top:focus-visible {
  outline: none;
  box-shadow: 0 0 0 .25rem rgba(84, 159, 217, .25),
              0 8px 22px rgba(0, 0, 0, .25);
}

/* Goldenrod radial fill applied only to the rendered ID instance. */
#libertyBackToTop {
  color: var(--gd-black);
  font-weight: bold;
  background: radial-gradient(var(--gd-pale), var(--gd-goldenrod));
}


/* =========================================================================
   15. RESPONSIVE
   ========================================================================= */
@media (max-width: 1080px) {
  .form-wrap,
  #agenda .agenda-two-col {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  /* Mobile header: hide nav, show hamburger */
  .primary-nav { display: none; }
  .mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .15);
  }
  .site-header.open .primary-nav {
    display: flex;
    position: absolute;
    left: 1rem;
    right: 1rem;
    top: 76px;
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
    padding: 1rem;
    background: rgba(8, 20, 36, .96);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 20px;
  }
  .form-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  section { padding: 2.4rem 0; }
  .hero h1 { font-size: clamp(2.7rem, 15vw, 4.2rem); }
  .registration-card { padding: 1.25rem; }
}

/* =========================================================================
   16. SCROLL OFFSETS
   Compensate for the sticky header so anchor jumps don't hide the top of
   the destination section behind the nav bar.
   ========================================================================= */
#top,
#overview,
#agenda,
#register {
  scroll-margin-top: var(--header-offset);
}