/* site.css */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
        "Segoe UI Emoji", "Segoe UI Symbol";

    --border-radius: 13px;
    --small-gap: 6px;
    --regular-gap: 20px;
    --large-gap: 60px;
    --regular-padding: 12px;
    --small-font: 14px;
    --medium-font: 18px;

    /*
    #2A6478
    #308446
    */
    /* light-mode colors */
    --float-shadow: 0 15px 20px rgba(0, 0, 0, 0.85);
    --grey-color: #323b3a;
    --money-color: #007A33;
    --dark-blue-grey: rgb(14, 16, 24);
    --dark-cream: rgb(245, 238, 225);
    --warning-red: rgb(255,15,15);
    /* --background-color: rgb(241, 232, 216);
    --text-color: rgb(75, 54, 33); */
    --background-color: rgb(250, 247, 240);
    --text-color: rgb(20, 20, 21);
    --link-color: rgb(0, 0, 238);
    --link-hover-color: rgb(85, 26, 139);

}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: rgb(20, 20, 21);
        --text-color:  rgb(250, 247, 240);
        --link-color: rgb(97, 169, 255);
        --link-hover-color: rgb(145, 197, 255);
        /* --background-color: #1e1e1e;
        --text-color: #f0f0f0; */
    }
}


/*
    Sitewide styles
*/
body {
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    border-color: var(--text-color);
    
    outline-color: var(--text-color);
}

header {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    align-items: center;
    justify-content: center;
    margin-bottom: 77px;
}

@media (max-width: 800px) {
    header {
        margin-bottom: 22px;
    }   
}

main {
    min-height: 60vh;
}

article {
    width: 45dvw;
    margin: auto; 
}

@media (max-width: 800px) {
    article {
        width: 95dvw;
    }   
}

button, div, input, select {
    border-radius: var(--border-radius);
}

a:link {
    color: var(--link-color);
}

a:visited {
    color: var(--link-hover-color);
}

a:hover {
    color: var(--link-hover-color);
}

a:active {
    color: var(--link-hover-color);
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1em;
    margin-bottom: 0.5em;
}

.header-links {
    display: flex;
    gap: var(--regular-gap);
    flex-wrap: wrap;
}

@media (max-width: 760px) and (max-resolution: 1dppx),
    (max-width: 1140px) and (min-resolution: 1.01dppx) and (max-resolution: 1.75dppx),
    (max-width: 1520px) and (min-resolution: 1.76dppx) {

    .header {
        width: 100%;
    }
}

@media (max-width: 460px) and (max-resolution: 1dppx),
    (max-width: 790px) and (min-resolution: 1.01dppx) and (max-resolution: 1.75dppx),
    (max-width: 920px) and (min-resolution: 1.76dppx) {

    .header {
        margin-bottom: var(--small-gap);
    }
}



.footer {
    display: flex;
    flex-direction: column;
    width: 100%;
    text-align: center;
    align-items: center;
    margin-top: 77px;
    /* height: 160px; */
}

.hyperlink {
    text-decoration: underline;
}
    .hyperlink:hover {
        cursor: pointer;
    }

.simple-hyperlink {
}
    .simple-hyperlink:hover {
        cursor: pointer;
    }

.simple-hyperlink.opaque {
    opacity: 30%;
}

.standard-input {
    padding: 6px;
    font-size: var(--medium-font);
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;

    box-sizing: border-box;
    width: 100%;
}

    .standard-input:focus {
        opacity: 0.85;
    }

.standard-checkbox {
    appearance: none;
    width: 35px;
    height: 35px;
    margin: 0;
    border: 1px solid;
    background-color: var(--background-color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .standard-checkbox:checked::after {
        content: "";
        width: 16px;
        height: 16px;
        background-color: var(--text-color);
        border-radius: 7px;
    }

    .standard-checkbox:focus {
        opacity: 0.85;
    }

.standard-select {
    /* appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
     */
    padding: 6px;
    font-size: var(--medium-font);
    font-family: var(--font-sans);
    background-color: var(--background-color);
    color: var(--text-color);
    border: 1px solid;
    outline: none;
}
    .standard-select:focus {
        opacity: 0.85;
    }

.big-input {
    min-width: 200px;
    min-height: 120px;
    font-size: 1.3rem;
}

.primary-cta,
.secondary-cta,
.warning-cta {
    padding: 12px;
    font-family: var(--font-sans);
    border: 2px solid;
    /* border-radius: 13px; */
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.primary-cta {
    background-color: var(--text-color);
    color: var(--background-color);
}

    .primary-cta:hover,
    .primary-cta:active {
        background-color: var(--background-color);
        color: var(--text-color);
    }

.secondary-cta {
    background-color: var(--background-color);
    color: var(--text-color);
}

    .secondary-cta:hover,
    .secondary-cta:active {
        background-color: var(--text-color);
        color: var(--background-color);
    }

.warning-cta {
    background-color: var(--warning-red);
    color: var(--text-color);
}

    .warning-cta:hover,
    .warning-cta:active {
        background-color: var(--text-color);
        color: var(--background-color);
    }

.short-cta {
    padding-top: 0;
    padding-bottom: 0;
}

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
}

.centered-full-height {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.centered-text {
    text-align: center;
}

.small-gap {
    gap: var(--small-gap);
}

.regular-gap {
    gap: var(--regular-gap);
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.inline-element {
    display: inline;
}

.capped-length-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.small-bottom-margin {
    margin-bottom: var(--small-gap);
}

.medium-bottom-margin {
    margin-bottom: var(--regular-gap);
}

.large-bottom-margin {
    margin-bottom: var(--large-gap);
}

.hidden-text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
}

/*
    Colors
*/
.money {
    color: var(--money-color);
}

.validation-message {
    color: var(--warning-red);
    display: inline;
}


/* ================================================================================================================== */
/* Special */
/* ================================================================================================================== */
.header-title-link {
    color: inherit;
    text-decoration: none;
}
    .header-title-link:hover {
        cursor: pointer;
        text-decoration: none;
    }
    
    .header-title-link:visited {
        color: inherit;
    }

    .header-title-link:active {
        color: inherit;
    }

.hero-text {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 35vh;
    gap: 5px;
}

.hero-text > div:first-child {
    margin-bottom: 20px;
}

.featured-post {
    display: block;
    width: 100%;
    max-width: 600px;
    text-decoration: none;
    color: inherit;
}
    .featured-post:visited {
        color: inherit;
    }

.featured-post-inner {
    border: 2px solid var(--text-color);
    padding: 20px;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.featured-post:hover .featured-post-inner {
    transform: translateY(-3px);
    background-color: var(--text-color);
    color: var(--background-color);
}

.featured-label {
    font-size: var(--small-font);
    opacity: 0.7;
    display: block;
    margin-bottom: var(--small-gap);
}