/* ============================================================================
   The Hope Journey — Carbon-inspired Design System
   Built on IBM's Carbon Design language (IBM Plex, 2x grid, sharp geometry)
   tuned with the Hope Journey / Google-style four-colour palette.
   No build step — pure CSS custom properties. Works on PHP 8 / shared hosting.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* Brand / interactive palette (Google-style four-colour system) */
  --hj-green:        #1B6B35;   /* primary — hope, growth, faith        */
  --hj-green-hover:  #15572b;
  --hj-green-active: #0f3d1e;
  --hj-green-light:  #e8f1ea;
  --hj-blue:         #1A4F9C;   /* support — trust, mission             */
  --hj-blue-light:   #e7eefa;
  --hj-gold:         #C48A00;   /* support — warmth, generosity         */
  --hj-gold-light:   #faf1d8;
  --hj-red:          #B71C1C;   /* support — urgency, love sacrificed   */
  --hj-red-light:    #fbe9e9;

  /* Carbon gray scale (neutral foundation) */
  --cds-gray-10:  #f4f4f4;
  --cds-gray-20:  #e0e0e0;
  --cds-gray-30:  #c6c6c6;
  --cds-gray-40:  #a8a8a8;
  --cds-gray-50:  #8d8d8d;
  --cds-gray-60:  #6f6f6f;
  --cds-gray-70:  #525252;
  --cds-gray-80:  #393939;
  --cds-gray-90:  #262626;
  --cds-gray-100: #161616;

  /* Semantic tokens */
  --background:           #ffffff;
  --background-alt:       #f7f6f2;   /* warm off-white (brand parchment)  */
  --layer:                #ffffff;
  --layer-accent:         var(--cds-gray-10);
  --field:                var(--cds-gray-10);
  --border-subtle:        var(--cds-gray-20);
  --border-strong:        var(--cds-gray-40);
  --text-primary:         #161616;
  --text-secondary:       #525252;
  --text-helper:          #6f6f6f;
  --text-on-color:        #ffffff;
  --link:                 var(--hj-blue);
  --link-hover:           #143e7c;
  --interactive:          var(--hj-green);
  --support-error:        var(--hj-red);
  --support-success:      var(--hj-green);
  --support-warning:      var(--hj-gold);
  --focus:                #0f62fe;

  /* Carbon 2x spacing scale */
  --sp-01: 0.125rem;  --sp-02: 0.25rem;  --sp-03: 0.5rem;   --sp-04: 0.75rem;
  --sp-05: 1rem;      --sp-06: 1.5rem;   --sp-07: 2rem;     --sp-08: 2.5rem;
  --sp-09: 3rem;      --sp-10: 4rem;     --sp-11: 5rem;     --sp-12: 6rem;
  --sp-13: 10rem;

  /* Type families */
  --font-sans:  'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif;
  --font-mono:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Elevation */
  --shadow-sm: 0 1px 2px rgba(22,22,22,.08);
  --shadow-md: 0 4px 14px rgba(22,22,22,.10);
  --shadow-lg: 0 16px 40px rgba(22,22,22,.14);

  --container: 1264px;        /* Carbon max grid width */
  --transition: 110ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--background);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; display: block; height: auto; }
iframe { max-width: 100%; }
h1, h2, h3, h4, h5, p, li, a, blockquote, figcaption { overflow-wrap: break-word; }
a { color: var(--link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--link-hover); text-decoration: underline; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select, button { font-family: inherit; font-size: 1rem; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
hr { border: none; border-top: 1px solid var(--border-subtle); margin: var(--sp-07) 0; }

/* ---- Type scale (Carbon productive + expressive) ------------------------- */
.display-01 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.5rem, 5vw, 4.25rem); line-height: 1.07; letter-spacing: -0.02em; }
.display-02 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2rem, 4vw, 3rem);     line-height: 1.12; letter-spacing: -0.01em; }
h1, .h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.9rem, 3.2vw, 2.6rem); line-height: 1.15; letter-spacing: -0.01em; }
h2, .h2 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.55rem, 2.4vw, 2rem);  line-height: 1.2; }
h3, .h3 { font-family: var(--font-sans);  font-weight: 600; font-size: 1.35rem; line-height: 1.3; }
h4, .h4 { font-family: var(--font-sans);  font-weight: 600; font-size: 1.125rem; line-height: 1.35; }
h5, .h5 { font-family: var(--font-sans);  font-weight: 600; font-size: 1rem; line-height: 1.4; }
.eyebrow {
  font-family: var(--font-sans); font-weight: 600; font-size: .8125rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--hj-green);
}
.lede { font-size: 1.25rem; line-height: 1.6; color: var(--text-secondary); }
.text-secondary { color: var(--text-secondary); }
.text-helper { color: var(--text-helper); font-size: .875rem; }

/* ---- Layout -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-06); }
.container--narrow { max-width: 768px; }
.container--mid { max-width: 992px; }
.section { padding-block: clamp(var(--sp-09), 7vw, var(--sp-12)); }
.section--alt { background: var(--background-alt); }
.section--dark { background: var(--cds-gray-100); color: #fff; }
.section--green { background: var(--hj-green); color: #fff; }
.stack > * + * { margin-top: var(--sp-05); }
.grid { display: grid; gap: var(--sp-06); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1056px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 880px)  { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.section-head { max-width: 760px; margin-bottom: var(--sp-08); }
.section-head .eyebrow { display: block; margin-bottom: var(--sp-04); }
.section-head p { color: var(--text-secondary); font-size: 1.125rem; margin-top: var(--sp-04); }
.center { text-align: center; }
.center.section-head { margin-inline: auto; }

/* ---- The four-colour Carbon rule (brand motif) --------------------------- */
.colour-rule { display: flex; height: 4px; width: 100%; }
.colour-rule i { flex: 1; }
.colour-rule i:nth-child(1) { background: var(--hj-green); }
.colour-rule i:nth-child(2) { background: var(--hj-gold); }
.colour-rule i:nth-child(3) { background: var(--hj-blue); }
.colour-rule i:nth-child(4) { background: var(--hj-red); }

/* ---- Buttons (Carbon) ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--sp-05);
  font-weight: 600; font-size: .9375rem; line-height: 1.3;
  padding: 0.8125rem 1rem 0.8125rem 1rem; min-height: 48px;
  border: 1px solid transparent; border-radius: 0;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
  text-decoration: none; max-width: 320px;
}
.btn:hover { text-decoration: none; }
.btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.btn--primary { background: var(--hj-green); color: #fff; }
.btn--primary:hover { background: var(--hj-green-hover); color: #fff; }
.btn--primary:active { background: var(--hj-green-active); }
.btn--secondary { background: var(--cds-gray-80); color: #fff; }
.btn--secondary:hover { background: var(--cds-gray-90); color: #fff; }
.btn--tertiary { background: transparent; color: var(--hj-green); border-color: var(--hj-green); }
.btn--tertiary:hover { background: var(--hj-green); color: #fff; }
.btn--ghost { background: transparent; color: var(--hj-green); padding-inline: 0 1rem; }
.btn--ghost:hover { color: var(--hj-green-hover); }
.btn--on-color { background: #fff; color: var(--hj-green); }
.btn--on-color:hover { background: var(--cds-gray-10); color: var(--hj-green-active); }
.btn--gold { background: var(--hj-gold); color: #fff; }
.btn--gold:hover { background: #a87600; color: #fff; }
.btn--block { width: 100%; max-width: none; }
.btn--sm { min-height: 40px; padding-block: .55rem; font-size: .875rem; }
.btn[disabled] { background: var(--cds-gray-30); color: var(--cds-gray-50); cursor: not-allowed; }

/* ---- Tags / pills (Carbon tags) ------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: var(--sp-02);
  font-size: .75rem; font-weight: 500; line-height: 1; letter-spacing: .01em;
  padding: .3125rem .5rem; border-radius: 999px; background: var(--cds-gray-20); color: var(--cds-gray-90);
  text-decoration: none;
}
a.tag:hover { background: var(--cds-gray-30); text-decoration: none; }
.tag--green { background: var(--hj-green-light); color: var(--hj-green-active); }
.tag--blue  { background: var(--hj-blue-light);  color: var(--hj-blue); }
.tag--gold  { background: var(--hj-gold-light);  color: #8a6200; }
.tag--red   { background: var(--hj-red-light);   color: var(--hj-red); }

/* ---- Tiles & cards (Carbon tile) ----------------------------------------- */
.tile {
  background: var(--layer); border: 1px solid var(--border-subtle);
  padding: var(--sp-06); transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
a.tile, .tile--clickable { display: block; color: inherit; text-decoration: none; }
a.tile:hover, .tile--clickable:hover { border-color: var(--hj-green); box-shadow: var(--shadow-md); text-decoration: none; }

.card { background: var(--layer); border: 1px solid var(--border-subtle); display: flex; flex-direction: column; overflow: hidden; transition: border-color var(--transition), box-shadow var(--transition); }
a.card { color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--hj-green); box-shadow: var(--shadow-md); text-decoration: none; }
.card__media { aspect-ratio: 16/10; background: var(--cds-gray-10); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms cubic-bezier(0.2,0,0.38,0.9); }
a.card:hover .card__media img { transform: scale(1.04); }
.card__body { padding: var(--sp-06); display: flex; flex-direction: column; gap: var(--sp-04); flex: 1; }
.card__title { font-family: var(--font-sans); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.card__meta { font-size: .8125rem; color: var(--text-helper); display: flex; gap: var(--sp-04); flex-wrap: wrap; align-items: center; }
.card__excerpt { color: var(--text-secondary); font-size: .9375rem; }
.card__cta { margin-top: auto; font-weight: 600; color: var(--hj-green); font-size: .9375rem; display: inline-flex; align-items: center; gap: var(--sp-03); }

/* ---- Forms (Carbon fields) ----------------------------------------------- */
.field { margin-bottom: var(--sp-05); }
.field label, .label { display: block; font-size: .75rem; color: var(--text-secondary); margin-bottom: var(--sp-03); font-weight: 500; }
.input, input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], input[type=url], input[type=search], textarea, select {
  width: 100%; background: var(--field); color: var(--text-primary);
  border: none; border-bottom: 1px solid var(--border-strong);
  padding: .8125rem 1rem; min-height: 48px; border-radius: 0; transition: background var(--transition), border-color var(--transition);
}
textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.input:focus, input:focus, textarea:focus, select:focus { outline: 2px solid var(--focus); outline-offset: -2px; background: #fff; }
.input::placeholder, input::placeholder, textarea::placeholder { color: var(--text-helper); }
.help { font-size: .75rem; color: var(--text-helper); margin-top: var(--sp-03); }

/* ---- Notifications (Carbon inline notification) -------------------------- */
.note { display: flex; gap: var(--sp-05); padding: var(--sp-05) var(--sp-06); border-left: 3px solid var(--cds-gray-60); background: var(--cds-gray-10); margin-bottom: var(--sp-06); font-size: .9375rem; }
.note--success { border-color: var(--support-success); background: var(--hj-green-light); }
.note--error   { border-color: var(--support-error);   background: var(--hj-red-light); }
.note--warning { border-color: var(--support-warning); background: var(--hj-gold-light); }
.note--info    { border-color: var(--hj-blue);         background: var(--hj-blue-light); }
.note strong { display: block; margin-bottom: 2px; }

/* ---- Data table (Carbon) ------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; background: var(--layer); font-size: .875rem; }
.data-table th { text-align: left; background: var(--cds-gray-90); color: #fff; font-weight: 600; padding: .875rem 1rem; white-space: nowrap; }
.data-table td { padding: .8125rem 1rem; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.data-table tbody tr:hover { background: var(--cds-gray-10); }
.data-table .muted { color: var(--text-helper); }

/* ---- Breadcrumb ---------------------------------------------------------- */
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--sp-03); font-size: .875rem; color: var(--text-helper); padding-block: var(--sp-05); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb span.sep { color: var(--cds-gray-40); }

/* ---- Prose (article/page body) ------------------------------------------- */
.prose { font-size: 1.0625rem; line-height: 1.7; color: var(--text-primary); max-width: 720px; }
.prose.wide { max-width: 100%; }
.prose > * + * { margin-top: var(--sp-05); }
.prose h2 { margin-top: var(--sp-08); font-size: 1.6rem; }
.prose h3 { margin-top: var(--sp-07); }
.prose h2 + p, .prose h3 + p { margin-top: var(--sp-04); }
.prose p { color: var(--text-primary); }
.prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { margin-top: var(--sp-03); }
.prose img { margin-block: var(--sp-06); border: 1px solid var(--border-subtle); width: 100%; }
.prose blockquote {
  border-left: 4px solid var(--hj-gold); padding: var(--sp-04) var(--sp-06);
  font-family: var(--font-serif); font-size: 1.2rem; font-style: italic; color: var(--text-secondary);
  background: var(--hj-gold-light);
}
.prose iframe { width: 100%; aspect-ratio: 16/9; border: none; margin-block: var(--sp-06); }
.prose figure { margin-block: var(--sp-06); max-width: 100%; }
.prose { overflow-wrap: break-word; word-break: break-word; }
/* wide tables scroll within themselves rather than stretching the page */
.prose .table-scroll, .prose table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; border-collapse: collapse; font-size: .9375rem; white-space: nowrap; }
.prose th, .prose td { border: 1px solid var(--border-subtle); padding: .625rem .875rem; text-align: left; }
.prose th { background: var(--cds-gray-10); }

/* ---- Utility ------------------------------------------------------------- */
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex { display: flex; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
.gap-4 { gap: var(--sp-05); } .gap-3 { gap: var(--sp-04); } .wrap { flex-wrap: wrap; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--hj-green); color: #fff; padding: var(--sp-04) var(--sp-06); z-index: 1000; }
.skip-link:focus { left: 0; }