/* 
 * styles.css
 */

/* Styling */
html {
    /* Site colors */
    /* Troy colors sourced from eyedropper on random google image:
        https://www.redbubble.com/i/art-board-print/Troy-Logo-by-beck-dr/36641602/xpmg */
    --troy-yellow: #e4a023;
    --troy-blue: #104686;
    --troy-red: #ad141e;

    --main: hsl(from var(--troy-blue) h s 5);
    --text: hsl(from var(--troy-blue) h calc(s * 0.5) calc(l + 50)); /* contrast-color(var(--main)); */
    --accent: hsl(from var(--troy-yellow) h s l);

    /* Site fonts */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

body {
    background-color: var(--main);
    color: var(--text);

    /* Overall page structure: nav, main, footer. May add some left and right columns next to main in the future. */
    display: grid;
    gap: 0.5em;
    min-height: 100dvh; /* A tall screen still gets the footer at the bottom of the viewport. */
    grid-template-rows: auto 1fr auto; /* The main content takes up any extra space */
}

main {
    padding: 0 1em; /* Don't let content touch the absolute edges of the viewport */
    margin: 0 auto; /* Inline centering */
}

main > * {
    /* Spacing */
    margin-bottom: 0.5rem;
}

h1 {
    font-size: xxx-large;
}
h1,h2,h3,h4,h5,h6 {
    color: var(--accent);
    text-align: center;
}

p {
    /* 80 chars is good for readability 
        https://www.w3.org/WAI/WCAG22/Understanding/visual-presentation#:~:text=Width%20is%20no%20more%20than%2080%20characters%20or%20glyphs%20(40%20if%20CJK). */
    max-width: 80ch;
    /* Breaks super long words (or urls) even if there is no natural hyphen
        unlike word-break: break-all, this will prefer to wrap a word to a new line FIRST
        So my understanding is it only breaks if the line is truly longer than an entire line
        This can create some weird gaps before the long word, for example:
        
        +----------------------------------+
        | this is some                     |
        | reallylongworddthatwrappedandlea |
        | vesthepreviouslinewithareally    |
        | weird blank space following it   |
        +----------------------------------+

        Unfortunately, it seems text-wrap: pretty will not solve this for us.
        
        Very helpful for narrow screens (mobile)
    */
    word-break: break-word;
}
a {
    color: var(--troy-yellow);

    /* Hover - TODO: Remove magic numbers */
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.05em;
    transition: text-underline-offset 0.1s ease-out;
    &:hover{
        text-underline-offset: 0.3em;
    }
}

nav, footer {
    /* Centering */
    display: flex;
    gap: 2em;
    /* Need border to stay max width, yet items should still be centered. Centering is hard! */
    justify-content: center;

    /* Aesthetics */
    padding: 0.4em 0; /* TODO: Remove this magic number */

    /* Separate visually from content */
    --border:  2px solid var(--text); /* TODO: Don't like using "--text for not text */

    &:is(nav) {
        /* Positioning - Always on the top of the screen */
        position: sticky;
        top: 0;
        z-index: 1;
        background-color: inherit;

        border-bottom: var(--border);
    }
    &:is(footer) {
        border-top: var(--border);
    }
}

.actions {
    /* Everything looks better centered here */
    text-align: center;
}

/* A form that only has a single input (and maybe a submit button)
    e.g. An "enter your address" text field with a submit button for geocoding */
.single-input-form {
    display: inline-block;
}

/* Holds the map and the result from the location */
.info-container {
    /* Leaflet uses lots of z-index to manage layers
    This just bundles all of that up at one new stacking context,
    and deliberately places it under the nav's z-index */
    isolation: isolate;
    z-index: 0;

    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1em;

    .portrait {
        width: 10em;
        border: solid var(--troy-yellow) 2px;
    }

    dt {
        font-size: small;
        &::after {
            content: ":"
        }

        /* if the corresponding description is empty OR
            if the corresponding description has only one empty anchor  */
        &:has(+ dd:empty),
        &:has(+ dd>a:empty:only-child) {
            /* NOTE: Users may be confused why there is no data displayed when there should be
                Perhaps instead of hiding the <dd>, we should instead show a "NO DATA" message */
            display: none;
        }
    }
    dd {
        font-size: large;
        font-weight: bold;
        color: var(--troy-yellow);
        padding-bottom: 0.5em;
        
        /* if the description is empty OR
            if the description has only one empty anchor  */
        &:empty,
        &:has(a:empty:only-child) {
            padding-bottom: 0;
        }
    }
}

/* Leaflet requires an id on the map element:
    https://leafletjs.com/examples/quick-start/#preparing-your-page
    "Put a div element with a certain id where you want your map to be"
    "Make sure the map container has a defined height"
*/
#map {
    min-height: 450px;
    height: 60vh;
    min-width: 320px;

    /* Aesthetics */
    border: solid var(--troy-yellow) 2px;
}
/* Return to Troy button */
#return {
    width: 100%;
}