/* Krushi Mangal — km-live.css: countdown strip, join page, organisers wall,
   media kit and draft blocks. Plain CSS so it works even if the Tailwind CDN is slow. */

[hidden] { display: none !important; }
[lang="mr"], :lang(mr) .km-deva { font-family: "Noto Sans Devanagari", "Nunito Sans", system-ui, sans-serif; }

/* Launch flag (CONFIG.LAUNCHED in js/km-live.js) */
html:not(.km-launched) [data-when-launched] { display: none !important; }
html.km-launched [data-before-launch] { display: none !important; }
.km-badge-open { display: inline-block; background: #dce25a; color: #181818; font-weight: 800; border-radius: 999px; padding: 2px 10px; font-size: 14px; margin-right: 6px; }

/* Draft blocks: hidden on the live site until approved (see km-live.js). */
[data-confirm-block] { display: none; }
.km-preview [data-confirm-block] { display: block; outline: 3px dashed #c2410c; outline-offset: 6px; }
.km-draft-badge { display: inline-block; margin: 0 0 12px; padding: 4px 10px; border-radius: 999px; background: #c2410c; color: #fff; font-size: 13px; font-weight: 700; }
.km-confirm { background: #fff3c4; color: #7c2d12; padding: 0 4px; border-radius: 4px; font-weight: 700; }

/* ---------- Expo strip on the home page ---------- */
.km-strip { background: #202e16; color: #f7f8f2; border-bottom: 3px solid #dce25a; }
.km-strip-inner { max-width: 1200px; margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; justify-content: space-between; }
.km-strip-title { font-weight: 800; font-size: 17px; line-height: 1.3; margin: 0; }
.km-strip-when { color: #dce25a; font-weight: 700; font-size: 14px; margin: 2px 0 0; }
.km-strip-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.km-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: 15px; text-decoration: none; border: 2px solid transparent; cursor: pointer; line-height: 1.2; }
.km-btn-gold { background: #dce25a; color: #181818; }
.km-btn-gold:hover, .km-btn-gold:focus-visible { background: #fff; }
.km-btn-ghost { border-color: rgba(247, 248, 242, .6); color: #f7f8f2; background: transparent; }
.km-btn-ghost:hover, .km-btn-ghost:focus-visible { background: #f7f8f2; color: #181818; }
.km-btn-green { background: #35451f; color: #fff; }
.km-btn-green:hover, .km-btn-green:focus-visible { background: #202e16; }
.km-btn-wa { background: #1f7a3d; color: #fff; }
.km-btn-outline { border-color: #35451f; color: #35451f; background: #fff; }
.km-btn:focus-visible, .km-tab:focus-visible, .km-field:focus-visible { outline: 3px solid #dce25a; outline-offset: 2px; }

/* Countdown: fixed sizes so nothing shifts while it fills in. */
.km-cd { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.km-cd-lead { font-size: 14px; opacity: .9; }
.km-cd-days { font-size: 26px; font-weight: 800; color: #dce25a; display: inline-block; min-width: 2.2ch; text-align: right; }
.km-cd-unit { font-size: 14px; font-weight: 700; }
.km-cd-clock { font-size: 15px; font-weight: 700; display: inline-block; min-width: 8ch; opacity: .9; }
@media (max-width: 640px) {
  .km-strip-inner { padding: 10px 16px 12px; }
  .km-strip-title { font-size: 16px; }
  .km-strip-actions { width: 100%; }
  .km-strip-actions .km-btn { flex: 1 1 140px; }
}

/* ---------- join.html ---------- */
.km-join-hero { background: #202e16; color: #f7f8f2; }
.km-join-hero .km-wrap { padding-top: 28px; padding-bottom: 28px; }
.km-wrap { max-width: 1200px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.km-narrow { max-width: 720px; }
.km-eyebrow { color: #dce25a; font-weight: 700; font-size: 14px; margin: 0; }
.km-h1 { font-size: clamp(28px, 6vw, 44px); font-weight: 800; line-height: 1.15; margin: 8px 0 0; }
.km-lede { margin: 10px 0 0; font-size: 17px; line-height: 1.6; color: rgba(247, 248, 242, .9); }
.km-hero-cd { margin-top: 14px; }

.km-card { background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 20px; padding: 20px; }
@media (min-width: 640px) { .km-card { padding: 28px; } }
.km-tabs { display: flex; gap: 6px; background: #eef1e7; padding: 6px; border-radius: 999px; margin: -40px 0 18px; position: relative; }
.km-tab { flex: 1; min-height: 48px; border: 0; border-radius: 999px; background: transparent; color: #202e16; font-weight: 800; font-size: 16px; cursor: pointer; padding: 8px 10px; }
.km-tab[aria-selected="true"] { background: #35451f; color: #fff; }
.km-h2 { font-size: 22px; font-weight: 800; color: #181818; margin: 0; line-height: 1.3; }
.km-p { color: #3d3d3d; font-size: 16px; line-height: 1.6; margin: 6px 0 0; }
.km-note { color: #5c4a00; background: #fbf8d8; border-radius: 12px; padding: 10px 12px; font-size: 14px; margin: 12px 0 0; }
.km-grid { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 640px) { .km-grid-2 { grid-template-columns: 1fr 1fr; } }
.km-label { display: block; font-weight: 700; font-size: 15px; color: #181818; margin-bottom: 6px; }
.km-opt { font-weight: 500; color: #555; font-size: 13px; }
.km-req { color: #b91c1c; }
.km-field { width: 100%; min-height: 48px; border: 1.5px solid #9aa58a; border-radius: 12px; background: #fff; padding: 10px 14px; font-size: 16px; color: #181818; }
textarea.km-field { min-height: 140px; resize: vertical; line-height: 1.5; }
.km-help { font-size: 13px; color: #555; margin-top: 4px; display: flex; justify-content: space-between; gap: 8px; }
.km-consent { font-size: 13px; color: #444; line-height: 1.5; margin: 14px 0 0; }
.km-consent a { color: #35451f; font-weight: 700; text-decoration: underline; }
.km-success { text-align: center; padding: 28px 8px; }
.km-success-icon { width: 64px; height: 64px; border-radius: 50%; background: #f0f3e8; color: #35451f; display: grid; place-items: center; font-size: 30px; margin: 0 auto; }
.km-live { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.km-live-item { background: rgba(220, 226, 90, .15); border: 1px solid rgba(220, 226, 90, .5); border-radius: 14px; padding: 8px 14px; display: inline-flex; align-items: baseline; gap: 8px; }
.km-live-num { font-size: 24px; font-weight: 800; color: #dce25a; font-variant-numeric: tabular-nums; }
.km-section { padding: 36px 0; }
.km-section-alt { background: #eef1e7; }
.km-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* ---------- organisers wall ---------- */
.km-orgs { display: grid; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .km-orgs { grid-template-columns: 1fr 1fr; } }
.km-org { display: flex; align-items: center; gap: 16px; background: #fff; border: 1px solid rgba(0, 0, 0, .08); border-radius: 18px; padding: 16px; text-decoration: none; color: #181818; min-height: 104px; }
.km-org:hover, .km-org:focus-visible { border-color: #35451f; }
.km-org img { width: 72px; height: 72px; object-fit: contain; flex: 0 0 72px; border-radius: 12px; background: #fff; }
.km-org-name { font-weight: 800; font-size: 16px; line-height: 1.35; margin: 0; }
.km-org-role { font-size: 13px; color: #4a5a32; font-weight: 700; margin: 2px 0 0; }

/* ---------- media kit ---------- */
.km-kit { display: grid; gap: 16px; margin-top: 18px; }
@media (min-width: 900px) { .km-kit { grid-template-columns: 1fr 1fr; } }
.km-dl { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.km-dl img { width: 56px; height: 56px; object-fit: contain; background: #f7f8f2; border-radius: 10px; }
.km-dl a { color: #35451f; font-weight: 700; text-decoration: underline; }
.km-facts { width: 100%; border-collapse: collapse; font-size: 15px; }
.km-facts th { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; color: #35451f; width: 32%; }
.km-facts td { padding: 8px 0; line-height: 1.5; }
.km-facts tr + tr th, .km-facts tr + tr td { border-top: 1px solid rgba(0, 0, 0, .08); }
@media print {
  #site-header, #site-footer, .km-noprint, [data-to-top], [data-toast-stack] { display: none !important; }
}

/* design.css pads every main > section (100/72/64 px). The new blocks set their own,
   tighter spacing so the forms sit higher on a phone. design.css loads after this file,
   hence the extra specificity. */
main > section.km-strip, main > section.km-join-hero { padding: 0 !important; }
main > section.km-section { padding-top: 36px !important; padding-bottom: 36px !important; }
main > section[data-tabs] { padding-top: 0 !important; padding-bottom: 8px !important; }

/* Home: the strip sits above the floating header (design.css positions the header absolute). */
.km-home-stage { position: relative; }