/* ============================================================
   Rastafari retheme — red · gold · green · black
   Loaded after styles.css; overrides the palette and adds
   tricolour accents without touching the original stylesheet.
   ============================================================ */

:root {
  /* Black base (one of the four colours) */
  --ink: oklch(15% 0.008 60);
  --bone: oklch(96% 0.012 80);

  /* Gold — brighter, more Rastafari yellow-gold */
  --gold: oklch(80% 0.155 90);
  --gold-soft: oklch(87% 0.12 92);

  /* Rastafari red & green */
  --rasta-red: oklch(56% 0.205 27);
  --rasta-red-soft: oklch(64% 0.19 30);
  --rasta-green: oklch(54% 0.135 150);
  --rasta-green-soft: oklch(63% 0.135 150);

  --background: var(--ink);
  --card: oklch(20% 0.012 60);
  --ring: var(--gold);
}

/* Tricolour bar — red / gold / green */
.rasta-bar,
header::before,
footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(
    to right,
    var(--rasta-red) 0 33.333%,
    var(--gold) 33.333% 66.666%,
    var(--rasta-green) 66.666% 100%
  );
}

/* Header keeps the stripe pinned to the very top edge */
header { position: fixed; }
header::before {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 1;
}

/* Footer gets the stripe along its top border */
footer { position: relative; }
footer::before {
  position: absolute;
  top: 0; left: 0; right: 0;
}

/* Editorial hairlines become the tricolour */
.hairline {
  background: linear-gradient(
    to right,
    transparent,
    var(--rasta-red) 18%,
    var(--gold) 50%,
    var(--rasta-green) 82%,
    transparent
  ) !important;
}

/* Small tricolour tick before every eyebrow label */
.text-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.text-eyebrow::before {
  content: "";
  width: 1.6rem;
  height: 2px;
  flex: none;
  background: linear-gradient(
    to right,
    var(--rasta-red),
    var(--gold),
    var(--rasta-green)
  );
}

/* Green hover on the outline / bordered links to bring the third colour in */
a.border-bone\/30:hover {
  border-color: var(--rasta-green-soft) !important;
  color: var(--rasta-green-soft) !important;
}

/* Standalone helper used inside the contact / pledge forms */
.rasta-bar { width: 100%; }

/* ---- Form utilities not present in the original compiled CSS ---- */
.sm\:col-span-2 { grid-column: 1 / -1; }

/* Success / error notices on the contact & pledge forms */
[data-notice] { border-width: 1px; border-style: solid; }
[data-notice="ok"] {
  border-color: color-mix(in oklab, var(--rasta-green) 50%, transparent);
  background: color-mix(in oklab, var(--rasta-green) 12%, transparent);
}
[data-notice="err"] {
  border-color: color-mix(in oklab, var(--rasta-red) 50%, transparent);
  background: color-mix(in oklab, var(--rasta-red) 12%, transparent);
}