/* Pacific Commercial Care. Shared styles for index + diagnosis.
   Inline styles in the HTML carry the design as exported; this file holds
   what inline styles cannot: hover/focus states, keyframes, media queries. */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #EAF1F7; color: #103253; }
img { max-width: 100%; }
section[id], footer[id] { scroll-margin-top: 24px; }
a { color: #2E79B2; text-decoration: none; }
a:hover { color: #103253; }
::selection { background: #8FBEDF; color: #103253; }
button { font: inherit; }
:focus-visible { outline: 3px solid #2E79B2; outline-offset: 3px; border-radius: 4px; }

/* Interaction states (from style-hover / style-focus attributes in the design) */
.btn-primary { transition: background 0.2s, color 0.2s, transform 0.2s; }
.btn-primary:hover { background: #2E79B2 !important; color: #F7FBFD !important; }
.btn-secondary:hover { background: #103253 !important; color: #F7FBFD !important; }
.nav-link:hover { color: #2E79B2 !important; }
.card-lift { transition: transform 0.25s cubic-bezier(0.25,1,0.5,1); }
.card-lift:hover { transform: translateY(-4px); }
.faq-q:hover { color: #2E79B2 !important; }
.chat-input:focus { border-color: #2E79B2 !important; }
.chat-send:hover { background: #103253 !important; }
.chat-opt { transition: background 0.15s, color 0.15s; }
.chat-opt:hover { background: #EAF1F7 !important; }
.chat-opt.picked:hover { background: #103253 !important; }
.chat-multidone:hover { background: #2E79B2 !important; }
.chat-call:hover { background: #2E79B2 !important; color: #ffffff !important; }

/* Mobile menu drawer */
#menu[hidden] { display: none; }
#menu { position: fixed; inset: 0; z-index: 40; }
#menu .dim { position: absolute; inset: 0; background: rgba(16,50,83,0.45); animation: pccFadeDim 0.25s ease both; }
#menu .panel { position: absolute; top: 0; left: 0; bottom: 0; width: min(78vw, 320px); background: #FBFDFE; box-shadow: 8px 0 40px rgba(16,50,83,0.25); padding: 24px; display: flex; flex-direction: column; gap: 8px; box-sizing: border-box; animation: pccSlideIn 0.28s cubic-bezier(0.25,1,0.5,1) both; }
#menu.closing .dim { animation: pccFadeDimOut 0.24s ease both; }
#menu.closing .panel { animation: pccSlideOut 0.24s cubic-bezier(0.5,0,0.75,0) both; }

/* FAQ */
.faq-a[hidden] { display: none; }

/* Keyframes (verbatim from the design) */
@keyframes pccFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pccSlideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes pccSlideOut { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@keyframes pccFadeDimOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pccFadeDim { from { opacity: 0; } to { opacity: 1; } }
@keyframes pccGradShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes pccMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pccGlow { 0% { opacity: 0.5; transform: translateX(-50%) scale(1); } 50% { opacity: 0.85; transform: translateX(-46%) scale(1.12); } 100% { opacity: 0.5; transform: translateX(-50%) scale(1); } }
@keyframes pccMsgIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pccDot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.4; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Responsive (verbatim rules from both pages) */
@media (max-width: 760px) {
  [data-desktop-only] { display: none !important; }
  [data-mobile-only] { display: flex !important; }
  [data-mobile-only-inline] { display: inline-flex !important; }
  [data-hero-ctas] { flex-direction: column; }
  [data-hero-ctas] a { width: 100%; box-sizing: border-box; text-align: center; justify-content: center; }
  [data-screen-label="Nav"] img { height: 38px !important; }
  [data-glow] { animation: none !important; filter: blur(28px) !important; }
  [data-gradtext] { animation: none !important; background-position: 50% 50% !important; }
  [data-maskwrap] { mask-image: none !important; -webkit-mask-image: none !important; }
  [data-marquee] { animation-duration: 18s !important; }
  /* funnel */
  [data-shell] { padding: 0 !important; }
  [data-window] { border-radius: 0 !important; box-shadow: none !important; }
  [data-options] { gap: 8px !important; }
  [data-inputbar] { padding: 12px 14px 14px 14px !important; }
  [data-chat] { padding: 20px 16px !important; }
  [data-chat] > *:not(:nth-last-child(-n+2)) { display: none !important; }
  [data-options] button { font-size: 15px !important; padding: 12px 16px !important; width: 100%; text-align: left; }
}

/* Reduced motion: every animation no-ops, content lands in its final state */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  [data-marquee] { animation: none !important; transform: none !important; flex-wrap: wrap; justify-content: center; width: auto !important; }
  [data-maskwrap] { mask-image: none !important; -webkit-mask-image: none !important; }
}

/* Print: strip the chrome */
@media print { #menu, [data-glow] { display: none !important; } }