/* Root Variables */
:root{
    /* Background Images */
    --img-bg: url('/static/background.svg');
    --img-bg-size: cover;

    /* Content-Wrapper Sizing */
    --content-max-width: min(1600px, 98%);
    --screen-padding: 1em;
    --text-max-width--xs: min(var(--content-max-width), 30ch);
    --text-max-width--s: min(var(--content-max-width), 38ch);
    --text-max-width--m: min(var(--content-max-width), 54ch);
    --text-max-width--l: min(var(--content-max-width), 70ch);

    --icon-width-s: 1.5em;
    --icon-width-l: 2.5em;

    /* Flex & Grid */
    --gap-m:1em;
    --gap-l:calc(var(--gap-m)*2);
    --gap-xl:calc(var(--gap-m)*4);
    --gap-xxl:calc(var(--gap-m)*6);
    --gap-s:calc(var(--gap-m)/2);
    --gap-xs:calc(var(--gap-m)/4);

    --border-radius:4px;
    --select-padding-inline:1em;
    --select-padding-block:1em;
}

.page{ min-height: 100vh; }

/* Buttons */
.select{
    border-radius:var(--border-radius);
    border-width:1px;
    padding-inline:var(--select-padding-inline);
    padding-block:var(--select-padding-block);
}

button{
    cursor: pointer;
    pointer-events: auto;
}

.btn{
    align-items:center;
    pointer-events: auto;
    border: 1px solid transparent;
    border-radius:var(--border-radius);
    cursor: pointer;
    display: flex;
    justify-content:center;
    padding-inline:var(--select-padding-inline);
    padding-block:var(--select-padding-block);
    pointer-events: auto;
    transition: all 0.3s ease;
}

.img{
    display:flex;
    justify-content:center;
    align-items:center;
}
.icon-s{
    width:var(--icon-width-s);
    height:auto;
}
.icon-l{
    width:var(--icon-width-l);
    height:auto
}

/* utilities */
.text-left{ text-align: left; }
.text-center{ text-align: center; }
.text-right{ text-align: right; }

/* ul styling */
ul.list__bullets--accent{
    list-style-type: disc;
    list-style-position: inside;
}



/* Flex Utilities */
.flex{ display: flex; }
.flex-row{ display: flex; flex-direction: row; }
.flex-col{ display: flex; flex-direction: column; }
.flex-center{
    justify-content:center;
    align-items:center;
}
.flex-horizontal-center{justify-content: center;}
.flex-vertical-top{align-items: start;}
.flex-vertical-center{align-items: center;}
.flex-vertical-bottom{align-items: baseline;}
.flex-space-between{ justify-content:space-between;}
.flex-space-evenly{ justify-content:space-evenly;}
.flex-start{justify-content:flex-start;}
.flex-end{justify-content:flex-end;}
.flex-wrap{flex-wrap:wrap;}
.flex-wrap-reverse{flex-wrap:wrap-reverse;}

.flex-equal > *{ flex: 1; }
.flex-1-2-1 > *:nth-child(1),
.flex-1-2-1 > *:nth-child(3){
    flex: 1;
}
.flex-1-2-1 > *:nth-child(2){
    flex: 2;
}

/* grid utilities */
.grid{ display:grid; }
.grid-center{ justify-items:center; justify-content:center; }
.grid-justify-end{ justify-self:end; }
.grid-justify-start{ justify-self:start; }

/* display utilities */
.desktop{ display:flex; }
.mobile{ display:none; }
.hidden, [hidden]{ display:none !important; }
.width-100{ width:100%; }
.height-100{ height:100%; }

.gap-xs{ gap:var(--gap-xs); }
.gap-s{ gap:var(--gap-s); }
.gap-m{ gap:var(--gap-m); }
.gap-l{ gap:var(--gap-l); }
.gap-xl{ gap:var(--gap-xl); }
.gap-xxl{ gap:var(--gap-xxl); }

.padding-s{ padding:var(--gap-s); }
.padding-m{ padding:var(--gap-m); }
.padding-l{ padding:var(--gap-l); }
.padding-xl{ padding:var(--gap-xl); }

/*image-containers*/
.image-container{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow:hidden; /* necessary for Chrome */
}

.image-container img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Hover & Active States */
.hover{
    cursor: pointer;
    transition: transform 0.2s, filter 0.2s;
}

.hover:hover{
    filter: brightness(1.1);
    transform: scale(1.05);
}

.hover:active{
    filter: brightness(0.9);
    transform: scale(0.95);
}

/* Layout */
section{
    width: 100%;
}

.content-wrapper{
    max-width: min(var(--content-max-width), calc(100% - (var(--screen-padding)*2)) );
    margin-inline: auto;
}
.border-radius{ border-radius: var(--border-radius); }
.text-wrapper--xs{ max-width: var(--text-max-width--xs); }
.text-wrapper--s{ max-width: var(--text-max-width--s); }
.text-wrapper--m{ max-width: var(--text-max-width--m); }
.text-wrapper--l{ max-width: var(--text-max-width--l); }

.cursor-pointer{ cursor: pointer; }

.text-nowrap{ white-space: nowrap; }
.text-overflow-ellipsis{
    overflow:hidden;
    text-overflow: ellipsis;
}