/* ============================================================
   1. GLOBAL STYLES (Applies to both Standalone & Widget)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Space+Grotesk:wght@400;500;700&display=swap');

body, body *, .feature .featureContent, .feature .featureContent p {
    font-family: 'DM Sans', sans-serif !important;
}

h1, h2, h3, h4, h5, h6, .headerTitle, .headerTitle a, .feature h3.featureTitle, .feature h3.featureTitle a, .featureTitle {
    font-family: 'Space Grotesk', sans-serif !important;
}

/* Fix for long links/URLs */
.feature .featureContent, .feature .featureContent a, .feature .featureContent p {
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
}

.feature .featureContent a {
    color: #02076f !important;
    text-decoration: none !important; 
}

/* ============================================================
   2. STANDALONE PAGE ONLY (The "Sales Deck" Look)
   ============================================================ */
body.standalone {
    overflow-x: hidden !important;
}

/* STANDALONE: Reveal full posts */
body.standalone .featureContent {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* THE BUG FIX: Only hide 'Read More' buttons INSIDE cards */
body.standalone .feature .readMoreLink, 
body.standalone .feature .showMore, 
body.standalone .feature .featureMore, 
body.standalone .feature .beamer-read-more,
body.standalone .feature button[class*="more"],
body.standalone .feature a[class*="more"],
body.standalone .featureContent::after {
    display: none !important;
    visibility: hidden !important;
}

/* Standalone Sidebar Styling */
body.standalone .streamNav li.catItem .catItemLink {
    color: #fbf8f5 !important; 
}

body.standalone .streamNav li.catItem .catItemLink:hover,
body.standalone .streamNav li.catItem .catItemLink.active,
body.standalone .streamNav li.catItem.active .catItemLink {
    background-color: #02076f !important;
    border-radius: 20px !important; 
}

/* Standalone Update Cards */
body.standalone .news .feature,
body.standalone .feature {
    box-shadow: 0 4px 20px rgba(2, 7, 111, 0.1) !important; 
    border: 1px solid rgba(2, 7, 111, 0.08) !important; 
    border-radius: 30px !important; 
    overflow: hidden !important; 
    background: #ffffff !important;
}

/* 💻 DESKTOP ONLY EXPERIENCES (Min-width 769px) */
@media (min-width: 769px) {
    /* Large Premium Header - ONLY on Desktop */
    body.standalone .headerTitle, 
    body.standalone .headerTitle a,
    body.standalone h1.headerTitle {
        font-size: 34px !important; 
        line-height: 1.2 !important;
        margin-bottom: 12px !important; 
        top: 0px !important; 
    }

    /* The Corner Sunburst - Reduced an additional 5% */
    body.standalone::after {
        content: "" !important;
        display: block !important;
        width: 645px !important; 
        height: 645px !important;
        background-image: url("https://images.g2crowd.com/uploads/product/image/f19ddbd3c266779420339f974d5fdda9/teamohana.png") !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        position: fixed !important;
        right: -128px !important; 
        bottom: -128px !important; 
        transform: translate(114px, 114px) !important;
        z-index: 2147483647 !important; 
        opacity: 0.6 !important; 
        pointer-events: none !important;
    }
}

/* ============================================================
   3. WIDGET ONLY (The Premium Mini-App Look)
   ============================================================ */
body.embed {
    background-color: #f4f7ff !important; 
}

body.embed .header {
    background-color: #02076f !important;
}

body.embed .headerTitle {
    font-size: 22px !important; 
    top: 0px !important;
    font-weight: 500 !important;
}

/* Tight Spacing for Widget */
body.embed .feature h3.featureTitle {
    font-size: 20px !important;
    line-height: 1.2 !important;
    margin-bottom: 4px !important; 
}

body.embed .feature .featureContent {
    margin-top: 0px !important; 
    padding-top: 0px !important;
}

/* Pill-Shaped Category Tags */
body.embed .feature .featureCategory {
    border-radius: 50px !important;
    padding: 4px 12px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    font-size: 10px !important;
}

/* Floating Widget Cards (Restoring the Rounded Corners) */
body.embed .news .feature, 
body.embed .feature,
body.embed .featureInner {
    background: #ffffff !important;
    margin: 12px 8px !important; 
    border: none !important;
    border-radius: 20px !important; 
    overflow: hidden !important; 
    box-shadow: 0 8px 24px rgba(2, 7, 111, 0.08) !important; 
}

/* Disable Sunburst in Widget */
body.embed::after {
    display: none !important;
}

html {
    overflow-x: hidden !important;
}