/* FC-HOVER (#135, R-76; from FuelChief's old drop-downs): two Menu tab options of Shared data › Header, menu and footer,
   loaded by site/header-menu.cshtml only when one of them is on, so a site without them gets nothing from this file.
   Colours come from the site's theme (accent, plain); sizes are the source's and can be tuned through the --menu-tile-*
   properties.

   1. Page cards as photo tiles (site-menu--tiles), computers (992 px up, not the drawer): a menu item that shows its
      pages as cards opens a full-width panel under the header; each card is a tile: the page's card photo under a light
      shade, its name at the top, "Learn more" with a line and an arrow at the bottom. Pointing at a tile (or keyboard
      focus) lays the accent colour over the photo (0.2 s linear) and runs the line to the tile's edge (0.3 s linear).
      Opening and closing stay as the menu's other options make them. The drawer keeps the plain list.
   2. Pages under each link: in the phone menu only (site-menu--sub-phone-only): on computers a drop-down link that has
      pages under it is a plain link (no arrow, no flyout); the drawer keeps them (a list or a sliding panel). */

@media (min-width: 992px) {
  .site-menu--tiles {
    --menu-tile-panel-bg: var(--theme-plain-bg, #ffffff);
    --menu-tile-panel-pad: 20px;
    --menu-tile-gap: 30px;
    --menu-tile-height: 300px;
    --menu-tile-pad: 30px;
    --menu-tile-radius: 3px;
    --menu-tile-text: #ffffff;
    --menu-tile-shade: rgba(0, 0, 0, 0.35);
    --menu-tile-shade-hover: color-mix(in srgb, var(--theme-accent-bg, #b00020) 80%, transparent);
    --menu-tile-title-size: 1.375rem;
    --menu-tile-title-weight: var(--fw-heading, 800);
    --menu-tile-more-size: 0.8125rem;
    --menu-tile-more-weight: var(--fw-bold, 700);
    --menu-tile-line-width: 150px;
  }
  /* The panel spans the header: the list and the nav stop being its containing block. */
  .site-menu--tiles.is-ready:not(.is-drawer) :is(.site-nav, .site-nav__list) { position: static; }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__item--panel.is-open > .site-nav__panel--cards {
    left: 0;
    right: 0;
    top: 100%;
    padding: var(--menu-tile-panel-pad);
    background: var(--menu-tile-panel-bg);
    border-radius: 0 0 5px 5px;
    box-shadow: none;
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__panel-links { display: none; }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__panel--cards .site-nav__cards { gap: var(--menu-tile-gap); }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card {
    position: relative;
    isolation: isolate;
    justify-content: space-between;
    gap: var(--space-4, 16px);
    height: var(--menu-tile-height);
    padding: var(--menu-tile-pad);
    overflow: hidden;
    border-radius: var(--menu-tile-radius);
    color: var(--menu-tile-text);
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-photo {
    position: absolute;
    inset: 0;
    z-index: -2;
    aspect-ratio: auto;
    border-radius: inherit;
    background: var(--theme-deep-bg, #222222);
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-color: var(--menu-tile-shade);
    transition: background-color 0.2s linear;
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card:is(:hover, :focus-visible)::before { background-color: var(--menu-tile-shade-hover); }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-name {
    font-family: var(--font-display, inherit);
    font-size: var(--menu-tile-title-size);
    font-weight: var(--menu-tile-title-weight);
    line-height: 1.25;
    letter-spacing: -0.03em;
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-more {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: var(--menu-tile-line-width);
    max-width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid currentColor;
    color: inherit;
    font-size: var(--menu-tile-more-size);
    font-weight: var(--menu-tile-more-weight);
    line-height: 1;
    text-transform: uppercase;
    transition: width 0.3s linear;
  }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card-more .action-arrow { flex: none; width: 20px; height: 18px; }
  .site-menu--tiles.is-ready:not(.is-drawer) .site-nav__card:is(:hover, :focus-visible) .site-nav__card-more { width: 100%; text-decoration: none; }

  /* Pages under each link, phone menu only: on computers the link alone. */
  .site-menu--sub-phone-only.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__parent-link { display: block; }
  .site-menu--sub-phone-only.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__toggle,
  .site-menu--sub-phone-only.is-ready:not(.is-drawer) .site-nav__subitem > .site-nav__sub--third { display: none; }
}