/* Import Fonts */
@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
@import url('reset.css');
@import url('vars.css');


/* Transition effects for HTML elements */
html {
    transition: color 0.3s ease, background-color 0.3s ease;
}

/* Base Typography settings */
body {
    font-family: "IBM Plex Mono", monospace; /* Base font family */
    font-weight: 400; /* Normal font weight */
    font-style: normal; /* Normal font style */
    font-size: 1.12rem; /* Base font size */
    line-height: 1.4; /* Line height for readability */
    color: var(--color-text); /* Base font color */
    background: var(--color-background); /* Background color */
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased; /* Smoothing for better fonts */
    transition: color 0.3s ease, background-color 0.3s ease; /* Transitions for color changes */
    background-image: linear-gradient(53deg, var(--color-shadow), white); /* Background gradient */
    min-height: 100dvh; /* Full viewport height coverage */
}

/* Typography Scale definitions */
h1 {
    font-size: 2.75rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 1.75rem;
    font-family: "Frank Ruhl Libre", Georgia, serif; /* Heading font */
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
h2 {
    font-size: 1.5rem;
    line-height: 1.32;
    font-weight: 600;
    margin-bottom: 1rem;
}
h3 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.32;
    margin-bottom: 0.75rem;
}
h2 + h3 {
    margin-top: 4rem;
}
p + h3 {
    margin-top: 2.75rem;
}
h4 {
    font-weight: 700;
    margin-bottom: 0.5rem;
    strong {
        font-weight: 800;
    }
}
p {
    /* font-size: 1rem; */
    margin-bottom: 1.5rem;
    letter-spacing: 0.01em;
}
hr {
    border: none;
    border-top: 2px solid var(--color-text);
    margin: 2.5rem 0;
}

mark {
    background: var(--color-highlight);
    padding: 0 0.2rem;
    background-blend-mode: multiply;
}
a {
    text-decoration: none;
    color: var(--color-link);

    &:hover {
        text-decoration: underline;
    }
}
main a {
    text-decoration: underline;
    text-decoration-color: var(--color-link);
    text-decoration-thickness: 1.5px;
    &:hover {
        text-decoration: underline;
    }
}

img {
    border-radius: var(--border-radius);
}

/* Set full width for tables and articles */
table, article {
    width: 100%;
    min-width: 100%;
    padding: clamp(2rem, 5vw, 5rem);
    border-radius: var(--border-radius);
    border: 2px solid var(--color-border);
    background: white;
    td:not(.rank):first-child {
        a {
            min-width: 320px;
        }
    }
}

th {
    text-align: left;
    border-bottom: 2px solid var(--color-border);
    text-transform: capitalize;
}

td, th {
    padding: 1rem;
    vertical-align: center;
    h2 {
        margin: 0;
    }
    small {
        display: block;
        line-height: 1.4;
    }
}

tr:nth-of-type(2n) {
    background: var(--color-shadow);
    border-radius: var(--border-radius);
}

tr > td:first-child {
    a {
        display: block;
        font-weight: 600;
        line-height: 1.4;
        margin: 0 0 0.25rem;
    }  
}

/* Nav tabs settings */
nav ul {
    list-style: none;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    margin: 0 0 2rem;
    li {
        display: inline;
        width: auto;
        padding: 1rem;
        &.on {
            background: var(--color-shadow);
            a {
                color: var(--color-text);
            }
        }
    }
}

/* Main layout adjustments */
main {
    padding: clamp(30px, 5vw, 80px) clamp(30px, 12vw, 400px);
}

section:not(:last-child) {
    margin-bottom: 2rem;
}

body > header, footer {
    padding: clamp(30px, 1.5vw, 60px) clamp(30px, 12vw, 400px);
    display: grid;
    grid-template-row: auto auto;
    font-size: 1rem;
    font-weight: 500;
    > a:first-child {
        font-weight: 800;
        text-transform : uppercase;
        color: var(--color-text);
        display: flex;
        grid-gap: 8px;
        align-items: center;
        svg {
            fill: var(--color-text);
        }
    }
    ul {
        li a {
            color: var(--color-text);
            line-height: 1.5rem;
        }
    }
}

article {
    display: grid;
    grid-template-columns: 1fr clamp(220px, 18vw, 400px);
    grid-gap: 4rem;
    > section {
        overflow: hidden; 
        a:not(.btn) {
            display: block;
            max-width: 90%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

    }
}
article {
    ol, ul {
        padding-left: 0;
        margin-bottom: 3rem;
        li {
            list-style-position: inside;
            margin-bottom: 1rem;
        }
        li::marker {
            font-weight: bold;
        }
    }
}
aside {
    ol, ul {

        li {
            margin: 0;

        }
    }
    .grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 1rem;
    }
}
/* navigation bar */
body > nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100dvw;
    height: 60px;
    background: var(--color-text);
    display: flex;
    justify-content: space-between;
    align-items: center;
    svg {
        fill: var(--color-highlight);
    }
    > ul {
        display: flex;
        align-items: center;
        justify-content: start;
        grid-gap: 1px;
        margin: 0;
        padding: 0;
        li {
            padding: 0;
            a {
                color: var(--color-highlight);
                font-size: 13px;
                font-weight: 600;
                text-transform: uppercase;
                display: flex;
                align-items: center;
                height: 60px;
                padding: 0 0.75rem;
            }
        }
    }
}
/* Button styles */
.btn {
    font-size: 0.8rem;
    line-height: 1.15rem;
    font-weight: 800;
    padding: 0.75rem;
    border-radius: var(--border-radius);
    border: 2px solid var(--color-link);
    white-space: nowrap;
    text-decoration: none;
    font-family: "Inter", sans-serif;
}
/* Styling for the welcome section */
.welcome-section {
    > div {
        align-items: center;
        h3 {
            margin-bottom:2rem;
        }
    }
    .btn {
        font-size: 1rem;
        padding: 0.75rem 1rem;
    }
}
.grid {
    margin: 4rem 0;
}
/* @media only screen and (min-width: 2100px) {
    body > header, footer, main {
        padding: clamp(30px, 5vw, 80px) clamp(30px, 16vw, 600px);
    }

} */

/* Responsive layout adjustments */
@media only screen and (min-width: 980px) {
    body > main > h1 {
        display: flex;
        justify-content: space-between;
        align-items: end;
        grid-gap: 1rem;
    }
    section > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 4rem;
    }
    .welcome-section h3 {
        margin-bottom: 0;
    }
    .grid {
        margin: 4rem 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
    }
}

@media only screen and (max-width: 860px) {
    body > header, main, footer {
        padding: clamp(18px, 5vw, 40px);
    }
    body > header, footer {
        font-size: 13px;
        line-height: 16px;
        p {
            margin-top: 0.5rem;
        }
    }
    body > header a span {
        display: none;
    }
    h1 {
        font-size: 1.75rem;
    }
    h2, h3 {
        font-size: 1.25rem;
    }
    table {
        /* padding: 0; */
        overflow-x: auto;
        display: block;
        th:last-child, 
        td:last-child {
            display: none;
        }
        td:not(.rank) {
            min-width: 180px;
        }
        td.rank + td {
            min-width: 320px;
        }
    }
    article {
        display: block;
    }
    article, table {
        border-left: none;
        border-right: none;
        border-radius: 0px;
        padding-left: 0;
        padding-right: 0;
        background: transparent;
    }
}