/* ==========================================================================
   Sargam Insurance — single stylesheet
   --------------------------------------------------------------------------
   Consolidates every inline <style> block that previously lived in each
   page's <helmet>, plus the media queries the Nav component used to inject
   at runtime, plus every style-hover / style-focus rule that used to be
   compiled into a stylesheet by the JS runtime on first paint.

   Sections
     1. Reset & document
     2. Layout helpers (responsive grid overrides)
     3. Interaction states (hover / focus)
     4. Navigation
     5. Keyframes
     6. Print
   ========================================================================== */


/* 1. Reset & document
   ------------------------------------------------------------------------ */

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

html { scroll-behavior: smooth; }

body {
  /* --page-bg / --page-fg are set per page by includes/header.php */
  background: var(--page-bg, #F4F7F5);
  color: var(--page-fg, #0E1416);
  font-family: 'Manrope', -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: #19C9AE; color: #0E1416; }

img { max-width: 100%; height: auto; }

a { color: #0A6E60; }
a:hover { color: #0FA890; }
/* Links that carry their own colour must not be overridden by the two rules
   above — every such link in the markup sets `color` inline, which wins. */

/* Interpolated values are wrapped in this span so inline layout (flex/grid
   item counts, white-space) matches the original renderer exactly. */
.sc-interp { display: inline; }


/* 2. Layout helpers
   ------------------------------------------------------------------------ */

@media (max-width: 900px) {
  [data-r="col"] { grid-template-columns: 1fr !important; }
  [data-r="c4"]  { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 700px) {
  [data-rwd="steplabel"] { display: none !important; }
}

@media (max-width: 620px) {
  [data-r="c4"] { grid-template-columns: 1fr !important; }
  [data-r="col"],
  [data-r="c4"] { gap: 16px !important; }
}


/* 3. Interaction states
   ------------------------------------------------------------------------
   Previously expressed as style-hover="…" / style-focus="…" attributes and
   compiled to anonymous classes at runtime. Now static, so they cost
   nothing at load and are visible to the browser's first paint. */

.hv-teal:hover        { color: #19C9AE; }
.hv-white:hover       { color: #fff; }

.hv-mint:hover        { background: #2BD9BD; }
.hv-mint-lift:hover   { background: #2BD9BD; transform: translateY(-2px); }
.hv-pine:hover        { background: #0A6E60; }
.hv-slate:hover       { background: #1B2A27; }

.hv-b-teal:hover      { border-color: #19C9AE; }
.hv-b-teal-white:hover{ border-color: #19C9AE; color: #fff; }
.hv-b-green:hover     { border-color: #0FA890; }
.hv-b-green-text:hover{ border-color: #0FA890; color: #0A6E60; }
.hv-b-green-tint:hover{ border-color: #0FA890; background: #F4FAF8; }
.hv-b-green-wash:hover{ border-color: #0FA890; background: #EEF6F3; }

.hv-card:hover {
  border-color: #0FA890;
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(10, 110, 96, .12);
}
.hv-card-flat:hover {
  border-color: #0FA890;
  box-shadow: 0 18px 40px rgba(10, 110, 96, .1);
}

.fc-green:focus { outline: none; border-color: #0FA890; }
.fc-teal:focus  { outline: none; border-color: #19C9AE; }


/* 4. Navigation
   ------------------------------------------------------------------------ */

@media (max-width: 1080px) {
  [data-nav="links"]  { display: none !important; }
  [data-nav="burger"] { display: flex !important; }
}

@media (max-width: 720px) {
  [data-nav="desk"] { display: none !important; }
}

/* Mobile sheet is closed until the burger sets aria-expanded="true". */
[data-nav="sheet"][hidden] { display: none !important; }


/* 5. Keyframes
   ------------------------------------------------------------------------
   Union of the keyframes declared across the individual pages. Duplicates
   were byte-identical and have been collapsed. */

@keyframes pop      { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes revealUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes bar      { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes marquee  { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes floaty   { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes blink    { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@keyframes bob      { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
@keyframes stepBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes ecg      { from { stroke-dashoffset: 260; } to { stroke-dashoffset: 0; } }
@keyframes ripple   { 0% { transform: scale(.5); opacity: .85; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes flick    { 0% { transform: scaleY(1) scaleX(1); } 50% { transform: scaleY(.8) scaleX(1.08); } 100% { transform: scaleY(1.12) scaleX(.94); } }

@keyframes sweepX {
  0%   { transform: translateX(-70px); opacity: 0; }
  44%  { transform: translateX(-70px); opacity: 0; }
  48%  { opacity: .95; }
  60%  { transform: translateX(480px); opacity: .95; }
  63%  { opacity: 0; }
  100% { transform: translateX(480px); opacity: 0; }
}

@keyframes carShake {
  0%, 29% { transform: translate(0, 0) rotate(0); }
  31%     { transform: translate(-4px, 1px) rotate(-1.6deg); }
  33%     { transform: translate(4px, -1px) rotate(1.6deg); }
  35%     { transform: translate(-2px, 0) rotate(-.8deg); }
  38%     { transform: translate(0, 0) rotate(0); }
  100%    { transform: translate(0, 0) rotate(0); }
}

@keyframes dmg {
  0% { opacity: 0; } 30% { opacity: 0; } 33% { opacity: 1; }
  51% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; }
}

@keyframes smoke {
  0%   { opacity: 0; transform: translateY(0) scale(.5); }
  30%  { opacity: 0; transform: translateY(0) scale(.5); }
  37%  { opacity: .7; }
  52%  { opacity: .4; transform: translateY(-30px) scale(1.15); }
  60%  { opacity: 0; transform: translateY(-46px) scale(1.3); }
  100% { opacity: 0; transform: translateY(-46px) scale(1.3); }
}

@keyframes shineC {
  0%   { opacity: 0; transform: translateX(-40px) rotate(18deg); }
  62%  { opacity: 0; transform: translateX(-40px) rotate(18deg); }
  70%  { opacity: .85; }
  80%  { opacity: 0; transform: translateX(70px) rotate(18deg); }
  100% { opacity: 0; transform: translateX(70px) rotate(18deg); }
}

@keyframes flameShow {
  0% { opacity: 0; } 30% { opacity: 0; } 34% { opacity: 1; }
  51% { opacity: 1; } 60% { opacity: 0; } 100% { opacity: 0; }
}

@keyframes winLit   { 0% { opacity: 0; } 62% { opacity: 0; } 71% { opacity: 1; } 100% { opacity: 1; } }
@keyframes roadFresh{ 0% { opacity: 0; } 64% { opacity: 0; } 73% { opacity: 1; } 100% { opacity: 1; } }

@keyframes waterRise {
  0% { transform: scaleY(0); } 25% { transform: scaleY(0); }
  38% { transform: scaleY(1); } 53% { transform: scaleY(1); }
  64% { transform: scaleY(0); } 100% { transform: scaleY(0); }
}

@keyframes walkOut    { 0%, 66% { transform: translateX(0); } 100% { transform: translateX(126px); } }
@keyframes crutchGone { 0%, 78% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes huddle {
  0%, 55% { transform: translateY(0) scale(1); }
  70%     { transform: translateY(-3px) scale(1.02); }
  100%    { transform: translateY(-3px) scale(1.02); }
}

@keyframes rainFall {
  0%   { transform: translateY(-46px); opacity: 0; }
  14%  { opacity: .6; }
  100% { transform: translateY(74px); opacity: 0; }
}


/* 6. Print
   ------------------------------------------------------------------------ */

@media print {
  @page { margin: 0.5cm; }

  section, article, figure, table { break-inside: avoid; }

  *, *::before, *::after {
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    animation: none !important;
    transition-duration: 0s !important;
  }
}


/* Respect the user's motion preference — the original build animated
   unconditionally. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}