/* Cybershark Consulting — shared stylesheet.
   The pages keep their design-tool inline styles; this file owns everything
   inline styles can't express: resets, pseudo-classes (hover/focus), the
   header's desktop/mobile breakpoint, and JS-driven state classes. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { margin: 0; background: #fefefe; }
*:focus-visible { outline: 2px solid #1ea6d2; outline-offset: 2px; border-radius: 3px; }
::selection { background: #1ea6d2; color: #031b39; }

@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.28; } }
@keyframes csFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes csBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes csSlideIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  html { scroll-behavior: auto; }
}

/* --- skip link ------------------------------------------------------------ */
.skip-link {
  position: absolute; left: -9999px; top: 10px; z-index: 2000;
  background: #1ea6d2; color: #031b39; padding: 11px 18px; border-radius: 8px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 12px; }

/* --- hover/focus utilities (converted from the export's style-hover/style-focus) */
.hl-ink:hover { color: #031b39; }
.hl-cyan:hover { color: #4cc6ec; }
.hl-sky:hover { color: #8ad9f2; }
.hl-white:hover { color: #fefefe; }
.hl-cyan-lt:hover { background: #4cc6ec; }
.hl-navy-lt:hover { background: #0a2547; }
.hl-invert:hover { background: #031b39; color: #fefefe; }
.hl-fill-cyan:hover { background: #1ea6d2; color: #031b39; }
.hl-border-cyan:hover { border-color: #1ea6d2; }
.hl-border-ink:hover { border-color: #1ea6d2; color: #031b39; }
.hl-border-tint:hover { border-color: #1ea6d2; background: rgba(30, 166, 210, 0.07); }
.hl-border-tint10:hover { border-color: #1ea6d2; background: rgba(30, 166, 210, 0.1); }
.hl-lift:hover { transform: translateY(-3px); border-color: rgba(30, 166, 210, 0.55); box-shadow: 0 18px 40px -22px rgba(3, 27, 57, 0.45); }
.fl-input:focus { border-color: #1ea6d2; outline: 2px solid rgba(30, 166, 210, 0.4); outline-offset: 1px; }

/* --- header: desktop/mobile split (replaces the export's window.innerWidth<980 JS) */
.hdr-desktop { display: grid; }
.hdr-mobile { display: none; }
@media (max-width: 979.98px) {
  .hdr-desktop { display: none; }
  .hdr-mobile { display: flex; }
}

.nav-link { color: #33425b; }
.nav-link:hover { color: #031b39; }
.nav-link.nav-active { color: #031b39; }
.nav-link.nav-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px; background: #1ea6d2;
}

/* mobile menu overlay — [hidden] wins over the flex display */
#site-menu { display: flex; }
#site-menu[hidden] { display: none; }
@media (min-width: 980px) { #site-menu { display: none; } }

/* --- home hero carousel state --------------------------------------------- */
.slide { opacity: 0; visibility: hidden; transition: opacity 0.35s ease; }
.slide.is-active { opacity: 1; visibility: visible; }
.carousel-dot { width: 10px; background: rgba(3, 27, 57, 0.28); }
button[aria-current="true"] > .carousel-dot { width: 30px; background: #1ea6d2; }

/* --- mileage-app popup ----------------------------------------------------- */
#mileage-popup[hidden] { display: none; }