@import "vars.css";
@import "fonts.css";
@import "article-teasers.css";
@import "teasers.css";
@import "header.css";
@import "footer.css";
@import "home.css";

@import "article.css";
@import "backtotop.css";
@import "pagination.css";
@import "banner-number.css";
@import "cover.css";
@import "search.css";
@import "account.css";
@import "subscribe.css";
@import "button.css";
@import "breadcrumbs.css";
@import "grid.css";
@import "utils.css";
@import "featured.css";
@import "all-articles.css";
@import "forms.css";

*, ::before, ::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    width: 100%;
    height: 100%;
}

body {
    font-family: var(--font-regular-serif);
    color: var(--color-black);
    font-size: var(--font-size-regular);
    line-height: var(--line-height-regular);
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

a:focus, :focus {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

p {
    margin: 0 0 1rem 0;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 1rem 0;
    /*line-height: 1.2;*/
}

h1, h2, h3{
    font-family: var(--font-accent-bold);
    font-weight: normal;
    line-height: 1.3;
}

h1{
    font-size: var(--font-xlg-xxlg);
}

h2{
    font-size: var(--font-lg-xlg);
}

img {
    max-width: 100%; /* never let the image overflow its container */
    width: 100%;
    height: 100%;
    display: block;
}

figure {
    margin: 0 0 1rem 0;
    max-width: 100%;
}

ol li{
    margin-bottom: 1rem;
}

details summary {
    cursor: pointer;
}

details summary > * {
    display: inline;
}



/* to check this one */


.callout {
    margin: 1rem 0;
    padding: 0.5rem;
    border: 1px solid currentColor;
    color: currentColor;
}

.callout.success {
    border-color: green;
}

.callout.warning {
    border-color: orange;
}

.callout.alert {
    border-color: red;
}

.callout.warning h2 {
    color: orange;
}

.callout.alert h2 {
    color: red;
}
.account-list-item .callout{
    background: white;
    padding: 2rem 1rem;
}
.account-list-item .callout a{
    color: var(--color-black);
    text-decoration: none;
    border-bottom: 1px solid var(--color-black);
}

.error {
    color: red;
}

.warning {
    color: red;
}

.help-text {
    color: gray;
}

.help-text a {
    color: gray;
}

.per-page {
    display: grid;
    grid-template-columns: -webkit-max-content -webkit-min-content;
    grid-template-columns: max-content min-content;
    gap: 0.5rem;
    align-items: center;
}

.per-page label {
    margin: 0;
    display: initial;
    flex-direction: unset;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    border: 1px solid var(--color-gray);
}

tr:nth-child(even) {
    background: #f9f9f9;
}

tr:nth-child(odd) {
    background: #fff;
}

th a[href$="asc"], th a[href$="desc"] {
    white-space: nowrap;
}

th a[href$="asc"]::after {
    content: "↑";
    display: inline-block;
    margin-left: .25rem;
}

th a[href$="desc"]::after {
    content: "↓";
    display: inline-block;
    margin-left: .25rem;
}

th{
    border-bottom: 1px solid var(--color-light-gray);
}
tbody{
    vertical-align: top;
}

table a{
    color: var(--color-accent);
}

td img{
    max-width: 100px;
}

@media (min-width: 48rem) {
    td, th {
        text-align: left;
    }

    td, th {
        padding: .25rem;
    }

    th {
        padding: .75rem .25rem;
    }

    th a {
        display: block;
        border-bottom: none;
    }
}