/* GLOBAL RESOURCE STUFF */
.resource-wrap {
    max-width: var(--content-width-wide-2);
    margin: 3rem auto;
    display: flex;
    align-items: start;
    justify-content: space-between;
}


.resource-wrap .content {
    flex-basis: 61%;
    grid-column: 2;
}

.resource-wrap .narrow-left-aligned:nth-child(1),
.resource-wrap .narrow-left-aligned:nth-child(2) {
    grid-row: 1 !important;
}

.resource-wrap .date {
    font-size: 1.4rem;
    font-weight: bold;
}

.resource-wrap hr.orange {
    color: var(--color-brand-orange);
    background-color: var(--color-brand-orange);
    border: none;
    height: 1.5px;
    width: 5rem;
    margin-bottom: 5rem;
}

.resource-wrap .image-wrap img {
    height: auto;
}

.resource-wrap figure {
    margin-bottom: 3rem;
}

.resource-wrap figcaption {
    font-size: 1.4rem;
    font-style: italic;
    margin-top: 1.5rem;
}

.resource-wrap li {
    text-indent: 0;
    padding-left: 0;
}

.resource-wrap .sidebar {
    grid-column: 3;
    margin-left: auto;
    transform: translateY(-5.5rem);
}

.resource-wrap .sidebar .buttons-wrap {
    margin-bottom: 6rem;
}

.resource-wrap .sidebar .buttons-wrap button,
.resource-wrap .sidebar .buttons-wrap a {
    margin-bottom: 2rem;
    text-align: left;
    min-width: 24rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resource-wrap .sidebar .buttons-wrap .svg svg {
    max-width: 21px;
    height: 21px;
    margin-bottom: -7px;
}

/* END GLOBAL RESOURCE STUFF  */
.resource-wrap .section-basic-copy-block {
    padding-block: 0;
}

.file-wrap {
    margin-block: 6rem;
}

.file-wrap .region {
    max-width: var(--content-width-narrow);
    margin-inline-start: var(--margin-left-align);
}

.file-wrap .region h3 {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--color-gray-dark);
    margin-bottom: 1rem;
    line-height: 2.8rem;
}

.file-wrap .region > p {
    margin-bottom: 2rem;
}

.file-wrap .wrap {
    background: var(--color-gray-light-web);
    display: grid;
    grid-template-columns: 0.5fr 3fr 1fr;
    padding: 2.25rem;
    align-items: center;
    margin-top: 2rem;
}

@supports selector(:has(+ *)) {

    .file-wrap .wrap span:has(svg) {
        justify-self: center;
        display: flex;
    }
}

.file-wrap .wrap span {
    justify-self: center;
    display: flex;
}

.file-wrap .wrap .file-type svg {
    width: 3.8rem;
    height: 4.9rem;
    margin-left: -0.75rem;
}

.file-wrap .wrap h4 {
    margin-inline-start: 2rem;
    color: var(--color-gray-dark);
}

.file-wrap .wrap .download-button {
    transition: background-color 250ms ease-in-out;
    justify-self: flex-end;
    margin-right: 2rem;
}

.file-wrap .wrap .download-button svg {
    min-height: 4.4rem;
    min-width: 4.4rem;
    max-height: 4.4rem;
    max-width: 4.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    align-self: center;
    justify-self: flex-end;
    background-color: var(--color-brand-navy);
    transition: background-color 250ms ease-in-out;
    border-radius: 0.5rem;
}

.file-wrap .wrap .download-button svg path {
    fill: var(--color-primary-white);
    transition: fill 250ms ease-in-out;
}

.file-wrap .wrap:hover .download-button svg {
    background-color: var(--color-brand-pale-blue);
    transition: background-color 250ms ease-in-out;
}

.file-wrap .wrap:hover .download-button svg path {
    fill: var(--color-brand-navy);
    transition: fill 250ms ease-in-out;
}

@supports selector(:has(+ *)) {

    a:has(.resource),
    .resource {
        webkit-user-select: none; /* Safari 3.1+ */
        -moz-user-select: none; /* Firefox 2+ */
        -ms-user-select: none; /* IE 10+ */
        user-select: none; /* Standard syntax */
        user-drag: none;
        -webkit-user-drag: none;
    }
}

.resource {
    webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
    user-drag: none;
    -webkit-user-drag: none;
}


.share-links a {
    margin-block: 0 !important;
    background: var(--color-primary-white) !important;
    color: var(--color-primary-black) !important;
    border-bottom: solid 0.2rem var(--color-gray-light) !important;
    box-shadow: 2px 8px 15px rgb(0 0 0 / 30%);
    width: 100%;
    max-width: 24rem;
    display: grid !important;
    grid-template-columns: 16rem 8rem;
    place-content: flex-start;
    place-items: flex-start;
    padding-block: 1rem;
    -webkit-box-shadow: 2px 8px 15px rgb(0 0 0 / 30%);
}

.share-links a:hover {
    background: var(--color-brand-pale-blue) !important;
    color: var(--color-brand-navy) !important;
}

.share-links a > .svg svg {
    width: 2rem;
    height: 2rem;
    transition: fill 250ms ease-in-out;
}

.share-links a:hover > .svg svg path {
    fill: var(--color-brand-navy) !important;
    transition: fill 250ms ease-in-out;
}

.buttons-wrap {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;

}

.buttons-wrap button {
    width: 24rem;
    margin-bottom: 2rem;

}

.buttons-wrap button .svg svg {
    width: 2rem;
    height: 2rem;
}

.share-links a > .svg.facebook svg path {
    fill: #4267B2;
}

.share-links a > .svg.twitter svg path {
    fill: #1DA1F2;;
}

.share-links a > .svg.linkedin svg path {
    fill: #0072B1;
}
.comment-letter-file{
    height: fit-content;
    color: var(--color-brand-navy);
    text-decoration: underline;
}

@media screen and (max-width: 85em) {
    .resource-wrap {
        padding-inline: var(--mobile-padding);
    }
}

@media screen and (max-width: 65em) {
    .file-wrap .region {
        margin-inline-start: auto;
        margin-inline: 2rem;
    }

    .resource-wrap .narrow-left-aligned {
        padding-inline: var(--mobile-padding);
    }
}

@media screen and (max-width: 55em) {
    .resource-wrap .narrow-left-aligned {
        display: flex;
        flex-flow: column wrap;
    }

    .resource-wrap .sidebar {
        margin-top: 4rem;
    }
}
