/* Gatsby-specific additions to the new theme (site.css / fx.css are the theme files, unchanged).
   Mostly styles the HTML that gatsby-transformer-remark produces for blog posts so it matches
   the theme's article layout (.rich). */

/* page reset (the theme relied on its host page for this; without it browsers add an 8px white frame) */
html,body{margin:0;padding:0}

/* Gatsby wrappers must not create their own scroll/stacking context */
#___gatsby,#gatsby-focus-wrapper{display:contents}

/* markdown images (gatsby-remark-images) */
.rich .gatsby-resp-image-wrapper{margin:28px 0!important;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.rich .gatsby-resp-image-image{border-radius:0}
.rich .gatsby-resp-image-figure{margin:28px 0}
.rich .gatsby-resp-image-figure .gatsby-resp-image-wrapper{margin:0!important}
.rich .gatsby-resp-image-figcaption{display:none}
.rich p>.gatsby-resp-image-wrapper:only-child{margin:0!important}
.rich p:has(>.gatsby-resp-image-wrapper:only-child),.rich p:has(>a>.gatsby-resp-image-wrapper:only-child){margin-top:28px;margin-bottom:28px}

/* image links in markdown (CTA banners) behave like the theme's .cta-banner */
.rich a:has(>.gatsby-resp-image-wrapper){display:block;border-radius:16px;overflow:hidden;box-shadow:var(--sh1);text-decoration:none;transition:transform .35s var(--ease),box-shadow .35s}
.rich a:has(>.gatsby-resp-image-wrapper):hover{transform:translateY(-3px);box-shadow:var(--sh2)}
.rich a>.gatsby-resp-image-wrapper{margin:0!important;border:0}

/* heading anchor icons from gatsby-remark-autolink-headers: only on hover */
.rich h2 .anchor,.rich h2 .custom-class{margin-left:8px;opacity:0;text-decoration:none;transition:opacity .2s;vertical-align:middle}
.rich h2:hover .anchor,.rich h2:hover .custom-class,.rich h2 .anchor:focus,.rich h2 .custom-class:focus{opacity:.6}
.rich h2 .anchor svg,.rich h2 .custom-class svg{fill:currentColor;width:16px;height:16px}
.rich h2 .anchor.before{position:static;padding:0;transform:none}

/* leftover markup from the previous site inside markdown */
.rich .fa{display:none}
.rich .readmore-section{display:block;padding:16px 20px;border-radius:14px;border:1px solid var(--line);background:var(--surface)}
.rich .table-of-contents{display:none}

/* code */
.rich code{font:500 .9em var(--fm);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:.1em .35em}
.rich pre{overflow-x:auto;padding:18px 20px;border-radius:14px;background:var(--surface);border:1px solid var(--line);font-size:15px;line-height:1.6}
.rich pre code{background:none;border:0;padding:0}

/* author photo on the post page comes from the markdown (any size) */
.author .av2{object-fit:cover;border-radius:50%}

/* ---- Mega menu: a glass drawer under the hovered item; the header itself does not change ---- */

/* keep the header exactly as it is (top-of-page or scrolled) while a menu is open */
.hdr:not(.solid):has(.nav .dd:hover .mega),.hdr:not(.solid):has(.nav .dd.open),.hdr:not(.solid):has(.nav .dd:focus-within){background:linear-gradient(180deg,rgba(5,12,30,.55),rgba(5,12,30,0));backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;color:#fff}
.hdr:not(.solid):has(.nav .dd:hover .mega) .logo .lg-d,.hdr:not(.solid):has(.nav .dd.open) .logo .lg-d,.hdr:not(.solid):has(.nav .dd:focus-within) .logo .lg-d{display:none}
.hdr:not(.solid):has(.nav .dd:hover .mega) .logo .lg-w,.hdr:not(.solid):has(.nav .dd.open) .logo .lg-w,.hdr:not(.solid):has(.nav .dd:focus-within) .logo .lg-w{display:block}
.hdr.solid:has(.nav .dd:hover .mega),.hdr.solid:has(.nav .dd.open),.hdr.solid:has(.nav .dd:focus-within){background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink);box-shadow:0 1px 0 var(--line)}
/* the scrolled header's frosted background lives on a pseudo-element: a backdrop-filter on the header
   itself would stop the drawer's own blur from reaching the page behind it */
.hdr.solid{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr.solid::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--hdr-solid);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);pointer-events:none}

/* drawer anchored to its own menu item */
.nav .dd{position:relative}
.mega{left:50%;right:auto;top:100%;width:min(820px,calc(100vw / var(--vz,1) - 48px));transform:translateX(-50%);padding-top:12px;background:transparent;box-shadow:none;border:0;border-radius:0;color:#fff}
.nav .dd:nth-last-child(-n+2) .mega{left:auto;right:-8px;transform:none}
.nav .dd:first-child .mega{left:-8px;transform:none}
/* fade the drawer in instead of the theme's clip-path wipe: a clip-path on the drawer would stop the
   frosted blur from seeing the page behind it, so background text would show through sharp */
.mega{clip-path:none;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.nav .dd:hover .mega,.nav .dd:focus-within .mega,.nav .dd.open .mega{clip-path:none;opacity:1;visibility:visible;transition:opacity .25s ease,visibility 0s}

/* dark glass panel (same in day and night): list of items on the left, details of the hovered item on the right */
.mega .wrap.dd-wrap{position:relative;max-width:none;margin:0;padding:0;display:grid;grid-template-columns:290px 1fr;gap:0;align-items:stretch;overflow:hidden;border-radius:20px;
  background:rgba(12,24,44,.86);backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(4,10,24,.45),inset 0 1px 0 rgba(255,255,255,.12)}
:root[data-theme="dark"] .mega .wrap.dd-wrap{background:rgba(7,14,28,.88)}
.mega .wrap.dd-wrap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(420px circle at 0% 0%,rgba(247,147,29,.18),transparent 60%),radial-gradient(460px circle at 100% 100%,rgba(15,108,189,.28),transparent 60%)}

.mega .dd-left{position:relative;display:flex;flex-direction:column;gap:4px;padding:16px 12px;border-right:1px solid rgba(255,255,255,.12)}
.mega .dd-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;color:#fff;text-decoration:none;font:600 15px/1.25 var(--fb);transition:background .2s}
.mega .dd-item:hover,.mega .dd-item.on,.mega .dd-item:focus-visible{background:rgba(255,255,255,.12)}
.mega .dd-ic{flex:none;width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);color:#9CC8F2}
.mega .dd-lbl{flex:1}
.mega .dd-arr{color:rgba(255,255,255,.45);transition:transform .2s,color .2s}
.mega .dd-item.on .dd-arr,.mega .dd-item:hover .dd-arr{color:#9CC8F2;transform:translateX(3px)}
.mega .dd-all{margin-top:6px;padding:10px 12px 4px;border-top:1px solid rgba(255,255,255,.1);color:#9CC8F2;font:600 13.5px/1 var(--fb);text-decoration:none}
.mega .dd-all:hover{color:#fff}

.mega .dd-right{position:relative;display:flex;flex-direction:column;gap:14px;padding:24px 28px 26px;animation:ddfade .25s ease}
@keyframes ddfade{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.mega .dd-head{display:flex;align-items:center;gap:12px}
.mega .dd-ic-lg{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#2F7FD6,#1B4FA0);box-shadow:0 6px 16px rgba(27,79,160,.4)}
.mega .dd-head h3{margin:0;color:#fff;font:700 1.2rem/1.2 var(--fd);letter-spacing:-.02em}
.mega .dd-blurb{margin:0;color:#E2E9F3;font-size:15px;line-height:1.6;font-weight:500}
.mega .dd-bullets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 22px}
.mega .dd-bullets li{display:flex;gap:8px;align-items:flex-start;color:#F2F5FA;font-size:14px;line-height:1.4;font-weight:500}
.mega .dd-bullets svg{flex:none;margin-top:3px;color:#7FB8F0}
.mega .dd-cta{align-self:flex-start;margin-top:4px;padding:11px 18px;font-size:14px}
@media (prefers-reduced-motion:reduce){.mega .dd-right{animation:none}}

/* methodology steps on phones: keep the vertical timeline line 2px wide. The theme's ".steps.on li::before"
   (width:100%) also matched here and turned each line into a grey block covering the step text. */
@media (max-width:560px){.steps.on li::before,.steps li:hover::before{width:2px}}

/* FAQ on tablets/phones: the intro column is sticky on desktop (top:100px); once the layout is a single
   column it slid over the questions while scrolling, so it scrolls normally there. */
@media (max-width:900px){.faq .sh{position:static;top:auto}}

/* nav underline: only the menu item under the pointer. The current section no longer keeps a permanent
   underline, and an item that still has focus after a click (or is marked open) gives way as soon as
   another item is hovered, so two underlines / two drawers never show together. */
.nav .dd.cur>button::before,.nav>a[aria-current="page"]::after{transform:scaleX(0)}
.nav .dd:focus-within:not(:has(:focus-visible))>button::before{transform:scaleX(0)}
.nav:has(.dd:hover) .dd:not(:hover)>button::before{transform:scaleX(0)}
.nav:has(.dd:hover) .dd:not(:hover) .mega{opacity:0;visibility:hidden}
.nav .dd:hover>button::before,.nav>a:hover::after{transform:scaleX(1)}

/* home hero slider: arrows and dots centred at the bottom of the hero on desktop too
   (the theme pins them to the right from 761px up) */
@media (min-width:761px){.hs-nav{left:50%;right:auto;transform:translateX(-50%)}}