/* Central UI components and design tokens */
:root{
  --primary-100: #34E7BF;
  --primary-900: #0130C8;
  --text-primary: #001D5E;
  --muted: #6b7280;
  --surface: #ffffff;
  --radius: 8px;
}

/* Buttons */
.btn{
  display:inline-block;
  padding: .5rem .9rem;
  border-radius: 6px;
  color: #fff;
  background: var(--primary-900);
  border: none;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-body, 1rem);
  line-height: var(--leading-tight, 1.25);
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: var(--tracking-wide, 0.01em);
  cursor: pointer;
}
.btn{ min-height:44px; min-width:120px; }
.btn:focus{ outline: none; box-shadow: 0 0 0 3px rgba(3,102,214,0.08); }
.btn-primary{
  background: var(--primary-900) !important;
  background-image: none !important;
  border-color: var(--primary-900) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background: #012aa8 !important;
  background-image: none !important;
  border-color: #012aa8 !important;
}
.btn-outline-primary{
  background: transparent; color: var(--primary-900); border: 1px solid var(--primary-900);
}

/* Card */
.card-component{
  background: var(--surface); border-radius: var(--radius); box-shadow: 0 6px 18px rgba(13,38,76,0.04); padding: 1rem;
}

/* Section title */
.section-title{
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: var(--text-h4, 1.25rem);
  line-height: var(--leading-h4, 1.75rem);
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: var(--tracking-tight, -0.02em);
  color:var(--text-primary);
  margin-bottom:.5rem;
}

/* Utilities */
.text-muted{ color:var(--muted); }
.center-block{ margin-left:auto; margin-right:auto; }
.grid-gap{ gap: 1rem; }
/* Section spacing for consistent gaps between sections */
.section-gap{ padding-top:2.5rem; padding-bottom:2.5rem; }

/* Global focus/active handling:
   - Remove browser-native outlines on focus/click/input per request
   - Provide an accessible custom focus indicator using :focus-visible
   - Also handle :active to avoid persistent outlines on click
*/
:where(a, button, input, textarea, select):focus{ outline: none; }
:where(a, button, input, textarea, select):active{ outline: none; }
:where(a, button, input, textarea, select):focus-visible{
  box-shadow: 0 0 0 3px rgba(3,102,214,0.12);
  border-radius: 4px;
}
nav.navbar a:focus,
nav.navbar a:active,
nav.navbar a:focus-visible,
.navbar .nav-link:focus,
.navbar .nav-link:active,
.navbar .nav-link:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
  border: none !important;
  border-radius: 0 !important;
}
/* Inputs get a subtler inner focus ring */
input:focus-visible, textarea:focus-visible, select:focus-visible{
  box-shadow: 0 0 0 3px rgba(3,102,214,0.08);
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.contact-form-status {
  margin: 0 0 0.75rem;
  font-size: var(--text-sm, 0.875rem);
  line-height: 1.5;
  color: var(--text-primary, #001D5E);
}
.contact-form-status--error {
  color: #9b1c1c;
}
.contact-form .form-control.is-invalid {
  box-shadow: 0 0 0 2px rgba(155, 28, 28, 0.25);
}