/*
 * Additional styles, added by rjw
 *
 */


/*
 * EVENTS CALENDAR STYLES
 *
 * These were necessary after updating the events calendar plugin in June 2019.
 *
 */


/* restyle h1 page titles */

h1.tribe-events-page-title {
  font-size: 24px;
  font-weight: 700;
  line-height: 28px;
  color: #404041;
  margin: 0 0 0.5em 0;
  padding-bottom: 2%;
  text-align: center;
}

/* remove h2 page titles */

h1.tribe-events-page-title,
h2.tribe-events-page-title {
  display: none;
}

/* event title adjustment */

.single-tribe_events .tribe-events-single-event-title {
  border-bottom: none;
}

/* clear whatever follows the view selector */

.tribe-bar-disabled + * {
  clear: both;
}

/* styles for next/prev links for month, week, day views */

#tribe-events-content > .tribe-events-nav-pagination > ul.tribe-events-sub-nav {
  list-style-type: none;
  margin: 0;
  overflow: hidden;
  padding: 0;
  text-align: center;
}
#tribe-events-content > .tribe-events-nav-pagination > ul.tribe-events-sub-nav li.tribe-events-nav-previous {
  float: left;
  margin-right: 5px;
  text-align: left;
}
#tribe-events-content > .tribe-events-nav-pagination > ul.tribe-events-sub-nav li.tribe-events-nav-next {
  float: right;
  margin-right: 5px;
  text-align: right;
}

/* list view - remove borders on h2 month/year */

body.post-type-archive-tribe_events .tribe-events-list-separator-month,
body #tribe-events .tribe-events-list-separator-month {
  border: none;
}

/* single event page - space below event date */

.tribe-events-single .tribe-events-schedule {
  margin-bottom: 1em;
}


/*
 * MOBILE MENU STYLES
 *
 * Originally, long menu items were cut off because the height was fixed at 40px,
 * so wrapped text was cut off.
 *
 */

#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item a {
  height: auto !important;
  min-height: 40px;
  line-height: 1.25 !important;
  padding: 6px 12px 6px 10%  !important;
}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item:first-child a {
  padding-top: 12px !important;
}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item:last-child a {
  padding-bottom: 12px !important;
}
#responsive-menu-container #responsive-menu ul.responsive-menu-submenu li.responsive-menu-item li.responsive-menu-item a {
  padding-left: 15% !important;
}


/*
 * PARTNER LOGO STYLES
 *
 * Trying to make the partner logos on /engage/idss-strategic-partnerships look nicer. November 2020.
 * The HTML is a container div with class partner-logos containing a number of figures.
 * <div class="partner-logos">
 *   <figure><a><img></a><figcaption>TEXT</figcaption></figure>
 *   ...
 * </div>
 * We rely on the image being inside a link. A trick is used to keep the box containing the
 * image at a constant aspect ratio (3:2).
 * See https://mademyday.de/height-equals-width-with-pure-css/
 */

.partner-logos {
  display: grid;
  grid-gap: 40px 80px;
  grid-template-columns: repeat(auto-fill, minmax(180px,1fr));
}
.partner-logos figure {
  display: flex;
  flex-flow: column nowrap;
  justify-content: space-between;
  margin: 0;
}
.partner-logos figure > a {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.partner-logos figure > a::before {
  content: "";
  float: left;
  padding-top: 66.66666%;
}
.partner-logos figure > a > img {
  margin: 0;
}
.partner-logos figcaption {
  display: block;
  margin: 10px 0 0 0;
  text-align: center;
}