/* Celebration Italia app pages. One stylesheet for every page.
   Colours, type and radii come from design/canvas/kit.css (app palette, dark and light).
   No inline styles anywhere: the Content-Security-Policy only allows this file. */

/* ---------- fonts (self-hosted, SIL OFL 1.1, Latin subset; licences in fonts/) ---------- */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/Poppins-Regular.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Poppins-Medium.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/Poppins-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-Medium.woff2") format("woff2"); }
@font-face { font-family: "Epilogue"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/Epilogue-MediumItalic.woff2") format("woff2"); }

/* ---------- tokens: light app palette, then dark ---------- */
:root {
  color-scheme: light dark;
  --bg: #F6F6F2;
  --surface: #FFFFFF;
  --surface-2: #ECEBE6;
  --ink: #0D0D0D;
  --ink-2: #4A4748;
  --ink-3: #6B676C;
  --line: #DAD9D2;
  --primary-bg: #0D0D0D;
  --primary-ink: #FFFFFF;
  --warn: #8A5500;
  --warn-soft: #F7EAD2;
  --good: #236B40;
  --good-soft: #DFF0E5;
  --focus: #3250C8;
  --font-display: "Epilogue", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Poppins", "Helvetica Neue", Arial, sans-serif;
  --radius-pill: 300px;
  --radius-card: 20px;
  --radius-option: 16px;
  --radius-tile: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0D0D0D;
    --surface: #191818;
    --surface-2: #242223;
    --ink: #F2F2EE;
    --ink-2: #B9B6B7;
    --ink-3: #8F8C8D;
    --line: #2E2C2D;
    --primary-bg: #FFFFFF;
    --primary-ink: #0D0D0D;
    --warn: #E8B45A;
    --warn-soft: #2E2413;
    --good: #7BD09D;
    --good-soft: #15291D;
    --focus: #A3B5F5;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
[hidden] { display: none !important; }
img, svg { flex: none; }
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
strong, b { font-weight: 600; }
p, ul, ol, dl, figure, blockquote { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li + li { margin-top: .5rem; }
li::marker { color: var(--ink-3); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- type ---------- */
h1, h2 { font-family: var(--font-display); font-weight: 500; }
h1 { font-size: clamp(2rem, 1.55rem + 2.2vw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; margin: 2rem 0 .75rem; }
h2 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; margin: 2.75rem 0 .875rem; scroll-margin-top: 1rem; }
h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; margin: 1.5rem 0 .5rem; }
.italic { font-style: italic; }
.lead { font-size: 1.0625rem; color: var(--ink-2); }
.meta { font-size: .875rem; color: var(--ink-3); margin-bottom: 1.25rem; }
.small { font-size: .875rem; color: var(--ink-2); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40em) { .wrap { padding: 0 1.5rem; } }
main { display: block; padding-bottom: 3rem; }
main:focus { outline: none; }

.skip {
  position: absolute; left: 1rem; top: -10rem; z-index: 10;
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  background: var(--primary-bg); color: var(--primary-ink); font-weight: 500; text-decoration: none;
}
.skip:focus { top: 1rem; }

.top { border-bottom: 1px solid var(--line); }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: -.02em; text-decoration: none; }
.lang-switch {
  display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink);
  font-size: .875rem; font-weight: 500; text-decoration: none;
}

.foot { border-top: 1px solid var(--line); padding: 1.5rem 0 2.5rem; font-size: .875rem; color: var(--ink-2); }
.foot-nav { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.foot-nav li + li { margin-top: 0; }
.foot-nav a { display: inline-block; padding: .375rem 0; }
.foot-nav a[aria-current="page"] { font-weight: 600; text-decoration: none; }
.foot p { margin: 0; }

/* ---------- components ---------- */
.tag {
  display: inline-flex; align-items: center; min-height: 1.5rem; padding: .125rem .625rem;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2);
  font-size: .75rem; font-weight: 500; line-height: 1.3;
}
.tag.warn { background: var(--warn-soft); color: var(--warn); }

.note {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .875rem 1rem; margin: 0 0 1.25rem; border-radius: var(--radius-option);
  background: var(--warn-soft); color: var(--warn); font-size: .9375rem; line-height: 1.5;
}
.note p { margin: 0; }
.note .ico { margin-top: .15rem; }
.note-box { padding: 1rem 1.25rem; border-radius: var(--radius-option); background: var(--surface-2); color: var(--ink-2); margin: 0 0 1rem; }
.note-box h2 { font-size: 1.125rem; margin: 0 0 .5rem; color: var(--ink); }
.note-box p:last-child { margin-bottom: 0; }

.card {
  background: var(--surface); border-radius: var(--radius-card); padding: 1.25rem;
  box-shadow: inset 0 0 0 1px var(--line); margin: 0 0 1rem;
}
.card > :first-child { margin-top: 0; }
.card > :last-child { margin-bottom: 0; }
.card h2 { margin: 0 0 .5rem; font-size: 1.3125rem; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; margin-bottom: .5rem; }
.card-head h2 { margin: 0; }

.ico { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-sm { width: 1rem; height: 1rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3rem; padding: .5rem 1.375rem; border-radius: var(--radius-pill);
  border: 1px solid transparent; font-family: var(--font-text); font-size: .9375rem; font-weight: 500; line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
}
.btn-primary { background: var(--primary-bg); color: var(--primary-ink); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-sm { min-height: 2.5rem; padding: .375rem 1rem; font-size: .875rem; }
.btn:hover { text-decoration: none; filter: contrast(1.1); }

/* label/value pairs (bank details, controller) */
.fields { display: grid; gap: .75rem; margin: 1rem 0; }
.fields > div { display: grid; gap: .125rem; }
.fields dt { font-size: .8125rem; color: var(--ink-3); }
.fields dd { margin: 0; }
.value { font-family: var(--font-display); font-weight: 500; font-size: 1.25rem; letter-spacing: .01em; font-variant-numeric: tabular-nums; -webkit-user-select: all; user-select: all; overflow-wrap: anywhere; }
.copy {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .75rem .75rem .75rem 1rem; border-radius: var(--radius-option); background: var(--surface-2);
}
.copy .value { flex: 1 1 12rem; min-width: 0; }

.verse { margin: 0 0 1rem; }
.verse blockquote { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.015em; }
.verse blockquote p { margin: 0; }
.verse figcaption { font-size: .8125rem; color: var(--ink-3); margin-top: .25rem; }

.steps { padding-left: 1.5rem; }
.steps li { padding-left: .25rem; }

/* hub page links */
.tiles { list-style: none; padding: 0; display: grid; gap: .75rem; }
.tiles li + li { margin-top: 0; }
.tile {
  display: flex; flex-direction: column; gap: .125rem; padding: 1rem 1.25rem;
  border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none;
}
.tile:hover { box-shadow: inset 0 0 0 2px var(--ink-3); }
.tile-title { font-weight: 600; }
.tile-sub { font-size: .875rem; color: var(--ink-2); }

/* open-in-app page (app.html): one page in both languages */
.title-alt { display: block; margin-top: .5rem; font-size: .6em; line-height: 1.15; color: var(--ink-2); }
.lang-head { font-family: var(--font-text); font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 2.25rem 0 .5rem; }

/* contents list on the privacy notice */
.toc { padding: 1rem 1.25rem; border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); margin: 0 0 1rem; }
.toc h2 { font-size: 1.125rem; margin: 0 0 .5rem; }
.toc ol { margin: 0; padding-left: 1.5rem; }
.toc li + li { margin-top: .25rem; }
@media (min-width: 40em) { .toc ol { columns: 2; column-gap: 2.5rem; } .toc li { break-inside: avoid; } }

/* tables: scroll inside their own region on narrow screens, never the page */
.table-wrap { position: relative; overflow-x: auto; margin: 0 0 1rem; border-radius: var(--radius-option); box-shadow: inset 0 0 0 1px var(--line); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.45; }
caption { text-align: left; padding: .875rem 1rem .25rem; font-weight: 600; font-size: .9375rem; }
caption .small { display: block; font-weight: 400; }
th, td { text-align: left; vertical-align: top; padding: .625rem 1rem; border-top: 1px solid var(--line); }
thead th { font-size: .8125rem; font-weight: 600; color: var(--ink-2); }
tbody th { font-weight: 600; }
th .small { display: block; font-weight: 400; color: var(--ink-3); font-size: .8125rem; }
.matrix { min-width: 52rem; }
.matrix td { color: var(--ink-2); }
.matrix td.all { color: var(--ink); font-weight: 500; }

/* The giving pages' contact line (data-detail="unavailable"): in the page from the start, so a browser where
   assets/give.js never runs (no script, a failed load, a syntax it cannot read) still gives the contact address
   (v2 round 5). give.js hides it as soon as it starts, and shows it again, without this class, only if the details
   cannot be read; the short wait keeps it from flashing on a normal load before the script starts (out of the flow
   meanwhile where the browser animates position, so it leaves no gap either). */
.detail-fallback { animation: detail-fallback 0s 2s both; }
@keyframes detail-fallback { from { visibility: hidden; position: absolute; } to { visibility: visible; position: static; } }

/* card section of the giving pages (assets/give.js; board web-give-card) */
.btn-block { display: flex; width: 100%; }
.btn:disabled { opacity: .55; cursor: progress; filter: none; }
.caption { font-size: .8125rem; line-height: 1.45; color: var(--ink-3); margin: 0; }
.center { text-align: center; }
.give-form { display: grid; gap: 1.25rem; margin: 1rem 0 0; }
.field { display: grid; gap: .5rem; min-width: 0; margin: 0; padding: 0; border: 0; }
.field-label { padding: 0; font-size: .8125rem; font-weight: 500; color: var(--ink-2); }
.choice { position: relative; display: block; cursor: pointer; }
.choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .375rem; }
.chip {
  display: flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: 0 .25rem;
  border-radius: var(--radius-pill); background: var(--surface-2); color: var(--ink-2);
  font-size: .875rem; font-weight: 500; white-space: nowrap;
}
.choice input:checked + .chip { background: var(--ink); color: var(--bg); }
.choice input:focus-visible + .chip, .choice input:focus-visible + .option { outline: 3px solid var(--focus); outline-offset: 2px; }
.options { display: grid; gap: .5rem; }
.option {
  display: flex; align-items: center; gap: .75rem; min-height: 3.75rem; padding: .625rem .875rem;
  border-radius: var(--radius-option); background: var(--surface-2); border: 1.5px solid transparent;
}
.choice input:checked + .option { border-color: var(--ink); }
.radio {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 1.375rem; height: 1.375rem; border-radius: 50%; border: 1.5px solid var(--ink-3);
}
.choice input:checked + .option .radio { border-color: var(--ink); }
.choice input:checked + .option .radio::after { content: ""; width: .6875rem; height: .6875rem; border-radius: 50%; background: var(--ink); }
.option-text { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.option-title { font-size: .9375rem; font-weight: 600; line-height: 1.3; }
.input {
  width: 100%; min-height: 3rem; padding: 0 .875rem; border-radius: 14px; border: 1px solid transparent;
  background: var(--surface-2); color: var(--ink); font-family: var(--font-text); font-size: 1rem;
}
.select { position: relative; }
.select select { -webkit-appearance: none; appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select .ico { position: absolute; right: .875rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ink-3); }
.give-submit { display: grid; gap: .5rem; }
.give-msg { margin: 0; font-size: .875rem; font-weight: 500; color: var(--warn); }
.give-msg:empty { display: none; }

/* thank-you and cancelled pages after Stripe (board web-give-thanks) */
.result-icon {
  display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem;
  margin: 1.5rem 0 0; border-radius: 50%; background: var(--good-soft); color: var(--good);
}
.result-icon.neutral { background: var(--surface-2); color: var(--ink-2); }
.ico-lg { width: 2rem; height: 2rem; }
.icon-list { list-style: none; padding: 0; margin: 0; font-size: .9375rem; line-height: 1.5; }
.icon-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .875rem 0; }
.icon-list li + li { margin-top: 0; border-top: 1px solid var(--line); }
.icon-list .ico { margin-top: .2rem; color: var(--ink-3); }
.card .icon-list { margin: -.5rem 0; }
.actions { display: grid; gap: .75rem; margin: 1.5rem 0 1rem; }
.note-box.with-icon { display: flex; gap: .75rem; align-items: flex-start; font-size: .875rem; }
.note-box.with-icon .ico { margin-top: .2rem; }

/* ---------- print ---------- */
@media print {
  :root { --bg: #FFFFFF; --surface: #FFFFFF; --surface-2: #FFFFFF; --ink: #000000; --ink-2: #000000; --ink-3: #333333; --line: #999999; }
  .skip, .lang-switch, .foot-nav, .copy button { display: none !important; }
  .table-wrap { overflow: visible; }
  a { text-decoration: none; }
}