// ----------------------------------------------
// Styles to make sense of Drupal's stock markup:
// ----------------------------------------------

// Quick and dirty fix for "Remove Signup" form being hidden behind nav.
#dosomething-signup-node-unsignup-form, #dosomething-reportback-delete-form {
  padding-top: 144px;
  padding-bottom: 36px;
  max-width: 600px;
  margin: 0 auto;
}

// Make Krumo look okay when it's in the ".messages" module
.messages .krumo-root {
  color: #000;

  strong {
    color: #000;
  }
}

// Drupal labels things with "hidden" headers for accessibility.
// We'll hide them visually, but allow screen readers to see them.
.element-invisible {
  @include visually-hidden;
}

// Hide asterisks on required form fields.
.form-required {
  display: none;
}

// Make the admin tabs look pretty.
.admin-tabs .waypoints {
  background: $light-gray;
  background-image: repeating-linear-gradient(135deg,
    lighten($light-gray, 2%), lighten($light-gray, 2%) 12px, // 12px lighter stripe
    $light-gray 0, $light-gray 24px // 12px dark gray stripe
  );
  padding: $base-spacing;
  max-width: $max-width;
  text-align: center;
  margin: 0 auto;
}

// Adjustments to make Drupal's built-in admin menu a bit nicer.
#admin-menu ul {
  font-size: 11px;
}

// Hide Drupal Admin Menu on mobile and show it on desktop.
#admin-menu {
  display: none;

  @include media($desktop) {
    display: block;
  }
}

// Remove added body margin when admin menu is hidden.
body.html.admin-menu {
  margin-top: 0 !important;

  @include media($desktop) {
    margin-top: 29px !important;
  }
}
