/* ==========================================================================
   sermtc.org — Mar Thoma Church, South East Region
   Layered on top of Bootstrap 5. Bootstrap handles the grid, the modal and
   form plumbing; everything visual below is ours.
   ========================================================================== */

:root {
  /* Navy — the primary voice of the site */
  --navy-900: #081b31;
  --navy-800: #0c2340;
  --navy-700: #0f2a4a;
  --navy-600: #16385f;
  --navy-500: #234a76;
  --navy-300: #7d94b3;
  --navy-100: #dde5f0;
  --navy-050: #f2f6fb;

  /* Gold — used sparingly, for rules, accents and small caps labels */
  --gold-600: #8d6f18;     /* 4.75:1 on white — used for eyebrow labels */
  --gold-500: #c9a227;
  --gold-400: #ddb949;
  --gold-100: #f7eecf;

  /* Maroon — reserved for the Kalamela event identity */
  --maroon-700: #6d1f2c;
  --maroon-600: #8a2734;
  --maroon-100: #f6e7e9;

  --ink:        #1b2430;
  --ink-soft:   #4a5768;
  --ink-faint:  #697388;   /* 4.76:1 on white, 4.55:1 on --paper-warm */
  --line:       #e3e8f0;
  --line-soft:  #eef1f7;
  --paper:      #ffffff;
  --paper-warm: #f8fafc;

  --ok-600:   #1d6f47;
  --ok-100:   #e3f3ea;
  --warn-600: #8a5a06;
  --warn-100: #fdf1da;
  --bad-600:  #a32b2b;
  --bad-100:  #fbe8e8;

  --radius-sm: 8px;
  --radius:    14px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(12, 35, 64, .06), 0 1px 3px rgba(12, 35, 64, .04);
  --shadow:    0 2px 4px rgba(12, 35, 64, .05), 0 8px 24px rgba(12, 35, 64, .07);
  --shadow-lg: 0 4px 8px rgba(12, 35, 64, .06), 0 20px 48px rgba(12, 35, 64, .12);

  --font-body:  "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-head:  "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-ml:    "Noto Sans Malayalam", "Manjari", "Meera", var(--font-body);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 1.0625rem;      /* 17px — this site is read by all ages */
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .font-head {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--navy-800);
  letter-spacing: -0.01em;
  line-height: 1.22;
}

h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.25rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }

p { color: var(--ink-soft); }
p.lead { font-size: 1.15rem; color: var(--ink-soft); }

a { color: var(--navy-600); text-underline-offset: .18em; }
a:hover { color: var(--navy-800); }

/* Malayalam runs. Malayalam glyphs are tall and need more room than Latin. */
.ml, [lang="ml"] {
  font-family: var(--font-ml);
  line-height: 1.9;
  font-size: 1.02em;
}

/* Small-caps eyebrow label, gold. Used above section headings. */
.eyebrow {
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: .5rem;
  display: block;
}
.eyebrow-light { color: var(--gold-400); }

/* A short gold rule, the one recurring ornament on the site. */
.rule-gold {
  width: 56px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  margin: 1.1rem 0;
}
.rule-gold-center { margin-left: auto; margin-right: auto; }

.section       { padding: clamp(3rem, 7vw, 5.5rem) 0; }
.section-tight { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.section-warm  { background: var(--paper-warm); }
.section-navy  { background: var(--navy-800); color: #dbe4f0; }
.section-navy h2, .section-navy h3 { color: #fff; }
.section-navy p { color: #b6c4d8; }

.text-ink-soft { color: var(--ink-soft) !important; }
.measure { max-width: 68ch; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: .68rem 1.4rem;
  transition: transform .12s ease, box-shadow .16s ease, background-color .16s ease;
}
.btn:active { transform: translateY(1px); }

.btn-navy {
  background: var(--navy-700);
  border: 1px solid var(--navy-700);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-navy:hover, .btn-navy:focus { background: var(--navy-800); border-color: var(--navy-800); color: #fff; }

.btn-outline-navy {
  background: transparent;
  border: 1.5px solid var(--navy-300);
  color: var(--navy-700);
}
.btn-outline-navy:hover { background: var(--navy-050); border-color: var(--navy-600); color: var(--navy-800); }

.btn-gold {
  background: var(--gold-500);
  border: 1px solid var(--gold-500);
  color: var(--navy-900);
  box-shadow: var(--shadow-sm);
}
.btn-gold:hover, .btn-gold:focus { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }

.btn-maroon {
  background: var(--maroon-600);
  border: 1px solid var(--maroon-600);
  color: #fff;
}
.btn-maroon:hover { background: var(--maroon-700); border-color: var(--maroon-700); color: #fff; }

.btn-on-dark {
  background: rgba(255,255,255,.08);
  border: 1.5px solid rgba(255,255,255,.35);
  color: #fff;
  backdrop-filter: blur(2px);
}
.btn-on-dark:hover { background: rgba(255,255,255,.16); border-color: #fff; color: #fff; }

.btn-lg { padding: .92rem 2rem; font-size: 1.06rem; }

/* The one very large call to action, on the Kalamela page. */
.btn-register-xl {
  font-size: clamp(1.1rem, .95rem + .7vw, 1.4rem);
  padding: 1.15rem 3rem;
  border-radius: 12px;
  letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(201, 162, 39, .34);
}

:focus-visible {
  outline: 3px solid var(--gold-500);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */

.topbar {
  background: var(--navy-900);
  color: #9fb3ce;
  font-size: .8rem;
  letter-spacing: .04em;
  padding: .4rem 0;
}
.topbar a { color: #c3d3e8; text-decoration: none; }
.topbar a:hover { color: #fff; }

.site-nav {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(12,35,64,.02);
}
.site-nav .navbar-brand { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; }
.site-nav .brand-mark { width: 46px; height: 46px; object-fit: contain; flex: none; }
.site-nav .brand-text { line-height: 1.16; }
.site-nav .brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--navy-800);
  display: block;
}
.site-nav .brand-sub {
  font-size: .72rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gold-600);
  font-weight: 700;
}

.site-nav .nav-link {
  font-weight: 600;
  font-size: .96rem;
  color: var(--ink-soft);
  padding: .55rem .9rem !important;
  border-radius: 6px;
}
.site-nav .nav-link:hover { color: var(--navy-800); background: var(--navy-050); }
.site-nav .nav-link.active { color: var(--navy-800); }
.site-nav .nav-link.active::after {
  content: ""; display: block; height: 2.5px; border-radius: 2px;
  background: var(--gold-500); margin-top: .3rem;
}

/* Seven items on a narrow desktop: keep every label on one line. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .site-nav .nav-link { padding: .55rem .5rem !important; white-space: nowrap; }
  .site-nav .nav-cta { margin-left: .5rem !important; }
}

@media (max-width: 991.98px) {
  .site-nav .nav-link.active::after { display: none; }
  .site-nav .nav-link.active { background: var(--navy-050); }
  .site-nav .navbar-nav { padding: .5rem 0 .75rem; }
  .site-nav .nav-cta { margin-top: .5rem; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 15% -10%, rgba(35,74,118,.75), transparent 60%),
    radial-gradient(900px 480px at 92% 8%, rgba(109,31,44,.42), transparent 62%),
    linear-gradient(168deg, var(--navy-800) 0%, var(--navy-900) 100%);
  color: #fff;
  padding: clamp(3.5rem, 9vw, 7rem) 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

/* A faint cross motif, set low so it reads as texture rather than decoration. */
.hero::after {
  content: "";
  position: absolute;
  right: -60px; top: 50%;
  width: 420px; height: 420px;
  transform: translateY(-50%);
  background:
    linear-gradient(to right, rgba(201,162,39,.09) 0 100%) 50% 0 / 34px 100% no-repeat,
    linear-gradient(to bottom, rgba(201,162,39,.09) 0 100%) 0 33% / 100% 34px no-repeat;
  pointer-events: none;
}
@media (max-width: 767.98px) { .hero::after { display: none; } }

.hero h1 { color: #fff; margin-bottom: .35rem; }
.hero .hero-region {
  font-family: var(--font-head);
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2.1rem);
  color: var(--gold-400);
  font-weight: 600;
  display: block;
}
.hero-tagline {
  font-size: clamp(.9rem, .82rem + .3vw, 1.05rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9db3d0;
  font-weight: 600;
  margin-top: 1.4rem;
}
.hero-tagline .sep { color: var(--gold-500); margin: 0 .55rem; }

/* Featured Kalamela panel inside the hero */
.hero-feature {
  position: relative;
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(201,162,39,.35);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  backdrop-filter: blur(8px);
  box-shadow: 0 18px 50px rgba(0,0,0,.28);
}
.hero-feature .feature-badge {
  display: inline-block;
  background: var(--gold-500);
  color: var(--navy-900);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: .3rem .7rem;
  border-radius: 999px;
  margin-bottom: .9rem;
}
.hero-feature h2 {
  color: #fff;
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  margin-bottom: .9rem;
}
.hero-feature .feature-meta {
  list-style: none; padding: 0; margin: 0 0 1.4rem;
  display: grid; gap: .55rem;
}
.hero-feature .feature-meta li {
  display: flex; align-items: flex-start; gap: .65rem;
  color: #cfdbeb; font-size: .97rem;
}
.hero-feature .feature-meta .ico { color: var(--gold-400); flex: none; margin-top: .15rem; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card-soft {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  height: 100%;
}
.card-soft:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--navy-100); }
.card-soft .card-body { padding: 1.6rem; }

.card-static:hover { transform: none; box-shadow: var(--shadow-sm); }

/* Competition category card */
.category-card { position: relative; overflow: hidden; }
.category-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: linear-gradient(180deg, var(--gold-500), var(--gold-400));
}
.category-card .card-body { padding-left: 1.9rem; }
.category-card .cat-index {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold-600);
  letter-spacing: .08em;
}
.category-card h3 { margin: .15rem 0 .1rem; font-size: 1.28rem; }
.category-card .cat-name-ml {
  color: var(--ink-faint);
  font-size: .96rem;
  margin-bottom: .9rem;
  display: block;
}

.song-list { list-style: none; padding: 0; margin: 0 0 1.1rem; }
.song-list li {
  padding: .7rem .95rem;
  background: var(--navy-050);
  border-left: 3px solid var(--navy-100);
  border-radius: 0 6px 6px 0;
  margin-bottom: .5rem;
  font-size: .97rem;
  color: var(--ink);
}
.song-list .song-ref {
  display: block;
  font-size: .76rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 700;
  margin-bottom: .15rem;
}

.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: .48rem;
  font-size: .95rem;
  color: var(--ink-soft);
}
.rule-list li::before {
  content: ""; position: absolute; left: .35rem; top: .62em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--gold-500);
}
.rule-list.rule-no li::before {
  content: "×"; left: .1rem; top: -.06em;
  width: auto; height: auto; border-radius: 0; background: none;
  color: var(--bad-600); font-weight: 700; font-size: 1.05rem;
}

.pill {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .04em;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--navy-050); color: var(--navy-600);
  border: 1px solid var(--navy-100);
}
.pill-gold   { background: var(--gold-100); color: var(--gold-600); border-color: #ecdca9; }
.pill-maroon { background: var(--maroon-100); color: var(--maroon-700); border-color: #ecd0d4; }

/* Ministry placeholder cards */
.ministry-card { text-align: left; }
.ministry-card .ministry-icon {
  width: 44px; height: 44px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--navy-050); color: var(--navy-600);
  margin-bottom: .9rem;
}
.ministry-card h3 { font-size: 1.12rem; margin-bottom: .3rem; }
.ministry-card p { font-size: .93rem; margin-bottom: .9rem; }
.ministry-card.is-live { border-color: var(--gold-400); }
.ministry-card.is-live .ministry-icon { background: var(--gold-100); color: var(--gold-600); }


/* An event inside its ministry's card (homepage, ministry pages) */
.event-block { border-top: 1px solid var(--line); padding: 1rem 0 .25rem; margin-top: .5rem; }
.event-block h4 { font-size: 1.05rem; margin-bottom: .45rem; color: var(--navy-800); }
.event-meta { list-style: none; padding: 0; margin: 0 0 .9rem; display: grid; gap: .3rem; font-size: .93rem; }
.event-meta li { display: flex; align-items: flex-start; gap: .5rem; }
.event-meta i { color: var(--gold-600); margin-top: .15rem; }

/* Ministries / Events menus */
.site-nav .dropdown-menu { border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); padding: .4rem; }
.site-nav .dropdown-item { border-radius: 6px; padding: .45rem .75rem; font-weight: 600; color: var(--ink-soft); }
.site-nav .dropdown-item.active, .site-nav .dropdown-item:active { background: var(--navy-050); color: var(--navy-800); }
.soon-tag {
  font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); background: var(--line-soft);
  padding: .25rem .6rem; border-radius: 999px;
}

/* Leadership */
.leader-row {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--line-soft);
}
.leader-row:last-child { border-bottom: 0; }
.leader-role {
  flex: 0 0 11rem;
  font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold-600);
}
.leader-name { font-weight: 600; color: var(--navy-800); font-size: 1.04rem; }
@media (max-width: 575.98px) {
  .leader-row { display: block; padding: .7rem 0; }
  .leader-role { margin-bottom: .1rem; }
}

/* Fee table */
.fee-table { width: 100%; }
.fee-table th, .fee-table td { padding: .85rem 0; border-bottom: 1px solid var(--line); }
.fee-table th { font-weight: 600; color: var(--ink); text-align: left; }
.fee-table td { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--navy-800); }
.fee-table .fee-amount { font-size: 1.15rem; }
.fee-table tr:last-child th, .fee-table tr:last-child td { border-bottom: 0; }

/* Callout */
.callout {
  border-left: 4px solid var(--gold-500);
  background: var(--gold-100);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 1.15rem 1.35rem;
}
.callout-navy  { border-left-color: var(--navy-600); background: var(--navy-050); }
.callout-maroon{ border-left-color: var(--maroon-600); background: var(--maroon-100); }
.callout p:last-child { margin-bottom: 0; }

/* Deadline banner */
.deadline-bar {
  background: var(--maroon-700);
  color: #fff;
  padding: .85rem 0;
  font-weight: 600;
  font-size: .97rem;
}
.deadline-bar a { color: var(--gold-400); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer { background: var(--navy-900); color: #93a8c4; padding: 3.5rem 0 0; }
.site-footer h4 {
  color: #fff; font-family: var(--font-body); font-size: .78rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; margin-bottom: 1rem;
}
.site-footer a { color: #b8c8de; text-decoration: none; }
.site-footer a:hover { color: var(--gold-400); text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .5rem; font-size: .94rem; }
.site-footer .footer-brand { display: flex; gap: .9rem; align-items: flex-start; }
.site-footer .footer-brand img { width: 52px; height: 52px; object-fit: contain; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  margin-top: 2.5rem; padding: 1.3rem 0;
  font-size: .85rem; color: #7b8fab;
}

/* --------------------------------------------------------------------------
   Registration wizard
   -------------------------------------------------------------------------- */

.wizard-head { background: var(--navy-800); color: #fff; padding: 2rem 0 0; }
.wizard-head h1 { color: #fff; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); }
.wizard-head p { color: #a9bdd8; }

/* Step rail. Horizontal on desktop, compact scroller on phones. */
.steps {
  display: flex;
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  gap: .25rem;
}
.steps li { flex: 1 1 0; min-width: 0; }
.steps .step-inner {
  display: block; text-align: center; padding: .55rem .3rem 1rem;
  color: #7f97b8; font-size: .78rem; font-weight: 600;
  letter-spacing: .04em; text-decoration: none;
  border-bottom: 3px solid rgba(255,255,255,.12);
  transition: color .15s ease, border-color .15s ease;
}
.steps .step-num {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,.1); color: #cfdcec;
  font-size: .88rem; font-weight: 700; margin-bottom: .4rem;
}
.steps .is-done  .step-inner { color: #cfdcec; border-bottom-color: rgba(201,162,39,.55); }
.steps .is-done  .step-num   { background: rgba(201,162,39,.24); color: var(--gold-400); }
.steps .is-active .step-inner{ color: #fff; border-bottom-color: var(--gold-500); }
.steps .is-active .step-num  { background: var(--gold-500); color: var(--navy-900); }
.steps a.step-inner:hover { color: #fff; }
.steps .step-label { display: block; }

@media (max-width: 575.98px) {
  .steps .step-label { font-size: .66rem; letter-spacing: 0; }
  .steps .step-num { width: 26px; height: 26px; font-size: .8rem; }
  .steps .step-inner { padding: .5rem .12rem .8rem; }
}

.wizard-body { background: var(--paper-warm); padding: 2.25rem 0 4rem; min-height: 60vh; }

.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: clamp(1.25rem, 3vw, 2.1rem);
}
.panel + .panel { margin-top: 1.25rem; }
.panel-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line-soft); }
.panel-head h2 { font-size: 1.35rem; margin-bottom: .25rem; }
.panel-head p  { margin: 0; font-size: .95rem; }

/* Forms — generous touch targets, because most secretaries will use a phone */
.form-label { font-weight: 600; font-size: .92rem; color: var(--navy-800); margin-bottom: .35rem; }
.form-label .req { color: var(--bad-600); }
.form-text { font-size: .85rem; color: var(--ink-faint); }

.form-control, .form-select {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: .7rem .9rem;
  font-size: 1rem;
  min-height: 48px;
  color: var(--ink);
  background-color: #fff;
}
.form-control:focus, .form-select:focus {
  border-color: var(--navy-500);
  box-shadow: 0 0 0 3px rgba(35,74,118,.14);
}
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bad-600); }
.invalid-feedback { font-size: .86rem; font-weight: 500; }

.form-check-input { width: 1.2em; height: 1.2em; margin-top: .18em; border-color: var(--navy-300); }
.form-check-input:checked { background-color: var(--navy-700); border-color: var(--navy-700); }
.form-check-label { font-size: .97rem; }

/* Participant rows */
.participant-row {
  background: var(--paper-warm);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: .85rem;
}
.participant-row .row-index {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--navy-700); color: #fff;
  font-size: .82rem; font-weight: 700; flex: none;
}
.btn-remove-row {
  border: 1px solid var(--line); background: #fff; color: var(--bad-600);
  border-radius: 6px; width: 40px; height: 40px;
  display: grid; place-items: center; flex: none;
  transition: background .15s ease;
}
.btn-remove-row:hover { background: var(--bad-100); border-color: #f0c9c9; }
.btn-remove-row:disabled { opacity: .35; cursor: not-allowed; }

/* Event assignment */
.event-participant {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 1rem;
  overflow: hidden;
}
.event-participant-head {
  background: var(--navy-050);
  padding: .8rem 1.1rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
}
.event-participant-head .p-name { font-weight: 700; color: var(--navy-800); }
.event-participant-head .p-gender {
  font-size: .74rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); font-weight: 700;
}
.event-count {
  font-size: .8rem; font-weight: 700;
  padding: .2rem .6rem; border-radius: 999px;
  background: #fff; border: 1px solid var(--line); color: var(--ink-soft);
}
.event-count.is-full   { background: var(--warn-100); color: var(--warn-600); border-color: #eedcb6; }
.event-count.is-over   { background: var(--bad-100);  color: var(--bad-600);  border-color: #f0c9c9; }
.event-participant-body { padding: 1rem 1.1rem; }

/* Checkbox styled as a tappable tile */
.event-option { position: relative; margin-bottom: .55rem; }

/* The real checkbox is clipped rather than sized to zero, so it stays
   focusable and stays in the accessibility tree. width/height:0 or
   display:none would hide it from screen readers and from Tab. */
.event-option input {
  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;
}
.event-option label {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem .9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: .95rem;
  min-height: 48px;
  transition: border-color .14s ease, background-color .14s ease;
  background: #fff;
}
.event-option label:hover { border-color: var(--navy-300); background: var(--navy-050); }
.event-option input:checked + label {
  border-color: var(--navy-600);
  background: var(--navy-050);
  box-shadow: inset 0 0 0 1px var(--navy-600);
}
.event-option input:focus-visible + label { outline: 3px solid var(--gold-500); outline-offset: 2px; }
.event-option input:disabled + label { opacity: .48; cursor: not-allowed; background: var(--line-soft); }
.event-option .opt-box {
  width: 20px; height: 20px; border-radius: 4px; flex: none;
  border: 1.5px solid var(--navy-300); background: #fff;
  display: grid; place-items: center;
}
.event-option input:checked + label .opt-box { background: var(--navy-700); border-color: var(--navy-700); }
.event-option input:checked + label .opt-box::after {
  content: ""; width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.event-option .opt-fee { margin-left: auto; font-size: .84rem; color: var(--ink-faint); font-weight: 600; }
.event-option .opt-full {
  margin-left: auto; font-size: .74rem; font-weight: 700;
  color: var(--warn-600); text-transform: uppercase; letter-spacing: .06em;
}

/* Group entry blocks */
.group-block {
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.group-block.is-on { border-color: var(--navy-500); }
.group-block-head {
  padding: 1rem 1.15rem;
  display: flex; align-items: flex-start; gap: .85rem;
  background: var(--paper-warm);
}
.group-block.is-on .group-block-head { background: var(--navy-050); }
.group-block-head h3 { font-size: 1.1rem; margin: 0 0 .15rem; }
.group-block-head .g-sub { font-size: .88rem; color: var(--ink-faint); margin: 0; }
.group-block-body { padding: 1.15rem; border-top: 1px solid var(--line); }

.member-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: .5rem;
}
.member-count {
  font-size: .9rem; font-weight: 700;
  padding: .45rem .85rem; border-radius: var(--radius-sm);
  display: inline-block;
}
.member-count.ok   { background: var(--ok-100);  color: var(--ok-600); }
.member-count.warn { background: var(--warn-100); color: var(--warn-600); }
.member-count.bad  { background: var(--bad-100);  color: var(--bad-600); }

/* Review / summary */
.summary-table { width: 100%; font-size: .96rem; }
.summary-table th, .summary-table td { padding: .75rem .5rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.summary-table thead th {
  font-size: .74rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 2px solid var(--navy-100); font-weight: 700;
}
.summary-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.summary-table tfoot td, .summary-table tfoot th {
  border-top: 2px solid var(--navy-700); border-bottom: 0;
  font-weight: 700; font-size: 1.08rem; color: var(--navy-800);
  padding-top: .95rem;
}

.total-card {
  background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
  color: #fff; border-radius: var(--radius);
  padding: 1.6rem; box-shadow: var(--shadow);
}
.total-card .total-label {
  font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-400); font-weight: 700;
}
.total-card .total-value {
  font-family: var(--font-head); font-size: 2.5rem; font-weight: 700;
  line-height: 1.1; margin: .3rem 0 .1rem;
}
.total-card .total-note { font-size: .86rem; color: #a9bdd8; }

/* Confirmation */
.confirm-hero { background: var(--navy-800); color: #fff; padding: 3rem 0; }
.confirm-check {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--ok-600); display: grid; place-items: center;
  margin: 0 auto 1.2rem; box-shadow: 0 0 0 8px rgba(29,111,71,.18);
}
.reg-number-box {
  background: rgba(255,255,255,.07);
  border: 1.5px dashed rgba(201,162,39,.55);
  border-radius: var(--radius);
  padding: 1.35rem 1.75rem; display: inline-block;
}
.reg-number-box .rn-label {
  font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--gold-400); font-weight: 700;
}
.reg-number-box .rn-value {
  font-family: var(--font-head); font-size: clamp(1.7rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 700; letter-spacing: .06em; color: #fff; line-height: 1.2;
}

/* --------------------------------------------------------------------------
   Status badges
   -------------------------------------------------------------------------- */

.badge-status {
  font-size: .74rem; font-weight: 700; letter-spacing: .05em;
  padding: .32rem .7rem; border-radius: 999px; display: inline-block;
}
.badge-status-submitted { background: var(--navy-050); color: var(--navy-600); border: 1px solid var(--navy-100); }
.badge-status-review    { background: var(--warn-100); color: var(--warn-600); border: 1px solid #eedcb6; }
.badge-status-approved  { background: var(--ok-100);   color: var(--ok-600);   border: 1px solid #c6e3d2; }
.badge-status-cancelled { background: var(--bad-100);  color: var(--bad-600);  border: 1px solid #f0c9c9; }

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-nav, .topbar, .site-footer, .no-print,
  .steps, .deadline-bar, .btn { display: none !important; }

  body { font-size: 11.5pt; color: #000; background: #fff; }
  .wizard-body, .section-warm, .panel { background: #fff !important; }
  .panel { border: 1px solid #999; box-shadow: none; border-radius: 0; }
  .confirm-hero { background: #fff !important; color: #000 !important; padding: 0 0 1rem; }
  .confirm-hero h1, .reg-number-box .rn-value { color: #000 !important; }
  .reg-number-box { border: 2px solid #000; }
  .reg-number-box .rn-label { color: #444 !important; }
  .total-card { background: #fff !important; color: #000 !important; border: 2px solid #000; }
  .total-card .total-label, .total-card .total-note { color: #333 !important; }
  a[href]::after { content: ""; }
  .card-soft, .panel { break-inside: avoid; }
  table { break-inside: auto; }
  tr { break-inside: avoid; }
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Touch targets
   Audited at 375x812: the nav toggler, the confirmation checkboxes and the
   footer link lists all measured under the 44x44 minimum. The visual weight
   of each element is unchanged — only the hit area grows.
   -------------------------------------------------------------------------- */

.navbar-toggler {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Bootstrap's checkbox is 20px. The row is what people actually tap, so give
   the whole row the minimum height and let the label fill it. */
.form-check:has(.form-check-input) { min-height: 44px; }

/* inline-block, NOT inline-flex: flex layout discards the whitespace between
   inline children, so "<strong>Approve</strong> this participant" would render
   as "Approvethis participant". */
.form-check .form-check-label {
  display: inline-block;
  min-height: 28px;
  padding-top: .12rem;
  cursor: pointer;
}
.form-check-input { cursor: pointer; }

/* The group on/off checkbox sits alone in a flex row, so it needs width too. */
.group-block-head .form-check {
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Footer and in-page link lists: 21px of text becomes a 44px row. */
.site-footer li a,
.site-footer p a,
.site-footer .footer-bottom a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.site-footer li { margin-bottom: 0; }

/* Anything that acts as a control gets the pointer cursor. */
a[href], button:not(:disabled), label[for], summary,
[role="button"], .btn:not(:disabled) { cursor: pointer; }
button:disabled, .btn.disabled, .btn:disabled { cursor: not-allowed; }