:root {
  /* color */
  --black: #000000; 
  --deep-blue-accent: #035C8C; 
  --blue_nb: #007FC1;
  --green-accent: #00a6a6;
  --grey: #383838;
  --charcoal-neutral: #1E1E1E;
  --light-grey-blue: #e8f4fa;
  --orange_brighter: #FFE3B3;
  --orange-accent: #ff7043;
  --white: #ffffff;
  /* font */
  --font-family-base: 'ABeeZee', Arial, sans-serif;
  --font-color-base: #000;
  /* button */
  --btn-primary: #EF3A50;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #D73347;
  --btn-primary-active: #B52A3B;
  --btn-primary-disabled: #F6A5AF;
  /* links */
  --a-primary-text: #8E44AD;
  --a-primary-hover: #9B59B6;
  --a-primary-visited: #6C3483;
  /* background */
  --bg-soft-peach: #fff0e2;
  --bg-misty-mint: #e6f7f4;
  --bg-pale-lavender: #f5f1ff;
  --bg-light-buttercream: #fff8df;
  /* header */
  --bg-header-deep-navy: #002f4b;
  }

em, i { font-style: italic; }
strong, b { font-weight: 700; }

/* -- body --*/
html, body { height: 100%; }
html {
  font-family: sans-serif;
  font-size: 20px!important;
  line-height: 30px;
}

body {
  min-height: 100%;
  font-family: var(--font-family-base);
  font-size: 20px!important;
  font-weight: 400;
  line-height: 1.6;
  color: var(--font-color-base);
}

body > main > section {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
body > main > .container, body > main > .container-fluid {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
body.template-homepage { background-color: var(--bg-soft-peach)!important; }
body.template-searchresults { background-color: var(--bg-misty-mint)!important; } 
body.template-storypage { background-color: var(--bg-pale-lavender)!important; } 
body.template-storyindexpage { background-color: var(--bg-light-buttercream)!important; } 

/* -- Heading -- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-base);
  font-weight: 700!important;
  color: var(--blue_nb);  
  line-height: 1.2;
}
h1 {
  color: var(--deep-blue-accent)
}
h2, h3, h4, h5, h6 {
  color: var(--charcoal-neutral);
}
.h1 { font-size: clamp(2.25rem, 5vw, 3.0rem)!important; } /* responsive */
.h2 { font-size: clamp(1.75rem, 4vw, 2.0rem)!important; } /* clamp(min, preferred, max) */
.h3 { font-size: clamp(1.5rem, 3vw, 1.75rem)!important; }
.h4 { font-size: clamp(1.25rem, 2vw, 1.5rem)!important;}
.h5 { font-size: clamp(1.125rem, 1vw, 1.25rem)!important; }
.h6 { font-size: clamp(1.0rem, 1vw, 1.125rem)!important; }

h1 { margin: 0 0 1.5rem; }
h2 { margin: 1.5rem 0 0.75rem; }
h3 { margin: 1rem 0 0.5rem; }

/* -- Link Href -- */
a { 
  color: var(--a-primary-text);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover, a:focus { 
  color: var(--a-primary-hover); 
  text-decoration-color: var(--a-primary-hover); 
}
a:visited { 
  color: var(--a-primary-visited); 
}

/* -- Buttons -- */
.btn-primary {
  background-color: var(--btn-primary);
  border-color: var(--btn-primary);
  color: var(--btn-primary-text)!important;
  border-radius: 1rem;
  font-weight: bold;
  /*box-shadow: 0 2px 4px rgba(0,0,0,0.2);*/
  transition: transform 0.1s ease, background-color 0.2s ease;
}

.btn-primary:hover {
  background-color: var(--btn-primary-hover);
  border-color: var(--btn-primary-hover);
  transform: scale(1.02);
}

.btn-primary:active {
  background-color: var(--btn-primary-active);
  border-color: var(--btn-primary-active);
  transform: scale(0.98);
}

.btn-primary:disabled {
  background-color: var(--btn-primary-disabled);
  border-color: var(--btn-primary-disabled);
  color: #fff;
  opacity: 0.8;
}

/* -- Audio Player Button -- */
audio.audio-player {
  width: 100%;
  background-color: var(--deep-blue-accent); /* light gray */
  border: 2px solid var(--deep-blue-accent); /* Bootstrap blue */
  border-radius: 8px;
  padding: 4px;
}
.listen_btn {
  margin-top: var(--bs-card-spacer-y);
}
.read_btn {
  margin-top: var(--bs-card-spacer-y);
}
/* -- Footer -- */
footer.bg-footer {
    background-color: var(--bg-header-deep-navy)!important;
    color: var(--white);
}
footer .fa-brands {
    color: var(--white);
}

/* -- Header -- */
header.site-header {
  position: relative;
  z-index: 10;
  background-color: var(--bg-header-deep-navy)!important;
  padding: 0;
}
.navbar.header--gradient {
  background-image: none; /* safety */
  background: linear-gradient(180deg, var(--bg-header-warm-white) 0%, var(--bg-header-warm-white) 100%);
}
.site-header img.site_logo {
    width: auto;
    height: 70px;
}
.site-header .btn.btn-primary {
  border-radius: 1rem;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform 0.1s ease, background-color 0.2s ease;
}

.site-header .btn-primary:hover {
  transform: scale(1.02);
}

.site-header .btn-primary:active {
  transform: scale(0.98);
}

.site-header .btn-primary:disabled {
  opacity: 0.8;
}

/* -- Homepage -- */
.latest_story {
  background-color: var(--light-grey-blue); 
  padding: 0.75rem 0;
}
@media screen and (min-width: 768px) {
    .latest_story {
        padding: 2.5rem;
    }   
}
.latest_story .card img.card-img-top {
  border-radius: 0!important;
}
.latest_story .card .card-header {
  font-weight: 700;
  color: var(--deep-blue-accent);
}
.latest_story .card .card-title {
  margin: 0!important;
}

.hero {
  padding: 2rem 0;
}
.hero h1 {
  margin-top: 0!important;
}
.hero .hero-img {
  height: 600px;
  width: auto;
}
@media (max-width: 992px) {
  .hero .hero-img {
    max-height: 250px; 
    width: auto;
    margin-top: 2rem;
  }
}

/* -- Images -- */
.image-full-width {
    width:100%; 
    height:auto;
}

.img-fluid {
  max-height: 400px;
  width: auto;
}
@media (max-width: 768px) {
  .img-fluid {
    max-height: 300px; /* smaller on tablets */
    width: auto;
  }
}
@media (max-width: 576px) {
  .img-fluid {
    max-height: 250px; /* even smaller on phones */
    width: auto;
  }
}

/* -- Index Story Page -- */
.index_story_page .card .read_btn {
  margin-top: var(--bs-card-spacer-y);
}

/* -- Pagination -- */
.active > .page-link {
  background-color: var(--bg-header-deep-navy)!important;
  border-color: var(--bg-header-deep-navy)!important;
}
.active > a.page-link {
  color: var(--white)!important;
}
.page-link {
  color: var(--bg-header-deep-navy)!important;
}
/* -- Search -- */
.search {
  padding: 2rem 0;
}
.search h1 {
  margin-top: 0!important;
}
.search_result {
  background-color: var(--white);
  padding: 2rem 0;
}
.search_result h2 {
  margin-top: 0!important;
}

/* -- Story Page -- */
.story_page img {
  margin-top: 0.5rem;
  border-radius: 0.375rem;
}
  @media (max-width: 768px) {
    .story_page img {
      margin-top: 1rem;
    }
  }
  @media (max-width: 576px) {
    .story_page img {
      margin-top: 1rem;
    }
  }
.story_page .card {
  background-color: var(--bg-pale-lavender)!important;
}
.story_page .card .read_btn {
  margin-top: var(--bs-card-spacer-y);
}
.story_page img.card-img-top {
  margin-top: 0;
}
.related_stories {
  background-color: var(--bg-soft-peach);/*var(--bg-light);*/
  padding-bottom: 2rem;
}
  .related_stories h2 {
    margin-top: 0;
  }