/* ============================================================
   ARTICLE EXPERIENCE CLONE LAYER — shared reusable asset
   ------------------------------------------------------------
   Clones the approved Homepage + Resource Center + Authority Hub
   visual language (VIG Experience System 1.0) onto the standard
   New Jersey educational article template. Scoped to
   body[data-vig-template="article"] and loaded LAST so it wins at
   equal specificity without !important and without touching the
   shared base assets (vmx-mobile.css, article-v2.css,
   production-standard.css) or sibling page types.

   Presentation only: no content, copy, headings, semantic order,
   schema, canonical, metadata, links, forms, endpoints, anchor
   IDs, analytics or CTA destinations are changed here.

   Requires the per-page design tokens (--navy, --gold, --goldl,
   --cream, --border, --border-gold, --radius-lg, --td, --tm,
   --white, --shadow-*) which every article defines identically in
   its inline :root block, plus the shared mobile system in
   /assets/css/vmx-mobile.css.

   Companion to /assets/css/authority-hub-clone.css — same design
   language, mapped to the article template class names
   (.blog-hero, .article, .quick-answer, .callout, .county-cta,
   .explore-related, .official-resources, .blog-final-cta ...).
   ============================================================ */

body[data-vig-template="article"]{
  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --ax-shadow-card:0 24px 72px rgba(15,31,56,.22),0 8px 24px rgba(0,0,0,.1);
  --ax-gutter:clamp(1rem,4.6vw,1.35rem);
}
body[data-vig-template="article"] a,
body[data-vig-template="article"] button{-webkit-tap-highlight-color:transparent}

/* ============================================================
   1 · HERO — editorial, readable, content-driven
   Preserve breadcrumb, H1, supporting copy. No poster-scale
   title, no dark-on-dark, no giant empty banner.
   ============================================================ */
body[data-vig-template="article"] .blog-hero{overflow:hidden}
body[data-vig-template="article"] .blog-hero h1{
  font-family:'Cormorant Garamond',serif;font-weight:300;
  color:var(--white);letter-spacing:-.01em;
}
/* Authentic NJ image treatment: calm, never washed out, gold hairline */
body[data-vig-template="article"] .hero-img-wrap{
  background:var(--navy);border-bottom:1px solid rgba(184,156,106,.28);
}
body[data-vig-template="article"] .hero-img-wrap img{
  filter:brightness(.94);
}

/* ============================================================
   2 · KEY ANSWER — approved key-answer card, strong contrast,
   close to the opening. Wording untouched. No oversized pills.
   ============================================================ */
body[data-vig-template="article"] .quick-answer{
  border:1px solid var(--border-gold);
  border-radius:var(--radius-lg,14px);
  box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
body[data-vig-template="article"] .quick-answer::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--gold),var(--goldl));z-index:2;
}
body[data-vig-template="article"] .quick-answer-header h2{
  font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--white);
}
body[data-vig-template="article"] .quick-answer-body>p:first-child{color:var(--td)}

/* ============================================================
   3 · READING EXPERIENCE  (HIGHEST PRIORITY)
   The approved editorial type scale, reading width (~92%),
   line-height and paragraph rhythm are owned by the shared
   /assets/css/vmx-mobile.css system so articles read IDENTICALLY
   to the approved Homepage / Resource Center / Authority Hub —
   we deliberately do NOT introduce a divergent article type scale
   ("do not invent a fourth design language"). This layer only
   guarantees anchor links land clear of the fixed header.
   ============================================================ */
body[data-vig-template="article"] .article :is(h2,h3,h4),
body[data-vig-template="article"] .article [id]{
  scroll-margin-top:calc(84px + env(safe-area-inset-top,0px));
}

/* ============================================================
   4 · GREEN ICON / TEXT RULE
   Checklist & status icons sit fully OUTSIDE the text column,
   keep an 18–22px gutter, never cover the first letter, stay a
   consistent size, and remain visible in reduced-motion mode.
   ============================================================ */
body[data-vig-template="article"] .quick-answer-facts li,
body[data-vig-template="article"] .twr-points li,
body[data-vig-template="article"] .checklist-box li{
  position:relative;list-style:none;padding-left:1.65rem;
}
body[data-vig-template="article"] .quick-answer-facts li::before,
body[data-vig-template="article"] .twr-points li::before,
body[data-vig-template="article"] .checklist-box li::before{
  content:'\2713';position:absolute;left:0;top:.08em;
  width:1.1rem;text-align:center;
  color:var(--gold);font-weight:700;line-height:1.4;flex:none;
}
/* Body-copy bullets: dot stays outside the measure with a clear gutter */
body[data-vig-template="article"] .article ul li{padding-left:1.5rem}
body[data-vig-template="article"] .article ul li::before{left:.15rem;top:.62em}

/* ============================================================
   5 · CARD SYSTEM — map existing elements to approved cards
   without changing their meaning. Do NOT card ordinary text.
   ============================================================ */
/* Warning / "what this means" callout */
body[data-vig-template="article"] .callout{
  border-left:3px solid var(--gold);
  border-radius:0 var(--radius-lg,12px) var(--radius-lg,12px) 0;
  box-shadow:var(--shadow-sm);
}
/* Next-step / option card */
body[data-vig-template="article"] .county-cta{
  border-radius:var(--radius-lg,12px);box-shadow:var(--shadow-md);
  position:relative;overflow:hidden;
}
body[data-vig-template="article"] .county-cta::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
  background:linear-gradient(180deg,var(--gold),var(--goldl));
}
/* "This guide covers" */
body[data-vig-template="article"] .guide-covers-item{transition:transform .3s var(--ease-out)}
/* Official-resource cards — full-width, readable, calm hover */
body[data-vig-template="article"] .or-card,
body[data-vig-template="article"] .resource-card{
  border-radius:var(--radius-lg,12px);border:1px solid var(--border);
  transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out),border-color .3s;
}
body[data-vig-template="article"] .or-card:hover,
body[data-vig-template="article"] .resource-card:hover{
  transform:translateY(-3px);box-shadow:var(--shadow-hover,0 18px 50px rgba(15,31,56,.14));
  border-color:var(--border-gold);
}
/* Related-resource system — approved snap deck on mobile when 4+
   compact image/resource cards; longer legal cards stay full width. */
@media (max-width:768px){
  body[data-vig-template="article"] .explore-related{border-radius:var(--radius-lg,12px)}
  body[data-vig-template="article"] .rs-grid,
  body[data-vig-template="article"] .related-grid{
    display:grid;grid-auto-flow:column;
    grid-auto-columns:min(82%,300px);
    gap:.9rem;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:.25rem var(--ax-gutter) .75rem;margin-inline:calc(-1 * var(--ax-gutter));
    scrollbar-width:none;
  }
  body[data-vig-template="article"] .rs-grid::-webkit-scrollbar,
  body[data-vig-template="article"] .related-grid::-webkit-scrollbar{display:none}
  body[data-vig-template="article"] .rs-card{scroll-snap-align:start}
  /* longer official-resource cards remain full width, stacked */
  body[data-vig-template="article"] .or-cards{grid-template-columns:1fr;gap:.9rem}
}

/* ============================================================
   6 · BUTTONS — approved gold system + sheen microinteraction
   (cloned from the homepage / authority-hub button treatment).
   Destinations and labels unchanged.
   ============================================================ */
body[data-vig-template="article"] .bfc-submit,
body[data-vig-template="article"] .bfc-cta-btn,
body[data-vig-template="article"] .county-cta-btn,
body[data-vig-template="article"] .search-btn{position:relative;overflow:hidden}
body[data-vig-template="article"] .bfc-submit::after,
body[data-vig-template="article"] .bfc-cta-btn::after,
body[data-vig-template="article"] .county-cta-btn::after{
  content:'';position:absolute;top:0;left:-130%;width:55%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-18deg);pointer-events:none;
}
body[data-vig-template="article"] .bfc-submit:hover::after,
body[data-vig-template="article"] .bfc-cta-btn:hover::after,
body[data-vig-template="article"] .county-cta-btn:hover::after{animation:ax-sheen .85s var(--ease-soft)}
@keyframes ax-sheen{to{left:150%}}
body[data-vig-template="article"] .bfc-submit:active,
body[data-vig-template="article"] .bfc-cta-btn:active,
body[data-vig-template="article"] .county-cta-btn:active{transform:translateY(0) scale(.98)}

/* ============================================================
   7 · FORM — approved private-review presentation.
   Readable 16px+ controls, full-width mobile fields, visible
   labels, comfortable spacing. Endpoint / field names / behavior
   handled by the page + conversion-repairs.js (unchanged).
   ============================================================ */
body[data-vig-template="article"] .bfc-field label{color:var(--td);font-weight:600}
body[data-vig-template="article"] .bfc-field input,
body[data-vig-template="article"] .bfc-field select,
body[data-vig-template="article"] .bfc-field textarea{
  font-size:16px;border-radius:10px;width:100%;
}
body[data-vig-template="article"] .bfc-field input:focus,
body[data-vig-template="article"] .bfc-field select:focus,
body[data-vig-template="article"] .bfc-field textarea:focus{
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,156,106,.16);outline:none;
}

/* ============================================================
   8 · FINAL CTA BAND — approved closing band, hero-to-footer
   consistency (never a compressed desktop strip on mobile).
   ============================================================ */
body[data-vig-template="article"] .blog-final-cta h3{
  font-family:'Cormorant Garamond',serif;font-weight:400;color:var(--white);
}
@media (max-width:768px){
  body[data-vig-template="article"] .blog-final-cta{padding:2.5rem var(--ax-gutter)}
  body[data-vig-template="article"] .blog-final-cta .bfc-cta-btn{width:100%;text-align:center}
  body[data-vig-template="article"] .blog-search-section{padding-left:var(--ax-gutter);padding-right:var(--ax-gutter)}
}

/* ============================================================
   9 · STICKY ACTION BAR — Call / Text / Free Review.
   The shared bar is styled & shown/hidden by vmx-mobile.css/js
   (compact, safe-area aware, hidden on desktop, hidden near the
   form/footer). Reinforce the safe-area padding reserve only.
   ============================================================ */
@media (max-width:768px){
  body[data-vig-template="article"]{
    padding-bottom:calc(68px + env(safe-area-inset-bottom,0px));
  }
}

/* ============================================================
   10 · ACCESSIBILITY & REDUCED MOTION
   Visible keyboard focus; honour prefers-reduced-motion; icons
   and contrast remain intact with motion disabled.
   ============================================================ */
body[data-vig-template="article"] a:focus-visible,
body[data-vig-template="article"] button:focus-visible,
body[data-vig-template="article"] input:focus-visible,
body[data-vig-template="article"] select:focus-visible,
body[data-vig-template="article"] .or-card:focus-visible,
body[data-vig-template="article"] .rs-card:focus-visible{
  outline:2px solid var(--gold);outline-offset:2px;border-radius:4px;
}
@media (prefers-reduced-motion:reduce){
  body[data-vig-template="article"] *,
  body[data-vig-template="article"] *::before,
  body[data-vig-template="article"] *::after{
    transition-duration:.01ms !important;animation-duration:.01ms !important;
    animation-iteration-count:1 !important;scroll-behavior:auto !important;
  }
  body[data-vig-template="article"] .bfc-submit:hover,
  body[data-vig-template="article"] .bfc-cta-btn:hover,
  body[data-vig-template="article"] .county-cta-btn:hover,
  body[data-vig-template="article"] .or-card:hover,
  body[data-vig-template="article"] .rs-card:hover{transform:none}
}

/* ============================================================
   11 · DESKTOP EXPERIENCE 1.0  —  wide-screen editorial polish
   ------------------------------------------------------------
   The article's desktop reading rhythm, hero and CTA scale come
   from the shared /article-v2.css desktop layer; this only adds a
   little extra presence to the key-answer card and closing band
   on large screens so the article matches the premium hub / guide
   desktop feel. min-width only — the locked mobile article layout
   (max-width:768px) is untouched.
   ============================================================ */
@media (min-width:1440px){
  body[data-vig-template="article"] .quick-answer{box-shadow:var(--shadow-lg)}
  body[data-vig-template="article"] .blog-final-cta{padding:3.85rem 3rem}
}