/* Shared page chrome: body text color, page-width cap, link underlining, page title, footer, and the
   sidebar brand card. Ported from legacy's application.css; .panel/.panel-default (Bootstrap 3) become
   .card (Bootstrap 5) -- Bootstrap 5 dropped .panel entirely. */

body {
  color: var(--sn-navy);
}

.snPageWidth {
  max-width: 700px;
}

.snImportantNote {
  color: var(--sn-red);
}

/* Bootstrap does not underline links by default. */
.snLink a:link,
.snLink a:visited {
  text-decoration: underline !important;
}
.snLink a:active,
.snLink a:hover {
  text-decoration: underline;
}

.snFormGroup {
  margin-top: 5px;
}

/* Placeholder text (the "John Doe" / "MM/DD/YYYY" examples) in a light gray, so it's obvious at a glance that
   it's an example and not something already entered. Bootstrap 5's default is dark enough to pass for data. */
.form-control::placeholder {
  color: #999;
  opacity: 1;
}
/* A native date input has no placeholder -- its empty "mm/dd/yyyy" is real text in the input's own color.
   The empty-date controller flags it while empty so it can be grayed the same way. */
.form-control.snDateEmpty:not(:focus) {
  color: #999;
}

/* Bootstrap 3 made every <label> bold with a 5px bottom margin; Bootstrap 5's labels are plain, and neither
   .form-label nor .control-label (a Bootstrap 3 leftover) carries any styling of its own now. */
.control-label {
  font-weight: bold;
  margin-bottom: 5px;
}

/* Ported from Bootstrap 3's .has-error .control-label (legacy's bootstrap.css), using this app's --sn-red
   rather than Bootstrap 3's own red so it matches .snImportantNote/.alert-danger elsewhere on the site. */
.form-group.has-error .control-label {
  color: var(--sn-red);
}

.snText {
  color: var(--sn-navy);
}

.websiteClosed td {
  text-align: center;
}

#pageTitle {
  font-size: 18px;
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 15px;
  color: var(--sn-navy);
}

#copyright {
  text-align: center;
  margin-top: 5px;
}
.copyrightText {
  color: var(--sn-gray);
}

/* ---- Sidebar brand card ---- */
.snSidebarCol {
  max-width: 400px;
}
.snSidebarCard {
  margin-left: 15px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(11, 30, 61, 0.06), 0 12px 28px rgba(11, 30, 61, 0.10);
}
.snSidebarCard .card-body {
  padding: 24px 20px 18px;
}
.snSidebarCard hr {
  margin: 16px 0;
  border-top: 1px solid var(--sn-blue-light);
}
.snInstagramBadge {
  border: 1px solid var(--sn-blue);
  border-radius: 8px;
  padding: 6px 10px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.snInstagramBadge:hover {
  border-color: var(--sn-pink);
  box-shadow: 0 2px 8px rgba(11, 30, 61, 0.12);
}
/* Below the sm breakpoint the sidebar column stacks to full width, but the max-width cap above still
   applies -- without this it renders as a 400px-wide block flush against the left edge instead of
   centered (legacy had this exact bug; see legacy git history "align at top"/"centered" fixes). */
@media (max-width: 767px) {
  .snSidebarCol {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
  .snSidebarCard {
    margin-left: 0;
  }
}