/* UmmahCauses: Browse charities and the charity onboarding guide on the estate tokens, Nov 3 2026 (qa #405).
   Plain CSS, no build step. Loaded only when a page passes :estate="true" to <x-guest-public>, and every rule is
   scoped to body.uc-estate, so the other redesign pages keep their look until they are redone.
   Same tokens as the sign-in walls (public/css/uc-auth.css): Literata, action green #0A7B3D (pressed #166534),
   ink #0F1F17, soft #3F4F46, sand ground #FAF6EC, mint tint #EAF7EE, sand tint #FFF4DD, line #CFC8B4.
   The one ownable element is the same as the walls: one gift, set aside equally for each charity (the fork).
   These two pages are light only, as before; the night pair for the redesign header and footer is a separate round. */

body.uc-estate {
  --ue-ground: #FAF6EC; --ue-card: #FFFFFF; --ue-mint: #EAF7EE; --ue-sand: #FFF4DD; --ue-sand-line: #E3CF9F;
  --ue-ink: #0F1F17; --ue-soft: #3F4F46; --ue-faint: #5B6A61; --ue-line: #CFC8B4; --ue-field: #7C8A80;
  --ue-accent: #0A7B3D; --ue-press: #166534;
  --ue-face: 'Literata', Georgia, 'Times New Roman', serif;
  background: var(--ue-ground) !important;
  color: var(--ue-ink);
}

/* Type: one face for the header, the page and the inner guide. Monospace paths and the sacred layer stay as they are. */
body.uc-estate .ucr-header, body.uc-estate .ucr-header *,
body.uc-estate .ucr-page, body.uc-estate .ucr-page *,
body.uc-estate .ucr-inner, body.uc-estate .ucr-inner * { font-family: var(--ue-face); }
body.uc-estate .ucr-inner .font-mono, body.uc-estate .ucr-inner .font-mono * { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
body.uc-estate .ucr-page, body.uc-estate .ucr-inner { font-weight: 400; color: var(--ue-ink); background: var(--ue-ground); }
body.uc-estate .ucr-page h1, body.uc-estate .ucr-page h2, body.uc-estate .ucr-page h3,
body.uc-estate .ucr-inner h1, body.uc-estate .ucr-inner h2, body.uc-estate .ucr-inner h3 { font-weight: 600; letter-spacing: -0.015em; color: var(--ue-ink); text-wrap: balance; }
body.uc-estate .ucr-inner h2.text-gray-900, body.uc-estate .ucr-inner h2.text-3xl.text-gray-900, body.uc-estate .ucr-inner h1.text-gray-900 { color: var(--ue-ink); letter-spacing: -0.015em; }
body.uc-estate .ucr-inner .font-bold, body.uc-estate .ucr-inner .font-extrabold { font-weight: 600; }
body.uc-estate .ucr-inner .font-semibold { font-weight: 600; }
body.uc-estate .ucr-inner .font-medium { font-weight: 500; }

/* Header: the wordmark is one colour, Literata 700, exactly as on the sign-in walls (no gold half). */
body.uc-estate .ucr-logo { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; }
body.uc-estate .ucr-logo span:first-of-type, body.uc-estate .ucr-logo span:last-child { color: var(--ue-accent); }
body.uc-estate .ucr-header { background: rgba(250, 246, 236, 0.94); border-bottom-color: var(--ue-line); }
/* Nov 4 2026: the phone header rules from uc-redesign.css, at this sheet's specificity (inner pages set the logo larger). */
@media (max-width: 400px) { body.uc-estate .ucr-header-in { padding: 0 12px !important; gap: 12px; } body.uc-estate .ucr-header-right { gap: 6px; }
  body.uc-estate .ucr-logo { font-size: 21px; } body.uc-estate a.ucr-donate { padding: 0 16px !important; } }
@media (max-width: 340px) { body.uc-estate a.ucr-donate { padding: 0 12px !important; } }
body.uc-estate .ucr-nav a { font-weight: 500; color: var(--ue-soft); }
body.uc-estate .ucr-nav a:hover, body.uc-estate .ucr-nav a.is-active { color: var(--ue-accent); }
body.uc-estate .ucr-donate { background: var(--ue-accent); box-shadow: none; font-weight: 600; border-radius: 10px; }
body.uc-estate .ucr-donate:hover { background: var(--ue-press); }

/* Buttons and links share the walls' radius, weight and pressed green. */
body.uc-estate .ucr-btn, body.uc-estate .ucr-btn-md, body.uc-estate .ucr-filter-go, body.uc-estate .ucr-inner .uc-btn-primary,
body.uc-estate .ucr-inner a.uc-btn-primary { border-radius: 10px; font-weight: 600; letter-spacing: 0; text-transform: none; }
body.uc-estate .ucr-page a.ucr-btn-md, body.uc-estate .ucr-btn-md, body.uc-estate .ucr-filter-go,
body.uc-estate .ucr-inner .uc-btn-primary, body.uc-estate .ucr-inner a.uc-btn-primary { background: var(--ue-accent); color: #fff; box-shadow: none; font-size: 1.0625rem; }
body.uc-estate .ucr-page a.ucr-btn-md:hover, body.uc-estate .ucr-page button.ucr-btn-md:hover, body.uc-estate .ucr-filter-go:hover,
body.uc-estate .ucr-inner .uc-btn-primary:hover { background: var(--ue-press); color: #fff; }
body.uc-estate .ucr-inner a:not([class*="bg-"]):not([class*="uc-btn"]):not([class*="border-"]) { color: var(--ue-accent); text-decoration-color: color-mix(in srgb, var(--ue-accent) 45%, transparent); text-underline-offset: 0.2em; }
body.uc-estate :is(a, button, input, select, summary):focus-visible { outline: 3px solid var(--ue-accent); outline-offset: 2px; }

/* ── Browse charities ─────────────────────────────────────────────────────── */
/* The yellow watercolour is gone. The hero is a mint-to-sand wash with the fork on the right from 900px up. */
body.uc-estate .ue-hero { background: linear-gradient(180deg, var(--ue-mint) 0%, var(--ue-ground) 100%); }
body.uc-estate .ue-hero .ucr-bhero-in { max-width: 1200px; padding: 56px 20px 104px; text-align: left; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 48px; align-items: center; }
body.uc-estate .ue-hero .ucr-h1 { font-size: clamp(2.125rem, 5vw, 3.5rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; color: var(--ue-ink); max-width: 15ch; }
body.uc-estate .ue-hero-copy { min-width: 0; }
body.uc-estate .ue-hero .ucr-lead { margin: 18px 0 0 !important; max-width: 34rem; font-size: 1.125rem; line-height: 1.6; color: var(--ue-soft); }
body.uc-estate .ue-hero .ucr-lead strong { color: var(--ue-ink); font-weight: 600; }
body.uc-estate .ue-fork { display: none; width: 100%; max-width: 22rem; height: auto; color: var(--ue-accent); }
body.uc-estate .ue-fork path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; }
body.uc-estate .ue-fork circle { fill: currentColor; }
body.uc-estate .ue-fork .ue-fork-gift { fill: var(--ue-mint); stroke: currentColor; stroke-width: 2.5; }
@media (min-width: 900px) {
  body.uc-estate .ue-hero .ucr-bhero-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); padding: 72px 32px 120px; }
  body.uc-estate .ue-fork { display: block; justify-self: end; }
}
body.uc-estate .ucr-filter { border-radius: 16px; background: var(--ue-card); box-shadow: 0 1px 0 rgba(15, 31, 23, 0.04); border: 1px solid var(--ue-line); }
body.uc-estate .ucr-search input, body.uc-estate .ucr-filter select, body.uc-estate .ucr-zakat, body.uc-estate .ucr-notify input { border: 1px solid var(--ue-field); border-radius: 10px; color: var(--ue-ink); font-weight: 400; }
body.uc-estate .ucr-search input::placeholder { color: var(--ue-faint); opacity: 1; }
body.uc-estate .ucr-search input:hover, body.uc-estate .ucr-filter select:hover { border-color: var(--ue-ink); }
body.uc-estate .ucr-search svg { color: var(--ue-faint); }
body.uc-estate .ucr-zakat input { accent-color: var(--ue-accent); }
body.uc-estate .ucr-count, body.uc-estate .ucr-sec-lead, body.uc-estate .ucr-note, body.uc-estate .ucr-cstat { color: var(--ue-soft); }
body.uc-estate .ucr-h2, body.uc-estate .ucr-soon h2 { color: var(--ue-ink); font-weight: 600; letter-spacing: -0.015em; }
body.uc-estate .ucr-accept { background: var(--ue-mint); border: 1px solid #CFE3D4; border-radius: 20px; }
body.uc-estate .ucr-ccard { background: var(--ue-card); border: 1px solid var(--ue-line); border-radius: 16px; }
body.uc-estate .ucr-ccard:hover { box-shadow: 0 10px 24px rgba(15, 31, 23, 0.10); }
body.uc-estate .ucr-cphoto { background: linear-gradient(160deg, var(--ue-mint), var(--ue-sand)); border-radius: 12px; }
body.uc-estate .ucr-feat { color: #5A3E00; background: var(--ue-sand); border: 1px solid var(--ue-sand-line); font-weight: 600; }
body.uc-estate .ucr-clogo { border-color: var(--ue-line); border-radius: 12px; }
body.uc-estate .ucr-clogo span, body.uc-estate .ucr-cstat b { color: var(--ue-accent); font-weight: 600; }
body.uc-estate .ucr-cname { color: var(--ue-ink); font-weight: 600; letter-spacing: -0.01em; }
body.uc-estate .ucr-ccause { color: var(--ue-press); font-weight: 600; }
body.uc-estate .ucr-cland { color: var(--ue-soft); }
body.uc-estate .ucr-czakat, body.uc-estate .ucr-cstat .first { color: #7A5214; }
body.uc-estate .ucr-notify button { border-color: color-mix(in srgb, var(--ue-accent) 45%, transparent); color: var(--ue-accent); border-radius: 10px; font-weight: 600; }
body.uc-estate .ucr-empty { background: var(--ue-mint); border: 1px solid #CFE3D4; border-radius: 16px; }
body.uc-estate .ucr-empty p { color: var(--ue-ink); font-weight: 600; }
body.uc-estate .ucr-facts3 svg { color: var(--ue-accent); }

/* ── Charity onboarding guide: the step accents are the estate green, not default blue ───────── */
body.uc-estate .ucr-inner .ue-bar { background: var(--ue-accent); }
body.uc-estate .ucr-inner .ue-tile { background: var(--ue-mint); border: 1px solid #CFE3D4; }
body.uc-estate .ucr-inner .ue-ico { color: var(--ue-accent); }
body.uc-estate .ucr-inner .ue-sub { color: var(--ue-press); }
body.uc-estate .ucr-inner .ue-band { background: var(--ue-accent); color: #fff; }
body.uc-estate .ucr-inner .ue-step { background: var(--ue-mint); color: var(--ue-press); border: 1px solid #CFE3D4; }
body.uc-estate .ucr-inner .ue-step.ue-step-final { background: var(--ue-accent); color: #fff; border-color: var(--ue-accent); }
body.uc-estate .ucr-inner .bg-emerald-600 { background: var(--ue-accent); }
body.uc-estate .ucr-inner .bg-emerald-600:hover { background: var(--ue-press); }
body.uc-estate .ucr-inner .border-emerald-500 { border-color: var(--ue-accent); }
body.uc-estate .ucr-inner .text-emerald-600, body.uc-estate .ucr-inner .text-emerald-700 { color: var(--ue-accent); }
body.uc-estate .ucr-inner .bg-emerald-50, body.uc-estate .ucr-inner .bg-emerald-100 { background: var(--ue-mint); }
body.uc-estate .ucr-inner .border-emerald-200 { border-color: #CFE3D4; }
body.uc-estate .ucr-inner .text-emerald-900 { color: var(--ue-ink); }
body.uc-estate .ucr-inner .bg-white.rounded-2xl, body.uc-estate .ucr-inner .bg-white.rounded-xl, body.uc-estate .ucr-inner .bg-white.rounded-3xl { border: 1px solid var(--ue-line); box-shadow: none; border-radius: 16px; }
body.uc-estate .ucr-inner .border-gray-200 { border-color: var(--ue-line); }
body.uc-estate .ucr-inner .bg-gray-50 { background: #F3EFE3; }
body.uc-estate .ucr-inner .text-gray-600, body.uc-estate .ucr-inner .text-gray-700 { color: var(--ue-soft); }
body.uc-estate .ucr-inner .text-gray-900 { color: var(--ue-ink); }
body.uc-estate .ucr-inner .ucr-inhero.ucr-inhero--estate { background: linear-gradient(180deg, var(--ue-mint) 0%, var(--ue-ground) 100%); border-bottom: 1px solid #CFE3D4; }
body.uc-estate .ucr-inner .ucr-inhero.ucr-inhero--estate h1, body.uc-estate .ucr-inner .ucr-inhero.ucr-inhero--estate h1.text-white { color: var(--ue-ink) !important; font-weight: 600; }
body.uc-estate .ucr-inner .ucr-inhero [class*="text-emerald-100"] { color: var(--ue-soft) !important; }
body.uc-estate .ucr-inner .ucr-inhero a[class*="border-white/30"] { border: 1px solid var(--ue-field) !important; color: var(--ue-accent) !important; background: transparent !important; border-radius: 10px; font-weight: 600; }
body.uc-estate .ucr-inner .ucr-inhero a[class*="border-white/30"]:hover { background: var(--ue-mint) !important; }

@media (prefers-reduced-motion: reduce) { body.uc-estate * { transition: none !important; } }

/* Small print in the guide stays readable in a serif face. */
body.uc-estate .ucr-inner .text-xs { font-size: 0.8125rem; line-height: 1.5; }
body.uc-estate .ucr-inner .text-sm { font-size: 0.9375rem; line-height: 1.55; }