/*
 * Distance Education Page Styles
 * Target template: content-distance-education.php
 * Focus: WCAG 2.1 AA-friendly interaction and modern, clean UI.
 */

:root {
  --de-bg: #f7f9fc;
  --de-surface: #ffffff;
  --de-surface-alt: #f0f5fb;
  --de-text: #1f2937;
  --de-muted: #4b5563;
  --de-border: #d6deea;
  --de-primary: #0b3f78;
  --de-primary-hover: #0f539c;
  --de-focus: #ffbf47;
  --de-shadow: 0 10px 24px rgba(11, 63, 120, 0.08);
  --de-radius: 16px;
}

.swv-de-page {
  background: linear-gradient(180deg, #fbfdff 0%, var(--de-bg) 100%);
  color: var(--de-text);
}

.swv-de-page .swv-de-section {
  padding: 3rem 0;
}

.swv-de-page .swv-de-section:nth-of-type(even) {
  background: rgba(11, 63, 120, 0.03);
}

/* Keep Technology aligned with surrounding sections while allowing wider readable content. */
.swv-de-page .swv-de-tech .swv-de-section__header {
  max-width: 100%;
}

.swv-de-page .swv-de-tech .swv-de-section__intro {
  max-width: none;
}

.swv-de-page .swv-de-tech .swv-de-section__intro > * {
  max-width: none;
}

.swv-de-page .swv-de-section__header {
  margin-bottom: 1.25rem;
  max-width: 75ch;
}

.swv-de-page .swv-de-section__title {
  margin: 0 0 0.5rem;
  color: var(--de-primary);
  line-height: 1.2;
}

.swv-de-page .swv-de-section__intro,
.swv-de-page .swv-de-card__text,
.swv-de-page .swv-de-checklist__text,
.swv-de-page .swv-de-resource-card__description,
.swv-de-page .swv-de-policy-link__description,
.swv-de-page .swv-de-closing-cta__text {
  color: var(--de-muted);
  line-height: 1.65;
}

.swv-de-page ul,
.swv-de-page ol {
  margin: 0;
  padding: 0;
}

.swv-de-page li {
  list-style: none;
}

.swv-de-page .swv-de-checklist {
  display: grid;
  gap: 1rem;
  counter-reset: de-step;
}

.swv-de-page .swv-de-checklist__item {
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  padding: 1rem 1.1rem 1rem 3rem;
  position: relative;
  box-shadow: var(--de-shadow);
}

.swv-de-page .swv-de-checklist__item::before {
  counter-increment: de-step;
  content: counter(de-step);
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 999px;
  background: var(--de-primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.swv-de-page .swv-de-checklist__title,
.swv-de-page .swv-de-card__title,
.swv-de-page .swv-de-resource-group__title,
.swv-de-page .swv-de-policy-link__title,
.swv-de-page .swv-de-closing-cta__title,
.swv-de-page .swv-de-definition-list__term {
  margin: 0 0 0.45rem;
  color: var(--de-primary);
  line-height: 1.3;
}

.swv-de-page .swv-de-card-grid,
.swv-de-page .swv-de-resource-list,
.swv-de-page .swv-de-policy-list {
  display: grid;
  gap: 1rem;
}

.swv-de-page .swv-de-card-grid {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.swv-de-page .swv-de-card {
  height: 100%;
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  padding: 1rem 1.1rem;
  box-shadow: var(--de-shadow);
}

.swv-de-page .swv-de-resource-groups {
  display: grid;
  gap: 1.25rem;
}

.swv-de-page .swv-de-resource-group {
  background: var(--de-surface-alt);
  border: 1px solid var(--de-border);
  border-radius: var(--de-radius);
  padding: 1rem;
}

.swv-de-page .swv-de-resource-card,
.swv-de-page .swv-de-policy-link {
  display: block;
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(11, 63, 120, 0.07);
}

.swv-de-page .swv-de-resource-card__heading-wrap {
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
}

.swv-de-page .swv-de-resource-card__title,
.swv-de-page .swv-de-policy-link__title {
  font-weight: 700;
  color: var(--de-primary);
}

.swv-de-page .swv-de-resource-card__description,
.swv-de-page .swv-de-policy-link__description {
  margin-top: 0.4rem;
  display: block;
}

.swv-de-page .swv-de-definition-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.swv-de-page .swv-de-definition-list__item {
  background: var(--de-surface);
  border: 1px solid var(--de-border);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  box-shadow: 0 5px 14px rgba(11, 63, 120, 0.07);
}

.swv-de-page .swv-de-definition-list__term {
  margin: 0 0 0.45rem;
  font-weight: 700;
}

.swv-de-page .swv-de-definition-list__definition {
  margin: 0;
  padding: 0;
  color: #1f2937;
}

/* Improve contrast in definitions section copy. */
.swv-de-page .swv-de-definitions .swv-de-section__intro,
.swv-de-page .swv-de-definitions .swv-de-definition-list__definition,
.swv-de-page .swv-de-definitions .swv-de-definition-list__definition p {
  color: #1f2937;
}

.swv-de-page .swv-de-definitions .swv-de-definition-list__term {
  color: #0b3f78;
}

@media (min-width: 768px) {
  .swv-de-page .swv-de-definition-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.swv-de-page .swv-de-closing-cta__inner {
  background: linear-gradient(160deg, #08315e 0%, #0b3f78 60%, #1258a5 100%);
  color: #fff;
  border-radius: var(--de-radius);
  padding: 1.6rem;
  box-shadow: var(--de-shadow);
}

.swv-de-page .swv-de-closing-cta__title,
.swv-de-page .swv-de-closing-cta__text {
  color: #fff;
}

/* Ensure all nested text in the closing CTA stays high contrast. */
.swv-de-page .swv-de-closing-cta__inner,
.swv-de-page .swv-de-closing-cta__inner p,
.swv-de-page .swv-de-closing-cta__inner li,
.swv-de-page .swv-de-closing-cta__inner span,
.swv-de-page .swv-de-closing-cta__inner strong,
.swv-de-page .swv-de-closing-cta__inner em {
  color: #ffffff;
}

.swv-de-page .swv-de-closing-cta__inner a {
  color: #ffffff;
}

.swv-de-page .swv-de-closing-cta__inner a:hover {
  color: #ffffff;
}

.swv-de-page .swv-de-closing-cta__actions {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* CTA buttons: enforce high contrast against the dark gradient panel. */
.swv-de-page .swv-de-closing-cta__actions .swv-btn,
.swv-de-page .swv-de-closing-cta__actions .swv-de-closing-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1.1rem;
  border-radius: 10px;
  border: 2px solid #ffffff;
  background: #ffffff;
  color: #08315e;
  font-weight: 700;
  text-decoration: none;
}

.swv-de-page .swv-de-closing-cta__actions .swv-btn:hover,
.swv-de-page .swv-de-closing-cta__actions .swv-de-closing-cta__btn:hover {
  background: #08315e;
  color: #ffffff;
  border-color: #ffffff;
}

.swv-de-page .swv-de-closing-cta__actions .swv-btn:visited,
.swv-de-page .swv-de-closing-cta__actions .swv-de-closing-cta__btn:visited {
  color: #08315e;
}

.swv-de-page .swv-de-closing-cta__actions .swv-btn:focus-visible,
.swv-de-page .swv-de-closing-cta__actions .swv-de-closing-cta__btn:focus-visible {
  outline: 3px solid #ffbf47;
  outline-offset: 3px;
}

.swv-de-page a {
  color: var(--de-primary);
  text-underline-offset: 2px;
}

.swv-de-page a:hover {
  color: var(--de-primary-hover);
}

.swv-de-page a:focus,
.swv-de-page button:focus,
.swv-de-page [tabindex]:focus {
  outline: 3px solid var(--de-focus);
  outline-offset: 2px;
}

.swv-de-page a:focus:not(:focus-visible),
.swv-de-page button:focus:not(:focus-visible),
.swv-de-page [tabindex]:focus:not(:focus-visible) {
  outline: none;
}

.swv-de-page a:focus-visible,
.swv-de-page button:focus-visible,
.swv-de-page [tabindex]:focus-visible {
  outline: 3px solid var(--de-focus);
  outline-offset: 2px;
}

@media (min-width: 768px) {
  .swv-de-page .swv-de-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .swv-de-page .swv-de-resource-groups {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .swv-de-page .swv-de-card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.swv-de-alert { 
  color:#c00; 
  font-weight:700; 
}
