/* =========================================
   HELP / SERVICES PAGE
========================================= */

.helpservices-page {
   padding: 2rem 0 2.5rem;
}

.helpservices-page__header {
   margin-bottom: 1.5rem;
}

.helpservices-page__quicklinks {
   margin-bottom: 2rem;
}

.helpservices-quicklinks__title {
   margin: 0 0 0.9rem;
   font-size: 1.15rem;
   font-weight: 500;
   color: var(--dmafc-color-text-muted);
}

.helpservices-quicklinks__link {
   display: block;
   padding: 0.55rem 0.75rem;
   border-radius: var(--dmafc-radius-sm);
   text-decoration: none;
   color: var(--dmafc-color-link);
   background: var(--dmafc-color-accent-soft);
}

.helpservices-quicklinks__link:hover,
.helpservices-quicklinks__link:focus {
   text-decoration: none;
   color: var(--dmafc-color-link-hover);
   background: var(--dmafc-color-accent-soft-hover);
}

.helpservices-page__sections {
   padding: 0;
}

.helpservices-category {
   margin-bottom: 2.5rem;
}

.helpservices-category__header {
   margin-bottom: 1rem;
}

.helpservices-category__title {
   margin: 0;
   font-size: 1.8rem;
   font-style: italic;
   font-weight: 300;
   color: var(--dmafc-color-text-soft);
   line-height: 1.2;
}

.helpservices-return-top {
   margin-top: 1rem;
   text-align: right;
}

.helpservices-return-top a {
   color: var(--dmafc-color-link);
   text-decoration: none;
}

.helpservices-return-top a:hover,
.helpservices-return-top a:focus {
   color: var(--dmafc-color-link-hover);
   text-decoration: underline;
}

/* =========================================
   SERVICE CARDS
========================================= */

.service-card-link {
   display: block;
   height: 100%;
   color: inherit;
   text-decoration: none;
}

.service-card-link:hover,
.service-card-link:focus {
   color: inherit;
   text-decoration: none;
}

.service-card {
   position: relative;
   background: var(--dmafc-color-surface);
   border: 1px solid var(--dmafc-color-border);
   border-radius: var(--dmafc-radius-md);
   box-shadow: var(--dmafc-shadow-sm);
   padding: 1.15rem 1.2rem;
   padding-top: 1.4rem; /* extra space for stacked badges */
   height: 100%;
   overflow: hidden;
   transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.service-card-link:hover .service-card,
.service-card-link:focus .service-card {
   transform: translateY(-2px);
   box-shadow: var(--dmafc-shadow-md);
}

.service-card__body {
   display: flex;
   flex-direction: column;
   height: 100%;
}

/* Title */
.service-card__title {
   margin: 0 0 0.35rem;
   font-size: 1.15rem;
   font-style: italic;
   font-weight: 500;
   color: var(--dmafc-color-text);
   line-height: 1.3;
}

/* Content lines */
.service-card__line {
   margin: 0;
   color: var(--dmafc-color-text-muted);
   font-size: 14px;
   line-height: 1.5;
}

.service-card__line + .service-card__line {
   margin-top: 0.12rem;
}

.service-card__line--spaced {
   margin-top: 0.7rem !important;
}

/* =========================================
   BADGES (SPONSOR / MEMBER)
========================================= */

.service-card__ribbon {
   position: absolute;
   top: 0.85rem;
   right: 0.85rem;
   z-index: 2;
   display: flex;
   flex-direction: column;
   align-items: flex-end;
   gap: 0.35rem;
}

.service-card__badge {
   display: inline-block;
   padding: 0.22rem 0.6rem;
   border-radius: var(--dmafc-radius-pill);
   font-size: 12px;
   font-weight: 600;
   line-height: 1.2;
   white-space: nowrap;
}

.service-card__badge--member {
   background: var(--dmafc-color-badge-member-bg);
   color: var(--dmafc-color-badge-member-text);
}

.service-card__badge--sponsor {
   background: var(--dmafc-color-badge-sponsor-bg);
   color: var(--dmafc-color-badge-sponsor-text);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {
   .helpservices-page {
      padding: 1.5rem 0 2rem;
   }

   .helpservices-category {
      margin-bottom: 2rem;
   }

   .helpservices-category__title {
      font-size: 1.5rem;
   }

   .helpservices-return-top {
      text-align: left;
   }

   .service-card {
      padding: 1rem 1rem;
      padding-top: 1.25rem;
   }
}