/**** DIRECTIONS INTRO ****//**** DIRECTIONS INTRO ****//**** DIRECTIONS INTRO ****/

#directions-intro {background-color: var(--color-bg-primary);}
.anchors {display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: var(--space-xl) 0px 0px 0px;}
.anchors a {display: inline-flex; align-items: center; min-height: var(--touch-target); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-sm); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-navy); text-decoration: none; background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-sm);}
.anchors a:hover {color: var(--color-navy-dark); background-color: var(--color-bg-secondary); border-color: var(--color-gold-dark);}

/**** LEARNING ****//**** LEARNING ****//**** LEARNING ****/

#how-learning-works {color: var(--color-bg-secondary); background-color: var(--color-navy-dark);}
#how-learning-works h2 {color: var(--color-bg-light);}
#how-learning-works p {color: var(--color-bg-secondary);}

/**** DIRECTION BLOCKS ****//**** DIRECTION BLOCKS ****//**** DIRECTION BLOCKS ****/

.direction:nth-of-type(odd) {background-color: var(--color-bg-light);}
.direction:nth-of-type(even) {background-color: var(--color-bg-primary);}
.direction .container {position: relative; padding-left: calc(var(--container-padding) + var(--space-lg));}
.direction .container::before {position: absolute; top: 0px; bottom: 0px; left: var(--container-padding); width: var(--space-3xs); content: ''; background-color: var(--color-gold); border-radius: var(--radius-pill);}
.direction h2 {max-width: 18ch;}
.direction h3 {margin: var(--space-xl) 0px var(--space-sm) 0px;}
.direction ul {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); max-width: var(--text-width); gap: var(--space-sm); padding: 0px; list-style: none;}
.direction li {margin: 0px; padding: var(--space-sm); background-color: var(--color-bg-white); border: var(--border-width) solid var(--color-border-light); border-left: var(--space-3xs) solid var(--color-sage); border-radius: var(--radius-sm);}

/**** FINAL SECTIONS ****//**** FINAL SECTIONS ****//**** FINAL SECTIONS ****/

#teachers-collectives {color: var(--color-bg-secondary); background-color: var(--color-navy-dark);}
#teachers-collectives h2 {color: var(--color-bg-light);}
#teachers-collectives p {color: var(--color-bg-secondary);}
#next-step {background-color: var(--color-bg-secondary);}
#next-step .container {padding-top: var(--space-lg); padding-bottom: var(--space-lg); background-color: var(--color-bg-light); border: var(--border-width) solid var(--color-border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);}

/**** MEDIA 750 ****//**** MEDIA 750 ****//**** MEDIA 750 ****/

@media (max-width: 750px) {
    .anchors {display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr));}
    .direction .container {padding-left: calc(var(--container-padding) + var(--space-md));}
    .direction ul {grid-template-columns: 1fr;}
}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    .anchors {grid-template-columns: 1fr;}
    #next-step .container {padding-top: var(--space-md); padding-bottom: var(--space-md); border-radius: var(--radius-md);}
}