/* ==========================================================================
   KPBS Digital - EmailMeForm theme: Day of the Dead Digital Altar
   Built on the KPBS Digital base theme (October 2026), tuned for embedding:
   no page padding, transparent page. Palette taken from the kpbs.org
   Día de Muertos altar page: purple, cream, papel picado strip, orange CTA.
   Mobile first. Breakpoint: 576px.
   Supports: current Chrome, Edge, Firefox, Safari (macOS + iOS), Samsung Internet
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;800&display=swap');

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand (from the altar page) */
    --kpbs-purple: #2e0c44;       /* headings, dark UI */
    --ui: #5a1f86;                /* interactive purple: focus, checked, links */
    --ui-dark: #2e0c44;
    --cream: #fbf2d1;             /* "Honor a loved one" card */
    --cream-light: #fffaf0;
    --marigold: #f4b233;
    --marigold-dark: #c98a1a;
    --marigold-tint: #fff6e6;
    --strip-rosa: #fc0b4e;        /* papel picado strip, decorative only */
    --strip-naranja: #f99421;
    --strip-oro: #f4b233;
    --strip-teal: #20b6a8;
    --strip-azul: #2a42a3;
    --cta: #d63d1a;               /* white text 4.6:1 (WCAG AA) */
    --cta-hover: #b9330f;
    --kpbs-slate: #3e5163;

    /* Text + surfaces */
    --text: #262d26;
    --text-muted: #4a5560;        /* 7:1 on white */
    --page-bg: transparent;       /* let the host page show through the embed */
    --card-bg: #ffffff;
    --field-bg: #ffffff;
    --field-border: #7d8b96;      /* 3:1 against white, meets WCAG 1.4.11 */
    --divider: #e3d9c2;
    --error: #c8102e;

    --focus-ring: 0 0 0 3px rgba(90, 31, 134, 0.35);
    --radius: 8px;
    --font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --ease: 0.15s ease-in-out;
    --gutter: 16px;
}

@media only screen and (min-width: 576px) {
    :root { --gutter: 28px; }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    color: var(--text);
    background-color: var(--page-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Brand helpers */
.primary-color   { color: var(--kpbs-purple); }
.secondary-color { color: var(--text); }
.highlight-color { color: var(--kpbs-slate); }

/* One font + color for everything in the form */
#emf-container,
#emf-form-title,
#emf-form-description,
#emf-container label,
#emf-container h3,
#emf-container .emf-section-text,
#emf-container .emf-div-instruction,
#emf-form input,
#emf-form textarea,
#emf-form select,
#emf-form optgroup,
#emf-form option {
    font-family: var(--font);
    color: var(--text);
}

/* Some EMF themes set Lato on headings and helper text with stronger
   selectors. Two IDs here so Roboto always wins. */
#emf-container #emf-form li h3,
#emf-container #emf-form li label,
#emf-container #emf-form li .emf-section-text,
#emf-container #emf-form li .emf-div-instruction {
    font-family: var(--font);
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
/* Embedded: fill the iframe edge to edge, no outer spacing */
#emf-container-outer {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

#emf-container-outer #emf-container,
#emf-container-outer #emf-form-shadows {
    width: 100%;
    max-width: 100% !important;
}

#emf-form-shadows {
    display: none;
}

#emf-container {
    position: relative;
    overflow: hidden;
    background-color: var(--card-bg);
    border: 1px solid var(--divider);
    border-radius: 12px;
    font-size: 16px;
    line-height: 1.5;
}

#emf-container #emf-form {
    padding: 0 var(--gutter) 32px;
}

/* Rows wrap so "half width" fields sit side by side on wider screens */
#emf-form > ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;  /* spacing fallback where flex gap is missing (Safari < 14.1) */
    column-gap: 20px;
    margin: 0;
    padding: 0;
}

/* Every field row: no bullets, consistent spacing */
#emf-container #emf-form > ul > li {
    list-style: none;
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 0 22px;
    padding: 0;
    vertical-align: top;
    clear: both;
    float: none;
    overflow-x: visible;
}

@media only screen and (min-width: 576px) {
    #emf-container #emf-form > ul > li.emf-li-half-width {
        flex: 0 0 calc(50% - 10px);
        width: calc(50% - 10px);
        clear: none;
    }
}

#emf-form li.highlight-field {
    background: none;
}

/* Real lists inside descriptions, section text and terms keep their markers */
#emf-form-description ul li,
#emf-container .emf-section-text ul li,
#emf-container .emf-li-field ul li {
    list-style: disc;
}

#emf-form-description ol li,
#emf-container .emf-section-text ol li,
#emf-container .emf-li-field ol li {
    list-style: decimal;
}

/* --------------------------------------------------------------------------
   4. Header: strip, logo, title, description
   Strip + logo + title share one cream band, like the "Honor a loved one"
   card on kpbs.org.
   -------------------------------------------------------------------------- */
/* Papel picado color strip across the top of the card */
#emf-container::before {
    content: "";
    display: block;
    height: 8px;
    background: #f99421;          /* fallback */
    background: linear-gradient(90deg,
        #fc0b4e 0%, #fc0b4e 20%,
        #f99421 20%, #f99421 40%,
        #f4b233 40%, #f4b233 60%,
        #20b6a8 60%, #20b6a8 80%,
        #2a42a3 80%, #2a42a3 100%);
}

/* KPBS logo, shown on all screen sizes. The logo is drawn on the wrapper
   and the empty EMF link ("EmailMeForm" text, no href) is removed so screen
   readers don't announce it. The form title below names KPBS for them. */
#emf-container #emf-logo {
    display: block;
    height: auto;
    margin: 0;
    padding: 20px var(--gutter) 0;
    background: var(--cream);
    border: 0;
    border-radius: 0;
}

#emf-container #emf-logo::before {
    content: "";
    display: block;
    width: 116px;
    height: 33px;                 /* logo file is 1438 x 400 */
    background: url("https://files.emailmeform.com/2016175/elwCcjap/GoogleNewsstand-KPBS_FullColor.png") no-repeat left center / contain;
}

#emf-container #emf-logo a {
    display: none;
}

@media only screen and (min-width: 576px) {
    #emf-container #emf-logo { padding-top: 26px; }
    #emf-container #emf-logo::before {
        width: 144px;
        height: 40px;
    }
}

/* Title block: cream band continues from the logo */
#emf-container .emf-head-widget,
#emf-form-instruction {
    margin: 0 calc(var(--gutter) * -1) 28px;
    padding: 14px var(--gutter) 24px;
    background: var(--cream);
    border: 0;
    border-bottom: 1px solid var(--divider);
}

#emf-form-instruction #emf-form-title {
    margin: 0 0 10px;
    font-size: 26px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--kpbs-purple);
}

#emf-form-instruction #emf-form-description {
    width: 100%;
    max-width: none;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
    color: #3d2f45;               /* 10:1 on cream */
}

@media only screen and (min-width: 576px) {
    #emf-form-instruction #emf-form-title { font-size: 32px; }
    #emf-form-instruction #emf-form-description { font-size: 17px; }
}

#emf-form-description br { display: none; }
#emf-form-description small { display: block; margin-top: 12px; font-size: 15px; }
#emf-form-description p { margin: 0 0 15px; }
#emf-form-description ul,
#emf-form-description ol {
    padding-left: 1.25rem;
    margin: 0 0 15px;
}
#emf-form-description li {
    margin-bottom: 8px;
    line-height: 1.5;
}
#emf-form-description strong { font-weight: 700; }
#emf-form-description em { font-style: normal; }
#emf-form-description h1,
#emf-form-description h2,
#emf-form-description h3 {
    margin: 1.5rem 0 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}
#emf-form-description a {
    color: var(--ui);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;       /* older Safari / Samsung fallback */
    overflow-wrap: anywhere;
}
#emf-form-description a:hover { color: var(--ui-dark); }
#emf-form-description mark {
    background-color: #fff9c4;
    padding: 0.1em 0.2em;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   5. Section breaks
   -------------------------------------------------------------------------- */
.emf-section-separator {
    display: none;
}

/* Long bilingual headings: a lighter weight, more line height and a cream
   panel with a marigold bar keep two-language lines easy to read. */
#emf-container li.emf-field-section_break div.emf-div-field-section h3 {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 14px 12px 16px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.005em;
    color: var(--kpbs-purple);
    word-break: break-word;
    overflow-wrap: break-word;
    text-wrap: pretty;            /* progressive: ignored where unsupported */
    background: var(--cream);
    border: 0;
    border-left: 6px solid var(--marigold);
    border-radius: 0 var(--radius) var(--radius) 0;
}

@media only screen and (min-width: 576px) {
    #emf-container li.emf-field-section_break div.emf-div-field-section h3 {
        padding: 14px 20px 14px 18px;
        font-size: 20px;
    }
}

/* First section sits right under the header: no extra top margin */
#emf-container #emf-form > ul > li.emf-field-section_break:first-child div.emf-div-field-section h3 {
    margin-top: 0;
}

/* Section breaks with no heading text (e.g. the closing note) */
#emf-container li.emf-field-section_break div.emf-div-field-section h3:empty {
    display: none;
}

#emf-container li.emf-field-section_break .emf-section-text {
    margin-top: 10px;
    padding: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   6. Labels and helper text
   -------------------------------------------------------------------------- */
#emf-container ul li label.emf-label-desc {
    display: block;
    margin: 0 0 6px;
    padding: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text);
}

/* Required asterisk */
#emf-container ul li label.emf-label-desc span,
#emf-container .emf-required {
    color: var(--error);
}

#emf-container ul li .emf-div-instruction,
#emf-container li .emf-div-field label.emf-bottom-label {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-muted);
    text-align: left;
}

/* --------------------------------------------------------------------------
   7. Text inputs, textarea, select
   -------------------------------------------------------------------------- */
#emf-form input[type="text"],
#emf-form input[type="email"],
#emf-form input[type="password"],
#emf-form input[type="tel"],
#emf-form input[type="number"],
#emf-form input[type="url"],
#emf-form textarea,
#emf-form select,
#emf-form .fake--input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    min-height: 48px;                    /* touch target */
    padding: 11px 12px;
    font-size: 16px;                     /* stops iOS zoom on focus */
    font-weight: 400;
    line-height: 1.5;
    color: #000;
    background-color: var(--field-bg);
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    box-shadow: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}

/* Full-width text fields (keeps the small date/phone boxes their own size) */
#emf-form input[type="text"]:not([class*="emf-input-w"]),
#emf-form input[type="email"],
#emf-form input[type="password"],
#emf-form input[type="tel"]:not([class*="emf-input-w"]),
#emf-form input[type="url"],
#emf-form textarea {
    width: 100% !important;
    max-width: 100%;
}

#emf-form textarea {
    min-height: 140px;
    resize: vertical;
}

#emf-form input::placeholder,
#emf-form textarea::placeholder {
    color: #6b757e;
    opacity: 1;
}

#emf-form input[type="text"]:hover,
#emf-form input[type="email"]:hover,
#emf-form input[type="password"]:hover,
#emf-form input[type="tel"]:hover,
#emf-form input[type="number"]:hover,
#emf-form input[type="url"]:hover,
#emf-form textarea:hover,
#emf-form select:hover,
#emf-form .fake--input:hover {
    border-color: var(--text);
}

#emf-form input[type="text"]:focus,
#emf-form input[type="email"]:focus,
#emf-form input[type="password"]:focus,
#emf-form input[type="tel"]:focus,
#emf-form input[type="number"]:focus,
#emf-form input[type="url"]:focus,
#emf-form textarea:focus,
#emf-form select:focus,
#emf-form .fake--input:focus {
    outline: 2px solid transparent;      /* still shows in Windows High Contrast */
    border-color: var(--ui);
    box-shadow: var(--focus-ring);
}

/* Select keeps its arrow at every width */
#emf-form select {
    width: 100%;
    max-width: 100%;
    padding-right: 40px;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%232e0c44' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px 20px;
}

#emf-form select::-ms-expand { display: none; }

@media only screen and (min-width: 576px) {
    /* Dropdowns don't need the full card width on desktop */
    #emf-form select {
        width: auto;
        min-width: 280px;
    }

    /* ZIP and year fields don't need the full card width either */
    #emf-form .emf-field-number:not(.emf-li-half-width) input[type="text"] {
        max-width: 280px;
    }
}

/* Multi-part fields (name, address) */
.emf-div-field span { padding: 0; }

.emf-div-field > span[style^="width"] {
    display: block;
    width: 100% !important;
    padding: 0;
}

.emf-div-field > span[style^="width"] + span[style^="width"] {
    margin-top: 16px;
}

span[class*="emf-field-new_address"] {
    margin-bottom: 16px;
}

/* Validation (EMF adds these classes on error) */
#emf-form .emf-error-field input,
#emf-form .emf-error-field textarea,
#emf-form .emf-error-field select,
#emf-form input.emf-error,
#emf-form textarea.emf-error {
    border-color: var(--error);
    border-width: 2px;
}

/* --------------------------------------------------------------------------
   8. Date / time / phone
   -------------------------------------------------------------------------- */
/* Keep MM / DD / YYYY and ### ### #### on one line, small labels underneath */
.emf-field-datetime .emf-div-field,
.emf-field-phone .emf-div-field {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    row-gap: 8px;
}

.emf-field-datetime .emf-div-field > .emf-div-instruction,
.emf-field-phone .emf-div-field > .emf-div-instruction {
    flex-basis: 100%;
}

.emf-field-datetime .emf-div-field > span[class^="emf-field-datetime-"],
.emf-field-phone .emf-div-field > span:not(.emf-sep) {
    display: block;
}

.emf-field-datetime .emf-div-field > span[class^="emf-field-datetime-"] label.emf-bottom-label,
.emf-field-phone .emf-div-field > span label.emf-bottom-label {
    display: block;
}

.emf-div-field .emf-sep {
    display: inline-block;
    margin: 0 6px;
    line-height: 48px;
    vertical-align: top;
}

#emf-form .emf-input-w20 { width: 56px; text-align: center; }
#emf-form .emf-input-w30 { width: 64px; text-align: center; }
#emf-form .emf-input-w40 { width: 76px; text-align: center; }

.emf-field-datetime-ampm { margin-left: 16px; }
#emf-form .emf-field-datetime-ampm > select {
    width: auto;
    min-width: 100px;
}

.ui-datepicker-trigger {
    width: 48px;
    height: 48px;
    margin-left: 10px;
    padding: 0 !important;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid var(--field-border);
    border-radius: var(--radius);
    background: #fff url("data:image/svg+xml,%3csvg viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M7.33333 9H10.2667V12H7.33333V9ZM11.7333 9H14.6667V12H11.7333V9ZM16.1333 9H19.0667V12H16.1333V9ZM2.93333 18H5.86667V21H2.93333V18ZM7.33333 18H10.2667V21H7.33333V18ZM11.7333 18H14.6667V21H11.7333V18ZM7.33333 13.5H10.2667V16.5H7.33333V13.5ZM11.7333 13.5H14.6667V16.5H11.7333V13.5ZM16.1333 13.5H19.0667V16.5H16.1333V13.5ZM2.93333 13.5H5.86667V16.5H2.93333V13.5ZM19.0667 0V1.5H16.1333V0H5.86667V1.5H2.93333V0H0V24H22V0H19.0667ZM20.5333 22.5H1.46667V6H20.5333V22.5Z' fill='%232e0c44'/%3e%3c/svg%3e") no-repeat center / 18px;
    transition: border-color var(--ease), box-shadow var(--ease);
}

.ui-datepicker-trigger:hover { border-color: var(--text); }
.ui-datepicker-trigger:focus {
    outline: 2px solid transparent;
    border-color: var(--ui);
    box-shadow: var(--focus-ring);
}

/* --------------------------------------------------------------------------
   9. Checkboxes and radios
   Descendant selectors on purpose: EMF wraps radio inputs in an extra <div>,
   checkboxes sit directly inside the _column div.
   Native input stays in the DOM (keyboard + screen readers work),
   visually replaced by label::before (box) and label::after (mark).
   -------------------------------------------------------------------------- */
#emf-container .emf-field-new_checkbox,
#emf-container .emf-field-radio {
    margin-bottom: 22px;
}

#emf-container .emf-div-field [class$="_column"] {
    float: none;
    width: 100%;
}

#emf-container .emf-field-new_checkbox div[class$="_column"],
#emf-container .emf-field-radio div[class$="_column"] {
    position: relative;
    margin: 0 0 12px;
    padding: 0;
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type="checkbox"],
#emf-container .emf-field-radio div[class$="_column"] input[type="radio"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin: 0;
    padding: 0 !important;
    opacity: 0;
    cursor: pointer;
}

#emf-container .emf-field-new_checkbox div[class$="_column"] label,
#emf-container .emf-field-radio div[class$="_column"] label {
    position: relative;
    display: block;
    min-height: 24px;
    margin: 0;
    padding: 1px 0 0 36px;
    font-size: 16px;
    font-style: normal;
    line-height: 1.45;
    cursor: pointer;
}

/* Box / circle */
#emf-container .emf-field-new_checkbox div[class$="_column"] label::before,
#emf-container .emf-field-radio div[class$="_column"] label::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background-color: #fff;
    border: 2px solid var(--field-border);
    pointer-events: none;
    transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] label::before { border-radius: 5px; }
#emf-container .emf-field-radio div[class$="_column"] label::before { border-radius: 50%; }

/* Mark */
#emf-container .emf-field-new_checkbox div[class$="_column"] label::after,
#emf-container .emf-field-radio div[class$="_column"] label::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--ease);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] label::after {
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") no-repeat center / 15px 15px;
}

#emf-container .emf-field-radio div[class$="_column"] label::after {
    top: 8px;
    left: 8px;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 50%;
}

/* Hover */
#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:hover ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:hover ~ label::before {
    border-color: var(--text);
}

/* Checked */
#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:checked ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:checked ~ label::before {
    background-color: var(--ui);
    border-color: var(--ui);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:checked ~ label::after,
#emf-container .emf-field-radio div[class$="_column"] input[type]:checked ~ label::after {
    opacity: 1;
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:checked ~ label::after {
    background-color: transparent;
    border-radius: 5px;
}

/* Keyboard focus. :focus first for Safari < 15.4 (no :focus-visible),
   then hidden again for mouse clicks where :focus-visible exists. */
#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:focus ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:focus ~ label::before {
    box-shadow: var(--focus-ring);
    border-color: var(--ui);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:focus:not(:focus-visible) ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:focus:not(:focus-visible) ~ label::before {
    box-shadow: none;
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:checked:focus:not(:focus-visible) ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:checked:focus:not(:focus-visible) ~ label::before {
    border-color: var(--ui);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:not(:checked):focus:not(:focus-visible) ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:not(:checked):focus:not(:focus-visible) ~ label::before {
    border-color: var(--field-border);
}

#emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:focus-visible ~ label::before,
#emf-container .emf-field-radio div[class$="_column"] input[type]:focus-visible ~ label::before {
    box-shadow: var(--focus-ring);
    border-color: var(--ui);
}

/* Terms / acknowledgment list: tighter, easier to scan */
#emf-container .emf-field-terms ol,
#emf-container .emf-field-terms ul {
    margin: 8px 0 0;
    padding-left: 1.5rem;
}

#emf-container .emf-field-terms li {
    margin-bottom: 6px;
    line-height: 1.5;
}

/* Terms / acknowledgment checkbox (native): bigger and on-brand */
#emf-form .emf-field-terms input[type="checkbox"] {
    width: 22px;
    height: 22px;
    margin: 0 8px 0 0;
    vertical-align: -5px;
    accent-color: var(--ui);
    cursor: pointer;
}

@media only screen and (min-width: 576px) {
    #emf-container .emf-div-field .three_column { width: 33.333%; float: left; }
    #emf-container .emf-div-field .four_column  { width: 25%; float: left; }
}

/* --------------------------------------------------------------------------
   10. Grid (matrix) field
   -------------------------------------------------------------------------- */
#emf-container .emf-field-grid {
    border: none;
    border-style: hidden;
    border-radius: var(--radius);
    box-shadow: 0 0 0 1px var(--divider);
}

#emf-container .emf-field-grid th,
#emf-container .emf-field-grid td {
    padding: 10px 16px;
    border-color: var(--divider);
    color: var(--text);
}

.emf-banding-head { background: var(--cream); }
.emf-banding-odd,
.emf-banding-even { background: none; }

.emf-field-grid thead td,
.emf-field-grid thead th { font-weight: 700; }

#emf-container .emf-field-grid tbody tr:hover {
    background: var(--cream-light);
    transition: background-color var(--ease);
}

#emf-container .emf-field-grid input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    cursor: pointer;
    background: #fff;
    border: 2px solid var(--field-border);
    border-radius: 50%;
    transition: border-color var(--ease), box-shadow var(--ease);
}

#emf-container .emf-field-grid input[type="radio"]:hover { border-color: var(--text); }
#emf-container .emf-field-grid input[type="radio"]:checked { border: 7px solid var(--ui); }
#emf-container .emf-field-grid input[type="radio"]:focus:not(:focus-visible) { outline: none; }
#emf-container .emf-field-grid input[type="radio"]:focus-visible { box-shadow: var(--focus-ring); }

/* --------------------------------------------------------------------------
   11. List field
   -------------------------------------------------------------------------- */
.emf-field-list {
    border-radius: var(--radius);
    border-style: hidden;
}

#emf-form .emf-field-list th {
    padding: 10px 10px 8px;
    border: none;
    font-size: 14px;
}

#emf-form .emf-field-list td {
    padding: 0 0 16px;
    border: none;
    border-bottom: 1px solid #ebedf0;
}

#emf-form .emf-field-list tr:last-of-type td { border-bottom: none; }
#emf-container .emf-field-list tbody tr:hover { background: none; }

/* --------------------------------------------------------------------------
   12. File upload (single native input, used if a form has one)
   ::file-selector-button: Chrome 89+, Edge 89+, Firefox 82+, Safari 14.1+
   ::-webkit-file-upload-button: fallback for older Safari / Samsung Internet
   -------------------------------------------------------------------------- */
#emf-form input[type="file"] {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 64px;
    margin: 0;
    padding: 14px;
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.4;
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
    background-color: var(--marigold-tint);
    border: 2px dashed #b07612;
    border-radius: var(--radius);
    transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

#emf-form input[type="file"]:hover {
    background-color: #ffedcc;
    border-color: var(--ui);
}

#emf-form input[type="file"]:focus:not(:focus-visible) {
    outline: none;
}

#emf-form input[type="file"]:focus-visible {
    border-color: var(--ui);
    box-shadow: var(--focus-ring);
}

#emf-form input[type="file"]::file-selector-button {
    margin: 0 14px 0 0;
    padding: 10px 18px 10px 40px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-dark);
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232e0c44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v4h16v-4'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px;
    border: 2px solid var(--ui);
    border-radius: var(--radius);
    transition: background-color var(--ease), color var(--ease);
}

#emf-form input[type="file"]::-webkit-file-upload-button {
    margin: 0 14px 0 0;
    padding: 10px 18px 10px 40px;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 700;
    color: var(--ui-dark);
    cursor: pointer;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232e0c44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v4h16v-4'/%3E%3C/svg%3E") no-repeat 14px center / 18px 18px;
    border: 2px solid var(--ui);
    border-radius: var(--radius);
}

#emf-form input[type="file"]:hover::file-selector-button {
    color: #fff;
    background-color: var(--ui);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v4h16v-4'/%3E%3C/svg%3E");
}

#emf-container .emf-field-file .emf-div-instruction {
    margin-top: 8px;
}

/* Phones: button on its own line so the file name has room */
@media only screen and (max-width: 420px) {
    #emf-form input[type="file"]::file-selector-button {
        display: block;
        width: 100%;
        margin: 0 0 8px;
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   12b. EMF multi-file upload widget ("Add File")
   Markup: .emf-upload-widget > .emf-upload-button > a + input[type=file]
   The file input is an invisible overlay; the button is the drop zone.
   Button is left aligned, with a short drag-and-drop hint beside it.
   -------------------------------------------------------------------------- */
#emf-form .emf-upload-widget {
    width: 100%;
}

#emf-form .emf-upload-widget .emf-upload-button {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 8px 14px;
    width: 100%;
    min-height: 84px;
    padding: 18px 16px;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    background-color: var(--marigold-tint);
    background-image: none;
    border: 2px dashed #b07612;          /* 3.6:1 on the tint */
    border-radius: var(--radius);
    transition: background-color var(--ease), border-color var(--ease), box-shadow var(--ease);
}

#emf-form .emf-upload-widget .emf-upload-button a {
    position: relative;
    z-index: 0;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 10px 18px;
    font-family: var(--font);
    font-size: 16px;
    font-weight: 700;
    color: var(--ui-dark);
    text-decoration: none;
    background: #fff;
    border: 2px solid var(--ui);
    border-radius: var(--radius);
    pointer-events: none;                /* clicks go to the overlay input */
    transition: background-color var(--ease), color var(--ease);
}

#emf-form .emf-upload-widget .emf-upload-button a::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%232e0c44' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4M7 9l5-5 5 5M4 16v4h16v-4'/%3E%3C/svg%3E") no-repeat center / 18px 18px;
}

/* Drag-and-drop hint (desktop only; phones tap the button) */
#emf-form .emf-upload-widget .emf-upload-button::after {
    content: none;
}

@media only screen and (min-width: 576px) and (hover: hover) {
    #emf-form .emf-upload-widget .emf-upload-button::after {
        content: "or drag a file here / o arrastra un archivo aqu\00ed";
        font-size: 14px;
        line-height: 1.4;
        color: var(--text-muted);
    }
}

/* The real input covers the whole drop zone (click or drag a file onto it) */
#emf-form .emf-upload-widget .emf-upload-button input[type="file"] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    font-size: 16px;
    cursor: pointer;
    opacity: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

#emf-form .emf-upload-widget .emf-upload-button:hover {
    background-color: #ffedcc;
    border-color: var(--ui);
}

#emf-form .emf-upload-widget .emf-upload-button:hover a {
    color: #fff;
    background-color: var(--ui);
}

#emf-form .emf-upload-widget .emf-upload-button:hover a::before {
    filter: brightness(0) invert(1);
}

/* Keyboard focus lands on the hidden input: show it on the drop zone */
#emf-form .emf-upload-widget .emf-upload-button:focus-within {
    border-style: solid;
    border-color: var(--ui);
    box-shadow: var(--focus-ring);
}

/* Uploaded file list */
#emf-form .emf-upload-files-container:not(:empty) {
    margin-top: 10px;
    font-size: 15px;
}

#emf-form .emf-upload-files-container > * {
    padding: 8px 12px;
    margin-bottom: 6px;
    background: #fff;
    border: 1px solid var(--divider);
    border-left: 4px solid var(--strip-teal);
    border-radius: var(--radius);
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   12c. Name (First / Last) and number fields
   -------------------------------------------------------------------------- */
#emf-container .emf-field-new_name .emf-div-field {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 16px;
}

#emf-container .emf-field-new_name .emf-div-field > span[style^="width"] {
    flex: 1 1 200px;
    width: auto !important;
    margin: 0;
}

#emf-container .emf-field-new_name .emf-div-field > span[style^="width"] + span[style^="width"] {
    margin-top: 0;
}

#emf-container .emf-field-new_name .emf-div-field > .emf-div-instruction {
    flex-basis: 100%;
    margin-top: 0;
}

/* EMF centers First/Last under the boxes; left-align reads better */
#emf-container .emf-field-new_name label.emf-bottom-label {
    display: block;
    text-align: left !important;
}

/* --------------------------------------------------------------------------
   13. Captcha
   -------------------------------------------------------------------------- */
#emf-container #emf-li-recaptcha {
    margin: 0;
    padding: 0;
    clear: none;
}

/* Very small phones: slightly narrower date boxes and calendar button */
@media only screen and (max-width: 359px) {
    #emf-form .emf-input-w20 { width: 50px; }
    #emf-form .emf-input-w30 { width: 58px; }
    #emf-form .emf-input-w40 { width: 68px; }
    .emf-div-field .emf-sep { margin: 0 4px; }
    .ui-datepicker-trigger { margin-left: 6px; }

    #rc-imageselect,
    .g-recaptcha {
        -webkit-transform: scale(0.85);
        transform: scale(0.85);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
    }
}

/* --------------------------------------------------------------------------
   14. Submit button (orange CTA from the altar page)
   -------------------------------------------------------------------------- */
#emf-container #emf-li-post-button {
    margin: 20px 0 0;
    padding: 0;
    text-align: left;
}

/* Two IDs + !important on the text color: EMF's base sheet and older
   themes set their own button text color on hover, which turned it black. */
#emf-container #emf-li-post-button input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: inline-block;
    width: 100%;                          /* full width on phones */
    min-height: 52px;
    margin: 0;
    padding: 14px 56px 14px 24px;
    font-family: var(--font);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    text-align: left;
    text-shadow: none;
    color: #fff !important;
    -webkit-text-fill-color: #fff;        /* iOS Safari keeps white text */
    cursor: pointer;
    background-color: var(--cta);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='14' viewBox='0 0 24 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 8h21M15 1l7 7-7 7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 22px center;
    background-size: 19px 14px;
    border: 3px solid var(--marigold);
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(150, 50, 10, 0.25);
    -webkit-transition: background-color 0.2s ease, background-position 0.2s ease, box-shadow 0.2s ease;
    transition: background-color 0.2s ease, background-position 0.2s ease, box-shadow 0.2s ease;
}

@media only screen and (min-width: 576px) {
    #emf-container #emf-li-post-button input[type="submit"] {
        width: auto;
        min-width: 240px;
    }
}

/* Hover / active: background gets darker, text and arrow stay white */
#emf-container #emf-li-post-button input[type="submit"]:hover,
#emf-container #emf-li-post-button input[type="submit"]:focus,
#emf-container #emf-li-post-button input[type="submit"]:active {
    color: #fff !important;
    -webkit-text-fill-color: #fff;
}

#emf-container #emf-li-post-button input[type="submit"]:hover,
#emf-container #emf-li-post-button input[type="submit"]:active {
    background-color: var(--cta-hover);
    border-color: var(--marigold);
}

#emf-container #emf-li-post-button input[type="submit"]:hover {
    background-position: right 16px center;   /* arrow nudges forward */
    box-shadow: 0 6px 16px rgba(150, 50, 10, 0.32);
}

#emf-container #emf-li-post-button input[type="submit"]:active {
    background-color: #9c2a0b;
    box-shadow: 0 2px 6px rgba(150, 50, 10, 0.2);
}

#emf-container #emf-li-post-button input[type="submit"]:focus:not(:focus-visible) {
    outline: none;
}

#emf-container #emf-li-post-button input[type="submit"]:focus-visible {
    background-color: var(--cta-hover);
    outline: 3px solid var(--ui-dark);
    outline-offset: 3px;
}

#emf-container #emf-li-post-button input[type="submit"]:disabled {
    cursor: progress;
    opacity: 0.7;
}

/* "Save & Resume Later" and other links in the form */
#emf-container a:focus-visible {
    outline: 2px solid var(--ui);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --------------------------------------------------------------------------
   15. Thank-you / splash page
   -------------------------------------------------------------------------- */
#outer-after-post,
#outer-after-splash {
    width: calc(100% - 32px);
    max-width: 640px;
    margin: 40px auto 0;
    padding: 24px;
    font-family: var(--font);
    color: var(--text);
    text-align: left;
    background: var(--cream);
    border: 2px solid var(--marigold);
    border-radius: 12px;
    box-shadow: none;
}

/* --------------------------------------------------------------------------
   16. Accessibility preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #emf-container *,
    #emf-container *::before,
    #emf-container *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* Windows High Contrast / forced colors: keep borders, focus and logo visible */
@media (forced-colors: active) {
    #emf-container .emf-field-new_checkbox div[class$="_column"] label::before,
    #emf-container .emf-field-radio div[class$="_column"] label::before {
        border-color: CanvasText;
    }

    #emf-container .emf-field-new_checkbox div[class$="_column"] input[type]:checked ~ label::before,
    #emf-container .emf-field-radio div[class$="_column"] input[type]:checked ~ label::before {
        background-color: Highlight;
        border-color: Highlight;
    }

    #emf-container #emf-logo::before {
        forced-color-adjust: none;
    }

    #emf-container #emf-li-post-button input[type="submit"] {
        border: 2px solid ButtonText;
    }
}