/* aqua — WordPress-specific design-system layer */
/* WP core */

.screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.screen-reader-text:focus {
  position: static !important; width: auto; height: auto; margin: 0; clip: auto;
  padding: 0.5rem 1rem; background: var(--primary); color: #fff;
  border-radius: var(--radius);
}

.alignleft   { float: left;  margin: 0 var(--space-5) var(--space-4) 0; }
.alignright  { float: right; margin: 0 0 var(--space-4) var(--space-5); }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: none; }

.wp-caption { max-width: 100%; }
.wp-caption-text,
figcaption {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.sticky, .gallery-caption, .bypostauthor { /* required by the WP theme check */ }

/* page shell */


.page {
  overflow: visible;
  overflow-x: clip;
}


.page > .site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

/* topbar */

/* Slim utility bar above the header (hiring / support / login). */
.topbar {
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-elevated) 45%, transparent);
  font-size: var(--fs-xs);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-5);
  min-height: 2.25rem;
}
.topbar__links { display: flex; align-items: center; gap: var(--space-5); }
.topbar a { color: var(--text-muted); transition: color var(--dur) var(--ease); }
.topbar a:hover { color: var(--accent); }
.topbar__featured {
  margin-right: auto;
  color: var(--text-muted) !important;
  font-weight: var(--fw-medium);
}
.topbar__featured::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  margin-right: var(--space-2);
  border-radius: 50%;
  background: var(--accent);
  vertical-align: middle;
}
@media (max-width: 860px) {
  .topbar__featured { display: none; }
  .topbar__inner { justify-content: center; gap: var(--space-4); }
}

/* hero */

/* page_title ships as "Protect <span>What Runs in</span> the Cloud" — the inner
   span is the emphasised phrase, so it takes the accent gradient. */
.hero__title span:not([class]) {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


/* The fallback lives in each var() call, not as a declaration on .termblock —
   declaring it here would shadow the inherited value from the wrapper. */
.termblock {
  --term-lh: 1.35em;
  display: inline-block;
  height: var(--term-lh);
  overflow: hidden;
  vertical-align: bottom;
}
.term_typer {
  display: block;
  line-height: var(--term-lh);
  font-weight: var(--fw-medium);
  color: var(--accent);
  animation: term-rotate calc(var(--term-steps, 5) * 2.4s) steps(var(--term-steps, 5)) infinite;
}

@keyframes term-rotate {
  to { transform: translateY(calc(var(--term-lh) * -1 * var(--term-steps, 5))); }
}

@media (prefers-reduced-motion: reduce) {
  .term_typer { animation: none; }
}

/* The hero CTA sits under the rotating line rather than in the reference's
   email form. */
.hero__cta { margin-top: var(--space-7); }

/* features (linked) */

/* The reference .feature is static text; ours wraps an anchor, so the whole
   tile needs to carry the hover state. */
a.feature { display: block; cursor: pointer; }
a.feature .feature__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
a.feature .feature__cta::after { content: "→"; }
a.feature:hover .feature__cta { gap: var(--space-3); color: var(--accent); }

/* logo strip */

/* Replaces the old two-row px-sized marquee. One row, CSS-only, duplicated
   track for a seamless loop; pauses on hover and under reduced motion. */
.logo-marquee {
  position: relative;
  margin-top: var(--space-6);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.logo-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: var(--space-9);
  animation: logo-scroll 60s linear infinite;
}
.logo-marquee:hover .logo-marquee__track { animation-play-state: paused; }
.logo-marquee__item { flex: 0 0 auto; display: block; }
.logo-marquee__item img {
  width: auto;
  height: 42px;
  opacity: 0.55;
  filter: grayscale(1);
  transition: opacity var(--dur) var(--ease), filter var(--dur) var(--ease);
}
[data-theme="dark"] .logo-marquee__item img { filter: grayscale(1) brightness(0) invert(1); }
.logo-marquee__item:hover img { opacity: 1; filter: none; }

@keyframes logo-scroll {
  from { transform: translateX(0); }
  /* the track holds two identical halves, so -50% is one full cycle */
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .logo-marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: var(--space-6); }
}

/* pillars */


/* The colour names are legacy field keys, not a palette. */

/* footer */

.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  color: var(--text-muted);
  transition: all var(--dur) var(--ease);
}
.footer-social a:hover { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); }
.footer-social svg { width: 1rem; height: 1rem; }

.g2-badge img { width: 150px; height: auto; opacity: 0.7; transition: opacity var(--dur) var(--ease); }
.g2-badge:hover img { opacity: 1; }

/* Accessibility tools menu, carried over from the old footer. */
.a11y-menu { position: relative; }
.a11y-menu__trigger { color: var(--text-muted); font-size: inherit; transition: color var(--dur) var(--ease); }
.a11y-menu__trigger:hover { color: var(--accent); }
.a11y-menu__panel {
  position: absolute; bottom: calc(100% + 0.5rem); left: 0; z-index: var(--z-overlay);
  min-width: 15rem; padding: var(--space-2);
  background: var(--bg-elevated); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-pop);
  display: none;
}
.a11y-menu[open] .a11y-menu__panel,
.a11y-menu.is-open .a11y-menu__panel { display: block; }
.a11y-menu__item {
  display: block; width: 100%; text-align: left;
  padding: var(--space-2) var(--space-3);
  font-size: var(--fs-sm); color: var(--text-muted);
  border-radius: var(--radius-sm);
  transition: all var(--dur-fast) var(--ease);
}
.a11y-menu__item:hover { background: color-mix(in srgb, var(--text-strong) 8%, transparent); color: var(--text-strong); }
.a11y-menu__item.is-active { color: var(--accent); }
.a11y-menu__sep { height: 1px; margin: var(--space-2) 0; background: var(--border); border: 0; }

/* Accessibility display modes toggled by the menu above. */
html.a11y-text-medium { font-size: 112.5%; }
html.a11y-text-large  { font-size: 125%; }
html.a11y-display-bw  { filter: grayscale(1); }
html.a11y-underline a { text-decoration: underline; }
html.a11y-no-motion *, html.a11y-no-motion *::before, html.a11y-no-motion *::after {
  animation: none !important; transition: none !important;
}

/* mega menu */

/* The four primary nav items are dropdown triggers, not destinations — their
   CFS hrefs are placeholders — so they render as buttons and open a panel. */

.nav__group { display: flex; align-items: center; }

.nav__link--trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: inherit;
  background: none;
  border: 0;
}
.nav__chevron { width: 0.85rem; height: 0.85rem; transition: transform var(--dur) var(--ease); }
.nav__group.is-open .nav__chevron { transform: rotate(180deg); }
.nav__group.is-open > .nav__link--trigger { color: var(--text-strong); }
.nav__group.is-open > .nav__link--trigger::after { width: 100%; }


.mega {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  /* A tall panel would otherwise run past the fold with no way to reach the
     bottom rows. The allowance covers the header plus the utility bar above it. */
  max-height: calc(100vh - var(--header-height) - var(--space-9));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-block: var(--space-7);
  background: color-mix(in srgb, var(--bg-elevated) 97%, transparent);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border-strong);
  box-shadow: var(--shadow-pop);
}
/* Content sits on the same measure and gutters as the rest of the site. */
.mega__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-8);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.mega__main { flex: 1 1 auto; min-width: 0; }
.mega__cols { display: flex; align-items: flex-start; gap: var(--space-7); }
/* Columns share the row evenly instead of hugging their content, so a panel
   with two columns doesn't leave the rest of the bar empty. */
.mega__cols > .mega__col { flex: 1 1 0; min-width: 10rem; }
/* a lone column would stretch the whole row */
@media (min-width: 1100px) {
  .mega__cols > .mega__col:only-child { flex: 0 1 30rem; }
}

.mega__aside {
  flex: 0 0 auto;
  width: 17rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.mega__aside--right {
  padding-left: var(--space-8);
  border-left: 1px solid var(--border);
}

/* column headings */
.mega__coltitle {
  display: block;
  margin-bottom: var(--space-4);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-faint);
}
a.mega__coltitle:hover { color: var(--accent); }
.mega__colsub { display: block; margin-top: var(--space-1); font-size: var(--fs-xs); text-transform: none; letter-spacing: 0; color: var(--text-muted); }

/* link lists */
.mega__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.mega__link {
  display: block;
  padding: var(--space-2) var(--space-3);
  margin-inline: calc(var(--space-3) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
a.mega__link:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); }
.mega__link-title { display: block; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-strong); }
a.mega__link:hover .mega__link-title { color: var(--accent); }
.mega__link-sub { display: block; margin-top: 0.1rem; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }

/* promoted card */
.mega__feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  transition: all var(--dur) var(--ease);
}
.mega__feature:hover { border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.mega__feature .eyebrow { font-size: var(--fs-xs); }
.mega__feature-title { font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--text-strong); line-height: var(--lh-snug); }
.mega__feature-sub { font-size: var(--fs-sm); color: var(--text-muted); }

/* right-hand rails */
.mega__promo { display: flex; flex-direction: column; gap: var(--space-2); padding: 0; overflow: hidden; }
.mega__promo img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.mega__promo-media { display: block; }
.mega__promo .resource_type, .mega__promo .mega__feature-title { padding-inline: var(--space-4); }
.mega__promo .mega__feature-title:last-child { padding-bottom: var(--space-4); }

.mega__research { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.mega__research-logo { width: 100px; height: auto; }
.mega__report {
  display: block;
  padding-top: var(--space-4);
  margin-top: var(--space-2);
  border-top: 1px solid var(--border);
}
.mega__report:hover .mega__link-title { color: var(--accent); }

.mega__news { display: flex; flex-direction: column; gap: var(--space-3); }
.mega__news-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2);
  margin: calc(var(--space-2) * -1);
  border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease);
}
.mega__news-item:hover { background: color-mix(in srgb, var(--text-strong) 6%, transparent); }
/* Thumbnails are publisher marks as often as photos, so they sit on a white
   plaque and are contained rather than cropped. */
.mega__news-media {
  flex: 0 0 auto;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: #fff;
}
.mega__news-media img { width: 100%; height: 100%; object-fit: contain; }
.mega__news-title { font-size: var(--fs-sm); line-height: 1.4; color: var(--text); }
.mega__news-item:hover .mega__news-title { color: var(--accent); }

/* full-width news strip (platform) */
.mega__strip { margin-top: var(--space-6); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.mega__strip .mega__links { flex-direction: row; flex-wrap: wrap; gap: var(--space-5); }

/* mobile: the panels become accordions inside the nav drawer */
@media (max-width: 1099px) {
  .nav__group { display: block; width: 100%; }
  .nav__link--trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--border);
    font-size: var(--fs-body);
  }
  .mega {
    position: static;
    width: 100%;
    max-width: none;
    /* The drawer itself scrolls, so the panel must not cap its own height. */
    max-height: none;
    overflow: visible;
    padding: var(--space-4) 0 var(--space-5);
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: none;
  }
  .mega__inner {
    flex-direction: column;
    gap: var(--space-5);
    max-width: none;
    padding-inline: 0;
  }
  .mega__cols { flex-direction: column; gap: var(--space-5); }
  .mega__aside { width: 100%; }
  .mega__aside--right { padding-left: 0; border-left: 0; border-top: 1px solid var(--border); padding-top: var(--space-5); }
  .mega__strip .mega__links { flex-direction: column; gap: var(--space-1); }
  /* The drawer scrolls; panels can be tall. */
  .nav.is-open { max-height: calc(100vh - var(--header-height)); overflow-y: auto; }
}

/* inner pages */


.page-hero { padding-block: var(--space-7) var(--space-6); }
.page-hero__title { font-size: var(--fs-h1); }
.page-hero__sub {
  font-size: var(--fs-lead);
  line-height: 1.6;
  color: var(--text-muted);
  font-weight: var(--fw-light);
}
.page-hero__sub p + p { margin-top: var(--space-3); }

/* Titles that carry an inline link — single-news and taxonomy-resourcestype
   push breadcrumb anchors through page_title. */
.page-hero__title a { color: var(--text-muted); }
.page-hero__title a:hover { color: var(--accent); }


.page-hero__solo {
  max-width: 52rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
}
.page-hero__solo .page-hero__sub { max-width: 44rem; }

.page-hero__media img { width: 100%; height: auto; border-radius: var(--radius-lg); }
.page-hero__media iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-lg); }

/* Text CTA used where page_cta_is_button is off. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--fw-semibold);
  color: var(--primary);
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.link-arrow::after { content: "\2192"; }
.link-arrow:hover { gap: var(--space-3); color: var(--accent); }

/* prose */

/* Long-form body copy: the_content() output on the default page template.
   Design-system-owned, unlike the .content rules in legacy-bridge.css. */
.prose { color: var(--text); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2, .prose h3, .prose h4, .prose h5 { margin-top: var(--space-8); }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-h2); }
.prose h3 { font-size: var(--fs-h3); }
.prose h4 { font-size: var(--fs-h4); }
.prose ul, .prose ol { padding-left: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--primary); text-decoration: underline; text-underline-offset: 0.2em; }
.prose a:hover { color: var(--accent); }
.prose img { border-radius: var(--radius); }
.prose blockquote { margin-block: var(--space-6); }
.prose hr { margin-block: var(--space-8); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); }
.prose th { color: var(--text-muted); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--ls-wide); font-size: var(--fs-xs); }
.prose pre {
  padding: var(--space-5);
  background: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}
.prose :not(pre) > code {
  padding: 0.15em 0.4em;
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
}

/* scroll reveal */


.animatable .fadeInUp,
.animatable .fadeInDown,
.animatable .bounceInLeft,
.animatable .bounceInRight {
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.animatable .fadeInUp   { transform: translateY(18px); }
.animatable .fadeInDown { transform: translateY(-18px); }
.animatable .bounceInLeft  { transform: translateX(-24px); }
.animatable .bounceInRight { transform: translateX(24px); }

.animated .fadeInUp,
.animated .fadeInDown,
.animated .bounceInLeft,
.animated .bounceInRight {
  opacity: 1;
  transform: none;
}

.animationDelay_1 { transition-delay: 80ms; }
.animationDelay_2 { transition-delay: 160ms; }
.animationDelay_3 { transition-delay: 240ms; }
.animationDelay_4 { transition-delay: 320ms; }
.animationDelay_5 { transition-delay: 400ms; }
.animationDelay_6 { transition-delay: 480ms; }

/* The original skipped the effect entirely below the navbar breakpoint, where
   ScrollMagic never ran. */
@media (max-width: 1023px) {
  .animatable .fadeInUp,
  .animatable .fadeInDown,
  .animatable .bounceInLeft,
  .animatable .bounceInRight { opacity: 1; transform: none; }
}

/* Without JS nothing ever adds .animated, so content must not stay hidden. */
.no-js .animatable .fadeInUp,
.no-js .animatable .fadeInDown,
.no-js .animatable .bounceInLeft,
.no-js .animatable .bounceInRight { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
}

/* The explicit opt-out still wins over everything above. */
html.a11y-no-motion .reveal,
html.a11y-no-motion .animatable .fadeInUp,
html.a11y-no-motion .animatable .fadeInDown,
html.a11y-no-motion .animatable .bounceInLeft,
html.a11y-no-motion .animatable .bounceInRight {
  opacity: 1 !important;
  transform: none !important;
}

/* wp admin bar offset */
/* the toolbar is fixed over the sticky header */

body.admin-bar { --admin-bar: var(--wp-admin--admin-bar--height, 32px); }
/* below 600 the toolbar is absolute and scrolls away */
@media (max-width: 600px) { body.admin-bar { --admin-bar: 0px; } }

body.admin-bar .site-header,
body.admin-bar .page > .site-header { top: var(--admin-bar); }

body.admin-bar .mega__inner { max-height: calc(100vh - var(--header-height) - var(--admin-bar) - var(--space-9)); }
@media (max-width: 1099px) {
  /* the drawer rides the header now, so it needs no admin-bar offset */
  body.admin-bar .nav.is-open { max-height: calc(100vh - var(--header-height) - var(--admin-bar)); }
}

body.admin-bar .side_navigation_wrap {
  top: calc(var(--header-height) + var(--admin-bar) + var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--admin-bar) - var(--space-6));
}
body.admin-bar .social_float { top: calc(var(--header-height) + var(--admin-bar) + 2rem); }
body.admin-bar .vertical_resources_filters_wrap { top: calc(var(--header-height) + var(--admin-bar) + 1rem); }
body.admin-bar .anchor_offset { scroll-margin-top: calc(var(--header-height) + var(--admin-bar) + 1rem); }

body.admin-bar .pscroll { --pscroll-stage: max(40rem, calc(100dvh - var(--header-height) - var(--admin-bar))); }
body.admin-bar .pscroll__stage { top: calc(var(--header-height) + var(--admin-bar)); }

/* admin-bar.css resets this on html, so restate it there */
html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-height) + var(--wp-admin--admin-bar--height, 32px) + 1rem); }
@media (max-width: 600px) {
  html:has(body.admin-bar) { scroll-padding-top: calc(var(--header-height) + 1rem); }
}