/**
 * SCALE Responsive Stylesheet for SCALE Drupal Theme 2026.
 * This sheet contains all the @media breakpoints for overrides to scale-base.css
 * which itself overrides styles.css (the original Boostrap 5 subtheme styles).
 *
 * All defined breakpoints can be found in scale.breakpoints.yml.
 * This is a mobile first theme that relies on min-width primarily.
 *
 * @link          https://www.apereo.org Apereo Foundation
 * @since         1.0.0
 * @copyright     Apereo Foundation 2023
 */

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}

/* Small Tablets */
@media only screen and (min-width : 600px) {
  #rpi-topbar-links nav {
    justify-content: space-between;
  }
  #rpi-topbar-links ul.rpi-links {
    display: flex;
  }
  #rpi-topbar-links li.rpi-eng-link {
    display: block;
  }
  .navbar-brand {
    justify-content: space-between;
  }
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
  /* GENERAL */
  .field--name-field-image,
  .field--name-field-logo {
    float: right;
    text-align: right;
    margin: 0 0 1.5rem 1.5rem;
    max-width: 50%;
  }
  .field--name-field-logo {
    max-width: 30%;
  }
  /* PEOPLE */
  .view-people-for-display .view-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
  }
  .view-people-for-display img {
    min-width: 0;
    max-height: 160px;
    width: auto;
  }
  /* RESEARCH AREAS */
  a.research-area-item {
    flex-direction: row;
  }
  a.research-area-item .research-area-image img {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
  /* PROJECTS */
  a.project-item {
    flex-direction: row;
  }
  a.project-item .project-image img {
    width: 300px;
    min-width: 300px;
    max-width: 300px;
  }
  body.page-node-type-project .field--name-field-teaser-image img {
    float: right;
    max-width: 50%;
    margin: 02rem 0 2rem 2rem;
  }
  /* SOFTWARE */
  .view-software .software {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 1rem;
  }
  .view-software .software div {
    flex: 1 1 0;
  }
}

/* Medium Devices, Desktops - the primary break point */
@media only screen and (min-width: 992px) {
  .navbar-brand {
    padding-right: 0.4rem;
  }
  .site-logo {
    display: block;
  }
  .site-logo img {
    width: 60px;
    height: auto;
    margin: 0;
  }
  /* NAVBAR REGION */
  .region.region-nav-main {
    align-items: center;
    flex-direction: row;
  }
  /* SOCIAL MEDIA ICONS */
  #block-johnwen-socialmediaicons {
    margin: 0;
  }
  #block-johnwen-socialmediaicons .field--name-body {
    margin: 0 6px 0 0;
  }
  /* DESKTOP NAVIGATION */
  #block-johnwen-main-navigation {
    display: block;
  }
  #block-johnwen-main-navigation a.dropdown-toggle::after {
    display: none; /* we do not use dropdowns on desktop version */
  }
  #block-johnwen-main-navigation a.nav-link {
    color: white;
    padding: 0.25rem;
  }
  #block-johnwen-main-navigation .nav-link.active {
    background-color: black;
  }
  #block-johnwen-main-navigation a.nav-link {
    padding: 0.25rem 1rem;
  }
  #block-johnwen-main-navigation li.nav-item:first-child a.nav-link {
    background-color: var(--wen-color-gray-01);
    padding-left: 0;
  }
  /* MOBILE NAVIGATION */
  #block-johnwen-mainnavigation-2 {
    display: none;
  }
  /* GENERAL */
  .field--name-field-image img {
    margin: -3rem 1.5rem 0 0;
  }
  /* PERSON */
  body.page-node-type-person .field.field--name-field-photo.field--type-image.field--label-hidden.field__item {
    max-width: 400px;
    float: right;
    margin: -3rem 0 2rem 2rem;
  }
  .view-people-for-display .view-content {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
  /* GRANT */
  body.page-node-type-grant .node__content .field {
    display: grid;
    grid-template-columns: 1fr 4fr;
  }
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

/* Very Large Devices, Very Wide Screens */
@media only screen and (min-width : 1400px) {
  .container {
    max-width: 1200px;
  }
}