/*
 * Final site interaction QA.
 * - Desktop destination mega-menu: every destination is a deliberate card.
 * - Mobile public pages: every tappable control gives immediate touch feedback.
 * Keep this last globally; homepage imports it last again because route CSS loads later.
 * Admin pages are intentionally excluded by requiring the public .site-header.
 */

/* Desktop destination menu: avoid one highlighted tile floating among bare text links. */
@media (min-width: 901px) {
  .site-destination-menu {
    width: min(760px, calc(100vw - 48px)) !important;
    padding: 18px !important;
    gap: 14px !important;
    background: #fff !important;
  }

  .site-destination-menu .site-menu-column {
    padding: 0 !important;
    border-left: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .site-destination-menu .site-menu-column > p {
    margin: 0 0 2px !important;
    padding: 0 4px 10px !important;
  }

  .site-destination-menu .site-menu-column > a:not(.site-menu-all) {
    min-width: 0 !important;
    min-height: 78px !important;
    padding: 13px 14px !important;
    justify-content: center !important;
    border: 1px solid #dde6e8 !important;
    border-radius: 8px !important;
    background: #f8faf9 !important;
    color: #153e4d !important;
    box-shadow: none !important;
    transition:
      background-color 160ms cubic-bezier(.23,1,.32,1),
      border-color 160ms cubic-bezier(.23,1,.32,1),
      transform 160ms cubic-bezier(.23,1,.32,1),
      box-shadow 180ms cubic-bezier(.23,1,.32,1) !important;
  }

  .site-destination-menu .site-menu-column > a:not(.site-menu-all) strong {
    font-size: 14px !important;
    line-height: 1.3 !important;
    color: #123d4c !important;
  }

  .site-destination-menu .site-menu-column > a:not(.site-menu-all) small {
    margin-top: 6px !important;
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: #6b7d84 !important;
  }

  .site-destination-menu .site-menu-column > a:not(.site-menu-all).active {
    border-color: #d2c07b !important;
    background: #f8f4e8 !important;
    box-shadow: inset 3px 0 0 #d7b34e !important;
  }
}

@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  .site-destination-menu .site-menu-column > a:not(.site-menu-all):hover {
    transform: translateY(-2px) !important;
    border-color: #cbd9dc !important;
    background: #eef4f4 !important;
    box-shadow: 0 8px 20px rgba(6, 45, 58, .07) !important;
  }

  .site-destination-menu .site-menu-column > a:not(.site-menu-all).active:hover {
    border-color: #c9b063 !important;
    background: #f7f1df !important;
  }
}

/* Mobile touch feedback: public pages only. SiteHeader returns null on /admin. */
@media (max-width: 900px) {
  body:has(.site-header) :where(a, button, summary, [role="button"], [role="tab"]) {
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(237, 196, 94, .18);
  }

  body:has(.site-header) :where(
    main a,
    main button,
    .site-header a,
    .site-header button,
    .site-footer a,
    .site-footer button
  ) {
    transition-property: transform, filter, opacity, background-color, border-color !important;
    transition-duration: 110ms !important;
    transition-timing-function: cubic-bezier(.23, 1, .32, 1) !important;
  }

  /* Plain links acknowledge touch without shifting surrounding text. */
  body:has(.site-header) :where(
    main a,
    .site-footer a
  ):active {
    opacity: .68 !important;
  }

  /* Buttons and card-like links get a small physical press. */
  body:has(.site-header) :where(
    button,
    [role="button"],
    [role="tab"],
    .site-header-cta,
    .gl-button,
    .gl-exam-grid a,
    .gl-intent-grid > article > a,
    .gl-intent-grid nav a,
    .home-destination-card,
    .home-destination-mini,
    .home-destination-more-toggle,
    .home-comparison-toggle,
    .home-comparison-assist a,
    .gl-case-grid-detailed > article a,
    .case-card-v2 a,
    .official-portals a,
    .home-exam-network a,
    .exam-network-tabs button,
    .exam-network-info-cta,
    .conversion-page a,
    .destination-page a,
    .destinations-directory a,
    .seo-v4 a,
    .exam-page a,
    [data-core-exam-page] a,
    .insights-page a,
    .insight-article a,
    .test-centres-page a,
    .more-exams-page a,
    .official-directory a
  ):active {
    transform: scale(.975) !important;
    filter: brightness(.93) !important;
    opacity: .9 !important;
  }

  /* Mobile navigation needs the clearest feedback because a route change can take a moment. */
  body:has(.site-header) .site-nav > a:active,
  body:has(.site-header) .site-nav-trigger:active,
  body:has(.site-header) .site-mega-menu .site-menu-column > a:active,
  body:has(.site-header) .site-mega-menu .site-menu-all:active {
    transform: scale(.985) !important;
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(237, 196, 94, .42) !important;
    opacity: 1 !important;
    filter: brightness(1.06) !important;
  }

  body:has(.site-header) .site-menu-button:active {
    transform: scale(.92) !important;
    opacity: .72 !important;
  }

  /* FAQ/details also acknowledge the press before the content expands. */
  body:has(.site-header) :where(.gl-faq summary, .faq-list summary, .seo-v4 details summary, [data-core-exam-page] details summary):active {
    background-color: rgba(7, 75, 91, .07) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body:has(.site-header) :where(a, button, summary, [role="button"], [role="tab"]):active {
    transform: none !important;
  }
}