/* ---- Material Symbols as a VARIABLE font: the FILL axis animates on hover of the row, card, link or button ---- */
.icon { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; transition: font-variation-settings .25s ease, color .18s ease; }
.icon.ic { font-size: 1.15em; vertical-align: -.2em; margin-right: .4em; color: var(--link); }
svg.flag.ic { display: inline-block; vertical-align: -.15em; margin-right: .45em; color: var(--link); }
.eyebrow .icon.ic, .mono-xxs .icon.ic, .mono-xs .icon.ic { font-size: 1.25em; vertical-align: -.3em; }
.primarynav .icon.ic { font-size: 1.3em; vertical-align: -.32em; margin-right: .3em; color: var(--icon); }
.btn .icon.ic { margin-right: 0; color: inherit; }
.h4 .icon.ic, .h5 .icon.ic, .t .icon.ic, summary .icon.ic { color: var(--link); }
.form label .icon.ic { font-size: 1.2em; vertical-align: -.25em; }
/* the FAQ summary is a 2-column grid (text, chevron); a leading icon needs its own column or it takes the text's */
.faq summary:has(.icon.ic) { grid-template-columns: auto 1fr 24px; }
.faq summary .icon.ic { margin-right: 0; padding-top: 3px; }
a:hover .icon, .btn:hover .icon, .card:hover .icon, .card:hover .icon, li:hover > .icon.ic, li:hover > .t .icon.ic, .q:hover .icon,
.gets div:hover .icon, .sit li:hover .icon, .ways div:hover .icon, .how li:hover .icon, .steps li:hover .icon, .made li:hover .icon,
.kinds li:hover .icon, details:hover .icon.ic, .col:hover .icon, .event:hover .icon.ic, .lede:hover .icon.ic, .eyebrow:hover .icon.ic
{ font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24; }
@media (prefers-reduced-motion: reduce) { .icon { transition: none; } }