/**
 * GraceHola inner-page enhancements (child theme)
 * ------------------------------------------------
 * Loaded ONLY on pages listed in gh_inner_pages() (functions.php), scoped to body.gh-inner.
 * Layout, colours, typography, cards, icons and hover states are all Elementor content.
 * This file adds only the entrance/scroll reveal that Elementor cannot hold (@keyframes
 * safety net + attribute-driven states). Elements opt in with data-gh-in="load|scroll".
 * Uses the `translate` property so it never fights Elementor's `transform` hover effects.
 */
@keyframes gh-in-failsafe{to{opacity:1;translate:0 0}}
@media (scripting:enabled) and (prefers-reduced-motion:no-preference){
  body.gh-inner [data-gh-in]{opacity:0;translate:0 20px;transition:opacity .7s ease,translate .7s cubic-bezier(.22,.61,.36,1);transition-delay:var(--gh-delay,0ms)}
  html:not(.gh-in-ready) body.gh-inner [data-gh-in]{animation:gh-in-failsafe .01s 3s forwards}
  body.gh-inner [data-gh-in].is-in{opacity:1;translate:0 0}
}
@media (prefers-reduced-motion:reduce){
  body.gh-inner [data-gh-in]{opacity:1;translate:none;transition:none;animation:none}
  /* Elementor's hover lift/zoom on the sector cards (Elementor drops nested reduced-motion rules) */
  body.gh-inner .gh-svc2-card,body.gh-inner .gh-svc2-card::after,body.gh-inner .gh-svc2-card .gh-svc2-bg{transition:none!important}
  body.gh-inner .gh-svc2-card:hover,body.gh-inner .gh-svc2-card:focus-within,
  body.gh-inner .gh-svc2-card:hover .gh-svc2-bg,body.gh-inner .gh-svc2-card:focus-within .gh-svc2-bg{transform:none!important}
  html{scroll-behavior:auto!important}
}

/* ------------------------------------------------------------------
 * Sector evidence tabs + testimonial read-more (reusable: any inner page with
 * [data-gh-tabs] / [data-gh-clamp]). Visual styling lives in Elementor global
 * classes (gh-ev-*); this block holds only the JS-driven states.
 * ------------------------------------------------------------------ */
/* Panels: genuinely hidden (display:none). Before JS runs only the default panel shows (no layout jump);
   without JS at all, both panels simply stack and the tab row is hidden. */
@media (scripting:enabled){
  body.gh-inner [data-gh-tabs]:not(.is-init) [data-gh-panel]:not([data-gh-default]){display:none}
  body.gh-inner [data-gh-tabs].is-init [data-gh-panel]:not(.is-active){display:none}
}
@media (scripting:none){ body.gh-inner [data-gh-tabs] [role="tablist"]{display:none} }
body.gh-inner [data-gh-panel][hidden]{display:none!important}

/* Active tab: colour + weight + gold bar (never colour alone) */
body.gh-inner .gh-ev-tab[aria-selected="true"]{background-color:var(--gh-navy);border-color:var(--gh-navy);color:#fff;box-shadow:0 12px 26px rgba(1,40,64,.24)}
body.gh-inner .gh-ev-tab[aria-selected="true"]:hover{background-color:var(--gh-navy)}
body.gh-inner .gh-ev-tab[aria-selected="true"] .gh-ev-tabnum{color:var(--gh-gold)}
body.gh-inner .gh-ev-tab[aria-selected="true"] .gh-ev-tablab{font-weight:700}
body.gh-inner .gh-ev-tab[aria-selected="true"]::after{content:"";position:absolute;inset-inline:18px;inset-block-end:0;height:4px;border-radius:4px 4px 0 0;background:var(--gh-gold)}
@media (forced-colors:active){ body.gh-inner .gh-ev-tab[aria-selected="true"]{outline:3px solid Highlight} }

/* Panel change: short fade/translate, cards stagger very slightly */
@keyframes gh-ev-in{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}
@media (prefers-reduced-motion:no-preference){
  body.gh-inner .gh-ev-panel.is-entering{animation:gh-ev-in .3s cubic-bezier(.22,.61,.36,1) both}
  body.gh-inner .gh-ev-panel.is-entering :is(.gh-ev-card,.gh-ev-card-text,.gh-ev-out,.gh-ev-metric,.gh-ev-prog){animation:gh-ev-in .32s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(70ms + var(--gh-i,0) * 55ms)}
}

/* Testimonial read-more: JS adds .is-clamped (only when the text really overflows) and the toggle button */
body.gh-inner .gh-ev-quote.is-clamped{overflow:hidden;position:relative;transition:max-height .28s ease}
body.gh-inner .gh-ev-quote.is-clamped:not(.is-open){-webkit-mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent);mask-image:linear-gradient(#000 calc(100% - 2.6em),transparent)}
body.gh-inner .gh-ev-more{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:32px;font-family:var(--gh-font-heading);font-weight:600;font-size:13.5px;line-height:1.3;color:var(--gh-royal);text-decoration:underline;text-decoration-color:var(--gh-gold);text-decoration-thickness:2px;text-underline-offset:4px}
body.gh-inner .gh-ev-more[hidden]{display:none}
body.gh-inner .gh-ev-more:hover{color:var(--gh-navy)}
body.gh-inner .gh-ev-more:focus-visible{outline:3px solid var(--gh-sky);outline-offset:3px;border-radius:3px}

@media (prefers-reduced-motion:reduce){
  body.gh-inner .gh-ev-panel,body.gh-inner .gh-ev-panel *{animation:none!important}
  body.gh-inner .gh-ev-quote.is-clamped,body.gh-inner .gh-ev-tab{transition:none!important}
}