/**
 * Order Workspace guide navigation.
 * Replaces the previous version; only individual guides use this stylesheet.
 */

/* Visible, accessible link back to the complete guides index. */
body.ow-product-site .ow-guide-navigation-top {
    box-sizing: border-box;
    max-width: 100%;
    margin: 4px 0 26px;
    line-height: 1.4;
}

body.ow-product-site .ow-guide-navigation-top a,
body.ow-product-site .ow-guide-navigation-top a:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 44px;
    padding: 8px 16px 8px 10px;
    border: 1px solid #d6daf7;
    border-radius: 10px;
    background: #edf0ff;
    box-shadow: 0 2px 8px rgba(34, 49, 136, .045);
    color: #2735b4 !important;
    -webkit-text-fill-color: #2735b4 !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.45;
    text-decoration: none !important;
    opacity: 1 !important;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

body.ow-product-site .ow-guide-navigation-top a span[aria-hidden="true"] {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #fff;
    color: #2735b4 !important;
    -webkit-text-fill-color: #2735b4 !important;
    font-size: 17px;
    line-height: 1;
    text-decoration: none !important;
}

body.ow-product-site .ow-guide-navigation-top a:hover,
body.ow-product-site .ow-guide-navigation-top a:focus-visible {
    background: #e3e8ff;
    border-color: #aeb9f7;
    color: #1e2ca0 !important;
    -webkit-text-fill-color: #1e2ca0 !important;
    text-decoration: none !important;
}

/* Secondary navigation card after each article's existing Free/Pro CTAs. */
body.ow-product-site .ow-guide-navigation-bottom {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 22px;
    padding: 27px 28px;
    margin: 40px 0 22px;
    border: 1px solid #d9defc;
    border-radius: 16px;
    background: linear-gradient(125deg, #eef0ff 0%, #e6eaff 100%);
    color: #0e1a2b;
}

body.ow-product-site .ow-guide-navigation-bottom__copy {
    flex: 1 1 290px;
    min-width: 0;
}

body.ow-product-site .ow-guide-navigation-bottom__eyebrow {
    margin: 0 0 10px;
    color: #3546be;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.5;
    letter-spacing: .075em;
}

body.ow-product-site .ow-guide-navigation-bottom h2 {
    margin: 0 0 9px;
    color: #0e1a2b;
    font-size: clamp(19px, 2vw, 23px);
    font-weight: 750;
    line-height: 1.28;
}

body.ow-product-site .ow-guide-navigation-bottom p:not(.ow-guide-navigation-bottom__eyebrow) {
    margin: 0;
    color: #46536b;
    font-size: 14px;
    line-height: 1.6;
}

/* The theme may set link text with -webkit-text-fill-color, not just color. */
body.ow-product-site a.ow-guide-navigation-bottom__button,
body.ow-product-site a.ow-guide-navigation-bottom__button:visited {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 8px;
    min-height: 46px;
    padding: 13px 20px;
    border: 1px solid #2c38c7;
    border-radius: 9px;
    background: #2c38c7;
    box-shadow: 0 5px 14px rgba(31, 42, 201, .16);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    opacity: 1 !important;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.ow-product-site a.ow-guide-navigation-bottom__button *,
body.ow-product-site a.ow-guide-navigation-bottom__button:visited * {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
    opacity: 1 !important;
}

body.ow-product-site a.ow-guide-navigation-bottom__button:hover,
body.ow-product-site a.ow-guide-navigation-bottom__button:focus-visible {
    background: #1c289f;
    border-color: #1c289f;
    box-shadow: 0 6px 17px rgba(31, 42, 201, .2);
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    text-decoration: none !important;
}

body.ow-product-site .ow-guide-navigation-top a:focus-visible,
body.ow-product-site a.ow-guide-navigation-bottom__button:focus-visible {
    outline: 2px solid #1f2ac9;
    outline-offset: 3px;
}

@media (max-width: 600px) {
    body.ow-product-site .ow-guide-navigation-top {
        margin: 2px 0 22px;
    }

    body.ow-product-site .ow-guide-navigation-top a {
        font-size: 14px;
        max-width: 100%;
    }

    body.ow-product-site .ow-guide-navigation-bottom {
        padding: 23px 20px;
        gap: 20px;
        margin: 32px 0 18px;
    }

    body.ow-product-site .ow-guide-navigation-bottom__copy {
        flex-basis: 100%;
    }

    body.ow-product-site a.ow-guide-navigation-bottom__button {
        flex-basis: 100%;
        width: 100%;
        white-space: normal;
    }
}