/* =========================================================================
   APA Home Template — Stylesheet
   Only rules for classes actually used in page-apa-home.php are included.
   Everything is scoped under .apa-page so it cannot affect the rest of the
   WordPress theme (header, footer, nav, other pages, etc.).
   ========================================================================= */

.apa-page {
  /* ---- design tokens (colors, spacing, radii) used by this page ---- */
  --apa-color-green: #0a5c36;
  --apa-color-green-mid: #1a8a52;
  --apa-color-navy: #0d2b4e;
  --apa-color-gold: #c9a24b;
  --apa-color-gold-bright: #d4af37;
  --apa-color-ink: #1f2933;
  --apa-color-grey: #5b6b66;
  --apa-color-line: #d9e2df;
  --apa-color-soft: #f4f8f6;
  --apa-color-mint: #dff0ea;
  --apa-color-white: #fff;

  --apa-radius: 6px;
  --apa-spacing: .25rem;
  --apa-container-3xl: 48rem;
  --apa-container-6xl: 75rem;

  --apa-text-sm: .875rem;
  --apa-text-sm-lh: calc(1.25 / .875);
  --apa-text-base: 1rem;
  --apa-text-base-lh: calc(1.5 / 1);
  --apa-text-lg: 1.125rem;
  --apa-text-lg-lh: calc(1.75 / 1.125);
  --apa-text-xl: 1.25rem;
  --apa-text-xl-lh: calc(1.75 / 1.25);
  --apa-text-2xl: 1.5rem;
  --apa-text-2xl-lh: calc(2 / 1.5);
  --apa-text-4xl: 2.25rem;
  --apa-text-4xl-lh: calc(2.5 / 2.25);
  --apa-text-5xl: 3rem;
  --apa-text-5xl-lh: 1;

  --apa-leading-tight: 1.25;
  --apa-leading-relaxed: 1.625;

  --apa-font-weight-semibold: 600;
  --apa-font-weight-bold: 700;
  --apa-font-weight-extrabold: 800;

  --apa-transition-duration: .15s;
  --apa-transition-ease: cubic-bezier(.4, 0, .2, 1);

  font-family: "Helvetica Neue", "Helvetica", "Arial", ui-sans-serif, system-ui, sans-serif;
  color: var(--apa-color-ink);
}

/* ---- layout utilities ---- */
.apa-page {width:100%; margin:0 auto;}
.apa-page .mx-auto { margin-inline: auto; }
.apa-page .my-6 { margin-block: calc(var(--apa-spacing) * 6); }
.apa-page .mt-1 { margin-top: var(--apa-spacing); }
.apa-page .mt-2 { margin-top: calc(var(--apa-spacing) * 2); }
.apa-page .mt-4 { margin-top: calc(var(--apa-spacing) * 4); }
.apa-page .mt-6 { margin-top: calc(var(--apa-spacing) * 6); }
.apa-page .mt-8 { margin-top: calc(var(--apa-spacing) * 8); }
.apa-page .mt-14 { margin-top: calc(var(--apa-spacing) * 14); }

.apa-page .flex { display: flex; }
.apa-page .grid { display: grid; }
.apa-page .flex-wrap { flex-wrap: wrap; }
.apa-page .gap-3 { gap: calc(var(--apa-spacing) * 3); }
.apa-page .gap-4 { gap: calc(var(--apa-spacing) * 4); }

.apa-page .h-3px { height: 3px; }
.apa-page .w-full { width: 100%; }
.apa-page .max-w-3xl { max-width: var(--apa-container-3xl); }
.apa-page .max-w-6xl { max-width: var(--apa-container-6xl); }

.apa-page .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 40rem) {
  .apa-page .sm\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .apa-page .sm\:text-5xl { font-size: var(--apa-text-5xl); line-height: var(--apa-text-5xl-lh); }
}
@media (min-width: 48rem) {
  .apa-page .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .apa-page .lg\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* ---- borders / radius ---- */
.apa-page .rounded-apa { border-radius: var(--apa-radius); }
.apa-page .rounded-md { border-radius: .375rem; }
.apa-page .border { border-style: solid; border-width: 1px; }
.apa-page .border-apa-gold-bright { border-color: var(--apa-color-gold-bright); }
.apa-page .border-apa-line { border-color: var(--apa-color-line); }

/* ---- backgrounds ---- */
.apa-page .bg-apa-gold { background-color: var(--apa-color-gold); }
.apa-page .bg-apa-gold-bright { background-color: var(--apa-color-gold-bright); }
.apa-page .bg-apa-soft { background-color: var(--apa-color-soft); }
.apa-page .bg-white { background-color: var(--apa-color-white); }

/* ---- spacing (padding) ---- */
.apa-page .p-5 { padding: calc(var(--apa-spacing) * 5); }
.apa-page .p-6 { padding: calc(var(--apa-spacing) * 6); }
.apa-page .px-3 { padding-inline: calc(var(--apa-spacing) * 3); }
.apa-page .px-4 { padding-inline: calc(var(--apa-spacing) * 4); }
.apa-page .px-5 { padding-inline: calc(var(--apa-spacing) * 5); }
.apa-page .py-2-5 { padding-block: calc(var(--apa-spacing) * 2.5); }
.apa-page .py-4 { padding-block: calc(var(--apa-spacing) * 4); }
.apa-page .py-16 { padding-block: calc(var(--apa-spacing) * 16); }
.apa-page .py-20 { padding-block: calc(var(--apa-spacing) * 20); }

/* ---- typography ---- */
.apa-page .text-center { text-align: center; }
.apa-page .text-2xl { font-size: var(--apa-text-2xl); line-height: var(--apa-text-2xl-lh); }
.apa-page .text-4xl { font-size: var(--apa-text-4xl); line-height: var(--apa-text-4xl-lh); }
.apa-page .text-base { font-size: var(--apa-text-base); line-height: var(--apa-text-base-lh); }
.apa-page .text-lg { font-size: var(--apa-text-lg); line-height: var(--apa-text-lg-lh); }
.apa-page .text-sm { font-size: var(--apa-text-sm); line-height: var(--apa-text-sm-lh); }
.apa-page .text-xl { font-size: var(--apa-text-xl); line-height: var(--apa-text-xl-lh); }
.apa-page .text-11px { font-size: 11px; }

.apa-page .leading-relaxed { line-height: var(--apa-leading-relaxed); }
.apa-page .leading-tight { line-height: var(--apa-leading-tight); }

.apa-page .font-semibold { font-weight: var(--apa-font-weight-semibold); }
.apa-page .font-bold { font-weight: var(--apa-font-weight-bold); }
.apa-page .font-extrabold { font-weight: var(--apa-font-weight-extrabold); }

.apa-page .text-apa-gold-bright { color: var(--apa-color-gold-bright); }
.apa-page .text-apa-green { color: var(--apa-color-green); }
.apa-page .text-apa-grey { color: var(--apa-color-grey); }
.apa-page .text-apa-ink { color: var(--apa-color-ink); }
.apa-page .text-apa-mint { color: var(--apa-color-mint); }
.apa-page .text-apa-navy { color: var(--apa-color-navy); }
.apa-page .text-white { color: var(--apa-color-white); }

/* ---- transitions / hover states (used on the 3 hero buttons) ---- */
.apa-page .transition-colors {
  transition-property: color, background-color, border-color;
  transition-timing-function: var(--apa-transition-ease);
  transition-duration: var(--apa-transition-duration);
}
.apa-page .hover\:bg-apa-gold:hover { background-color: var(--apa-color-gold); }
.apa-page .hover\:bg-apa-gold-bright:hover { background-color: var(--apa-color-gold-bright); }
.apa-page .hover\:text-apa-ink:hover { color: var(--apa-color-ink); }

/* =========================================================================
   Custom APA components (hero gradient, badge, rule divider, section
   number chip, info boxes, KPI stat tiles)
   ========================================================================= */
.apa-page .apa-gradient {
  background: linear-gradient(157deg, #0a5c36 0%, #0b5c4e 48%, #0d2b4e 100%);
}

.apa-page .apa-rule {
  background: var(--apa-color-gold);
  width: 84px;
  height: 3px;
}

.apa-page .apa-badge {
  border: 1px solid var(--apa-color-gold-bright);
  color: var(--apa-color-gold-bright);
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: .72rem;
  display: inline-block;
}

.apa-page .apa-secnum {
  background: var(--apa-color-gold);
  color: var(--apa-color-ink);
  border-radius: 5px;
  padding: 2px 12px;
  font-weight: 800;
  display: inline-block;
}

.apa-page .apa-box {
  background: var(--apa-color-soft);
  border: 1px solid var(--apa-color-line);
  border-left: 4px solid var(--apa-color-green-mid);
  border-radius: 4px;
}
.apa-page .apa-box-gold { border-left-color: var(--apa-color-gold); }
.apa-page .apa-box-navy { border-left-color: var(--apa-color-navy); }

.apa-page .apa-kpi {
  background: #ffffff1a;
  border-radius: 8px;
}