/* ============================================================
   REGISTRATION LAYOUT + MARKETO FORMS 2.0 SKIN
   KPMG UK brand
   ------------------------------------------------------------
   Load AFTER styles.css. Pair with partials/registration-section.html.

   Every rule is scoped to form.mktoForm (the <form> Marketo injects),
   NOT .mktoForm, because the guided-template placeholder <div> also
   carries that class.

   !important is load-bearing where marked: Forms 2.0 writes inline
   pixel widths at render time, and a button theme chosen in the Form
   Editor is injected as its own stylesheet.
   ============================================================ */


/* ---------- 1. Section layout ---------- */

.registration{
    padding:56px 0 64px;
    background:var(--grey-100);
    /* Full-bleed band, as kpmg.com alternates white and grey-100. */
    box-shadow:0 0 0 100vmax var(--grey-100);
    clip-path:inset(0 -100vmax);
    margin-top:48px;
}
.layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:start}
.form-panel,.summary{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius-card);
    padding:28px;
}
.form-panel .section-title{margin-bottom:20px}

/* Kept for non-Marketo/static markup; the Marketo form supplies its own rows. */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column}
.field.full{grid-column:1/-1}
.field label{margin-bottom:7px;color:var(--muted);font-size:.92rem}
.field input{
    background:#fff;border:1px solid var(--border-strong);
    color:var(--text);padding:13px 14px;border-radius:2px;
}


/* ---------- 2. Summary panel ---------- */

.summary{position:sticky;top:calc(var(--header-h) + 16px);height:max-content}
.summary h3{margin-bottom:16px;color:var(--kpmg-blue);font-size:1.15rem}
.selected-event{
    padding:12px 14px;margin-bottom:8px;
    background:var(--grey-100);
    border-left:3px solid var(--kpmg-green);
    font-size:.9rem;line-height:1.45;
}
.selected-event strong{color:var(--kpmg-blue)}
.total{margin-top:16px;padding-top:16px;border-top:1px solid var(--border);color:var(--kpmg-blue)}
.summary-note{margin-top:14px;color:var(--muted);font-size:.85rem;line-height:1.6}

/* Missing-selection message, injected above the event grid by
   js/marketo-sessions.js. Hidden until submission is attempted. */
.sessions-error{
    display:none;
    margin:0 0 14px;
    padding:12px 16px;
    border:1px solid var(--kpmg-red);
    border-left-width:4px;
    background:rgba(188,32,75,.06);
    border-radius:2px;
    color:var(--kpmg-red);
    font-size:.92rem;
    font-weight:600;
    line-height:1.5;
}
.sessions-error.visible{display:block}


/* ---------- 3. Marketo Forms 2.0 skin ---------- */

.form-panel form.mktoForm{
    width:100%!important;
    padding:0!important;
    font-family:var(--font)!important;
    font-size:1rem;
    color:var(--text);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

/* Structural resets for Marketo's float/spacer scaffolding */
.form-panel form.mktoForm .mktoFormRow{min-width:0}
.form-panel form.mktoForm .mktoFormCol{
    width:100%!important;min-height:0!important;
    float:none!important;margin-bottom:0!important;
}
.form-panel form.mktoForm .mktoOffset,
.form-panel form.mktoForm .mktoGutter,
.form-panel form.mktoForm .mktoClear{display:none!important}
.form-panel form.mktoForm .mktoFieldWrap{
    width:100%!important;float:none!important;
    display:flex;flex-direction:column;position:relative;
}

/* Labels */
.form-panel form.mktoForm .mktoLabel{
    width:auto!important;float:none!important;
    margin:0 0 7px;padding:0 8px 0 0;
    color:var(--text);
    font-size:.92rem;font-weight:600;line-height:1.4;
    /* row-reverse puts Marketo's leading .mktoAsterix div after the text */
    display:flex;flex-direction:row-reverse;justify-content:flex-end;
    align-items:center;gap:2px;
}
/* Marketo emits .mktoAsterix in EVERY label and hides it on optional fields
   with its own CSS. Show it only where the field is marked required. */
.form-panel form.mktoForm .mktoAsterix{display:none!important}
.form-panel form.mktoForm .mktoRequiredField .mktoAsterix,
.form-panel form.mktoForm .mktoLabel.mktoRequired .mktoAsterix,
.form-panel form.mktoForm .mktoRequired + .mktoAsterix{
    display:inline!important;float:none;padding:0 0 0 3px;
    color:var(--kpmg-red);
}

/* Fields */
.form-panel form.mktoForm input[type=text],
.form-panel form.mktoForm input[type=email],
.form-panel form.mktoForm input[type=tel],
.form-panel form.mktoForm input[type=number],
.form-panel form.mktoForm input[type=url],
.form-panel form.mktoForm input[type=date],
.form-panel form.mktoForm select.mktoField,
.form-panel form.mktoForm textarea.mktoField{
    width:100%!important;height:auto!important;
    background:#fff;
    border:1px solid var(--border-strong);
    border-radius:2px;
    color:var(--text);
    padding:13px 14px;
    font-family:var(--font);
    font-size:1rem;line-height:1.3;
    box-shadow:none;
    transition:border-color .2s,box-shadow .2s;
}
.form-panel form.mktoForm input:focus,
.form-panel form.mktoForm select.mktoField:focus,
.form-panel form.mktoForm textarea.mktoField:focus{
    outline:none;
    border-color:var(--kpmg-cobalt);
    box-shadow:0 0 0 3px rgba(30,73,224,.18);
}
.form-panel form.mktoForm input::placeholder,
.form-panel form.mktoForm textarea::placeholder{color:#8b93a1}
.form-panel form.mktoForm select.mktoField{
    appearance:none;
    background-image:linear-gradient(45deg,transparent 50%,var(--kpmg-cobalt) 50%),
                     linear-gradient(135deg,var(--kpmg-cobalt) 50%,transparent 50%);
    background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
    background-size:6px 6px,6px 6px;
    background-repeat:no-repeat;
    padding-right:40px;
}

/* Checkbox / radio groups */
.form-panel form.mktoForm .mktoCheckboxList,
.form-panel form.mktoForm .mktoRadioList{
    width:100%!important;padding:0;
    display:flex;flex-direction:column;gap:8px;
}
.form-panel form.mktoForm .mktoCheckboxList > label,
.form-panel form.mktoForm .mktoRadioList > label{
    color:var(--text);font-size:.92rem;font-weight:400;margin:0;padding-left:8px;
}
.form-panel form.mktoForm input[type=checkbox],
.form-panel form.mktoForm input[type=radio]{accent-color:var(--kpmg-cobalt);width:16px;height:16px}

/* Full-width rows. Marketo has no per-row class hook, so target by field. */
.form-panel form.mktoForm .mktoFormRow:has([name="Email"]),
.form-panel form.mktoForm .mktoFormRow:has(textarea),
.form-panel form.mktoForm .mktoFormRow:has(.mktoCheckboxList),
.form-panel form.mktoForm .mktoFormRow:has(.mktoRadioList),
.form-panel form.mktoForm .mktoFormRow.mktoFullWidth{grid-column:1/-1}

/* The events field is driven by the cards above, so its row is hidden.
   js/marketo-sessions.js also adds this class at runtime. */
.form-panel form.mktoForm .mktoFormRow.eventreg-sessions-row{display:none}

/* Submit button.
   Marketo injects a stylesheet for whichever button theme is picked in the
   Form Editor (e.g. mktoCupidGreen), hence !important. Best practice is to
   leave the button unstyled in the Form Editor and let this take over. */
.form-panel form.mktoForm .mktoButtonRow{grid-column:1/-1;width:100%;margin-top:4px}
.form-panel form.mktoForm .mktoButtonWrap,
.form-panel form.mktoForm .mktoButtonWrap.mktoSimple,
.form-panel form.mktoForm .mktoButtonWrap.mktoInset,
.form-panel form.mktoForm .mktoButtonWrap.mktoOutline,
.form-panel form.mktoForm .mktoButtonWrap.mktoRound,
.form-panel form.mktoForm .mktoButtonWrap.mktoCupidGreen{
    margin-left:0!important;display:block;border:0;background:none;
}
/* Standard-width pill with a trailing chevron, matching kpmg.com — not a
   full-width block. */
.form-panel form.mktoForm button.mktoButton,
.form-panel form.mktoForm .mktoButtonWrap button.mktoButton{
    width:auto!important;
    min-width:230px;
    border:2px solid var(--kpmg-cobalt)!important;
    background-image:none!important;
    background-color:var(--kpmg-cobalt)!important;
    color:#fff!important;
    padding:14px 26px!important;
    border-radius:var(--radius-pill)!important;
    cursor:pointer;
    font-family:var(--font)!important;
    font-size:1rem!important;
    font-weight:600!important;
    letter-spacing:0;
    text-shadow:none!important;
    box-shadow:none!important;
    transition:background-color .2s,border-color .2s;
}
.form-panel form.mktoForm button.mktoButton:after{content:" \203A";font-size:1.2em;padding-left:8px}
.form-panel form.mktoForm button.mktoButton:hover{
    background-color:var(--kpmg-cobalt-hover)!important;
    border-color:var(--kpmg-cobalt-hover)!important;
}
.form-panel form.mktoForm button.mktoButton:focus-visible{
    outline:2px solid var(--kpmg-blue);outline-offset:3px;
}
.form-panel form.mktoForm button.mktoButton:disabled{opacity:.6;cursor:not-allowed}

/* Validation messages.
   Marketo positions .mktoError absolutely with inline styles, which lands it
   across the input being typed into. Anchor it to the top right of the field
   instead, level with the label. */
.form-panel form.mktoForm .mktoError{
    position:absolute!important;
    top:0!important;right:0!important;left:auto!important;bottom:auto!important;
    width:auto!important;max-width:62%;z-index:2;
    /* One line only: a wrapped message drops over the input below it. */
    line-height:1.4;
}
/* Full-width rows have room for a longer message on the same line. */
.form-panel form.mktoForm .mktoFormRow:has([name="Email"]) .mktoError,
.form-panel form.mktoForm .mktoFormRow:has(textarea) .mktoError,
.form-panel form.mktoForm .mktoFormRow.mktoFullWidth .mktoError{max-width:78%}
.form-panel form.mktoForm .mktoError .mktoErrorArrowWrap{display:none!important}
.form-panel form.mktoForm .mktoError .mktoErrorMsg{
    display:block;margin:0!important;padding:0!important;
    background:none!important;background-image:none!important;
    border:0!important;border-radius:0!important;
    box-shadow:none!important;text-shadow:none!important;
    color:var(--kpmg-red)!important;
    font-size:.78rem!important;font-weight:700;line-height:1.45;
    text-align:right;max-width:none;
}
/* Marketo appends an example to some stock messages — "503-555-1212" for
   phone, "example@yourdomain.com" for email. It pushes the message onto a
   second line, where it lands across the input, and the phone example is US
   format besides. The message itself already says what's wrong.
   To change the message text rather than hide the example, edit the field's
   Validation Message in the Form Editor. */
.form-panel form.mktoForm .mktoErrorDetail{display:none!important}
.form-panel form.mktoForm .mktoInstruction{color:var(--muted);font-size:.82rem;margin-top:6px}

/* Post-submit inline confirmation (optional, see marketo-sessions.js) */
.form-confirmation{
    padding:24px;
    border:1px solid var(--kpmg-green);
    border-left-width:4px;
    background:rgba(0,163,161,.07);
    border-radius:2px;
    line-height:1.7;
}
.form-confirmation strong{display:block;margin-bottom:6px;color:var(--kpmg-blue);font-size:1.05rem}


/* ---------- 4. Responsive ---------- */

@media(max-width:900px){
    .layout,.form-grid{grid-template-columns:1fr}
    .summary{position:static}
    .form-panel form.mktoForm{grid-template-columns:1fr}
    .form-panel,.summary{padding:22px}
}
@media(max-width:640px){
    .form-panel form.mktoForm button.mktoButton{width:100%!important;min-width:0}
}
@media(max-width:560px){
    /* Too tight for the label and message to share a line. */
    .form-panel form.mktoForm .mktoError{
        position:static!important;max-width:none;margin-top:6px;
    }
    .form-panel form.mktoForm .mktoError .mktoErrorMsg{text-align:left}
}