/* =========================================================================
   JourneyTeam Brand Stylesheet (2024)
   Customer Deliverables Portal — shared styles

   Palette
     PRIMARY
       --jt-slate   #333F48  Deep Slate Blue  (dark surfaces, body text)
       --jt-sky     #407EC9  Vibrant Sky Blue (primary actions, links)
     SECONDARY / accents (restrained)
       --jt-grey-blue #A6BBC8 Light Grey-Blue
       --jt-orange    #F68D2E Lively Orange
       --jt-lime      #CED837 Bright Lime Green

   Typeface: Aptos (brand-approved) with Segoe UI / system fallback.
   Logos: jt-logo-white.png on slate/dark only;
          jt-logo-colorful.png / jt-logo-dark.png on light backgrounds.
   Respect logo clear-space (~ width of the "J"); never recolor or place
   the logo on busy backgrounds.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Custom properties — full palette, tokens, type scale
   --------------------------------------------------------------------------- */
:root {
  /* Brand palette */
  --jt-slate: #333f48;
  --jt-sky: #407ec9;
  --jt-grey-blue: #a6bbc8;
  --jt-orange: #f68d2e;
  --jt-lime: #ced837;

  /* Derived / functional tints (AA-checked against their use) */
  --jt-slate-900: #28323a;   /* deeper slate for footers / hovers */
  --jt-slate-700: #333f48;   /* base slate */
  --jt-sky-700: #2f6bb0;     /* darker sky for button hover/active */
  --jt-sky-050: #eaf2fb;     /* faint sky wash for subtle fills */

  /* Surfaces & text (calm light aesthetic) */
  --jt-bg: #ffffff;          /* page background */
  --jt-surface: #ffffff;     /* card / panel surface */
  --jt-surface-alt: #f5f7f9; /* alternate light surface */
  --jt-border: #dfe5ea;      /* hairline borders */
  --jt-text: #2a333a;        /* primary text — slate, ~13.4:1 on white */
  --jt-text-muted: #5d6b76;  /* muted text — ~5.3:1 on white (AA) */
  --jt-on-dark: #ffffff;     /* text on slate surfaces */
  --jt-on-dark-muted: #c5d0d8; /* muted text on slate — AA on slate */

  /* Focus ring */
  --jt-focus: #1c5da8;       /* high-contrast sky for focus outlines */

  /* Type scale (base 16px; 1.2 modular-ish, clamped for responsiveness) */
  --jt-font-sans: "Aptos", "Segoe UI", system-ui, -apple-system, sans-serif;
  --jt-fs-base: 1rem;                              /* 16px */
  --jt-fs-sm: 0.875rem;                            /* 14px */
  --jt-fs-xs: 0.75rem;                             /* 12px */
  --jt-fs-lg: 1.125rem;                            /* 18px */
  --jt-fs-h6: 1rem;
  --jt-fs-h5: 1.125rem;
  --jt-fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.4rem);
  --jt-fs-h3: clamp(1.45rem, 1.25rem + 0.9vw, 1.7rem);
  --jt-fs-h2: clamp(1.7rem, 1.4rem + 1.4vw, 2.1rem);
  --jt-fs-h1: clamp(2.05rem, 1.6rem + 2.2vw, 2.75rem);

  /* Line heights */
  --jt-lh-tight: 1.2;
  --jt-lh-snug: 1.35;
  --jt-lh-body: 1.65;

  /* Weights */
  --jt-w-light: 300;
  --jt-w-regular: 400;
  --jt-w-semibold: 600;
  --jt-w-bold: 700;

  /* Spacing scale */
  --jt-space-1: 0.25rem;
  --jt-space-2: 0.5rem;
  --jt-space-3: 0.75rem;
  --jt-space-4: 1rem;
  --jt-space-5: 1.5rem;
  --jt-space-6: 2rem;
  --jt-space-7: 3rem;

  /* Radii & elevation */
  --jt-radius-sm: 6px;
  --jt-radius: 10px;
  --jt-radius-lg: 14px;
  --jt-radius-pill: 999px;
  --jt-shadow-sm: 0 1px 2px rgba(40, 50, 58, 0.06);
  --jt-shadow: 0 2px 10px rgba(40, 50, 58, 0.08), 0 1px 2px rgba(40, 50, 58, 0.06);
  --jt-shadow-lg: 0 8px 28px rgba(40, 50, 58, 0.12);

  /* Layout */
  --jt-container: 46rem;

  color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. @font-face — four Aptos weights (truetype, swap)
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Aptos";
  src: url("/assets/fonts/Aptos-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos";
  src: url("/assets/fonts/Aptos.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos";
  src: url("/assets/fonts/Aptos-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Aptos";
  src: url("/assets/fonts/Aptos-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------------------------------------------------------
   3. Modern reset
   --------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  min-height: 100vh;
  font-family: var(--jt-font-sans);
  font-size: var(--jt-fs-base);
  font-weight: var(--jt-w-regular);
  line-height: var(--jt-lh-body);
  color: var(--jt-text);
  background-color: var(--jt-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: var(--jt-sky-700); /* #2f6bb0 = 5.45:1 on white (AA); --jt-sky fails at 4.16:1 */
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: from-font;
}

a:hover {
  color: var(--jt-sky-700);
}

p,
li,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

:where(:focus-visible) {
  outline: 3px solid var(--jt-focus);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   4. Typography — scale & rhythm (Aptos stack)
   --------------------------------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--jt-font-sans);
  color: var(--jt-slate);
  line-height: var(--jt-lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

h1 {
  font-size: var(--jt-fs-h1);
  font-weight: var(--jt-w-bold);
  line-height: var(--jt-lh-tight);
}

h2 {
  font-size: var(--jt-fs-h2);
  font-weight: var(--jt-w-semibold);
}

h3 {
  font-size: var(--jt-fs-h3);
  font-weight: var(--jt-w-semibold);
  line-height: var(--jt-lh-snug);
}

h4 {
  font-size: var(--jt-fs-h4);
  font-weight: var(--jt-w-semibold);
  line-height: var(--jt-lh-snug);
}

h5 {
  font-size: var(--jt-fs-h5);
  font-weight: var(--jt-w-semibold);
  line-height: var(--jt-lh-snug);
}

h6 {
  font-size: var(--jt-fs-h6);
  font-weight: var(--jt-w-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--jt-text-muted);
}

/* Vertical rhythm for flowing content */
:where(h1, h2, h3, h4, h5, h6) {
  margin-block-end: var(--jt-space-3);
}

:where(h2, h3, h4) {
  margin-block-start: var(--jt-space-6);
}

p {
  margin-block-end: var(--jt-space-4);
  max-width: 70ch;
}

:where(p, ul, ol) + :where(h2, h3, h4) {
  margin-block-start: var(--jt-space-6);
}

.lead {
  font-size: var(--jt-fs-lg);
  font-weight: var(--jt-w-light);
  color: var(--jt-text-muted);
  line-height: var(--jt-lh-snug);
  max-width: 60ch;
}

small {
  font-size: var(--jt-fs-sm);
}

strong,
b {
  font-weight: var(--jt-w-semibold);
}

code,
kbd,
samp,
pre {
  font-family: "Cascadia Code", "Consolas", ui-monospace, monospace;
  font-size: 0.9em;
}

code {
  background: var(--jt-surface-alt);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  padding: 0.1em 0.4em;
}

hr {
  border: none;
  border-top: 1px solid var(--jt-border);
  margin-block: var(--jt-space-6);
}

/* ---------------------------------------------------------------------------
   5. Layout — container
   --------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--jt-container);
  margin-inline: auto;
  padding-inline: var(--jt-space-5);
  padding-block: var(--jt-space-6);
}

.container--wide {
  max-width: 64rem;
}

@media (max-width: 30rem) {
  .container {
    padding-inline: var(--jt-space-4);
  }
}

/* ---------------------------------------------------------------------------
   6. Accent stripe — thin multicolor "steps" echo of the logo
      Order left→right: sky, lime, orange, grey-blue.
      Place directly above or below the site header.
   --------------------------------------------------------------------------- */
.accent-stripe {
  height: 4px;
  border: none;
  margin: 0;
  background-image: linear-gradient(
    to right,
    var(--jt-sky) 0 25%,
    var(--jt-lime) 25% 50%,
    var(--jt-orange) 50% 75%,
    var(--jt-grey-blue) 75% 100%
  );
}

/* ---------------------------------------------------------------------------
   7. Site header — slate bar, white logo, generous padding
   --------------------------------------------------------------------------- */
.site-header {
  background-color: var(--jt-slate);
  color: var(--jt-on-dark);
}

.site-header__inner {
  max-width: var(--jt-container);
  margin-inline: auto;
  padding-block: var(--jt-space-5);
  padding-inline: var(--jt-space-5);
  display: flex;
  align-items: center;
  gap: var(--jt-space-5);
  flex-wrap: wrap;
}

/* Logo: white mark only on the slate header.
   Padding preserves clear-space (~ the width of the "J"). */
.site-header__logo {
  display: inline-flex;
  align-items: center;
  /* horizontal clear-space (~ width of the "J") before the title block */
  padding: var(--jt-space-2) var(--jt-space-4) var(--jt-space-2) 0;
}

.site-header__logo img,
.site-logo {
  height: 34px;
  width: auto;
}

.site-header__title {
  color: var(--jt-on-dark);
  font-size: var(--jt-fs-lg);
  font-weight: var(--jt-w-semibold);
  margin: 0;
  line-height: 1.2;
}

.site-header__subtitle {
  color: var(--jt-on-dark-muted);
  font-size: var(--jt-fs-sm);
  font-weight: var(--jt-w-regular);
}

/* Push trailing nav/actions to the right */
.site-header__spacer {
  margin-inline-start: auto;
}

.site-header a {
  color: var(--jt-on-dark);
}

.site-header a:hover {
  color: var(--jt-grey-blue);
}

@media (max-width: 30rem) {
  .site-header__inner {
    padding-block: var(--jt-space-4);
    gap: var(--jt-space-3);
  }
  .site-header__logo img,
  .site-logo {
    height: 28px;
  }
}

/* ---------------------------------------------------------------------------
   8. Card
   --------------------------------------------------------------------------- */
.card {
  background-color: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  padding: var(--jt-space-5);
  box-shadow: var(--jt-shadow-sm);
}

.card + .card {
  margin-block-start: var(--jt-space-4);
}

.card__title {
  font-size: var(--jt-fs-h4);
  font-weight: var(--jt-w-semibold);
  color: var(--jt-slate);
  margin-block: 0 var(--jt-space-2);
}

.card__meta {
  font-size: var(--jt-fs-sm);
  color: var(--jt-text-muted);
}

/* Optional thin accent edge for emphasis (restrained) */
.card--accent {
  border-top: 3px solid var(--jt-sky);
}

/* ---------------------------------------------------------------------------
   9. Buttons
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--jt-space-2);
  padding: 0.625rem 1.15rem;
  min-height: 2.75rem; /* comfortable touch target */
  font-family: var(--jt-font-sans);
  font-size: var(--jt-fs-base);
  font-weight: var(--jt-w-semibold);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid transparent;
  border-radius: var(--jt-radius-sm);
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease, box-shadow 0.15s ease;
}

.btn:focus-visible {
  outline: 3px solid var(--jt-focus);
  outline-offset: 2px;
}

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

/* Primary — darker sky so white text meets WCAG AA (white on #2f6bb0 = 5.45:1) */
.btn-primary {
  background-color: var(--jt-sky-700);
  border-color: var(--jt-sky-700);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #285c97;
  border-color: #285c97;
  color: #ffffff;
}

.btn-primary:active {
  background-color: #1f4f86;
  border-color: #1f4f86;
}

/* Ghost — transparent with sky outline */
.btn-ghost {
  background-color: transparent;
  border-color: var(--jt-sky);
  color: var(--jt-sky-700);
}

.btn-ghost:hover {
  background-color: var(--jt-sky-050);
  color: var(--jt-sky-700);
}

.btn-ghost:active {
  background-color: #dbe9f8;
}

/* Ghost variant on dark surfaces */
.site-header .btn-ghost {
  border-color: var(--jt-on-dark);
  color: var(--jt-on-dark);
}

.site-header .btn-ghost:hover {
  background-color: rgba(255, 255, 255, 0.12);
  color: var(--jt-on-dark);
}

/* ---------------------------------------------------------------------------
   10. Badge — small pill with accent modifiers
   --------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.7em;
  font-size: var(--jt-fs-xs);
  font-weight: var(--jt-w-semibold);
  line-height: 1.5;
  letter-spacing: 0.02em;
  border-radius: var(--jt-radius-pill);
  white-space: nowrap;
  /* default: neutral grey-blue tint */
  background-color: #eef2f5;
  color: var(--jt-slate);
  border: 1px solid var(--jt-border);
}

/* Sky */
.badge-sky {
  background-color: var(--jt-sky-050);
  color: #1f4f86; /* dark sky text, AA on tint */
  border-color: #cfe0f4;
}

/* Orange — dark text on light tint for AA */
.badge-orange {
  background-color: #fdeed9;
  color: #8a4a06;
  border-color: #f8d6ab;
}

/* Lime — dark text on light tint for AA */
.badge-lime {
  background-color: #f2f5cf;
  color: #555c0a;
  border-color: #e3e8a6;
}

/* Grey-blue */
.badge-grey-blue {
  background-color: #e8eef2;
  color: #3a4953;
  border-color: #d3dde4;
}

/* Slate (solid) */
.badge-slate {
  background-color: var(--jt-slate);
  color: var(--jt-on-dark);
  border-color: var(--jt-slate);
}

/* ---------------------------------------------------------------------------
   11. Doc list — clean list of deliverable links with hover
   --------------------------------------------------------------------------- */
.doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  overflow: hidden;
  background-color: var(--jt-surface);
}

.doc-list > li + li {
  border-top: 1px solid var(--jt-border);
}

.doc-list a,
.doc-list__item {
  display: flex;
  align-items: baseline;
  gap: var(--jt-space-3);
  padding: var(--jt-space-4) var(--jt-space-5);
  color: var(--jt-text);
  text-decoration: none;
  position: relative;
  transition: background-color 0.12s ease, padding-inline-start 0.12s ease;
}

/* Sky "step" indicator on the left edge, revealed on hover/focus */
.doc-list a::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 0;
  background-color: var(--jt-sky);
  transition: width 0.12s ease;
}

.doc-list a:hover,
.doc-list a:focus-visible {
  background-color: var(--jt-surface-alt);
  color: var(--jt-slate);
}

.doc-list a:hover::before,
.doc-list a:focus-visible::before {
  width: 4px;
}

.doc-list a:focus-visible {
  outline: 3px solid var(--jt-focus);
  outline-offset: -3px;
}

.doc-list__title {
  font-weight: var(--jt-w-semibold);
  color: var(--jt-slate);
}

.doc-list__meta {
  margin-inline-start: auto;
  font-size: var(--jt-fs-sm);
  color: var(--jt-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   12. Utilities
   --------------------------------------------------------------------------- */
.muted {
  color: var(--jt-text-muted);
}

.text-center {
  text-align: center;
}

.stack > * + * {
  margin-block-start: var(--jt-space-4);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------------
   13. Site footer — small, muted
   --------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--jt-border);
  margin-block-start: var(--jt-space-7);
  background-color: var(--jt-surface-alt);
}

.site-footer__inner {
  max-width: var(--jt-container);
  margin-inline: auto;
  padding-block: var(--jt-space-5);
  padding-inline: var(--jt-space-5);
  font-size: var(--jt-fs-sm);
  color: var(--jt-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--jt-space-2) var(--jt-space-5);
  align-items: center;
}

.site-footer a {
  color: var(--jt-text-muted);
  text-decoration: underline;
}

.site-footer a:hover {
  color: var(--jt-slate);
}

.site-footer__spacer {
  margin-inline-start: auto;
}