/* Accessibility and performance fixes. Loaded after site.css.
   Ratios measured against each element's actual background. */

/* Primary buttons: white text needs 4.5:1 (was 4.33:1, now 5.12:1; hover 7.38:1) */
:root { --green: #1A7D52; --green-dark: #13623F; }

/* Secondary footer text and the diagram counter (were 3.9-4.3:1, now 5.9-6.5:1) */
.contact-sub,
.footer-bottom p,
.flipbook-count { color: #8494A9 !important; }

/* Delivery phases: the 65% fade on inactive phases dropped text to 4.17:1.
   Keep the text solid (8.2:1) and show the inactive state through the number and border instead. */
.phase-body { opacity: 1 !important; }
.engagement-box:not(.active):not(:hover) .phase-number { opacity: 0.6; }

/* Diagram gallery dots: 24 x 24 px tap area around the small visual dot */
.flipbook-dots { gap: 0.15rem; }
.flipbook-dot {
  position: relative;
  width: 24px; height: 24px;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 50%;
}
.flipbook-dot::before {
  content: "";
  position: absolute; inset: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transition: background 0.2s ease, inset 0.2s ease;
}
.flipbook-dot:hover::before { background: rgba(255, 255, 255, 0.45); }
.flipbook-dot:focus-visible { outline: 2px solid #00FF9D; outline-offset: 0; }
.flipbook-dot.is-active { width: 40px; border-radius: 8px; }
.flipbook-dot.is-active::before { inset: 7px; border-radius: 5px; background: #00FF9D; box-shadow: 0 0 10px rgba(0, 255, 157, 0.5); }

/* ---- Performance: render sections only when they come near the viewport ----
   The HTML is all there (search engines and screen readers see everything); the browser
   just skips layout and painting for sections far below the fold until you scroll. */
main > :not(:first-child) { content-visibility: auto; contain-intrinsic-size: auto 640px; }
.site-footer { content-visibility: auto; contain-intrinsic-size: auto 420px; }

/* ---- Navigation: third level (capability > product pages) ---- */
.site-nav .submenu-2 { list-style: none; margin: 0; padding: 0; }
.site-nav .has-sub-2 { position: relative; }
@media (min-width: 992px) {
  .site-nav .has-sub-2 > a { padding-right: 2rem !important; }
  .site-nav .has-sub-2 > a::after { content: "\203A"; position: absolute; right: 0.9rem; top: 50%; transform: translateY(-52%);
    font-size: 1.15rem; line-height: 1; color: var(--muted); }
  .site-nav .submenu-2 {
    display: none; position: absolute; top: -0.5rem; left: calc(100% + 0.5rem); z-index: 10001; min-width: 250px;
    padding: 0.5rem; background: rgba(8, 22, 38, 0.98); border: 1px solid rgba(56, 189, 248, 0.25); border-radius: 10px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.85), 0 0 20px rgba(56, 189, 248, 0.15);
  }
  /* bridge the gap so the pointer can travel to the flyout */
  .site-nav .submenu-2::before { content: ""; position: absolute; top: 0; bottom: 0; left: -0.75rem; width: 0.75rem; }
  .site-nav .has-sub-2:hover > .submenu-2,
  .site-nav .has-sub-2:focus-within > .submenu-2 { display: block; }
}
@media (max-width: 991px) {
  .site-nav .submenu-2 { display: block; margin: 0 0 0.35rem 0.75rem; padding-left: 0.6rem; border-left: 1px solid rgba(56, 189, 248, 0.25); }
  .site-nav .submenu-2 a:not(.btn) { font-size: 0.9rem !important; padding: 0.5rem 0.75rem !important; }
}

/* ---- Sub-page tree under each card (1.1, 1.2...) ---- */
ol.lifecycle > li .lifecycle-sub {
  grid-column: 2 / -1; list-style: none; margin: 0.25rem 0 0; padding: 0.25rem 0 0.1rem 1rem;
  border-left: 1px solid rgba(56, 189, 248, 0.25); display: flex; flex-direction: column; gap: 0.15rem;
}
.lifecycle .lifecycle-sub li { display: block !important; padding: 0 !important; margin: 0 !important; border: 0 !important;
  background: none !important; box-shadow: none !important; }
ol.lifecycle > li .lifecycle-sub a {
  display: inline-flex !important; align-items: baseline; gap: 0.75rem; padding: 0.3rem 0.4rem !important;
  color: var(--text) !important; font-size: 0.95rem !important; font-weight: 550 !important; letter-spacing: 0 !important;
  border-radius: 6px; text-decoration: none !important;
}
ol.lifecycle > li .lifecycle-sub a:hover,
ol.lifecycle > li .lifecycle-sub a:focus-visible { color: var(--blue) !important; background: rgba(56, 189, 248, 0.08); }
ol.lifecycle > li:hover .lifecycle-sub a:not(:hover) { color: var(--text) !important; }
.lifecycle-sub__num { min-width: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; color: #00E5A3; }
@media (max-width: 860px) {
  ol.lifecycle > li .lifecycle-sub { grid-column: 1 / -1; }
}

/* ---- Content pages: article aligned with the page title and the sections below ---- */
/* Text width on content pages; raise or lower this one value to taste (100% = full width) */
:root { --content-article-width: 64rem; }
.content-article .be-content > * { margin-left: 0; max-width: var(--content-article-width); }
.content-article .be-content > .be-image--wide,
.content-article .be-content > .be-image--full,
.content-article .be-content > .be-table,
.content-article .be-content > .be-code,
.content-article .be-content > .be-embed { max-width: 100%; }
/* Less space between the article and the layout section that follows it */
.section.content-article { padding-bottom: 0; }

/* ---- Latest posts (homepage) and post card titles ---- */
.latest-posts { border-top: 1px solid var(--line); }
.latest-posts .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.latest-posts__all { white-space: nowrap; }
/* Card titles in the palette's light sky blue (reads as clickable); white on hover.
   Change this one value to try another colour. */
:root { --post-title-color: var(--blue-dark, #7DD3FC); }
.post-card__title a { color: var(--post-title-color) !important; }
.post-card__title a:hover, .post-card__title a:focus-visible { color: #FFFFFF !important; }
.post-card__thumb, .post-card__thumb:hover { text-decoration: none !important; }
.post-list > .post-card { margin: 0 !important; }
.post-card--compact { align-content: start; }

/* Post thumbnails in 16:9, the shape most blog and social images are made in */
.post-card__thumb { aspect-ratio: 16 / 9 !important; }
/* Outline buttons get a solid page-coloured fill so the background animation doesn't show through */
.btn-secondary { background-color: rgba(7, 21, 36, 0.92); }
/* ---- Expertise cards on phones: number + title on one row, description and sub-pages full width.
   (site.css forces descriptions into column 2 below 960px while switching to one column below 860px,
   which made the browser squeeze everything into an extra column.) ---- */
@media (max-width: 860px) {
  ol.lifecycle > li { grid-template-columns: auto 1fr !important; column-gap: 1rem !important; row-gap: 0.6rem !important; align-items: center !important; }
  ol.lifecycle > li > .step { grid-column: 1 !important; font-size: 1.8rem; }
  ol.lifecycle > li > h3 { grid-column: 2 !important; }
  ol.lifecycle > li > p,
  ol.lifecycle > li > div,
  ol.lifecycle > li > .lifecycle-sub { grid-column: 1 / -1 !important; }
  ol.lifecycle > li .lifecycle-sub { padding-left: 0.75rem; }
}

/* ---- Bold text in articles: white, so lead-ins stand out from body text (as .prose strong does).
   Bold text you coloured in the editor keeps its colour. ---- */
.be-content strong, .be-content b { color: #FFFFFF; }
.be-content [class*="be-color-"] strong, .be-content [class*="be-color-"] b,
.be-content [style^="color:"] strong, .be-content [style^="color:"] b { color: inherit; }
@media (max-width: 960px) {
  .hero-showcase-container,
  .hero-dynamic .hero-showcase-container { justify-self: stretch !important; max-width: none !important; width: 100%; }
  .showcase-telemetry { min-width: 0; }
  .showcase-telemetry span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}