/* ==========================================================================
   Cognito Forms → Our Kids theme
   --------------------------------------------------------------------------
   The fund applications, calendar orders and volunteer sign-up stay on
   Cognito Forms (seamless embed, data-key VJOazBRn6UOB_UdOz-5grQ).
   Seamless embeds render into the page DOM, so page CSS reaches them.

   Selectors follow Cognito's "cog-" classes and Element-UI inputs ("el-").
   Checked against forms 83, 82, 48, 47, 39 and 9 on 19 Oct 2026 — re-check
   after any Cognito platform update.
   Also set, inside Cognito → Form → Style:
     · Font: "Inherit" (so Figtree flows through)
     · Primary colour #0060A8 · Accent #CC1676 · Background transparent
     · Button shape rounded, Label placement Top
   Doing it in Cognito first means less CSS fighting here.
   ========================================================================== */

.cog-mount .cog-cognito {
  /* Cognito exposes CSS custom properties on the form root in its newer
     form runtime — harmless if unused. */
  --background: transparent;
  --font-family: var(--font-body);
  --font-size: 17px;
  --form__width: 100%;
  --primary: #0060a8;
  --highlight: #cc1676;
  --negative: #c2185b;
  --border-color: #1d1b2e;
  --border-radius: 12px;
  --label__font-weight: 700;
  font-family: var(--font-body) !important;
  color: var(--ink);
}

/* Headings & section titles inside the form */
.cog-mount .cog-header h1,
.cog-mount .cog-header h2,
.cog-mount .cog-page__title,
.cog-mount .cog-section__heading,
.cog-mount .cog-content h2,
.cog-mount .cog-content h3 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}
.cog-mount .cog-cognito .cog-header img { display: none !important; } /* logo duplicates the site header; keep the form title (it carries the year) */
.cog-mount .cog-cognito .cog-header { padding-top: 0 !important; }

/* Labels & help text */
/* Some forms (e.g. #104, #47, #48) carry their own condensed label font from Cognito's theme — override so every form matches */
.cog-mount .cog-cognito .cog-label,
.cog-mount .cog-cognito .cog-helptext,
.cog-mount .cog-cognito .cog-content,
.cog-mount .cog-cognito .el-radio__label,
.cog-mount .cog-cognito .el-checkbox__label { font-family: var(--font-body) !important; letter-spacing: normal !important; }
.cog-mount .cog-label { font-weight: 700 !important; color: var(--ink) !important; font-size: 1rem !important; }
.cog-mount .cog-helptext, .cog-mount .cog-field__helptext { color: var(--muted) !important; font-size: .92rem !important; }
.cog-mount .cog-asterisk { color: var(--berry) !important; }

/* Inputs */
.cog-mount .el-input__inner,
.cog-mount .el-textarea__inner,
.cog-mount .cog-input input,
.cog-mount .cog-input textarea,
.cog-mount .cog-input select {
  font: inherit !important;
  min-height: 50px;
  border: 2px solid var(--ink) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  padding-inline: 14px !important;
  box-shadow: none !important;
  transition: box-shadow .15s ease;
}
.cog-mount .el-textarea__inner, .cog-mount .cog-input textarea { padding-block: 12px !important; }
.cog-mount .el-input__inner:focus,
.cog-mount .el-textarea__inner:focus,
.cog-mount .cog-input input:focus,
.cog-mount .cog-input textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 4px rgba(0, 168, 228, .35) !important;
}

/* Choice fields */
.cog-mount .el-radio__inner, .cog-mount .el-checkbox__inner { border: 2px solid var(--ink) !important; width: 22px !important; height: 22px !important; }
.cog-mount .el-checkbox__inner { border-radius: 6px !important; }
.cog-mount .el-radio__input.is-checked .el-radio__inner,
.cog-mount .el-checkbox__input.is-checked .el-checkbox__inner { background: var(--sun) !important; border-color: var(--ink) !important; }
.cog-mount .el-radio__inner { background: #fff !important; }
.cog-mount .el-radio__input.is-checked .el-radio__inner::after { background: var(--ink) !important; }
.cog-mount .el-checkbox__inner::after { border-color: var(--ink) !important; }

/* File upload — big friendly drop zone (quotes, receipts, L&D forms) */
.cog-mount .cog-upload, .cog-mount .cog-file-upload { border: 2px dashed var(--ink) !important; border-radius: 16px !important; background: var(--paper-2) !important; }

/* Buttons */
.cog-mount .cog-button {
  font-family: var(--font-display) !important; font-weight: 600 !important; font-size: 1.06rem !important;
  min-height: 50px; padding: .8em 1.5em !important;
  border-radius: 999px !important; border: 2px solid var(--ink) !important;
  box-shadow: 0 4px 0 var(--ink) !important;
  transition: transform .15s ease, box-shadow .15s ease;
}
.cog-mount .cog-button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--ink) !important; }
.cog-mount .cog-button--primary, .cog-mount .cog-button--submit { background: var(--ocean) !important; color: #fff !important; }
.cog-mount .cog-button--secondary, .cog-mount .cog-button--back, .cog-mount .cog-button--save { background: #fff !important; color: var(--ink) !important; }

/* Multi-page progress */
.cog-mount .cog-page-progress__bar, .cog-mount .cog-progress-bar__fill { background: var(--mural) !important; }
.cog-mount .cog-page-progress { font-family: var(--font-display) !important; }

/* Errors */
.cog-mount .cog-error-message, .cog-mount .cog-field.is-error .cog-label { color: #b0124f !important; }
.cog-mount .cog-field.is-error .el-input__inner { border-color: #b0124f !important; background: #fff5f9 !important; }

/* Section/table rows */
.cog-mount .cog-section, .cog-mount .cog-repeating-section__row { border-radius: 16px !important; }

/* Kill Cognito branding spacing at the bottom so it sits inside our shell */
.cog-mount .cog-branding { opacity: .6; margin-top: 18px; }