/* EasyBlog - General Style Overrides*/
#eb.st-5 .eb-gallery-body {
  background: rgba(255, 255, 255, 0.8) !important
}
#eb.st-5 .eb-gallery-body .eb-gallery-content {
  color: #444 !important
}
#eb.eb-mod .eb-gallery-title a {
  color: #08c !important;
}
/* templates/joomla/html/com_easyblog/blogs/latest/card/default.php*/
#eb .eb-card {
  box-shadow: none;
}
#eb .eb-cards--2 .eb-cards__item {
  padding: 0 1rem 1rem;
}
#eb .eb-card__bd, #eb .eb-card__ft {
  padding: 1rem 0;
}
#eb .eb-cards--2 {
  margin-left: -1rem;
  margin-right: -1rem;
}
/* Blog Magazine
Added: 2020-04-20 - Mark Lee / WilcoA
*/
#eb .eb-mag.eb-mag-list .eb-more {
  margin-top: 30px;
}
#eb .eb-mag-table + .eb-mag-table {
  margin-top: 30px;
}
/* 
Added 2021-03-19 - Mark Lee / WilcoA (PR raised by Patrick Jackson)
Aligns continue reading buttons across the issue category view
*/
#eb .eb-mag-grids__item > div, #eb .eb-blog-grid__content { /* Second class applies to issues layout */
  display: flex;
  flex-direction: column;
  height: 100%;
}
#eb .eb-mag .eb-mag-body, #eb .eb-blog-grid__body { /* Second class applies to issues layout */
  display: flex;
  height: 100%;
  flex-direction: column;
}
#eb .eb-mag .eb-mag-body p {
  flex-grow: 1;
}
#eb .eb-mag .eb-mag-body p:empty {
  display: none;
}

#eb .eb-mag-grids .eb-mag-blog-image, #eb .eb-blog-grid-image {
    background-size: contain; /* Changes it from cover which cropped the images */
    padding-bottom: 48%; /* Was 60% for cover */
}
/* EasyBlog Article styles
- proposed in https://github.com/joomla/magazine.joomla.org/issues/15 by @coolcat-creations
- Tweaked by @particthistle April 2021
*/
#eb .eb-mag .eb-mag-body, #eb .eb-blog-grid__body {
  font-size: var(--bs-body-font-size);
  line-height: 135%;
}
#eb .eb-mag .eb-mag-grids__item, #eb .eb-blog-grid__item {
  padding: 0 0.5rem;
}
#eb .eb-mag .magazine-btn-more, #eb .eb-post-more .btn {
  /* These are the variables used for the bootstrap secondary buttons. If updated in the core template we should just copy/paste here */
  --bs-btn-color: #000;
  --bs-btn-bg: #ddd;
  --bs-btn-border-color: #ddd;
  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #e2e2e2;
  --bs-btn-hover-border-color: #e0e0e0;
  --bs-btn-focus-shadow-rgb: 188,188,188;
  --bs-btn-active-color: #000;
  --bs-btn-active-bg: #e4e4e4;
  --bs-btn-active-border-color: #e0e0e0;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

  font-size: var(--bs-body-font-size);
  border: none;
  /* These are important because in the issues view easyblog uses important for styling */
  background: var(--bs-btn-bg) !important;
  color: var(--bs-btn-color) !important;
  font-weight: normal;
  width: 100%;
  border-radius: 0;
}
#eb .eb-mag .magazine-btn-more:hover, #eb .eb-post-more .btn:hover {
  color: var(--bs-btn-hover-color) !important;
  background-color: var(--bs-btn-hover-bg) !important;
  border-color: var(--bs-btn-hover-border-color);
}
#eb .eb-mag .magazine-btn-more:active, #eb .eb-post-more .btn:active {
  color: var(--bs-btn-active-bg) !important;
  background-color: var(--bs-btn-active-color) !important;
  border-color: var(--bs-btn-active-border-color);
}
#eb .eb-mag a {
  color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
}
#eb .eb-mag .magazine-btn-more::before {
  content: "\f054";
  font-family: Font Awesome\ 5 Free;
  font-weight: 900;
  padding-right: 0.25rem;
  font-size: 0.9rem;
}
#eb .eb-mag-title, #eb .eb-blog-grid__title, #eb .eb-post-title, #eb .eb-authors-name {
  color: var(--bs-heading-color);
  font-size: 1.25rem;
}
#eb .eb-mag-thumb {
  margin: 10px 0;
  max-height: 160px;
}
/* EasyBlog Article styles
- proposed in https://github.com/joomla/magazine.joomla.org/issues/16 by @coolcat-creations
- Tweaked by @particthistle April 2021
*/
.eb-entry-body {
  padding: 0 100px;
}
.eb-post-thumb {
  max-width: none;
  margin: auto;
}
#eb h2, #eb h3, #eb h4, #eb h5, #eb h6 {
  color: var(--bs-heading-color);
}
.eb-entry-meta.text-muted a {
  text-decoration: underline;
}
.es-post-state {
  padding: 0 100px;
}
.eb-entry-head {
  padding: 20px 100px;
}
@media (min-width: 768px) {
  #eb .eb-post-content {
	width: 100%;
	padding: 20px 100px;
  }
}
#eb .eb-reading-indicator {
  padding: 4px 8px;
  display: inline-block;
  background-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

#eb .eb-post-meta a {
	color: #42a5f5;
}
#eb .eb-post-meta a:hover {
	color: #1e88e5;
}
#eb .eb-post-content {
	font-size: 1rem;
	line-height: 135%;
}
#eb .eb-mag-body {
  margin-bottom: 0;
}

@media(max-width: 767px) { /* Mobile styles applying to above April 2021 improvements */
    #eb .eb-mag .eb-mag-grids {
        display: grid;
        grid-template-columns: auto;
        margin-bottom: 0.5rem;
    }
    
    #eb .eb-blog-grid__item { /* Displays flex columns at single column on mobile vs 3 columns */
        flex: 0 0 100%;
    }
  
    .eb-entry-body {
        padding: 0;
    }
    
    #eb .eb-post-thumb .eb-post-image img {
	    max-width: 100%;
      width: 100%;
    }
    .eb-entry-body .eb-image.eb-post-thumb {
      margin: auto;
    }
    .eb-entry-head {
	    padding: 1.25rem 0;
    }
    #eb h1 {
	    font-size: 1.6rem;
    }
    #eb .es-post-state { /* Center reading time indicator on mobile */
      padding: 0px 35px;
      justify-content: center;
    }
    .view-blogger #eb .eb-post-content { /* Author article list view */
	width: 100%;
	padding: 0;
    }
    #eb h2, #eb h3, #eb h4, #eb h5, #eb h6 {
      margin: 30px 0 20px;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .com_easyblog aside { /* Add margin at top to space stacked view */
      margin-top: 20px;	 
    }
    #eb .eb-mod-thumb .eb-mod-image { /* Remove border on smaller views */
      border: none !important;
      padding: 0;
    }
    #eb .eb-mod-thumb .eb-mod-image img { /* Tidy up thumbs for related articles on tablet and mobile */
      max-width: 30%;
      float:left;
    }
    #eb .eb-post-image img { /* Featured image on article on table */
      min-width: calc(100% + 150px);
      height: auto;
      margin-left: -75px;
    }
    #eb .eb-entry-article img { /* Overrides default max-width on tablet */
	max-width: 100%;
	height: auto;
    }
} /* End mobile styles */


/* 
Added Patrick Jackson 2021-03-10
Pushes heading down when page scrolls so it's not hidden below the page header.
*/
#eb .eb-anchor-link {
  scroll-margin-top: 60px;
}
/* Sticky Progress bar
Added: 2020-06-21 - Mark Lee / WilcoA
*/
body #eb .eb-reading-progress, body #eb .eb-reading-progress-sticky {
  top: 50px !important;
}
body #eb.is-mobile .eb-reading-progress, body #eb.is-mobile .eb-reading-progress-sticky {
  top: 0px !important;
}
/*blog navigation*/
#eb.mod_toolbar {
  position: relative;
  z-index: 2;
  background: #F4F6F7;
}
#eb-canvas.mm-menu_offcanvas {
  width: 80vw;
  z-index: 2;
}
/*     mod_easybloglatestblogs
    Lower View All Button
*/
.view-all-blogs {
  padding-top: 40px;
}
/* Homepage layout */
body #eb .eb-mag-blog-image {
  background-size: contain;
}
body #eb .eb-mag-grids .magazine-btn-more {
  display: block;
  text-align: center;
}
/* Moves the div with the readmore element to the bottom of the body div. As there isn't a class in the html output we just use last child and rely on the current structure */
#eb .eb-mag .eb-mag-body div:last-child {
    margin-top: auto;
}
/* End - EasBlog */



/* 2023 Changes to make colours map to Bootstrap 5 variables and therefore working in dark mode */
#eb .eb-comment-body {
    color: var(--bs-body-color);
}

#eb .text-muted, #eb .eb-post-hits, #eb .mod-muted, #eb .eb-mag-meta-date {
  color: var(--bs-secondary-color);
}

#eb .eb-post-comments a {
  color: rgba(var(--bs-link-color-rgb),var(--bs-link-opacity,1));
}

#eb .mod-btn-primary, #eb .btn-primary {
  font-size: var(--bs-body-font-size);
  background: var(--bs-primary) !important;
  border-color: var(--bs-primary) !important;
  border-radius: 0;
  font-weight: normal;
}

@media (prefers-color-scheme: light) {
  #eb .eb-mag .eb-mag-post-title a, #eb .eb-mag .eb-mag-title a, #eb .eb-mod-title a {
     color: var(--bs-dark-text-emphasis);
  }
}

@media (prefers-color-scheme: dark) {
  #eb .eb-mag .eb-mag-post-title a, #eb .eb-mag .eb-mag-title a, #eb .eb-mod-title a {
     color: var(--bs-light-text-emphasis);
  }
}

#eb .eb-mag-header-title {
  color: var(--bs-secondary-text-emphasis);
}

#eb .eb-mag-header-title:after {
  background-color: var(--bs-secondary-bg);
}

#eb .eb-post-featured {
  color: var(--bs-danger);
}

#eb .eb-authors-head {
  background: var(--bs-secondary-bg-subtle);
}

#eb .eb-mod-thumb .eb-mod-image {
  background-color: transparent;
}

#eb .eb-entry-nav > div > a:hover {
  background-color: var(--bs-secondary-bg);
}
/* End - 2023 Changes */

/* Use a regular font size - helps with a11y validation on the color contrast */
#eb .eb-shares a {
  font-size: var(--bs-body-font-size);
  border-radius: 0;
}
#eb .btn-eb-twitter {
  background-color: #1D9BF0 !important;
  border-color: #1D9BF0 !important;
}