/* ==========================================================================
   Mwelekeo Insights - glass & gradient theme for the public site.
   Photos under gradient overlays, frosted tiles over a soft brand-colour mesh,
   brand gradient accents. Loaded after app.css on public pages only.
   ========================================================================== */
:root {
  --brand-grad: linear-gradient(90deg, #173a6b 0%, #2160b0 28%, #0fa650 58%, #f07d1a 82%, #fdc50c 100%);
  --tile-bg: rgba(255, 255, 255, .64);
  --tile-edge: rgba(255, 255, 255, .78);
  --tile-hi: linear-gradient(140deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .08) 38%, rgba(255, 255, 255, 0) 60%);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 10px 34px rgba(23, 58, 107, .10), 0 2px 6px rgba(15, 27, 45, .05);
  --mesh: radial-gradient(40% 36% at 6% 10%, rgba(15, 166, 80, .17), transparent 70%), radial-gradient(38% 36% at 94% 6%, rgba(33, 96, 176, .20), transparent 70%),
          radial-gradient(36% 36% at 88% 78%, rgba(240, 125, 26, .13), transparent 70%), radial-gradient(34% 32% at 10% 88%, rgba(253, 197, 12, .16), transparent 70%);
  --photo-overlay: linear-gradient(112deg, rgba(8, 20, 42, .94) 0%, rgba(18, 48, 92, .86) 46%, rgba(10, 120, 66, .62) 100%);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    --tile-bg: rgba(19, 30, 50, .60); --tile-edge: rgba(255, 255, 255, .09);
    --tile-hi: linear-gradient(140deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 45%);
    --tile-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 40px rgba(0, 0, 0, .35);
    --mesh: radial-gradient(40% 36% at 6% 10%, rgba(15, 166, 80, .16), transparent 70%), radial-gradient(38% 36% at 94% 6%, rgba(58, 123, 213, .20), transparent 70%),
            radial-gradient(36% 36% at 88% 78%, rgba(224, 112, 26, .12), transparent 70%), radial-gradient(34% 32% at 10% 88%, rgba(176, 130, 0, .14), transparent 70%);
  }
}
:root[data-theme="dark"] {
  --tile-bg: rgba(19, 30, 50, .60); --tile-edge: rgba(255, 255, 255, .09);
  --tile-hi: linear-gradient(140deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, 0) 45%);
  --tile-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 14px 40px rgba(0, 0, 0, .35);
  --mesh: radial-gradient(40% 36% at 6% 10%, rgba(15, 166, 80, .16), transparent 70%), radial-gradient(38% 36% at 94% 6%, rgba(58, 123, 213, .20), transparent 70%),
          radial-gradient(36% 36% at 88% 78%, rgba(224, 112, 26, .12), transparent 70%), radial-gradient(34% 32% at 10% 88%, rgba(176, 130, 0, .14), transparent 70%);
}

body { background: var(--mesh), var(--bg); background-attachment: fixed; }

/* ---------------------------------------------------------------- frosted tiles */
.card { background: var(--tile-hi), var(--tile-bg); -webkit-backdrop-filter: blur(18px) saturate(165%); backdrop-filter: blur(18px) saturate(165%);
  border: 1px solid var(--tile-edge); box-shadow: var(--tile-shadow); overflow: hidden; }
.card-link { isolation: isolate; }
.card-link::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--brand-grad); opacity: 0; transition: opacity .25s ease; z-index: 3; }
.card-link:hover::before, .card-link:focus-visible::before { opacity: 1; }
.card-link:hover { box-shadow: var(--tile-shadow), 0 18px 44px rgba(23, 58, 107, .16); }
.opt { background: var(--tile-bg); }
.table-wrap { background: var(--tile-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* ---------------------------------------------------------------- poll tiles with photo covers */
.poll-card .poll-cover { position: relative; height: 158px; margin: -22px -22px 6px; border-radius: 0; overflow: hidden; background: var(--brand-grad); flex: none; }
.poll-cover img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.01); transition: transform .7s var(--ease-out); }
.card-link:hover .poll-cover img { transform: scale(1.06); }
.poll-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 36, 0) 25%, rgba(8, 18, 36, .72) 100%), linear-gradient(125deg, rgba(23, 58, 107, .38), rgba(15, 166, 80, .12) 70%); }
.poll-cover-badges { position: absolute; left: 12px; right: 12px; bottom: 11px; z-index: 1; display: flex; gap: 6px; flex-wrap: wrap; }
.poll-cover-badges .badge { background: rgba(255, 255, 255, .92); color: #0f1b2d; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.poll-cover-badges .badge-live { background: #0b8f44; color: #fff; }
.poll-cover-badges .badge-upcoming { background: #c25f0e; color: #fff; }
.poll-cover-badges .badge-sci { background: #2160b0; color: #fff; }

/* ---------------------------------------------------------------- service / about tiles with photo headers */
.tile-photo { position: relative; height: 150px; margin: -22px -22px 0; overflow: hidden; background: var(--brand-grad); }
.tile-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.card-link:hover .tile-photo img { transform: scale(1.06); }
.tile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 18, 36, 0) 40%, rgba(8, 18, 36, .45)), linear-gradient(130deg, rgba(23, 58, 107, .30), rgba(15, 166, 80, .10)); }
.service-card .tile-photo + .pillar { margin-top: -24px; position: relative; z-index: 2; }
.service-card .tile-photo + .pillar .ic { box-shadow: 0 0 0 4px var(--surface), 0 8px 20px rgba(0, 0, 0, .18); }
figure.tile-photo-lg { height: auto; aspect-ratio: 16 / 8; margin: calc(-1 * clamp(22px, 3vw, 34px)) calc(-1 * clamp(22px, 3vw, 34px)) 24px; }

/* ---------------------------------------------------------------- hero over a photograph */
.hero.hero-photo { color: #fff; background: var(--photo-overlay), var(--hero-img) center / cover no-repeat; padding-bottom: clamp(48px, 7vw, 88px); isolation: isolate; }
.hero.hero-photo::before { inset: 0; height: auto; z-index: -1; background: radial-gradient(40% 50% at 85% 20%, rgba(253, 197, 12, .16), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(15, 166, 80, .24), transparent 70%); }
.hero-photo h1 { color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero-photo .lead { color: rgba(255, 255, 255, .9); }
.hero-photo .eyebrow { color: #a7e3c0; }
.hero-photo .hero-stats .num { color: #fff; }
.hero-photo .hero-stats .lbl { color: rgba(255, 255, 255, .78); }
.hero-photo .hero-stats > div { padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-photo .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .10); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.hero-photo .btn-ghost:hover { background: rgba(255, 255, 255, .18); }
.hero-photo .hero-card { --ink: #0f1b2d; --ink-2: #33435a; --muted: #4f5f73; --surface: #ffffff; --surface-2: rgba(15, 27, 45, .08); --line: rgba(15, 27, 45, .10); --line-2: rgba(15, 27, 45, .16);
  background: rgba(255, 255, 255, .82); color: #0f1b2d; border: 1px solid rgba(255, 255, 255, .65); }
.hero-photo .hero-card h3 a { color: #0f1b2d; }
.hero-photo .hero-card .badge { background: rgba(15, 27, 45, .07); color: #33435a; }
.hero-photo .hero-card .badge-live { background: rgba(15, 166, 80, .14); color: #0a6f35; }

/* ---------------------------------------------------------------- page headers over a photograph */
.page-head { position: relative; color: #fff; background: var(--photo-overlay), var(--ph-img, url('../img/photos/skyline-night.webp')) center / cover no-repeat;
  padding: clamp(44px, 7vw, 84px) 0 clamp(32px, 5vw, 56px); margin-bottom: 8px; }
.page-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--brand-grad); }
.page-head h1, .page-head h2 { color: #fff; }
.page-head .lead { color: rgba(255, 255, 255, .88); }
.page-head .eyebrow { color: #a7e3c0; }
.page-head .crumbs, .page-head .crumbs a { color: rgba(255, 255, 255, .8); }
.page-head .muted, .page-head .small.muted { color: rgba(255, 255, 255, .8) !important; }
.page-head .badge { background: rgba(255, 255, 255, .92); color: #0f1b2d; }
.page-head .badge-live { background: #0b8f44; color: #fff; }
.page-head .badge-sci { background: #2160b0; color: #fff; }
.page-head .badge-upcoming { background: #c25f0e; color: #fff; }
.page-head .btn-ghost, .page-head .chip { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .10); }
.page-head .hero-stats .num { color: #fff; }
.page-head .hero-stats .lbl { color: rgba(255, 255, 255, .78); }
.page-head .search-box .input { background: rgba(255, 255, 255, .96); color: #0f1b2d; }
.page-head .search-box .icon { color: #55657a; }

/* ---------------------------------------------------------------- contestant photos */
.avatar { box-shadow: 0 0 0 2px var(--surface); }
.avatar-contestant { width: 48px; height: 48px; font-size: .95rem; }
.avatar-sm { width: 26px; height: 26px; font-size: .62rem; }
.opt .avatar-contestant { width: 52px; height: 52px; }
.avatar-lg { box-shadow: 0 0 0 4px var(--surface), 0 0 0 7px rgba(33, 96, 176, .35), 0 10px 30px rgba(0, 0, 0, .18); }

/* ---------------------------------------------------------------- CTA band and footer over the night skyline */
.cta-band { background: linear-gradient(120deg, rgba(10, 26, 52, .92), rgba(23, 58, 107, .86) 50%, rgba(11, 143, 68, .80)), var(--cta-img, none) center / cover; box-shadow: 0 20px 50px rgba(23, 58, 107, .25); }
.footer { position: relative; background: linear-gradient(180deg, rgba(7, 16, 32, .95), rgba(7, 16, 32, .985)), var(--footer-img, none) center / cover; }
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--brand-grad); }
.footer-logo { display: inline-flex; align-items: center; padding: 12px 18px; margin-bottom: 18px; border-radius: 18px; background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 1px 0 #fff inset, 0 12px 30px rgba(0, 0, 0, .3); transition: transform .2s var(--ease-out); }
.footer-logo:hover { transform: translateY(-2px); text-decoration: none; }
.footer-logo img { height: 44px; width: auto; display: block; filter: none !important; }
.footer .socials a { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .1); }

@media (max-width: 640px) {
  .poll-card .poll-cover { height: 140px; }
  .tile-photo { height: 130px; }
  .hero-photo .hero-stats > div { padding: 10px; }
}
@media (prefers-reduced-transparency: reduce) {
  .card, .hero-photo .hero-card, .poll-cover-badges .badge, .hero-photo .hero-stats > div, .table-wrap { background: var(--surface) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .poll-cover img, .tile-photo img { transition: none; }
  .card-link:hover .poll-cover img, .card-link:hover .tile-photo img { transform: none; }
}
@media print {
  body { background: #fff; }
  .page-head, .hero.hero-photo { background: none !important; color: #000; }
  .page-head h1, .page-head .lead, .hero-photo h1 { color: #000; }
}

/* ------------------------------------------------------------------ WhatsApp chat button */
.wa-fab {
  position: fixed; right: calc(18px + env(safe-area-inset-right)); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; padding: 5px 20px 5px 5px; border-radius: 999px;
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px) saturate(170%); backdrop-filter: blur(18px) saturate(170%);
  border: 1px solid var(--tile-edge); color: var(--ink); font-weight: 650; font-size: .95rem; letter-spacing: -.005em; text-decoration: none !important;
  box-shadow: 0 12px 30px rgba(10, 60, 35, .22), 0 2px 6px rgba(0, 0, 0, .12);
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), box-shadow .22s ease; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.wa-fab-icon { width: 48px; height: 48px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.wa-fab-icon .icon { width: 28px; height: 28px; }
.wa-fab:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(10, 60, 35, .28), 0 3px 8px rgba(0, 0, 0, .14); color: var(--ink); }
.wa-fab:active { transform: scale(.96); transition-duration: .08s; }
.wa-fab:focus-visible { outline: 3px solid var(--focus, #2160b0); outline-offset: 3px; }
@media (max-width: 640px) {
  .wa-fab { padding: 0; gap: 0; border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
  .wa-fab-icon { width: 56px; height: 56px; box-shadow: 0 10px 26px rgba(10, 60, 35, .30), 0 2px 6px rgba(0, 0, 0, .14); }
  .wa-fab-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-transparency: reduce) { .wa-fab { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; } }
@media (prefers-reduced-motion: reduce) { .wa-fab, .wa-fab:hover { transition: none; transform: none; } }
.btn-wa { --b: #0f7d42; gap: 8px; }
.btn-wa .icon { width: 20px; height: 20px; }
.footer li .icon { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }

@media print { .wa-fab { display: none !important; } }