/*
 * Copyright (C) 2024 dwlr <dweller@cabin.digital>
 *
 * BSD 3-Clause License (BSD-3-Clause)
 * See LICENSE for details
 */

:root
{
    --qshadow:    var(--qborder);
    --qshadowh:   #BEC0C4;
}

#logo      { font-size: 1rem; }
#logo > h1 { font-size: 1.5rem; }

#logo-let    { font-size: 1.25em; }
#logo-me     { font-size: 1em; }
#logo-man    { font-size: 0.9em; }
#logo-that   { font-size: 1em; }
#logo-for    { font-size: 1.15em; }
#logo-you    { font-size: 1em; }

#main
{
    justify-content: flex-start;
    align-items:     flex-start;
}

#main > header
{
    flex-grow: 0;
    justify-content: flex-start;
    align-items:     baseline;

    padding: 1.5rem 2% 1.5rem 5%;
    padding-bottom: 0;

    border-bottom: solid 1px var(--border);
}

#search_pane
{
    max-width: 95%;
    flex-grow: 0;
}

#logo { margin-right: 1.5rem; }

#mank
{
    background-color: var(--qbg);
    color:            var(--fg-light);
}

#man { padding-left: 5pt; }

#man, #mank
{
    font-size:     13pt;
    min-width:     25pt;
    margin:        0;
    border-radius: 0;
}

#mank
{
    background-color: transparent;
    color:            var(--fg-light);
    border-color:     transparent;
}

#man:hover, #mank:hover
{
    text-decoration:  underline;
    box-shadow:       none;
}

#query_wrap
{
    overflow: hidden;
    padding: 0;
}

#query { margin-left: 15pt; }

#query_icon
{
    display: inline-block;

    background: no-repeat url("/imgs/search-wt.svg");
    background-size: contain;
    background-position: center;

    height:  12pt;
    width:   12pt;

    margin:  3pt 0 0 0;
}

@keyframes logo-ver_scale
{
    0%, 100% { transform: rotate(-10deg); }
    50%      { transform: rotate( 10deg); }
}

#topnav { margin-left: auto; }

#results
{
    flex-grow: 1;
    margin: 0 5%;

    width: min(100% - 3rem, 90%);
}

#results > p
{
    font-size: small;
    margin-bottom: 1.5rem;
}

#results > dl { overflow-wrap: break-word; }
#results > dl > dt { font-size: large; }
#results > dl > dd
{
    color: var(--fg-mid);
    margin: 5pt 0 2rem 0;
    font-size: 12pt;
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --qshadow:    transparent;
        --qshadowh:   #171717;
    }

    #query_wrap
    {
        background-color: var(--qbgh);
        border: 1px solid var(--qborderh);
    }

    #query_wrap:hover { box-shadow: 0.5pt 0.75pt 0.5rem var(--qshadowh); }

    #man { border-color: transparent; }
}

@media (max-width: 970px)
{
    #topnav { display: none; }
}

@media (max-width: 800px)
{
    #main > header
    {
        flex-direction:  column;
        justify-content: center;
        align-items:     center;

        padding: 0;
        margin:  0;
    }

    #query_wrap { width: min(42rem, 95dvw); }
    #logo-ver_wrap { min-height: 15pt; }
}