/* =====================================================================
   SOLUTION PAGES — shared base
   ---------------------------------------------------------------------
   Boilerplate that was byte-for-byte identical in all five generic
   solution-page stylesheets (campus, golf-cart, hotel-resort, moped,
   scooter): the reset, base typography, container, link reset, the shared
   button system (.btn / .btn-p / .btn-g) and .eyebrow badge, plus the
   common keyframes. Defined once here instead of repeated in every file.

   Loaded (functions.php) on the solution pages AFTER eazyride.css and
   BEFORE each page's own stylesheet, so:
     • it overrides the global .btn/.wrap/.eyebrow on these pages (as the
       per-page copies used to), and
     • each page's own rules still win over this base where they overlap.
   Colours/spacing resolve from the global tokens + the --sol-* sub-theme
   (see theme.css → body.eazyride-solution). Values are unchanged.

   NOTE: `section` padding is intentionally NOT here — hotel-resort uses
   96px while the others use 88px, so it stays in each page file.
   ===================================================================== */

* { margin:0; padding:0; box-sizing: border-box; }

body {
  font-family: var(--font-family-base), -apple-system, sans-serif;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

.wrap { max-width: 1180px; margin:0 auto; padding:0 var(--container-pad); }

a { color: inherit; text-decoration: none; }

/* Shared button system */
.btn {
  display: inline-flex;
  align-items: center;
  gap:var(--space-2);
  padding:var(--btn-padding-y) var(--btn-padding-x);
  border-radius:var(--radius-box-ms);
  font-weight: var(--btn-font-weight);
  font-size:var(--btn-font-size);
  transition: var(--btn-transition);
  cursor: pointer;
  border: var(--btn-border-width) solid transparent;
  font-family: var(--btn-font-family);
}
.btn-p { background: var(--primary-color); color: var(--white); box-shadow:var(--btn-primary-shadow); }
.btn-p:hover { box-shadow:var(--btn-primary-shadow-hover); }
.btn-g { background: var(--white); color: var(--n2); border: 1.5px solid var(--ln); }
.btn-g:hover { color: var(--blue); }

/* Eyebrow badge — uses the global white-pill badge defined in eazyride.css. */

/* Shared keyframes */
@keyframes pulse  { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes fup    { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }