/* Grid overflow containment */
.styleguide .grid {
  max-width: 100%;
}

.styleguide {
  max-width: 100vw;

  & > section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    & > h2 {
      font-weight: 600;
      color: #d1d5db;
      text-transform: uppercase;
      font-size: 1.125rem;
      letter-spacing: 0.05em;
    }

    & > div {
      padding: 0.5rem 0;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      gap: 1rem;
    }

    & > article {
      display: flex;
      gap: 1rem;
      flex-direction: column;

      @media (min-width: 640px) {
        flex-direction: row;
      }

      & > h3 {
        text-transform: uppercase;
        font-size: 0.875rem;
        color: #9ca3af;
        flex-shrink: 0;
        letter-spacing: 0.05em;

        @media (min-width: 640px) {
          width: 12rem;
        }
      }

      & > div,
      & > span,
      & > ul > li,
      & > dl > dd {
        &:hover {
          -outline: 1px dashed #fff3;
        }
      }

      & > ul,
      & > ol {
        display: flex;
        gap: 1rem;
      }
      & > ul {
        flex-wrap: wrap;
      }
      & > ol {
        flex-direction: column;
      }

      & > span {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
      }
    }
  }
}

/* Edit icon with amber color and shadow for visibility on dark backgrounds */
.fa-edit {
  color: #f59e0b;
  text-shadow: 
    0 0 4px rgba(0, 0, 0, 0.8),
    0 0 8px rgba(0, 0, 0, 0.6),
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.9);
}