/*****************************************************************************************
 * This file contains styles used by the roadmap feature of the website
 *****************************************************************************************/

/* This is the element that all of the roadmap information is inside of */
.roadmap
{
    --global-default-background : #ffffff;
    color            : var(--e-global-color-text, #f4f4f4); /* If the global text color exists, use that, otherwise use the color provided */
}

/* Initial message that tells the user we are verifying authentication before displaying the roadmap */
.roadmap-access-status
{
    padding    : 18px;
    text-align : center;
    color      :var(--e-global-color-secondary, #c8c8ce);
}


.roadmap-header
{
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 24px;
    margin-bottom   :28px;
}

.roadmap-title
{
    margin : 0 0 8px;
}

/*****************************************************************************
 * NOTE: A comma is used when separating two classes when it is not required
 *       for one to be inside of the other. These are two separate classes
 *       with shared styles
 *****************************************************************************/
.roadmap-intro,
.roadmap-summary
{
    color : var(--e-global-color-secondary, #c8c8ce);
}

/* Button style used by the submit button */
.roadmap-submit-trigger,
.roadmap-form-submit
{
    border        : 0;
    border-radius : 999px;
    padding       : 12px 18px;
    background    : var(--TntMovieClubPrimaryColorDark);
    color         :#fff;
    font-weight   :700;
    cursor        :pointer;
}

.roadmap-submit-trigger:hover,
.roadmap-form-submit:hover
{
    background : var(--TntMovieClubPrimaryColorLight);
    color      : #fff;
}

.roadmap button:focus-visible,
.roadmap input:focus-visible,
.roadmap textarea:focus-visible,
.roadmap-card-heading:focus-visible
{
    outline        : 3px solid #fff;
    outline-offset : 3px;
}

/* Container holding the In Progress and To Do timeline stages */
.roadmap-list
{
    display : grid;
    gap     : 34px;
}

.roadmap-stage
{
    --stage-color : #767682;
}

.roadmap-stage.is-active
{
    --stage-color : #2fa866;
}

.roadmap-stage.is-planned
{
    --stage-color : #c58a2b;
}

.roadmap-stage-heading
{
    display         : flex;
    align-items     : center;
    justify-content : space-between;
    gap             : 18px;
    margin-bottom   : 14px;
}

.roadmap-stage-title
{
    margin      : 0 0 3px;
    color       : var(--stage-color);
    font-size   : 1.45rem;
}

.roadmap-stage-description
{
    margin : 0;
    color  : var(--e-global-color-secondary, #6f7178);
}

.roadmap-stage-count
{
    flex          : 0 0 auto;
    padding       : 5px 11px;
    border        : 1px solid var(--stage-color);
    border-radius : 999px;
    color         : var(--stage-color);
    font-size     : .8rem;
    font-weight   : 700;
}

/* The vertical line and round nodes create the timeline relationship. */
.roadmap-timeline
{
    position     : relative;
    display      : grid;
    gap          : 14px;
    padding-left : 34px;
}

.roadmap-timeline::before
{
    content       : "";
    position      : absolute;
    top           : 12px;
    bottom        : 12px;
    left          : 10px;
    width         : 3px;
    border-radius : 999px;
    background    : color-mix(in srgb, var(--stage-color) 55%, transparent);
}

/* Each roadmap item is an expandable point on the timeline. */
.roadmap-card
{
    position      : relative;
    border        : 1px solid color-mix(in srgb, var(--stage-color) 28%, transparent);
    border-radius : 14px;
    background    : var(--global-default-background, #17171d);
    box-shadow    : 0 7px 22px rgba(0,0,0,.1);
    transition    : transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.roadmap-card::before
{
    content       : "";
    position      : absolute;
    top           : 25px;
    left          : -31px;
    width         : 14px;
    height        : 14px;
    border        : 3px solid var(--global-default-background, #fff);
    border-radius : 50%;
    background    : var(--stage-color);
    box-shadow    : 0 0 0 2px var(--stage-color);
}

.roadmap-card:hover,
.roadmap-card:focus-within,
.roadmap-card[open]
{
    transform    : translateY(-2px);
    border-color : var(--stage-color);
    box-shadow   : 0 11px 28px rgba(0,0,0,.17);
}

.roadmap-card-heading
{
    display    : grid;
    gap        : 10px;
    padding    : 18px 22px;
    cursor     : pointer;
    list-style : none;
}

.roadmap-card-heading::-webkit-details-marker
{
    display : none;
}

.roadmap-card-hint
{
    color      : var(--stage-color);
    font-size  : .8rem;
    font-weight: 700;
}

.roadmap-card[open] .roadmap-card-hint::after
{
    content : " — open";
}

.roadmap-card-details
{
    padding    : 0 22px 20px;
    border-top : 1px solid color-mix(in srgb, var(--stage-color) 20%, transparent);
}

/* Data for a card. This includes repository, issue number, status, etc. */
.roadmap-meta
{
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px;
}

.roadmap-meta span
{
    padding       : 4px 9px;
    border-radius : 999px;
    background    : rgba(255,255,255,.1);
    font-size     : .78rem;
}

.roadmap-card-title
{
    display   : block;
    margin    : 0;
    font-size : 1.25rem;
    font-weight : 700;
}

.roadmap-summary
{
    margin        : 16px 0 0;
    white-space   : pre-wrap;
    overflow-wrap : anywhere;
}

/* Container for the friendly GitHub label names displayed beneath each summary. */
.roadmap-labels
{
    display   : flex;
    flex-wrap : wrap;
    gap       : 8px;
    margin-top: 14px;
}

/* Give each individual label a compact badge appearance. */
.roadmap-label
{
    padding       : 4px 9px;
    border-radius : 999px;
    background    : rgba(199,55,74,.24);
    font-size     : .78rem;
}

/*******************************************************************
 * Form for feature requests or bug reports
 *******************************************************************/

.roadmap-overlay[hidden]
{
    display : none !important;
}

.roadmap-overlay
{
    position    : fixed;
    inset       : 0;
    z-index     : 10000;
    display     : grid;
    place-items : center;
    padding     : 20px;
    background  : rgba(0,0,0,.78);
}

.roadmap-dialog
{
    width         : min(100%, 560px);
    max-height    : calc(100vh - 40px);
    overflow      : auto;
    padding       : 28px;
    border-radius : 16px;
    background    :#15151b;
    color         :#fff;
}

.roadmap-form
{
    display : grid;
    gap     : 10px;
}

.roadmap-form fieldset
{
    display   : flex;
    flex-wrap : wrap;
    gap       : 18px;
    border    : 0;
    padding   : 0;
}

.roadmap-form input[type = "text"],
.roadmap-form textarea
{
    width         : 100%;
    border        : 1px solid #666;
    border-radius : 8px;
    padding       : 11px;
    background    : #fff;
    color         : #111;
}

/* Section where the cancel and submit buttons are */
.roadmap-actions
{
    display         : flex;
    justify-content : flex-end;
    gap             : 12px;
    margin-top      : 10px;
}

.roadmap-cancel
{
    border : 1px solid #aaa;
    border-radius : 999px;
    padding       : 11px 18px;
    background    : transparent;
    color         : #fff;
    cursor        : pointer;
}

/* Used when the button is currently disabled */
.roadmap-form-submit:disabled
{
    opacity : .55;
    cursor  : wait;
}

.roadmap-form-feedback
{
    min-height : 24px;
}

@media (max-width : 680px)
{
    .roadmap-header
    {
        align-items    : stretch;
        flex-direction : column;
    }
    
    .roadmap-submit-trigger
    {
        width : 100%;
    }
    
    .roadmap-dialog
    {
        padding : 22px 18px;
    }

    .roadmap-stage-heading
    {
        align-items    : flex-start;
        flex-direction : column;
        gap            : 8px;
    }

    .roadmap-timeline
    {
        padding-left : 25px;
    }

    .roadmap-timeline::before
    {
        left : 7px;
    }

    .roadmap-card::before
    {
        left : -24px;
    }

    .roadmap-card-heading,
    .roadmap-card-details
    {
        padding-left  : 16px;
        padding-right : 16px;
    }
}