/*-------------------------------------------------
 Caused conflict with btn in global
-------------------------------------------------*/
:root {
  --background-color: rgb(255, 255, 255);
  --color-black: rgb(36, 36, 36);
  --color-white: rgb(255, 255, 255);
  --site-color: rgb(195, 82, 20);
  --button-dark-background: rgb(43, 23, 0);
  --button-all-hover: rgb(172, 172, 172); /*include blockquote color also*/
  --gradient: linear-gradient(320deg, rgb(43, 23, 0) 0%, rgb(80, 76, 71) 50%, rgb(43, 23, 0) 100%);
  --section-border: rgb(235, 237, 242);
  --footer-background: rgb(235, 237, 242); /* Large list tab background (resource page) also*/
  --footer-color: rgb(65, 65, 65); /*NAV TOO */
  --resources__tab--hover-color: rgb(238, 140, 87);
  --resources__tab--initial-state-tab-color: rgb(105, 105, 105);
}

a {
  color: var(--site-color);
  text-decoration: none;
}

a:hover {
  color: var(--button-all-hover);
}

a:active {
  color: var(--color-black);
}

a:link {
  color: var(--site-color);
  text-decoration: none;
}

/*-------------------------------------------------
Used in Resources Page only
-------------------------------------------------*/

.resourses--sm-text {
  font-size: 1.25rem;
  line-height: 2rem;
}

sup {
  top: -0.5em;
}

@media (max-width: 766px) {
  .tablink {
    font-size: 12px;
  }
}

/*-----------------------------------------------------
Teacher Resourses Section
Template also used in spirtual section on the home page
-----------------------------------------------------*/

.spiritual {
  background-color: var(--site-color);
  padding: 55px;
  align-items: center;
  justify-content: center;
  text-align: left;
}

.spiritual__border {
  border: 2px solid var(--color-white);
  border-radius: 16px;
  padding: 95px;
}

.spiritual__flex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 60px 40px;
}

/* No idea what this needs to be on the div not in the flexbox!!! But there it is. */
.spiritual__flex > div {
  margin: 10px;
}

@media (max-width: 786px) {
  .resource__wrapper {
    padding: 19px;
  }

  p,
  ul,
  ol {
    padding: 10px 10px 10px 15px;
  }

  .spiritual__border {
    border: none;
    text-align: left;
    padding: 0px;
  }

  .spiritual {
    padding: 55px 30px;
  }

  .spiritual__flex {
    justify-content: start;
    padding: 60px 30px;
  }
}

/*-------------------------------------------------
Tabs menu 
-------------------------------------------------*/

.tablink {
  background-color: var(--site-color);
  color: var(--color-black);
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 22px 8px;
  font-size: 16px;
  width: 20%; /* divides section into 5 tabs*/
  border-right: 2px solid var(--color-white);
}

@media (max-width: 495px) {
  .tablink {
    font-size: 13px;
  }
}

.tablink:hover {
  background-color: var(--resources__tab--hover-color);
}

/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: var(--color-black);
  display: none;
  padding: 100px 20px;
  height: 100%;
}

.tabcontent h3 {
  text-align: ledt;
}

.tabcontent p {
  text-align: left;
}

/* >>>>>>>> Note: ACTIVE TAB color changed in the HTML! <<<<<<<< */

#Tab1 {
  background-color: #fff;
}
#Tab2 {
  background-color: #fff;
}
#Tab3 {
  background-color: #fff;
}
#Tab4 {
  background-color: #fff;
}
#Tab5 {
  background-color: #fff;
}

/* Tab 2 flexbox */
.grid-tops-card {
  /* background-color: dodgerblue; */
  color: var(--color-black);
  padding: 1rem;
  /* height: 4rem; */
}

.grid-tops-card img {
  width: 200px;
}

.grid-tops-cards {
  max-width: 1200px;
  text-align: center;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  padding: 70px;
}

/*-------------------------------------------------
Collapsible menu with "+" marks
-------------------------------------------------*/

.collapsible {
  background-color: var(--resources__tab--initial-state-tab-color);
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 17px;
}

.active,
.collapsible:hover {
  background-color: var(--site-color);
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: var(--footer-background);
}