/* Style the node previews */

article.node-view-mode-teaser .field--name-field-featured-image img{
  width:100%;
}

.field--name-field-featured-image img{
  width:100%;
}

/* Promo strips */
.view-promo-strips {
  width: 100%;
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0;
}

.view-promo-strips .view-content,
.view-promo-strips .views-row {
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.promo-strip {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
}

.promo-strip__link,
.promo-strip__media {
  display: block;
  overflow: hidden;
  line-height: 0;
}

.promo-strip__link:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.promo-strip .field,
.promo-strip .field-item {
  margin: 0;
}

.promo-strip img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  aspect-ratio: 6 / 1;
  object-fit: cover;
}

@media only screen and (max-width: 699px) {
  .view-promo-strips {
    margin: 0.75rem auto;
  }
}

/* Breadcrumbs */
#page-header {
  padding: 1.5rem 0 1.25rem;
}

.page-header {
  text-align: left;
}

.region-page-header {
  align-items: flex-start;
}

.c5-breadcrumb {
  width: 100%;
  margin: 0 0 0.5rem;
  padding: 0;
  font-size: 0.9rem;
  line-height: 1.4;
}

.c5-breadcrumb__items {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.c5-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  color: var(--color-text);
}

.c5-breadcrumb__item:not(:last-child)::after {
  content: "/";
  margin: 0 0.55rem;
  color: var(--color-text);
  opacity: 0.55;
}

.c5-breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
}

.c5-breadcrumb__link:hover,
.c5-breadcrumb__link:focus {
  color: var(--color-secondary);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.c5-breadcrumb__current {
  display: inline-block;
  max-width: 100%;
  color: #ffffff;
  opacity: 0.8;
}

.page-title-wrap {
  max-width: 900px;
}

@media only screen and (max-width: 699px) {
  #page-header {
    padding: 1rem 0;
  }

  .c5-breadcrumb {
    font-size: 0.82rem;
  }
}

/* Keep article content inside the mobile viewport. */
.main-container,
.page-content,
article.node,
article.node .node-content,
article.node .field,
article.node .field-item {
  min-width: 0;
  max-width: 100%;
}

article.node .node-content {
  overflow-wrap: break-word;
  word-break: break-word;
}

article.node .field--name-body {
  overflow-wrap: anywhere;
}

article.node .field--name-body img,
article.node .field--name-body video,
article.node .field--name-body iframe,
article.node .field--name-body object,
article.node .field--name-body embed,
article.node .field--name-body svg,
article.node .field--name-body figure {
  max-width: 100%;
}

article.node .field--name-body img,
article.node .field--name-body video,
article.node .field--name-body svg {
  height: auto;
}

article.node .field--name-body table,
article.node .field--name-body pre {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

article.node .field--name-body td,
article.node .field--name-body th {
  min-width: 0;
}

.node-view-mode-teaser{
  margin-bottom:2rem;
}

@media only screen and (min-width: 700px) {

  /* Give the gutter some breathing room! */
  article.node{
    padding:0 30px;
  }

  article.node-view-mode-teaser {
    .field--name-field-featured-image,
    .field--name-field-image{
      float: left;
      margin-right:20px;

      img {
        width:350px;
      }
    }

    .field--name-body{
      margin-left:370px;
      min-height:300px;
    }

    ul.links {
      min-height:20px;
    }
  }
}

 /* Style the views for home and articles. */
.view-home,
.view-articles
{
  .view-header h2 {
    position: relative;
    margin: 0 0 14px 0;
    padding: 0 0 0.5rem 0;
  }

  .view-header h2::before{
    width: 40px;
    bottom: 0;
    position: absolute;
    content: "";
    left: 0;
    height: 1px;
    background: var(--pink-gradient);
  }

  .view-header h2::after{
    position: absolute;
    content: "";
    left: 0;
    height: 1px;
    background: var(--pink-gradient);
    width:60px;
    bottom:-4px;
  }

  form.views-exposed-form{
    /* Collapsible form filter functionality */
    .mobile{
      display: none;
    }

    @media only screen and (max-width: 1064px) {
      .mobile {
        display: block;
        clear: both;
      }

      .fullWidth{
        display:none;
      }
    }

    /* Collapsible element css */
    input[type='checkbox'] {
      display: none;
    }

    .wrap-collabsible {
      margin: 1.2rem 0;
    }

    .lbl-toggle {
      display: block;
      font-weight: bold;
      font-family: monospace;
      font-size: 1.2rem;
      text-transform: uppercase;
      text-align: center;
      padding: 1rem;
      color: #DDD;
      /*background: var(--color-primary);*/
      background-color: rgba(242, 108, 79, 0.85);
      /*background: var(--bg-content);*/
      cursor: pointer;
      border-radius: 7px;
      transition: all 0.25s ease-out;
    }

    .lbl-toggle:hover {
      color: #FFF;
    }

    .lbl-toggle::before {
      content: '+';
      display: inline-block;
      padding:2px 5px;
      text-align: center;
      /*border-top: 5px solid transparent;*/
      /*border-bottom: 5px solid transparent;*/
      /*border-left: 5px solid currentColor;*/
      /*vertical-align: middle;*/
      /*margin-right: .7rem;*/
      /*transform: translateY(-2px);*/
      /*transition: transform .2s ease-out;*/
    }

    .toggle:checked+.lbl-toggle::before{
      content: '-';
      /*transform: rotate(90deg) translateX(-3px);*/
    }
    .collapsible-content {
      max-height: 0px;
      overflow: hidden;
      transition: max-height .25s ease-in-out;
    }
    .toggle:checked + .lbl-toggle + .collapsible-content {
      max-height: 350px;
    }

    .toggle:checked+.lbl-toggle {
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

    .collapsible-content .content-inner {
      background: var(--bg-content);
      border-bottom: 1px solid var(--color-primary);
      border-bottom-left-radius: 7px;
      border-bottom-right-radius: 7px;
      padding: .5rem 1rem;
    }
    .collapsible-content p {
      margin-bottom: 0;
    }

    /* Style the exposed form elements */
    .form-item,
    .form-actions {
      display: inline-block;
      padding:10px;
    }

    select {
      height:42px;
    }

    input.form-autocomplete,
    input.form-text{
      background-color:var(--bg-body)
    }

    .form-item-field-tag-s-target-id{
      width:30%;

      input {
        width:100%;
      }
    }
  }
}

/* About the author section of articles */
#block-zuvi-customized-views-block-about-the-author-block-1 {
  border: 1px solid var(--color-primary);
  padding: 15px;
  min-height:205px;

  @media only screen and (min-width: 700px) {
    .views-field-user-picture {
      float: left;
      margin-right: 20px;

      img {
        width:175px;
      }
    }


  }
}

/* Add a clear block for easy handling of floated content */
div.clearBlock {
  clear:both;
}

/* Article Info styling */
div.article-info{
  border:1px solid var(--color-primary);
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  max-width: 100%;
  min-width: 0;

  .field {
    border-right:1px solid  var(--color-primary);
    min-width: 0;
  }
  .field:last-child{
    border-right:none;
  }

  .field-label,
  .field-item {
    padding-right:2em;
    padding-left:5px;
  }

  .field-label {
    border-bottom: 1px solid var(--color-primary);
    width:100%;
  }

  .field--name-field-section {
    flex-grow: 1;
  }

  .field--name-field-discipline-s {
    flex-grow: 2;
  }

  .field--name-field-mechanical-skill {
    flex-grow: 1;
  }
}

@media only screen and (max-width: 699px) {
  div.article-info {
    display: block;
  }

  div.article-info .field {
    border-right: none;
    border-bottom: 1px solid var(--color-primary);
  }

  div.article-info .field:last-child {
    border-bottom: none;
  }

  div.article-info .field-label,
  div.article-info .field-item {
    padding-right: 5px;
  }
}

/* Author page styles */
article.userProfile{
  .field--name-user-picture {
    float:left;
    padding-right:15px;
  }
}

#block-zuvi-customized-views-block-content-by-author-block-1 {
  h2.block-title {
    font-size:200%;
    border-bottom:1px solid var(--color-primary);
    text-align: center;
    padding-bottom:0;
    margin:0.5em 0 1em;
  }
}

/* Theme the ratings block */
#ratings {
  border: 1px solid var(--color-text);
  margin-bottom:1em;

  h3{
    border-bottom: 1px solid var(--color-text);
    padding:0.25em;
  }

  .fieldsWrapper {
    padding:0.5em;

    @media only screen and (min-width: 700px) {

      display: -ms-flex;
      display: -webkit-flex;
      display: flex;
      margin-bottom:1em;

      .field--type-starrating{
        flex-grow: 1;
      }
    }

    @media only screen and (max-width: 699px) {
      .field{
        margin-bottom:0.7em;
      }
    }
  }

}

/* Theme the homepage latest news section */
.home-page-block-view {
  clear:both;

  .view-content {
    /*display: -ms-flex;*/
    /*display: -webkit-flex;*/
    /*display: flex;*/
    /*margin-bottom: 1em;*/
    /*flex-wrap: wrap;*/

    .views-row {
      /*flex-grow: 1;*/
      width:24%;
      display: inline-block;
      position: relative;
      margin-right:0.25em;
      margin-bottom:0.5em;

      .views-field-title,
      .views-field-field-title-short{
        position: absolute;
        bottom: 0.25em;
        left: 0.5em;
        padding:0 0.25em;
        background-color:var(--bg-content);
      }
    }

    @media only screen and (max-width: 750px) {
      .views-row{
        width:47%;
        margin-bottom:10px;
      }
    }
  }

}

/* Theme the homepage intro */
#block-zuvi-customized-homepageintro{
  padding:0;
  margin:0;

  img {
    width:100%;
  }
}

/* Fix the homepage header spacing */
#page-header{
  padding: 3.8rem 0 2.25rem;
}

/* Adjust search page as necessary */
form.search-form{
  a.search-help-link,
  details.search-advanced {
    display: none;
  }
}