html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* --- Civic palette --------------------------------------------------- */
:root {
  --gs-navy-900: #14213D;
  --gs-navy-700: #1F3A5F;
  --gs-navy-600: #2C4F7C;
  --gs-navy-700-rgb: 31, 58, 95;
  --gs-slate-700: #4A5568;
  --gs-slate-500: #718096;
  --gs-slate-200: #E2E8F0;
  --gs-slate-100: #F7F9FB;
  --gs-accent: #C89B3C;
  --gs-accent-dark: #B3872C;

  /* Bootstrap utility classes (.bg-primary, .text-primary, .border-primary,
     default link color) read these root variables directly at runtime, so
     overriding them here retints badges/links app-wide with no per-class
     rules needed. Component classes like .btn-primary do NOT read these -
     Bootstrap 5.3 bakes their colors in as local --bs-btn-* properties -
     so those get explicit overrides below instead. */
  --bs-primary: var(--gs-navy-700);
  --bs-primary-rgb: var(--gs-navy-700-rgb);
  --bs-link-color: var(--gs-navy-700);
  --bs-link-color-rgb: var(--gs-navy-700-rgb);
  --bs-link-hover-color-rgb: 44, 79, 124;
}

body {
  background-color: var(--gs-slate-100);
}

.btn-primary {
  --bs-btn-bg: var(--gs-navy-700);
  --bs-btn-border-color: var(--gs-navy-700);
  --bs-btn-hover-bg: var(--gs-navy-600);
  --bs-btn-hover-border-color: var(--gs-navy-600);
  --bs-btn-active-bg: var(--gs-navy-900);
  --bs-btn-active-border-color: var(--gs-navy-900);
  --bs-btn-focus-shadow-rgb: var(--gs-navy-700-rgb);
  --bs-btn-disabled-bg: var(--gs-navy-700);
  --bs-btn-disabled-border-color: var(--gs-navy-700);
}

.btn-outline-primary {
  --bs-btn-color: var(--gs-navy-700);
  --bs-btn-border-color: var(--gs-navy-700);
  --bs-btn-hover-bg: var(--gs-navy-700);
  --bs-btn-hover-border-color: var(--gs-navy-700);
  --bs-btn-active-bg: var(--gs-navy-900);
  --bs-btn-active-border-color: var(--gs-navy-900);
  --bs-btn-focus-shadow-rgb: var(--gs-navy-700-rgb);
  --bs-btn-disabled-color: var(--gs-navy-700);
  --bs-btn-disabled-border-color: var(--gs-navy-700);
}

.btn-outline-secondary {
  --bs-btn-color: var(--gs-slate-700);
  --bs-btn-border-color: var(--gs-slate-700);
  --bs-btn-hover-bg: var(--gs-slate-700);
  --bs-btn-hover-border-color: var(--gs-slate-700);
}

/* --- Navbar branding --------------------------------------------------- */
.navbar.gs-navbar {
  background-color: var(--gs-navy-900);
  border-bottom: 3px solid var(--gs-accent) !important;
  box-shadow: none !important;
}

.gs-navbar .navbar-brand {
  font-weight: 600;
  letter-spacing: .02em;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.gs-navbar .navbar-brand .bi {
  color: var(--gs-accent);
}

.gs-navbar .nav-link.active {
  border-bottom: 2px solid var(--gs-accent);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--gs-navy-600);
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Clickable Home dashboard tiles ------------------------------------ */
.gs-tile-link .card {
  transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.gs-tile-link:hover .card {
  box-shadow: 0 .5rem 1rem rgba(20, 33, 61, .15) !important;
  transform: translateY(-2px);
}