/* REQ-174 — unified button system for the static marketing site (index, companies, schools, families, 200, 404).
   Loaded AFTER /_nuxt/entry.*.css; the built Nuxt files are NOT edited (they are regenerated, no source here).
   Brand: yellow #ffb001 + ink #111. Delete the <link> to this file in the 6 html pages to roll back. */

.btn {
  font-weight: 600;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.btn.px-4,
.btn.px-5 { font-weight: 700; min-height: 46px; }

/* keyboard focus: visible on yellow, white and black backgrounds alike */
.btn:focus-visible {
  outline: 3px solid #111;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(255, 176, 1, .6);
}

/* primary action = yellow pill, same everywhere (nav, hero, plan cards on white, footer).
   .btn-dark is the plan-card button on a white card: it becomes the primary too, instead of a dark button with a yellow ring. */
.btn-primary,
.btn-dark {
  background-color: #ffb001 !important;
  border: 2px solid #ffb001 !important;
  color: #111 !important;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(255, 176, 1, .35);
}
.btn-primary:hover,
.btn-dark:hover {
  background-color: #111 !important;
  border-color: #ffb001 !important;
  color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  transform: translateY(-1px);
}

/* the button inside the yellow plan card: black (the white one disappeared into the card) */
.btn-white {
  background-color: #111 !important;
  border: 2px solid #111 !important;
  color: #fff !important;
  border-radius: 50px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.btn-white:hover {
  background-color: #fff !important;
  border-color: #111 !important;
  color: #111 !important;
  transform: translateY(-1px);
}

/* nav: language button follows the same pill + hover */
.btn-light.border-dark { border-radius: 50px; }
.btn-light.border-dark:hover { background-color: #111; color: #fff; }

/* category pages (companies / schools / families): the green / yellow / purple call-to-action keeps its colour,
   but the schools one was white text on light yellow (contrast ~1.8:1) → dark text */
.btn-accent[data-v-1dfb1970] { color: #111 !important; }
.btn-accent[data-v-1dfb1970]:hover { color: #111 !important; }

@media (max-width: 767.98px) {
  .btn.px-4, .btn.px-5 { min-height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none !important; }
}