/**
 * CSS in this file should be limited to:
 * - fixing incompatibilities between USWDS and Drupal
 * - adding minimal styling of Drupal elements that are missed by USWDS
 *
 * @TODO: Keep an eye on this file, and if it gets out of control, switch to
 * Sass development.
 */

/* Flex the region div that goes between usa-navbar and usa-logo */
.region-header {
  /* TODO: This is MOBILE ONLY */
  flex: 1 0 0;
}

/* The navigation z-index of 9000 causes issues (like with admin_menu). */
.usa-nav {
  z-index: 500;
}
.usa-overlay {
  z-index: 499;
}

/* Some basic styling of horizontal button situations, like local tasks. */
.uswds-horizontal-list li {
  display: inline-block;
}

/* A little help for breadcrumbs. */
.uswds-breadcrumbs li:not(:last-child):after {
  content: '»';
}
.uswds-breadcrumbs li,
.usa-breadcrumbs li a {
  margin-right: 0.4em;
}

/* Some help for titles */
.uswds-page-title,
.block > h2 {
  margin-top: 10px;
}

/* Padding/margin tweaks for the page. */
.uswds-main-content-wrapper {
  margin-top: 1em;
}

/* Vertical tab help */
.js-form-type-vertical-tabs {
  margin-top: 2em;
}

/* Toolbar tweaks */
.toolbar-menu li {
  margin-bottom: 0;
}

/* Fallback to normal appearance for checkboxes that don't have labels, or have
 * hidden labels. */
input[type=checkbox]:only-child,
label.element-invisible + input[type=checkbox],
label.visually-hidden + input[type=checkbox] {
  position: static;
  opacity: 1;
  appearance: checkbox;
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  height: 1.5em;
  width: 1.5em;
  margin: 0;
}

/* Styling for our custom non-collapsible accordions. */
.uswds-uncollapsible-title + .usa-accordion__content {
  position: static;
}
.uswds-uncollapsible-title {
  font-family: Source Sans Pro,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
  margin: 0;
  padding: 1.5rem 5.5rem 1.5rem 3rem;
}

/* The focus outline of the logo images needs some help. */
.usa-footer-logo > a,
.usa-logo .logo-img {
  display: inline-block;
}
.usa-logo .logo-img img {
  vertical-align: top;
}

/* Draggable tables need some help. */
.tabledrag-handle {
  box-sizing: content-box;
}

/* Some help for pagers. */
.pager .pager__items {
  list-style-type: none;
  padding-left: 0;
}
.pager .pager__items li {
  display: inline;
  padding-right: 1em;
}
.pager .pager__items li a {
  text-decoration: none;
}

/* Allow some specific forms to be full width. */
.uswds-form-full input,
.uswds-form-full textarea {
  max-width: none;
}

/* Help for entity forms */
.uswds-form-entity div[class*="field--"].form-wrapper {
  margin-top: 2em;
}
.uswds-form-entity label {
  font-weight: 700;
}
.uswds-form-entity .field-multiple-table {
  margin-top: 0;
}

/* Help for Paragraphs content entry forms */
.field--widget-entity-reference-paragraphs .paragraphs-dropbutton-wrapper input {
  margin-top: 0;
  margin-bottom: 0;
}
.field--widget-entity-reference-paragraphs .paragraph-type-title {
  font-weight: 700;
}
.field--widget-entity-reference-paragraphs .field-multiple-drag {
  max-width: 20px;
}
.field--widget-entity-reference-paragraphs .field-multiple-table thead h4 {
  margin-top: 0;
  margin-bottom: 0;
}
.field--widget-entity-reference-paragraphs .field-multiple-table td:nth-child(1) {
  border-right: none;
}
.field--widget-entity-reference-paragraphs .field-multiple-table td:nth-child(2) {
  border-left: none;
  padding-left: 10px;
}

/* Help for admins */
.node--unpublished,
.comment--unpublished {
  background-color: #fff4f4;
}

/**
 * Because uswds subclasses classy, Drupal loads hidden.module.css. It comes
 * with .hidden which, as you expect, does display: none. We don't want that as
 * .usa-footer-collapsible.hidden isn't for hiding. It's the collapsible state.
 */
.usa-footer-collapsible.hidden {
  display: block;
}