/* Styles for Hedonic News, as they were before the Oct 21 2026 changes.
   The first two sections are the page's original <style> blocks; the last section
   holds the styles the markup used to set inline, now attached to classes. */

html {
    font-size: 32px;
    --accent-color-main: #33bb44;
    --accent-color-heavy: #22aa33;
    --text-color-main: #222222;
    --text-color-emph: #000000;
    --text-color-heavy: #000000;
    --bg-color: #fefefc;
    --container-color: #faf7f8;
    --main-bg-color: #f8f6fa;
    --link-color: #479;
}

body {
    font-family: Verdana, sans-serif;
    color: var(--text-color-main);
    background-color: var(--bg-color);
    margin: 0.375em;
    padding: 0;
}

header {
    color: var(--text-color-heavy);
    background-color: var(--accent-color-main);
    text-align: left;
    line-height: 0.75em;
}

h1 {
    font-size: 0.75em;
    margin: 0 0.3125rem 0 1.125rem;
    padding: 0.125rem 0 0.125rem 0;
    line-height: 0.75rem;
}

@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

main {
    background-color: var(--main-bg-color);
    font-size: 0.5rem;
    /*box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);*/
    & h1 {
        font-size: 1.5em;
        line-height: 1em;
        padding-left: 0.1em;
    }
}

footer {
    color: var(--text-color-main);
    background-color: var(--accent-color-main);
    padding: 0px 10px 10px 10px;
    text-align: center;
    font-size: 14px;
}

.outer-container {
    margin: 0px auto 3.125em auto;
    background-color: var(--container-color);
    /*#f6f6ef; */
    min-width: 800px;
    width: 85%;
}

.article-title {
    color:var(--text-color-main);
    transition: color 0.2s ease-in-out;
    &:hover {
        color: var(--accent-color-emph);
        text-decoration: underline;
    }
}

.article-list {
    list-style-type: none;
    padding-left: 1.5625rem;
    padding-top: 0;
    min-height: 100vh;
}

.article-title {
    font-size: 0.625rem;
    color: var(--text-color-heavy);
    text-decoration: none;
    transition: color 0.2s;
}

.article-date, .article-author, span.article-domain {
    margin: 0.0625rem 0 0.3125rem 0.0rem;
    color: #828282;
    font-size: 0.5rem;
    text-decoration: none;
}

/* Links sitting inside description text read slightly blue */
.site-description a, .article-date a, .article-author a, span.article-domain a {
    color: var(--link-color);
    text-decoration: none;
    &:hover {
        text-decoration: underline;
    }
}

.no-articles {
    text-align: center;
    color: #999;
}

.site-description {
    font-size: 12px;
    color: var(--text-color-main);
    text-align: right;
    float: right;
    margin: 0;
    padding: 1em;
    opacity: 0.5;
    transition: opacity 0.2s ease-in-out;
    &:hover {
        opacity: 1.0;
    }
}

.zoom-wrapper {
    transform: 1;
    transform-origin: top left;
}

#custom-search-container {
    background-color: none;
    font-size: 16px;
    & h3 {
        margin-top: 0;
        font-size: 18px;
    }
}
#custom-search-form {
    display: flex;
    gap: 1em;
    flex-direction: column;
    & div.settings-row {
        display: flex;
        flex-direction: row;
        gap: 1em;
    }
    & div.setting {
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: center;
    }
    & button {
        font-size: 14px;
    }
    padding: 1em;
    height: min-content;
    border-bottom: 2px solid gray;
}
#custom-title {
    /*background: linear-gradient(60deg, #330000, #332000, #333300, #203300, #003300, #003320, #003333, #002033, #000033, #200033, #330033, #330020, #330000);*/
    /*background-size: 200% 100%; */
    /*background-clip: text;*/
    /*-webkit-background-clip: text; */
    /*color: transparent;*/
    /*animation: gradient 3s linear infinite;*/
    /*line-height: normal;*/
    background-color: #fff0;
    border: 2px solid #fff0;
    color: var(--text-color-heavy);
    border-radius: 8px;
    display: inline-block;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    &:hover {
        background-color: #fff3;
        border: 2px solid #fff4;
        padding-left: 4px;
        padding-right: 4px;
    }
}
#search-status {
    margin-top: 5px;
    color: #333;
    font-size: 14px;
}
#openrouter-container {
    display: flex;
    flex-direction: column;
    gap: 1em;
    & .settings-row {
        padding-left: 1.5em;
    }
    &.collapsed {
        b::before {
            content: "+ ";
        }
        .settings-row {
            display: none;
        }
    }
    &:not(.collapsed) {
        b::before {
            content: "- ";
        }
    }
}
#profile-dropdown {
    display: flex;
    flex-direction: column;
}
.profile-item {
    font-weight: 600;
    font-size: 0.65em;
    padding: 0.125rem 0.3125rem 0.125rem 1.125rem;
    line-height: normal;
    & span {
        cursor: pointer;
    }
}
.profile-selected {
    display: none;
}
#add-new-topic {
    font-size: 0.6em;
    padding: 0.125rem 0.3125rem 0.125rem 1.125rem;
    & span {
        cursor: pointer;
    }
}

/* ---- styles that the markup used to set inline ---- */

#custom-search-form div.setting {
    flex-direction: column;
}

.cost-note {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

input.color-input {
    height: 1.5em;
    padding: 0;
    border: none;
}

.cache-warning {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
}

.cache-warning-text {
    margin: 0;
    font-size: 14px;
    color: #856404;
}

.cache-warning-row {
    margin-top: 8px;
    display: flex;
    gap: 10px;
    align-items: center;
}

.key-input {
    padding: 4px;
    font-size: 12px;
    width: 200px;
}

.small-btn {
    padding: 4px 8px;
    font-size: 12px;
}

/* The old markup ended each title link with template whitespace, which rendered as one space inside the link */
.article-title::after {
    content: " ";
}

/* Hidden until the scripts set an inline display value */
.hidden, #profile-dropdown.hidden {
    display: none;
}