/**
 * VMHS Public Portal — 2026 design refresh
 * Home hero, "how it works", section heads, home assist cards.
 * Loaded last — overrides earlier layers where needed.
 */

/* ── Display font preference ────────────────────────────────────── */
.vmhs-public {
  --app-display: "Fraunces", "Public Sans", Georgia, serif;
}
.vmhs-public h1,
.vmhs-public .vmhs-home-hero__title,
.vmhs-public .vmhs-public-page-head__title,
.vmhs-public .app-section__head h2,
.vmhs-public .guest-dash-hero__title {
  font-family: var(--app-display);
  font-optical-sizing: auto;
}

/* ── Global page atmosphere ─────────────────────────────────────── */
.vmhs-public.vmhs-app-shell {
  background-color: #f3f6f9;
  background-image:
    radial-gradient(ellipse 75% 40% at 20% -8%, rgba(183, 103, 15, 0.09), transparent 55%),
    radial-gradient(ellipse 50% 30% at 100% 0%, rgba(20, 32, 43, 0.04), transparent 50%);
  background-attachment: fixed;
}

/* ═══════════════════════════════════════════════════════════════════
   HOME HERO  (.vmhs-home-hero)
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .vmhs-home-hero {
  position: relative;
  isolation: isolate;
  min-height: min(66vh, 31rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2.75rem, 6vw, 5rem) 0;
  overflow: hidden;
  color: #14202b;
}
.vmhs-public .vmhs-home-hero > .landing-container {
  position: relative;
  z-index: 1;
}

/* ── Background plane ───────────────────────────────────────────── */
.vmhs-public .vmhs-home-hero__plane {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: linear-gradient(170deg, #fdfaf5 0%, #f4f7fa 45%, #eaeff5 100%);
}

/* Amber sun glow — top-right */
.vmhs-public .vmhs-home-hero__glow--sun {
  position: absolute;
  width: min(54vw, 36rem);
  height: min(54vw, 36rem);
  top: -20%; right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(183, 103, 15, 0.32) 0%,
    rgba(183, 103, 15, 0.10) 38%,
    transparent 68%);
  filter: blur(1px);
  animation: vmhs-hero-drift 15s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Muted ink glow — bottom-left */
.vmhs-public .vmhs-home-hero__glow--soft {
  position: absolute;
  width: min(38vw, 24rem);
  height: min(38vw, 24rem);
  bottom: -18%; left: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(20, 32, 43, 0.07) 0%, transparent 65%);
  filter: blur(2px);
  animation: vmhs-hero-drift 20s ease-in-out infinite alternate-reverse;
  pointer-events: none;
}

/* Dot-grid mesh */
.vmhs-public .vmhs-home-hero__mesh {
  position: absolute;
  inset: 0;
  opacity: 0.38;
  background-image:
    linear-gradient(rgba(20, 32, 43, 0.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 32, 43, 0.032) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 20%, transparent 88%);
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 40%, #000 20%, transparent 88%);
  pointer-events: none;
}

/* Brand accent band along bottom edge */
.vmhs-public .vmhs-home-hero__band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    #b7670f 20%,
    #d97706 50%,
    #b7670f 80%,
    transparent 100%);
  opacity: 0.75;
  pointer-events: none;
}

@keyframes vmhs-hero-drift {
  from { transform: translate3d(0,   0,   0) scale(1);    }
  to   { transform: translate3d(-2%, 3%,  0) scale(1.06); }
}

/* ── Content ────────────────────────────────────────────────────── */
.vmhs-public .vmhs-home-hero__content {
  position: relative;
  width: 100%;
  animation: vmhs-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .vmhs-public .vmhs-home-hero__content,
  .vmhs-public .vmhs-home-hero__glow--sun,
  .vmhs-public .vmhs-home-hero__glow--soft { animation: none !important; }
  .vmhs-public .vmhs-home-hero__cta { transition: none !important; }
}

.vmhs-public .vmhs-home-hero__county {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--app-primary, #b7670f);
}
.vmhs-public .vmhs-home-hero__brand {
  display: block;
  margin: 0 0 0.625rem;
  font-family: "Barlow Condensed", "Public Sans", sans-serif;
  font-size: clamp(1.625rem, 6vw, 3.25rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: #14202b;
  white-space: nowrap;
}
.vmhs-public .vmhs-home-hero__title {
  display: block;
  margin: 0 0 0.625rem;
  max-width: 22ch;
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.2;
  color: #2a3d4f;
}
.vmhs-public .vmhs-home-hero__lede {
  display: block;
  margin: 0 0 2rem;
  max-width: 36rem;
  font-size: clamp(0.9375rem, 1.5vw, 1.0625rem);
  line-height: 1.6;
  color: #5b6b7c;
}

/* ── Hero CTA grid ──────────────────────────────────────────────── */
.vmhs-public .vmhs-home-hero__ctas {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem;
  width: 100%;
}
@media (min-width: 576px)  { .vmhs-public .vmhs-home-hero__ctas { grid-template-columns: repeat(2, 1fr); gap: 0.875rem; } }
@media (min-width: 992px)  { .vmhs-public .vmhs-home-hero__ctas { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }

/* Live Chat CTA — hidden on mobile & PWA standalone (floating FAB covers it) */
@media (max-width: 767.98px) {
  .vmhs-public .vmhs-home-hero__cta--live-chat { display: none !important; }
}
html.vmhs-standalone .vmhs-public .vmhs-home-hero__cta--live-chat,
body.vmhs-standalone .vmhs-home-hero__cta--live-chat {
  display: none !important;
}

/* CTA card */
.vmhs-public .vmhs-home-hero__cta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3.75rem;
  padding: 0.9375rem 1.125rem;
  border-radius: var(--app-radius-xl, 1.25rem);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  background: #ffffff;
  color: #14202b;
  border: 1.5px solid rgba(20, 32, 43, 0.09);
  box-shadow: 0 8px 24px rgba(20, 32, 43, 0.06);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.vmhs-public .vmhs-home-hero__cta-icon {
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  font-size: 1.2rem;
  background: rgba(183, 103, 15, 0.10);
  color: #b7670f;
}
.vmhs-public .vmhs-home-hero__cta-label { flex: 1 1 auto; }

/* Primary CTA */
.vmhs-public .vmhs-home-hero__cta--primary {
  background: linear-gradient(145deg, #c4730f 0%, #9a4d0c 100%);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(183, 103, 15, 0.30);
}
.vmhs-public .vmhs-home-hero__cta--primary .vmhs-home-hero__cta-icon {
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}
.vmhs-public .vmhs-home-hero__cta--primary:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(183, 103, 15, 0.36);
}
.vmhs-public .vmhs-home-hero__cta--secondary:hover,
.vmhs-public .vmhs-home-hero__cta--ghost:hover {
  border-color: rgba(183, 103, 15, 0.35);
  color: #14202b;
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(20, 32, 43, 0.10);
}

/* ── Mobile sizing ──────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .vmhs-public .vmhs-home-hero {
    min-height: auto;
    padding-top: 2.25rem;
    padding-bottom: 2.75rem;
  }
  .vmhs-public .vmhs-home-hero__brand {
    font-size: clamp(1.4rem, 7vw, 1.85rem);
    white-space: normal;
  }
  .vmhs-public .vmhs-home-hero__cta {
    min-height: 3.375rem;
    padding: 0.75rem 1rem;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGE HEAD BAND (service / track / check-in pages)
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .vmhs-public-page-head {
  padding: 1.375rem 0 0;
  margin: 0;
  background: transparent;
  border: none;
}
.vmhs-public .vmhs-public-page-head__inner {
  padding-bottom: 1.25rem;
  border-bottom: 1.5px solid rgba(20, 32, 43, 0.07);
  animation: vmhs-rise 0.45s ease both;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADS
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .app-section__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--app-primary, #b7670f);
}
.vmhs-public .app-section--alt {
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  background: linear-gradient(180deg, rgba(255,255,255,0.6) 0%, #eef2f7 100%);
  border-top: 1px solid rgba(20, 32, 43, 0.07);
  border-bottom: 1px solid rgba(20, 32, 43, 0.07);
}
.vmhs-public .app-section__head h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--app-text, #0f1c2e);
}
.vmhs-public .app-section__head p {
  color: var(--app-text-secondary, #4b5e72);
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   STEP CARDS  (.app-step)
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .app-step {
  border: 1.5px solid rgba(20, 32, 43, 0.07);
  border-radius: var(--app-radius-xl);
  background: #ffffff;
  box-shadow: 0 8px 24px rgba(20, 32, 43, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.vmhs-public .app-step:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(20, 32, 43, 0.09);
}

/* ═══════════════════════════════════════════════════════════════════
   APP TILES  (.app-tile)
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .app-tile {
  border-radius: var(--app-radius-xl);
  border: 1.5px solid rgba(20, 32, 43, 0.07);
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(20, 32, 43, 0.04);
}
.vmhs-public .app-tile:hover {
  transform: translateY(-3px);
  border-color: rgba(183, 103, 15, 0.30);
  box-shadow: 0 16px 32px rgba(20, 32, 43, 0.09);
}

/* ═══════════════════════════════════════════════════════════════════
   HOME ASSIST CARDS  (.home-assist)
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .home-assist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.875rem;
  margin-top: 2.25rem;
}
@media (min-width: 768px) {
  .vmhs-public .home-assist { grid-template-columns: repeat(3, 1fr); gap: 1.125rem; }
}
.vmhs-public .home-assist__card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1.0625rem 1.125rem;
  border-radius: var(--app-radius-xl);
  border: 1.5px solid rgba(20, 32, 43, 0.07);
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(20, 32, 43, 0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.vmhs-public .home-assist__card:hover {
  transform: translateY(-2px);
  border-color: rgba(183, 103, 15, 0.30);
  box-shadow: 0 14px 30px rgba(20, 32, 43, 0.09);
  color: inherit;
}
.vmhs-public .home-assist__icon {
  flex-shrink: 0;
  width: 2.75rem; height: 2.75rem;
  border-radius: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(183, 103, 15, 0.10);
  color: #b7670f;
  font-size: 1.3rem;
}
.vmhs-public .home-assist__icon--phone  { background: rgba(13, 148, 136, 0.10);  color: #0f766e; }
.vmhs-public .home-assist__icon--chat   { background: rgba(37, 99, 235, 0.10);   color: #1d4e89; }
.vmhs-public .home-assist__body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
  flex: 1;
}
.vmhs-public .home-assist__body strong {
  font-size: 0.9375rem;
  font-weight: 700;
  color: #14202b;
}
.vmhs-public .home-assist__body span {
  font-size: 0.8125rem;
  color: #5b6b7c;
  line-height: 1.4;
}
.vmhs-public .home-assist__go {
  color: var(--app-primary, #b7670f);
  font-size: 1.1rem;
  opacity: 0.65;
  flex-shrink: 0;
  transition: opacity 0.15s, transform 0.15s;
}
.vmhs-public .home-assist__card:hover .home-assist__go {
  opacity: 1;
  transform: translateX(3px);
}

/* ═══════════════════════════════════════════════════════════════════
   STAFF STRIP ON LANDING
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .vmhs-staff-strip--landing {
  margin-top: 2rem;
  border-radius: var(--app-radius-xl);
  border: 1.5px solid rgba(183, 103, 15, 0.18);
  background: linear-gradient(120deg, rgba(183,103,15,0.07), rgba(255,255,255,0.9));
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER POLISH
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .public-header {
  background: rgba(255, 255, 255, 0.88) !important;
  border-bottom: 1px solid rgba(20, 32, 43, 0.07) !important;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.vmhs-public .public-header .brand-text-app strong {
  font-optical-sizing: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   BOTTOM NAV POLISH
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .app-bottom-nav {
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(20, 32, 43, 0.08);
  box-shadow: 0 -1px 0 rgba(226, 232, 240, 0.9), 0 -8px 24px rgba(15,28,46,0.05);
}

/* ═══════════════════════════════════════════════════════════════════
   GUEST DASHBOARD HERO
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .guest-dash-hero {
  border-radius: var(--app-radius-2xl);
  background:
    radial-gradient(ellipse 55% 80% at 100% 0%, rgba(183,103,15,0.42), transparent 58%),
    linear-gradient(135deg, #1a2834 0%, #243746 58%, #8a4d0b 140%);
  box-shadow: 0 16px 40px rgba(20,32,43,0.16);
}

/* ═══════════════════════════════════════════════════════════════════
   FORMS POLISH
═══════════════════════════════════════════════════════════════════ */
.vmhs-public .vmhs-friendly-form .form-control,
.vmhs-public .vmhs-friendly-form .form-select {
  min-height: 2.875rem;
  border-radius: 0.625rem;
  border-color: #d1dae3;
  font-size: 0.9375rem;
}
.vmhs-public .vmhs-friendly-form .form-control:focus,
.vmhs-public .vmhs-friendly-form .form-select:focus {
  border-color: var(--app-primary) !important;
  box-shadow: 0 0 0 3px rgba(183,103,15,0.14) !important;
}
.vmhs-public .vmhs-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding-top: 1.375rem;
  border-top: 1.5px solid var(--app-border);
  margin-top: 0.5rem;
}
.vmhs-public .btn-primary {
  border-radius: 0.625rem;
}
.vmhs-public .btn-outline-primary,
.vmhs-public .btn-outline-secondary {
  border-radius: 0.625rem;
}
.vmhs-public .vmhs-btn-primary-lg {
  min-height: 2.875rem;
  padding-left: 1.375rem !important;
  padding-right: 1.375rem !important;
}

/* Legacy .app-hero — suppress if any leftover markup exists */
.vmhs-public .app-hero { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   SHARED KEYFRAMES
═══════════════════════════════════════════════════════════════════ */
@keyframes vmhs-rise {
  from { opacity: 0; transform: translateY(0.75rem); }
  to   { opacity: 1; transform: translateY(0); }
}