/* LocalTeams.info public site — translated from the approved Claude Design project
   ("LocalTeams Public Site.dc.html"). One brand system with the admin app. */

:root {
  /* Core palette */
  --lt-navy: oklch(30% 0.09 246);
  --lt-green: oklch(58% 0.15 152);
  --lt-green-hover: oklch(52% 0.14 152);
  --lt-green-mint: oklch(75% 0.13 152);
  --lt-green-disabled: oklch(80% 0.03 152);
  --lt-red: oklch(60% 0.2 25);
  --lt-blue: oklch(52% 0.16 246);
  --lt-blue-hover: oklch(46% 0.16 246);
  --lt-blue-disabled: oklch(80% 0.03 246);
  --lt-kicker-red: oklch(60% 0.18 20);
  --lt-cal: oklch(75% 0.15 60);
  --lt-cal-past: oklch(70% 0.012 240);

  /* Ink scale */
  --lt-ink: oklch(20% 0.02 240);
  --lt-ink-2: oklch(35% 0.02 240);
  --lt-ink-3: oklch(46% 0.02 240);
  --lt-ink-4: oklch(62% 0.014 240);
  --lt-ink-5: oklch(72% 0.012 240);

  /* Surfaces + lines */
  --lt-bg: oklch(97% 0.006 235);
  --lt-surface: oklch(99% 0.003 235);
  --lt-surface-2: oklch(95% 0.008 235);
  --lt-line: oklch(88% 0.014 235);
  --lt-line-2: oklch(92% 0.01 235);
  --lt-line-3: oklch(85% 0.014 235);

  /* Tints */
  --tint-blue-bg: oklch(94% 0.035 246);
  --tint-blue-fg: oklch(40% 0.15 246);
  --tint-blue-line: oklch(85% 0.03 246);
  --tint-green-bg: oklch(94% 0.05 152);
  --tint-green-fg: oklch(40% 0.14 152);
  --tint-green-line: oklch(85% 0.06 152);
  --tint-green-deep: oklch(30% 0.1 152);
  --tint-green-body: oklch(38% 0.09 152);
  --tint-amber-bg: oklch(95% 0.05 85);
  --tint-amber-fg: oklch(48% 0.13 75);
  --tint-amber-line: oklch(85% 0.07 80);
  --tint-violet-bg: oklch(94% 0.03 300);
  --tint-violet-fg: oklch(40% 0.15 300);

  --font-body: 'Public Sans', system-ui, sans-serif;
  --font-head: 'Manrope', sans-serif;
  --font-brand: 'Big Shoulders Display', sans-serif;
  --font-mono: ui-monospace, Menlo, monospace;

  --radius-card: 12px;
  --radius-ctl: 8px;
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--lt-bg);
}

body {
  font-family: var(--font-body);
  color: var(--lt-ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--lt-blue); text-decoration: none; }
a:hover { color: var(--lt-blue-hover); }
button { font-family: inherit; cursor: pointer; }
select, input, textarea { font-family: inherit; }
::selection { background: var(--tint-green-bg); }

main { flex: 1; }

.lt-container { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* ============ Header ============ */
.lt-header {
  background: var(--lt-navy);
  position: sticky;
  top: 0;
  z-index: 40;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.lt-header-inner {
  padding-top: 11px;
  padding-bottom: 11px;
  min-height: 68px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.lt-brand { cursor: pointer; display: flex; align-items: baseline; gap: 9px; flex: 0 0 auto; }
.lt-brand svg { align-self: center; }
.lt-brand-name {
  font-family: var(--font-brand);
  font-weight: 800;
  font-size: 23px;
  letter-spacing: 0.02em;
  color: #fff;
}
.lt-brand-name .accent { color: var(--lt-red); }
.lt-brand-tld { font-family: var(--font-brand); font-weight: 700; font-size: 12px; color: var(--lt-green-mint); }
.lt-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.lt-nav > a {
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.82);
  padding: 9px 13px;
  border-radius: var(--radius-ctl);
}
.lt-nav > a:hover, .lt-nav > a.active { background: rgba(255, 255, 255, 0.1); color: #fff; }
.lt-nav-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.18); margin: 0 10px; }

/* ============ Buttons ============ */
.btn {
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  border-radius: var(--radius-ctl);
  border: none;
  padding: 10px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
}
.btn-green { background: var(--lt-green); color: #fff; }
.btn-green:hover { background: var(--lt-green-hover); color: #fff; }
.btn-blue { background: var(--lt-blue); color: #fff; padding: 11px 20px; }
.btn-blue:hover { background: var(--lt-blue-hover); color: #fff; }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.34); padding: 9px 15px; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.btn-outline { background: transparent; color: var(--lt-ink-2); border: 1px solid var(--lt-line-3); padding: 11px 16px; }
.btn-outline:hover { background: var(--lt-surface-2); color: var(--lt-ink-2); }
.btn-outline-blue { background: transparent; color: var(--lt-blue); border: 1px solid var(--tint-blue-line); padding: 9px 14px; font-size: 12.5px; }
.btn-outline-blue:hover { background: var(--tint-blue-bg); color: var(--lt-blue); }
.btn-outline-green { background: transparent; color: var(--tint-green-deep); border: 1px solid var(--tint-green-line); padding: 11px 16px; }
.btn-outline-green:hover { background: oklch(97% 0.03 152); color: var(--tint-green-deep); }
.btn-lg { font-size: 14.5px; padding: 14px 24px; }
.btn-block { width: 100%; }
.btn[disabled] { cursor: not-allowed; }
.btn-green[disabled] { background: var(--lt-green-disabled); }
.btn-blue[disabled] { background: var(--lt-blue-disabled); }

/* ============ Hero / navy sections ============ */
.hero { background: var(--lt-navy); color: #fff; position: relative; overflow: hidden; }
.hero-stripes::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 11px);
}
.hero-scrim::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12, 14, 20, 0.62), rgba(12, 14, 20, 0.05));
}
.hero > .lt-container { position: relative; z-index: 1; }
.hero h1 {
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}
.hero .lede { color: rgba(255, 255, 255, 0.8); margin: 0; max-width: 66ch; font-size: 15.5px; text-wrap: pretty; }
.hero-back {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.hero-back:hover { color: #fff; }
.hero-back i { font-size: 10px; }

/* ============ Type ============ */
.kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-ink-4);
}
.kicker-mint { color: var(--lt-green-mint); }
.kicker-light { color: rgba(255, 255, 255, 0.6); }
.kicker-red { color: var(--lt-kicker-red); }
.kicker-green { color: var(--tint-green-body); }
.section-title { font-family: var(--font-head); font-size: 27px; font-weight: 800; letter-spacing: -0.015em; margin: 0; }
.muted { color: var(--lt-ink-3); }
.muted-2 { color: var(--lt-ink-4); }

/* ============ Cards ============ */
.card {
  background: var(--lt-surface);
  border: 1px solid var(--lt-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.card-pad { padding: 22px; }
.card-hover { transition: box-shadow 140ms ease, border-color 140ms ease; }
.card-hover:hover { border-color: var(--tint-blue-line); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.09); }

/* ============ Pills ============ */
.pill {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 999px;
  display: inline-block;
  white-space: nowrap;
}
.pill-green-solid { background: var(--lt-green); color: #fff; padding: 5px 11px; letter-spacing: 0.05em; }
.pill-blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.pill-green { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.pill-amber { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.pill-violet { background: var(--tint-violet-bg); color: var(--tint-violet-fg); }
.pill-neutral { background: var(--lt-surface-2); color: var(--lt-ink-3); }
.pill-glass { background: rgba(255, 255, 255, 0.2); color: #fff; }

/* ============ Chips (filters / region pickers) ============ */
.chip {
  font-family: var(--font-head);
  font-size: 12.5px;
  font-weight: 700;
  padding: 8px 13px;
  border-radius: var(--radius-ctl);
  border: 1px solid var(--lt-line-3);
  background: transparent;
  color: var(--lt-ink-3);
  display: inline-block;
  transition: background 140ms ease, color 140ms ease;
}
.chip:hover { color: var(--lt-ink-2); background: var(--lt-surface-2); }
.chip.active { background: var(--tint-blue-bg); color: var(--tint-blue-fg); border-color: var(--tint-blue-line); }
.chip-round { border-radius: 999px; font-size: 13.5px; padding: 10px 17px; }
.chip-light { border-color: rgba(255, 255, 255, 0.28); background: rgba(255, 255, 255, 0.10); color: rgba(255, 255, 255, 0.86); }
.chip-light:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.chip-light.active { background: #fff; color: var(--lt-navy); border-color: #fff; }

/* ============ Filter bar ============ */
.filter-bar {
  padding: 18px 20px;
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 18px;
}
.filter-bar .field { flex: 1 1 160px; }
.filter-bar .field-wide { flex: 2 1 240px; }
.field label { display: block; margin-bottom: 7px; }

/* ============ Trust banner ============ */
.trust-banner {
  background: var(--tint-green-bg);
  border-top: 1px solid var(--tint-green-line);
  border-bottom: 1px solid var(--tint-green-line);
}
.trust-card {
  background: var(--tint-green-bg);
  border: 1px solid var(--tint-green-line);
  border-radius: var(--radius-card);
}
.warn-card {
  background: var(--tint-amber-bg);
  border: 1px solid var(--tint-amber-line);
  border-radius: var(--radius-card);
  color: var(--tint-amber-fg);
}
.info-card {
  background: var(--tint-blue-bg);
  border: 1px solid var(--tint-blue-line);
  border-radius: var(--radius-card);
}

/* ============ Icon tiles ============ */
.icon-tile {
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.icon-tile-blue { background: var(--tint-blue-bg); color: var(--tint-blue-fg); }
.icon-tile-green { background: var(--tint-green-bg); color: var(--tint-green-fg); }
.icon-tile-green-solid { background: var(--lt-green); color: #fff; }
.icon-tile-amber { background: var(--tint-amber-bg); color: var(--tint-amber-fg); }
.icon-tile-violet { background: var(--tint-violet-bg); color: var(--tint-violet-fg); }

/* ============ Event list ============ */
.event-row {
  display: flex;
  gap: 18px;
  align-items: center;
  padding: 17px 20px;
  border-bottom: 1px solid var(--lt-line-2);
  transition: background 140ms ease;
}
.event-row:hover { background: var(--lt-bg); }
/* Date column — calendar tile: a coloured month strip (grey when the date has passed) over the day. */
.event-cal { flex: 0 0 auto; width: 54px; }
.event-cal .tile {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--lt-line-3);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07);
  text-align: center;
  background: #fff;
}
.event-cal .m {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--lt-cal);
  padding: 3px 0 2px;
}
.event-cal.is-past .m { background: var(--lt-cal-past); }
.event-cal .d {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 800;
  line-height: 1.3;
  padding: 1px 0 2px;
  color: var(--lt-ink);
}
.event-cal .dow {
  text-align: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: oklch(58% 0.016 240);
  margin-top: 3px;
}

/* Virtualized events ListView (page/window scroll) — items size naturally to their content.
   Strip the ListView's default chrome so the card owns the border/background and .event-row
   keeps the design. */
.lt-events-listview.e-listview { border: none; background: transparent; border-radius: 0; overflow: visible !important; }
.lt-events-listview .e-list-parent,
.lt-events-listview .e-list-item {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  height: auto !important;
  line-height: normal !important;
  background: transparent !important;
}
.lt-events-listview .e-list-item.e-hover,
.lt-events-listview .e-list-item.e-active,
.lt-events-listview .e-list-item:hover { background: transparent !important; }

/* ============ Placeholder art (photo slots) ============ */
.ph-art {
  background: var(--lt-surface-2) repeating-linear-gradient(45deg, var(--lt-line) 0 1px, transparent 1px 9px);
  position: relative;
}
.ph-note { font-family: var(--font-mono); font-size: 11px; color: var(--lt-ink-4); }

/* ============ Split layouts (detail + sticky aside) ============ */
.split {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 26px;
  align-items: start;
}
.split > aside { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; }
  .split > aside { position: static; }
  .stack-static { position: static !important; }
  #facSplit { grid-template-columns: 1fr !important; }
  #facMapCard { position: static !important; }
}

/* ============ Footer ============ */
.lt-footer { background: var(--lt-navy); color: rgba(255, 255, 255, 0.72); margin-top: auto; }
.lt-footer-grid {
  padding-top: 40px;
  padding-bottom: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 28px;
}
.lt-footer .col-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 12px;
}
.lt-footer .links { display: flex; flex-direction: column; gap: 9px; font-size: 13px; }
.lt-footer .links a { color: rgba(255, 255, 255, 0.76); }
.lt-footer .links a:hover { color: #fff; }
.lt-footer .links .soon { color: rgba(255, 255, 255, 0.4); }
.lt-footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.lt-footer-bottom-inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.55);
}
.lt-footer-bottom-inner a { color: rgba(255, 255, 255, 0.55); }
.lt-footer-bottom-inner a:hover { color: #fff; }

/* ============ Plan cards ============ */
.plan-card { cursor: pointer; padding: 20px 22px; transition: border-color 140ms ease; }
.plan-card:hover { border-color: var(--tint-blue-line); }
.plan-card.selected { border: 2px solid var(--lt-blue); padding: 19px 21px; }
.plan-price { font-family: var(--font-head); font-size: 28px; font-weight: 800; }
.perk-row { display: flex; gap: 10px; align-items: flex-start; }
.perk-row i { font-size: 11px; color: var(--lt-green); margin-top: 4px; }
.perk-row div { font-size: 13px; line-height: 1.45; color: var(--lt-ink-2); }

/* ============ Mode select cards (registration) ============ */
.mode-card { cursor: pointer; border: 1px solid var(--lt-line-3); background: var(--lt-surface); border-radius: 10px; padding: 14px 16px; }
.mode-card.selected { border: 2px solid var(--lt-blue); background: var(--tint-blue-bg); padding: 13px 15px; }
.mode-card .t { font-family: var(--font-head); font-size: 14px; font-weight: 700; margin-bottom: 5px; }
.mode-card .b { font-size: 12.5px; line-height: 1.45; color: var(--lt-ink-3); text-wrap: pretty; }

/* ============ Syncfusion overrides — brand alignment ============ */
.e-control, .e-control * { font-family: var(--font-body); }
.e-input-group.e-control-wrapper,
.e-input-group:not(.e-float-icon-left),
.e-ddl.e-input-group.e-control-wrapper {
  border-radius: var(--radius-ctl);
  font-size: 13.5px;
  background: #fff;
}
.e-input-group input.e-input, .e-input-group .e-input {
  font-size: 13.5px;
  color: var(--lt-ink);
}
.e-checkbox-wrapper .e-frame.e-check { background-color: var(--lt-green); border-color: var(--lt-green); }
.e-checkbox-wrapper .e-checkbox:focus + .e-frame.e-check { background-color: var(--lt-green); }
.e-grid { border-radius: var(--radius-card); border-color: var(--lt-line); font-family: var(--font-body); }
.e-grid .e-headercell { background: var(--lt-surface-2); }
.e-grid .e-headertext {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lt-ink-3);
}
.e-grid .e-rowcell { font-size: 13.5px; color: var(--lt-ink-2); }

/* ============ Misc ============ */
.section { padding-top: 44px; }
.v-divider { width: 1px; height: 26px; background: rgba(255, 255, 255, 0.2); margin: 0 5px; }
.form-errors {
  background: oklch(96% 0.03 25);
  border: 1px solid oklch(85% 0.07 25);
  border-radius: var(--radius-card);
  color: oklch(45% 0.16 25);
  padding: 14px 18px;
  font-size: 13.5px;
}
.form-errors ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }