/* Directory page specific styling */
body.directory{
    padding-bottom:48px;
}

body.directory .site-header{
    background:#1d2025;
    border-bottom:1px solid var(--line);
}

body.directory .site-header .bar{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:16px;
    padding:16px 0;
    margin:0 auto;
    max-width:1500px;
    width:100%;
}

body.directory .site-header .bar > a{
    display:flex;
    align-items:center;
}

body.directory .site-header img{
    height:100px;
    width:auto;
    display:block;
    flex-shrink:0;
}

body.directory .site-header h1{
    margin:0;
    font-weight:800;
    font-size:clamp(1.6rem,2vw + 1rem,2.4rem);
    color:var(--phosphor);
    text-shadow:0 0 .35em var(--glow1),0 0 .15em var(--glow2);
    min-width:0;
    line-height:1.25;
}

body.directory .pref-toggle{
    justify-self:end;
}

@media (max-width:720px){
    body.directory .site-header .bar{
        grid-template-columns:auto 1fr;
        row-gap:12px;
    }

    body.directory .pref-toggle{
        grid-column:1 / -1;
    }

    body.directory .site-header img{
        height:84px;
    }
}

@media (max-width:520px){
    body.directory .site-header img{
        height:72px;
    }
}

body.directory .directory-main{
    margin:24px auto 0;
    max-width:1500px;
    width:100%;
}

body.directory .directory-main .container{
    width:100%;
    max-width:1500px;
    padding:0;
}

body.directory .greenbar-table{
    margin:12px 0 32px;
    width:100%;
    table-layout:fixed;
}

body.directory .greenbar-table thead th,
body.directory .greenbar-table tbody td{
    text-align:left;
}

body.directory .greenbar-table tbody td{
    vertical-align:top;
    word-break:break-word;
    overflow-wrap:break-word;
}

body.directory .greenbar-table tbody tr:nth-child(odd) td{
    background:var(--stripe1);
}

body.directory .greenbar-table tbody tr:nth-child(even) td{
    background:var(--stripe2);
}

body.directory .greenbar-table th:nth-child(1),
body.directory .greenbar-table td:nth-child(1){
    width:10%;
    text-align:center;
}

body.directory .greenbar-table th:nth-child(2),
body.directory .greenbar-table td:nth-child(2){
    width:16%;
    text-align:left;
}

body.directory .greenbar-table th:nth-child(3),
body.directory .greenbar-table td:nth-child(3){
    width:auto;
    text-align:left;
    font-size:0;
}

body.directory .greenbar-table td:nth-child(3) img{
    margin:1px 1px;
    max-width:110px;
    height:auto;
    vertical-align:middle;
}

body.directory .greenbar-table td:nth-child(3) .badges{
    margin:0;
    text-align:left;
}

body.directory .pseudo-link{
    color:var(--accent);
    border-bottom:1px dotted var(--accent);
    text-decoration:none;
    cursor:default;
}

body.directory .greenbar-table a{
    color:var(--accent);
    text-decoration:none;
    font-weight:700;
}

body.directory .greenbar-table a:hover{
    text-decoration:underline;
}

body.directory .greenbar-table tfoot{
    background:rgba(0,0,0,.15);
}

body.directory .greenbar-table tfoot td{
    padding:12px 48px 12px 16px;
    font-size:.9rem;
    color:var(--muted);
    text-align:right !important;
    margin-right: 100px;
}

body.directory .greenbar-table tfoot td span{
    font-weight:700;
    color:var(--text);
}

body.directory .greenbar-table tfoot a{
    color:var(--accent);
}

@media (max-width:640px){
    body.directory .greenbar-table th:nth-child(1),
    body.directory .greenbar-table td:nth-child(1){
        width:auto;
    }

    body.directory .greenbar-table th:nth-child(2),
    body.directory .greenbar-table td:nth-child(2){
        width:auto;
        font-size: 12px;
    }

    body.directory .greenbar-table th:nth-child(3),
    body.directory .greenbar-table td:nth-child(3){
        width:auto;
    }

    body.directory .greenbar-table td img{
        width:46%;
        max-width:144px;
    }
}