/* BLCyber polish layer.
 *
 * Purely additive rules that sit on top of the generated Webflow stylesheet.
 * Nothing here edits or unminifies css/blcyber-e8d310.webflow.shared.*.css.
 */

/* --- Brand lockup legibility ------------------------------------------- */

/* The generated stylesheet paints the wordmark with `color: var(--body-bg-color)`
 * (#0E276A). That is right for the footer, whose .footer-layout panel is light
 * #F1F5FF, but wrong in the header, where the same navy sits on the navy page
 * background at a 1.00:1 contrast ratio and leaves the lockup reading "Cyber".
 *
 * So this is scoped to the header lockup only. .footer-brand-logo-link is a
 * separate class token, so the footer keeps its original navy-on-light
 * treatment. Contrast after this change:
 *   header  BL #F1F5FF 12.69:1, Cyber #7AA0FF 5.47:1  (on navy)
 *   footer  BL #0E276A 12.69:1, Cyber #2963FF 4.45:1  (on the light panel)
 * The header tones match the generated social cards and banners. */
.brand-logo-link .brand-name {
    color: #f1f5ff;
}

.brand-logo-link .text-span {
    color: #7aa0ff;
}

/* --- Responsive containment -------------------------------------------- */

/* Below 992px the generated stylesheet widens the decorative oval past the
 * viewport (150% wide at -32% margin under 768px), which gave the homepage
 * 36-46px of horizontal scroll on phones. Clip the bleed at the main wrapper
 * instead of editing the generated stylesheet.
 *
 * `clip` rather than `hidden` on purpose: `hidden` would make this a scroll
 * container and break the page's position: sticky backgrounds, whereas
 * `overflow-x: clip` leaves `overflow-y: visible` intact and sticky working. */
#main-content {
    overflow-x: clip;
}

/* --- Mobile legibility and target size --------------------------------- */

/* Breadcrumb links rendered 20px tall, under the 24px minimum target size
 * (WCAG 2.5.8). Padding lifts the hit area without moving anything else,
 * since the breadcrumb row is centred in its own flex line. */
/* min-height rather than padding alone: the link sets line-height:100%, so its
 * box is exactly the font size and padding tuning would drift with type scale. */
.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.5rem;
    padding-block: 0.35rem;
}

/* The 0.7rem (11.2px) micro-labels fall below the 12px that mobile
 * readability checks expect. 0.75rem is the smallest step that clears it. */
@media screen and (max-width: 767px) {
    .breadcrumb-link,
    .brand-slogan,
    .footer-brand-slogan,
    .menu-small-title {
        font-size: 0.75rem;
    }
}

/* --- Image delivery ---------------------------------------------------- */

/* AVIF is offered through <picture><source>, with a JPEG/PNG on the <img> for
 * browsers that cannot decode it. `display: contents` removes the <picture>
 * box so the <img> stays the direct flex/grid child the Webflow layout expects
 * — without it, wrapping would reparent every image and break those layouts. */
picture {
    display: contents;
}

/* --- Keyboard access -------------------------------------------------- */

.skip-link {
    position: fixed;
    left: 1rem;
    top: -4rem;
    z-index: 10000;
    padding: 0.8rem 1rem;
    background: #f1f5ff;
    color: #091e55;
    font-weight: 700;
    text-decoration: none;
    border-radius: 4px;
}

.skip-link:focus {
    top: 1rem;
    outline: 3px solid #ba8657;
    outline-offset: 3px;
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid #ba8657;
    outline-offset: 4px;
}

/* The skip target is only focusable programmatically, so it must not paint a
 * focus ring when a visitor jumps to it. */
[id="main-content"]:focus {
    outline: none;
}

/* --- Conversion ------------------------------------------------------- */

.primary-contact-cta {
    box-shadow: 0 14px 36px rgba(25, 81, 233, 0.18);
}

/* --- Progressive insight sharing ------------------------------------- */

.insight-share {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem;
    margin: 1.5rem 0 2.5rem;
}

.insight-share-button {
    appearance: none;
    padding: 0.7rem 1.4rem;
    border: 1px solid rgba(241, 245, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #f1f5ff;
    font: inherit;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.insight-share-button:hover {
    border-color: #ba8657;
    background: rgba(241, 245, 255, 0.08);
}

.insight-share-button[aria-busy="true"] {
    opacity: 0.6;
    cursor: progress;
}

.insight-share-status {
    min-height: 1.4em;
    margin: 0;
    color: rgba(241, 245, 255, 0.75);
    font-size: 0.9rem;
}

/* The always-available fallback for copying a link by hand. */
.insight-permalink {
    margin: 2.5rem 0 0;
}

.insight-permalink-label {
    margin: 0 0 0.35rem;
    color: rgba(241, 245, 255, 0.6);
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.insight-permalink-link {
    color: #f1f5ff;
    overflow-wrap: anywhere;
}

/* --- Reduced motion ---------------------------------------------------- */

/* The site animates entrances with GSAP and ScrollTrigger. Collapsing the
 * durations rather than disabling the animations keeps every element at its
 * final, visible state instead of stranding content mid-transition. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}