/* Shared Insights menu + mobile menu.
   Used by every static page (podcast, newsletters) and by the React pages (dd-* panel only).
   Generated pages link this file; see scripts/insights/build_pages.py. */

/* ---------- Insights dropdown panel (static pages AND React pages) ---------- */
.dd{position:static;display:flex;align-items:center;height:100%}
/* the panel is positioned against the fixed nav bar, so it centres on the page, not on the link */
.dd-trigger{display:inline-flex;align-items:center;gap:6px;position:relative}
.dd-trigger:before{content:"";position:absolute;left:-16px;right:-16px;top:60%;height:48px}  /* hover bridge down to the panel */
.dd-trigger svg{width:10px;height:10px;transition:transform .25s ease;opacity:.75}
.dd:hover .dd-trigger svg,.dd:focus-within .dd-trigger svg,.dd.open .dd-trigger svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);width:min(900px,calc(100vw - 48px));
  padding-top:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease,transform .2s ease,visibility .2s;z-index:200}
.dd:hover .dd-panel,.dd:focus-within .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0)}
.dd-card{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,20,32,.35),0 2px 8px rgba(0,20,32,.12);
  display:grid;grid-template-columns:1.05fr 1.05fr .9fr;overflow:hidden;text-align:left;
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.dd-card a{text-decoration:none!important;text-transform:none!important;letter-spacing:normal!important}
.dd-feat{display:flex;flex-direction:column;gap:10px;padding:22px;color:#003146!important;border-right:1px solid #eef0f2;transition:background .2s}
.dd-feat:hover{background:#F7F8FA}
.dd-media{position:relative;border-radius:10px;overflow:hidden;aspect-ratio:16/10;background:linear-gradient(135deg,#003146,#4E131E)}
.dd-media img{width:100%;height:100%;object-fit:cover;display:block}
.dd-media.paper{background:#fff;border:1px solid #e6e8eb}
.dd-media.paper img{object-fit:contain;padding:8px}
.dd-media .dd-play{position:absolute;right:10px;bottom:10px;width:34px;height:34px;border-radius:50%;background:#98002E;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.3)}
.dd-media .dd-play:after{content:"";margin-left:3px;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.dd-k{font-size:10.5px!important;font-weight:800;letter-spacing:.12em!important;text-transform:uppercase!important;color:#98002E}
.dd-t{font-family:'Playfair Display',Georgia,serif;font-size:17px;font-weight:700;line-height:1.25;color:#003146}
.dd-s{font-size:13px;font-weight:600;color:#7E8082;line-height:1.35}
.dd-links{background:#003146;padding:18px 16px;display:flex;flex-direction:column;gap:4px}
.dd-links .dd-h{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A9C3CB;margin:4px 10px 8px}
.dd-links a{display:block;padding:11px 12px;border-radius:9px;color:#fff!important;transition:background .2s}
.dd-links a:hover,.dd-links a:focus-visible{background:rgba(255,255,255,.09)}
.dd-links b{display:block;font-size:14.5px;font-weight:800;color:#fff}
.dd-links span{display:block;font-size:12.5px;font-weight:600;color:rgba(233,244,248,.72);margin-top:2px;line-height:1.35}
.dd-links .dd-arrow{float:right;color:#A9C3CB;font-weight:800;transition:transform .2s}
.dd-links a:hover .dd-arrow{transform:translateX(3px)}
@media (hover:none),(max-width:900px){.dd-panel{display:none}}  /* phones and narrow windows use the mobile menu */

/* ---------- Static-page nav upgrades (pages generated by build_pages.py) ---------- */
.nav .links{height:62px}
.nav .links > a,.nav .links .dd-trigger{height:62px;display:inline-flex;align-items:center;position:relative}
.nav .links > a.on:after,.nav .links .dd-trigger.on:after{content:"";position:absolute;left:0;right:0;bottom:16px;height:2px;background:#CD1442}
.nav-burger{display:none;background:none;border:0;padding:8px;margin-left:4px;cursor:pointer}
.nav-burger span{display:block;width:22px;height:2px;background:#fff;margin:5px 0;transition:transform .3s,opacity .3s}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.nav-mobile{position:fixed;top:62px;left:0;right:0;bottom:0;z-index:101;background:#003146;padding:12px 24px 32px;overflow-y:auto;
  font-family:'Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif}
.nav-mobile[hidden]{display:none}
.nav-mobile a{display:block;color:#fff;text-decoration:none;font-size:18px;font-weight:700;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-mobile .sub{padding:0 0 8px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.nav-mobile .sub a{font-size:15.5px;font-weight:600;color:rgba(233,244,248,.8);padding:10px 0;border:0}
.nav-mobile .cta-m{margin-top:24px;text-align:center;background:#98002E;border-radius:6px;border:0;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:900px){.nav .links{display:none!important}.nav .cta{display:none}.nav-burger{display:block}}
@media(min-width:901px){.nav-mobile{display:none!important}}

/* ---------- Menu fit on mid-size screens (6 items since Case Studies was added) ---------- */
nav .nav-link,nav .cta-btn,.nav .links a,.nav .cta{white-space:nowrap}
@media (min-width:901px) and (max-width:1200px){
  nav div[style*="gap: 32px"]{gap:18px!important}
  nav .nav-link{font-size:12px!important;letter-spacing:.5px!important}
  nav .cta-btn{padding:9px 14px!important;font-size:11px!important}
  .nav .links{gap:14px}
  .nav .links a{font-size:11px;letter-spacing:.4px}
}