/**
 * Layout styles.
 *
 *   display
 *   margin
 *   padding
 *   width
 *   height
 *   grid-row
 *   grid-column
 *
 */
body {
  margin: 0;
  min-height: 100vh;
}

/* Standard containers for container queries */
/*header, footer, main, section, article {
  container-type: inline-size;
}*/

.layout-container {
  display: grid;
  grid-template-columns: [full-start] minmax(30ch, 1fr) [main-start] 4fr [main-end] minmax(30ch, 1fr) [full-end];
  grid-template-rows: [header-start] auto [header-end highlighted-start] auto [highlighted-end help-start] auto [help-end title-start] auto [title-end main-start] auto [main-end bottom-start] auto [bottom-end footer-start] auto [footer-end];
}

.layout-container > header {
  display: grid;
  grid-row: header;
  grid-column: full;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
}

.branding {
  grid-template-columns: subgrid;
  grid-row: header;
  grid-column: full-start / main-start;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.block-system-branding-block {
  min-width: 8em;
  min-height: 3em;
}

.mainmenu {
  grid-column: main;
  grid-row: header;
}

.usermenu {
  grid-column: main-end / full-end;
}

.region-highlighted,
.highlighted {
  grid-column: main;
  grid-row: highlighted;
}

.help {
  grid-column: main;
  grid-row: help;
}

.layout-content {
  min-height: 50lvh;
}

.title-bar-left, .title-bar-right, .block-page-title-block {
  grid-row: 2;
}

.title {
  grid-column: full;
  grid-row: title;
  display: grid;
  grid-template-columns: subgrid;
}

.title > div {
  grid-column: main;
}

main {
  display: grid;
  grid-column: full;
  grid-row: main;
  grid-template-columns: subgrid;
  grid-template-rows: subgrid;
  padding-bottom: 2rem;
}

main .layout-content {
  grid-column: main;
  grid-row: main;
}

.layout-sidebar-first {
  grid-column: full-start / main-start;
  grid-row: main;
}

.region-sidebar-first,
.region-sidebar-second {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.region-sidebar-first .block,
.region-sidebar-second .block {
  flex-basis: 20em;
  flex-grow: 1;
  margin: 1rem;
}

.layout-sidebar-second {
  grid-column: main-end / full-end;
  grid-row: main;
}

/* Messages */

.messages {
  padding: 1rem;
  margin: 1rem;
}


/* Headings */

h1, h2, h3, fieldset legend {
  margin-bottom: 1em;
}

/* Main menu */

.region-primary-menu, nav.menu--main {
  height: 100%;
}

.mainmenu ul.menu {
  display: flex;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 1rem 2rem;
  height: 100%;
  padding: 0;
  margin-block: 0;
}

.block-page-title-block h1 {
  margin-block: 1em;
}

/* User menu */

.usermenu ul.menu {
  text-align: right;
  margin-right: 1rem;
}

/* Tabs */

ul.tabs.primary {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
  margin-block: 1rem;
}

.tabs.primary li a {
  display: block;
  padding: 0.75em;
}


/* Tables */

table {
  border-collapse: collapse;
  margin-bottom: 1rem;
  overflow-x: scroll;
}

table th, table td {
  padding: 0.25rem 1rem;
}

table th:first-child, table td:first-child {
  padding-left: 0;
}

table th:last-child, table td:last-child {
  padding-right: 0;
}

/* Body text */

.field--name-body h2 {
  clear: both;
  margin-block: 0;
  padding: 2em 0 0 0;
}

/* Fields */

.node--view-mode-full .field--label-inline .field__item {
  margin-left: 0;
}

.node__content, .layout-content {
  container-type: inline-size;
  width: 100%;
}


.field.text-formatted h2:first-child,
.field.text-formatted h3:first-child,
.field.text-formatted h4:first-child {
  margin-top: 0;
  padding-top: 0;
}

.field.text-formatted h2,
.field.text-formatted h3,
.field.text-formatted h4 {
  break-after: avoid;
}

.field--label-inline {
  display: grid;
  gap: 0 0.5rem;
  align-items: start;
  grid-template-columns: 10rem auto;
  margin-bottom: 1rem;
}

.field__item p:first-child {
  margin-top: 0;
}

.field__item:not(.field--label-hidden) p:last-child {
  margin-bottom: 0;
}

fieldset {
  container-type: inline-size;
  container-name: fieldset;
}

@container (max-width: 25em) {
  .field--label-inline {
    display: block;
  }
}

/* View Cards */

.view.cards .view-content {
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1rem 2rem;
}

.view.cards .view-content .views-row {
  display: flex;
}

.view.cards .view-content .views-row article {
  flex: 1;
}

.view.cards article {
  background: #fcfcfc;
  padding: 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.view.cards article h2 {
  border-radius: var(--border-radius);
  margin: -1rem -1rem 0 -1rem;
  padding: 1rem;
}

/* Facets */

.facets-widget-checkbox ul {
  list-style-type: none;
  padding: 0;
}

.facets-widget-checkbox label {
  font-weight: normal;
  color: #444;
  margin-bottom: 0;
}

li.facets-reset .facet-item__count {
  display: none;
}

.facet-item__count {
  font-style: italic;
}

/* Forms */

form {
  margin: 1rem 0;
}

.form-item {
  display: grid;
  align-items: center;
  grid-template-columns: 10rem 1fr;
  gap: 0 0.5rem;
  margin-bottom: 1rem;
  max-width: 100%;
}

.form-type-password-confirm {
  display: block;
}

.field--type-address fieldset {
  border: none;
  padding: 0;
}

.form-item label,
fieldset legend {
  padding: 0.75em 0;
  font-weight: bold;
}

.form-item label.visually-hidden {
  position: revert !important;
}

fieldset legend {
  display: contents; /* Makes <legend> a Grid item. https://stackoverflow.com/questions/52350191/is-a-legend-element-a-grid-item-if-a-fieldsets-display-is-grid */
}

.form-checkboxes > .form-item {
  display: block;
  margin: 0;
}

.form-item .description {
  grid-column: 2;
}

input {
  padding: 0.75em;
  box-sizing: border-box;
}

input[type="text"], input[type="password"] {
  height: 2.5em;
}

/* Pagers */

nav.pager ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  list-style-type: none;
  padding: 0;
}

nav.pager ul a {
  display: block;
  padding: 0.25em 0.5em;
  border-radius: 0.5em;
}


/* Maps */

.leaflet-popup-content article {
  min-width: 24em;
}

/* Page bottom */

.layout-container .page_bottom {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
  grid-row: bottom;
  padding: 1rem 0;
}

.page_bottom > div {
  grid-column: main;
}

/* Footer */

.layout-container footer {
  display: grid;
  grid-template-columns: subgrid;
  grid-column: full;
  grid-row: footer;
  padding: 1rem 0;

}

footer > div {
  grid-column: main;
}

@media (max-width: 100ch) {
  .layout-container > header {
    display: grid;
    grid-template-columns: [left-start full-start] 1fr [left-end right-start] 4fr [right-end];
    grid-template-rows: [top-start] auto [top-end bottom-start] auto [bottom-end];
    align-items: start;
  }

  .branding {
    grid-column: left;
    grid-row: top;
    min-width: 8em;
    align-items: start;
    justify-content: left;
  }

  .site-name {
    font-size: 150%;
  }

  .layout-container, main, .title, .layout-container footer {
    display: block;
  }

  main .layout-content {
    margin-right: -1rem;
  }

  /* NB: footer can be used for tables, as well as the page. */
  header, .title, .mainmenu, main, .layout-container footer {
    max-width: 100vw;
    box-sizing: border-box;
    padding: 1rem;
  }

  .mainmenu {
    grid-column: full;
    grid-row: bottom;
    padding: 1rem;
  }

  .mainmenu ul.menu {
    gap: 1rem;
    justify-content: space-around;
  }

  .usermenu {
    grid-column: right;
    grid-row: top;
  }

  .usermenu ul.menu {
    margin: 0;
  }

  .block-system-branding-block {
    min-width: 8em;
  }

  .block-page-title-block h1 {
    margin-block: 0;
  }

  .field--label-inline {
    grid-template-columns: 16ch auto;
  }

  table.responsive-enabled .priority-low {
    display: none;
  }

  .region-sidebar-first .block {
    margin-right: 1rem;
  }
}

@media (max-width: 50ch) {

  .region-sidebar-first .block {
    margin-right: 1rem;
  }

  table.responsive-enabled .priority-medium,
  table.responsive-enabled .priority-low {
    display: none;
  }

  .form-item {
    display: block;
  }
}