/* =========================================
   ARTICLE DETAIL PAGE STYLES
   ========================================= */

.article-detail {
  font-family: inherit;
  color: #494959;
}

/* 1. Category Pills */
.article-detail__categories {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}

/* Default pill styling (Brand Blue) */
.article-detail__categories .field__item,
.article-detail__categories a {
  background-color: #006BB6; 
  color: #ffffff;
  padding: 0.25rem 1rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  display: inline-block;
}

/* (Optional) If you want the 2nd pill to be purple like the mockup */
.article-detail__categories .field__item:nth-child(2),
.article-detail__categories .field__item:nth-child(2) a {
  background-color: #9b59b6; 
}

/* 2. Massive Date Header */
.article-detail__date {
  font-size: 2.5rem; /* ~40px */
  font-weight: 700;
  color: #042969; /* Dark brand blue */
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* 3. Action Buttons (Downloads) */
.article-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Target standard Drupal file links inside this wrapper */
.article-detail__actions .field__item a,
.article-detail__actions a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.5rem;
  border: 1px solid #006BB6;
  border-radius: 9999px;
  color: #006BB6;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

.article-detail__actions a:hover {
  background-color: #f1f5f9;
}

/* Inject the little document icon automatically */
.article-detail__actions a::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'/%3E%3C/svg%3E") no-repeat center;
}

/* 4. Horizontal Divider Line */
.article-detail__divider {
  border: 0;
  border-top: 2px solid #e2e8f0; 
  margin: 2rem 0;
}

/* 5. Main Body Typography Formatting */
.article-detail__body {
  font-size: 1rem;
  line-height: 1.7;
  color: #494959;
}

/* Sub-headings */
.article-detail__body h2,
.article-detail__body h3 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #042969;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

.article-detail__body p {
  margin-bottom: 1.5rem;
}

.article-detail__body a {
  color: #006BB6;
  text-decoration: underline;
}

.article-detail__body a:hover {
  text-decoration: none;
}

/* Bulleted Lists */
.article-detail__body ul {
  margin-bottom: 1.5rem;
  padding-left: 2.5rem;
}

.article-detail__body li {
  margin-bottom: 0.75rem;
}