/*-------------colors-------------*/
//#000000; /*black*/
//#ffffff; /*white*/
//#ececec; /*lightest grey (usually for borders)*/

// var(--primary), var(--primary-dark), var(--primary-light)
//#1462a6; /*podcast blue*/
//#00488c; /*podcast blue- dark*/

// var(--second), var(--second-dark), var(--second-light)
//#6eb004; /*podcast green*/
//549600; /*podcast green- dark*/

// var(--third), var(--third-dark), var(--third-light)
//#6bbef2; /*podcast sky blue*/
//51a4d8; /*podcast sky blue- dark*/

// var(--fourth), var(--fourth-dark), var(--fourth-light)
//#d91604; /*podcast red*/
//bf0000; /*podcast red- dark*/

// var(--fifth), var(--fifth-dark), var(--fifth-light)
//#fcefb8; /*podcast pale yellow*/
//#e2d59e; /*podcast pale yellow- dark*/

:root {
--primary:  #1462a6; /*podcast blue*/
--primary-dark: #00488c; /*podcast blue- dark*/
} /*primary color is set in theme settings, but primary light and dark is decided by ColorShade helper*/


/*-------------font options-------------*/
//title {
    //font-family: fields-display, sans-serif;
    //font-weight: //(options)
        //400; //Regular
        //500; //Medium
        //600; //Semibold
        //700; //Bold
        //800; //Extra Bold
        //900; //Black
    //font-style: normal;

    //font-family: fields, sans-serif;
    //font-weight: //(options)
        //200; //Extra Light
        //300; //Light
        //400; //Regular
        //500; //Medium
        //600; //Semi Bold
        //700; //Bold
        //800; //Extra Bold
        //900; //Black
    //font-style: normal;   
//}

//body {
    //font-family: pragmatica, arial, sans-serif;
    //font-weight: //(options)
        //200; //Extra Light
        //300; //Light
        //400; //Book
        //700; //Bold
        //900; //Black
    //font-style: //(options)
        //normal;
        //oblique;

    //font-family: pragmatica-condensed, arial, sans-serif;
    //font-weight: (options)
        //300; //Extra Light
        //400; //Book
        //900; //Black
    //font-style: (options)
        //normal;
        //oblique;

    //font-family: pragmatica-extended, arial, sans-serif;
    //font-weight: (options)
        //200; //Extra Light
        //300; //Light
        //400; //Book
        //500; //Medium
        //700; //Bold
        //800; //Extra Bold
        //900; //Black
    //font-style: (options)
        //normal;
        //oblique;
//}


/*-------------font settings-------------*/
body, button, input, select, optgroup, textarea {
font-family: pragmatica, sans-serif;
font-style: normal;
font-weight: 400;
}

body, button, input, select, optgroup, textarea {
font-size: 1.1rem;
}

h1 {
font-family: fields-display, fields, sans-serif;
font-style: normal;
font-weight: 700;
color: var(--primary); /*podcast blue*/
}

h2, h3, h4, h5, h6 {
font-family: fields-display, fields, sans-serif;
font-style: normal;
font-weight: 600;
}

h2 {
color: var(--fourth); /*podcast red*/
}

h3 {
color: var(--second); /*podcast green*/
}

pre {
font-family: pragmatica, sans-serif;
font-style: normal;
font-weight: 300; /*Pragmatica Light*/
color: //var(--second-dark); /*podcast green-dark*/
background: #1462a650; /*podcast blue 50%*/ 
}

code {
font-family: "Courier 10 Pitch", courier, monospace;
}

a:-webkit-any-link {
text-decoration: unset;
}

a:-websit-any-link:hover {
text-decoration: underline;
}

/*-------------header and navigation-------------*/
.main-header {
position: sticky;
top: -250px !important;
z-index: 999;
} /*Makes header sticky, to show the banner when scrolled up, but will let the banner scroll up to allow the main area get larger. Will stop at navigation buttons.*/

.main-header--center {
padding-top: 0 !important;
} /*keeps sticky header at top when scrolling up*/

body.page.site-page-home .main-header {
position: fixed;
top: 0px !important;
} /*makes home page header not sticky*/

body.page.site-page-About .main-header {
position: fixed;
top: 0px !important;
} /*makes About page header not sticky*/

body.page.site-page-home.main-header--center {
padding-top: 308px !important;
} /*lets main content on Home page start under the header instead of at the top of the screen*/

body.page.site-page-About.main-header--center {
padding-top: 308px !important;
} /*lets main content on About page start under the header instead of at the top of the screen*/

/*-------We want the header to be sticky in order to increase the viewing area for the item and media pages, but not for the Home and About pages. Since some of the media pages have been made as a separate page, it is more efficient to have the sticky header set for the whole site and specifically "unstick" it for the Home and About pages.-------*/

.main-header__top-bar.container {
display: none;
} /*takes off advanced search bar at top of page*/

.main-header__main-bar.container {
background-color: var(--primary-dark);
padding: 10px 0 0;
} /*lets header go all the way to the edge of the screen, but still separates from the top a little*/

@media (min-width: 768px)
.main-header__main-bar.container {
background-color: var(--primary-dark);
padding: 10px 0 0;
} /*lets header go all the way to the edge of the screen, but still separates from the top a little*/

.main-header__site-title a img {
background-color: #ffffff; /*white*/
max-height: 175px;
margin: 10px;
box-shadow: 0px 0px 6px 2px rgba(0,0,0,0.5); /*black 50%*/
} /*logo height, background color, shadow, margin*/

.main-navigation {
display: inline-flex;
justify-content: center;
background-color: var(--third); /*podcast sky blue*/
width: 100%;
} /*adds color to navigation bar, stretches across screen, brings everything back to center*/

.main-navigation .navigation {
font-size: 1.7rem;
font-weight: bold;
} /*reduces size of navigation button font*/

.main-navigation .navigation>li>a {
color: var(--primary-dark); /*podcast blue-dark*/
margin: 5px 15px;
} /*margin around text part of navigation buttons that affects spacing between, as well as around*/

.main-navigation .navigation>li>a:hover {
color: var(--fourth); /*podcast red*/
margin: 5px 15px;
} /*margin around text part of navigation buttons that affects spacing between, as well as around*/

.main-navigation .navigation>li>a:hover::after {
background-color: var(--fourth); /*podcast red*/
height: 2px;
} /*margin around text part of navigation buttons that affects spacing between, as well as around*/

.main-navigation .navigation>li.active>a {
color: var(--fourth-dark); /*podcast red-dark*/
font-weight: unset;
} /*should keep the font weight the same, even when active*/

.main-navigation .navigation>li.active>a::after {
background-color: var(--fourth-dark); /*podcast red-dark*/
height: 2px;
}

ul li {
margin-bottom: unset;
} /*reduces margin under nav buttons*/

//.banner__description {
//white-space: break-spaces;
//font-size: 1.5rem;
//max-width: unset;
//} /*theme banner is on every page, so I made a new banner class to enable different one on every page- banner100*/

//.banner__heading {
//font-size: unset;
//} /*theme banner is on every page, so I made a new banner class to enable different one on every page- banner100*/


/*-------------footer-------------*/
.main-footer__top {
background-color: var(--second); /*podcast green*/
padding: 10px 0;
display: none;
}

@media (min-width: 1024px)
.main-footer__top {
padding: 10px 0;
display: none;
}

.main-footer__top-container>div {
margin-bottom: 0;
}

.main-footer__top-container.no-menu {
display: none;
} /*takes out container within the top footer, leaving behind a think strip of div "shell"*/

.main-footer__bottom {
background-color: #000000; /*black*/
color: #ffffff; /*white*/
padding: 15px 0;
}

.main-footer__col1 {
text-align: center;
}

.main-footer__col1 img {
margin-bottom: 0;
}

@media (min-width: 1024px)
.main-footer__col1, .main-footer__col3 {
text-align: center;
}


/*-------------home page only-------------*/



/*-------------body-------------*/
.title {
padding-top: 1rem;
} /*makes padding-top the same as the padding-bottom*/

.assets {
margin-bottom: unset;
} /*unsets the bottom margin below an asset*/

.container {
max-width: unset;
} /*adjusts the max-width of the main container*/

#main-content {
//background-color: rgb(107,190,242,0.30); /*podcast sky blue, 30%*/
padding: 5% 10%;
margin-top: 0;
margin-bottom: 0;
margin-left: auto;
margin-right: auto;
} /*adjusts margins and padding around the main content area*/


/*-------------Item Page-------------*/
body.item.resource.show dl.media-list, .item #main-content > p {
//display: none;
} /*takes out the "Part of" on item page*/

//body.media.resource.show dl.media-list, .item #main-content > p {
//display: none;
//} /*takes out the "Part of" on media page*/

.resource-tags {
display: none;
} /*takes out the resource tags at the top of the page*/


body.item.resource.show, body.media.resource.show {
.uv.universal-viewer {
display: none;
}

.regions-container--all {
flex-direction: row;
}

.regions-container {
display: flex;
column-count: 2;
gap: 20px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
} /*splits the page into two columns so that if the main-region is set, it will be underneath*/

.regions-container .sidebar-region {
width: 50%;
padding: 10px;
} /*makes the sidebars share the width evenly*/

.regions-container .sidebar-region::after {
height: calc(100% + 50px);
} /*reduces the height of the bar that separates the two columns so that it doesn't overlap the main-region*/

.regions-container .sidebar-region--left::after {
    right: -11px;
} /*the dividing line between left and right regions*/

.regions-container .sidebar-region--right::after {
    left: -10px;
} /*the dividing line between left and right regions*/

.regions-container .sidebar-region.sidebar-region--left:has(.media-render audio) {
    width: 35% !important;
} /* targets the width of the left sidebar region if it has an audio media render */

.regions-container .sidebar-region.sidebar-region--left:has(.media-render audio) .media-embeds {
display: flex;
flex-direction: column-reverse;
}

.regions-container:has(.media-render audio) .sidebar-region.sidebar-region--right {
    width: 59% !important;
} /* targets the width of the right sidebar region if the left sidebar region has an audio media render */

.regions-container:has(.media-render audio) .sidebar-region.sidebar-region--right .metadata {
    height: 500px;
    overflow: auto;
} /*sets a height so that you can scroll through the metadata in one column while looking at or listening to the other column*/

.regions-container:has(.media-render audio) .sidebar-region.sidebar-region--right .metadata .value.resource img {
object-fit: contain;
object-position: right;
}

.regions-container .main-region {
order: 1 !important;
width: 65%;
} /*sets the main-region underneath the left and right sidebars*/

.metadata .media-list .resource-link {
box-shadow: 5px 5px 5px #00000025;
padding: 1rem;
text-decoration: unset;
} /*gives a shadow to the media list object, make sure that the text isn't underlined*/

.metadata .media-list .resource-link:hover {
text-decoration: underline;
background-color: #00488c30; /*var(--primary-dark) 30%*/
} /*on hover, gives the background some color and the text underlined*/

.metadata .media-list .resource-link img {
object-fit: contain;
object-position: right;
height: 75px;
} /*sets the height and position of the media list thumbnails*/

.metadata .media-list .resource-link .resource-name {
padding: unset;
padding-left: 1rem;
font-size: 0.9rem;
} /*adjusts the media list font*/

}



/*-------------Podcasts Page-------------*/
.site-page-podcasts, .site-page-sandbox {

   li.resource.item {
      margin: 10px;
   }

   .resource.item img {
      width: 10rem;
      border: 2px solid var(--primary);
      margin: 10px;
   }

   .resource.item a {
      height: max-content;
      vertical-align: middle;
      display: flex;
      align-content: space-around;
      align-items: center;
      flex-wrap: wrap;
   }

   .item-thumb {
      display: flex;
      align-items: center;
      align-content: space-around;
      flex-wrap: wrap;
   }

   .description.item-description {
      height: 100px;
      overflow: hidden;
      text-overflow: ellipsis;
   }

   h4.item-title {
      margin-bottom: 10px;
      font-size: 1.6rem;
   }
   h4.item-title a {
      color: var(--primary); /*Podcast blue*/
   }

   .item-info {
      padding: 20px;
      width: 75%
   }

}