/* Public KVSS website theme. Application screens continue to use kvss.css. */
:root {
  --kvss-ink: #16233b;
  --kvss-muted: #61708a;
  --kvss-brand: #9f2348;
  --kvss-brand-dark: #741436;
  --kvss-accent: #f2b84b;
  --kvss-surface: #ffffff;
  --kvss-soft: #fff8f1;
  --kvss-line: #eadfd5;
  --kvss-shadow: 0 18px 50px rgba(58, 38, 36, .10);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--kvss-ink);
  background: linear-gradient(180deg, #fffaf6 0%, #fff 48%, #f8fbff 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.65;
}
a { color: var(--kvss-brand); transition: color .2s ease, background .2s ease, transform .2s ease; }
a:hover { color: var(--kvss-brand-dark); }
img { max-width: 100%; height: auto; }

.w3-top { position: relative !important; z-index: 10; box-shadow: 0 8px 28px rgba(33, 28, 44, .10); }
.w3-top > div:first-child,
.w3-top #home {
  height: auto !important;
  min-height: 88px;
  padding: 18px clamp(18px, 5vw, 72px) !important;
  display: flex;
  align-items: center;
  gap: 20px;
  background: linear-gradient(110deg, var(--kvss-brand-dark), var(--kvss-brand)) !important;
  color: white;
}
.w3-top #home > div:first-child { padding: 0 !important; }
.w3-top #home > div:first-child span { font-weight: 800; letter-spacing: -.02em; }
.w3-top #home > div:last-child { margin-left: auto; padding: 0 !important; }
.w3-top .w3-button { border: 1px solid rgba(255,255,255,.35); border-radius: 999px; margin-left: 6px; color: white !important; }
.w3-top .w3-button:hover { background: rgba(255,255,255,.18) !important; }
.w3-top .w3-button i { color: var(--kvss-accent) !important; }

.topnav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px clamp(12px, 4vw, 60px);
  background: var(--kvss-surface) !important;
  border-bottom: 1px solid var(--kvss-line);
}
.topnav a {
  float: none;
  color: var(--kvss-ink) !important;
  border-radius: 999px;
  padding: 9px 15px;
  font-size: .92rem;
  font-weight: 650;
}
.topnav a:hover, .topnav a.w3-white { background: #fff0e8 !important; color: var(--kvss-brand) !important; }
.topnav .icon { display: none; }

body > .w3-row[style*="margin-top"],
body > .w3-container[style*="margin-top"] { margin-top: 28px !important; }
.w3-container, .w3-row { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }
body > .w3-container { padding-left: clamp(18px, 5vw, 72px) !important; padding-right: clamp(18px, 5vw, 72px) !important; }
body > .w3-row.w3-padding { width: 100%; padding: clamp(24px, 5vw, 64px) !important; }
body > .w3-row.w3-padding img { width: 100%; border: 0 !important; border-radius: 20px; box-shadow: var(--kvss-shadow); transition: transform .25s ease; }
body > .w3-row.w3-padding a:hover img { transform: translateY(-6px); }

fieldset {
  margin: 28px 0;
  padding: clamp(18px, 3vw, 34px) !important;
  border: 1px solid var(--kvss-line) !important;
  border-radius: 22px;
  background: rgba(255,255,255,.78);
  box-shadow: var(--kvss-shadow);
}
legend { border-radius: 999px !important; background: var(--kvss-brand) !important; color: white !important; padding: 8px 18px !important; }
h1, h2, h3 { letter-spacing: -.025em; }
h2.w3-text-indigo, body > .w3-container > h2 { color: var(--kvss-brand-dark) !important; font-weight: 800; }
.w3-leftbar { border-left-width: 4px !important; border-color: var(--kvss-accent) !important; }
.w3-panel { margin-top: 12px; border-radius: 0 14px 14px 0; }
.w3-row.w3-teal { max-width: none; margin-top: 56px !important; padding: 40px clamp(18px, 5vw, 72px) !important; background: var(--kvss-ink) !important; color: #e9eff8; }
.w3-row.w3-teal footer { width: 100%; margin: auto; }
.w3-row.w3-teal a { color: #ffd18a !important; }
#bst { margin: 0; text-align: center; background: #101a2d !important; color: #aebbd0; }
.footer { position: fixed; right: 22px; bottom: 22px; left: auto; width: auto; z-index: 20; padding: 10px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: var(--kvss-shadow); }
.footer img { width: 38px; height: 38px; }
marquee { display: block; margin: 0 auto 24px; max-width: 1180px; border-radius: 999px; padding: 9px 18px; background: #fff1d9; color: var(--kvss-brand-dark); }
.columnx { float: left; width: 33.333%; padding: 8px; }
.columnx img { border-radius: 16px; box-shadow: var(--kvss-shadow); }

@media (max-width: 720px) {
  .w3-top #home { display: block; text-align: center; padding: 14px 16px !important; }
  .w3-top #home > div:last-child { margin-top: 10px; }
  .topnav { display: block; padding: 0; }
  .topnav a:not(:first-child) { display: none; }
  .topnav a.icon { display: block; float: right; }
  .topnav.responsive { position: relative; padding: 6px 10px; }
  .topnav.responsive a { display: block; text-align: left; }
  .topnav.responsive .icon { position: absolute; right: 10px; top: 6px; }
  .columnx { width: 100%; }
  body > .w3-container { padding-left: 16px !important; padding-right: 16px !important; }
  body > .w3-row.w3-padding { padding: 20px 16px !important; }
  .w3-row.w3-teal .w3-third { width: 100%; margin-bottom: 24px; }
}