:root {
    --primary-color: #801818;
    --secondary-color: #b83a01;
    --text-color: #4B4245;
    --accent-color: #bc6402;
    --hilite-color: #EAF8FB;
    --background-color: #ffffff;

    --mobile-x-padding: 1rem;
    --max-article-width: 60rem;
    
    --bs-link-color-rgb: #801818;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text-color);
    background-color: var(--background-color);
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 400;
}

.parallax {
    position: relative;
    display: flex;
    flex-flow: column nowrap;
    min-height: 100vh;
}
.parallax > .main {
    flex: 1;
}

/* bootstrap overrides */
/* a { */
/*     color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1)); */
/*     text-decoration: underline; */
/* } */
.btn-primary {
    --bs-btn-bg: var(--primary-color);
}
.navbar {
    /* --bs-bg-opacity: 1; */
    background-color: black !important;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 100;
}
.navbar-brand {
    aspect-ratio: 5 / 1;
    display: block;
    height: 60px;
}
.navbar-nav .nav-item,
.navbar-nav .dropdown-item {
    text-align: center;
}
.navbar-nav .nav-link.active {
    --bs-navbar-active-color: var(--secondary-color);
}
#navbarSupportedContent {
    background-color: var(--secondary-color);
    color: white;
}
.dropdown-menu {
    --bs-dropdown-bg: var(--secondary-color);
    border: none;
}


@media screen and (min-width: 441px) {
    /* .navbar { */
    /*     --bs-bg-opacity: 1; */
    /* } */
    .navbar > .container-fluid {
        align-items: flex-end;
    }
    #navbarSupportedContent {
        background-color: black;
        /* justify-content: flex-end; */
    }
    .navbar .navbar-collapse {
        flex-grow: 0;
    }
    .navbar-nav {
        /* justify-content: flex-end; */
    }
    .nav-item {
        padding: .25rem .5rem 0;
    }
    .navbar-nav .nav-item a,
    .navbar-nav .dropdown-item a {
        --bs-nav-link-font-size: 1rem;
        --bs-nav-link-color: white;
        --bs-nav-link-hover-color: var(--secondary-color);
    }
    .nav-item + .nav-item {
        border-left: 2px dotted rgb(128,24,24);
    }
}


/*
 * layout sections
 */
.main > section {
    padding: 1rem var(--mobile-x-padding); 
}

#hero > .hero-content {
    font-size: 2rem;
}

.hero {
    background-size: cover;
    background-position: center;
    min-height: 50vh;
    position: relative;
    align-items: center;
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: flex-start;
}

.hero > .hero-content {
    color: var(--background-color);
    text-align: center;
    padding: 2rem;
}

.hero > .photo-credit {
    border-radius: .5rem;
    bottom: 1rem;
    color: rgba(255,255,255,.75);
    left: 1rem;
    padding: .5rem 1rem;
    position: absolute;
}

.photo-credit {
    font-size: 1.1rem;
}

.block-quote-block {
    background-color: var(--primary-color);
    color: var(--background-color);
    padding: 4rem var(--mobile-x-padding);
}

/* .block-quote-block > div { */
/*     margin: 0 auto; */
/*     max-width: var(--max-article-width); */
/* } */

#footer {
    color: white;
    background-color: var(--primary-color);
    text-align: center;
    margin-top: 4rem;
}

#footer p {
    margin-bottom: 0
}

#footer-signup {
    background: linear-gradient(0deg, rgba(0,0,0,.7), rgba(0,0,0,.7));
}

#footer-bottom {
    padding: 4rem;
}
#footer-bottom .split-2:first-child {
    text-align: start;
}

.image.fit > img,
.image.fit > a,
.image.fit > a > img,
.richtext-image.full-width {
    height: auto;
    width: 100%;
}

.split-block {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    padding: 4rem 0;
}
.split-block .split-1 .card + .card{
    margin-top: 2rem;
}

.split-block > .split-1 { width: 100%; }
.split-block > .split-2 { width: 100%; }
.split-block > .split-3 { width: 100%; }
.split-block > .split-4 { width: 100%; }
.split-block > .split-5 { width: 100%; }
.split-block > .split-6 { width: 100%; }
.split-block > .split-7 { width: 100%; }
.split-block > .split-8 { width: 100%; }

.species-list-block {
    padding: 0 var(--mobile-x-padding);
    display: flex;
}

.species-list-block > ul,
.resources-list-block > ul {
    list-style-type: none;
}

.resources-list-block {
    padding: 0 var(--mobile-x-padding);
}

.contact-form {
    padding: 0 var(--mobile-x-padding);
}

iframe {
    width: 100%;
    aspect-ratio: 16/ 9;
}

.image-credit {
    font-style: italic;
    font-size: .9rem;
}
.image-gallery {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    row-gap: 4rem;
}
.image-gallery-card {
    width: 100%;
}

.wolf-info-section {
    margin: 0 auto -2rem;
    padding-top: 4rem;
}
.wolf-info {
    display: flex;
    flex-flow: row wrap;
}
.wolf-info > div {
    width: 50%;
}
.card .card-action {
    flex: 0 0 auto;
    text-align: center;
    background-color: var(--primary-color);
}
.card .card-action .btn {
    background-color: var(--secondary-color);
    border-color: var(--secondary-color);
}

.news-article header {
    text-align: center;
    margin-bottom: 4rem;
}
.news-article h1 {
    background-color: var(--primary-color);
    color: white;
    padding: 2rem;
}

.news-card-container {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    column-gap: 2rem;
    row-gap: 2rem;
}
.news-card-container > .card {
    box-shadow: 0 0 10px 0 rgba(0,0,0,.15);
    width: 100%;
}
.news-card-container > .card:hover {
    box-shadow: 0 0 30px 0 rgba(0,0,0,.15);
}
.news-card-container .card-title {
    color: var(--secondary-color);
    text-align: center;
    font-size: 1.1rem;
}
.news-card-container .card-title a {
    text-decoration: none;
}

.srw-btn {
    background-color: var(--primary-color);
    color: white;
}

.social-buttons {
    font-size: 1.5rem;
    text-align: right;
}
.social-buttons span + span {
    padding-left: 1rem;
}
.social-buttons a {
    text-decoration: none;
}

.video-block {
    & > * {
        margin: 0 auto;
        max-width: var(--max-article-width);
    }
    & video {
        aspect-ratio: 16 / 9;
        object-fit: cover;
        width: 100%;
    }
    & .video-block-credit {
        display: flex;
        justify-content: start;
    }
}

.wolf-cards {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
    row-gap: 2rem;
    margin: 2rem 0;
}

.wolf-cards .card {
    width: 100%;
}


@media screen and (min-width: 441px) {
    .main > section {
        padding: 2rem 0;
    }
    /* .main > .rich-text-block { */
    /*     padding: 4rem 0; */
    /* } */
    /* .main > .rich-text-block > .content { */
    /*     ma */
    /* } */

    .rich-text-block > .content,
    .block-quote-block > *,
    .news-article,
    .news-card-container {
        margin: 0 auto;
        max-width: var(--max-article-width);
    }

    .split-block > .split-1 { width: calc(100% / 1); }
    .split-block > .split-2 { width: calc(100% / 2); }
    .split-block > .split-3 { width: calc(100% / 3); }
    .split-block > .split-4 { width: calc(100% / 4); }
    .split-block > .split-5 { width: calc(100% / 5); }
    .split-block > .split-6 { width: calc(100% / 6); }
    .split-block > .split-7 { width: calc(100% / 7); }
    .split-block > .split-8 { width: calc(100% / 8); }

    .species-list-block,
    .resources-list-block,
    .contact-form {
        margin: 0 auto;
        max-width: var(--max-article-width);
        padding: 0;
    }
    
    .species-description {
        display: flex;
        column-gap: 2rem;
    }

    .species-description .image {
        flex: 0 0 30%;
    }
    .image-gallery {
        column-gap: 4rem;
        justify-content: center;
        padding-bottom: 4rem;
    }
    .image-gallery-card {
        max-width: 30%;
    }
    .wolf-info {
        flex-flow: row nowrap;
        justify-content: space-between;
        max-width: var(--max-article-width);
        margin: 0 auto;
    }
    .wolf-info > div {
        width: auto;
    }

    .split-block .split-1:has(.card) {
        display: flex;
        flex-flow: row wrap;
        align-iterms: flex-start;
        justify-content: space-between;
        margin: 0 auto;
        max-width: calc(var(--max-article-width) * 1.2);
        row-gap: 3rem;
    }
    .split-block .card {
        width: 30%;
    }
    .split-block .split-1 .card + .card{
        margin-top: 0;
    }
    
    .split-block .split-1:has(dl) {
        margin: 0 auto;
        max-width: var(--max-article-width);
    }
    .news-card-container .card {
        width: calc(100% / 2.1);
    }

    .wolf-cards {
        margin: 4rem auto;
        max-width: calc(1.5 * var(--max-article-width));
        row-gap: 3rem;
    }
    .wolf-cards .card {
        width: 30%;
    }
}