/**
 * SunMvc brand overlay on top of Bootstrap 5 (bootstrap.min.css /
 * bootstrap.rtl.min.css - see App/Views/Home.php). Colors read off
 * Public/img/mvc_logo_horizontal.png: navy wordmark/sun-base, orange
 * sun rays, gray subtitle.
 */

:root {
  --sun-navy: #0b3c74;
  --sun-navy-dark: #082c56;
  --sun-orange: #f5a623;
  --sun-orange-dark: #d98c0f;
  --sun-gray: #8a8a8a;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* In-page nav links (#request-flow, #seo, ...) animate instead of jumping;
   scroll-margin-top offsets the landing position so the sticky navbar
   never covers the section heading it just scrolled to. */
html {
  scroll-behavior: smooth;
}

main section[id] {
  scroll-margin-top: 90px;
}

.bg-brand-navy {
  background-color: var(--sun-navy) !important;
}

/* Light hero background - the wordmark logos (horizontal/vertical) carry
   navy text, which disappears against the navy header; this tint keeps the
   hero visually distinct from the plain-white body sections while staying
   light enough for the logo and dark text to read clearly. */
.bg-brand-light {
  background-color: #eef3f9 !important;
}

.text-brand-navy {
  color: var(--sun-navy) !important;
}

/* Trust bar ("500+ websites...") between the hero and the feature
   sections - the warm-to-cool gradient nods to both brand colors so it
   reads as a distinct band, not just another white strip. */
.trust-bar {
  background: linear-gradient(90deg, #fff4e2, #eef3f9);
  border-top: 1px solid rgba(11, 60, 116, 0.08);
  border-bottom: 1px solid rgba(11, 60, 116, 0.08);
}

.trust-icon {
  display: inline-flex;
  line-height: 0;
}

.text-brand-orange {
  color: var(--sun-orange) !important;
}

.link-brand-orange {
  color: var(--sun-orange-dark);
}

.link-brand-orange:hover {
  color: var(--sun-orange);
}

.btn-brand-orange {
  background-color: var(--sun-orange);
  border-color: var(--sun-orange);
  color: #1a1a1a;
  font-weight: 600;
}

.btn-brand-orange:hover,
.btn-brand-orange:focus {
  background-color: var(--sun-orange-dark);
  border-color: var(--sun-orange-dark);
  color: #1a1a1a;
}

.btn-outline-navy {
  border-color: var(--sun-navy);
  color: var(--sun-navy);
}

.btn-outline-navy:hover,
.btn-outline-navy:focus {
  background-color: var(--sun-navy);
  border-color: var(--sun-navy);
  color: #fff;
}

/* Open-source / GitHub pill shown under the hero logo. */
.badge-opensource {
  border: 1px solid var(--sun-navy);
  border-radius: 999px;
  padding: 0.35rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sun-navy);
  background-color: #fff;
}

.badge-opensource:hover {
  background-color: var(--sun-navy);
  color: #fff;
}

.text-white-75 {
  color: rgba(255, 255, 255, 0.75);
}

.letter-spacing {
  letter-spacing: 0.08em;
}

.badge-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--sun-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}

.navbar .dropdown-menu {
  min-width: 10rem;
}

/* Flag-based language switcher (Public/img/flag/{code}.svg). object-fit:
   cover crops every flag to the same square regardless of its native
   aspect ratio; the hairline shadow keeps pale flags (e.g. a mostly-white
   design) visible against the white navbar. */
.flag-icon {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}