/* ICOF CSF — Final Premium UI Polish
   Typography, full-width shells, interactions, consistency.
   CSS only for justify (no HTML align attributes). */

:root {
  --icof-radius: 1rem;
  --icof-radius-lg: 1.35rem;
  --icof-shadow: 0 16px 40px rgba(11, 35, 64, 0.1);
  --icof-shadow-hover: 0 22px 48px rgba(11, 35, 64, 0.16);
  --icof-pad-y: clamp(3rem, 6vw, 5rem);
  --icof-prose: 42rem;
  --icof-ink: #1a2433;
  --icof-ink-soft: #4a5562;
}

/* ========== 1. PREMIUM JUSTIFIED TYPOGRAPHY ========== */
/* University-publication reading measure — CSS justify only (no HTML align). */
.min-h-screen main p,
.min-h-screen section p:not(.text-xs):not([class*="tracking-[0."]),
.min-h-screen p.leading-relaxed,
.min-h-screen p.text-base,
.min-h-screen p.text-lg,
.min-h-screen p.text-sm.text-muted-foreground,
.min-h-screen .text-muted-foreground.text-base,
.min-h-screen .text-muted-foreground.leading-relaxed,
section p.mt-4.max-w-xl,
section p.mt-4.max-w-md,
section .space-y-5 > p,
.icof-need-main p,
.icof-need-aside p,
.icof-how__step p,
.icof-impact__item span,
.icof-impact__item p,
.icof-faq details p,
.icof-footer__brand p,
.icof-intro__copy > p,
[data-cms-home-video] p.text-lg,
[data-cms-home-video] p.leading-relaxed,
[data-cms-home-video] p.text-base,
.icof-donate-art .icof-art-caption + p {
  text-align: justify !important;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  line-height: 1.85 !important;
  letter-spacing: 0.012em;
  word-spacing: 0.02em;
  font-weight: 400 !important;
  font-size: clamp(0.98rem, 0.92rem + 0.2vw, 1.085rem) !important;
  color: var(--icof-ink-soft) !important;
  max-width: var(--icof-prose);
  margin-top: 1.05rem !important;
  margin-bottom: 1.15rem !important;
  padding-inline: 0;
}

/* Lead / supporting sentences — slightly airier */
.min-h-screen p.text-lg.leading-relaxed,
.min-h-screen p.text-lg.text-muted-foreground,
.icof-intro__copy > p.mt-4,
.icof-intro__copy > p.text-lg {
  line-height: 1.9 !important;
  font-size: clamp(1.05rem, 1rem + 0.28vw, 1.2rem) !important;
  color: #3d4a5c !important;
  max-width: 40rem;
}

/* Body lists — matching measure */
.min-h-screen section li,
.icof-how__step li,
.icof-faq li {
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: var(--icof-ink-soft);
}

/* Keep short UI labels left-aligned */
[role="marquee"] p,
[role="marquee"] span,
header p,
header span,
.icof-float,
.icof-trust span,
.icof-kicker,
.icof-preloader p,
button,
a.rounded-xl,
.icof-art-caption,
footer h4,
.icof-footer h4,
.text-xs.font-bold.uppercase,
.text-\[11px\],
.icof-footer__bottom,
.dw-steps,
#donate .text-xs,
#donate label,
#donate span.text-xs,
#donate h2,
#donate .text-sm,
.icof-donate-widget p,
.icof-donate-widget h2,
.icof-donate-widget label,
.icof-donate-widget button,
.icof-donate-widget span {
  text-align: left !important;
  hyphens: manual !important;
  max-width: none !important;
  font-size: inherit !important;
  margin-top: revert !important;
  margin-bottom: revert !important;
  line-height: inherit !important;
}

/* Body reading colour on dark panels */
.icof-section-share p,
.icof-need-aside p,
.icof-footer__brand p {
  color: color-mix(in srgb, #faf7f2 78%, transparent) !important;
}

/* Headings hierarchy */
.min-h-screen h1,
.min-h-screen h2.font-display,
.min-h-screen .font-display.text-4xl,
.min-h-screen .font-display.text-5xl,
.min-h-screen .font-display.text-3xl {
  color: var(--icof-navy, #0b2340) !important;
  font-weight: 800 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.12 !important;
  text-wrap: balance;
}
.icof-section-share h2,
.icof-section-share .font-display {
  color: #faf7f2 !important;
}
.min-h-screen h3 {
  font-weight: 750 !important;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.text-xs.font-bold.uppercase,
.icof-kicker {
  letter-spacing: 0.18em !important;
  font-weight: 800 !important;
}

/* ========== 4. FULL-WIDTH SECTION SHELLS ========== */
section#donate,
section#campaign,
section#cms-home-video,
[data-cms-home-video],
.icof-section-need,
.icof-section-share,
.icof-how,
.icof-impact,
.icof-faq,
.icof-trust {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  box-sizing: border-box;
}
section#donate {
  background:
    radial-gradient(900px 420px at 8% 20%, color-mix(in srgb, #b2943e 14%, transparent), transparent 55%),
    linear-gradient(180deg, #f7f1e4 0%, #ffffff 45%, #eef2f7 100%) !important;
  padding-top: var(--icof-pad-y) !important;
  padding-bottom: var(--icof-pad-y) !important;
}
section#donate.mx-auto {
  max-width: none !important;
}

/* Contained readable content inside full-bleed shells */
.icof-donate-stage__inner,
.icof-section-need > .relative,
.icof-section-need > div,
#campaign > .relative,
#cms-home-video > div,
[data-cms-home-video] > div {
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ========== 6. DONATE-SIDE FEATURE COMPOSITION ========== */
.icof-donate-stage__inner {
  display: grid;
  gap: 2rem;
  align-items: center;
  width: min(72rem, calc(100% - 2rem));
}
@media (min-width: 860px) {
  .icof-donate-stage__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: 2.75rem;
  }
}
.icof-donate-widget {
  width: 100%;
  max-width: 36rem;
  margin-left: auto;
}
@media (min-width: 860px) {
  .icof-donate-widget { margin-right: 0; }
}
.icof-donate-art {
  position: relative;
  min-height: 22rem;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
}
@media (max-width: 859px) {
  .icof-donate-art { order: -1; min-height: 18rem; }
  .icof-donate-art .icof-float--d5,
  .icof-donate-art .icof-float--d6 { display: none; }
}
.icof-donate-art .icof-art-frame {
  width: min(100%, 26rem);
  aspect-ratio: 5 / 6;
  transform: rotate(1.25deg);
}
.icof-donate-art .icof-float--d1 { top: 6%; left: 0; }
.icof-donate-art .icof-float--d2 { top: 28%; right: -4%; }
.icof-donate-art .icof-float--d3 { bottom: 22%; left: -4%; }
.icof-donate-art .icof-float--d4 { bottom: 4%; right: 8%; }
.icof-donate-art .icof-float--d5 { top: 48%; left: -6%; }
.icof-donate-art .icof-float--d6 { top: 12%; right: 18%; }

/* Soft glass floats beside donate art */
.icof-donate-art .icof-float {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: color-mix(in srgb, #ffffff 82%, transparent);
  border: 1px solid color-mix(in srgb, #b2943e 35%, #fff);
  box-shadow:
    0 10px 28px rgba(11, 35, 64, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

/* Keep donate card premium */
#donate .rounded-3xl,
.icof-donate-widget .rounded-3xl {
  border-radius: var(--icof-radius-lg) !important;
  box-shadow: var(--icof-shadow) !important;
  border-color: color-mix(in srgb, #b2943e 28%, transparent) !important;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
#donate .rounded-3xl:hover,
.icof-donate-widget .rounded-3xl:hover {
  box-shadow: var(--icof-shadow-hover) !important;
}

/* ========== 8. MICRO INTERACTIONS ========== */
a.rounded-xl,
button.rounded-xl,
.icof-footer__news button {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, filter 0.2s ease !important;
}
a.rounded-xl:hover,
button.rounded-xl:hover {
  transform: translateY(-1px);
}
#campaign .divide-y > div,
.icof-how__step,
.icof-impact__item,
.icof-faq details {
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
#campaign .divide-y > div:hover,
.icof-how__step:hover,
.icof-impact__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--icof-shadow-hover);
}
.icof-art-frame {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.icof-art-frame:hover {
  transform: rotate(0deg) scale(1.01);
}
.icof-float {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.icof-float:hover {
  box-shadow: 0 14px 32px rgba(11, 35, 64, 0.18);
}

/* Subtle scroll reveal */
.icof-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.icof-reveal.is-in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .icof-reveal { opacity: 1; transform: none; transition: none; }
  a.rounded-xl:hover,
  #campaign .divide-y > div:hover { transform: none; }
}

/* ========== 9. VISUAL CONSISTENCY ========== */
.rounded-3xl,
.icof-art-frame,
.icof-need-aside,
.icof-how__step,
.icof-impact__item,
#campaign .divide-y > div {
  border-radius: var(--icof-radius-lg) !important;
}
.icof-how__inner,
.icof-impact__inner,
.icof-faq__inner,
.icof-section-need .relative.z-10,
#campaign .relative.z-10 {
  padding-top: var(--icof-pad-y) !important;
  padding-bottom: var(--icof-pad-y) !important;
}

/* Quotes */
.icof-need-aside blockquote {
  text-align: left !important;
  hyphens: manual !important;
  line-height: 1.4 !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Captions */
.icof-art-caption,
figcaption p {
  letter-spacing: 0.12em;
  font-weight: 800;
}