/* ---- Design tokens (only variables referenced by the classes below) ---- */
:root {
    --f-heading-2xl: 6rem;
    --f-heading-xl: 4rem;
    --f-heading-lg: 2.5rem;
    --f-heading-md: 2rem;
    --f-heading-sm: 1.25rem;
    --f-heading-xs: 1.125rem;
    --f-body-md: 1rem;
    --f-body-sm: 0.75rem;
    --f-body-lg: 1.25rem;

    /*site styles - spaces */
    --f-space-2xl: 12rem;
    --f-space-xl: 8rem;
    --f-space-lg: 4rem;
    --f-space-md: 2rem;
    --f-space-sm: 1.5rem;
    --f-space-xs: 0.75rem;
    --f-space-2xs: 0.25rem;

    --f-radius-lg:2rem;
    --f-radius-default: 0.75rem;

    --f-row-width-01: 1420px;
    --f-trans-default: 0.2s;

    /* header height (not including padding) */
    --f-header-height: 4.75rem;
    --f-header-height-scroll: 4rem;
    --f-banner-height: 40px;

    /*
    --color-primary: #FFF;
    --color-primary-alt: #f8f6f1;
    --color-secondary: #1B1B1B;
    --color-secondary-rgb: 27 27 27;
    --color-accent: #BB1616;
    --color-accent-text: var(--color-accent);
    --color-bg: var(--color-primary);
    --color-bg-alt: var(--color-primary-alt);
    --color-bg-accent: var(--color-accent);
    --color-secondary-text: var(--color-primary);
    --color-body-text: var(--color-secondary);
    --color-heading-text: var(--color-secondary);
    --color-link-text: var(--color-secondary);
    --color-link-text-hover: var(--color-accent);
    --color-border: #d6d6d6;
    --color-shadow: rgb(var(--color-secondary-rgb)/0.25);
    */
}
#event_builder {
    .grid .span-2{
        grid-column: span 2;
    }
    .grid .span-1{
        grid-column: span 1;
    }
    .form-container{
        overflow:hidden;
    }
    #event_form{
        display:flex;
        flex-direction:row;
        flex-wrap: nowrap;
        transition: transform 300ms ease-out;
    }
    .form-wrap{
        min-width:100%;
        padding:var(--f-space-2xs);
    }
    .day-accordion-wrapper{
        transition: all 250ms;
    }
    .day-accordion-wrapper .day-accordion-title{
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        gap:var(--f-space-sm);
    }
    .day-accordion-wrapper .day-accordion-control{
        max-width:fit-content;
        transition: transform 250ms ease-in;
    }
    .day-accordion-wrapper .day-accordion-content{
        display: grid; 
        grid-template-rows: 0fr; 
        overflow: hidden; 
        transition: grid-template-rows 250ms ease-out;
    }
    .day-accordion-wrapper .day-accordion-content .day-content{
        min-height: 0; 
        visibility: hidden; 
        transition: var(--f-trans-default);
    }
    .day-accordion-wrapper{
        padding:var(--f-space-sm);
        background-color: var(--color-primary-alt);
        border-radius: var(--f-radius-default);
        border: 1px solid var(--color-border);
    }
    .day-accordion-wrapper.active .day-accordion-content{
        grid-template-rows: 1fr;
    }
    .day-accordion-wrapper.active .day-accordion-content .day-content{
        visibility: visible;
    }
    .day-accordion-wrapper.active .day-accordion-control{
        transform: rotate(45deg);
    }
    .textarea{
        background-color: var(--color-bg);
        color:var(--color-body-text);
        border-radius:var(--f-radius-default);
        resize: vertical;
        min-height: var(--f-space-2xl);
        caret-color: var(--color-secondary);
    }
    .textarea.small{
        min-height: var(--f-space-lg);
    }
    .nextBtn.disabled, .submitBtn.disabled{
        pointer-events: none;
        cursor:not-allowed;
        filter:grayscale(90%);
        opacity: 60%;
    }
    .day-wrapper{
        margin-bottom: var(--f-space-sm);
    }
    .day-wrapper:last-of-type{
        margin-bottom:0;
    }
    .form-wrap{
        height:0;
    }
    .form-wrap.active{
        height:fit-content;
    }
    .day-divider{
        height:1px; 
        width:100%; 
        background:#a3a3a3"
    }
    .day-divider:last-of-type{
        display:none
    }
    #img-wrapper img{
        opacity:0%;
        transition: all 250ms ease-in-out;
    }
    #img-wrapper img.active{
        opacity:100%;
    }
    .summary-text{
        text-align: right;
        text-wrap:balance;
    }
    #recapWrapper .editInfo,
    #recapWrapper .editActs,
    #recapWrapper .editExtras{
        display:none;
    }
    @media screen and (max-width:1024px) {
        
    }
    @media screen and (max-width:767px) {
        .grid .span-2{
            grid-column: span 1;
        }
    }

    /* --f--- Layout & utility classes (from styles.css) --f--- */
    .object-cover {object-fit: cover;}

    .w-100 {width:100%;}

    .h-100 {height:100%;}

    .relative {position: relative;}

    .absolute {position: absolute;}

    .flex-col {flex-direction: column; display: flex;}

    .flex-row {flex-direction: row; display: flex;}

    .justify-center {justify-content: center;}

    .justify-space-between {justify-content: space-between;}

    .align-center {align-items: center;}

    .align-start {align-items: flex-start;}

    .align-self-end {align-self: flex-end;}

    .flex-grow-1 {flex-grow: 1;}

    .grid {display: grid;}

    .cols-1-1 {grid-template-columns: 1fr 1fr;}

    .italic {font-style: italic;}

    .circle {border-radius: 50%; aspect-ratio: 1;}

    .rounded-lg {border-radius: var(--f-radius-lg);}

    .rounded {border-radius: var(--f-radius-default);}

    .overflow-hidden {overflow:hidden;}

    .pointer {cursor: pointer;}

    @media screen and (max-width:1024px) {
    .flex-row.tab-cols-1 {flex-direction: column;}
    }

    @media screen and (max-width:1024px) {
    .tab-cols-1 {grid-template-columns: 1fr;}
    }

    @media screen and (max-width: 767px) {
    .flex-row.mob-cols-1 {flex-direction: column;}
    }

    @media screen and (max-width: 767px) {
    .mob-cols-1 {grid-template-columns: 1fr;}
    }

    .ml-xs {margin-left:var(--f-space-xs);}

    .mb-sm {margin-bottom:var(--f-space-sm);}

    .p-sm {padding:var(--f-space-sm);}

    .p-xs {padding:var(--f-space-xs);}

    .px-sm {padding-left:var(--f-space-sm); padding-right:var(--f-space-sm)}

    .px-xs {padding-left:var(--f-space-xs); padding-right:var(--f-space-xs)}

    .py-xs {padding-top:var(--f-space-xs); padding-bottom:var(--f-space-xs)}

    .py-2xs {padding-top:var(--f-space-2xs); padding-bottom:var(--f-space-2xs)}

    .py-sec {padding-top:var(--f-section); padding-bottom:var(--f-section)}

    .pr-xs {padding-right:var(--f-space-xs);}

    .pb-sm {padding-bottom:var(--f-space-sm);}

    .gap-xl {gap: var(--f-space-xl);}

    .gap-lg {gap: var(--f-space-lg);}

    .gap-sm {gap: var(--f-space-sm);}

    .gap-xs {gap: var(--f-space-xs);}

    .gap-2xs {gap: var(--f-space-2xs);}

    .heading {
        color: var(--color-heading-text); 
        text-transform: uppercase;
        line-height: 1;}

    .icn {
        font-weight: normal !important;
        font-feature-settings: liga;
        text-transform: initial;
        text-indent: 0 !important;
        overflow: hidden;}

    .icn.lg {height:var(--f-heading-lg);min-width: fit-content;}

    .icn.md {height:var(--f-heading-md);min-width: fit-content;}

    .icn.sm {height:var(--f-heading-sm);min-width: fit-content;}

    .icn.xs {height:var(--f-heading-xs);min-width: fit-content;}

    .heading.lg, .text-lg, .icn.lg {font-size: var(--f-heading-lg);}

    .heading.md, .text-md, .icn.md {font-size: var(--f-heading-md);}

    .heading.sm, .text-sm, .icn.sm {font-size: var(--f-heading-sm);}

    .heading.xs, .text-xs, .icn.xs {font-size: var(--f-heading-xs);}

    .body-text {text-transform: none;
        font-size: var(--f-body-md);}

    .body-text-lg {text-transform: none;
        font-size: var(--f-body-lg);}

    .heading.lg, .heading.md, .heading.sm, .heading.xs {font-weight: 500;}

    .heading.mid-weight {font-weight:600;}

    .rw01 {max-width: var(--f-row-width-01); margin-left: auto; margin-right: auto;}

    .bg-content {background-color: var(--color-bg);}

    .bg-content-alt {background-color: var(--color-bg-alt);}

    .color-accent, .heading.color-accent {color: var(--color-accent-text);}

    .color-secondary {color: var(--color-secondary-text);}

    .border {border:solid 1px var(--color-border);}

    .scroll-to {scroll-margin-top: calc(var(--f-space-xl) + var(--f-banner-height))}

    .square {aspect-ratio: 1/1;}

    a {color: var(--color-link-text); transition: var(--f-trans-default); text-decoration: none;}

    p a:hover {color: var(--color-link-text-hover);}

    @media screen and (max-width:1024px) {
    .tab-hide {display:none !important}
    }

    section, .row {position:relative;}

    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {-webkit-appearance: none;
        margin: 0;}

    .search-input, .chosen-choices {width:100%;
        border: 2px transparent;
        border-radius: var(--f-radius-lg);
        padding:var(--f-space-sm);
        
        caret-color: var(--color-body-text);}

    #sort-by:focus-visible, #cntryLinks:focus-visible {outline: none;}

    #sort-by, #cntryLinks, .select_dropdown {border:none;
        appearance: none;
        padding-right:18px;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right center;}

    .select_dropdown {background-position: 98% center;}

    /* --f--- Buttons, inputs & theme-specific overrides (from colour-scheme-light.css) --f--- */
    /*.btn {background: var(--color-accent); 
        padding: var(--f-space-xs) var(--f-space-md); 
        transition: background-color var(--f-trans-default);}

    .btn.small {padding: var(--f-space-2xs) var(--f-space-xs);}

    .btn:not(.not-rounded) {border-radius: var(--f-radius-default);}

    .btn-title {color: var(--color-secondary-text); 
        text-transform: uppercase; 
        font-size: var(--f-heading-xs); 
        font-style: italic; 
        font-weight: 600; 
        letter-spacing: 1px; 
        text-align: center; 
        display: block; 
        transition: var(--f-trans-default);
        text-wrap:nowrap;}

    .btn.sm .btn-title {font-size: var(--f-heading-xs);}

    .btn:not(.w-100) {display: inline-block; 
        width:fit-content; 
        max-width: 100%;}

    .btn.w-100 {display: block;}

    .btn.outline {background-color:transparent;
        box-shadow:inset 0px 0px 0px 2px var(--color-accent);}

    .btn.outline .btn-title {color: var(--color-accent);}
    */
    .prevBtn{
        padding: var(--f-space-xs) 0; 
    }
    .prevBtn .btn-title{
        color: var(--color-body-text);
    }
    .cnt-sel {
        webkit-backdrop-filter: blur(13px);
        backdrop-filter: blur(13px);
        background-color: #ffffff1a;
        border: 1px solid #ffffff2e;
        transition: outline 0ms;
    }

    .cnt-sel .btn-title {color:var(--color-secondary-text); 
        transition:unset;}

    .search-input {border:1px solid var(--color-shadow)}

    .outline {transition: outline 0ms !important;}

    @media (hover: hover) and (pointer: fine) {
    .btn:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;
            opacity:100%;}
    .cnt-sel:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;
            color:#fff;
            border: 1px solid var(--color-bg-accent)}
    .outline:hover {outline: 2px solid var(--color-bg-accent);
            outline-offset: 2px;}
    }

    .btn.rounded, .button.rounded {border-radius: 10rem;}

    .search-input {width:100%;
        padding:var(--f-space-xs) var(--f-space-sm) !important;
        border-radius:10rem !important;
        border:1px solid #aaa;
        caret-color: #000000;}
}