/*
 * This is a global components stylesheet, until I figure out a better way of loading styles. 
 */

/* header.liquid */

#header {
    font-family: "Jost", sans-serif;

    #wordmark {
        height: 80px;
        padding: 0px calc((100% - var(--main-content-width)) / 2);
        background-color: var(--secondary);
        color: var(--text-secondary);

        display: flex;
        align-items: center;

        font-size: 1.5rem;
        font-weight: bold;

        > a {
            margin-inline-start: 25px;
        }
    }

    #main-nav {
        height: 40px;
        background: var(--secondary);
        border: 1px solid white;
        border-left: 0;
        border-right: 0;
        color: var(--text-secondary);
        padding: 0px calc((100% - var(--main-content-width)) / 2);
        display: flex;
        align-items: center;
        font-size: 1rem;
        font-weight: 400;

        & > ul {
            display: flex;
            list-style: none;
            gap: .75rem;
            margin-inline: 25px;

            > li {
                text-transform: uppercase;

                & > a.active-menu {
                    font-weight: 600;
                }
            }
        }
    }
}

/* breadcrumps.liquid */

.breadcrumbs {
    margin-bottom: 1rem;
    font-weight: 600;

    & b {
        font-weight: 700;
    }

    & ul {
        display: flex;
        flex-wrap: wrap;
        list-style: none;
        color: #424242;
        font-size: 1rem;
    }

    &.color-primary ul {
        color: white;
    }

    & li {
        white-space: nowrap;

        &:not(:first-of-type)::before {
            content: "  > ";
            white-space: pre;
        }
    }
}

/* szavazasinfo.liquid */
.szavazas-info {
    display: grid;
    grid-template-columns: 1fr 500px;
    
    background: var(--background-accent);
    margin-left: -25px;
    margin-right: -25px;
    padding: 20px 25px;

    .info {
        margin-right: 1rem;

        & h3 {
            margin-top: 0;
        }

        & h4 {
            margin-top: 0.6em;
        }
    }

    & .two-column {
        display: grid;
        grid-template-columns: 1fr 2fr;
    }

    & .two-column .key {
        color: var(--accent-color);
    }

    & .two-column .billTitle {
        grid-column:1/-1; 
        color: inherit; 
    }

    @media screen and (max-width: 1000px) {
        grid-template-columns: 1fr;

        .info {
            grid-row: 2;
            padding-top: 20px;
        }
    }
}

.result {
    margin-top: -20px;
    margin-bottom: -20px;
    color: var(--text-secondary);

    display: flex;
    flex-direction: column;
    justify-content: center;
    
    text-transform: uppercase;
    font-size: 36px;

    .elfogadas {
        display: flex;
        justify-content: center;
        font-weight: bold;
        margin-top: 80px;
        margin-bottom: 50px;
    }

    .elsodleges-szavazatszamok {
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 45px;
    }

    :is(.igen, .nem) > div:last-child {
        font-size: 20px;
        text-align: center;
        margin-top: -8px;
    }

    .igen > :first-child {
        font-weight: bold;
    }

    .nem > :first-child {
        font-weight: bold;
    }

    .tovabbi-szavazatszamok {
        font-size: 20px;
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 25px;
    }

    .tovabbi-szavazatszamok span {
        font-weight: bold;
    }

    &.sikeres {
            background-color: #416C35;
    
            .nem > div:first-child > span:last-child {
                font-weight: 400;
            }
        }
    
    &.sikertelen {
        background-color: #6e1010;

        .igen > div:first-child > span:last-child {
            font-weight: 400;
        }
    }

    @media screen and (max-width: 1000px) {
        grid-row: 1;
        margin-left: -25px;
        margin-right: -25px;
        margin-bottom: 0;
        display: grid;
        grid-template-rows: 1fr 1fr 1.5rem;
        grid-template-columns: minmax(min-content,1fr) 1fr minmax(min-content,1fr);
        padding-top: 1.5rem;
        padding-bottom: 1rem;
        row-gap: 1rem;
        font-size: 24px;
        text-wrap: nowrap;

        .elfogadas {
            grid-row: 1;
            margin: 0;
            grid-column: 2;
            align-self: center;
        }

        .elsodleges-szavazatszamok {
            grid-row: 2;
            margin: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-column: 1/-1;
        }

        .tovabbi-szavazatszamok {
            font-size: 20px;
            font-size: 18px;
            grid-row: 3;
            grid-column: 1/-1;
            max-width: 100vw;
        }

        :is(.igen, .nem) > div:last-child {
            display: none;
        }

        .igen {
            grid-column: 1;
        }

        .nem {
            grid-column: 2;
        }

        .igen, 
        .nem {
            font-size: 24px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
}

#votes-detailed {
    margin-top: 1.25rem;

    .controls {
        display: flex; 
        justify-content: space-between; 
        flex-wrap: wrap; 
        gap: 1rem; 
        align-items: center; 
        margin-bottom: 1rem;
        white-space: nowrap;
    }

    .search-box input {
        padding: 0.6rem 1rem; 
        border-radius: 6px; 
        border: 1px solid #ccc;
    }

    .search-box {
        width: fit-content;
        max-width: 100%;
    }

    .search-box > input {
        width: fit-content;
        max-width: 100%
    }

    .column-box {
    }
    
    .osszesites-frakcionev::first-letter {
        text-transform: capitalize;
    }

    #tablazat {
        .anchor {
            visibility: hidden;
        }

        td:hover .anchor,
        :target .anchor {
            visibility: visible;
        }
    }
    
    .frakcio-szerint {
        .group-title {
            border-bottom: 2px solid #ddd; 
            padding-bottom: 0.5rem;
        }
        
        .card-grid {
            display: grid; 
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr)); 
            gap: 1rem; 
            margin-top: 1rem;

            @media screen and (max-width: 400px) {
                grid-template-columns: 1fr;
            }
        }
    }
    
    .szavazat-szerint {
        display: flex; 
        flex-direction: column; 
        gap: 2rem;
        margin-top: -1rem; /* flex disables margin collapse, this matches alignment with other, margin collapsed tabs */
        
        .split-row {
            display: flex; 
            flex-wrap: wrap; 
            gap: 1.5rem;
            
            .column-box {
                flex-grow: 1;

                > h3 {
                    border-bottom: 2px solid #ddd; 
                    padding-bottom: 0.5rem;
                }

                .column-grid {
                    display: grid; 
                    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); 
                    gap: 0.75rem; 
                    margin-top: 1rem;
                }
            }
        }
    }

    .osszesites {
        .osszesites-frakcionev ~ td,
        tfoot td {
            text-align: center;

            &:last-of-type {
                font-width: bold;
            }
        }

        tfoot {
            tr {
                background: #f1f5f9; 
                font-weight: bold; 
                border-top: 3px double #cbd5e1;
            }
        }

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

        .table-notice {
            color: var(--accent-color);
            font-size: .8em;
            margin-top: .5rem;
        }
        .table-notice code {
            font-family: 'consolas';
            display: block;
        }
    }
}

.mp-card {
    display: grid; 
    grid-template-columns: 80px 1fr 80px; 
    align-items: center; 
    gap: 0.5rem; 
    /* width: {{ width | default: 350px }};  */
    background: var(--background-secondary); 
    padding: 1rem; 
    border-radius: 6px; 
    border: 1px solid var(--background-accent);

    &:target {
        outline: 2px solid var(--action-color);
        outline-offset: 1px;
    }

    > img {
        width: 80px; 
        object-fit: cover; 
        border-radius: 40px; 
        outline: 2px solid;
    }

    > .text {
        line-height: 1.2; 
        display: flex; 
        flex-direction: column; 
        height: 100%; 
        justify-content: center; 
        margin-left: .5rem;

        > div:first-child {
            display: flex; 
            flex-direction: column; 
            flex-grow: 1; 
            justify-content: center;
        }

        a {
            font-weight: 600;
        }

        * {
            word-wrap: anywhere;
        }

        .mp-card-text-vote {
            font-size: 0.85rem; 
            color: var(--accent-color); 
            text-align: center;
            margin-bottom: -.25rem;
            margin-top: .25rem;

            .anchor {
                float: right;
                margin-right: -1ch;
                margin-left: 1ch;
            }
        }
    }

    > .vote-indicator {
        display: flex;
        justify-content: center;
        align-items: center;
        align-self: stretch;
        height: calc(100% + 2rem);
        min-width: 60px;
        margin: -1rem -1rem -1rem 1rem;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
        color: white;
        font-size: 1.5rem;
        background-color: var(--accent-color);

        &.igen {
            background-color: #416c35;
        }

        &.nem {
            background-color: #6e1010;
        }

        &.tartozkodik {
            background-color: #ecc654;
        }
    }

}

details.collapsible {
    summary {
        list-style: none;
        transition: all 250ms ease-in-out;
        user-select: none;
        cursor: pointer;

        &:is(:hover, :focus-visible) {
            color: var(--accent-color);
        }

        &:active {
            color: var(--accent-action-color);
        }
    }

    summary > :first-child::before {
        display: inline-block;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        font: var(--fa-font-solid);

        width: 17px;
        margin-right: .75rem;
    }

    &[open] summary > :first-child::before {
        content: '\f107';
    }

    &:not([open]) summary > :first-child::before {
        content: '\f105';
    }
}

.vote-card {
    display: grid;
    grid-template-rows: 1fr auto;
    background: var(--background-secondary);
    border-radius: 6px;
    border: 1px solid var(--background-accent);

    .text {
        padding: .5rem 1rem;

        .header {
            font-size: 0.85rem;
            color: gray;
            display: flex;
            justify-content: space-between;
            margin-bottom: .5rem;
        }

        a {
            font-weight: bold;
        }

        .multi {
            font-weight: bold;
            color: var(--accent-color);
        }

        .reason {
            font-size: 1rem;
        }
    }

    .vote-list-result {
        color: var(--text-secondary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: .5em;
        text-transform: uppercase;
        font-size: 1.5rem;

        padding: 1em 0;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;


        &.sikeres {
            background-color: #416C35;
        }

        &.sikertelen {
            background-color: #6e1010;
        }

        .elfogadas {
            font-weight: bold;
        }

        .szavazatszamok {
            display: flex;
            justify-content: space-evenly;
            font-size: .8em;
            align-self: normal;

            .igen, .nem {
                font-weight: bold;
            }
        }

        .icon-indicator {
            display: none;
        }

    }

    &.thin {
        grid-template-columns: 1fr 60px;
        background: var(--background);

        & .vote-list-result {
            border-bottom-left-radius: 0;
            border-top-right-radius: 6px;

            &.sikeres {
                color: #416C35;
                background: #91B487;

                .icon-indicator.fa-square-xmark {
                    display: none;
                }
            }

            &.sikertelen {
                background-color: #af8f8f;
                color: #6e1010;
                
                .icon-indicator.fa-square-check {
                    display: none;
                }
            }
        }

        .title {
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            hyphens: none;
        }

        .szavazatszamok, .elfogadas, .reason {
            display: none;
        }

        .icon-indicator {
            display: block;
        }
    }
}

.vote-card-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
    row-gap: 1.5rem;
}

/* kepviselo */

#hero {
    background: var(--primary);
    color: var(--background-secondary);
    display: grid;
    grid-template-columns: subgrid;
    grid-column: /*full*/1/-1;
    justify-content: start;
    z-index: 1;
}

/* 
grid-template-columns: [full-start sidebar-start] 0 [sidebar-end] 1fr [main-start] minmax(0, var(--main-content-width)) [main-end] 1fr [full-end];
*/

.hero-content {
    grid-column: 3 /*main*/;
    padding: 20px 25px;
    color: white;

    display: grid;
    gap: 1rem 2rem;
    grid-template-columns: max-content 1fr;
    grid-template-rows: min-content max-content;
}

body.kepviselo .breadcrumbs {
    grid-column: 1/-1;
}

.details {
    grid-column: 2;
    justify-self: stretch;
    padding-top: 1rem;
    overflow: hidden;
}

.hero-content > img {
    width: 250px;
    border-radius: 100dvw; /* trick: css spec forces large border radii to cap at shorter edge -> my desired behavior */
    grid-column: 1;
    margin-bottom: -60px;
    outline: 2px solid white;
}

body > main {
    grid-template-rows: max-content;
}

.details h1 {
    margin-top: 0;
}

@media screen and (max-width: 1000px) {
    .hero-content {
        grid-column: 2;
        grid-template-columns: 1fr;
    }

    .hero-content > img {
        margin-bottom: 0;
        justify-self: center;
    }

    .details {
        grid-column: 1;
    }

    .details h1 {
        text-align: center;
    }
}