@import url('./token.css');

@media (max-width: 1100px) { :root { --page-grids: 8;  } }  /* 12 → 8 */
@media (max-width: 760px)  { :root { --page-grids: 4;  } }  /* 8  → 4 */
@media screen and
(max-width: 30rem) {
    .page {
        --page-grids: 2;
    }
}

body {
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    font-size: var(--font-size-base);
    /* background-color: rgb(220, 240, 220); */
    background-color: var(--body-background-color);
}

/*h1 {*/
/*    display: flex;*/
/*    align-items: baseline;*/
/*    justify-content: flex-start;*/
/*    color: var(--text-color);*/
/*    font-family: var(--font-family-body);*/
/*    background-color: var(--header-background-color);*/
/*    word-spacing: var(--spacing-sm);*/
/*    text-align: left;*/
/*}*/

h2 {
    font-family: var(--font-family-body);
    background-color: var(--header-background-base);
    word-spacing: var(--spacing-xs);
}

p{
    font-family: var(--font-family-p);
    text-align: center;
}
.myDiv {
    grid-row: 4 / 5;
    grid-column: 1 / -1;
    color: var(--text-color);
    border: var(--border-radius-sm) outset var(--div-border-color);
    background-color: var(--div-background-color);
    text-align: center;
}

.myDiv2{
    grid-row: 3;
    grid-column: 1 / -1;                  /* span full width */
    display: grid;                        /* so place-items works */
    place-items: center;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-family: var(--font-family-div2);
    color: var(--div2-text-color);
    /* optional: responsive size */
    font-size: clamp(1.25rem, 2vw + .5rem, 2.5rem);
}

svg.icon {
    display: inline;
    height: 2em;
    width: 2em;
    vertical-align: middle;
    fill: currentColor;
}

h1 {
    text-align: left;
    position: sticky;
    top: 0;                         /* stick to viewport top */
    z-index: 100;                   /* stay above content */

    /* Nice header styling + your flex layout */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .75rem 1rem;
    background-color: var(--header-background-color); /* solid bg so content doesn't show through */
    color: var(--text-color);
    font-family: var(--font-family-body);
}

h1 .logo {
    position: static;
    left: auto;
    top: auto;
    width: auto;
    display: inline-flex;
    align-items: center;
}

h1 .dark-mode-box{
    margin-left: auto;                    /* moves it to the right edge */
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 0.9rem;
    font-weight: 500;
}

h1 img {
    display: block;
    height: 50px;
    width: 50px;
}

.home-image{
    place-items: center;
    width: 100%;
}

.home-image picture{
    width: min(1200px, 100%);             /* keeps a nice max width */
}

.home-image img{
    display: block;
    width: 100%;                          /* fill the container width */
    height: auto;                         /* keep aspect ratio */
    object-fit: cover;                    /* good for large/wide images */
    margin: 0 auto;                       /* centered */
}

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--border-radius-sm) outset var(--border-color);
}

.user {
    margin-left: 0 !important;
    display: inline-flex;
    align-items: center;
    margin-left: auto;   /* ensures it hugs the right, even if justify changes */
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.page{
    --page-grids: 12;

    --col-min: 64px;
    display: grid;
    grid-template-columns: repeat(var(--page-grids), minmax(var(--col-min), 1fr));
    gap: var(--spacing-sm);
    grid-auto-flow: row;
    grid-auto-rows: auto;
}


.page > h1 {
    grid-area: header;
    grid-column: 1 / -1;            /* span all grid columns */
    grid-row: 1;                    /* sit in the first row */
}

.page > .navbar{
    grid-row: 2 / 3;
    grid-column: 1 / -1;
    color: var(--text-color);
}
/*.navbar{*/
/*    display: flex;*/
/*    justify-content: space-between;*/
/*    align-items: center;*/
/*    horiz-align: center;*/
/*    color: var(--text-color);*/
/*    !*padding: 1em 2em;*!*/
/*}*/
.navbar-single {
    display: flex;
    justify-content: center;
    align-items: center;
}

    .navbar {
        /* Center the whole bar on the page */
        max-width: 1800px;   /* adjust to taste */
        width: 100%;
        margin: 0 auto;

        display: flex;
        justify-content: space-between;  /* three slots across */
        align-items: center;
        color: var(--text-color);
    }

.navbar a {
    display: inline-block;
    padding: 0.4em 1em;
    margin: 0 0.5em;
    color: var(--text-color);            /* fallback: white text */
    background-color: var(--header-background-color); /* fallback: blue box */
    text-decoration: none;
    border-radius: 10px;                            /* soft corners */
    transition: background-color 0.3s, color 0.3s, transform 0.2s;
}

.navbar a:hover,
.navbar a:focus {
    background-color: var(--link-bg-hover);
    color: var(--link-text-hover);
    transform: scale(1.05);
}

.navbar a:active {
    background-color: var(--link-bg-active);
}


.page > .container1{
    color: var(--text-color);
    grid-row: 3 / 4;
    /*span min(6, var(--page-grids)) / -1;*/
    grid-column:span 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--border-radius-sm) outset var(--div-background-color);
    padding: var(--spacing-sm);
}

.page > .container2{
    color: var(--text-color);
    grid-row: 4 / 5;
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: var(--border-radius-sm) outset var(--div-background-color);
}