/* ==========================================================
   DPA Academy — Button System (original design)
   Design direction: institutional CTA pattern (one strong accent
   primary, quieter secondary, text-link with arrow).
   Palette per project brief §3.3.
   ========================================================== */

:root {
  --dpa-navy: #0C2340;
  --dpa-blue: #0C51BD;
  --dpa-blue-dark: #1B3A78;
  --dpa-gold: #E6DD2B;
  --dpa-gold-dark: #C9C11B;
  --dpa-offwhite: #F5F5F5;
  --dpa-white: #FFFFFF;
  --dpa-focus: #FFBF47;
  --dpa-btn-radius: 999px;   /* pill shape */
  --dpa-btn-font: "Inter", "Ubuntu", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base (pill button, fill-wipe hover) ---------- */
.dpa-btn {
  --btn-bg: var(--dpa-gold);
  --btn-fg: var(--dpa-navy);
  --btn-border: var(--dpa-gold);
  --btn-bg-hover: var(--dpa-navy);
  --btn-fg-hover: var(--dpa-white);
  --btn-border-hover: var(--dpa-navy);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 40px;
  padding: .45rem 1.5rem;
  font-family: var(--dpa-btn-font);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  color: var(--btn-fg);
  background-color: var(--btn-bg);
  /* hover colour rises from the bottom edge */
  background-image: linear-gradient(var(--btn-bg-hover), var(--btn-bg-hover));
  background-repeat: no-repeat;
  background-position: 50% 100%;
  background-size: 100% 0;
  border: 2px solid var(--btn-border);
  border-radius: var(--dpa-btn-radius);
  cursor: pointer;
  box-shadow: none;
  transition: background-size .28s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.dpa-btn:hover,
.dpa-btn:focus-visible {
  color: var(--btn-fg-hover);
  background-size: 100% 100%;
  border-color: var(--btn-border-hover);
}

.dpa-btn:active { transform: scale(.98); }

/* Optional arrow (opt-in): add .dpa-btn--arrow */
.dpa-btn--arrow::after {
  content: "";
  flex: 0 0 auto;
  width: .55em;
  height: .55em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.dpa-btn--arrow:hover::after,
.dpa-btn--arrow:focus-visible::after { transform: translateX(4px) rotate(45deg); }

/* ---------- Variants ---------- */

/* Primary CTA — gold (Apply Online, Book/Register) */
.dpa-btn--primary { /* defaults above */ }

/* Secondary — solid police blue */
.dpa-btn--secondary {
  --btn-bg: var(--dpa-blue);
  --btn-fg: var(--dpa-white);
  --btn-border: var(--dpa-blue);
  --btn-bg-hover: var(--dpa-navy);
  --btn-border-hover: var(--dpa-navy);
}

/* Outline — on light backgrounds */
.dpa-btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--dpa-navy);
  --btn-border: var(--dpa-navy);
  --btn-bg-hover: var(--dpa-navy);
  --btn-fg-hover: var(--dpa-white);
}

/* Outline reversed — on navy / photo heroes */
.dpa-btn--outline-light {
  --btn-bg: transparent;
  --btn-fg: var(--dpa-white);
  --btn-border: var(--dpa-white);
  --btn-bg-hover: var(--dpa-white);
  --btn-fg-hover: var(--dpa-navy);
  --btn-border-hover: var(--dpa-white);
}

/* Primary on dark surfaces: hover flips to white */
.dpa-on-dark .dpa-btn--primary {
  --btn-bg-hover: var(--dpa-white);
  --btn-fg-hover: var(--dpa-navy);
  --btn-border-hover: var(--dpa-white);
}

/* Text link with arrow ("Read more", "Meet our leadership") */
.dpa-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--dpa-btn-font);
  font-weight: 700;
  color: var(--dpa-blue);
  text-decoration: none;
  border-bottom: 2px solid var(--dpa-gold);
  padding-bottom: 2px;
  transition: color .2s ease, border-color .2s ease;
}
.dpa-link-arrow::after {
  content: "\2192";
  transition: transform .2s ease;
}
.dpa-link-arrow:hover,
.dpa-link-arrow:focus-visible { color: var(--dpa-navy); border-color: var(--dpa-navy); }
.dpa-link-arrow:hover::after,
.dpa-link-arrow:focus-visible::after { transform: translateX(4px); }

/* Sizes */
.dpa-btn--sm { min-height: 36px; padding: .35rem 1.2rem; font-size: .85rem; }
.dpa-btn--lg { min-height: 44px; padding: .55rem 1.9rem; font-size: 1rem; }
.dpa-btn--block { display: flex; width: 100%; }

/* Button group */
.dpa-btn-group { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Accessibility ---------- */
.dpa-btn:focus-visible,
.dpa-link-arrow:focus-visible {
  outline: 3px solid var(--dpa-focus);
  outline-offset: 3px;
}

.dpa-btn[disabled],
.dpa-btn[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

@media (max-width: 600px) {
  .dpa-btn-group .dpa-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .dpa-btn, .dpa-btn--arrow::after, .dpa-link-arrow, .dpa-link-arrow::after { transition: none; }
  .dpa-btn { background-size: 100% 0; }
  .dpa-btn:hover, .dpa-btn:focus-visible { background-size: 100% 100%; }
  .dpa-btn:active { transform: none; }
}