/* The Farmyard: brand styling for the Discover forms (visit.html), adapted from the Canopy build
   Both forms render their markup straight into our page (no shadow DOM), so
   everything here is scoped under .widget and can't leak into the rest of the
   site. Discover's own rules are specific, so the key properties use
   !important. If Discover changes their markup, the forms still work; at worst
   they fall back to Discover's default look. */

/* ============================================================ SHARED */

.widget {
  --forest: var(--pine); --bark: var(--ink); --off-white: var(--wool); --stone: var(--sky); --willow: var(--grass-far);
  --radius-sm: 12px; --radius-md: 18px; --radius-pill: 999px;
  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --font-heading: var(--display); --font-body: var(--sans);
  --text-label-size: .78rem; --text-label-weight: 500; --text-label-spacing: .06em;
  --f-line: color-mix(in srgb, var(--bark) 18%, transparent);
  --f-field: #fff;
  font-family: var(--font-body) !important;
  color: var(--bark);
}
.widget *, .widget input, .widget select, .widget textarea, .widget button { font-family: var(--font-body) !important; }

/* ============================================================ ENQUIRY FORM */

/* Outer panel: no grey box, the form sits on the page */
.widget .discover-panel.discover-enquiry-form,
.widget .discover-enquiry-form { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
/* Their own "Enquiry form" heading duplicates ours */
.widget .discover-enquiry-form > .discover-h2,
.widget .discover-enquiry-form .discover-h2:first-child { display: none !important; }

/* Labels above fields instead of right-aligned beside them */
.widget .discover-form-group { display: block !important; margin: 0 0 var(--space-4) !important; }
.widget .discover-form-group > [class*="col-"] { width: 100% !important; float: none !important; padding-inline: 0 !important; }
.widget .discover-control-label, .widget .discover-form-group > label {
  text-align: left !important; padding: 0 !important; margin: 0 0 6px !important;
  font-size: var(--text-label-size) !important; font-weight: var(--text-label-weight) !important;
  letter-spacing: var(--text-label-spacing) !important; text-transform: uppercase; color: var(--forest) !important;
}
.widget .discover-row > [class*="col-md-6"] { padding-inline: 10px !important; }

/* Fields */
.widget .discover-form-control, .widget .form-control, .widget select, .widget textarea,
.widget input[type="text"], .widget input[type="email"], .widget input[type="tel"], .widget input[type="date"] {
  height: auto !important; min-height: 48px;
  padding: 12px 16px !important;
  border: 1px solid var(--f-line) !important; border-radius: var(--radius-sm) !important;
  background-color: var(--f-field) !important; color: var(--bark) !important;
  font-size: 16px !important; box-shadow: none !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.widget textarea { min-height: 120px; }
.widget .discover-form-control:focus, .widget .form-control:focus, .widget select:focus, .widget textarea:focus, .widget input:focus {
  border-color: var(--forest) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--willow) 55%, transparent) !important;
  outline: 0 !important;
}
.widget ::placeholder { color: color-mix(in srgb, var(--bark) 45%, transparent) !important; }
.widget input[type="checkbox"], .widget input[type="radio"] { accent-color: var(--forest); width: 18px; height: 18px; }

/* Calendar add-on: their icon font isn't loaded, so draw a simple one */
.widget .input-group { display: flex !important; width: 100% !important; }
.widget .input-group .discover-form-control, .widget .input-group .form-control { border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important; flex: 1; }
.widget .input-group-addon {
  display: grid !important; place-items: center; width: 48px !important; padding: 0 !important;
  background: var(--stone) !important; border: 1px solid var(--f-line) !important; border-left: 0 !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important; color: var(--forest) !important;
}
.widget .input-group-addon .fa-calendar::before {
  content: "" !important; display: block; width: 18px; height: 18px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495848' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* Child details: a soft stone card */
.widget .discover-child-details-container, .widget .discover-panel-default {
  background: var(--stone) !important; border: 0 !important; border-radius: var(--radius-md) !important;
  box-shadow: none !important; margin: var(--space-5) 0 !important; overflow: hidden;
}
.widget .discover-panel-heading {
  background: transparent !important; border: 0 !important;
  padding: var(--space-5) var(--space-5) 0 !important;
  font-family: var(--font-heading) !important; font-size: 32px !important; line-height: 1.1; color: var(--forest) !important;
}
.widget .discover-panel-body { padding: var(--space-4) var(--space-5) var(--space-3) !important; }
.widget .discover-close { opacity: 0.6 !important; color: var(--forest) !important; font-size: 26px !important; text-shadow: none !important; }
.widget .discover-close:hover { opacity: 1 !important; }

/* Buttons: brand pills */
.widget .discover-btn {
  border: 0 !important; border-radius: var(--radius-pill) !important;
  padding: 14px 28px !important; min-height: 50px;
  font-size: 15px !important; font-weight: 700 !important; letter-spacing: 0 !important;
  box-shadow: none !important; text-shadow: none !important;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}
.widget .discover-btn:hover { transform: translateY(-2px); }
.widget .discover-btn-primary, .widget .discover-btn-primary:focus { background: var(--forest) !important; color: var(--off-white) !important; }
.widget .discover-btn-primary:hover { background: var(--bark) !important; }
.widget .discover-btn-info { background: transparent !important; color: var(--forest) !important; box-shadow: inset 0 0 0 1.5px var(--forest) !important; }
.widget .discover-btn-info:hover { background: var(--forest) !important; color: var(--off-white) !important; }

/* Validation messages */
.widget .field-validation-error, .widget .text-danger { color: #a4442f !important; font-size: 14px !important; font-weight: 600; }

/* ============================================================ ENROLMENT FORM (Xplor) */

/* Page wrapper: drop their grey full-screen background */
.widget enrolment-form .min-h-screen { min-height: 0 !important; background: transparent !important; padding: 0 !important; }

/* Step tracker: forest instead of indigo */
.widget enrolment-form .bg-indigo-600 { background-color: var(--forest) !important; }
.widget enrolment-form .border-indigo-600 { border-color: var(--forest) !important; }
.widget enrolment-form .text-indigo-600 { color: var(--forest) !important; }
.widget enrolment-form .rounded-full.bg-white { background: var(--off-white) !important; border-color: var(--f-line) !important; color: color-mix(in srgb, var(--bark) 55%, transparent) !important; }
.widget enrolment-form .bg-gray-300 { background-color: var(--f-line) !important; }
.widget enrolment-form .rounded-full { font-weight: 600 !important; }

/* Step card */
.widget enrolment-form .rounded-lg.border {
  background: var(--stone) !important; border: 0 !important; border-radius: var(--radius-md) !important;
  padding: clamp(var(--space-5), 3vw, 40px) !important;
}
.widget enrolment-form .text-gray-600 { color: var(--bark) !important; }

/* Section heading: script, not shouty capitals */
.widget enrolment-form .section-heading {
  font-family: var(--font-heading) !important; font-weight: 400 !important;
  text-transform: none !important; letter-spacing: 0 !important;
  font-size: clamp(36px, 3.4vw, 48px) !important; line-height: 1.05 !important; color: var(--forest) !important;
  margin-bottom: var(--space-2) !important;
}

/* Text inputs */
.widget enrolment-form .xplor-input-text__field {
  background: var(--f-field) !important; border: 1px solid var(--f-line) !important;
  border-radius: var(--radius-sm) !important; box-shadow: none !important;
}
.widget enrolment-form .xplor-input-text__field:focus-within {
  border-color: var(--forest) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--willow) 55%, transparent) !important;
}
.widget enrolment-form .xplor-input-text__input { font-size: 16px !important; color: var(--bark) !important; }
.widget enrolment-form label, .widget enrolment-form .xplor-input-text label { color: color-mix(in srgb, var(--bark) 70%, transparent) !important; }

/* Buttons */
.widget .x-button {
  border-radius: var(--radius-pill) !important; min-height: 48px; padding-inline: 24px !important;
  font-weight: 700 !important; letter-spacing: 0 !important; text-transform: none !important;
  box-shadow: none !important; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease !important;
}
.widget .x-button:hover { transform: translateY(-2px); }
.widget .x-button.primary { background: var(--forest) !important; color: var(--off-white) !important; border: 1px solid var(--forest) !important; }
.widget .x-button.primary:hover { background: var(--bark) !important; border-color: var(--bark) !important; }
.widget .x-button.secondary { background: transparent !important; color: var(--forest) !important; border: 1px solid var(--forest) !important; }
.widget .x-button.secondary:hover { background: var(--forest) !important; color: var(--off-white) !important; }
.widget .x-button .button-text { font-size: 15px !important; }

/* label columns are right-aligned by Discover */
.widget .discover-form-group [class*="col-"], .widget .discover-form-group { text-align: left !important; }
.widget .discover-control-label { display: block !important; width: 100% !important; }
.widget .discover-row, .widget .row { margin-inline: 0 !important; }
.widget .discover-row > [class*="col-"] { padding-inline: 8px !important; }
.widget .discover-control-label { text-transform: uppercase !important; }
/* Discover uses a .container class too; don't let our page container rules apply */
.widget .container { width: auto !important; max-width: none !important; margin-inline: 0 !important; padding-inline: 0 !important; }
/* buttons wrap instead of stretching the column on small screens */
.widget .discover-enquiry-buttons > [class*="col-"] { display: flex !important; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-3); }
.widget .discover-enquiry-buttons .discover-btn { margin: 0 !important; }
.widget textarea, .widget .discover-check-box, .widget .discover-form-group { max-width: 100% !important; box-sizing: border-box !important; }
.widget textarea { width: 100% !important; }
@media (max-width: 560px) { .widget .discover-enquiry-buttons .discover-btn { flex: 1 1 100%; } }

/* Client request (Oct 2026): hide "been in childcare before", "toilet trained" and the comment box */
.widget .discover-container-child-and-toilet, .widget .discover-container-comment { display: none !important; }