/* Layout alterations */

/* Icon styling */
img.icon {display: inline-block; width: 1em; height: 1em; position: relative; top: 0.15em;}
.content__side-nav>ul>li .side-nav:before {
 content: url('/images/icons/dropdown.svg');
 width: 0.75rem;
 height: 0.75rem;
 position: absolute;
 top: 1rem;
 right: 0;
}

/* Top navigation */
.header__mainNav {opacity: 1.0;}
.header__mainNav .header__mainNav--main {transition: height 0.3s ease-out;}
.header__mainNav .header__mainNav--tabs .is-active-tab span {padding-right: 0.3em;}
@media (max-width: 990px) {
    /* On mobile, don't show menu icon on active tab, there is already a mobile menu button */
    .header__mainNav .header__mainNav--tabs .is-active-tab span {display: none;}
}

/* On desktop, put intro and featured links side-by-side */
@media only screen and (min-width: 768px) {
    #main {display: flex; flex-flow: row wrap; justify-content: center; background: #eee;}
    #main section {flex: 1 100%;}
    #main section[aria-labelledby="Intro"] {flex: 3; max-width: 488px;}
    #main section[aria-labelledby="Featured Links"] {flex: 4; max-width: 652px;}
    #main section[aria-labelledby="Intro"] .row {width: 100%; padding: 1rem;}
    #main section[aria-labelledby="Featured Links"] .row {width: 100%;}
}

/* Featured links styling */
section[aria-labelledby="Featured Links"] .row__feature-links {min-height: 100%; flex-direction: column; justify-content: space-evenly; padding: 0; background: #eee;}
.row__feature-links .row__feature-links__button {display: grid; grid-template-columns: 30% 70%; justify-items: center; gap: 0.5rem; padding: 1.5rem; margin: 0.5rem 1rem; background: #fff; box-shadow: 5px 5px 1rem #888; transition: box-shadow 0.2s;}
.row__feature-links__button:hover {box-shadow: 0px 0px 0.7rem #ccc; cursor: default !important;}
.row__feature-links__button:after {display: none;}
.row__feature-links__button img {margin-bottom: 0 !important;}
.row__feature-links__button > a {grid-row: 1 / 2; grid-column: 1 / 2; font-weight: normal !important; text-decoration: none !important;}
.row__feature-links__button > a:hover {text-decoration: underline !important;}
.row__feature-links__button .featured-link-description {grid-row: 1 / 2; grid-column: 2 / 3; font-family: acumin-pro,"Franklin Gothic",sans-serif; font-size: 1rem;}
.row__feature-links__button .featured-link-description p {margin: 1rem 0;}
.row__feature-links__button .featured-link-description p:first-child {margin-top: 0;}
.row__feature-links__button .featured-link-description p:last-child {margin-bottom: 0;}

.row__feature-links__button:nth-child(2n+1) {grid-template-columns: 70% 30%;}
.row__feature-links__button:nth-child(2n+1) > a {grid-column: 2 / 3;}
.row__feature-links__button:nth-child(2n+1) .featured-link-description {grid-column: 1 / 2;}

/* On mobile, put descriptions underneath icons */
@media only screen and (max-width: 768px) {
    .row__feature-links__button > a, .row__feature-links__button:nth-child(2n+1) > a {grid-column: 1 / 3; grid-row: 1 / 2;}
    .row__feature-links__button .featured-link-description, .row__feature-links__button:nth-child(2n+1) .featured-link-description {grid-column: 1 / 3; grid-row: 2 / 3;}
}