/* ============================================================================
 * cwGlobalTheme.css
 * Global theme tokens for the PFD Corporate Website (LWR).
 * Loaded as a static resource in the head markup of the app page, so these
 * custom properties cascade into every LWC shadow DOM via var() fallbacks.
 *
 * Architecture:
 *   Experience Builder → DXP Hooks (--dxp-*) → Semantic Tokens → LWC Components
 *
 * NOTE: The Experience Builder branding set has NOT been updated from Salesforce
 * defaults (PrimaryAccentColor: #005fb2). The custom LWC components use a
 * separate brand palette (--cw-*) that is not backed by DXP hooks. Until the
 * Builder branding set is updated to match the actual PFD brand colours, these
 * two layers coexist:
 *   1. DXP-backed semantic tokens (for Builder-managed / future components)
 *   2. Custom brand palette (for existing custom LWCs)
 * ==========================================================================*/

/* ─── Web Font ──────────────────────────────────────────────────────────────
 * Requires Google Fonts hosts (fonts.googleapis.com, fonts.gstatic.com) to be
 * added as CSP Trusted URLs. If blocked, components fall back to system sans.
 * ==========================================================================*/
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,700&display=swap');

/* ============================================================================
 * 1. DXP-BACKED SEMANTIC TOKENS
 *
 * Every token maps to a DXP hook. Fallback values are the CURRENT runtime
 * values from the Experience Builder branding set "Build Your Own (LWR)"
 * retrieved from org on 2026-06-09.
 *
 * Trace: Experience Builder → DXP Hook → Semantic Token → Component usage
 * ==========================================================================*/
:root {
    --brand-primary: var(--dxp-g-brand, #005fb2);
    --brand-primary-fg: var(--dxp-g-brand-contrast, #ffffff);
    --brand-primary-hover: var(--dxp-g-brand-1, #004989);

    --text-primary: var(--dxp-g-root-contrast, #180430);
    --text-inverse: var(--dxp-g-brand-contrast, #ffffff);

    --primary-background: var(--dxp-g-root, #ffffff);

    /* ─── Primary Buttons ───────────────────────────────────────────────── */
    --button-primary-bg:              var(--dxp-s-button-color, #005fb2);
    --button-primary-border:          var(--dxp-s-button-border-color, #005fb2);
    --button-primary-text:            var(--dxp-s-button-color-contrast, #ffffff);
    --button-primary-hover-bg:        var(--dxp-s-button-color-hover, #004989);
    --button-primary-hover-border:    var(--dxp-s-button-border-color-hover, #004989);
    --button-primary-hover-text:      var(--dxp-s-button-color-hover-contrast, #ffffff);
    --button-primary-focus-bg:        var(--dxp-s-button-color-focus, #004989);
    --button-primary-focus-border:    var(--dxp-s-button-border-color-focus, #004989);
    --button-primary-focus-text:      var(--dxp-s-button-color-focus-contrast, #ffffff);

    /* ─── Secondary Buttons ─────────────────────────────────────────────── */
    --button-secondary-bg:            var(--dxp-s-secondary-button-color, #ffffff);
    --button-secondary-border:        var(--dxp-s-secondary-button-border-color, #005fb2);
    --button-secondary-text:          var(--dxp-s-secondary-button-text-color, #005fb2);
    --button-secondary-hover-bg:      var(--dxp-s-secondary-button-color-hover, #ebebeb);
    --button-secondary-hover-border:  var(--dxp-s-secondary-button-border-color-hover, #004989);
    --button-secondary-hover-text:    var(--dxp-s-secondary-button-text-color-hover, #004989);
    --button-secondary-focus-bg:      var(--dxp-s-secondary-button-color-focus, #ebebeb);
    --button-secondary-focus-border:  var(--dxp-s-secondary-button-border-color-focus, #004989);
    --button-secondary-focus-text:    var(--dxp-s-secondary-button-text-color-focus, #004989);

    /* ─── Tertiary Buttons ──────────────────────────────────────────────── */
    --button-tertiary-bg:             var(--dxp-s-tertiary-button-color, rgba(0,0,0,0));
    --button-tertiary-border:         var(--dxp-s-tertiary-button-border-color, rgba(0,0,0,0));
    --button-tertiary-text:           var(--dxp-s-tertiary-button-text-color, #005fb2);
    --button-tertiary-hover-bg:       var(--dxp-s-tertiary-button-color-hover, rgba(0,0,0,0));
    --button-tertiary-hover-border:   var(--dxp-s-tertiary-button-border-color-hover, rgba(0,0,0,0));
    --button-tertiary-hover-text:     var(--dxp-s-tertiary-button-text-color-hover, #004989);
    --button-tertiary-focus-bg:       var(--dxp-s-tertiary-button-color-focus, rgba(0,0,0,0));
    --button-tertiary-focus-border:   var(--dxp-s-tertiary-button-border-color-focus, rgba(0,0,0,0));
    --button-tertiary-focus-text:     var(--dxp-s-tertiary-button-text-color-focus, #004989);

    --form-bg: var(--dxp-s-form-element-color-background, #ffffff);
    --form-bg-focus: var(--dxp-s-form-element-color-background-active, #ffffff);
    --form-text: var(--dxp-s-form-element-text-color, #1a1b1e);
    --form-text-focus: var(--dxp-s-form-element-text-color-focus, #1a1b1e);
    --form-border: var(--dxp-s-form-element-color-border, #76716b);
    --form-focus-border: var(--dxp-s-form-element-color-border-focus, #005fb2);
    --form-error-border: var(--dxp-g-destructive, #c23934);
    --form-placeholder: var(--dxp-s-form-element-placeholder-text-color, #76716b);
    --form-label: var(--dxp-s-form-element-label-color, #1a1b1e);
    --form-checkbox-bg: var(--dxp-s-form-checkbox-color-background, #ffffff);
    --form-checkbox-bg-checked: var(--dxp-s-form-checkbox-color-background-checked, #ffffff);
    --form-checkbox-border: var(--dxp-s-form-checkbox-color-border, #76716b);
    --form-checkbox-border-checked: var(--dxp-s-form-checkbox-color-border-checked, #76716b);
    --form-dropdown-text: var(--dxp-s-dropdown-text-color, #1a1b1e);
    --form-dropdown-bg: var(--dxp-s-dropdown-color-background, #ffffff);
    --form-dropdown-text-hover: var(--dxp-s-dropdown-text-color-hover, #000000);
    --form-dropdown-bg-hover: var(--dxp-s-dropdown-color-background-hover, #ecebea);
    --form-dropdown-border: var(--dxp-s-dropdown-color-border, #ecebea);

    --link-color: var(--dxp-g-brand, #005fb2);
    --link-hover-color: var(--dxp-s-link-text-color-1, #004989);

    --font-family-primary: 'DM Sans', 'Salesforce Sans', Arial, Helvetica, sans-serif;
    --font-family-secondary: "ES Face", Georgia, 'Times New Roman', serif;
    --font-size-base: 16px;
}

/* ============================================================================
 * 2. CUSTOM BRAND PALETTE (not DXP-backed)
 *
 * These tokens are consumed by the custom LWC components (cwPageHeader,
 * cwPageFooter, cwPageSection, cwCommerceProducts, cwSiteWideAlert). They
 * represent the actual PFD brand colours as specified in the design system
 * but are NOT yet configured in the Experience Builder branding set.
 *
 * MIGRATION PATH: Once the Builder PrimaryAccentColor is updated to #3370f4
 * and other brand colours are configured, these should be replaced with
 * semantic tokens that reference DXP hooks.
 * ==========================================================================*/
/* :root {
    --cw-blue: #3370f4;
    --cw-navy: #002868;
    --cw-red: #e62d2d;
    --cw-cream: #fdf3e8;
    --cw-dark: #180430;
    --cw-grey-13: #25251f;
    --cw-white: #ffffff;
    --cw-border-light: #d9dfe7;

    --cw-font-sans: 'DM Sans', 'Salesforce Sans', Arial, Helvetica, sans-serif;
    --cw-font-serif: 'ES Face', Georgia, 'Times New Roman', serif;
} 
*/

/* ============================================================================
 * 3. DXP SECTION SPACING RESET
 *
 * This site uses full-bleed bands that must sit flush. We override the DXP
 * spacing hooks to zero so sections abut without gaps. cwGlobalTheme is
 * injected last in <head>, so these :root overrides win.
 * Only vertical/block + wrapper spacers are zeroed; horizontal gutters are kept.
 * ==========================================================================*/
/* :root {
    --dxp-s-component-wrapper-spacer-size: 0rem !important;
    --dxp-s-component-wrapper-spacer-size-mobile: 0rem !important;
    --dxp-s-section-content-spacing-block-start: 0rem !important;
    --dxp-s-section-content-spacing-block-end: 0rem !important;
    --dxp-s-section-content-spacing-block-start-mobile: 0rem !important;
    --dxp-s-section-content-spacing-block-end-mobile: 0rem !important;
    --dxp-s-column-spacer-size: 0rem !important;
    --dxp-s-column-spacer-size-mobile: 0rem !important;
} */

/* ============================================================================
 * 4. LAYOUT SPACING OVERRIDES
 *
 * Belt-and-braces fallback for layout wrappers whose vertical padding/margin/gap
 * is applied directly via class names (covers class-name variants across DXP
 * releases and SLDS versions).
 * ==========================================================================*/
community_layout-flexible-layout,
community_layout-section,
community_layout-column,
.cb-section,
.cb-section_row,
.cb-section_column,
.cb-section_content,
.dxp-section,
.dxp-grid,
.dxp-column,
.comm-section,
.comm-layout-column,
.slds-section,
[data-region-name],
[class*='sectionColumn'],
[class*='section_column'] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    row-gap: 0 !important;
}

main[data-f6-region] {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

main[data-f6-region] > *,
.cw-layout__main > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.component-wrapper-spacer {
    margin-bottom: 0;
}

/* ============================================================================
 * Start of custom overrides for the Customer Logo section (cwCustomerLogo).
 * ==========================================================================*/

.cw-logo-section__body .cb-outputRichText-container.ql-editor {
    display: flex;
    gap: 10px 90px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cw-logo-section__body p {
    flex: 0 0 220px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cw-logo-section__body p img {
    max-width: 220px;
    max-height: 220px;
}

.cw-logo-section__body p:not(:has(img)) {
    display: none;
}

@media (max-width: 767px) {
    .cw-logo-section__body .cb-outputRichText-container.ql-editor {
        gap: 10px 30px;
    }
    
    .cw-logo-section__body p {
        flex: 0 0 120px;
    }
    
    .cw-logo-section__body p img {
        max-width: 120px;
        max-height: 120px;
    }
}

/* ============================================================================
 * End of custom overrides for the Customer Logo section (cwCustomerLogo).
 * ==========================================================================*/

/* ============================================================================
 * Start of custom overrides for the Suppliers Logo section (cwSuppliersLogo).
 * ==========================================================================*/

 .cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor {
    display: flex;
    gap: 10px 50px;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor p {
    flex: 0 0 180px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor p img {
    max-width: 180px;
    max-height: 180px;
}

.cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor p:not(:has(img)),
.cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor a:not(:has(img)) {
    display: none;
}

@media (max-width: 767px) {
    .cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor {
        gap: 10px 20px;
    }
    
    .cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor p {
        flex: 0 0 75px;
    }
    
    .cw-suppliers-logo-section__body .cb-outputRichText-container.ql-editor p img {
        max-width: 75px;
        max-height: 75px;
    }
}

/* ============================================================================
 * End of custom overrides for the Suppliers Logo section (cwSuppliersLogo).
 * ==========================================================================*/


 /* ============================================================================
 * Start of custom overrides for the Oval Background section (cwOvalBackground).
 * ==========================================================================*/

 .cw-oval-bg {
    width: 100vw;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: calc((50vw - 50%) * -1);
    z-index: 0;
}

.cw-oval-bg:before {
    content: '';
    position: absolute;
    /* KEEP IN SYNC with the c/cwOvalBackground LWC module, which is the source of truth for every
       band rendered inside a component shadow tree. This copy only covers light-DOM markup.

       Both endpoints are measured Figma ellipses, interpolated linearly between them:
       desktop = homepage Ellipse 26 "Our Products" (2893 x 1820 on the 1920 frame),
       mobile  = homepage Ellipse 33 (560 x 246.3 on the 390 frame).
       Curve WIDTH: 2893px @1920 (≈151vw) → 560px @390 (≈143vw). */
    --cw-oval-width: clamp(143vw, calc(152.48vw - 34.69px), 151vw);
    /* Curve DEPTH = the ellipse's half-height: 910px @1920 → 123px @390. A FIXED, screen-relative
       length (NOT a % of the element height), so the curve scales with the viewport instead of
       deepening as the band's content grows taller. */
    --cw-oval-v-radius: clamp(123px, calc(51.43vw - 77.42px), 910px);
    width: var(--cw-oval-width);
    height: 100%;
    /* Keep the wider-than-viewport ellipse centred on the section at every width. */
    left: calc((100vw - var(--cw-oval-width)) / 2);
    z-index: 0;
    background: var(--cw-oval-bg-color, var(--cw-section-bg-color, #F9F9FA));
}

/* Slash syntax: horizontal radius stays 50% (a full-width arc, scaled by --cw-oval-width) while the
   vertical radius is the fixed --cw-oval-v-radius, so the dome depth is content-independent. The
   min() caps the radius against the element height, otherwise the browser scales every radius down
   and the dome collapses into a shallow arc with a flat centre. One curve may use the full height;
   two curves share it, hence 100% vs 50%. */
.cw-oval-bg.oval-top:before {
    border-radius: 50% 50% 0 0 / min(var(--cw-oval-v-radius), 100%) min(var(--cw-oval-v-radius), 100%) 0 0;
}

.cw-oval-bg.oval-bottom:before {
    border-radius: 0 0 50% 50% / 0 0 min(var(--cw-oval-v-radius), 100%) min(var(--cw-oval-v-radius), 100%);
}

.cw-oval-bg.oval-top.oval-bottom:before {
    border-radius: 50% / min(var(--cw-oval-v-radius), 50%);
}

/* The former @media (max-width: 767px) override (200vw / -50vw) is no longer needed — the
   clamp() above scales the curve width fluidly from 120vw → 200vw and derives the left offset
   from it, so the breakpoint jump is gone. */

/* ============================================================================
 * End of custom overrides for the Oval Background section (cwOvalBackground).
 * ==========================================================================*/

/* ============================================================================
 * cwReusableImage decorative-ellipse overflow guard
 *
 * cwReusableImage's optional decorative ellipse intentionally bleeds wider than the
 * image box, so without a clipping ancestor it adds page-level horizontal scroll on
 * narrow screens. When the component sits inside cwPageSection that section already
 * clips it; placed directly on a page there is no such ancestor.
 *
 * We clip at the page's `main` region (the widest full-width block box) rather than at
 * a section/column. Two reasons:
 *   1. Reliability: `main` is a normal block box that always establishes a clip box.
 *      Some layout hosts (e.g. community_layout-section) carry full-bleed background
 *      machinery and do NOT reliably clip their in-flow content, so overflow-x:clip on
 *      them shows as "computed" but never actually clips the ellipse.
 *   2. Room: clipping at `main` lets the ellipse bleed all the way to the viewport edge
 *      (maximum visibility) and only clips at the screen edge — so it is never cropped
 *      early the way a narrower section/column clip would crop it.
 *
 * Scoped via :has() to ONLY pages that actually contain the component, so the rest of
 * the site is unaffected. `clip` (not `hidden`) keeps it from becoming a scroll container.
 * ==========================================================================*/
dxp_layout-columns:has(c-cw-reusable-image), community_layout-section.comm-section-container:has(c-cw-reusable-image) {
    overflow-x: clip;
}

/* ============================================================================
 * Start of custom overrides for the Page Section Logo section (cwPageSection).
 * ==========================================================================*/

 @container cw-section (max-width: 1024px) {
    c-cw-page-section .cw-section__body .cb-outputRichText-container.ql-editor {
         text-align: center;
     }
 }

 @container cw-media-section (max-width: 1024px) {
     .cw-media-section__body .cb-outputRichText-container.ql-editor {
         text-align: center;
     }
 }


 /* ============================================================================
 * Start of custom overrides for the Summary Section section (cwSummarySection, cwValuePropositionSection).
 * ==========================================================================*/

 @media (max-width: 768px) {
    .cw-summary-section__desc .cb-outputRichText-container.ql-editor * {
        text-align: center;
    }

    .cw-summary-section__desc:has(slot *) slot * {
        text-align: center;
    }

    .cw-value-proposition-section__content .slds-rich-text-editor__output ul, 
    .cw-value-proposition-section__content .slds-rich-text-editor__textarea ul {
        list-style-position: inside;
    }
 }

 /* ============================================================================
 * End of custom overrides for the Summary Section section (cwSummarySection, cwValuePropositionSection).
 * ==========================================================================*/

.cw-summary-section__desc .cb-outputRichText-container.ql-editor ul {
    padding-left: 0;
}

.custom-list-style {
    font-family: var(--font-family-primary);
    font-size: 23px;
    font-weight: 400;
    line-height: 1.25;
}

@media (max-width: 768px) {
    .custom-list-style {
        font-size: 14px;
    }
}

@media (min-width: 390px) and (max-width: 768px) {
    .custom-list-style {
        margin: auto;
        max-width: 80%;
    }
}