/* AXIOMS, via https://every-layout.dev/rudiments/axioms/

Text elements no larger than 70ch.

*/

/* from Modern CSS for Dynamic Component-based Architecture - Stephanie Eckles 

Layer order suggestion:

@layer reset, theme, global, layout, components, utilities, states;

*/

@layer reset, theme, layout, components, utilities, states, overrides;

@layer reset {

:root {
    --background-color: initial;
    --text-color: initial;
    --link-color: currentColor;
    --link-hover-color: initial;
    --font-plain: sans-serif;
    --font-serif: serif;
    --font-special: serif;
    --font-mono: monospace;
    --measure: 66ch;
}

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

* {
    margin: 0;
    background-color: var(--background-color);
    color: var(--text-color);
    /* max-inline-size:var(--measure); */
}

html {
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    max-inline-size: none;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-inline-size: 100%;
}

input,
button,
textarea,
select {
    font: inherit;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    max-inline-size: none;
    font-family: var(--font-serif);
}

h1,
h2,
h3,
h4,
button,
input,
label {
    line-height: 1.1;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
    font-family: var(--font-special);
}

a {
    color: var(--link-color);
}

a:hover {
    color: var(--link-hover-color);
}

/* <a> elements that don't have a class get default styles */
a:not([class]) {
    text-decoration-skip-ink: auto;
    text-decoration-thickness: max(0.08em, 1px);
    text-underline-offset: 0.15em;
    color: var(--link-color);
}

a[aria-current] {
    color: var(--text-color);
}

input,
button,
textarea,
select {
    font: inherit;
}

textarea:not([rows]) {
    min-height: 10em
}

:target {
    /* Scroll padding allowance above anchor links */
    scroll-padding-block-start: 2rem;
}

:focus {
    /* Scroll padding allowance below focused elements to ensure they are clearly in view */
    scroll-padding-block-end: 8vh;
}

:focus-visible {
    --outline-size: max(2px, 0.15em);
    outline: var(--outline-width, var(--outline-size)) var(--outline-style, solid) var(--outline-color, currentColor);
    outline-offset: var(--outline-offset, var(--outline-size));
}

}

@layer theme {

:root {
    --ut-font-mono: monospace;
    --ut-font-plain: system-ui, sans-serif;
    --ut-font-serif: Georgia, serif;
    --ut-font-special: Georgia, serif;
    --ut-color-not-quite-black: #333333;
    --ut-color-gray: #939597;
    --ut-color-dark-gray: #53565a;
    --sjsu-color-paseo-gray: #ededed;
    --sjsu-color-normal-gray: #9b9b9b;
    --ut-color-orange: #f08700;
    --color-white: #ffffff;
    --color-black: #000000;
    /* vr = vertical rhythm */
    --ut-vr: 3rem;
    --ut-2vr: calc(2 * var(--ut-vr));
    --ut-3vr: calc(3 * var(--ut-vr));
    --ut-vr-half: calc(.5 * var(--ut-vr));
    --ut-layout-width: 1024px;
    --ut-grid-min: 33ch;
    --ut-grid-gap: 3vw;
    --padding: clamp(1.5rem, 3%, 3rem);
    --padding-double: clamp(3rem, 6%, 6rem);
    --padding-extra: clamp(2rem, 12%, 4rem);
    --padding-half: clamp(0.75rem, 1.5%, 1.5rem);
    --container-max: var(--ut-layout-width);

    /* UTOPIA - fluid typography and type scale
https: //utopia.fyi/type/calculator?c=320,18,1.2,1000,36,1.25,4,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12  */
    --step--2: clamp(0.7813rem, 0.7rem + 0.4063vw, 0.96rem);
    --step--1: clamp(0.9375rem, 0.8182rem + 0.5966vw, 1.2rem);
    --step-0: clamp(1.125rem, 0.9545rem + 0.8523vw, 1.5rem);
    --step-1: clamp(1.35rem, 1.1114rem + 1.1932vw, 1.875rem);
    --step-2: clamp(1.62rem, 1.291rem + 1.6449vw, 2.3438rem);
    --step-3: clamp(1.9438rem, 1.4955rem + 2.2415vw, 2.93rem);
    --step-4: clamp(2.3325rem, 1.7282rem + 3.0213vw, 3.6619rem);
}

body {
    --background-color: var(--color-sjsu-paseo-gray);
    --text-color: var(--ut-color-not-quite-black);
    --font-body: var(--ut-font-serif);
    font-size: var(--step-0);
}



h1 {
    --font-display: var(--ut-font-special);
    font-size: var(--step-4);
}

h2 {
    --font-display: var(--ut-font-special);
    font-size: var(--step-3);
}

h3 {
    --font-display: var(--ut-font-special);
    font-size: var(--step-2);
}

h4 {
    --font-display: var(--ut-font-special);
    font-size: var(--step-1);
}

h5 {
    --font-display: var(--ut-font-special);
    font-size: var(--step--1);
}

h6 {
    --font-display: var(--ut-font-special);
    font-size: var(--step--2);
}

nav ul {
    list-style-type: none;
    padding: 0;
    display: flex;
}

nav a:not(:hover) {
    text-decoration: none;
}

blockquote {
    /* previous settings 
    max-width: 900px;
    margin: 30px auto;
    box-sizing: border-box;
    padding: 30px 0 10px 60px;
    position: relative;
    line-height: 1.3;
    color: #333333;
    border: none;
    */
    --font-display: var(--ut-font-special);
}

blockquote::before {
    content: "\201C";
    position: absolute;
    font-size: 4em;
    font-weight: 800;
    left: 0;
    top: 0;
}

hr {
    border-top: 1px solid var(--sjsu-color-normal-gray);
}

.ut-title {
    font-size: var(--step-0);
}

.nav-site a {
    padding-inline: var(--padding);    
    padding-block: var(--padding-half);
}
/*
    Beginnings of some angled stuff
    transform: rotate(-0.125turn);
    border-top:1px solid;
    border-bottom:1px solid;
    border-color:var(--ut-color-not-quite-black);
*/
/* indented nav 
.nav-site a:not(:first-child) {
    padding-inline-start: var(--padding);
}

.nav-site a:not(:last-child) {
    padding-inline-end: var(--padding);
}
*/
.nav-site a:hover, .nav-site a:focus {
    --background-color: var(--ut-color-blue);
    --text-color: var(--color-white);
    --link-color: var(--color-white);
}

}

@layer layout {
    :root {
        /* Better variable sizing, using every-layout.dev's #s to start*/
        --s-5: clamp(0.33rem, 0.39rem + -0.29vw, 0.18rem);
        --s-4: clamp(0.41rem, 0.47rem + -0.31vw, 0.25rem);
        --s-3: clamp(0.51rem, 0.57rem + -0.31vw, 0.35rem);
        --s-2: clamp(0.64rem, 0.69rem + -0.27vw, 0.5rem);
        --s-1: clamp(0.8rem, 0.84rem + -0.18vw, 0.71rem);
        --s0: clamp(1rem, 1rem + 0vw, 1rem);
        --s1: clamp(1.25rem, 1.19rem + 0.32vw, 1.41rem);
        --s2: clamp(1.56rem, 1.39rem + 0.85vw, 2rem);
        --s3: clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
        --s4: clamp(2.44rem, 1.83rem + 3.04vw, 4rem);
        --s5: clamp(3.05rem, 2.04rem + 5.07vw, 5.65rem);
    }

@layer primitives {

    box-l {
            display: block;
            padding: var(--s1);
            border-width: var(--border-thin);
            /* ↓ For high contrast mode */
            outline: var(--border-thin) solid transparent;
            outline-offset: calc(var(--border-thin) * -1);
        }

center-l {
display: block;
box-sizing: content-box;
margin-inline: auto;
max-inline-size: var(--measure);
}

cluster-l {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}

container-l {
display: block;
}

cover-l {
display: flex;
flex-direction: column;
min-block-size: 100vh;
padding: var(--s1);
}

frame-l {
aspect-ratio: 16 / 9;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}

frame-l>img,
frame-l>video {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}

grid-l {
display: grid;
grid-gap: var(--s1);
align-content: start;
grid-template-columns: 100%;
}

grid-l {
display: grid;
grid-gap: var(--s1);
align-content: start;
grid-template-columns: 100%;
}

icon-l svg {
height: 0.75em;
height: 1cap;
width: 0.75em;
width: 1cap;
}

imposter-l {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
}

sidebar-l {
display: flex;
flex-wrap: wrap;
}

sidebar-l>* {
flex-grow: 1;
}

stack-l {
display: flex;
flex-direction: column;
justify-content: flex-start;
}

stack-l>*+* {
margin-block-start: var(--s1);
}

switcher-l {
display: flex;
flex-wrap: wrap;
}

switcher-l>* {
flex-basis: calc((var(--measure) - 100%) * 999);
flex-grow: 1;
}

}


hr {
    margin: var(--vr);
}

/* from Scaling CSS Layout Beyond Pixels - Stephanie Eckles 

Super flexible container element that automatically manages its own width based on the viewport size, trying to maintain at least 80ch width. No need to assign variable padding with media queries. */

/*
.container {
    width: min(100vw - var(--padding), var(--container-max,72ch));
    margin-inline: auto;
}
*/
.wrap {
     margin-inline:1rem;
}


/* from Modern CSS for Dynamic Component-based Architecture - Stephanie Eckles
This utility creates a responsive set of columns that are auto-generated depending on the amount of available inline space. Includes custom property to define the minimum allowed size for a column, which will function as a "breakpoint" for each column before causing the overflow to become new rows. For the most flexibility, I also like to include a custom property to allow overriding the `gap`. */

.layout-grid {
    --layout-grid-min: var(--ut-grid-min, 33ch);
    --layout-grid-gap: var(--ut-grid-gap, 3vw);

    display: grid;
    grid-template-columns: repeat(auto-fit,
            minmax(min(100%, var(--layout-grid-min)), 1fr));
    gap: var(--layout-grid-gap);
}

/* Container query */
:is(.layout-grid, .flex-layout-grid)>* {
    container: var(--grid-item-container, grid-item) / inline-size;
}

}

@layer components {


/* This component has an API that allows for modular control over features using custom properties*/
.button {
    color: var(--button-color, var(--primary));
    background-color: var(--button-bg, var(--accent));
}

.button:where(:has(.icon)) {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.button:where(:has(.inclusively-hidden)) {
    border-radius: 50%;
    padding: 0.5em;
}

.button:where(:not(:has(.icon))) {
    text-align: center;
    min-inline-size: 10ch;
}

.button:where(:not(:has(.inclusively-hidden))) {
    padding: var(--button-padding, 0.35em 1em);
    border-radius: 0;
}

.button:hover {
    --button-bg: var(--accent--alt);
    --button-color: var(--primary);
}

.button:focus-visible {
    --outline-style: dashed;
    --outline-offset: -0.35em;
}

}

@layer utilities {

.i {
    font-style: italic;
}

.b {
    font-style: bold;
}

/* This class will limit text content to the value of the "line-clamp" property */
.line-limit {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
}