@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;600;700;800&display=swap');

:root {
  --jg-ink: #221E17;
  --jg-ink-2: #3C382F;
  --jg-ink-3: #6B6558;
  --jg-cream: #EDE3D0;
  --jg-cream-light: #F4EBD9;
  --jg-panel: #fff7e9;        /* site --panel-light */
  /* Site --field is rgba(255,252,245,.75), translucent so the cream ground
     shows through. Nothing sits behind it here, so use the flat equivalent. */
  --jg-field: #fffcf5;
  --jg-green: #00A050;
  --jg-green-deep: #076B36;
  --jg-green-deeper: #05512A;
  --jg-green-wash: #CDEBD8;
  --jg-rust: #ab1524;
  --jg-rule: 2px solid #221E17;
}

/* ---------- Ground and type ---------- */

html, body, .Paperform_Container {
  background-color: var(--jg-cream) !important;
  color: var(--jg-ink) !important;
  -webkit-font-smoothing: antialiased;
}

body, body * { font-family: 'Archivo', system-ui, -apple-system, sans-serif !important; }

h1, h2, h3, h4 {
  font-weight: 800 !important;
  letter-spacing: -.02em !important;
  line-height: 1.12 !important;
  color: var(--jg-ink) !important;
}
h1 { font-size: 42px !important; }
h2 { font-size: 28px !important; }

p, li { color: var(--jg-ink-2) !important; line-height: 1.55 !important; }
a { color: var(--jg-green-deep) !important; text-underline-offset: 3px; }

/* The site has no rounded corner anywhere. One stray pill is enough to make
   the form read as somebody else's page. */
input, textarea, select, button,
.Choices__choice, .Select-control, .Select-menu-outer, .YesNo__button,
.BtnV2--raised, .btn-raised, .Rank__option, .Product__withquantity,
.PaperCalendar__day, .PaperTime, .PaperDateInput-container {
  border-radius: 0 !important;
}

/* ---------- Question blocks and labels ---------- */

.Paperform__QuestionBlock { margin-bottom: 26px !important; }

/* Field labels are small uppercase with wide tracking, as on the site. */
label, .Paperform__Question > h2, .Paperform__Question > h3 {
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
  color: var(--jg-ink-3) !important;
}

/* ---------- Errors ---------- */

.LiveField__error {
  color: var(--jg-rust) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  margin-top: 6px !important;
}

/* ---------- Text, email, phone, number, textarea ---------- */

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
textarea {
  background: var(--jg-field) !important;
  border: var(--jg-rule) !important;
  box-shadow: none !important;
  padding: 13px 15px !important;
  font-size: 16px !important;        /* under 16px and iOS zooms on focus */
  line-height: 1.5 !important;
  color: var(--jg-ink) !important;
}

input::placeholder, textarea::placeholder {
  color: var(--jg-ink-3) !important;
  opacity: 1 !important;             /* Firefox dims placeholders otherwise */
}

input:focus, textarea:focus, .Select-control:focus-within {
  outline: 3px solid var(--jg-green) !important;
  outline-offset: 2px !important;
  border-color: var(--jg-ink) !important;
}

/* An invalid field. The selector repeats the whole :not() chain above on
   purpose — a bare [aria-invalid="true"] loses on specificity to the field
   rule and the border stays ink, !important on both or not. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"])[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: var(--jg-rust) !important;
}

input[type="checkbox"], input[type="radio"] {
  accent-color: var(--jg-green-deep) !important;
  width: 18px !important; height: 18px !important;
}

/* ---------- Dropdown ---------- */
/* .Select-control is react-select's box. Paperform documents its siblings
   (.Select-menu-outer, .Select-option, .Select-value-label), so it is there. */

.Select-control {
  background: var(--jg-field) !important;
  border: var(--jg-rule) !important;
  box-shadow: none !important;
  min-height: 50px !important;
}

.Select-menu-outer {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  border-top: 0 !important;
  box-shadow: none !important;
}

.Select-option { background: var(--jg-panel) !important; color: var(--jg-ink) !important; }
.Select-option.is-focused, .Select-option:hover { background: var(--jg-green-wash) !important; }
.Select-option.is-selected { background: var(--jg-green-wash) !important; font-weight: 600 !important; }

.Select-value-label { color: var(--jg-ink) !important; }

/* Multi-select chips */
.Select--multi .Select-value {
  background: var(--jg-green-wash) !important;
  border: var(--jg-rule) !important;
  border-radius: 0 !important;
  color: var(--jg-ink) !important;
}
.Select-value-icon { border-right: var(--jg-rule) !important; color: var(--jg-ink) !important; }

/* ---------- Multiple choice ---------- */

.Choices__choice {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  color: var(--jg-ink) !important;
}
.Choices__choice:hover { background: var(--jg-green-wash) !important; }

.Choices__choice[aria-checked="true"] {
  background: var(--jg-green-wash) !important;
  border-color: var(--jg-ink) !important;
}

/* The label rule above would uppercase these; option text is sentence case. */
.Choices__label {
  color: var(--jg-ink) !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-size: 16px !important;
  font-weight: 400 !important;
}

/* ---------- Yes / No ---------- */

.YesNo__button {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  color: var(--jg-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: .14em !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.YesNo__button:hover { background: var(--jg-green-wash) !important; }
.YesNo__button[aria-checked="true"] {
  background: var(--jg-green-deep) !important;
  color: #fff !important;
}

/* ---------- Buttons ---------- */
/* White label rather than the site's cream-light: against --green-deep that
   takes contrast from 5.60:1 to 6.63:1, the same call the site header makes. */

button, input[type="submit"], .BtnV2--raised, .btn-raised {
  background: var(--jg-green-deep) !important;
  color: #fff !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 15px 26px !important;
  cursor: pointer !important;
  transition: background-color .15s ease !important;
}

button:hover, input[type="submit"]:hover,
.BtnV2--raised:hover, .btn-raised:hover { background: var(--jg-green-deeper) !important; }

/* Calendar arrows and bare icon buttons must not inherit the green block
   above — they are controls, not calls to action. */
.PaperCalendar__back, .PaperCalendar__forward,
.Appointment__time-picker-back, .MaterialIcon {
  background: transparent !important;
  color: var(--jg-ink) !important;
  padding: 6px !important;
}

/* ---------- Uploads ---------- */

.MultipleFiles__file {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  color: var(--jg-ink) !important;
}
.MultipleFiles__file .MaterialIcon { color: var(--jg-rust) !important; }

/* ---------- Date and time ---------- */

.PaperDateInput-container, .PaperTime, .PaperTime__time {
  background: var(--jg-field) !important;
  border: var(--jg-rule) !important;
}
.PaperDateInput__separator, .PaperTime__colon { color: var(--jg-ink-3) !important; }

.PaperTime__button {
  background: var(--jg-green-deep) !important;
  color: #fff !important;
  border: 0 !important;
}

/* ---------- Appointment calendar ---------- */

.PaperCalendar__wrapper, .PaperCalendar__controls {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
}

.PaperCalendar__dayLabel {
  color: var(--jg-ink-3) !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}

.PaperCalendar__day { color: var(--jg-ink) !important; background: transparent !important; }
.PaperCalendar__day:hover { background: var(--jg-green-wash) !important; }
.PaperCalendar__day--disabled { color: var(--jg-ink-3) !important; opacity: .5 !important; }
.PaperCalendar__day--outsidemonth { color: var(--jg-ink-3) !important; }

.Appointment__time-picker-inner .Appointment__time-button {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  color: var(--jg-ink) !important;
}

/* ---------- Scale, slider, rank, rating ---------- */

.Scale__track { background: var(--jg-ink) !important; }
.Scale__checkbox-label-text { color: var(--jg-ink-2) !important; }

[data-reach-slider-range] { background: var(--jg-green) !important; }
.Slider__axis-label--min, .Slider__axis-label--max { color: var(--jg-ink-3) !important; }

.Rank__option {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
  color: var(--jg-ink) !important;
}
.Rank__option--selected { background: var(--jg-green-wash) !important; }
.Rank__order-selector {
  background: var(--jg-green-deep) !important;
  color: #fff !important;
  border-radius: 0 !important;
}

.Rating__icon-selected { color: var(--jg-green-deep) !important; }
.Rating__icon-unselected { color: var(--jg-ink-3) !important; }

/* ---------- Products ---------- */

.Product__withquantity {
  background: var(--jg-panel) !important;
  border: var(--jg-rule) !important;
}
.Product__label { color: var(--jg-ink) !important; font-weight: 700 !important; }
.Product__price {
  color: var(--jg-green-deep) !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
}

/* ---------- Motion ---------- */
/* Matches the site: delays go too, not just durations, or a staged animation
   becomes a pause followed by a snap. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}