/* ============================================================
 * Precursive Success Hub — Community theme CSS
 * Loaded via head-markup <link> in Experience Builder.
 *
 * Text colour hierarchy (4 tiers, used throughout the community):
 *   Primary   #282828  H1, RTE headings, collection name, row titles
 *   Secondary #282828  section headlines, sub-headings
 *   Body      #727172  body text, descriptions, summaries, RTE body
 *   Muted     #A5A5A5  breadcrumb, metadata, article counts
 *
 * Type scale aligns with SLDS utility classes used in the LWCs.
 * ============================================================ */

/* ---------- SLDS heading type scale (bumped one step up) ----------
 * The live SLDS stylesheet sizes headings via var(--lwc-fontSizeN, <fallback>)
 * with the tokens unset, so we (a) define the tokens and (b) override the
 * heading utility classes directly with !important — the class override is the
 * reliable lever, as a :root token can lose to app.css on load order.
 */
:root {
    --lwc-fontSize5: 1.25rem;   /* slds-text-heading_small  (was ~1rem)   */
    --lwc-fontSize6: 1.375rem;  /* interpolated, keeps scale monotonic    */
    --lwc-fontSize7: 1.5rem;    /* slds-text-heading_medium (was 1.25rem) */
    --lwc-fontSize8: 1.75rem;   /* interpolated                           */
    --lwc-fontSize9: 2rem;      /* slds-text-heading_large  (was 1.75rem) */

    /* Page canvas: nudge off pure-near-white (was #FAFAFA) so white cards read.
       --dxp-g-root resolves from var(--lwc-dxpGRoot, ...) — set the inner var. */
    --lwc-dxpGRoot: #F5F5F5;
}

.slds-text-heading_small,
.slds-text-heading--small {
    font-size: 1.25rem !important;
}

.slds-text-heading_medium,
.slds-text-heading--medium {
    font-size: 1.5rem !important;
}

.slds-text-heading_large,
.slds-text-heading--large {
    font-size: 2rem !important;
}

/* Card-header titles (e.g. "Milestones") don't use slds-text-heading_small —
   they size via .slds-card__header-title's --lwc-varFontSize5 chain (fallback
   1rem). Bump the title container to match the enlarged small heading (1.25rem). */
.baseCard__header-title-container {
    font-size: 1.25rem !important;
}

/* ---------- Layout / structural overrides ---------- */

.whiteBackground {
    background-color: transparent !important;
}

.slds-page-header {
    background-color: transparent !important;
}

.highlights-icon-container {
    display: none !important;
}

.entityNameTitle {
    display: none !important;
}

taskfeed1-tf_taskfeed {
    display: block;
    width: 1500px;
    margin-left: -20%;
}

.forceListViewManager {
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 5px;
}

/* Community card: ensures cards behave as blocks (custom elements and anchors
   default to inline) and keep a minimum height when content is short.
   Border/radius now come from the global .slds-card rule below. */
.community-card {
    display: block;
    min-height: 100px;
}

/* ---------- Brand cards: borderless with a 15px radius, site-wide ---------- */
/* Overrides SLDS's default card border/radius everywhere (collection & article
   cards, phase header/milestone cards, etc.). Flat white on the grey page bg. */
.slds-card,
.card-container {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.55)) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    border-radius: 15px !important;
    box-shadow:
        0 8px 32px rgba(40, 40, 40, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.85),
        inset 0 -1px 0 rgba(255, 255, 255, 0.2),
        inset 0 0 24px rgba(255, 255, 255, 0.35) !important;
}

.slds-card__header-title {
    padding: 5px;
}

/* ---------- Phase page: tab layout + metric widgets ---------- */
/* Let the tab bar float on the page background rather than sit in a bordered box. */
.forceCommunityTabLayout {
    background-color: transparent !important;
    border: none !important;
    border-radius: 15px;
}

/* Breathing room between the tab bar and each tab's content. */
.slds-tabs_default__nav {
    margin-bottom: 0.5rem;
}
.slds-tabs_default__content {
    padding-top: 1rem;
}

/* Metric widget tiles (plabs_wsRelList:metricGroup) already carry .slds-card, so
   the glass above covers them. The .metric-grid-item wrapper is left un-glassed to
   avoid a glass-tile-inside-a-glass-tile double frame. */

/* Article-card description: shared typography + clamp to 2-3 lines */
.paper__preview {
    margin: 8px 0 14px;
    text-decoration: none;
    display: -webkit-box !important;
    max-width: 630px;
    color: #727172;
    font-size: 0.8rem;
    line-height: 1.6;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 3;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Article count caption — uniform metadata style */
.articleCount {
    font-size: 0.6875rem;
    color: #A5A5A5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 8px;
}

/* Shared card/header meta row: article count on the left, product
   availability on the right with a comfortable gap. */
.card-meta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 24px;
    margin-top: 8px;
}

.card-meta-row .articleCount {
    margin-top: 0;
}

/* Inline tag list (For Admins / topics / etc.) using metadata-text style with
   middle-dot separators. Sits inside .card-meta-row. */
.card-meta-tags {
    font-size: 0.6875rem;
    color: #A5A5A5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.card-meta-tag {
    color: inherit;
    text-decoration: none;
    cursor: default;
}

a.card-meta-tag {
    cursor: pointer;
}

a.card-meta-tag:hover {
    color: #727172;
}

.card-meta-tags .card-meta-tag + .card-meta-tag::before {
    content: "·";
    margin: 0 6px;
    color: #C7C6C7;
}

.meta {
    display: none;
}

/* Product support banner injected by articleProductSupportIndicator
   directly under .summary on Knowledge article pages. Inline metadata
   row matching the .card-meta-tags style on collection cards — no card
   chrome, just uppercase muted text with a colored product label and
   an inline Learn more link. */
.precursive-product-support-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 24px;
    margin: 0.5rem 0 1rem;
    font-size: 0.8125rem;
    color: #A5A5A5;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.precursive-product-support-banner .product-availability {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.precursive-product-support-banner .product-availability__label {
    margin-right: 8px;
}

.precursive-product-support-banner .product-availability__item + .product-availability__item::before {
    content: "·";
    margin: 0 6px;
    color: #C7C6C7;
}

.precursive-product-support-banner .product-availability__item_obx { color: #211844; }
.precursive-product-support-banner .product-availability__item_rco { color: #EE6775; }
.precursive-product-support-banner .product-availability__item_psx { color: #4AA6AC; }
.precursive-product-support-banner .product-availability__item_p2  { color: #9014DA; }

.precursive-product-support-banner .product-availability__learn-more {
    color: #9014DA;
    text-decoration: underline;
}

.precursive-product-support-banner .product-availability__learn-more:hover {
    text-decoration: none;
}

.lgc-bg {
    background-color: transparent !important;
}

.slds-border_bottom {
    border-bottom: none;
}

/* ---------- Hero (Builder theme hero) ---------- */

.forceCommunityThemeHeroBase {
    padding-bottom: 30px !important;
}

.forceCommunityThemeHeroBase .contentTitle {
    color: #282828;
    font-weight: 500;
}

.contentTitle {
    color: #282828;
    font-weight: 300;
}

.forceCommunityThemeHeroBase .contentCaption {
    color: #727172;
    margin-bottom: 15px;
}

/* ---------- Top navigation ---------- */

.forceCommunityThemeNav .mainNavItem .linkBtn {
    text-transform: uppercase;
}

/* ---------- Breadcrumb ---------- */

.forceCommunityBreadcrumbs {
    padding: 10px 20px;
}

/* ---------- Article column / detail layout ---------- */

.article-column,
.article-container--medium,
.article-container--large,
.forceCommunityCaseDeflection .forceCommunityContactSupportForm {
    /* Glassy at the very top, fading to solid white so body copy stays crisp.
       backdrop-filter frosts the brand wash only where the top is translucent. */
    background: linear-gradient(to bottom,
        rgba(255, 255, 255, 0.6) 0px,
        rgba(255, 255, 255, 0.9) 80px,
        #ffffff 220px);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    margin-top: 14px;
    border-radius: 15px;
    box-shadow:
        0 8px 32px rgba(40, 40, 40, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    padding: 30px 120px 30px 120px !important;
    font-weight: 400;
}

/* hide the random fields and field labels on article layout */
.meta.selfServiceArticleHeaderDetail {
    display: none !important;
}
article.content .slds-form-element__label,
.forceCommunityHTMLArticleHeader .slds-form-element__label {
    display: none !important;
}
/* Hide the "Body" field label on the self-service article view */
[data-target-selection-name="sfdc:RecordField.Knowledge__kav.Body__c"] .slds-form-element__label {
    display: none !important;
}
/* Hide every form-element row except the Body field's rich-text content.
   The Body row contains .slds-rich-text-editor__output; everything else (Title, URL Name, etc.) is metadata noise. */
article.content .forcePageBlockSectionRow:not(:has(.slds-rich-text-editor__output)),
div[data-region-name="content"] article.content .forcePageBlockSectionRow:not(:has(.slds-rich-text-editor__output)) {
    display: none !important;
}
/* Hide the publish-date / classification metadata strip */
.dateAndClassification,
.selfServiceArticleHeaderDetail.publishDate,
.selfServiceArticleHeaderDetail.dateClassification {
    display: none !important;
}

/* ---------- Article body typography ---------- */

/* Article header title */
.article-head,
.selfServiceArticleLayout .article-head,
.forceCommunityHTMLArticleHeader .article-head {
    font-size: 2rem;
    font-weight: 600;
    color: #282828;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* Salesforce's zoomed self-service layout defaults .article-head to 1.4em via a
   runtime-injected <style> that can load after this file, so !important is needed
   to win the equal-specificity tie and keep the article title at 2rem. */
.selfServiceArticleLayout.zoom .article-head {
    font-size: 2rem !important;
}

/* Body heading scale — applies to whichever container Salesforce renders. */
.article-column h1:not(.article-head):not(.t__h1),
.article-column h2:not(.article-head):not(.t__h1),
.cuf-content h1:not(.article-head):not(.t__h1),
.cuf-content h2:not(.article-head):not(.t__h1),
.slds-rich-text-editor__output h1,
.slds-rich-text-editor__output h2,
.selfServiceOutputRichTextWithSmartLinks h1,
.selfServiceOutputRichTextWithSmartLinks h2 {
    line-height: 1.3;
    margin-top: 2.25rem;
    margin-bottom: 0.5rem;
}

/* H1 — largest body heading */
.article-column h1:not(.article-head):not(.t__h1),
.cuf-content h1:not(.article-head):not(.t__h1),
.slds-rich-text-editor__output h1,
.selfServiceOutputRichTextWithSmartLinks h1 {
    font-size: 1.5em;
}

/* H2 */
.article-column h2:not(.article-head):not(.t__h1),
.cuf-content h2:not(.article-head):not(.t__h1),
.slds-rich-text-editor__output h2,
.selfServiceOutputRichTextWithSmartLinks h2 {
    font-size: 1.25em;
}

.article-column h3,
.cuf-content h3,
.slds-rich-text-editor__output h3,
.selfServiceOutputRichTextWithSmartLinks h3 {
    font-size: 1.15em;
    line-height: 1.35;
    margin-top: 1.75rem;
    margin-bottom: 0.5rem;
}

.article-column h4,
.cuf-content h4,
.slds-rich-text-editor__output h4,
.selfServiceOutputRichTextWithSmartLinks h4 {
    font-size: 1.05em;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.article-column h5,
.cuf-content h5,
.slds-rich-text-editor__output h5,
.selfServiceOutputRichTextWithSmartLinks h5 {
    font-size: 1em;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.article-column h6,
.cuf-content h6,
.slds-rich-text-editor__output h6,
.selfServiceOutputRichTextWithSmartLinks h6 {
    font-size: 0.9em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #727172; /* muted body text from palette */
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}

.article-summary,
.article-summary.selfServiceArticleHeaderDetail,
.article-column .article-summary {
    font-size: 1rem;
    line-height: 1.5;
    color: inherit !important;
    font-weight: inherit !important;
}

/* Body reading column — applies to whichever container Salesforce renders */
.article-column .slds-rich-text-editor__output,
.article-column .cuf-content,
.article-column .article-summary,
.article-column .forceCommunityHTMLArticleAttachment,
.cuf-content .slds-rich-text-editor__output {
    font-size: 1rem;
    line-height: 1.7;
    color: inherit !important;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.slds-rich-text-editor__output h1:first-child,
.slds-rich-text-editor__output h2:first-child,
.slds-rich-text-editor__output h3:first-child,
.slds-rich-text-editor__output h4:first-child,
.slds-rich-text-editor__output h5:first-child,
.slds-rich-text-editor__output h6:first-child,
.cuf-content h1:first-child,
.cuf-content h2:first-child,
.cuf-content h3:first-child { margin-top: 0 !important; }

/* RTE links use Precursive blue */
.slds-rich-text-editor__output a {
    color: #9014DA;
    text-decoration: underline;
}

/* RTE block spacing */
.slds-rich-text-editor__output p,
.slds-rich-text-editor__output ul,
.slds-rich-text-editor__output ol,
.slds-rich-text-editor__output dl {
    margin-top: 0;
    margin-bottom: 20px;
}

.slds-rich-text-editor__output ul,
.slds-rich-text-editor__output ol,
.slds-rich-text-editor__output dl {
    margin-top: 1rem;
    padding-left: 1.5rem;
}

.slds-rich-text-editor__output li {
    line-height: 1.7;
    margin-bottom: 10px;
    margin-top: 10px;
}

.slds-rich-text-editor__textarea th,
.slds-rich-text-editor__textarea td,
.slds-rich-text-editor__output th,
.slds-rich-text-editor__output td {
    padding: var(--lwc-spacingXSmall, 0.5rem) !important;
    border: 1px solid #EFEFEF !important;
}

.slds-rich-text-editor__textarea table,
.slds-rich-text-editor__output table {
    width: 100%;
}

.slds-rich-text-editor__output img {
    display: block;
    margin-top: 10px;
}

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

@media only screen and (min-width: 992px) {
    .slds-rich-text-editor__output li {
        margin: 0 0 17px;
    }
}

@media only screen and (max-width: 767px) {
    .article-column,
    .article-container--medium,
    .article-container--large,
    .forceCommunityCaseDeflection .forceCommunityContactSupportForm {
        padding: 10px 40px 10px 40px !important;
        margin-right: 10px;
        margin-left: 10px;
        width: auto !important;
    }

    .slds-card {
        margin-right: 10px;
        margin-left: 10px;
    }

    .slds-breadcrumb {
        display: block;
    }

    .slds-col_padded,
    .slds-col--padded {
        padding-right: 0px;
        padding-left: 0px;
    }
}

/* ---------- Sticky footer: fill the viewport so the footer sits at the page bottom ---------- */
/* The community footer LWC (c:communityFooter) lives in the themeFooter region. Shadow-DOM
   styles can't reach the theme-layout shell, so the bottom-stick lives here in the global CSS.
   NB: do NOT set height:100% on html/body — that gives Salesforce's static siteforcePanelsContainer
   (height:100%) a definite parent and it balloons to a full-viewport empty block below the footer.
   min-height:100vh below is viewport-relative and needs no body height. */

/* Make the theme-layout shell (siteforce:themeLayoutStarter) a full-height flex column.
   Both likely runtime wrapper classes are targeted; confirm against the live /s DOM. */
.siteforceThemeLayoutStarter,
.forceCommunityThemeLayout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    /* Brand wash so the frosted-glass cards have colour to blur. Larger, further-
       reaching Peri (top-right) + Aqua (bottom-left) glows plus a faint all-over
       diagonal so colour reaches the centre too; #F5F5F5 base shows through. */
    background-image:
        radial-gradient(1600px 900px at 90% -15%, rgba(144, 20, 218, 0.18), transparent 72%),
        radial-gradient(1400px 820px at -12% 115%, rgba(74, 166, 172, 0.18), transparent 72%),
        linear-gradient(135deg, rgba(144, 20, 218, 0.05), rgba(74, 166, 172, 0.05));
}

/* themeFooter is the last region; auto top-margin pushes it to the bottom on short pages while
   normal flow keeps it below content (no overlap) on long pages. Content-selector-independent. */
.siteforceThemeLayoutStarter > *:last-child,
.forceCommunityThemeLayout > *:last-child {
    margin-top: auto;
}