/* =========================================================================
   Pinch Africa — local overrides
   - Snappier transitions everywhere
   - Force-show the sticky header (was hidden/translated off-screen on load)
   - Prevent hero title from disappearing on hover (vendor used opacity:0)
   - "Our Assets" mega-menu portal styling
   ========================================================================= */

/* ---------- 1. Snappier animations ------------------------------------- */
/* Multiplier ~0.55 of original. Targets the big hero/header transitions
   without touching scroll-trigger numerics in pinch-scroll.js. */
#new-hero-section .hero-bg,
#new-hero-section .hc-light img,
#new-hero-section [class*="hc-"],
#new-hero-section .hero-controls,
.pmm-mega,
.pmm-mega-card,
.pmm-mega-feature__bg,
.pmm-mega-feature__content > *,
.pmm-nav-item > a,
.pmm-cta-wrap .pmm-btn {
  transition-duration: .22s !important;
  animation-duration: .35s !important;
}

/* Hero KenBurns: cap the 8s pan to 4s so it feels alive instead of frozen */
#new-hero-section .hero-bg.active,
#new-hero-section .hero-bg {
  transition-duration: .45s, .45s, 4s !important;
}

/* Header reveal: kill the off-screen translateY some themes apply on load */
.pmm-shell,
header.pmm-shell,
.pmm-main-wrap {
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* ---------- 2. Title-on-hover fix -------------------------------------- */
/* Multiple plausible selectors — vendor CSS has a hover state that drops
   opacity to 0 (probably for a clip-path reveal that never re-fires). */
#new-hero-section h1,
#new-hero-section .hero-title,
.hero-banner-two h1,
.hero-section h1,
.hero-content h1,
.title-nine h2 {
  opacity: 1 !important;
  visibility: visible !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
#new-hero-section h1:hover,
#new-hero-section .hero-title:hover,
.hero-banner-two h1:hover,
.hero-section h1:hover,
.hero-content h1:hover,
.title-nine h2:hover {
  opacity: 1 !important;
  visibility: visible !important;
  color: inherit !important;
}

/* Kill the per-word flip-on-hover effect — it relies on data-hover attributes
   to populate the ::after pseudo-element, and when those are missing the title
   visually disappears on hover. Keep the base word locked in place. */
#new-hero-section .hero-h1:hover .hw-base,
#new-hero-section .hero-h1 .hw:hover .hw-base {
  transform: translateY(0) !important;
}
#new-hero-section .hero-h1:hover .hw-base::after,
#new-hero-section .hero-h1 .hw:hover .hw-base::after {
  transform: translateY(110%) !important;
}
#new-hero-section .hero-h1,
#new-hero-section .hero-h1 .hw,
#new-hero-section .hero-h1 .hw-base {
  pointer-events: none;
}

/* ---------- 3. "Our Assets" mega-menu portal --------------------------- */
/* (Moved to partials/header.html inline <style> for cascade reasons —
    when header.html is dynamically injected, its <style> block applies
    later than this file, so co-locating the rules guarantees they win.) */
.__pinch-overrides-moved-to-header { display: none; }
/* Legacy rules below kept inert as documentation. */

.pmm-mega-body.pmm-assets__body {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  padding: 28px 28px 24px;
  background:
    radial-gradient(120% 80% at 0% 0%, rgba(28,124,185,0.18), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(139,92,246,0.12), transparent 65%),
    linear-gradient(180deg, #0b1828 0%, #0a1422 100%);
  position: relative;
  overflow: hidden;
  border-radius: 18px;
}
.pmm-mega-body.pmm-assets__body::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
}

.pmm-assets__intro {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: 12px 8px 12px 4px;
  color: #e7eef7;
}
.pmm-assets__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(135deg, #1c7cb9 0%, #2563eb 100%);
  color: #fff;
  margin-bottom: 16px;
  box-shadow: 0 4px 14px rgba(28,124,185,.35);
}
.pmm-assets__title {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 10px;
  color: #ffffff;
  letter-spacing: -0.01em;
}
.pmm-assets__lede {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(231,238,247,0.7);
  margin: 0;
}

.pmm-assets__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.pmm-asset {
  position: relative;
  display: grid;
  grid-template-areas:
    "chip arrow"
    "name name"
    "kind kind"
    "desc desc";
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 4px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  text-decoration: none !important;
  color: #e7eef7;
  overflow: hidden;
  transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease;
  min-height: 130px;
}
.pmm-asset::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--asset-a, #1c7cb9) 0%, var(--asset-b, #1e3a8a) 100%);
  opacity: 0;
  z-index: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.pmm-asset:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 14px 30px -10px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.05) inset;
}
.pmm-asset:hover::before { opacity: 0.18; }
.pmm-asset > * { position: relative; z-index: 1; }

.pmm-asset__chip {
  grid-area: chip;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
  background: linear-gradient(135deg, var(--asset-a, #1c7cb9) 0%, var(--asset-b, #1e3a8a) 100%);
  box-shadow: 0 4px 12px -2px var(--asset-a, rgba(28,124,185,.4));
}
.pmm-asset__arrow {
  grid-area: arrow;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.06);
  color: #e7eef7;
  transition: background .22s ease, transform .22s ease;
}
.pmm-asset__arrow svg { width: 14px; height: 14px; }
.pmm-asset:hover .pmm-asset__arrow {
  background: rgba(255,255,255,0.16);
  transform: translate(2px, -2px);
}
.pmm-asset__name {
  grid-area: name;
  display: block;
  font-size: 15px;
  font-weight: 700;
  margin-top: 12px;
  color: #ffffff;
  letter-spacing: -0.005em;
}
.pmm-asset__kind {
  grid-area: kind;
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--asset-a, #6ca8d6);
  filter: brightness(1.4);
}
.pmm-asset__desc {
  grid-area: desc;
  display: block;
  font-size: 12.5px;
  line-height: 1.4;
  color: rgba(231,238,247,0.7);
  margin-top: 4px;
}

/* Footer inside the assets mega — keep it dark to match */
.pmm-mega--assets .pmm-mega-footer {
  background: linear-gradient(180deg, #0a1422 0%, #07101b 100%);
  border-top: 1px solid rgba(255,255,255,0.06);
  border-radius: 0 0 18px 18px;
}
.pmm-mega--assets .pmm-mega-footer-text { color: rgba(231,238,247,0.7); }
.pmm-mega--assets .pmm-mega-footer-link {
  color: #ffffff;
  background: linear-gradient(135deg, #1c7cb9 0%, #2563eb 100%);
  padding: 8px 14px;
  border-radius: 8px;
}
.pmm-mega--assets .pmm-mega-footer-link svg { stroke: #ffffff; }

/* Responsive: tighter grid on smaller laptop widths */
@media (max-width: 1280px) {
  .pmm-mega-body.pmm-assets__body { grid-template-columns: 280px 1fr; }
  .pmm-assets__grid { gap: 10px; }
  .pmm-asset { padding: 12px; min-height: 120px; }
}
@media (max-width: 1024px) {
  .pmm-mega-body.pmm-assets__body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .pmm-assets__intro { padding: 4px; }
  .pmm-assets__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .pmm-assets__grid { grid-template-columns: repeat(2, 1fr); }
}