@charset "utf-8";

/* ==========================================================================
   WHAT? CORE UI
   Pass 4.1 — CSS-only correction
   03 October 2026

   PURPOSE
   --------------------------------------------------------------------------
   Shared visual layer for WHAT? public interfaces.

   IMPORTANT
   - entry.css remains loaded for legacy functional/accessibility behaviour.
   - what-core.css loads AFTER entry.css and controls presentation.
   - No JavaScript hooks, IDs, names, values or DOM structure are changed here.
   - Vertical-specific imagery can be changed without changing the core UI.
   ========================================================================== */


/* ==========================================================================
   1. WHAT DESIGN TOKENS
   ========================================================================== */

:root {

    /* CHG */
    --what-purple: #14001F;
    --what-purple-soft: #3C0054;

    --what-gold: #B89A5A;
    --what-gold-light: #E2CB85;

    --what-red: #E5183F;

    /* Warm WHAT neutral palette */
    --what-text: #20162A;
    --what-muted: #766C78;

    --what-surface: #F5F0E7;
    --what-surface-soft: #EDE4D6;
    --what-field: #FFFCF6;
    --what-border: #CDBD9D;

    /* Translucent surfaces */
    --what-panel: rgba(245, 240, 231, 0.94);
    --what-panel-soft: rgba(237, 228, 214, 0.72);

    /* Header */
    --what-header-text: #FFFFFF;

    /* Layout */
    --what-width: 70%;
    --what-max-width: 1240px;
    --what-min-width: 0;

    --what-radius: 12px;
    --what-field-radius: 7px;

    /* Vertical-specific hero/background image */
    --what-background-image:
        url("https://www.carlhenryglobal.com/images/what/events/01-WHAT-Restaurant-With-People.jpg");

}


/* ==========================================================================
   2. GLOBAL RESET / PAGE FOUNDATION
   ========================================================================== */

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
    background: var(--what-purple);
}

body {
    min-height: 100vh;
    margin: 0 !important;
    padding: 0 !important;

    color: var(--what-text);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background-color: var(--what-purple) !important;

    background-image: var(--what-background-image) !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}


/*
   IMPORTANT:
   Do NOT place a dark pseudo-element over the body.
   We want to see the original Monaco image.
*/

body::before,
body::after {
    display: none !important;
    content: none !important;
}


/* Consistent box sizing */

*,
*::before,
*::after {
    box-sizing: border-box;
}


/* ==========================================================================
   3. LINKS
   ========================================================================== */

a {
    color: var(--what-gold-light);
}

a:hover,
a:focus {
    color: #FFFFFF;
}


/* ==========================================================================
   4. TOP HEADER / BRAND BAR
   ========================================================================== */

/*
   The header is intentionally transparent.
   The background photograph remains visible through it.
*/

.what-header,
.entry-header,
header {
    width: 100% !important;

    margin: 0 !important;

    padding:
        6px
        max(5%, 24px) !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    position: relative;
    z-index: 20;
}


/* Header inner container */

.what-header-inner,
.entry-header-inner,
header .inner {
    width: var(--what-width) !important;
    max-width: var(--what-max-width) !important;

    margin: 0 auto !important;

    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;

    gap: 20px;
}


/* ==========================================================================
   5. CHG LOGO
   ========================================================================== */

.what-logo,
.entry-logo,
header .logo,
header img {
    display: block;

    width: auto !important;
    max-width: 105px !important;
    height: auto !important;

    margin: 0 !important;
    padding: 0 !important;
}


/*
   If the logo itself is inside a link, remove any legacy button/background
   treatment inherited from entry.css.
*/

.what-logo-link,
.entry-logo-link,
header a:has(img) {
    display: inline-block;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


/* ==========================================================================
   6. LANGUAGE NAVIGATION
   ========================================================================== */

.what-languages,
.entry-languages,
.language-links,
nav.languages {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;

    flex-wrap: wrap;

    gap: 9px;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
    border: 0 !important;
}


/* Language links */

.what-languages a,
.entry-languages a,
.language-links a,
nav.languages a {
    display: inline-flex !important;
    align-items: center !important;

    gap: 5px;

    color: var(--what-gold-light) !important;

    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    text-decoration: underline;

    margin: 0 !important;
    padding: 2px 0 !important;

    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}


.what-languages a:hover,
.what-languages a:focus,
.entry-languages a:hover,
.entry-languages a:focus,
.language-links a:hover,
.language-links a:focus,
nav.languages a:hover,
nav.languages a:focus {
    color: #FFFFFF !important;
}


/* Language flags */

.what-languages img,
.entry-languages img,
.language-links img,
nav.languages img {
    display: inline-block;

    width: 18px !important;
    height: auto !important;

    margin: 0 !important;

    vertical-align: middle;
}


/* ==========================================================================
   7. HERO / QUESTION AREA
   ========================================================================== */

/*
   No gradient.
   No dark overlay.
   No solid purple box.

   The hero exists directly over the background photograph.
*/

.what-hero,
.entry-hero,
.hero {
    width: 100% !important;

    margin: 0 !important;

    padding:
        14px
        5%
        16px !important;

    text-align: center;

    color: #FFFFFF !important;

    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;

    position: relative;
    z-index: 10;
}


/* Neutralise any pseudo-element legacy overlays */

.what-hero::before,
.what-hero::after,
.entry-hero::before,
.entry-hero::after,
.hero::before,
.hero::after {
    content: none !important;
    display: none !important;
}


/* Hero title */

.what-hero h1,
.entry-hero h1,
.hero h1,
h1.what-title {
    max-width: 980px;

    margin:
        0 auto
        5px !important;

    padding: 0 !important;

    color: #FFFFFF !important;

    font-size: clamp(30px, 3vw, 50px);
    font-weight: 700;
    line-height: 1.03;

    text-align: center;

    /*
       Very light shadow only.
       Enough separation without hiding the image.
    */
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85);

    background: transparent !important;
    border: 0 !important;
}


/* Hero supporting line */

.what-hero p,
.entry-hero p,
.hero p,
.what-subtitle {
    max-width: 850px;

    margin: 0 auto !important;
    padding: 0 !important;

    color: #FFFFFF !important;

    font-size: clamp(15px, 1.25vw, 19px);
    font-weight: 400;
    line-height: 1.35;

    text-align: center;

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.9);

    background: transparent !important;
}


/* ==========================================================================
   8. MAIN PAGE CONTAINER
   ========================================================================== */

.what-main,
.entry-main,
main {
    width: var(--what-width) !important;
    max-width: var(--what-max-width) !important;

    margin: 0 auto !important;

    padding:
        8px
        0
        22px !important;

    background: transparent !important;

    position: relative;
    z-index: 10;
}


/* ==========================================================================
   9. MAIN FORM CARD
   ========================================================================== */

.what-form,
.entry-form,
form {
    width: 100% !important;

    margin:
        0 auto
        14px !important;

    padding:
        16px
        18px !important;

    color: var(--what-text) !important;

    background: var(--what-panel) !important;
    background-color: var(--what-panel) !important;
    background-image: none !important;

    border:
        1px solid
        rgba(205, 189, 157, 0.85) !important;

    border-radius: var(--what-radius) !important;

    box-shadow:
        0 8px 28px rgba(20, 0, 31, 0.20) !important;

    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}


/* ==========================================================================
   10. LABELS
   ========================================================================== */

form label,
.what-form label,
.entry-form label {
    display: block;

    margin:
        0
        0
        4px !important;

    padding: 0 !important;

    color: var(--what-text) !important;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    background: transparent !important;
}


/* ==========================================================================
   11. INPUTS / SELECTS / TEXTAREAS
   ========================================================================== */

form input[type="text"],
form input[type="email"],
form input[type="url"],
form input[type="tel"],
form input[type="number"],
form input[type="date"],
form select,
form textarea,

.what-form input[type="text"],
.what-form input[type="email"],
.what-form input[type="url"],
.what-form input[type="tel"],
.what-form input[type="number"],
.what-form input[type="date"],
.what-form select,
.what-form textarea,

.entry-form input[type="text"],
.entry-form input[type="email"],
.entry-form input[type="url"],
.entry-form input[type="tel"],
.entry-form input[type="number"],
.entry-form input[type="date"],
.entry-form select,
.entry-form textarea {

    width: 100% !important;

    margin: 0 !important;

    padding:
        9px
        11px !important;

    color: var(--what-text) !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;

    background: var(--what-field) !important;
    background-color: var(--what-field) !important;
    background-image: none;

    border:
        1px solid
        var(--what-border) !important;

    border-radius:
        var(--what-field-radius) !important;

    box-shadow: none !important;

    outline: none;

    min-height: 38px;
}


/* Focus state */

form input:focus,
form select:focus,
form textarea:focus,
.what-form input:focus,
.what-form select:focus,
.what-form textarea:focus,
.entry-form input:focus,
.entry-form select:focus,
.entry-form textarea:focus {
    border-color: var(--what-gold) !important;

    box-shadow:
        0 0 0 2px
        rgba(184, 154, 90, 0.20) !important;
}


/* ==========================================================================
   12. COMPACT MULTI-LINE FIELDS
   ========================================================================== */

/*
   The fields remain TEXTAREAS and therefore retain multi-line functionality,
   but visually begin at approximately one-line height.

   Users can still drag the resize handle if their browser permits it.
*/

form textarea,
.what-form textarea,
.entry-form textarea {
    min-height: 44px !important;
    height: 44px;

    resize: vertical;

    line-height: 1.35;
}


/*
   The event description can grow if required but starts compact.
*/

#description,
#event-description,
textarea[name="description"],
textarea[name="event_description"] {
    min-height: 52px !important;
    height: 52px;
}


/*
   Special requirements starts essentially as a single-line textarea.
*/

#special-requirements,
#special_requirements,
textarea[name="special_requirements"] {
    min-height: 42px !important;
    height: 42px;
}


/* ==========================================================================
   13. FIELD GROUP SPACING
   ========================================================================== */

.form-group,
.field,
.what-field,
.entry-field {
    margin:
        0
        0
        10px !important;

    padding: 0 !important;

    background: transparent !important;
}


/* ==========================================================================
   14. TWO / THREE / FOUR COLUMN LAYOUTS
   ========================================================================== */

/*
   Preserve whatever semantic/functional wrappers the application uses,
   while tightening the presentation.
*/

.form-row,
.what-row,
.entry-row,
.fields-row {
    display: grid !important;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        10px
        12px !important;

    margin:
        0
        0
        10px !important;

    padding: 0 !important;

    background: transparent !important;
}


/* Three columns */

.form-row.three,
.what-row.three,
.entry-row.three,
.fields-row.three {
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
}


/* Four columns */

.form-row.four,
.what-row.four,
.entry-row.four,
.fields-row.four {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
}


/* ==========================================================================
   15. FIELDSETS
   ========================================================================== */

form fieldset,
.what-form fieldset,
.entry-form fieldset {
    min-width: 0;

    margin:
        8px
        0
        10px !important;

    padding:
        10px
        12px
        11px !important;

    color: var(--what-text) !important;

    background: var(--what-panel-soft) !important;
    background-color: var(--what-panel-soft) !important;
    background-image: none !important;

    border:
        1px solid
        rgba(205, 189, 157, 0.92) !important;

    border-radius:
        var(--what-field-radius) !important;

    box-shadow: none !important;
}


/* Fieldset titles */

form legend,
.what-form legend,
.entry-form legend {
    margin: 0 !important;

    padding:
        0
        7px !important;

    color: var(--what-text) !important;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;

    background: transparent !important;
}


/* ==========================================================================
   16. HELP / HINT TEXT
   ========================================================================== */

.help-text,
.hint,
.form-hint,
small,
.what-help,
.entry-help {
    display: block;

    margin:
        3px
        0
        0 !important;

    padding: 0 !important;

    color: var(--what-muted) !important;

    font-size: 12px;
    font-weight: 400;
    line-height: 1.25;

    background: transparent !important;
}


/* ==========================================================================
   17. CHECKBOXES
   ========================================================================== */

form input[type="checkbox"],
.what-form input[type="checkbox"],
.entry-form input[type="checkbox"] {
    width: 17px !important;
    height: 17px !important;

    min-height: 0 !important;

    margin:
        0
        7px
        0
        0 !important;

    padding: 0 !important;

    accent-color: var(--what-gold);
}


.checkbox-row,
.what-checkbox,
.entry-checkbox {
    display: flex !important;
    align-items: center !important;

    gap: 4px;

    margin:
        7px
        0
        0 !important;

    padding: 0 !important;

    background: transparent !important;
}


.checkbox-row label,
.what-checkbox label,
.entry-checkbox label {
    display: inline !important;

    margin: 0 !important;

    font-weight: 600;
}


/* ==========================================================================
   18. PRIMARY ACTION BUTTON
   ========================================================================== */

form button[type="submit"],
.what-primary-button,
.entry-primary-button,
button.primary {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    min-height: 40px;

    margin:
        6px
        0
        0 !important;

    padding:
        10px
        18px !important;

    color: #FFFFFF !important;

    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;

    text-decoration: none;

    background: var(--what-red) !important;
    background-color: var(--what-red) !important;
    background-image: none !important;

    border:
        1px solid
        var(--what-red) !important;

    border-radius: 7px !important;

    box-shadow:
        0 4px 12px
        rgba(229, 24, 63, 0.20) !important;

    cursor: pointer;
}


form button[type="submit"]:hover,
form button[type="submit"]:focus,
.what-primary-button:hover,
.what-primary-button:focus,
.entry-primary-button:hover,
.entry-primary-button:focus {
    filter: brightness(1.06);

    box-shadow:
        0 5px 15px
        rgba(229, 24, 63, 0.30) !important;
}


/* Disabled / sending */

form button[type="submit"]:disabled,
.what-primary-button:disabled,
.entry-primary-button:disabled {
    opacity: 0.58;

    cursor: wait;
}


/* ==========================================================================
   19. STATUS / VALIDATION MESSAGES
   ========================================================================== */

.status,
.form-status,
.what-status,
.entry-status,
[role="status"] {
    margin:
        7px
        0 !important;

    padding: 0 !important;

    color: var(--what-text) !important;

    font-size: 14px;
    line-height: 1.35;

    background: transparent !important;
    border: 0 !important;
}


/* Errors */

.error,
.form-error,
.what-error,
.entry-error,
[aria-invalid="true"] + .error {
    color: #9E1730 !important;
}


/* ==========================================================================
   20. POST-FORM HUMAN HELP AREA
   ========================================================================== */

.what-help-section,
.entry-help-section,
.help-section,
.secondary-actions {
    width: var(--what-width) !important;
    max-width: var(--what-max-width) !important;

    margin:
        0 auto
        14px !important;

    padding:
        8px
        0 !important;

    color: #FFFFFF;

    background: transparent !important;
    border: 0 !important;
}


/* Heading */

.what-help-section h2,
.what-help-section h3,
.entry-help-section h2,
.entry-help-section h3,
.help-section h2,
.help-section h3,
.secondary-actions h2,
.secondary-actions h3 {
    margin:
        0
        0
        8px !important;

    padding: 0 !important;

    color: var(--what-gold-light) !important;

    font-size: clamp(19px, 1.6vw, 25px);
    font-weight: 700;
    line-height: 1.2;

    text-shadow:
        0 1px 2px
        rgba(0, 0, 0, 0.85);

    background: transparent !important;
}


/* Secondary buttons */

.what-help-section button,
.entry-help-section button,
.help-section button,
.secondary-actions button {
    margin:
        0
        8px
        7px
        0 !important;

    padding:
        10px
        16px !important;

    min-height: 38px;

    color: var(--what-purple) !important;

    font-size: 14px;
    font-weight: 700;

    background: var(--what-gold-light) !important;
    background-color: var(--what-gold-light) !important;
    background-image: none !important;

    border:
        1px solid
        var(--what-gold) !important;

    border-radius: 6px !important;

    box-shadow: none !important;
}


/* Disabled secondary buttons */

.what-help-section button:disabled,
.entry-help-section button:disabled,
.help-section button:disabled,
.secondary-actions button:disabled {
    opacity: 0.72;

    cursor: not-allowed;
}


/* ==========================================================================
   21. FOOTER / BOTTOM LINKS
   ========================================================================== */

.what-footer,
.entry-footer,
footer {
    width: var(--what-width) !important;
    max-width: var(--what-max-width) !important;

    margin: 0 auto !important;

    padding:
        4px
        0
        24px !important;

    color: var(--what-gold-light);

    background: transparent !important;
    border: 0 !important;
}


.what-footer a,
.entry-footer a,
footer a {
    color: var(--what-gold-light) !important;

    font-size: 13px;
}


/* ==========================================================================
   22. AGGRESSIVE LEGACY ENTRY.CSS PRESENTATION NEUTRALISATION
   ========================================================================== */

/*
   These rules deliberately remove common legacy visual treatments while
   leaving semantic HTML, visibility, focusability and functional behaviour
   intact.
*/

.entry-shell,
.entry-page,
.entry-content,
.entry-container,
.page-shell,
.page-container,
.content-wrapper {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border-color: transparent;

    box-shadow: none !important;
}


/*
   Do NOT globally remove outlines.
   Keyboard accessibility must remain visible.
*/

:focus-visible {
    outline:
        2px solid
        var(--what-gold-light) !important;

    outline-offset: 2px;
}


/* ==========================================================================
   23. RESPONSIVE — LARGE TABLET / SMALL DESKTOP
   ========================================================================== */

@media (max-width: 1200px) {

    :root {
        --what-width: 82%;
    }

}


/* ==========================================================================
   24. RESPONSIVE — TABLET
   ========================================================================== */

@media (max-width: 900px) {

    :root {
        --what-width: 92%;
    }


    body {
        background-attachment: scroll !important;
    }


    .what-header,
    .entry-header,
    header {
        padding:
            7px
            4% !important;
    }


    .what-header-inner,
    .entry-header-inner,
    header .inner {
        width: 100% !important;
    }


    .what-logo,
    .entry-logo,
    header .logo,
    header img {
        max-width: 90px !important;
    }


    .what-hero,
    .entry-hero,
    .hero {
        padding:
            14px
            4%
            15px !important;
    }


    .what-hero h1,
    .entry-hero h1,
    .hero h1,
    h1.what-title {
        font-size: clamp(29px, 6vw, 43px);
    }


    .form-row.four,
    .what-row.four,
    .entry-row.four,
    .fields-row.four {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


/* ==========================================================================
   25. RESPONSIVE — MOBILE
   ========================================================================== */

@media (max-width: 640px) {

    :root {
        --what-width: 94%;
    }


    .what-header-inner,
    .entry-header-inner,
    header .inner {
        align-items: flex-start !important;

        gap: 12px;
    }


    .what-logo,
    .entry-logo,
    header .logo,
    header img {
        max-width: 76px !important;
    }


    .what-languages,
    .entry-languages,
    .language-links,
    nav.languages {
        gap: 6px;
    }


    .what-languages a,
    .entry-languages a,
    .language-links a,
    nav.languages a {
        font-size: 12px;
    }


    .what-languages img,
    .entry-languages img,
    .language-links img,
    nav.languages img {
        width: 15px !important;
    }


    .what-hero,
    .entry-hero,
    .hero {
        padding:
            10px
            4%
            13px !important;
    }


    .what-hero h1,
    .entry-hero h1,
    .hero h1,
    h1.what-title {
        margin-bottom: 5px !important;

        font-size: clamp(27px, 8vw, 38px);
        line-height: 1.02;
    }


    .what-hero p,
    .entry-hero p,
    .hero p,
    .what-subtitle {
        font-size: 14px;
    }


    .what-main,
    .entry-main,
    main {
        padding-top: 5px !important;
    }


    .what-form,
    .entry-form,
    form {
        padding:
            13px
            12px !important;

        border-radius: 9px !important;
    }


    .form-row,
    .what-row,
    .entry-row,
    .fields-row,

    .form-row.three,
    .what-row.three,
    .entry-row.three,
    .fields-row.three,

    .form-row.four,
    .what-row.four,
    .entry-row.four,
    .fields-row.four {
        grid-template-columns:
            1fr !important;

        gap: 8px !important;
    }


    form fieldset,
    .what-form fieldset,
    .entry-form fieldset {
        padding:
            9px
            10px !important;
    }


    form input[type="text"],
    form input[type="email"],
    form input[type="url"],
    form input[type="tel"],
    form input[type="number"],
    form input[type="date"],
    form select,
    form textarea {
        font-size: 16px;

        /*
           16px prevents unwanted automatic zoom on many mobile browsers.
        */
    }


    .what-help-section,
    .entry-help-section,
    .help-section,
    .secondary-actions {
        padding-top: 5px !important;
    }

}


/* ==========================================================================
   26. VERY SMALL MOBILE
   ========================================================================== */

@media (max-width: 420px) {

    .what-header-inner,
    .entry-header-inner,
    header .inner {
        flex-direction: column !important;
    }


    .what-languages,
    .entry-languages,
    .language-links,
    nav.languages {
        justify-content: flex-start !important;
    }


    .what-hero h1,
    .entry-hero h1,
    .hero h1,
    h1.what-title {
        font-size: 29px;
    }


    form button[type="submit"],
    .what-primary-button,
    .entry-primary-button,
    button.primary {
        width: 100%;
    }

}


/* ==========================================================================
   END — WHAT? CORE UI PASS 4.1
   ========================================================================== */
   
   /* ==========================================================================
   WHAT? CORE UI
   Pass 4.2 — Visual Refinement
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. HEADER — FULLY TRANSPARENT
   Remove any remaining blue / navy legacy header presentation.
   -------------------------------------------------------------------------- */

.what-header,
.entry-header,
header,
.what-header-inner,
.entry-header-inner,
header .inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* Also neutralise likely legacy header wrappers */

.entry-topbar,
.topbar,
.site-header,
.page-header,
.header-bar,
.header-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   2. DARKER CHAMPAGNE PALETTE
   Less grey / white, more warm champagne.
   -------------------------------------------------------------------------- */

:root {

    /* Main form surface */
    --what-surface: #E8D9BF;

    /* Group / fieldset surface */
    --what-surface-soft: #DCC8A7;

    /* Input fields */
    --what-field: #FFF9EE;

    /* Borders */
    --what-border: #BDA578;

    /* Main translucent form */
    --what-panel: rgba(232, 217, 191, 0.90);

    /* Fieldset translucent surface */
    --what-panel-soft: rgba(220, 200, 167, 0.58);

    /* Muted copy */
    --what-muted: #665B64;
}


/* Reinforce champagne form */

.what-form,
.entry-form,
form {
    background:
        rgba(232, 217, 191, 0.90) !important;

    border:
        1px solid
        rgba(189, 165, 120, 0.90) !important;
}


/* Fieldsets */

form fieldset,
.what-form fieldset,
.entry-form fieldset {
    background:
        rgba(220, 200, 167, 0.58) !important;

    border:
        1px solid
        rgba(189, 165, 120, 0.85) !important;
}


/* --------------------------------------------------------------------------
   3. EXPLICITLY CENTRE MAIN FORM
   -------------------------------------------------------------------------- */

.what-main,
.entry-main,
main {
    width: 100% !important;
    max-width: none !important;

    margin-left: auto !important;
    margin-right: auto !important;

    padding-left: 0 !important;
    padding-right: 0 !important;
}


.what-form,
.entry-form,
main form {
    width: 70% !important;
    max-width: 1240px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Keep help section aligned with form */

.what-help-section,
.entry-help-section,
.help-section,
.secondary-actions {
    width: 70% !important;
    max-width: 1240px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* Footer follows same visual axis */

.what-footer,
.entry-footer,
footer {
    width: 70% !important;
    max-width: 1240px !important;

    margin-left: auto !important;
    margin-right: auto !important;
}


/* --------------------------------------------------------------------------
   4. DISABLED SUBMIT BUTTON
   Do NOT force it clickable with CSS.

   JavaScript currently controls whether the button is available.
   Remove the misleading hourglass cursor.
   -------------------------------------------------------------------------- */

form button[type="submit"]:disabled,
.what-primary-button:disabled,
.entry-primary-button:disabled {

    opacity: 0.70 !important;

    cursor: not-allowed !important;

    background: var(--what-red) !important;
    background-color: var(--what-red) !important;

    color: #FFFFFF !important;

    filter: none !important;

    box-shadow:
        0 3px 10px
        rgba(229, 24, 63, 0.15) !important;
}


/* Enabled submit button */

form button[type="submit"]:not(:disabled),
.what-primary-button:not(:disabled),
.entry-primary-button:not(:disabled) {

    opacity: 1 !important;

    cursor: pointer !important;

    background: var(--what-red) !important;

    color: #FFFFFF !important;
}


/* --------------------------------------------------------------------------
   5. MOBILE / TABLET CENTRING
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {

    .what-form,
    .entry-form,
    main form,

    .what-help-section,
    .entry-help-section,
    .help-section,
    .secondary-actions,

    .what-footer,
    .entry-footer,
    footer {
        width: 82% !important;
    }

}


@media (max-width: 900px) {

    .what-form,
    .entry-form,
    main form,

    .what-help-section,
    .entry-help-section,
    .help-section,
    .secondary-actions,

    .what-footer,
    .entry-footer,
    footer {
        width: 92% !important;
    }

}


@media (max-width: 640px) {

    .what-form,
    .entry-form,
    main form,

    .what-help-section,
    .entry-help-section,
    .help-section,
    .secondary-actions,

    .what-footer,
    .entry-footer,
    footer {
        width: 94% !important;
    }

}


/* ==========================================================================
   END PASS 4.2
   ========================================================================== */

/* ==========================================================================
   WHAT? CORE UI — Pass 4.3 correction
   03 October 2026
   ========================================================================== */

/* Hero title area: remove CHG master/entry.css blue or purple panel */
.chg-home-hero,
.chg-page .chg-home-hero,
.what-public .chg-home-hero {
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 5% 16px !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    text-align: center !important;
}

.chg-home-hero::before,
.chg-home-hero::after {
    content: none !important;
    display: none !important;
}

.chg-home-hero h1,
.chg-home-hero .chg-home-lead {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Desktop application body and form: return to 70% and centre */
.chg-entry-body {
    width: 70% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    background: transparent !important;
}

.chg-entry-body > form,
.chg-entry-body .what-form {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Keep continuation/help and footer on the same 70% body axis */
.chg-entry-body > .continuations,
.chg-entry-body > footer {
    width: 100% !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Disabled submit: clear unavailable state without hourglass */
form button[type="submit"]:disabled {
    cursor: not-allowed !important;
}

@media (max-width: 1200px) {
    .chg-entry-body { width: 82% !important; }
}

@media (max-width: 900px) {
    .chg-entry-body { width: 92% !important; }
}

@media (max-width: 640px) {
    .chg-entry-body { width: 94% !important; }
}

/* ==========================================================================
   END PASS 4.3
   ========================================================================== */

/* Monaco Events continuation actions share the same visual system without
   changing their application-owned DOM hooks or payload fields. */
.chg-events .continuations{padding:20px 0;text-align:center}.chg-events .continuations>button{min-width:280px}.chg-events .continuations form{width:100%!important;max-width:760px!important;margin:18px auto!important;text-align:left}.chg-events .continuations form [role="status"]{text-align:center}.chg-events .continuations form button[type="submit"]{display:block;margin:12px auto 0!important}.chg-events [data-result]{width:100%;margin:20px auto;padding:24px;color:var(--what-text)!important;background:var(--what-panel)!important;border:1px solid var(--what-border)!important;border-radius:var(--what-radius)!important}.chg-events [data-result] h2,.chg-events [data-result] h3{color:var(--what-purple-soft)!important}.chg-events [data-result] details{background:rgba(255,255,255,.42);border-color:var(--what-border)}

/* Monaco Events post-deployment presentation corrections. */
.chg-events .what-language-nav{margin-left:auto!important;display:flex!important;justify-content:flex-end!important;align-items:center!important;flex-wrap:wrap!important;gap:14px!important;text-align:right!important}
.chg-events .what-language-nav a{display:inline-flex!important;align-items:center!important;gap:5px!important}
.chg-events .what-language-nav img{width:18px!important;height:auto!important;margin:0!important}
.chg-events .what-language-divider{display:none!important}
.chg-events .what-form label,.chg-events .what-form legend{text-align:left!important}
.chg-events [data-result]{text-align:left!important}
.chg-events [data-result]>h2,.chg-events [data-result]>h3,.chg-events [data-result]>p:first-of-type{text-align:center!important}
.chg-events [data-result] ul{list-style:none!important;margin:12px 0 20px!important;padding:0!important}
.chg-events [data-result] li{margin:0 0 12px!important;padding:0!important;text-align:left!important}
.chg-events [data-result] dl,.chg-events [data-result] dt,.chg-events [data-result] dd,.chg-events [data-result] details,.chg-events [data-result] details p{text-align:left!important}
.chg-events [data-result] dl{display:block!important;margin:12px 0!important;padding:0!important}
.chg-events [data-result] dt,.chg-events [data-result] dd{display:block!important;width:100%!important;max-width:none!important}
.chg-events [data-result] dt{margin:14px 0 2px!important}
.chg-events [data-result] dd{margin:0 0 12px!important;padding:0!important}
@media(max-width:640px){.chg-events .what-language-nav{max-width:none!important;gap:9px!important;font-size:.82rem!important}.chg-events .what-language-nav img{width:15px!important}}