/* =============================================================================
   Synaptix AI — shared site navigation and footer
   -----------------------------------------------------------------------------
   Paired with site-nav.js, which renders the markup this file styles.

   WHAT LIVES WHERE
   ----------------
   The mega menu itself is a design-system component: components.css owns
   .ds-menu-bar / .ds-menu-trigger / .ds-menu-panel / .ds-menu-col /
   .ds-menu-link / .ds-menu-promo / .ds-menu-mobile / .ds-menu-burger, along
   with the `hidden`-attribute visibility contract site-nav.js drives them by.
   Nothing in that family is redefined here.

   This file covers only what is specific to the site chrome: the sticky band,
   the brand mark, the actions cluster, the language switcher, the no-JS
   fallback, and the footer.

   THE HEIGHT ON .snav-root IS LOAD-BEARING
   ----------------------------------------
   site-nav.js fills an empty mount point after the page has already painted.
   Declaring the final height here -- in a render-blocking stylesheet -- means
   the space is reserved before the header exists, so nothing below it ever
   moves and Cumulative Layout Shift stays at 0. Never turn it into `min-height`
   and never let a child grow past it: the scrolled state deliberately animates
   transform/opacity/box-shadow only, for the same reason.
   ========================================================================== */

:root {
    --snav-h: 76px;
}

@media (max-width: 1023px) {
    :root { --snav-h: 64px; }
}

/* Mount point: the reserved band. */
.snav-root {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    height: var(--snav-h);
}

.snav {
    position: relative;
    height: 100%;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    transition:
        border-color var(--dur-base) var(--ease-out),
        box-shadow var(--dur-base) var(--ease-out);
}

.snav.is-scrolled {
    box-shadow: 0 10px 30px -18px rgba(var(--shadow-rgb), var(--shadow-a4));
    border-bottom-color: transparent;
}

.snav-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    height: 100%;
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

@media (max-width: 1023px) {
    .snav-bar { gap: var(--space-2); padding: 0 var(--space-4); }
}

/* ---------------------------------------------------------------- brand ---- */
.snav-brand {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: var(--tap-target);
    text-decoration: none;
    /* Scale, not size: the scrolled state must not touch layout. */
    transition: transform var(--dur-base) var(--ease-out);
    transform-origin: left center;
}

.snav-brand img {
    display: block;
    width: auto;
    height: 44px;
    object-fit: contain;
}

.snav.is-scrolled .snav-brand { transform: scale(0.9); }

@media (max-width: 1023px) {
    .snav-brand img { height: 34px; }
}

/* ------------------------------------------------------------- menu bar ---- */
/* The bar box spans from the brand to the actions cluster, which is what
   .ds-menu-panel-center then centres a wide panel on. Sizing it to its items
   instead would push the panel past the left edge at 1024px. */
.snav-nav {
    flex: 1 1 auto;
    min-width: 0;
}

.snav-menubar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The trigger inherits .ds-menu-trigger; only the resting colour differs, so a
   closed bar reads as secondary chrome next to the page content. */
.snav-top {
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.snav-top:hover { color: var(--accent-text); }

.snav-item.is-active-section > .snav-top,
.snav-top.is-current {
    color: var(--text);
    font-weight: var(--weight-semibold);
}

/* ------------------------------------------------------------ mega panel --- */
/* Layout hints on top of .ds-menu-panel-inner, which is an auto-fit grid. Only
   the column shape is set here; every visual property stays in the design
   system. */
.snav-panel-product      { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.snav-panel-solutions    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.snav-panel-integrations { grid-template-columns: 1.25fr 1fr 1fr; }
.snav-panel-resources    { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* The industry list is names only, so it reads two-up. Channel entries carry
   a description and a status pill and were breaking the pill onto its own line
   at half width, so they stay one per row. */
.snav-panel-solutions > .ds-menu-col:last-child > .ds-menu-col-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-1);
}

/* Name and status pill share one line. */
.ds-menu-link-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.snav-group-note {
    margin: var(--space-2) var(--space-3) 0;
    color: var(--text-subtle);
    font-size: var(--text-xs);
    line-height: var(--leading-snug);
}

.snav-promo-col { gap: var(--space-3); }

.snav-promo-link {
    padding-inline: var(--space-3);
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.snav-promo-link:hover { text-decoration: underline; }

.snav-panel-foot {
    margin: var(--space-4) 0 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--border);
}

.snav-foot-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding-inline: var(--space-3);
    color: var(--accent-text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-decoration: none;
}

.snav-foot-link::after {
    content: "\2192";
    margin-left: var(--space-2);
    transition: transform var(--dur-fast) var(--ease-out);
}

.snav-foot-link:hover::after { transform: translateX(3px); }

/* A mobile accordion row that is a plain link has no panel to point at, so it
   must not draw the disclosure chevron. */
.snav-acc-plain::after { content: none; }

/* --------------------------------------------------------------- actions --- */
.snav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
    margin-left: auto;
}

.snav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap-target);
    height: var(--tap-target);
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text);
    line-height: 1;
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.snav-icon-btn:hover { background: var(--surface-hover); border-color: var(--border-strong); }

/* Theme mark. A pair of SVGs swapped by the attribute theme-sync.js already
   stamps on <html>. That helper writes a glyph into `.theme-icon` with
   textContent, which would wipe inline SVG, so this button avoids that class
   and keeps only the id the helper looks for. */
.snav-theme svg { width: 20px; height: 20px; }
.snav-theme .snav-theme-moon { display: none; }

[data-theme="dark"] .snav-theme .snav-theme-sun { display: none; }
[data-theme="dark"] .snav-theme .snav-theme-moon { display: block; }

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .snav-theme .snav-theme-sun { display: none; }
    :root:not([data-theme="light"]) .snav-theme .snav-theme-moon { display: block; }
}

.snav-signin {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--dur-fast) var(--ease-out);
}

.snav-signin:hover { color: var(--accent-text); }

.snav-cta { white-space: nowrap; }

/* ------------------------------------------------------ language switch ---- */
.snav-lang { position: relative; }

.snav-lang-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-width: var(--tap-target);
    height: var(--tap-target);
    padding: 0 var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background-color var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) var(--ease-out);
}

.snav-lang-trigger:hover { background: var(--surface-hover); border-color: var(--border-strong); }
.snav-lang.is-open .snav-lang-trigger .ds-menu-caret { transform: rotate(-135deg); margin-top: 0.2em; }

.snav-lang-menu {
    position: absolute;
    top: calc(100% + var(--space-2));
    right: 0;
    z-index: var(--z-dropdown);
    display: grid;
    gap: 2px;
    min-width: 168px;
    padding: var(--space-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-xl);

    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition:
        opacity var(--dur-fast) var(--ease-out),
        transform var(--dur-fast) var(--ease-out),
        visibility 0s linear var(--dur-fast);
}

.snav-lang.is-open .snav-lang-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.snav-lang-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: var(--tap-target);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--text);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    text-align: left;
    cursor: pointer;
}

.snav-lang-option:hover { background: var(--surface-hover); }
.snav-lang-option.is-active { background: var(--accent-soft); color: var(--accent-text); font-weight: var(--weight-semibold); }

.snav-lang-name { white-space: nowrap; }

/* Flags are decorative artwork, so they stay outside the theme tokens.
   TR and GB cannot be drawn with gradients (crescent, Union Jack diagonals);
   those two are inlined SVG so no extra request is needed. */
.snav-flag {
    display: inline-block;
    width: 24px;
    height: 17px;
    flex: 0 0 auto;
    border-radius: 3px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.snav-flag-tr {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23E30A17'/%3E%3Ccircle cx='24' cy='20' r='9' fill='%23fff'/%3E%3Ccircle cx='27' cy='20' r='7.2' fill='%23E30A17'/%3E%3Cpolygon fill='%23fff' points='37,20 33.6,21.1 34.7,17.8 32,15.6 35.5,15.5 37,12.2 38.5,15.5 42,15.6 39.3,17.8 40.4,21.1'/%3E%3C/svg%3E");
}

.snav-flag-gb {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0 60 30M60 0 0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
}

.snav-flag-de { background-image: linear-gradient(180deg, #000000 33%, #dd0000 33% 66%, #ffce00 66%); }
.snav-flag-fr { background-image: linear-gradient(90deg, #002395 33%, #ffffff 33% 66%, #ed2939 66%); }
.snav-flag-es { background-image: linear-gradient(180deg, #aa151b 25%, #f1bf00 25% 75%, #aa151b 75%); }

/* ------------------------------------------------------------ breakpoint --- */
/* components.css already hides .ds-menu-burger / .ds-menu-mobile above 1024px
   and the desktop panels below it; this only has to move the site chrome. */
@media (max-width: 1023px) {
    .snav-nav,
    .snav-cta,
    .snav-auth { display: none; }
}

/* Between 1024 and 1200 the five labels plus both buttons stop fitting. */
@media (min-width: 1024px) and (max-width: 1199px) {
    .snav-top { padding: var(--space-2); font-size: var(--text-xs); }
    .snav-lang-name { display: none; }
    .snav-lang-menu { min-width: 0; }
}

html.snav-locked,
html.snav-locked body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .snav,
    .snav-brand,
    .snav-lang-menu,
    .snav-foot-link::after {
        transition: none !important;
    }
}

/* No-JS fallback: the empty mount point must not hold the reserved band open
   (a <noscript><style> in each page's <head> hides it), and the plain link list
   below it has to stand on its own. */
.snav-noscript {
    border-bottom: 1px solid var(--border);
    background: var(--bg-elevated);
}

.snav-noscript-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-4) var(--space-6);
}

.snav-noscript a {
    color: var(--text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-decoration: none;
}

.snav-noscript a:hover { color: var(--accent-text); }

/* =============================================================================
   FOOTER
   ========================================================================== */

.sfoot {
    border-top: 1px solid var(--border);
    background: var(--bg-sunken);
}

.sfoot-inner {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-10);
}

.sfoot-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-6);
    padding-bottom: var(--space-10);
    border-bottom: 1px solid var(--border);
}

.sfoot-brand { max-width: 42ch; }

.sfoot-name {
    margin: 0 0 var(--space-2);
    color: var(--text);
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
}

.sfoot-desc {
    margin: 0 0 var(--space-4);
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

.sfoot-social {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sfoot-social a {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

.sfoot-social a:hover { color: var(--accent-text); text-decoration: underline; }

.sfoot-cta { flex: 0 0 auto; }

.sfoot-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-8) var(--space-6);
    padding: var(--space-10) 0;
}

.sfoot-col-title {
    margin: 0 0 var(--space-3);
    color: var(--text);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
}

.sfoot-col ul {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sfoot-col a {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    color: var(--text-muted);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}

.sfoot-col a:hover { color: var(--accent-text); }

/* "You are here" marker. Deliberately NOT var(--text) + semibold: that is the
   exact recipe of .sfoot-col-title above, so the current page used to render as
   a second heading in the middle of its own column (security.html showed
   "Security" splitting the Company list). The accent colour is already the
   hover treatment on this surface, so it stays inside the audited palette. */
.sfoot-col a.is-current { color: var(--accent-text); font-weight: var(--weight-medium); }

.sfoot-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-6);
    border-top: 1px solid var(--border);
}

.sfoot-bottom p {
    margin: 0;
    color: var(--text-subtle);
    font-size: var(--text-xs);
}

@media (max-width: 1023px) {
    .sfoot-inner { padding: var(--space-12) var(--space-4) var(--space-8); }
    .sfoot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sfoot-cta { width: 100%; }
}

@media (max-width: 640px) {
    .sfoot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-4); }
}