/* The bold pass (2026-10-25): colour, shapes and shades for the home page and the information pages. Loaded after style.css.
   Everything drawn here is decoration: it is CSS or hidden inline art, so a screen reader meets none of it. Text on a colour keeps
   a contrast of at least 4.5 to 1 (white on teal, deep teal on gold, dark ink on the pale tints). The date, invitation and room
   pages keep their own looks and are not touched. */
:root {
  --b-deep: #0f4f4b;
  --b-teal: #1f6f6a;
  --b-coral: #ff7a59;
  --b-gold: #ffc857;
  --b-hero-1: #23807a; --b-hero-2: #1a5f5b; --b-hero-3: #123f3c;
  --b-bubble: #25807a;
  --b-t-peach: #ffe4d3; --b-t-mint: #d9f3e6; --b-t-lav: #e8e0fb; --b-t-sky: #d9eef2;
  --b-i-peach: #d9532f; --b-i-mint: #2f9e72; --b-i-lav: #7a5ad8; --b-i-sky: #2a8aa0;
  --b-glyph: #ffffff;
  --b-link: #0f4f4b;
  --b-top: #ffe8da;
  --b-card-text: #24211e;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --b-hero-1: #1c6560; --b-hero-2: #124744; --b-hero-3: #0b2d2b;
    --b-bubble: #1f6f69;
    --b-t-peach: #3a2a22; --b-t-mint: #1f3a2e; --b-t-lav: #2d2848; --b-t-sky: #1d3338;
    --b-i-peach: #ffb48a; --b-i-mint: #7fd6b2; --b-i-lav: #b79cff; --b-i-sky: #8fd4cc;
    --b-glyph: #1b1815; --b-link: #8fd4cc; --b-top: #2a1f18; --b-card-text: #f4ede4;
  }
}
:root[data-theme='dark'] {
  --b-hero-1: #1c6560; --b-hero-2: #124744; --b-hero-3: #0b2d2b;
  --b-bubble: #1f6f69;
  --b-t-peach: #3a2a22; --b-t-mint: #1f3a2e; --b-t-lav: #2d2848; --b-t-sky: #1d3338;
  --b-i-peach: #ffb48a; --b-i-mint: #7fd6b2; --b-i-lav: #b79cff; --b-i-sky: #8fd4cc;
  --b-glyph: #1b1815; --b-link: #8fd4cc; --b-top: #2a1f18; --b-card-text: #f4ede4;
}

/* ---------- The home page ---------- */
body.home { background: linear-gradient(180deg, var(--b-top) 0, transparent 30rem), radial-gradient(70% 40% at 105% 25%, var(--glow-2) 0%, transparent 70%); background-color: var(--bg); }
body.home main { background: transparent; box-shadow: none; padding: 0.25rem 0 1rem; margin-top: 0.25rem; }
body.home header { padding-bottom: 0.5rem; }
body.home .brand { font-size: 1.5rem; }
body.home .logo { width: 2.4rem; height: 2.4rem; filter: drop-shadow(0 4px 8px rgba(255, 122, 89, 0.35)); }
body.home .logo rect { fill: #d9532f; }
body.home .logo path.mark { stroke: #ffffff; }

/* The hero: a deep teal panel with a blob-like outline, soft circles and the sample cards. */
body.home .hero {
  position: relative; overflow: hidden; display: block; isolation: isolate;
  padding: 1.6rem 1.25rem 1.4rem; color: #ffffff;
  background: linear-gradient(150deg, var(--b-hero-1) 0%, var(--b-hero-2) 48%, var(--b-hero-3) 100%);
  border-radius: 2rem 2rem 4.5rem 2rem; box-shadow: 0 18px 40px rgba(18, 63, 60, 0.28);
}
body.home .hero::before, body.home .hero::after { content: ''; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }
body.home .hero::before { width: 15rem; height: 15rem; top: -6rem; inset-inline-end: -5rem; background: var(--b-bubble); }
body.home .hero::after { width: 9rem; height: 9rem; bottom: -3.5rem; inset-inline-start: -3rem; background: var(--b-bubble); opacity: 0.8; }
body.home .hero a { color: #ffffff; font-weight: 700; text-underline-offset: 0.2em; }
body.home .hero .lead { font-size: 2rem; line-height: 1.15; font-weight: 800; color: #ffffff; }
body.home .hero .lead::after {
  width: 6.5rem; height: 1.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 20'%3E%3Cpath d='M13 11C28-3 40-3 44 9s18 13 31 2' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='5' fill='%23ffc857'/%3E%3Ccircle cx='80' cy='11' r='5' fill='%23ff7a59'/%3E%3C/svg%3E");
}
body.home .hero p { margin: 0.7rem 0; font-size: 1.12rem; }
body.home .hero-text p.cta-line { margin: 1.1rem 0 0.4rem; }
.cta {
  display: inline-block; padding: 0.85rem 1.7rem; border-radius: 999px; text-decoration: none;
  font-size: 1.15rem; font-weight: 800; color: var(--b-deep); background: linear-gradient(135deg, #ffd978, var(--b-gold));
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
body.home .hero a.cta { color: var(--b-deep); text-decoration: none; }
.cta:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, 0.3); }
body.home .hero-art { display: block; width: 100%; max-width: 19rem; height: auto; margin: 1.3rem auto 0.2rem; overflow: visible; }
/* The sample cards are drawn with these classes; the colours follow the theme. */
.sc-card { fill: #ffffff; }
.sc-bar { fill: var(--b-gold); }
.sc-line { fill: #d9d2c8; }
.sc-line-2 { fill: #ece6dd; }
.sc-yes { fill: var(--b-teal); }
.sc-no { fill: none; stroke: #d9532f; stroke-width: 3; }
.sc-tick { fill: none; stroke: #ffffff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.sc-x { fill: none; stroke: #d9532f; stroke-width: 3.2; stroke-linecap: round; }
.sc-chip { fill: #ffe4d3; }
.sc-chip-dot { fill: #d9532f; }
.sc-ring-a { fill: none; stroke: var(--b-deep); stroke-width: 3; }
.sc-bubble-a { fill: #ffffff; }
.sc-bubble-b { fill: var(--b-coral); }
.sc-bubble-line { fill: #d9d2c8; }
.sc-bubble-line-b { fill: #ffffff; }
.sc-float-a { fill: var(--b-coral); }
.sc-float-b { fill: var(--b-gold); }
.sc-float-c { fill: #b79cff; }
@media (min-width: 52rem) {
  body.home header, body.home main, body.home footer { max-width: 64rem; }
  body.home .hero { display: grid; grid-template-columns: 1fr 21rem; gap: 2rem; align-items: center; padding: 2.6rem 2.6rem 2.4rem; }
  body.home .hero .lead { font-size: 2.7rem; }
  body.home .hero-art { margin: 0; max-width: none; }
}

/* The feature cards: each its own colour, with a round icon on top. The icons are drawn by CSS. */
.fcards { display: grid; gap: 1rem; margin: 1.5rem 0 1.25rem; }
.fcard {
  position: relative; padding: 4.1rem 1.2rem 1.1rem; border-radius: 1.6rem; color: var(--b-card-text);
  background: var(--b-t-peach); box-shadow: 0 8px 22px rgba(90, 60, 30, 0.10);
  --b-i: var(--b-i-peach);
}
.fcard p { margin: 0.35rem 0; }
.fcard a { color: var(--b-link); font-weight: 700; }
.fcard::before {
  content: ''; position: absolute; top: 1rem; inset-inline-start: 1.1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--b-i);
}
.fcard::after {
  content: ''; position: absolute; top: 1.4rem; inset-inline-start: 1.5rem; width: 1.7rem; height: 1.7rem; background: var(--b-glyph);
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat;
}
.fc-mint { background: var(--b-t-mint); --b-i: var(--b-i-mint); }
.fc-lav { background: var(--b-t-lav); --b-i: var(--b-i-lav); }
.fc-sky { background: var(--b-t-sky); --b-i: var(--b-i-sky); }
.fc-chat { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v12H9l-5 4z' fill='black'/%3E%3C/svg%3E"); }
.fc-clock { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='black' stroke-width='2.6'/%3E%3Cpath d='M12 6.5V12l3.5 2' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.fc-rooms { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='8' r='3.6' fill='black'/%3E%3Ccircle cx='17' cy='9' r='3' fill='black'/%3E%3Cpath d='M1.5 20c.4-4 3-6 6.5-6s6.1 2 6.5 6zM15 14.5c3.2-.4 6 1.2 7 5.5h-6.2c-.1-2-.4-3.8-.8-5.5z' fill='black'/%3E%3C/svg%3E"); }
.fc-shield { --ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l8 3v6c0 5-3.4 9-8 11-4.6-2-8-6-8-11V5z' fill='black'/%3E%3C/svg%3E"); }
@media (min-width: 40rem) { .fcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) { .fcards { grid-template-columns: repeat(4, 1fr); } }

/* The create form: a white card with a colour strip along its top. */
body.home #form {
  max-width: none; margin-top: 0.5rem; padding: 1.5rem 1.1rem 1.5rem; border-radius: 1.8rem; box-shadow: var(--shadow);
  background: linear-gradient(90deg, var(--b-coral), var(--b-gold) 50%, var(--b-teal)) top / 100% 0.45rem no-repeat, var(--card);
}
@media (min-width: 40rem) { body.home #form { padding: 1.9rem 2rem 2rem; } }
@media (min-width: 52rem) { body.home #form { max-width: 40rem; margin-inline: auto; } }
body.home footer { margin-top: 0.5rem; padding: 0.9rem 1.2rem; border-radius: 1.4rem; background: color-mix(in srgb, var(--b-teal) 9%, transparent); }

/* ---------- The information pages: a colour band behind the title, tinted question cards ---------- */
body.info { background: linear-gradient(180deg, var(--b-top) 0, transparent 22rem), radial-gradient(70% 40% at 105% 25%, var(--glow-2) 0%, transparent 70%); background-color: var(--bg); }
body.info main { overflow: hidden; }
body.info main > h1:first-of-type {
  position: relative; margin: -1.25rem -1.1rem 1.1rem; padding: 1.6rem 1.1rem 1.4rem; color: #ffffff; isolation: isolate;
  background: linear-gradient(150deg, var(--b-hero-1) 0%, var(--b-hero-2) 55%, var(--b-hero-3) 100%);
  border-radius: 0 0 2.4rem 0; overflow: hidden;
}
html[dir='rtl'] body.info main > h1:first-of-type { border-radius: 0 0 0 2.4rem; }
body.info main > h1:first-of-type::before {
  content: ''; position: absolute; z-index: -1; top: -3.5rem; inset-inline-end: -2.5rem; width: 9rem; height: 9rem; border-radius: 50%; background: var(--b-bubble);
}
body.info main > h1:first-of-type::after {
  width: 6rem; height: 1.3rem; margin-top: 0.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 20'%3E%3Cpath d='M13 11C28-3 40-3 44 9s18 13 31 2' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='5' fill='%23ffc857'/%3E%3Ccircle cx='80' cy='11' r='5' fill='%23ff7a59'/%3E%3C/svg%3E");
}
@media (min-width: 40rem) { body.info main > h1:first-of-type { margin: -1.75rem -2rem 1.4rem; padding: 2.1rem 2rem 1.8rem; font-size: 2.2rem; } }
body.info main h2 { padding-inline-start: 0.7rem; border-inline-start: 0.4rem solid var(--b-coral); border-radius: 0.2rem; }
body.info summary h2, body.info summary h3 { padding-inline-start: 0; border-inline-start: 0; }
body.info details { border: 0; margin: 0.55rem 0; padding: 0.15rem 1rem; border-radius: 1.1rem; background: var(--b-t-peach); color: var(--b-card-text); }
body.info details:nth-of-type(4n+2) { background: var(--b-t-mint); }
body.info details:nth-of-type(4n+3) { background: var(--b-t-lav); }
body.info details:nth-of-type(4n) { background: var(--b-t-sky); }
body.info details a { color: var(--b-link); font-weight: 700; }
body.info footer { margin-top: 0.5rem; padding: 0.9rem 1.2rem; border-radius: 1.4rem; background: color-mix(in srgb, var(--b-teal) 9%, transparent); }