/* Mardi Gras reuses the proven countdown scaffold, but turns it into a parade-night stage with brass warmth, mask drama, bead shimmer, and carnival color. */
@import url("/fathers-day.css?v=20260422b");

:root {
  --amber-900: #4d1875;
  --amber-700: #b78a1a;
  --amber-600: #e2b33f;
  --amber-400: #ffe7a1;
  --maple-900: #102f1f;
  --maple-800: #204933;
  --maple-700: #2e6d4d;
  --maple-600: #5aa97d;
  --sage-700: #7a4cb0;
  --sage-500: #dbc9f4;
  --cream-100: #fdf9ef;
  --cream-200: #f5edd7;
  --leaf-100: #fcfaf7;
  --leaf-200: #efe6fb;
  --ink-900: #352149;
  --ink-700: #655075;
  --ink-500: #8b7e96;
  --panel: rgba(253, 249, 239, 0.84);
  --panel-strong: rgba(255, 252, 246, 0.95);
  --border: rgba(122, 76, 176, 0.18);
  --shadow-soft: 0 16px 40px rgba(46, 20, 61, 0.14);
  --shadow-card: 0 22px 44px rgba(34, 18, 47, 0.18);
  --digit-color: #f3d15e;
  --digit-shadow: 0 10px 24px rgba(226, 179, 63, 0.22);
  --bg-main:
    radial-gradient(circle at 14% 16%, rgba(152, 108, 203, 0.22), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(226, 179, 63, 0.18), transparent 24%),
    radial-gradient(circle at 50% 88%, rgba(90, 169, 125, 0.18), transparent 30%),
    linear-gradient(150deg, #fffaf1 0%, #f9f1dd 38%, #f3eefc 68%, #f4faf5 100%);
}

:root[data-theme="night"] {
  --panel: rgba(30, 17, 45, 0.72);
  --panel-strong: rgba(39, 22, 56, 0.9);
  --border: rgba(226, 179, 63, 0.16);
  --ink-900: #fbf7ff;
  --ink-700: #eadff7;
  --ink-500: #bdaed0;
  --digit-color: #f6db7c;
  --digit-shadow: 0 10px 24px rgba(226, 179, 63, 0.24);
  --bg-main:
    radial-gradient(circle at 14% 16%, rgba(122, 76, 176, 0.24), transparent 24%),
    radial-gradient(circle at 82% 16%, rgba(226, 179, 63, 0.14), transparent 24%),
    radial-gradient(circle at 50% 88%, rgba(74, 138, 103, 0.16), transparent 30%),
    linear-gradient(150deg, #140d1e 0%, #251738 38%, #11291d 68%, #1a1125 100%);
}

.mardi-gras-page .harvest-crown {
  background:
    radial-gradient(circle at 16% 48%, rgba(159, 111, 219, 0.2), transparent 30%),
    radial-gradient(circle at 42% 50%, rgba(226, 179, 63, 0.18), transparent 28%),
    radial-gradient(circle at 68% 46%, rgba(102, 184, 136, 0.18), transparent 28%),
    radial-gradient(circle at 88% 48%, rgba(255, 255, 255, 0.12), transparent 30%);
}

.mardi-gras-page .crown-seed:nth-child(1) {
  background: linear-gradient(180deg, #f4d77a, #dfa92d);
}

.mardi-gras-page .crown-seed:nth-child(2) {
  background: linear-gradient(180deg, #d9c4ff, #9e77dc);
}

.mardi-gras-page .crown-seed:nth-child(3) {
  background: linear-gradient(180deg, #b2e5c2, #57a878);
}

.mardi-gras-page .crown-seed:nth-child(4) {
  background: linear-gradient(180deg, #fff8e6, #e8c85b);
}

.mardi-gras-page .crown-sun {
  background: radial-gradient(circle at 35% 35%, #fff8de 0%, #e2b33f 48%, #7a4cb0 76%, #ffffff 100%);
  box-shadow: 0 0 0 6px rgba(226, 179, 63, 0.08), 0 0 18px rgba(122, 76, 176, 0.24);
}

.mardi-gras-page .brand-dot {
  background: #e2b33f;
  box-shadow: 0 0 0 4px rgba(226, 179, 63, 0.14), 0 0 18px rgba(226, 179, 63, 0.3);
}

.mardi-gras-page .utility-bar {
  background: linear-gradient(180deg, rgba(255, 251, 245, 0.82), rgba(247, 239, 251, 0.7));
}

:root[data-theme="night"] .mardi-gras-page .utility-bar {
  background: linear-gradient(180deg, rgba(39, 22, 56, 0.88), rgba(24, 17, 37, 0.76));
}

.mardi-gras-page .carnival-stage {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
    linear-gradient(180deg, rgba(37, 22, 54, 0.98) 0%, rgba(30, 42, 30, 0.98) 50%, rgba(29, 18, 45, 0.98) 100%);
}

.mardi-gras-page .parade-glow {
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 249, 229, 0.98), rgba(226, 179, 63, 0.84) 34%, rgba(122, 76, 176, 0.34) 64%, rgba(90, 169, 125, 0.24) 76%, transparent 80%);
  box-shadow: 0 0 0 18px rgba(122, 76, 176, 0.12), 0 0 40px rgba(226, 179, 63, 0.18);
}

.mardi-gras-page .parade-glow::after {
  background: rgba(10, 8, 16, 0.38);
}

.mardi-gras-page .confetti-swarm {
  color: rgba(226, 179, 63, 0.74);
}

.mardi-gras-page .carnival-band span,
.mardi-gras-page .parade-icons span {
  background: rgba(255, 249, 239, 0.08);
  border-color: rgba(186, 154, 224, 0.18);
}

.mardi-gras-page .mardi-wrap.left {
  left: 10px;
}

.mardi-gras-page .mardi-wrap.right {
  right: 10px;
}

.mardi-gras-page .mardi-svg {
  filter: drop-shadow(0 14px 20px rgba(7, 5, 12, 0.32));
}

.mardi-gras-page .bead-string span {
  background: linear-gradient(180deg, rgba(226, 179, 63, 0.82), rgba(122, 76, 176, 0.22));
}

.mardi-gras-page .bead-string span::before {
  background: radial-gradient(circle at 50% 45%, rgba(255, 244, 214, 0.94), rgba(226, 179, 63, 0.76) 48%, rgba(122, 76, 176, 0.1) 78%, transparent 80%);
}

.mardi-gras-page .bead-string::before {
  background: linear-gradient(90deg, rgba(90, 169, 125, 0.18), rgba(226, 179, 63, 0.3), rgba(122, 76, 176, 0.18));
}

body.mardi-gras .celebration {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.mardi-gras-page .celebration-orb {
  background: radial-gradient(circle at 35% 35%, #fff8de, #e2b33f 36%, #7a4cb0 66%, #4a2f73 100%);
  box-shadow: 0 16px 30px rgba(10, 7, 16, 0.32);
}

.mardi-gras-page .celebration h2 {
  color: #fff0b8;
}

.mardi-gras-page .section-header h2,
.mardi-gras-page .intro h1,
.mardi-gras-page .planner-card h3,
.mardi-gras-page .mode-card h3,
.mardi-gras-page .checklist-card h3,
.mardi-gras-page .stat-card strong,
.mardi-gras-page .seo-link-card strong,
.mardi-gras-page .faq-item summary {
  text-wrap: balance;
}

.mardi-gras-page .seo-resource-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
    linear-gradient(135deg, rgba(39, 22, 56, 0.95), rgba(20, 31, 22, 0.95));
}

.mardi-gras-page .faq-item[open] summary {
  color: #e2b33f;
}

.mardi-gras-page .progress-fill {
  background: linear-gradient(90deg, rgba(122, 76, 176, 0.92), rgba(226, 179, 63, 0.92), rgba(90, 169, 125, 0.92));
}

@media (max-width: 900px) {
  .mardi-gras-page .carnival-band {
    width: min(420px, calc(100% - 80px));
  }

  .mardi-gras-page .parade-icons {
    margin-top: 202px;
  }
}

@media (max-width: 720px) {
  .mardi-gras-page .parade-icons {
    grid-template-columns: repeat(3, 1fr);
  }

  .mardi-gras-page .parade-icons span:nth-child(4),
  .mardi-gras-page .parade-icons span:nth-child(5) {
    display: none;
  }
}

@media (max-width: 640px) {
  .mardi-gras-page .carnival-stage {
    min-height: 262px;
  }

  .mardi-gras-page .parade-glow {
    width: 138px;
  }

  .mardi-gras-page .carnival-band {
    top: 132px;
    width: min(344px, calc(100% - 34px));
    gap: 8px;
  }

  .mardi-gras-page .mardi-wrap {
    width: 120px;
  }

  .mardi-gras-page .mardi-wrap.left {
    left: 4px;
  }

  .mardi-gras-page .mardi-wrap.right {
    right: 4px;
  }

  .mardi-gras-page .parade-icons {
    margin-top: 184px;
    width: min(340px, 100%);
  }
}

@media (max-width: 480px) {
  .mardi-gras-page .carnival-band {
    grid-template-columns: repeat(2, 1fr);
    top: 124px;
    width: min(304px, calc(100% - 24px));
  }

  .mardi-gras-page .mardi-wrap.left {
    width: 106px;
    left: 8px;
  }

  .mardi-gras-page .mardi-wrap.right {
    width: 74px;
    right: 6px;
    bottom: 26px;
  }

  .mardi-gras-page .parade-icons {
    width: min(304px, calc(100% - 24px));
  }
}