/*
  Product Layer — shared styles.

  Layout and typography live inline on each element: pages are maintained by
  copy-pasting self-contained blocks (see the workflow comments in
  blog/index.html). This file only holds what inline styles can't express —
  base page rules and hover/focus states. The !important is required for a
  state rule to win over the element's own inline declaration.
*/

html { scroll-behavior: smooth; }
body { margin: 0; }
::selection { background: #1F3864; color: #FBF9F5; }

/* Hover states */
.hov-navy:hover         { color: #1F3864 !important; }
.hov-navy-deep:hover    { color: #16294B !important; }
.hov-cream:hover        { color: #FBF9F5 !important; }
.hov-bg-navy-deep:hover { background: #16294B !important; }
.hov-bg-navy-tint:hover { background: rgba(31, 56, 100, 0.06) !important; }
.hov-rule-navy:hover    { border-bottom-color: #1F3864 !important; }
.hov-rule-cream:hover   { border-bottom-color: #FBF9F5 !important; }

/* Focus states */
.focus-rule-navy:focus  { border-color: #1F3864 !important; }