/* ============================================================================
   PHASE 2 — GreenSutra Interaction Recipes (LIVE LAYER)
   Enqueued LATE by gss-interactions.php so it wins by source order. Five recipes
   driven by --gss-* tokens (inversion / raise / link / CTA / field) + scoped
   Ohio-balloon killswitch + reduced-motion.

   TOUCH SAFETY (2026-06-23): the hover recipes are wrapped in @media (hover: hover)
   so a tap on a touch device never leaves a non-navigating element (filter chip,
   FAQ toggle, form option) stuck in the inverted/raised state ("sticky :hover").
   :focus-visible is kept WITH the hover rules — it only fires for keyboard nav
   (never on tap), and keyboard users are on hover-capable devices. Always-on,
   device-independent rules (CTA resting fill, input/button focus rings, the Ohio
   killswitch) stay OUTSIDE the media query.
   ============================================================================ */
:root{ --gss-link-hover:#5DC97B; }   /* leaf — legible link accent on the dark ground */

/* ============================================================================
   ALWAYS-ON (device-independent — not hover-dependent, never sticks on touch)
   ============================================================================ */

/* CTA resting fill — brand #047122 + white, every page (owner brand rule) */
.cta, .site-nav-cta{
  background:var(--gss-cta-bg)!important; border-color:var(--gss-cta-bg)!important; color:var(--gss-cta-fg)!important;
}
.cta *, .site-nav-cta *{ color:var(--gss-cta-fg)!important; }

/* FIELD focus ring — correct feedback when a field is focused on ANY device */
.gss-finder-search:focus-within,
.gss-cbam-discovery .frm_forms input:focus, .gss-cbam-discovery .frm_forms textarea:focus,
.gss-cbam-discovery .frm_forms select:focus,
body.gss-svc-page .gss-formhost input:focus, body.gss-svc-page .gss-formhost textarea:focus,
body.gss-svc-page .gss-formhost select:focus{
  border-color:var(--gss-raise-border)!important; box-shadow:var(--gss-focus-ring)!important;
}

/* Keyboard focus ring on buttons (:focus-visible fires for keyboard only, never on tap) */
.gss-btn:focus-visible, .gss-finder-submit:focus-visible, .gss-finder-more:focus-visible,
.gss-guide .gg-btn:focus-visible, .gss-foot .ff-cta:focus-visible,
.gss-cbam-discovery .frm_forms button.frm_button_submit:focus-visible{
  outline:none!important; box-shadow:var(--gss-focus-ring)!important;
}

/* Ohio balloon killswitch — scoped to our dark surfaces (generic content keeps Ohio
   default). Removing the background-IMAGE is harmless on touch. */
body.gss-guide-page a:hover, body.gss-guide-page a:focus-visible,
body.gss-svc-page a:hover, body.gss-svc-page a:focus-visible,
body.gss-listings a:hover, body.gss-listings a:focus-visible,
.gs-codex-page a:hover, .gss-foot a:hover{ background-image:none!important; }

/* ============================================================================
   HOVER + KEYBOARD-FOCUS recipes — gated so a touch tap can't leave them stuck.
   ============================================================================ */
@media (hover: hover){

  /* ---- 1. INVERSION — bordered boxes → parchment + ink + green-deep ---- */
  .gss-step:hover, .gss-step:focus-visible{ background:var(--gss-hover-bg)!important; border-color:var(--gss-hover-border)!important; }
  .gss-step:hover .sn{ color:var(--gss-hover-accent)!important; }
  .gss-step:hover h3{ color:var(--gss-hover-fg)!important; }
  .gss-step:hover p{ color:var(--gss-hover-fg-soft)!important; }

  .gss-table tbody tr:hover{ background:var(--gss-hover-bg)!important; }
  .gss-table tbody tr:hover td, .gss-table tbody tr:hover td *{ color:var(--gss-hover-fg)!important; }
  .gss-table tbody tr:hover .em{ color:var(--gss-hover-accent)!important; }

  .gss-faq summary:hover{ background:var(--gss-hover-bg)!important; color:var(--gss-hover-fg)!important; border-radius:var(--gsd-radius,2px); }
  .gss-faq summary:hover *{ color:var(--gss-hover-fg)!important; }
  .gss-faq summary:hover .pm::before, .gss-faq summary:hover .pm::after{ background:var(--gss-hover-accent)!important; }

  .gss-rel:hover, .gss-rel:focus-visible{ background:var(--gss-hover-bg)!important; border-color:var(--gss-hover-border)!important; }
  .gss-rel:hover .rk{ color:var(--gss-hover-fg-soft)!important; }
  .gss-rel:hover .rt{ color:var(--gss-hover-fg)!important; }
  .gss-rel:hover .ra{ color:var(--gss-hover-accent)!important; }

  .gss-fchip:hover, .gss-fchip:focus-visible,
  .gss-finder-more:hover, .gss-finder-more:focus-visible{
    background:var(--gss-hover-bg)!important; border-color:var(--gss-hover-border)!important; color:var(--gss-hover-fg)!important;
  }

  .header:not(.-mobile) .menu > li > .sub-menu:not(.sub-menu-wide) > li > a.menu-link:hover,
  .header:not(.-mobile) .menu > li > .sub-menu:not(.sub-menu-wide) > li > a.menu-link:focus-visible{
    background:var(--gss-hover-bg)!important; color:var(--gss-hover-fg)!important; padding-left:18px!important;
  }

  .gss-guide .gg-chip:hover, .gss-guide .gg-chip:focus-visible,
  .gss-guide .gg-sources li a:hover, .gss-guide .gg-sources li a:focus-visible{
    background-image:none!important; background-color:var(--gss-hover-bg)!important; border-color:var(--gss-hover-border)!important;
  }
  .gss-guide .gg-chip:hover, .gss-guide .gg-chip:hover *,
  .gss-guide .gg-chip:focus-visible, .gss-guide .gg-chip:focus-visible *,
  .gss-guide .gg-sources li a:hover, .gss-guide .gg-sources li a:hover *,
  .gss-guide .gg-sources li a:focus-visible, .gss-guide .gg-sources li a:focus-visible *{ color:var(--gss-hover-fg)!important; }

  .gss-cbam-discovery .frm_forms .frm_radio label:hover,
  .gss-cbam-discovery .frm_forms .frm_checkbox label:hover{
    background:var(--gss-hover-bg)!important; border-color:var(--gss-hover-border)!important; color:var(--gss-hover-fg)!important;
  }
  .gss-cbam-discovery .frm_forms .frm_radio label:hover *,
  .gss-cbam-discovery .frm_forms .frm_checkbox label:hover *{ color:var(--gss-hover-fg)!important; }

  /* ---- 2. RAISE — media cards: border + lift + zoom + nudge ---- */
  .gss-story-card:hover, .gss-card:hover, .gss-qa-card:hover,
  .gss-fcard:hover, .gss-guide .gg-rcard:hover,
  .gss-story-card:focus-visible, .gss-fcard:focus-visible, .gss-guide .gg-rcard:focus-visible{
    border-color:var(--gss-raise-border)!important; transform:translateY(var(--gss-raise-lift))!important;
  }
  .gss-guide .gg-rcard:hover{ background-image:none!important; background-color:var(--gg-panel,#11150F)!important; }
  .gss-guide .gg-rcard:hover .gg-rcard__k{ color:var(--gg-faint,#8C9485)!important; }
  .gss-guide .gg-rcard:hover .gg-rcard__t{ color:#fff!important; }
  .gss-guide .gg-rcard:hover .gg-rcard__d{ color:var(--gg-mut,#B5B3A8)!important; }
  .gss-guide .gg-rcard:hover .gg-rcard__ic, .gss-guide .gg-rcard:hover .gg-rcard__ic svg,
  .gss-guide .gg-rcard:hover .gg-rcard__arr{ color:var(--gss-raise-border)!important; }
  .gss-story-card .simg img, .gss-fcard .gss-fc-img img{ transition:transform var(--gss-dur) var(--gss-ease)!important; }
  .gss-story-card:hover .simg img, .gss-fcard:hover .gss-fc-img img{ transform:scale(var(--gss-img-zoom))!important; }
  .gss-qa-card:hover .qarr, .gss-fcard:hover .gss-fc-arr .x, .gss-guide .gg-rcard:hover .gg-rcard__arr{
    transform:translateX(var(--gss-nudge))!important;
  }

  /* ---- 3. LINK — inline/list text links: leaf + underline ---- */
  .gss-guide a:hover, .gss-guide a:focus-visible,
  .gss-guide .gg-toc-list a:hover, .gss-guide .gg-toc-list a:focus-visible,
  .gss-guide .gg-crumb a:hover, .gss-guide .gg-crumb a:focus-visible,
  .gss-guide .gg-railcta__links a:hover, .gss-guide .gg-railcta__links a:focus-visible,
  .gss-svc .gss-kicker--trail a:hover, .gss-svc .gss-kicker--trail a:focus-visible,
  .gss-foot .ff-links a:hover, .gss-foot .ff-links a:focus-visible,
  .gss-foot .ff-meta-links a:hover, .gss-foot .ff-meta-links a:focus-visible,
  .gss-foot .ff-legal-links a:hover, .gss-foot .ff-legal-links a:focus-visible,
  .header:not(.-mobile) .menu .gss-mega-services .gss-rail .gss-all > a.menu-link:hover,
  .header:not(.-mobile) .menu .gss-mega-services .gss-rail .gss-all > a.menu-link:focus-visible{
    color:var(--gss-link-hover)!important; text-decoration:underline!important; text-underline-offset:3px!important;
    background-image:none!important; background-color:transparent!important; transform:none!important;
  }
  .gss-guide .gg-toc-list a:hover{ border-left-color:var(--gss-link-hover)!important; }

  /* ---- 4. CTA hover-darken (resting fill is always-on above) ---- */
  .cta:hover, .cta:focus-visible, .site-nav-cta:hover, .site-nav-cta:focus-visible{
    background:var(--gss-cta-hover)!important; border-color:var(--gss-cta-hover)!important;
  }
  .gss-btn--primary:hover, .gss-finder-submit:hover,
  .gss-guide .gg-btn--primary:hover,
  .gss-cbam-discovery .frm_forms button.frm_button_submit:hover,
  .gss-cbam-cta__btn:hover, .gss-foot .ff-cta:hover{ background:var(--gss-cta-hover)!important; }
  .gss-guide .gg-btn:hover, .gss-foot .ff-cta:hover{ transform:none!important; }

  /* ---- Homepage journal/story cards — RAISE (owner-approved 2026-06-22) ---- */
  .article-card:hover, .article-card:focus-visible,
  .bull-lead:hover, .bull-lead:focus-visible,
  .bull-fr:hover, .bull-fr:focus-visible{
    background:var(--gsd-surface)!important; border-color:var(--gss-raise-border)!important; color:var(--gsd-fg)!important;
  }
  .article-card:hover h3, .bull-lead:hover .bl-title,
  .bull-fr:hover .bull-fr-title{ color:var(--gsd-fg)!important; }
  .article-card:hover .article-meta, .article-card:hover .article-meta .dot,
  .article-card:hover .article-author,
  .bull-lead:hover .bl-deck, .bull-lead:hover .bl-meta,
  .bull-lead:hover .bl-meta .dot,
  .bull-fr:hover .bull-num, .bull-fr:hover .bull-fr-meta{ color:var(--gsd-fg-faint)!important; }
  .article-card:hover .art-more,
  .bull-lead:hover .bl-cue,
  .bull-fr:hover .bull-fr-cat, .bull-fr:hover .bulletin-arrow{ color:var(--gss-link-hover)!important; }
  .article-card:hover .article-author{ border-top-color:var(--gsd-line)!important; }
  .bull-fr:hover::before{ background:var(--gss-raise-border)!important; }

}  /* end @media (hover: hover) */

/* ============================================================================
   Reduced motion — neutralize every recipe transform (applies on any device)
   ============================================================================ */
@media (prefers-reduced-motion:reduce){
  .gss-story-card, .gss-card, .gss-qa-card, .gss-fcard, .gss-guide .gg-rcard,
  .gss-story-card .simg img, .gss-fcard .gss-fc-img img, .gss-qa-card .qarr,
  .gss-fcard .gss-fc-arr .x, .gss-guide .gg-rcard__arr, .gss-guide .gg-btn{ transition:none!important; }
  .gss-story-card:hover, .gss-card:hover, .gss-qa-card:hover, .gss-fcard:hover, .gss-guide .gg-rcard:hover{ transform:none!important; }
  .gss-story-card:hover .simg img, .gss-fcard:hover .gss-fc-img img{ transform:none!important; }
  .gss-qa-card:hover .qarr, .gss-fcard:hover .gss-fc-arr .x, .gss-guide .gg-rcard:hover .gg-rcard__arr{ transform:none!important; }
}