/* Component-specific properties */
:root {
    /* Text color not available in theme properties */
    --text-text-secondary: #6a6a6a;
    
    /* Border radius for component */
    --corner-radius-m: 8px;
    
}

/* Lightning bolt icon component styles */
article.single-fx-integrations-v2 .integration-type-icon {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

article.single-fx-integrations-v2 .integration-type-icon .lightning-bolt {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Container setup for Theia Sticky Sidebar */
article.single-fx-integrations-v2 {
    min-height: 100vh; /* Ensure article has full viewport height */
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Set default min-height for desktop to match navigation wrapper */
@media (min-width: 992px) {
    article.single-fx-integrations-v2 {
        min-height: 1200px;
    }
}

/* Ensure sidebar wrapper has height for Theia to calculate from */
article.single-fx-integrations-v2 .integration-navigation-wrapper {
    position: absolute!important; /* Restored absolute positioning as requested */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Match article height */
    min-height: 100%;
    pointer-events: none;
}

/* Make the inner wrapper relatively positioned for Theia - Higher specificity */
article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner {
    position: relative !important;
    width: 100% !important;
    height: 100%; /* Match parent height */
    pointer-events: none;
}

/* Ensure container-fluid has proper layout for nav positioning - Higher specificity */  
article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner .container-fluid {
    position: relative !important; 
    height: 100%; /* Match parent height */
    max-height: none !important;
    pointer-events: none;
}

/* Navigation container - provides scroll boundaries for Theia Sticky Sidebar - Higher specificity */
article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container {
    position: relative !important;
    width: 100% !important;
    height: 100%; /* Match parent height - this becomes the sticky container */
    max-height: none !important;
    pointer-events: none;
}

/* Navigation wrapper - this will be the sticky element */
article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-header-navigation-wrapper {
    position: relative;
    width: 100%;
    height: auto; /* Let content determine height - critical for sticky behavior */
    /* Sticky element must be shorter than container for Theia to work */
    z-index: 3;
    pointer-events: none;
}

/* Theia's wrapper should let content determine height */
article.single-fx-integrations-v2 .integration-navigation-wrapper .theiaStickySidebar {
    height: auto; /* Let content determine height */
    width: 100%;
    pointer-events: none;
}

article.single-fx-integrations-v2 .integration-navigation-wrapper .theiaStickySidebar > * {
    pointer-events: auto !important; 
}

/* Wrapper for sidebar content */
article.single-fx-integrations-v2 .integration-sidebar-content-wrapper {
    width: calc(25% - 24px);
    max-width: 400px;
    margin-left: 16%;
    display: flex;
    flex-direction: column;
}

/* Figma-based sidebar styles - account for Theia's .theiaStickySidebar wrapper */
article.single-fx-integrations-v2 .integration-navigation-wrapper .container-fluid,
article.single-fx-integrations-v2 .integration-navigation-wrapper .theiaStickySidebar .container-fluid {
    height: 100%; /* ✅ Full height to match parent wrapper */
    padding-left: 0px;
    padding-right: 0px;
    max-width: 1920px;
    display: flex;
    position: relative;
}

article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container .integration-header-navigation-wrapper nav,
article.single-fx-integrations-v2 .integration-navigation-wrapper .theiaStickySidebar .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container .integration-header-navigation-wrapper nav {
    background: var(--color-white);
    border: 2px solid var(--color-quote);
    border-radius: var(--corner-radius-m);
    width: 100%;
    z-index: 3;
    position: relative;
    margin-top: var(--spacing-s-10);
    margin-bottom: var(--spacing-s-8);
    transition: all 0.3s ease;
}


article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container .integration-header-navigation-wrapper nav .integration-header-navigation-inner,
article.single-fx-integrations-v2 .integration-navigation-wrapper .theiaStickySidebar .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container .integration-header-navigation-wrapper nav .integration-header-navigation-inner {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-4);
    align-items: flex-start;
    overflow: hidden;
    padding: var(--spacing-s-3) var(--spacing-s-3) var(--spacing-s-4) var(--spacing-s-3);
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

@media (max-width: 1200px) {
    article.single-fx-integrations-v2 .integration-sidebar-content-wrapper {
        width: calc(32% - 24px);
        margin-left: 6%;
    }
    .fx-integration-header .integration-header-inner {
        padding-right: var(--spacing-s-9);
    }
}

@media (max-width: 991px) {
    article.single-fx-integrations-v2 .integration-navigation-wrapper {
        position: relative !important;
    }

    article.single-fx-integrations-v2 .integration-sidebar-content-wrapper {
        max-width: calc(100% - 96px);
        width: 100%;
        margin-left: 48px;
        margin-right: 48px;
    }
    article.single-fx-integrations-v2 .integration-navigation-wrapper {
        order: 2;
    }
    .fx-integration-header .integration-header-inner {
        padding-top: var(--spacing-s-6);
        padding-bottom: var(--spacing-s-6);
    }
    article.single-fx-integrations-v2 .integration-navigation-wrapper .integration-navigation-wrapper-inner .container-fluid .integration-navigation-container .integration-header-navigation-wrapper nav {
        margin-top: var(--spacing-s-6);
        margin-bottom: var(--spacing-s-6);
    }
}

@media (max-width: 768px) {
    article.single-fx-integrations-v2 .integration-header-navigation-wrapper nav {
        margin-bottom: var(--spacing-s-4);
    }
}

@media (max-width: 500px) {
    article.single-fx-integrations-v2 .integration-sidebar-content-wrapper {
        max-width: calc(100% - 48px);
        width: 100%;
        margin-left: 24px;
        margin-right: 24px;
    }
}


/* Figma Component Styles */

/* Back link styles */
article.single-fx-integrations-v2 .sidebar-back-link {
    align-self: stretch;
    display: flex;
}

article.single-fx-integrations-v2 .sidebar-back-link a {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 16px;
    line-height: 26px;
    color: var(--color-primary);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: color 0.2s ease;
}

article.single-fx-integrations-v2 .sidebar-back-link a:hover {
    color: var(--color-orange);
}

/* Header container styles */
article.single-fx-integrations-v2 .sidebar-header {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-3);
    align-items: flex-start;
    width: 100%;
}

article.single-fx-integrations-v2 .sidebar-header .header-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-1);
    align-items: flex-start;
    width: 100%;
}

article.single-fx-integrations-v2 .sidebar-title {
    font-family: var(--font-primary);
    font-weight: 500;
    font-size: 23px;
    line-height: 32px;
    color: #0c0f33;
    margin: 0;
    width: 100%;
    white-space: pre-wrap;
}

article.single-fx-integrations-v2 .sidebar-excerpt {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    color: var(--color-primary);
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Get Started button styles */
article.single-fx-integrations-v2 .sidebar-get-started-btn {
    width: 100%;
    max-width: 100%;
    margin-right: 0px!important;
}

/* Details container styles */
article.single-fx-integrations-v2 .sidebar-details {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-3);
    align-items: flex-start;
    width: 100%;
}

article.single-fx-integrations-v2 .details-title {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black-2);
    text-transform: uppercase;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

article.single-fx-integrations-v2 .details-subline {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 19px;
    line-height: 30px;
    color: var(--color-black-2);
    margin: 0;
    display: flex;
    flex: 1 0 0;
    flex-direction: column;
    justify-content: center;
    min-height: 1px;
    min-width: 1px;
    white-space: pre-wrap;
}

/* Integration type with icon */
article.single-fx-integrations-v2 .integration-type-container {
    align-self: stretch;
    display: flex;
    gap: var(--spacing-s-1);
    align-items: center;
    width: 100%;
}

/* Details container specific styling */
article.single-fx-integrations-v2 .details-container {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-1);
    align-items: flex-start;
    width: 100%;
}

/* Categories styles */
article.single-fx-integrations-v2 .sidebar-categories,
article.single-fx-integrations-v2 .sidebar-support,
article.single-fx-integrations-v2 .sidebar-legal {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-1);
    align-items: flex-start;
    width: 100%;
}

article.single-fx-integrations-v2 .categories-title {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 19px;
    line-height: 30px;
    color: var(--text-text-secondary);
    text-transform: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

article.single-fx-integrations-v2 .support-title,
article.single-fx-integrations-v2 .legal-title {
    font-family: var(--font-secondary);
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black-2);
    text-transform: uppercase;
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
}

article.single-fx-integrations-v2 .categories-list {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    color: var(--color-black-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

article.single-fx-integrations-v2 .categories-list li {
    display: inline;
}

article.single-fx-integrations-v2 .categories-list li:not(:last-child)::after {
    content: ', ';
}

article.single-fx-integrations-v2 .categories-list a {
    color: inherit;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
}

article.single-fx-integrations-v2 .support-text,
article.single-fx-integrations-v2 .legal-text {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    color: var(--color-black-2);
    margin: 0;
}

article.single-fx-integrations-v2 .support-text a,
article.single-fx-integrations-v2 .legal-text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-skip-ink: none;
    text-underline-position: from-font;
    cursor: pointer;
    transition: color 0.2s ease;
}

article.single-fx-integrations-v2 .support-text a:hover,
article.single-fx-integrations-v2 .legal-text a:hover {
    color: var(--color-orange);
}

article.single-fx-integrations-v2 .categories-list a:hover {
    color: var(--color-orange);
    transition: color 0.2s ease;
}

article.single-fx-integrations-v2 .sidebar-back-link a:focus {
    outline: 2px solid var(--color-orange);
    outline-offset: 2px;
}

/* Sidebar CTA Component */
article.single-fx-integrations-v2 .sidebar-cta {
    background: #d9edf7;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
    overflow: hidden;
    padding: 32px;
    border-radius: var(--corner-radius-m, 8px);
    width: 100%;
    margin-bottom: var(--spacing-s-12);
}

article.single-fx-integrations-v2 .sidebar-cta-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-3);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
}

article.single-fx-integrations-v2 .sidebar-cta-text {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-s-1);
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    white-space: pre-wrap;
    color: #0d0f33;
}

article.single-fx-integrations-v2 .sidebar-cta-heading {
    font-family: var(--font-primary);
    font-weight: 700;
    font-size: 28px;
    line-height: 36px;
    margin: 0;
    width: 100%;
}

article.single-fx-integrations-v2 .sidebar-cta-description {
    font-family: var(--font-secondary);
    font-weight: 300;
    font-size: 19px;
    line-height: 30px;
    margin: 0;
    width: 100%;
}

article.single-fx-integrations-v2 .sidebar-cta-buttons {
    display: flex;
    gap: var(--spacing-s-2);
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

article.single-fx-integrations-v2 .sidebar-cta-buttons .btn {
    flex: 1 1 auto;
    min-width: max-content;
    max-width: none;
    margin-right: 0px!important;
}

/* When buttons wrap, make them full width */
@media (max-width: 500px) {
    article.single-fx-integrations-v2 .sidebar-cta-buttons .btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 991px) {
    article.single-fx-integrations-v2 .sidebar-cta {
        margin-bottom: var(--spacing-s-6);
    }
}

/* ========================================
   Figma Text Styles
   From: Integrations Pages (node-id: 27-9920)
   Using custom properties from custom-properties.css
   Targeting specific containers only
   ======================================== */

/* Heading Styles */
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h1,
.fx-integration-header .integration-header-inner > h1 {
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h2,
.fx-integration-header .integration-header-inner > h2 {
    font-family: var(--font-primary);
    font-size: 23px;
    font-weight: 500;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h3,
.fx-integration-header .integration-header-inner > h3 {
    font-family: var(--font-primary);
    font-size: 23px;
    font-weight: 500;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h4,
.fx-integration-header .integration-header-inner > h4 {
    font-family: var(--font-primary);
    font-size: 23px;
    font-weight: 500;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h5,
.fx-integration-header .integration-header-inner > h5 {
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 500;
    line-height: 36px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h6,
.fx-integration-header .integration-header-inner > h6 {
    font-family: var(--font-primary);
    font-size: 23px;
    font-weight: 500;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}

/* Paragraph Styles */
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p,
.fx-integration-header .integration-header-inner > p {
    font-family: var(--font-secondary);
    font-size: 19px;
    font-weight: 300;
    line-height: 30px;
    font-style: normal;
    color: var(--color-primary);
}

/* Strong/Bold Text (Lead Text) - Direct children or within P tags */
/*.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > strong,
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > strong,
.fx-integration-header .integration-header-inner > strong,
.fx-integration-header .integration-header-inner > p > strong {
    font-family: var(--font-secondary);
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > b,
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > b,
.fx-integration-header .integration-header-inner > b,
.fx-integration-header .integration-header-inner > p > b {
    font-family: var(--font-secondary);
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
    font-style: normal;
    color: var(--color-primary);
}*/

/* Link Styles - Direct children or within P tags */
/*.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > a:not(.btn),
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > a:not(.btn),
.fx-integration-header .integration-header-inner > a:not(.btn),
.fx-integration-header .integration-header-inner > p > a:not(.btn) {
    color: var(--color-orange);
    text-decoration: none;
}

.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > a:not(.btn):hover,
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > a:not(.btn):hover,
.fx-integration-header .integration-header-inner > a:not(.btn):hover,
.fx-integration-header .integration-header-inner > p > a:not(.btn):hover {
    text-decoration: underline;
}*/

/* Emphasis Text - Direct children or within P tags */
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > em,
.wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > em,
.fx-integration-header .integration-header-inner > em,
.fx-integration-header .integration-header-inner > p > em {
    font-style: italic;
}

/* ========================================
   Responsive Text Styles
   ======================================== */

@media (max-width: 768px) {
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h1,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h5,
    .fx-integration-header .integration-header-inner > h1,
    .fx-integration-header .integration-header-inner > h5 {
        font-size: 24px;
        line-height: 32px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h2,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h3,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h4,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h6,
    .fx-integration-header .integration-header-inner > h2,
    .fx-integration-header .integration-header-inner > h3,
    .fx-integration-header .integration-header-inner > h4,
    .fx-integration-header .integration-header-inner > h6 {
        font-size: 20px;
        line-height: 28px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > strong,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > strong,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > b,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > b,
    .fx-integration-header .integration-header-inner > strong,
    .fx-integration-header .integration-header-inner > p > strong,
    .fx-integration-header .integration-header-inner > b,
    .fx-integration-header .integration-header-inner > p > b {
        font-size: 20px;
        line-height: 28px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p,
    .fx-integration-header .integration-header-inner > p {
        font-size: 17px;
        line-height: 26px;
    }
}

@media (max-width: 480px) {
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h1,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h5,
    .fx-integration-header .integration-header-inner > h1,
    .fx-integration-header .integration-header-inner > h5 {
        font-size: 22px;
        line-height: 30px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h2,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h3,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h4,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > h6,
    .fx-integration-header .integration-header-inner > h2,
    .fx-integration-header .integration-header-inner > h3,
    .fx-integration-header .integration-header-inner > h4,
    .fx-integration-header .integration-header-inner > h6 {
        font-size: 18px;
        line-height: 26px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > strong,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > strong,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > b,
    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p > b,
    .fx-integration-header .integration-header-inner > strong,
    .fx-integration-header .integration-header-inner > p > strong,
    .fx-integration-header .integration-header-inner > b,
    .fx-integration-header .integration-header-inner > p > b {
        font-size: 18px;
        line-height: 26px;
    }

    .wysiwyg.single-integration-page-body-layout .container-fluid .row .single-column-wysiwyg-content .wysiwyg__content > p,
    .fx-integration-header .integration-header-inner > p {
        font-size: 16px;
        line-height: 24px;
    }
}