/***************************************************************************************************
****************************************************************************************************

Project..... Vaughan Memorial Library website
Date........ Q2-2023
Developer... vincent.grovestine@acadiau.ca

****************************************************************************************************
***************************************************************************************************/



/*******************************************************************************
********************************************************************************
** MOD_BREADCRUMB: Breadcrumb navigation
********************************************************************************
*******************************************************************************/

.mod_breadcrumb {
  opacity: 0.875;
}

.mod_breadcrumb ul {
  list-style-type: none;
  margin: 0.5em 0;
}

.mod_breadcrumb ul li {
  display: inline;
  font-size: 0.75em;
}

.mod_breadcrumb ul li:before {
  font-family: "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  content: "\f105\00a0";
}

.mod_breadcrumb ul li.first:before {
  content: "";
}

.mod_breadcrumb ul li a {
  text-decoration: none !important;
}

.mod_breadcrumb ul li.first a {
  width: 0;
  overflow: hidden;
}

.mod_breadcrumb ul li.first a:before {
  font-family: "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  content: "\f015\00a0";
}



/*******************************************************************************
********************************************************************************
** MOD_CALENDAR: Table-layout general styling
********************************************************************************
*******************************************************************************/

.mod_calendar table {
  border-collapse: separate;
  border-spacing: 0.25em;
  width: 100%;
}

.mod_calendar thead th {
  padding: 0.25em;
  vertical-align: baseline;
}

.mod_calendar thead th.previous {
  text-align: left;
}

.mod_calendar thead th.current {
  text-align: center;
  font-weight: bold;
  color: var(--vml-color-mod_calendar-th-current-text);
}
.mod_calendar thead th.current h2 {
  margin: 0;
  padding: 0;
}

.mod_calendar thead th.next {
  text-align: right;
}

.mod_calendar thead th.label {
  color: var(--vml-color-mod_calendar-th-label-text);
  text-align: center;
  font-weight: normal;
  border-top: 1px solid var(--vml-color-border);
}

.mod_calendar tbody td.days {
  background-color: var(--vml-color-mod_calendar-td-days-background);
  color: var(--vml-color-mod_calendar-td-days-text);
  box-sizing: border-box;
  padding: 0.25em;
  width: 14.27%;
  vertical-align: top;
  height: 4.375em;
}

/*
.mod_calendar tbody td.days.col_first {
  border-left: none;
}

.mod_calendar tbody td.days.col_last {
  border-right: none;
}
*/

.mod_calendar tbody td.days.empty {
  background-color: var(--vml-color-mod_calendar-td-days-empty-background);
}

.mod_calendar tbody td.days.open {
  background-color: var(--vml-color-mod_calendar-td-days-open-background);
  color: var(--vml-color-mod_calendar-td-days-open-text);
}

.mod_calendar tbody td.days.closed {
  background-color: var(--vml-color-mod_calendar-td-days-closed-background);
  color: var(--vml-color-mod_calendar-td-days-closed-text);
}

.mod_calendar tbody td.days.today {
  background-color: var(--vml-color-mod_calendar-td-days-today-background);
  color: var(--vml-color-mod_calendar-td-days-today-text);
}

.mod_calendar tbody td.days div.header {
  font-weight: normal;
}

.mod_calendar td div.event {
  margin-top: 0.25em;
  font-size: 0.875em;
  line-height: 1.25em;
}

.mod_calendar td div.event span.title {
  font-weight: bold;
  display: block;
}

.mod_calendar td div.event span.time {
  display: block;
}

.mod_calendar td.closed div.event span.time {
  display: none;
}

.mod_calendar td div.event span.tba {
  display: block;
  color: var(--vml-color-mod_calendar-td-event-tba-text);
}

.mod_calendar tbody td.days.today span.tba {
  color: inherit;
}

@media all and (max-width: 960px) {
  .mod_calendar thead th.label span {
    display: none;
  }
}

@media all and (min-width: 800px) {
  .mod_calendar.library-hours {
    display: block;
  }
}
@media all and (max-width: 800px) {
  .mod_calendar.library-hours {
    display: none;
  }
}



/*******************************************************************************
********************************************************************************
** MOD_CUSTOMNAV: Page-top (below header) custom navigation
********************************************************************************
*******************************************************************************/

#top_nav nav.mod_customnav ul {
  margin: 0 0 0.25em 0;
  padding: 0;
  display: flex;
  flex-wrap:wrap;
  align-content: flex-start;
  justify-content: flex-start;
  gap: 0.5em 1.5em;
}

@media all and (max-width: 720px) {
  #top_nav nav.mod_customnav ul {
    align-content: center;
    justify-content: center;
  }
}

#top_nav nav.mod_customnav ul li {
  white-space: nowrap;
}

#top_nav nav.mod_customnav ul li a {
  font-weight: bold;
}

#top_nav nav.mod_customnav ul li a:hover {
  color: var(--vml-color-topnav-mod_customnav-a-active);
}

#top_nav nav.mod_customnav ul li a:active {
  color: var(--vml-color-topnav-mod_customnav-a-hover);
}



/*******************************************************************************
********************************************************************************
** MOD_EVENTLIST: Library hours events
********************************************************************************
*******************************************************************************/

.mod_eventlist.library-hours {
  display: table;
  margin-bottom: 0.625em;
}

.mod_eventlist.library-hours h2 {
  display: table-caption;
}

.mod_eventlist.library-hours .event.layout_upcoming {
  display: table-row;
}

.mod_eventlist.library-hours .event.layout_upcoming span {
  border-top: 1px solid var(--vml-color-hours-mod_eventlist-border);
  display: table-cell;
  padding: 0.375em 0.625em 0.375em 0;
}

.mod_eventlist.library-hours .event.layout_upcoming span.title {
  display: none;
}

.mod_eventlist.library-hours .event.layout_upcoming span.date {
  white-space: nowrap;
}

.mod_eventlist.library-hours .event.layout_upcoming.closed span {
  color: var(--vml-color-hours-mod_eventlist-closed-text);
}

.mod_eventlist.library-hours .event.layout_upcoming.current span {
  color: var(--vml-color-hours-mod_eventlist-current-text);
}

.mod_eventlist.library-hours .event.layout_upcoming.first span {
  border-top: none;
  font-weight: bold;
}

@media all and (min-width: 800px) {
  .mod_eventlist.library-hours {
    display: none;
  }
}
@media all and (max-width: 800px) {
  .mod_eventlist.library-hours {
    display: block;
  }
}



/*******************************************************************************
********************************************************************************
** MOD_EVENTLIST: Library hours events, homepage-specific styles
********************************************************************************
*******************************************************************************/

.home-1col #hours .mod_eventlist.library-hours {
  display: block !important;
}

.home-1col #hours .mod_eventlist.library-hours h2 {
  display: none;
}

.home-1col #hours .mod_eventlist.library-hours span {
  white-space: nowrap;
}



/*******************************************************************************
********************************************************************************
** MOD_NAVIGATION: Sidebar navigation and small-screen alternative (main menu)
********************************************************************************
*******************************************************************************/

nav#sidebar h2 {
  display: none;
}

nav#sidebar h2::after {
  content: " Menu";
  color: var(--vml-color-h2-after-text);
}

/*
nav#sidebar.mod_navigation {}
*/

nav#sidebar.mod_navigation ul {
  list-style: none;
  padding: 0;
  margin: 0 0 0 1.5em;
}

nav#sidebar.mod_navigation ul.level_1 {
  margin: 0;
}

nav#sidebar.mod_navigation ul.level_3 {
  display: none;
}

nav#sidebar.mod_navigation ul li span.active,
nav#sidebar.mod_navigation ul li a {
  display: block; /*inline-block;*/
  min-height: auto;
  padding: 0.25em 0.75em;
  margin-bottom: 0.125em;
  border-radius: 0.125em;
}

nav#sidebar.mod_navigation ul li.submenu.trail > a {
  color: var(--vml-color-sidebar-mod_navigation-submenu-trail-a);
  font-weight: bold;
}

nav#sidebar.mod_navigation ul li span.active,
nav#sidebar.mod_navigation ul.level_2 li.submenu.trail > a {
  background-color: var(--vml-color-sidebar-mod_navigation-span-active-background);
  color: var(--vml-color-sidebar-mod_navigation-span-active-text);
  font-weight: bold;
}

nav#sidebar.mod_navigation ul li a:active,
nav#sidebar.mod_navigation ul li a:hover {
  background-color: var(--vml-color-sidebar-mod_navigation-a-active-background) !important;
  color: var(--vml-color-sidebar-mod_navigation-a-active-text) !important;
}

@media all and (max-width: 720px) {
  #container,
  #main,
  #left,
  #right {
    display: block;
    width: 100%;
    margin-bottom: 0;
  }

  #left .inside,
  #right .inside {
    background-color: transparent;
    border-radius: 0;
  }

  nav#sidebar {
    columns: auto 3;
    column-gap: 1.5em;
    column-rule: 1px solid var(--vml-color-sidebar-nav-column-rule);
  }

  nav#sidebar h2 {
    display: block;
    column-span: all;
    border-top: 1px solid var(--vml-color-sidebar-nav-h2-border);
    padding-top: 0.625rem;
  }

  nav#sidebar ul.level_2 {
    display: inline-block;
  }
}

@media all and (max-width: 600px) {
  nav#sidebar {
    columns: auto 2;
    column-gap: 1.25em;
  }
}



/*******************************************************************************
********************************************************************************
** MOD_NAVIGATION: Simple list-style navigation (used within main page content)
********************************************************************************
*******************************************************************************/

nav.mod_navigation.simplelist h2 {
  border-top: 1px solid var(--vml-color-mod_navigation-simplelist-h2-border);
  padding-top: 0.625rem;
}

nav.mod_navigation.simplelist h2::after {
  content: " Continued";
  color: var(--vml-color-h2-after-text);
}

nav.mod_navigation.simplelist ul {
  list-style-type: disc;
  margin-left: 1.25em;
}

nav.mod_navigation.simplelist li {
  margin: 0.3125em 0;
}

nav.mod_navigation.simplelist li.active {
  font-weight: bold;
}



/*******************************************************************************
********************************************************************************
** MOD_NEWLIST: News list, latest items
********************************************************************************
*******************************************************************************/

.mod_newslist .layout_latest {
  overflow: hidden;
  margin: 0.625rem 0 1.875rem 0;
}

.mod_newslist .layout_latest .image_container {
  float: left;
  margin-right: 1em;
}

/*
.mod_newslist .layout_latest h3.headline {}
*/

.mod_newslist .layout_latest .date {
  color: var(--vml-color-mod_newslist-date-text);
  font-style: italic;
  float: left;
}

.mod_newslist .layout_latest .date:after {
  content: "\2014\00a0";
}



/*******************************************************************************
********************************************************************************
** MOD_NEWSREADER: News reader, full items
********************************************************************************
*******************************************************************************/

.mod_newsreader .layout_full {
  border-bottom: 1px solid var(--vml-color-border);
}

/*
.mod_newsreader .layout_full h1.headline {}
*/

.mod_newsreader .layout_full h2.subheadline {
  font-style: italic;
}

.mod_newsreader .layout_full .date {
  color: var(--vml-color-mod_newsreader-date-text);
  font-style: italic;
}

.mod_newsreader .layout_full .enclosure {
  border-top: 1px solid var(--vml-color-border);
}



/*******************************************************************************
********************************************************************************
** MOD_SEARCH: Search form and results general styling
********************************************************************************
*******************************************************************************/

.mod_search form {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: center;
  gap: 0.25em;
  margin: 1em 0;
}

.mod_search form * {
  line-height: 1em !important;
}

.mod_search form input,
.mod_search form button {
  border: 1px solid;
  border-radius: 0.25rem;
  font-size: 1.125em;
  padding: 0.5em 1em;
}

.mod_search form input[type="text"],
.mod_search form input[type="search"] {
  color: var(--vml-color-mod_search-form-input-text);
  background-color: var(--vml-color-mod_search-form-input-background);
  border-color: var(--vml-color-mod_search-form-input-border);
  width: 20em;
  max-width: 75%;
}

.mod_search form input[type="submit"] {
  display: none;
}

.mod_search form button {
  color: var(--vml-color-mod_search-form-button-text);
  background-color: var(--vml-color-mod_search-form-button-background);
  border-color: var(--vml-color-mod_search-form-button-border);
}

.mod_search form button:hover,
.mod_search form button:active {
  background-color: var(--vml-color-mod_search-form-button-active-background);
  border-color: var(--vml-color-mod_search-form-button-active-border);
}

.mod_search form ::placeholder {
  color: var(--vml-color-mod_search-form-input-placeholder-text);
}

.mod_search p.header {
  border-top: 1px solid var(--vml-color-border);
  border-bottom: 1px solid var(--vml-color-border);
  padding: 1em 0;
}

.mod_search p.header strong {
  background-color: var(--vml-color-mod_search-header-strong-background);
  color: var(--vml-color-mod_search-header-strong-text);
  text-decoration: underline;
}

.mod_search div.result {
  margin: 0;
  padding: 0 0 1em 0;
}

.mod_search div.result h3 {
  font-style: normal;
  font-weight: bold;
  margin-bottom: 0;
}

.mod_search div.result p.context {
  margin: 0.25em 0 0 0;
}

.mod_search div.result p.url {
  margin: 0;
  font-size: 0.875em;
}

.mod_search div.result .relevance {
  color: var(--vml-color-mod_search-result-relevance-text);
}

.mod_search div.result .highlight {
  background-color: var(--vml-color-mod_search-result-highlight-background);
}



/*******************************************************************************
********************************************************************************
** MOD_SITEMAP: Sitemap general styling
********************************************************************************
*******************************************************************************/

.mod_sitemap ul {
  list-style-type: decimal;
}

.mod_sitemap ul.level_1 ul {
  margin-top: 0;
  margin-bottom: 0;
}

.mod_sitemap li {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
}



/***************************************************************************************************
***************************************************************************************************/