/* FC-HOVER (R-76; lead 27 Oct 2026: "a few places red mouse over and menus different than current site"): FuelChief's
   hover, focus and drop-down looks as the old site, on top of master's FC-HOVER options (Menu: page cards as photo tiles,
   pages under each link in the phone menu only; Feature grid "On pointer"; Steps "Accent colour when pointed at"), which
   Code/SiteParts/FuelChiefHoverOptions.cs switches on. Values computed on the capture (port/capture, old CSS bundle):
   the audit table is qa/build/FC-HOVER.md. Loaded last (Code/SiteStyles/FuelChiefLook.cs). */

/* ---- Header, computers (from 1200 px) ---- */
@media (min-width: 1200px) {
  /* Top links: pointing at the menu dims every top link to half (0.3 s), the one under the mouse stays #fafafa; no red,
     no underline (old .site-header__nav:hover … opacity .5; the current page is not marked either). */
  .site-header--menu .site-nav__list > .site-nav__item > :is(.site-nav__link, .site-nav__toggle) {
    text-decoration: none;
    transition: color 0.3s ease, opacity 0.3s ease;
  }
  .site-header--menu .site-nav__list:hover > .site-nav__item > :is(.site-nav__link, .site-nav__toggle) { opacity: 0.5; }
  .site-header--menu .site-nav__list > .site-nav__item > .site-nav__link:hover,
  .site-header--menu .site-nav__list > .site-nav__item:has(> .site-nav__link:hover) > .site-nav__toggle { opacity: 1; color: #fafafa; }
  .site-header--menu .site-nav__list > .site-nav__item > :is(.site-nav__link, .site-nav__link[aria-current]) { text-decoration: none; }

  /* List drop-downs (Expertise, Company), as the old level-2 list: under the bar, as wide as its longest link, square
     top, 3 px round foot; each link 14 px 700 #eee on navy at 50 % (blurred 25 px), 10 / 15 px in, a red 1 px line under
     each but the last; pointing: #fafafa on solid navy with a 6 px red bar at the left (0.2 s linear). */
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__list > .site-nav__item--parent > .site-nav__sub:not(.site-nav__panel) {
    top: var(--fc-sub-top, 100%);
    min-width: 0;
    width: max-content;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0 0 3px 3px;
    box-shadow: none;
  }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li:not(.site-nav__overview):not(.site-nav__back-item) > a.site-nav__sublink {
    position: relative;
    z-index: 0;
    display: flex;
    align-items: center;
    min-height: 35px;
    padding: 10px 15px;
    border-bottom: 1px solid #da2031;
    color: #eeeeee;
    font-size: 14px;
    font-weight: 700;
    line-height: 14px;
    letter-spacing: 0;
    white-space: nowrap;
    text-decoration: none;
    transition: color 0.2s linear;
  }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li:last-child > a.site-nav__sublink { border-bottom: 0; }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li > a.site-nav__sublink::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(45, 49, 65, 0.5);
    -webkit-backdrop-filter: blur(25px);
    backdrop-filter: blur(25px);
    transition: background-color 0.3s ease;
  }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li > a.site-nav__sublink::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;
    background: #da2031;
    transition: width 0.2s linear;
  }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li > a.site-nav__sublink:is(:hover, :focus-visible) { color: #fafafa; }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li > a.site-nav__sublink:is(:hover, :focus-visible)::before { width: 6px; }
  .site-header--menu .site-menu.is-ready:not(.is-drawer) .site-nav__sub:not(.site-nav__panel) > li > a.site-nav__sublink:is(:hover, :focus-visible)::after { background-color: #2d3141; }

  /* Photo tiles (master site-menu--tiles), tuned to the old .content-nodes panel: #fafafa, 20 px in, tiles 300 px high
     and 30 px apart, 3 px corners, navy at 35 % over the photo (red at 80 % when pointed), 30 px in; the name 22 px 800
     #eee; "Learn more" 13 px 700, its #eee line 150 px, the 20 x 18 arrow at its end. */
  .site-header--menu .site-menu--tiles {
    --menu-tile-panel-bg: #fafafa;
    --menu-tile-text: #eeeeee;
    --menu-tile-shade: rgba(45, 49, 65, 0.35);
    --menu-tile-shade-hover: rgba(218, 32, 49, 0.8);
    --menu-tile-title-size: 22px;
    --menu-tile-title-weight: 800;
    --menu-tile-more-size: 13px;
    --menu-tile-more-weight: 700;
  }
  .site-header--menu .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-name { color: #eeeeee; line-height: 27.5px; }
  .site-header--menu .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-more { padding: 15px 0; line-height: 13px; }
  .site-header--menu .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card:hover .site-nav__card-name { text-decoration: none; }
}

/* Phone numbers in the bar: red words and a red phone on pointing (old .site-header__buttons .btn:hover, 0.3 s). */
.site-header--menu .site-menu__phone { transition: color 0.3s ease; }
.site-header--menu .site-menu__phone::before { transition: background-image 0.3s ease; }
.site-header--menu a.site-menu__phone:is(:hover, :focus-visible) { color: #da2031; text-decoration: none; }
.site-header--menu a.site-menu__phone:is(:hover, :focus-visible)::before { background-image: url("/images/site/phone-red-header.svg"); }

/* Menu button (below 1200 px): the red bars turn dark red on pointing (0.3 s ease-in-out). */
.site-header .site-menu__toggle .site-menu__bars span { transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out, opacity 0.3s ease-in-out; }
.site-header .site-menu__toggle:hover .site-menu__bars span { background: #c4161c; }

/* Phone menu: a link moves 20 px right on pointing, #fff (old .mobile-navigate__nav-link:hover, 0.3 s ease); the current
   page is not underlined. */
.site-header--menu .site-menu--wide-drawer.is-ready.is-drawer :is(.site-nav__link, .site-nav__sublink) { text-decoration: none; transition: color 0.3s ease, padding 0.3s ease; }
.site-header--menu .site-menu--wide-drawer.is-ready.is-drawer :is(.site-nav__link, .site-nav__sublink):hover { padding-left: 20px; color: #ffffff; }

/* ---- Sections ---- */

/* Feature grid "Card turns to the accent colour": the old cards' #fafafa words and 0.2 s linear. */
.feature-grid--pointer-accent { --fg-accent-text: #fafafa; }
/* Capabilities (Icons, intro beside; old .bg-grey-shield): the card turns red, its words stay navy and the icon sits on a
   navy square (its 50 px box, 3 px corners) (0.3 s linear). */
.feature-grid--pointer-accent.feature-grid--intro-beside { --fg-accent-text: #2d3141; --fg-accent-icon: none; --fg-accent-fade: 0.3s linear; }
.feature-grid--pointer-accent.feature-grid--intro-beside .feature-grid__icon { border-radius: 3px; transition: background-color 0.3s linear; }
.feature-grid--pointer-accent.feature-grid--intro-beside .feature-grid__item:is(:hover, :focus-within) .feature-grid__icon { background-color: #2d3141; }
/* Home industry cards ("Line under the link grows"): the line runs out from the old 150 px, the arrow to the far end. */
.feature-grid--pointer-line.feature-grid--photo-cards .feature-grid__more { padding-bottom: 12px; }
/* Item titles keep their colour on pointing (no red link words, as the old cards). */
.feature-grid:is(.feature-grid--pointer-accent, .feature-grid--pointer-line, .feature-grid--pointer-still) .feature-grid__link:is(:hover, :focus) { color: inherit; text-decoration: none; }

/* Feature grid Groups (old .red-grey-features): the pointed card's title and words turn #fafafa (the icon turns white
   through --theme-accent-icon, fc-tokens.css). */
.feature-grid--groups .feature-grid__item:is(:hover, :focus-within) .feature-grid__card :is(.feature-grid__title, .feature-grid__text, .feature-grid__link) { color: #fafafa; }

/* Steps "Accent colour when pointed at" (old .panel-sticky-content step cards): #fafafa words. */
.steps--pointer-accent { --steps-accent-text: #fafafa; }

/* Image and text on white, "View the team", the contact strip's Send: red on pointing, dark red pressed (the old
   .btn-secondary / .contact-form .btn hover). */
.image-text.band--plain .image-text__button { --btn-hover-bg: var(--fc-red); --btn-hover-fg: #eeeeee; }
.team .team__all .btn { transition: background-color 0.3s linear, border-color 0.3s linear, color 0.3s linear; }
.team .team__all .btn:is(:hover, :focus-visible) { background: var(--fc-red); border-color: var(--fc-red); color: #eeeeee; }
.team .team__all .btn:hover:active { background: #c4161c; border-color: #c4161c; }
.form-block--panel .form-block__card .site-form__submit:is(:hover, :focus-visible) { background-color: var(--fc-red); border-color: var(--fc-red); color: #eeeeee; }
.form-block--panel .form-block__card .site-form__submit:hover:active { background-color: #c4161c; border-color: #c4161c; }

/* Team cards: the contact words stay red and are underlined on pointing, dark red only while pressed (old
   .Profile-contact a:hover #da2031, :active #c4161c). */
.team .team__person .team__contact-link:hover { color: #da2031; text-decoration: underline; }
.team .team__person .team__contact-link:hover:active { color: #c4161c; }
/* "Connect on LinkedIn" is dark until pointed at (old .Profile-social-Linkedin a span, red on hover). */
.team .team__person .team__contact-link--linkedin:not(:hover) { color: #222123; }

/* Article cards slider: "Read more" opens 5 px towards its arrow (old .card:hover .btn gap 15 px, 0.3 s linear). */
.article-cards--slider .page-card__more { transition: gap 0.3s linear; }
.article-cards--slider .page-card:hover .page-card__more { gap: 15px; }

/* Listing cards (Case Studies, Insights; old .blogpost and the highlighted card): the card turns #fafafa with a soft
   shadow; the photo goes navy at 80 %, blurred 6 px, with the small red shield in its middle; "Read more" gets a red line
   (0.2 s linear). */
.article-cards--grid .page-card { transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.article-cards--grid .page-card:hover { background-color: #fafafa; border-color: #fafafa; box-shadow: 0 0 25px 0 rgba(34, 33, 35, 0.15); }
.article-cards--grid .page-card__media { position: relative; }
.article-cards--grid .page-card__media::before,
.article-cards--grid .page-card__media::after { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.2s linear; }
.article-cards--grid .page-card__media::after { z-index: 1; background-color: rgba(45, 49, 65, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.article-cards--grid .page-card__media::before { z-index: 2; background: url("/images/site/small-shield.svg") center / 26px 30px no-repeat; }
.article-cards--grid .page-card:hover .page-card__media::before,
.article-cards--grid .page-card:hover .page-card__media::after { opacity: 1; }
.article-cards--grid .page-card__more { align-self: flex-start; border-bottom: 1px solid transparent; transition: border-color 0.3s linear; }
.article-cards--grid .page-card:hover :is(.page-card__link, .page-card__title) { text-decoration: none; }
.article-cards--grid .page-card__media > :is(picture, img) { position: relative; z-index: 0; }
.article-cards--grid .page-card:hover .page-card__more { border-bottom-color: #da2031; }

/* the featured card on the listings (one card, photo beside): the same wash and shield inside its 20 px frame */
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside .page-card__media::before,
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside .page-card__media::after { content: ""; opacity: 0; transition: opacity 0.2s linear; }
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside .page-card__media::after { background: rgba(45, 49, 65, 0.8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside .page-card__media::before { z-index: 2; background: url("/images/site/small-shield.svg") center / 26px 30px no-repeat; }
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside:hover .page-card__media::before,
.article-cards.article-cards--grid.article-cards--count-1 .article-card--photo-beside:hover .page-card__media::after { opacity: 1; }

/* Article side column: a related article grows 5 % on pointing (old .related-articles a:hover, 0.3 s ease). */
.article-related .article-related__item { transition: transform 0.3s ease; }
.article-related .article-related__item:hover { transform: scale(1.05); }

/* Photo grid: navy at 30 % over the pointed photo (old .image-row a:hover:before, 0.3 s ease). */
.gallery__tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(45, 49, 65, 0); pointer-events: none; transition: background-color 0.3s ease; }
.gallery__tile:has(.gallery__link:hover)::after { background-color: rgba(45, 49, 65, 0.3); }

/* Listing filter (from 768 px, old .filter .dropdown-menu .btn:hover): no red; the words go from black to #212529. */
.article-cards .article-cards__listing .article-filter__option:not([aria-current="true"]):hover { color: #212529; text-decoration: none; }

/* ---- Footer ---- */
/* Site map links and headings: red and underlined on pointing, dark red pressed, at once (old .col-sitemap a:hover,
   transition none). */
.site-footer .site-footer__column a:hover,
.site-footer .site-footer__heading a:hover { color: #da2031; text-decoration: underline; transition: none; }
.site-footer .site-footer__column a:hover:active,
.site-footer .site-footer__heading a:hover:active { color: #c4161c; }

/* Contact strip fields: a navy line while typing (old div.form input:focus #2d3141; as specific as the field rule in
   fc-sections.css, whose own red :focus never applied). */
.form-block--panel .form-block__card :is(input:not([type="hidden"]):not([type="checkbox"]), textarea):focus { border-color: #2d3141; }