/**
 * CSS in this file should be limited to:
 * - fixing incompatibilities between USWDS and Drpual
 * - 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. */

  
  /* 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;
  }