/*!
 * Wilmington Marketo Forms (wmkto) v1.5.2
 * Shared styling for Marketo inline forms across Wilmington brand sites.
 *
 * Why everything here is !important and inside @layer wmkto:
 * the older per-brand override CSS targets every Marketo form on a page
 * with !important. Important declarations in a cascade layer beat
 * unlayered important ones regardless of selector strength, so these
 * rules win over the old overrides (and Marketo's own CSS) for wmkto
 * forms, while the old overrides keep working for older forms.
 * Once every form is migrated, the old overrides can be deleted.
 *
 * Structure:
 *   1. Base tokens        4. Checkboxes & radios   7. Thank-you message
 *   2. Brands             5. Buttons               8. Style options
 *   3. Layout & fields    6. Errors & small print  9. Loading state
 */

@layer wmkto {

/* =========================================================
   1. BASE TOKENS (light background by default)
   ========================================================= */
.wmkto {
    --wmkto-accent: #333333;
    --wmkto-accent-hover: #111111;
    --wmkto-button-text: #ffffff;
    --wmkto-radius: 8px;

    --wmkto-text: #1a1a1a;
    --wmkto-muted: #555555;

    --wmkto-field-bg: #f5f6f8;
    --wmkto-field-bg-focus: #ffffff;
    --wmkto-field-text: #1a1a1a;
    --wmkto-field-border: #c4c8cf;
    --wmkto-focus: #888888;

    --wmkto-invalid: #ff6868;
    --wmkto-error-text: #c62828;

    --wmkto-focus-ring: var(--wmkto-accent);

    --wmkto-max-width: none;
    --wmkto-pad: 0px;
    --wmkto-space: 0px;

    display: block !important;
    width: 100% !important;
    max-width: var(--wmkto-max-width) !important;
    margin: var(--wmkto-space) 0 !important;
    padding: var(--wmkto-pad) !important;
    box-sizing: border-box !important;
    color: var(--wmkto-text) !important;
}

/* Dark background */
.wmkto--dark {
    --wmkto-text: #ffffff;
    --wmkto-muted: rgba(255, 255, 255, 0.8);
    --wmkto-field-bg: #ffffff;
    --wmkto-field-border: transparent;
    --wmkto-focus: var(--wmkto-accent);
    --wmkto-error-text: #ffb4b4;
    --wmkto-focus-ring: #ffffff;
}

/* =========================================================
   2. BRANDS
   One accent drives the button, checkboxes, radios and focus.
   To add a brand: copy a block, rename it, change the colours.
   ========================================================= */
.wmkto--ica {
    --wmkto-accent: #be348a;
    --wmkto-accent-hover: #8d044e;
}

.wmkto--bond-solon {
    --wmkto-accent: #d14600;
    --wmkto-accent-hover: #a83800;
}

.wmkto--clti {
    --wmkto-accent: #000188;
    --wmkto-accent-hover: #0c0d59;
}

.wmkto--mercia {
    --wmkto-accent: #e50055;
    --wmkto-accent-hover: #b0157d;
}

.wmkto--axco {
    --wmkto-accent: #fc4539;
    --wmkto-accent-hover: #c2352b;
}

.wmkto--phoenix {
    --wmkto-accent: #066cff;
    --wmkto-accent-hover: #16174f;
}

/* Dark-background adjustments where the brand colour
   would disappear against the brand's own dark sections */
.wmkto--clti.wmkto--dark {
    --wmkto-accent: #ffb033;
    --wmkto-accent-hover: #ffc261;
    --wmkto-button-text: #00008a;
}

.wmkto--phoenix.wmkto--dark {
    --wmkto-accent-hover: #3d8bff;
}

/* =========================================================
   3. LAYOUT & FIELDS
   The form fills its container; the page layout sets the width.
   ========================================================= */
.wmkto .mktoForm {
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 2rem !important;
    padding: 0 !important;
    font: inherit !important;
    color: var(--wmkto-text) !important;
    box-sizing: border-box !important;
}

.wmkto .mktoForm *,
.wmkto .mktoForm *::before,
.wmkto .mktoForm *::after {
    box-sizing: border-box !important;
}

.wmkto .mktoForm .mktoFormRow {
    display: flex !important;
    flex-direction: column !important;
}

.wmkto .mktoForm .mktoFormCol,
.wmkto .mktoForm .mktoFieldWrap {
    width: 100% !important;
    float: none !important;
}

.wmkto .mktoForm .mktoFieldWrap {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 1rem !important;
}

/* Marketo spacer elements */
.wmkto .mktoForm .mktoOffset,
.wmkto .mktoForm .mktoGutter,
.wmkto .mktoForm .mktoClear {
    display: none !important;
}

/* Labels */
.wmkto .mktoForm label.mktoLabel {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 0 0.5rem !important;
    padding: 0 !important;
    float: none !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--wmkto-text) !important;
}

/* Rich text inside labels (Marketo allows <p>, <div> etc.) stays inline */
.wmkto .mktoForm label.mktoLabel p,
.wmkto .mktoForm label.mktoLabel div:not(.mktoAsterix) {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Required asterisk: shown after the label text, required fields only */
.wmkto .mktoForm .mktoAsterix {
    display: none !important;
    margin-left: 0.25rem !important;
    padding: 0 !important;
    float: none !important;
    color: inherit !important;
}

.wmkto .mktoForm .mktoRequiredField .mktoAsterix {
    display: inline !important;
}

/* Text inputs, selects, textareas */
.wmkto .mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.wmkto .mktoForm select.mktoField,
.wmkto .mktoForm textarea.mktoField {
    display: block !important;
    width: 100% !important;
    min-height: 3rem !important;
    margin: 0 !important;
    padding: 0.75rem 1rem !important;
    font: inherit !important;
    line-height: 1.4 !important;
    color: var(--wmkto-field-text) !important;
    background: var(--wmkto-field-bg) !important;
    border: 1px solid var(--wmkto-field-border) !important;
    border-radius: var(--wmkto-radius) !important;
    box-shadow: none !important;
    float: none !important;
}

.wmkto .mktoForm textarea.mktoField {
    min-height: 7rem !important;
    resize: vertical !important;
}

/* Dropdowns: own arrow, inset from the edge */
.wmkto .mktoForm select.mktoField {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 3rem !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555555' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 1.1rem !important;
    cursor: pointer !important;
}

.wmkto .mktoForm select.mktoField::-ms-expand {
    display: none !important;
}

/* Focus: border + inset shadow looks 2px without shifting the layout */
.wmkto .mktoForm input.mktoField:not([type="checkbox"]):not([type="radio"]):focus,
.wmkto .mktoForm select.mktoField:focus,
.wmkto .mktoForm textarea.mktoField:focus {
    outline: none !important;
    background: var(--wmkto-field-bg-focus) !important;
    border-color: var(--wmkto-focus) !important;
    box-shadow: inset 0 0 0 1px var(--wmkto-focus) !important;
}

/* Invalid */
.wmkto .mktoForm input.mktoField.mktoInvalid:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.wmkto .mktoForm select.mktoField.mktoInvalid,
.wmkto .mktoForm textarea.mktoField.mktoInvalid {
    border-color: var(--wmkto-invalid) !important;
    box-shadow: inset 0 0 0 1px var(--wmkto-invalid) !important;
}

/* =========================================================
   4. CHECKBOXES & RADIOS
   Native inputs, coloured with the brand accent.
   ========================================================= */
.wmkto .mktoForm .mktoCheckboxList,
.wmkto .mktoForm .mktoRadioList {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    max-width: none !important;
    gap: 0.6rem 0.6rem !important;
    align-items: start !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.wmkto .mktoForm input.mktoField[type="checkbox"],
.wmkto .mktoForm input.mktoField[type="radio"] {
    width: 1.25rem !important;
    height: 1.25rem !important;
    margin: 0.1rem 0 0 !important;
    padding: 0 !important;
    accent-color: var(--wmkto-accent) !important;
    cursor: pointer !important;
    float: none !important;
    opacity: 1 !important;
    position: static !important;
    top: auto !important;
    left: auto !important;
    -webkit-appearance: auto !important;
    appearance: auto !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Old overrides drew their own boxes and ticks with pseudo-elements */
.wmkto .mktoForm input[type="checkbox"] + label::before,
.wmkto .mktoForm input[type="radio"] + label::before,
.wmkto .mktoForm input[type="checkbox"]::after,
.wmkto .mktoForm input[type="radio"]::after {
    content: none !important;
    display: none !important;
}

.wmkto .mktoForm .mktoCheckboxList > label,
.wmkto .mktoForm .mktoRadioList > label {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: var(--wmkto-text) !important;
    cursor: pointer !important;
}

.wmkto .mktoForm input.mktoField[type="checkbox"]:focus-visible,
.wmkto .mktoForm input.mktoField[type="radio"]:focus-visible {
    outline: 2px solid var(--wmkto-focus-ring) !important;
    outline-offset: 2px !important;
}

/* Invalid checkbox/radio group */
.wmkto .mktoForm .mktoCheckboxList.mktoInvalid,
.wmkto .mktoForm .mktoRadioList.mktoInvalid {
    outline: 2px solid var(--wmkto-invalid) !important;
    outline-offset: 4px !important;
    border-radius: 2px !important;
}

/* =========================================================
   5. BUTTONS
   ========================================================= */
.wmkto .mktoForm .mktoButtonRow {
    display: block !important;
    width: 100% !important;
    margin: 0.5rem 0 0 !important;
}

.wmkto .mktoForm .mktoButtonWrap {
    display: block !important;
    width: 100% !important;
    margin: 0 !important; /* also beats Marketo's inline margin-left */
}

.wmkto .mktoForm button.mktoButton {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 1rem 2rem !important;
    font: inherit !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
    color: var(--wmkto-button-text) !important;
    background: var(--wmkto-accent) !important;
    border: 0 !important;
    border-radius: var(--wmkto-radius) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.wmkto .mktoForm button.mktoButton:hover {
    background: var(--wmkto-accent-hover) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.wmkto .mktoForm button.mktoButton:focus-visible {
    outline: 3px solid var(--wmkto-focus-ring) !important;
    outline-offset: 3px !important;
}

/* Marketo disables the button while submitting */
.wmkto .mktoForm button.mktoButton[disabled] {
    opacity: 0.7 !important;
    cursor: progress !important;
}

/* =========================================================
   6. ERRORS & SMALL PRINT
   ========================================================= */
.wmkto .mktoForm .mktoError {
    position: static !important;
    margin: 0.4rem 0 0 !important;
}

.wmkto .mktoForm .mktoErrorArrowWrap {
    display: none !important;
}

.wmkto .mktoForm .mktoError .mktoErrorMsg {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    color: var(--wmkto-error-text) !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.wmkto .mktoForm .mktoError .mktoErrorDetail {
    display: block !important;
}

.wmkto .mktoForm .mktoHtmlText {
    width: 100% !important;
    max-width: none !important;
    font-size: 0.85rem !important;
    line-height: 1.5 !important;
    color: var(--wmkto-muted) !important;
}

.wmkto .mktoForm .mktoHtmlText a,
.wmkto .mktoForm .mktoCaptchaDisclaimer a {
    color: inherit !important;
    text-decoration: underline !important;
}

.wmkto .mktoForm .mktoCaptchaDisclaimer {
    margin: 0.75rem 0 0 !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: var(--wmkto-muted) !important;
}

/* Note under phone fields (added by wmkto.js) */
.wmkto .mktoForm .wmkto__field-note {
    margin: 0.4rem 0 0 !important;
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    color: var(--wmkto-muted) !important;
}

/* =========================================================
   7. THANK-YOU MESSAGE
   ========================================================= */
.wmkto__thank-you {
    padding: 2rem 0 !important;
    color: var(--wmkto-text) !important;
}

.wmkto__thank-you:focus {
    outline: none !important;
}

.wmkto__thank-you h2,
.wmkto__thank-you p {
    color: inherit !important;
}

.wmkto__thank-you p {
    margin: 0.75rem 0 0 !important;
}

.wmkto__checkmark {
    margin-right: 0.25rem !important;
    color: var(--wmkto-accent) !important;
}

.wmkto--dark .wmkto__checkmark {
    color: inherit !important;
}

.wmkto__follow-up-link {
    color: inherit !important;
    text-decoration: underline !important;
}

.wmkto__thank-you[hidden],
.wmkto__follow-up[hidden] {
    display: none !important;
}

/* =========================================================
   8. STYLE OPTIONS (set in the generator)
   ========================================================= */
.wmkto--labels-regular .mktoForm label.mktoLabel {
    font-weight: 400 !important;
}

.wmkto--corners-soft {
    --wmkto-radius: 4px;
}

.wmkto--corners-square {
    --wmkto-radius: 0;
}

.wmkto--button-auto .mktoForm button.mktoButton {
    display: inline-block !important;
    width: auto !important;
    min-width: 12rem !important;
}

/* Layout: width, alignment, padding, space above and below */
.wmkto--width-wide   { --wmkto-max-width: 720px; }
.wmkto--width-medium { --wmkto-max-width: 560px; }
.wmkto--width-narrow { --wmkto-max-width: 420px; }

.wmkto--center {
    margin-left: auto !important;
    margin-right: auto !important;
}

.wmkto--pad-sm { --wmkto-pad: 1rem; }
.wmkto--pad-md { --wmkto-pad: 2rem; }
.wmkto--pad-lg { --wmkto-pad: 3rem; }

.wmkto--pad-sm .mktoForm,
.wmkto--pad-md .mktoForm,
.wmkto--pad-lg .mktoForm {
    margin-bottom: 0 !important;
}

.wmkto--space-sm { --wmkto-space: 1rem; }
.wmkto--space-md { --wmkto-space: 2rem; }
.wmkto--space-lg { --wmkto-space: 3rem; }

@media (max-width: 600px) {
    .wmkto {
        padding: min(var(--wmkto-pad), 1rem) !important;
    }
}

/* Required asterisk */
.wmkto--no-asterisk .mktoForm .mktoRequiredField .mktoAsterix {
    display: none !important;
}

/* "(optional)" markers (added by wmkto.js, shown only with the class) */
.wmkto .mktoForm .wmkto__optional {
    display: none !important;
    margin-left: 0.35rem !important;
    font-weight: 400 !important;
    color: var(--wmkto-muted) !important;
}

.wmkto--mark-optional .mktoForm .wmkto__optional {
    display: inline !important;
}

.wmkto--mark-optional .mktoForm .wmkto__note-optional {
    display: none !important;
}

/* =========================================================
   9. LOADING STATE
   Hides the form until Marketo's styling has been removed.
   ========================================================= */
.wmkto:not(.wmkto--ready) .wmkto__form {
    visibility: hidden !important;
}

@media (prefers-reduced-motion: reduce) {
    .wmkto .mktoForm button.mktoButton {
        transition: none !important;
    }
}

} /* end @layer wmkto */