html {
  font-size: 14px;
}

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

.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 #258cfb;
}

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

body {
  margin-bottom: 60px;
}

/* SOS theme colors (approximated from logo): navy, aqua, and accent gold */
:root {
  --sos-navy: #0a2a47;
  --sos-aqua: #00a3c4;
  --sos-aqua-600: #0089a7;
  --sos-gold: #f1b700;
}

.sos-navbar {
  background: linear-gradient(90deg, var(--sos-navy), var(--sos-aqua-600));
}
.sos-navbar .navbar-brand .brand-logo {
  height: 36px; width: auto; border-radius: 4px; object-fit: cover;
}
.sos-footer {
  background: var(--sos-navy);
}

/* Hero */
.sos-hero {
  position: relative;
  background: radial-gradient(1200px 300px at 10% 20%, rgba(255,255,255,0.08), rgba(255,255,255,0)), linear-gradient(90deg, var(--sos-navy), var(--sos-aqua-600));
  overflow: hidden;
}
.sos-hero-logo {
  max-height: 160px;
}
.sos-hero-overlay {
  position: absolute; inset: 0; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200" viewBox="0 0 400 200"><defs><linearGradient id="g" x1="0" y1="0" x2="1" y2="1"><stop stop-color="%2300a3c4"/><stop offset="1" stop-color="%230a2a47"/></linearGradient></defs><circle cx="320" cy="30" r="6" fill="url(%23g)" opacity="0.25"/><circle cx="60" cy="150" r="8" fill="url(%23g)" opacity="0.25"/></svg>') center/cover no-repeat; opacity: .3; pointer-events: none;
}
.sos-hero-gradient {
  position: absolute; inset: 0; background: radial-gradient(400px 160px at 80% 20%, rgba(241,183,0,0.18), rgba(241,183,0,0)); pointer-events: none;
}

/* Links & accents */
.btn-primary, .btn-outline-primary:hover {
  background-color: var(--sos-aqua);
  border-color: var(--sos-aqua);
}
.text-primary { color: var(--sos-aqua) !important; }
.border-primary { border-color: var(--sos-aqua) !important; }