/* Shared SWC visual system for the public website pages. */
:root {
  --swc-primary: #1fabf1;
  --swc-primary-dark: #087eb7;
  --swc-ink: #183247;
  --swc-muted: #718096;
  --swc-bg: #f4f8fb;
  --swc-border: #e4edf4;
  --swc-card: #fff;
  --swc-shadow: 0 10px 30px rgba(26, 71, 103, .08);
  --nav-primary: var(--swc-primary);
  --nav-text: var(--swc-ink);
  --nav-muted: var(--swc-muted);
  --nav-border: rgba(26, 71, 103, .12);
  --nav-shadow: 0 8px 26px rgba(26, 71, 103, .09);
}

body.site-page {
  min-height: 100vh;
  margin: 0;
  background: var(--swc-bg);
  color: var(--swc-ink);
  font-family: "Prompt", "Mitr", sans-serif;
  line-height: 1.6;
}

.site-page *, .site-page *::before, .site-page *::after { box-sizing: border-box; }
.site-page a { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }
.site-page:not(.registration-page) .page-shell {
  width: min(1180px, calc(100% - 28px));
  max-width: none;
  margin: 0 auto 48px;
  padding: 0;
}

@media (max-width: 900px) {
  .site-page:not(.registration-page) .page-shell { width: min(calc(100% - 22px), 760px); }
}
@media (max-width: 620px) {
  .site-page:not(.registration-page) .page-shell { width: calc(100% - 16px); }
}

/* Shared navigation colors. */
.site-page .sidebarNavigation { max-width: 1180px; background: rgba(255,255,255,.97) !important; }
.site-page .sidebarNavigation .nav-link:hover { background: rgba(31,171,241,.1); color: var(--swc-primary-dark) !important; }
.site-page .sidebarNavigation .nav-item.active .nav-link {
  background: linear-gradient(135deg, var(--swc-primary), #39baf3);
  box-shadow: 0 5px 14px rgba(31,171,241,.22);
}
.site-page .sidebarNavigation .nav-item.nav-auth-item .nav-link { border-color: rgba(31,171,241,.3); color: var(--swc-primary-dark) !important; }
.site-page .sidebarNavigation .nav-item.nav-auth-item .nav-link:hover { background: var(--swc-primary); color: #fff !important; }
.site-page .sidebarNavigation .navbar-toggler { border-color: #475569; background: #dbeafe !important; }
.site-page .sidebarNavigation .navbar-toggler:hover { background: #bfdbfe !important; }

/* Consistent cards, headings, fields, and actions. */
.site-page .section-card,
.site-page .profile-card,
.site-page .activity-card,
.site-page .home-page .card,
.site-page .topic-page .card,
.site-page .topic-detail-page .card {
  border-color: var(--swc-border);
  border-radius: 20px;
  background-color: var(--swc-card);
  box-shadow: var(--swc-shadow);
}
.site-page .section-heading { border-color: var(--swc-border); }
.site-page .section-heading h1,
.site-page .section-heading h2,
.site-page .profile-header h1,
.site-page .profile-info h2 { color: var(--swc-ink); }
.site-page .section-note,
.site-page .profile-header p,
.site-page .profile-eyebrow,
.site-page .section-kicker { color: var(--swc-muted); }
.site-page .profile-main { padding-top: 24px; }
.site-page .profile-card { border: 1px solid var(--swc-border); }
.site-page .avatar-wrap { background: linear-gradient(135deg, var(--swc-primary), #43c2f4); }
.site-page .member-meta strong,
.site-page .profile-info .ebib { color: var(--swc-primary-dark); }

.site-page .profile-action,
.site-page .back-button,
.site-page .view-button,
.site-page .all-history-button,
.site-page .update-button,
.site-page .topic-page .btn-outline-dark {
  border-radius: 11px;
  font-family: inherit;
}
.site-page .profile-action.primary,
.site-page .view-button.active,
.site-page .update-button,
.site-page .topic-page .btn-outline-dark:hover {
  border-color: var(--swc-primary);
  background: var(--swc-primary);
  color: #fff !important;
}
.site-page .profile-action.primary { background: linear-gradient(135deg, var(--swc-primary), #39baf3); }
.registration-page { --primary: var(--swc-primary); --primary-dark: var(--swc-primary-dark); --primary-soft: #e8f7ff; --text: var(--swc-ink); --muted: var(--swc-muted); --border: var(--swc-border); --bg: var(--swc-bg); }
.registration-page .page-header { background: linear-gradient(135deg, var(--swc-primary-dark), var(--swc-primary) 55%, #39baf3); box-shadow: 0 14px 35px rgba(31,171,241,.2); }
.site-page .btn-primary { border-color: var(--swc-primary); background: var(--swc-primary); }
.site-page .btn-primary:hover { border-color: var(--swc-primary-dark); background: var(--swc-primary-dark); }
.site-page input:not([type="checkbox"]):not([type="radio"]),
.site-page select,
.site-page textarea { border-color: #d6e3ec; border-radius: 10px; }
.site-page input:focus, .site-page select:focus, .site-page textarea:focus {
  border-color: var(--swc-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(31,171,241,.14);
}

/* Shared viewport safeguards for the current user, ranking, and admin pages. */
.site-page img,
.score-page img,
.ranking-page img,
.site-page video,
.score-page video,
.ranking-page video,
.site-page iframe,
.score-page iframe,
.ranking-page iframe { max-width: 100%; }
.site-page input,
.site-page select,
.site-page textarea,
.score-page input,
.score-page select,
.score-page textarea,
.ranking-page input,
.ranking-page select,
.ranking-page textarea { max-width: 100%; }
.site-page h1,
.site-page h2,
.site-page h3,
.site-page p,
.score-page h1,
.score-page h2,
.score-page h3,
.ranking-page h1,
.ranking-page h2,
.ranking-page h3 { overflow-wrap: anywhere; }
.site-page .table-responsive,
.score-page .table-responsive,
.ranking-page .table-wrap { overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.site-page :focus-visible,
.score-page :focus-visible,
.ranking-page :focus-visible { scroll-margin-block: 12px; }

@media (max-width: 767.98px) {
  /* 16px prevents iOS Safari from zooming the page when a field receives focus. */
  .site-page input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .site-page select,
  .site-page textarea,
  .score-page input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .score-page select,
  .score-page textarea,
  .ranking-page input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
  .ranking-page select,
  .ranking-page textarea { font-size: 16px !important; }
  .site-page .btn,
  .score-page .btn,
  .ranking-page .btn { min-height: 42px; }
}

/* Make legacy article pages feel like the same site and keep embedded video fluid. */
.topic-page, .topic-detail-page { background: var(--swc-bg); }
.topic-page .container-fluid, .topic-detail-page .container-fluid { max-width: 1180px; margin: 0 auto; }
.topic-page .row.content, .topic-detail-page .row.content { margin-right: 0; margin-left: 0; }
.topic-page .row.content > .col-sm-2, .topic-detail-page .row.content > .col-sm-2 { display: none; }
.topic-page .row.content > .col-sm-8, .topic-detail-page .row.content > .col-sm-8 { flex: 0 0 100%; max-width: 100%; padding-right: 12px; padding-left: 12px; }
.topic-page .style22 { margin: 14px 0 8px; color: var(--swc-ink); font-size: 1.55rem; font-weight: 600; }
.topic-page .card, .topic-detail-page .card { overflow: hidden; border: 1px solid var(--swc-border); }
.topic-page .card-img-top { display: block; width: 100%; height: 220px; object-fit: cover; }
.topic-page .list-inline { color: var(--swc-muted); font-size: .82rem; }
.topic-page .lead, .topic-detail-page .lead { color: var(--swc-ink); font-size: 1.05rem; font-weight: 500; }
.topic-page .btn-outline-dark { border-color: #cfe3ef; color: var(--swc-primary-dark); }
.topic-page .btn-outline-dark:hover { color: #fff; }
.topic-detail-page .col-sm-8 { min-width: 0; }
.topic-detail-page iframe { display: block; width: min(100%, 720px); aspect-ratio: 16 / 9; height: auto; margin: 16px auto 0; border: 0; border-radius: 14px; }

/* Keep older home-page blue accents within the same SWC palette. */
.home-page .row.justify-content-center .card { border-radius: 20px; box-shadow: var(--swc-shadow) !important; }
.home-page .summary-showcase .distance-highlight-card,
.home-page .summary-showcase .calorie-highlight-card { border-radius: 20px; }
.home-page .container.mb-4 .btn-outline-dark { border-radius: 11px; border-color: #cfe3ef; color: var(--swc-primary-dark); }
.home-page .container.mb-4 .btn-outline-dark:hover { background: var(--swc-primary); border-color: var(--swc-primary); color: #fff; }

@media (max-width: 600px) {
  .site-page .profile-main { padding: 18px 12px 36px; }
  .site-page .profile-card { border-radius: 19px; }
}