/*
 * Hover and focus states, converted from the approved mockup's style-hover
 * attributes. The mockup expressed these as a design-tool attribute that only
 * works inside its own runtime, so they are real CSS here. Focus-visible is
 * paired with hover deliberately: the design defined hover only, and a hover
 * state a keyboard cannot reach would cost us criterion 2.
 */

.hv-1:hover, .hv-1:focus-visible { color:var(--gold-deep); }
.hv-2:hover, .hv-2:focus-visible { background:var(--navy-deep); }
.hv-3:hover, .hv-3:focus-visible { background:var(--navy-deep); }
.hv-4:hover, .hv-4:focus-visible { background:var(--navy-deep); }
.hv-5:hover, .hv-5:focus-visible { background:var(--navy-deep); }
/*
 * Condition tiles used to be ten hard-coded elements, hv-6 through hv-15, one
 * rule per tile carrying the identical declaration. The grid is now a dynamic
 * loop over however many condition articles exist (inc/home-data.php,
 * jcnd_condition_tiles()), so the count is no longer fixed and a numbered
 * class per tile no longer works. One shared class replaces all ten.
 */
.cond-tile:hover, .cond-tile:focus-visible { transform:translateY(-3px);border-color:var(--navy); }
.hv-16:hover, .hv-16:focus-visible { transform:translateY(-3px);border-color:var(--navy); }
.hv-17:hover, .hv-17:focus-visible { background:var(--navy-deep); }
.hv-18:hover, .hv-18:focus-visible { background:#fff; }
.hv-19:hover, .hv-19:focus-visible { background:var(--tint); }
.hv-20:hover, .hv-20:focus-visible { background:var(--tint); }
.hv-21:hover, .hv-21:focus-visible { transform:translateY(-3px);border-color:var(--navy); }
.hv-22:hover, .hv-22:focus-visible { background:var(--navy-deep); }
.hv-23:hover, .hv-23:focus-visible { background:#fff; }
.hv-24:hover, .hv-24:focus-visible { color:#fff; }
.hv-25:hover, .hv-25:focus-visible { color:#fff; }
.hv-26:hover, .hv-26:focus-visible { background:#fff; }
.hv-27:hover, .hv-27:focus-visible { background:#fff; }
.hv-28:hover, .hv-28:focus-visible { background:#fff; }
.hv-29:hover, .hv-29:focus-visible { color:#fff; }
.hv-30:hover, .hv-30:focus-visible { border-color:#fff; }
.hv-31:hover, .hv-31:focus-visible { color:#fff; }
.hv-32:hover, .hv-32:focus-visible { color:#fff; }