/* main styles using CUBE CSS https://cube.fyi/ */
:root {
    /* colors */
    --color-primary: white;
    --color-secondary: black;
    --color-tertiary: gray;
    --color-highlight: red;

    color-scheme: light;

    /* fonts */
    --font-stack: Verdana, Arial, Helvetica, sans-serif;

    /* font scaling: https://utopia.fyi/type/calculator/ 
       @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,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.7747rem + 0.0326vw, 0.8rem);
    --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
    --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
    --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
    --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
    --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
    --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);

    --tracking: normal;
    
    /* layout */
    --flow-space: 1em;
    --gap: 1.5rem;

    /* spacing: https://utopia.fyi/space/calculator/ 
       background: https://utopia.fyi/blog/designing-with-a-fluid-space-palette
       @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75,1.5|2,s-l&g=s,l,xl,12 */

    --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vw, 0.9375rem);
    --space-s: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
    --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vw, 1.875rem);
    --space-l: clamp(2.25rem, 2.163rem + 0.4348vw, 2.5rem);
  
    /* One-up pairs */
    --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vw, 1.25rem);
    --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vw, 1.875rem);
    --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vw, 2.5rem);
  
    /* Custom pairs */
    --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}


/* base */
a {
    color: var(--color-highlight);
}

body {
    font-family: var(--font-stack);
    font-size: var(--step-0);
    letter-spacing: var(--tracking);
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid var(--color-highlight);
    display: inline-block;
    height: 1rem;
    margin-right: .5rem;
    position: relative;
    width: 1rem;
}

input[type="checkbox"]:checked {
    background-color: var(--color-highlight);
}

/* compositions - flexible, component-agnostic layouts */

.flex {
    display: flex;
    gap: var(--gap, 1rem);
}

.flow > * + * {
    margin-top: var(--flow-space, 1em);
}

.horizontal-distributed {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.wrapper {
    margin: 1rem auto;
	max-width: clamp(360px, 80ch, 1100px);
	padding: 0 1rem;
	width: 100%;
}


/* utilities - classes that do one job well */

.bg-primary {
    background: var(--color-primary);
}

.bg-secondary {
    background: var(--color-secondary);
}

.bg-tertiary {
    background: var(--color-tertiary);
}

.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-tertiary {
    color: var(--color-tertiary);
}


/* blocks - skeletal components and organizational structures */

.button {
    border: 0;
    cursor: pointer;
    /* padding: 1em 2em; */
    padding: var(--space-xs) var(--space-m);
    text-decoration: none;
}

.button[data-type="primary"] {
    color: var(--color-primary);
    background-color: var(--color-secondary);
}

.button[data-type="primary"]:hover,
.button[data-type="primary"]:focus {
    color: var(--color-secondary);
    background-color: var(--color-tertiary);
}

.button[data-type="secondary"] {
    color: var(--color-secondary);
    background-color: var(--color-primary);
}

.button[data-type="secondary"]:hover,
.button[data-type="secondary"]:focus {
    color: var(--color-primary);
    background-color: var(--color-secondary);
}

.card {
    border-radius: 5px;
    padding: var(--space-xs);
}

.card h4 {
    font-style: italic;
}

.checklist {
    padding: var(--space-xs-s);
}

.checklist > * {
    display: block;
    padding-left: var(--space-xs);
}

.checklist label {
    align-items: center;
    border: 1px solid var(--color-tertiary);
    display: flex;
    margin-bottom: 1px;
}

.logo {
    display: inline;
    width: 2rem;
}

.main-menu ul {
	list-style: none;
	padding: 0;
}

.main-menu ul li {
	display: inline-block;
	padding-right: var(--space-xs);
	position: relative;
	text-align: left;
}

.main-menu ul li a:hover {
	color: var(--color-tertiary);
	text-decoration: none;
}

.main-menu ul li a {
	text-decoration: none;
}


/* exceptions - deviations from rules outlined in a block */

.card[data-state='reversed'] {
    flex-direction: column-reverse;
  }
  

/* media queries */
/* extra small devices (compact phones, 380px and smaller) */

@media only screen and (max-width: 380px) {
    nav {
		flex-direction: column;
	}
}