/* ============================================================
   Hunterdon Millionaires — styles
   Pure CSS. No framework. Safe to enqueue in a WordPress theme.
   Fonts + design tokens are inlined here so this file is
   self-contained (no external design-system dependency).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800;900&family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --font-sans:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   'Lora', Georgia, 'Times New Roman', serif;
  --font-mono:    'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#F7F9FC;-webkit-font-smoothing:antialiased;color:#0D1F30;font-family:var(--font-sans)}
p{margin:0;color:inherit}
img{max-width:100%}
::selection{background:#FFF4E8;color:#D4742F}

/* Links (default palette so editor-added links aren't browser-blue) */
a{color:#1B3A5C}
a:hover{color:#E8853D}

/* ---- Scroll-reveal: subtle rise + fade. Gated on .js-reveal (added by
   script.js) so content is fully visible if scripting is unavailable. ---- */
.js-reveal [data-reveal]{opacity:0;transform:translateY(20px);transition:opacity .7s cubic-bezier(0.16,1,0.3,1),transform .7s cubic-bezier(0.16,1,0.3,1)}
.js-reveal [data-reveal].hm-vis{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.js-reveal [data-reveal]{opacity:1 !important;transform:none !important;transition:none !important}}
@keyframes hmDraw{to{stroke-dashoffset:0}}
.js-reveal .hm-draw{stroke-dasharray:1400;stroke-dashoffset:1400}
.js-reveal .hm-vis .hm-draw{animation:hmDraw 1.5s cubic-bezier(0.16,1,0.3,1) .15s forwards}

/* Range inputs pick up the brand accent */
input[type="range"]{accent-color:#E8853D}

/* ---- Legal pages (Privacy / Terms) ---- */
.legal h2{font-family:var(--font-display);font-weight:800;font-size:22px;letter-spacing:-0.01em;color:#0D1F30;margin:38px 0 10px;scroll-margin-top:88px}
.legal h3{font-family:var(--font-display);font-weight:700;font-size:16px;color:#0D1F30;margin:22px 0 6px}
.legal p{font-family:var(--font-sans);font-size:15px;line-height:1.72;color:#3A4757;margin:0 0 14px}
.legal ul{margin:0 0 14px;padding-left:22px}
.legal li{font-family:var(--font-sans);font-size:15px;line-height:1.7;color:#3A4757;margin:0 0 7px}
.legal a{color:#B85C1E;text-decoration:none;border-bottom:1px solid rgba(184,92,30,0.35)}
.legal a:hover{color:#B85C1E}
.legal strong{color:#0D1F30}

/* ============================================================
   RESPONSIVE
   The markup uses inline styles; these overrides key off the
   authored inline strings plus a few marker classes
   (hm-grid6 / hm-grid4 / hm-unstick / hm-nav-tag).
   Two tiers: tablet (<=960px) and phone (<=600px).
   ============================================================ */
@media (max-width: 960px){
  /* Collapse every multi-column grid to one column ... */
  [style*="grid-template-columns"]{grid-template-columns:1fr !important;}
  /* ... then restore the small icon/stat grids */
  div.hm-grid6{grid-template-columns:repeat(3,1fr) !important;}
  div.hm-grid4{grid-template-columns:repeat(2,1fr) !important;}
  /* Unstick content rails once stacked (never the nav) */
  .hm-unstick{position:static !important;top:auto !important;}
  /* Tighten large grid gaps that become vertical gaps when stacked */
  [style*="gap:56px"]{gap:32px !important;}
  [style*="gap:52px"]{gap:32px !important;}
  [style*="gap:48px"]{gap:28px !important;}
  [style*="gap:40px"]{gap:28px !important;}
  [style*="gap:36px"]{gap:26px !important;}
  /* Section + container padding */
  [style*="padding:0 32px"]{padding-left:22px !important;padding-right:22px !important;}
  [style*="padding:48px 32px"]{padding:36px 22px !important;}
  [style*="padding:80px 0"]{padding-top:56px !important;padding-bottom:56px !important;}
  [style*="padding:64px 0 84px"]{padding-top:44px !important;padding-bottom:56px !important;}
  [style*="border-radius:20px;padding:48px"]{padding:32px 24px !important;}
  /* Calculator: drop the divider between the now-stacked panes */
  .hm-calc-controls{border-right:none !important;}
  /* Heading scale */
  h1[style]{font-size:34px !important;}
  h2[style]{font-size:30px !important;}
  [style*="font-size:60px"]{font-size:46px !important;}
}
@media (max-width: 600px){
  div.hm-grid6{grid-template-columns:repeat(2,1fr) !important;}
  div.hm-grid4{grid-template-columns:repeat(2,1fr) !important;}
  [style*="padding:0 32px"]{padding-left:18px !important;padding-right:18px !important;}
  [style*="padding:48px 32px"]{padding:30px 18px !important;}
  [style*="padding:80px 0"]{padding-top:48px !important;padding-bottom:48px !important;}
  [style*="border-radius:20px;padding:48px"]{padding:26px 18px !important;}
  /* Hide the nav's italic tagline so logo + CTA fit on a phone */
  .hm-nav-tag{display:none !important;}
  /* Heading scale */
  h1[style]{font-size:28px !important;}
  h2[style]{font-size:24px !important;}
  [style*="font-size:60px"]{font-size:40px !important;}
}

/* Legal pages */
@media (max-width: 600px){
  [style*="padding:44px 32px 72px"]{padding:32px 18px 56px !important;}
  [style*="padding:14px 32px"]{padding-left:18px !important;padding-right:18px !important;}
}

/* ============================================================
   MOTION LAYER (ported from NJCIC)
   Condensing sticky nav, hover lifts, count-up, progress bar.
   All gated on .js-reveal + prefers-reduced-motion.
   ============================================================ */

/* -- Scroll progress bar -- */
.hm-progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:0 50%;background:linear-gradient(90deg,#E8853D,#F5A94D);z-index:200;pointer-events:none;will-change:transform}

/* -- Condensing sticky header -- */
.hm-nav{transition:padding .28s cubic-bezier(0.16,1,0.3,1),box-shadow .28s cubic-bezier(0.16,1,0.3,1),background-color .28s ease}
.hm-nav .hm-nav-inner{transition:padding-top .28s cubic-bezier(0.16,1,0.3,1),padding-bottom .28s cubic-bezier(0.16,1,0.3,1)}
.hm-nav img{transition:height .28s cubic-bezier(0.16,1,0.3,1)}
.hm-nav.hm-scrolled{box-shadow:0 6px 20px rgba(13,31,48,0.10)}
.hm-nav.hm-scrolled .hm-nav-inner{padding-top:8px !important;padding-bottom:8px !important}
.hm-nav.hm-scrolled img{height:24px !important}

/* -- Card hover lift (light cards + dark tiles) -- */
.hm-lift{transition:transform .3s cubic-bezier(0.16,1,0.3,1),box-shadow .3s cubic-bezier(0.16,1,0.3,1),border-color .3s ease}
.hm-lift:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(13,31,48,0.14);border-color:#C8D3E0}
.hm-lift-dark{transition:transform .3s cubic-bezier(0.16,1,0.3,1),background-color .3s ease,border-color .3s ease}
.hm-lift-dark:hover{transform:translateY(-3px);background:rgba(255,255,255,0.09) !important;border-color:rgba(245,169,77,0.4) !important}

/* -- CTA buttons: lift + sheen -- */
.hm-btn{position:relative;overflow:hidden;transition:transform .22s cubic-bezier(0.16,1,0.3,1),box-shadow .22s cubic-bezier(0.16,1,0.3,1),background-color .22s ease}
.hm-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(232,133,61,0.42)}
.hm-btn:active{transform:translateY(0)}
.hm-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,0.35),transparent);transform:skewX(-18deg);transition:left .6s cubic-bezier(0.16,1,0.3,1);pointer-events:none}
.hm-btn:hover::after{left:130%}

/* -- Text links nudge -- */
.hm-nudge{display:inline-flex;align-items:center;gap:6px}
.hm-nudge svg,.hm-nudge i{transition:transform .25s cubic-bezier(0.16,1,0.3,1)}
.hm-nudge:hover svg,.hm-nudge:hover i{transform:translateX(3px)}

/* -- Count-up numbers avoid reflow jitter -- */
.hm-count{font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){
  .hm-progress{display:none}
  .hm-nav,.hm-nav .hm-nav-inner,.hm-nav img,.hm-lift,.hm-lift-dark,.hm-btn{transition:none !important}
  .hm-lift:hover,.hm-lift-dark:hover,.hm-btn:hover{transform:none !important}
  .hm-btn::after{display:none}
}