/*
    Az Tech Week - Host an event (multiple events / super user page)

    Overrides for the single-page form layout. The base styles in
    aZTechWeekRegistration.css are shared with the original step-by-step
    registration page, so nothing here may leak outside the
    .aztechform--single-page scope that registrationFormScriptsMultipleEvents.js
    puts on the form root.
*/

/* ---------------------------------------------------------------- layout */

/* The slider used to move sections horizontally, one at a time. Every section
   is on screen at once now, so it becomes a plain vertical stack. */
.registrationaztechweek.aztechform--single-page form .aztechform__inner-root {
    overflow-x: visible;
}

.registrationaztechweek.aztechform--single-page form .aztechform__inner-root .aztechform__slider {
    flex-direction: column;
    transition: none;
}

.registrationaztechweek.aztechform--single-page form .aztechform__inner-root .aztechform__step {
    width: 100%;
}

/* Separate the stacked sections. They sit on the page ground with no card of
   their own, so they need generous breathing room to read as separate steps. */
.registrationaztechweek.aztechform--single-page form .aztechform__inner-root .aztechform__step + .aztechform__step {
    margin-top: 50px;
}

@media (min-width: 768px) {
    .registrationaztechweek.aztechform--single-page form .aztechform__inner-root .aztechform__step + .aztechform__step {
        margin-top: 70px;
    }
}

/* ------------------------------------------------------------------- nav */

/* The sidebar is a set of scroll-to links now, so keep it in view while the
   user works down the page. */
@media (min-width: 768px) {
    .registrationaztechweek.aztechform--single-page form .aztechform__nav {
        position: sticky;
        top: 20px;
        align-self: flex-start;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
    }
}

.registrationaztechweek.aztechform--single-page form .aztechform__nav .aztechform__nav-button {
    cursor: pointer;
}

.registrationaztechweek.aztechform--single-page form .aztechform__nav .aztechform__nav-button:hover,
.registrationaztechweek.aztechform--single-page form .aztechform__nav .aztechform__nav-button:focus-visible {
    opacity: 1;
    color: #FFF;
}

/* --------------------------------------------------------------- headings */

/* No step counter or back button in a single-page form. These are no longer
   rendered, but the rules keep the layout correct if they ever come back. */
.registrationaztechweek.aztechform--single-page form .aztechform__step-count,
.registrationaztechweek.aztechform--single-page form .aztechform__back-btn {
    display: none;
}

/* Section titles carry the whole structure now, so give them a little air */
.registrationaztechweek.aztechform--single-page form .aztechform__step-header {
    margin-bottom: 30px;
}

/* ---------------------------------------------------------------- actions */

/* The one submit for the whole form */
.registrationaztechweek.aztechform--single-page form .aztechform__submit-btn {
    display: block;
    cursor: pointer;
}

/* Locked until every required field is filled in. The background is restated
   because the shared stylesheet turns any :disabled control white, which on a
   solid red button reads as a rendering fault rather than a disabled state. */
.registrationaztechweek.aztechform--single-page form .aztechform__submit-btn:disabled,
.registrationaztechweek.aztechform--single-page form .aztechform__submit-btn:disabled:hover {
    background-color: #D13D3D;
    border-color: #D13D3D;
    color: #FFFFFF;
    opacity: 0.45;
    cursor: not-allowed;
}

/* ------------------------------------------------------------ section text */

/*
    The shared stylesheet cards steps 1-3 in light purple with dark text and
    drops steps 4-9 straight onto the dark page ground via
    `.umbraco-forms-container * { color: #fff }`. Stacked together on one page
    that split reads as a rendering fault, so every section takes the dark-ground
    treatment instead: no card, white text throughout.

    These selectors deliberately MATCH the specificity of the shared rules they
    override rather than beating them with an extra class. This file is only
    linked from AZTechWeekHostMultipleEvents.cshtml, so it needs nothing extra
    to scope it to this page, and matching leaves the rest of the cascade
    untouched: anything more specific still wins exactly as it does today. That
    covers everything that must not go white -- input and textarea text
    (`color: #221F20 !important`), select placeholders and dropdown options, and
    the pill labels in a multiple-choice field, which keep their white ground
    and dark type.
*/
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .umbraco-forms-container {
    background-color: transparent;
    padding: 0;
    border-radius: 0;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .umbraco-forms-container * {
    color: #FFFFFF;
}

/* Validation messages keep the error colour. The * rule above beats the shared
   sheet's .field-validation-error-jquery on class count, so the text came out
   white; restating the chain plus the error class wins on source order. Red
   rather than white so it still reads as an error, and the lighter #F86363 for
   the same reason as the submit message below -- #641616 is meant for the
   purple card and would all but disappear on the dark ground. */
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .umbraco-forms-container .field-validation-error-jquery {
    color: #F86363;
}

/* Why a submit did not go through, reported next to the button that was clicked
   rather than only in the console or up in the Register section. Red rather
   than the white above so it still reads as an error, and light enough to carry
   against the dark ground -- the shared sheet's #641616 is meant for the purple
   card and would all but disappear here. */
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .aztechform__submit-message p {
    margin: 0 0 20px;
    color: #F86363;
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    font-style: italic;
    line-height: 120%;
    max-width: 600px;
}

/* -------------------------------------------- checkbox and radio markers */

/*
    The tick boxes, their checkmarks and the accordion chevrons are drawn as
    pseudo-elements in #221F20 -- the same dark the page ground uses. Against
    the purple card they read fine; on the dark ground they disappear, taking
    the only visual cue that a row is selectable with them. Steps 4-9 already
    draw their own radios in white for exactly this reason, so these follow.

    Same approach as the section above: each selector is the shared sheet's own
    chain, so it wins on source order alone and nothing else in the cascade
    shifts. Only the colour is restated -- size, position and the FontAwesome
    glyphs all stay where the shared sheet puts them.
*/

/* "I've read and agree to the community guidelines" */
.registrationaztechweek .aztechform__inner-root .aztechform__step .umbraco-forms-field.checkbox label::before {
    border-color: #FFFFFF;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step .umbraco-forms-field.checkbox label.selected::after {
    color: #FFFFFF;
}

/* Event type: one radio per accordion row, plus that row's expand chevron */
.registrationaztechweek .aztechform__inner-root .aztechform__step .aztechform__accordion-list .aztechform__accordion-item input[type="radio"] + label::before {
    border-color: #FFFFFF;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step .aztechform__accordion-list .aztechform__accordion-item input[type="radio"]:checked + label::after {
    color: #FFFFFF;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step .aztechform__accordion-list .aztechform__accordion-item .aztechform__accordion-trigger::before {
    color: #FFFFFF;
}

/* The keyboard focus rings on those same controls are black, which was legible
   on the card and is not here. Every other focus treatment on this page is
   white. The !important matches the shared rules', which carry one. */
.registrationaztechweek .aztechform__inner-root .aztechform__step input[type="checkbox"]:focus-visible ~ label,
.registrationaztechweek .aztechform__inner-root .aztechform__step input[type="radio"]:focus-visible ~ label {
    outline-color: #FFFFFF;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step .aztechform__accordion-list .aztechform__accordion-item .aztechform__accordion-header input[type="radio"]:focus-visible ~ label::before,
.registrationaztechweek .aztechform__inner-root .aztechform__step .aztechform__accordion-list .aztechform__accordion-item .aztechform__accordion-header:focus-within {
    outline-color: #FFFFFF !important;
}

/* --------------------------------------------------------- review summary */

/* The recap block the step-by-step form builds on its final section. On this
   page every section is already on screen, so the recap only repeats what the
   user can see. It is hidden here rather than from script because the form
   creates it lazily, the first time a title is entered, so a hide() call at
   start-up runs before the element exists. */
.registrationaztechweek.aztechform--single-page form .aztechform__inner-root .aztechform__step .aztechform__dynamic-header {
    display: none;
}

/* ------------------------------------------------ single page chrome */

/* Copy and headings the step-by-step form needs and this page does not: its
   prompts are written into the page, and with every section open at once the
   per-step headers, break text and side nav have nothing left to say.

   These were an inline <style> block in the view. They hang off a class the
   view puts on its own wrapper rather than .aztechform--single-page, because
   that class is added by script and this chrome would be on screen until it
   ran. (@section body_id is no use here: the layout writes "<!body ...>", so
   the browser drops the tag as a bogus comment and the id never lands.) */
.aztw-host-multiple-events .umbraco-forms-field.submitrte.richtext.alternating,
.aztw-host-multiple-events .umbraco-forms-field.congratulationsyoureventisreadytosubmit.titleanddescription,
.aztw-host-multiple-events .umbraco-forms-field.gotbiggerplans.richtext.alternating,
.aztw-host-multiple-events .umbraco-forms-field.needabreak.richtext,
.aztw-host-multiple-events .umbraco-forms-field.bullets.richtext.alternating,
.aztw-host-multiple-events .aztechform__break-text,
.aztw-host-multiple-events .aztechform__step-header,
.aztw-host-multiple-events .aztechform__nav-list,
.aztw-host-multiple-events .umbraco-forms-field.locationvenue.titleanddescription.alternating p,
.aztw-host-multiple-events .umbraco-forms-field.tellusmoreaboutyourself.titleanddescription.alternating p,
.aztw-host-multiple-events .umbraco-forms-field.addacohostoptional.titleanddescription.alternating p,
.aztw-host-multiple-events .umbraco-forms-field.attendeeregistration.titleanddescription p,
.aztw-host-multiple-events .umbraco-forms-field.tellusmore.titleanddescription p,
.aztw-host-multiple-events .umbraco-forms-field.body.richtext p,
.aztw-host-multiple-events .umbraco-forms-field.thisinfowillhelpusgetyoureventinfrontoftherightpeople.multiplechoice legend {
    display: none;
}


/* The review section reads as plain text on the page ground here, not as a
   card like the sections around it. */
.aztw-host-multiple-events .aztechform__step[data-step] .umbraco-forms-container:has(.congratulationsyoureventisreadytosubmit) {
    background-color: transparent !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Says why Submit for Review is shut when the only thing left is the Community
   Guidelines tick, which lives at the top of the form with no section of its own
   to mark incomplete. Same red as the submit message above, since it is the same
   kind of thing: the reason a click would not have worked. */
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .aztechform__guidelines-hint {
    margin: 0 0 20px;
    color: #F86363;
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    font-style: italic;
    line-height: 120%;
    max-width: 600px;
}

/* Reads as a link rather than a second button next to the one it explains: the
   control is a <button> so it is reachable by keyboard and announced as an action,
   but it should not compete with Submit for Review for attention. */
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .aztechform__guidelines-hint-link {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .aztechform__guidelines-hint-link:hover,
.registrationaztechweek .aztechform__inner-root .aztechform__step[data-step] .aztechform__guidelines-hint-link:focus-visible {
    text-decoration: none;
}