/* ---------------------------
   Root design tokens
   --------------------------- */
:root {
  /* Spacing scale */
  --space-xs:  .5rem;
  --space-sm:  .75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;

  /* Hero section spacing */
  --hero-pt: var(--space-xl);
  --hero-pb: var(--space-xl);

  /* Card padding */
  --card-pad: 1.5rem;

  /* Progress bar height */
  --progress-h: 25px;

  /* Brand colors */
  --brand: #0d6efd;
  --brand-darker: #0a58ca;

  /* Surfaces */
  --surface: #fff;
  --surface-soft: #f8f9fa;
  --border-subtle: rgba(0,0,0,.06);
}

/* ---------------------------
   Global layout and typography
   --------------------------- */
body {
  /* English: remove default top gap, only needed for fixed nav */
  padding-top: 0;
  background-color: var(--surface-soft);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans",
               "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", sans-serif;
  color: #212529;
}

body.with-fixed-nav { padding-top: 4rem; } /* if navbar is fixed */

h1, h5 { font-weight: 600; }

/* ---------------------------
   Navbar highlight & branding
   --------------------------- */
.navbar .nav-link.active {
  font-weight: 700;
  color: var(--brand) !important;
}

.navbar-brand {
  font-weight: 700;
  font-size: 2rem;        /* bigger brand text */
  color: var(--brand);    /* blue brand text */
  text-decoration: none;
  transition: color 0.2s ease;
}
.navbar-brand:hover,
.navbar-brand:focus {
  color: var(--brand-darker);
  text-decoration: underline;
}

/* ---------------------------
   Cards
   --------------------------- */
.status-card { max-width: 700px; margin: auto; }

.card-title { font-size: 1.25rem; font-weight: 500; }
.card-text  { font-size: 0.95rem; }

/* ---------------------------
   Progress bar
   --------------------------- */
.progress {
  height: var(--progress-h);
  background-color: #e9ecef;
  border-radius: 0.25rem;
  overflow: hidden;
}
.progress-bar {
  transition: width 0.6s ease;
  min-width: 2rem;
  position: relative;
}

/* ---------------------------
   Flags
   --------------------------- */
/* Flag images */
.flag-icon {
  height: 1.2em;
  width: auto;
  vertical-align: middle;
  margin-right: 0.5em;
  max-width: none;
}
/* Flag emojis */
.flag { font-size: 1.25rem; margin-right: .5rem; }

/* ---------------------------
   Footer
   --------------------------- */
footer {
  margin-top: 3rem;
  border-top: 1px solid #dee2e6;
}

/* ---------------------------
   Responsive utilities
   --------------------------- */
@media (max-width: 576px) {
  .card-title { font-size: 1.1rem; }
  .card-text  { font-size: 0.9rem; }
}

/* ---------------------------
   About page polish
   --------------------------- */

/* Hero section background and spacing */
.hero {
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
  background: radial-gradient(1200px 600px at 20% -10%, #eef6ff 10%, transparent 60%),
              radial-gradient(1200px 600px at 120% 10%, #f5f7ff 10%, transparent 60%),
              linear-gradient(180deg, #ffffff, #f9fbff);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Uptime badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #e8f7ee;
  color: #137333;
  padding: .5rem .75rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  border: 1px solid rgba(19,115,51,.15);
}

/* Section headings */
.section-title {
  letter-spacing: .2px;
  font-weight: 700;
}

/* Feature cards */
.feature-card {
  border: 1px solid var(--border-subtle);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
  border-radius: 1rem;
  padding: var(--card-pad);
  background: var(--surface);
}

/* Icon circle for cards */
.icon-circle {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef6ff;
  color: var(--brand);
  font-size: 1.25rem;
  border: 1px solid rgba(13,110,253,.15);
}

/* Call-to-action section */
.cta-card {
  background: linear-gradient(180deg, var(--brand), var(--brand-darker));
  color: #fff;
  border: none;
  border-radius: 1rem;
  padding: 2rem;
}

/* Arrow animation for links */
.link-arrow { transition: transform .15s ease; }
.link-arrow:hover { transform: translateX(4px); }