/**
 * Migration Fixes - Custom CSS Overrides
 * 
 * These styles were inline on the legacy site pages and need to be 
 * preserved during the XM Cloud migration to maintain visual consistency.
 * 
 * Purpose: Override specific legacy styles that don't match the new platform
 * or fix spacing/sizing issues during migration.
 */

/* Product Accordion List - link color
   Legacy: .container .p-accordian-list__bottom a used #E7040B (CSL brand red).
   This rule was not in cslbehring.css and must be explicitly carried forward. */
.container .p-accordian-list__bottom a {
    color: #E7040B;
}

/* Language/UI Selector Minimum Width Fix */
.ui-selector { 
    min-width: 0 !important;
}

/* Footer Mobile Fixes */
@media (max-width: 47.938rem) {
    .footer-page .footer-nav .links-mob ul {
        padding-left: 0px !important;
    }

    .footer-page .footer-nav .links-mob a {
        word-wrap: break-word !important;
    }

    .footer-page .footer-nav .links-mob .text {
        max-width: 100% !important;
    }

    .footer-page .footer-nav .logotext .logo a {
        padding: 0 !important;
    }
}

/* Footer Content Container - keep original max-width from cslbehring.css (80rem) */

/* Accordion Row columns - Tailwind utility class name conflict
 *
 * The legacy CSS uses .list-item as a layout class on column <div>s inside
 * .content-lists (see _AccordionRow.cshtml → AccordionRow.tsx).
 *
 * Tailwind v4 ships a .list-item utility (display: list-item) that the JIT
 * emits whenever a class literal `list-item` appears in source. Because that
 * utility sits in @layer utilities — lower priority than unlayered
 * cslbehring.css rules that only set width/margin — nothing in the legacy
 * bundle overrides the display. Result: every column <div> renders as a
 * list item with a ::marker bullet between/before columns (CBXCM, visible
 * both in authored content and in empty fields in Pages editor).
 *
 * Fix: reset display so the column divs render as plain blocks. Scoped to
 * .accordion__row so it can't affect any future legitimate list-item use. */
.accordion__row .content-lists .list-item {
    display: block;
}

/* Content List Module - Tailwind Bootstrap grid class name conflict
 *
 * The legacy CSS uses col-{n} (col-2, col-3, col-4) as selector hooks on the
 * ContentListContainer <section> element to control how many columns the child
 * items render in (e.g. .content.col-3 .content__items, .content.col-3 .content__item).
 *
 * The tailwind-bootstrap-grid plugin also generates utility classes with the same
 * names (.col-3 { flex: 0 0 auto; width: 25% }) intended for Bootstrap grid columns
 * inside a .row. Because these live in @layer utilities (lower cascade priority than
 * unlayered cslbehring.css), they are normally harmless — BUT cslbehring.css never
 * sets `width` or `flex` directly on .col-3, so the layered utility still wins for
 * those properties and incorrectly shrinks the section to 25% of the page width.
 *
 * Fix: reset width and flex on these section elements so they behave as full-width
 * block elements. This does not affect actual Bootstrap grid .col-{n} columns because
 * those are always nested inside a .row, never inside .module.content. */
.module.content.col-2,
.module.content.col-3,
.module.content.col-4 {
    width: 100%;
    flex: none;
}

/* Hero Carousel - CSS fallback when legacy JS slider doesn't initialize
 *
 * The legacy CSS rule `.js-slider.type-each-tx .js-slider-item` sets opacity: 0
 * on all slides. The legacy JS adds `already-in` (opacity: 1) to the active slide
 * after initialization. When the legacy JS framework doesn't fully initialize
 * (e.g. missing ModuleManager, component lifecycle differences in React), slides
 * stay invisible. This fallback makes the first slide visible by default.
 * If the legacy JS does initialize, it overrides this with its own class management. */
.js-slider.type-each-tx .js-slider-item:first-child {
    opacity: 1;
    z-index: 1;
}

/* ============================================================================
 * XM Cloud Forms SDK — Style Override
 * CBXCM-445: Configure Multilingual Form
 *
 * The XM Cloud Forms SDK generates forms with a completely different class
 * system than the legacy Bootstrap-based .csl-form. These rules restyle the
 * XMC Forms SDK output to visually match the legacy form styling.
 *
 * All rules are scoped to form[data-formid] — this attribute is present on
 * every XMC Forms SDK form and never appears on legacy forms, so there is
 * zero risk of collision with existing styles.
 * ============================================================================ */

/* --- 0a. Main form wrapper — full width like legacy container */
.insider-login .main-form-wrapper,
.insider-login .center-wrapper {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100% !important;
    justify-content: stretch !important;
    align-items: stretch !important;
}

/* --- 0b. Slot container first child (title text) — match legacy h4.csl-form__sst */
form[data-formid] .slot-container > :first-child,
form[data-formid] .slot-container > :first-child p {
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    font-weight: 300 !important;
    line-height: 25px !important;
}

/* --- 1. Field group spacing ------------------------------------------------ */
form[data-formid] .component.shared-input-field,
form[data-formid] .component.single-select-field,
form[data-formid] .component.multi-select-field,
form[data-formid] .component.dropdown-list-field,
form[data-formid] .component.checkbox-field,
form[data-formid] .component.radio-button-list-field {
    padding: 5px 0;
    width: calc(100% - 30px);
}

/* --- 2. Label styling ------------------------------------------------------ */
form[data-formid] .global-input-label,
form[data-formid] .form-field-label {
    display: block;
    font-family: "Montserrat", sans-serif !important;
    font-size: 15px !important;
    line-height: 25px;
    font-weight: 400 !important;
    color: inherit;
    text-decoration: none;
    margin-bottom: 5px;
}

/* --- 3. Required asterisk -------------------------------------------------- */
/* Hide the SDK's trailing * span (it appears after the label text) */
form[data-formid] .form-field-required {
    display: none !important;
}

/* Inject * BEFORE the label text — matching legacy label.control-label::before */
form[data-formid] .required-component .global-input-label::before,
form[data-formid] .required-component .form-field-label::before {
    content: "*";
    color: #fc1921;
    font-weight: bolder;
}

/* Hide screen-reader-only text that would otherwise render inline
 * e.g. ", required" or ", Max 200 characters," appended by the Forms SDK */
form[data-formid] .a11y-visible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- 4. Text / email / textarea inputs ------------------------------------ */

/* The SDK sets lp-flex-1 on both the wrapper div and the input itself.
 * This flexbox utility collapses the input height unless we reset it.
 * Reset the wrapper to a plain block so it respects the input's explicit height. */
form[data-formid] .form-input-wrapper-div {
    display: block !important;
    width: 100%;
    min-height: 60px;
    position: relative; /* keep this for the select chevron / dropdown overlay */
}

/* The SDK adds a border + blue :focus-within ring to the outer label wrapper
 * (.form-input-wrapper-element). Reset it entirely — the border lives on the
 * input itself, not the container. */
form[data-formid] .form-input-wrapper-element {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

form[data-formid] .form-input-wrapper-element:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Also reset the inner global-input-wrapper div if it carries a border */
form[data-formid] .global-input-wrapper {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

form[data-formid] .global-input-wrapper:focus-within {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

form[data-formid] .global-input-element,
form[data-formid] .form-input-element {
    display: block !important;
    width: 100% !important;
    height: 60px !important;   /* !important overrides SDK lp-flex-1 flex-basis/height */
    min-height: 60px;
    padding: 0 15px;
    font-family: "Montserrat", sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: #555;
    background-color: #fff;
    border: 1px solid #b5b5b5 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0 !important;
    transition: border-color 0.15s ease-in-out;
}

form[data-formid] .global-input-element:focus,
form[data-formid] .form-input-element:focus {
    outline: none !important;
    border: 1px solid #E7040B !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

form[data-formid] textarea.global-input-element,
form[data-formid] textarea.form-input-element {
    height: auto !important;
    min-height: 120px !important;
    padding: 10px 15px;
    resize: vertical;
}

/* --- 5. Custom select combobox (JS-driven, not a native <select>) ----------
 * Structure inside .form-input-select-element:
 *   .form-input-wrapper-div (position: relative set by SDK)
 *     input[role="combobox"].global-input-element  ← styled like a select
 *     i.mdi.mdi-menu-down                          ← dropdown chevron
 *     .form-select-option-container                ← options list
 * --------------------------------------------------------------------- */
form[data-formid] .form-input-select-element input[role="combobox"] {
    cursor: pointer;
    padding-right: 40px; /* room for the chevron icon */
    /* CSS background arrow — always perfectly centred regardless of container height */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23555555' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 20px 20px;
}

/* Hide the SDK's mdi icon — replaced by the CSS background arrow above */
form[data-formid] .form-input-select-element .mdi-menu-down,
form[data-formid] .form-input-select-element i.mdi {
    display: none !important;
}

/* --- 6. Dropdown option list ----------------------------------------------- */
form[data-formid] .form-select-option-container {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    border: 1px solid #b5b5b5;
    border-top: none;
    z-index: 200;
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
}

form[data-formid] .form-select-option {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    font-size: 15px;
    font-weight: 300;
    color: #555;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

form[data-formid] .form-select-option:hover,
form[data-formid] .form-select-option:focus {
    background-color: #f5f5f5;
}

form[data-formid] .form-select-option[aria-selected="true"] {
    background-color: #f0f0f0;
    font-weight: 400;
}

/* Check mark icon — visible only on the selected option */
form[data-formid] .form-select-option .selected-indicator {
    display: none;
    margin-right: 8px;
    color: #E7040B;
    font-size: 16px;
}

form[data-formid] .form-select-option[aria-selected="true"] .selected-indicator {
    display: inline-block;
}

/* --- 7. Submit button ------------------------------------------------------ */
form[data-formid] .submit-button-wrapper,
form[data-formid] .form-submit-border {
    text-align: center;
    margin-top: 30px;
    margin-bottom: 30px;
    clear: both;
}

form[data-formid] button.submit-button {
    display: inline-block;
    font-family: inherit;
    font-size: 15px;
    font-weight: bold;
    line-height: normal;
    padding: 15px 25px;
    border: 0;
    border-radius: 30px;
    outline: none;
    text-align: center;
    background-color: #E7040B;
    color: #fffffd;
    cursor: pointer;
    will-change: color, background-color;
    transition: color 250ms, background-color 250ms;
}

form[data-formid] button.submit-button:hover {
    outline: none;
    background-color: #808285;
    color: #fff;
}

form[data-formid] button.submit-button:focus {
    outline: none;
}

form[data-formid] button.submit-button:focus:not(:hover) {
    background-color: #E7040B;
    color: #fff;
}

form[data-formid] button.submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* --- 8. Helper / description text & character counter --------------------- */
form[data-formid] .global-input-description {
    display: block;
    font-size: 14px;
    color: #888;
    margin-top: 5px;
}

form[data-formid] .limit-counter {
    display: block;
    font-size: 13px;
    color: #888;
    text-align: right;
    margin-top: 4px;
}

/* --- 9. Validation error messages (match legacy .help-block styling) ------ */
form[data-formid] .form-input-error-message,
form[data-formid] .global-input-error-message {
    position: static !important;
    display: block !important;
    font-size: 14px !important;
    color: #fc1921 !important;
    margin-top: 10px !important;
    margin-bottom: 15px !important;
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
    width: auto !important;
    z-index: auto !important;
    font-weight: normal !important;
    padding-left: 0 !important;
    font-style: normal !important;
    text-decoration: none !important;
    height: auto !important;
}

/* Remove the error icon (alert-circle) — legacy has no icon.
   Use > span to only target direct child spans, not the error text itself. */
form[data-formid] .form-input-error-message > span.mdi-alert-circle,
form[data-formid] .global-input-error-message > span.mdi-alert-circle {
    display: none !important;
}

form[data-formid] .form-input-error-message > span.mdi-alert-circle::before,
form[data-formid] .global-input-error-message > span.mdi-alert-circle::before {
    display: none !important;
    content: none !important;
}

/* --- 10. Validation message popups --------------------------------------- */
form[data-formid] .message-popup {
    display: none; /* JS toggles display:block / display:none */
    font-size: 14px;
    margin-top: 10px;
    margin-bottom: 15px;
    padding: 8px 12px;
}

form[data-formid] .message-popup.fail-popup {
    color: #fc1921;
    border-left: 3px solid #fc1921;
    background-color: #fff5f5;
}

/* Hide the AI Form's own success message — React verification UI replaces it */
form[data-formid] .message-popup.success-popup {
    display: none !important;
}

/* Opt-in collapse-to-success-message: when a form carries the hidden field
   onSubmitSuccess=hideForm and is submitted successfully, FillFormSuccessHandler
   adds .csl-form--submitted to the form. Hide everything in the slot-container
   except the message wrapper (the child that contains the popups), then reveal
   the success message. The extra class outranks the base success-popup hide rule
   above; both use !important. :has() keeps the message wrapper regardless of
   its position among the slot-container children. */
form[data-formid].csl-form--submitted .slot-container > *:not(:has(.message-popup)) {
    display: none !important;
}

form[data-formid].csl-form--submitted .message-popup.success-popup {
    display: block !important;
}

form[data-formid].csl-form--submitted .message-popup.fail-popup {
    display: none !important;
}

/* --- Hide character limit counters (not shown in legacy) ------------------ */
form[data-formid] .limit-counter {
    display: none;
}

/* HTTP Status Pages (.p-404 / .p-403 / .p-410) — Tailwind class name conflict
 *
 * The legacy CSS uses .p-404 (and siblings) on the <article> wrapper of HTTP
 * status pages to add `margin-top: 100px` (see _misc-page.scss → bundled in
 * cslbehring.css). Matches legacy markup at
 * Views/CSLShared/Shared/_PageNotFound.cshtml.
 *
 * Tailwind v4 JIT compiles `p-{N}` as a dynamic padding utility. When `p-404`
 * appears in source, Tailwind emits `.p-404 { padding: calc(var(--spacing) * 404) }`
 * = ~101rem (~1616px), which lives in @layer utilities. The unlayered legacy
 * margin-top still applies, but the huge padding pushes all child content off
 * screen and the page renders blank.
 *
 * Fix: reset padding on these status-page wrappers so only the legacy
 * margin-top takes effect. !important is needed to beat the layered Tailwind
 * utility from inside the same selector. */
.p-403,
.p-410,
.p-404 {
    padding: 0 !important;
}

/* Main Navigation - Level-2 (tertiary) panel drops one row — Tailwind Bootstrap grid .col conflict
 *
 * The mega-menu uses the legacy CSL `.col` class on every column, including the
 * inner column that wraps the Level-2 grandchild links:
 *   .col.header-sub-menu > .tertiary[data-level="1"] > div > .col > .col__inner > .nav-link[data-level="2"]
 *
 * The tailwind-bootstrap-grid plugin also emits a `.col` utility (see main.css
 * `@plugin 'tailwind-bootstrap-grid'`):
 *   .col { flex: 1 0 0%; width: initial; display: initial; }
 * The `display: initial` / `width: initial` are a deliberate import-order "hack"
 * in the plugin. `display: initial` resolves to the property's CSS-wide initial
 * value, which is `inline`. cslbehring.css never sets `display` on `.col`, so the
 * plugin's value wins (its `width: initial` is harmless here — the more-specific
 * `.header .tertiary[data-level="1"] .col { width: 100% }` overrides it).
 *
 * Most `.col`s in the menu are direct children of the flex `.container`, so they
 * are flex items and the browser blockifies `inline → block` — no visible effect.
 * But this inner tertiary `.col` lives inside a plain block <div> (not a flex
 * parent), so it stays `display: inline`. The inline line-box leading then pushes
 * the first grandchild ("R&D mogelijkheden") down ~27px, one row below where it
 * sits in legacy (aligned with the first Level-1 item).
 *
 * Fix: restore the legacy default `display: block`. Scoped to the tertiary column
 * so it can't touch any real Bootstrap grid `.col`. Same approach as the
 * .col-2/3/4 and .list-item conflicts above. */
.header .tertiary[data-level="1"] .col {
    display: block;
}

/* Global Selector Modal (country/family selector) - Tailwind Bootstrap grid .col conflict
 *
 * The modal lays out its brand-family and geographic columns with the legacy
 * `.col` class inside `.f-row[data-lv="0"]`/`.f-row[data-lv="1"]`. Legacy CSS
 * (_global-selector.scss) only sets margin/padding on `.f-row .col` — it relies
 * on the flex item's default `flex: 0 1 auto` so each column hugs its own
 * content width and `.f-row[data-lv="0"] { justify-content: center }` packs
 * them together in the middle of the screen.
 *
 * The tailwind-bootstrap-grid plugin's layered `.col { flex: 1 0 0%; ... }`
 * utility wins on the `flex` property (same root cause as the .col-2/3/4 and
 * tertiary-menu conflicts above — the plugin utility is layered but legacy
 * never declares `flex` on `.col` itself, so the plugin still wins that one
 * property). This stretches every column to share the row equally instead of
 * sizing to content, spreading the modal's columns far wider than legacy.
 *
 * Fix: restore the legacy content-sized flex behavior. Scoped to the modal's
 * .f-row so it can't touch any real Bootstrap grid `.col`. */
.global-selector .f-row .col {
    flex: none;
}

/* Main Navigation - suppress :hover underline flicker on items with dropdowns
 *
 * cslbehring.css declares:
 *   .nav-link[data-level="0"] > .label:hover { text-decoration: underline; ... }
 *   .nav-link[data-level="0"].hover-intent > .label { ...; text-decoration: none; }
 *
 * The :hover state applies as soon as the pointer enters the link, but
 * `hover-intent` is only added by the JS event handler one frame later. That
 * gap paints a brief underline on first hover. Suppressing the underline on
 * :hover removes the flicker. Scoped to .has-children so leaf items keep
 * the legacy :hover underline (it was the visible "current page / hover"
 * indicator; hover-intent never applies there). */
.nav-link[data-level="0"].has-children > .label:hover {
    text-decoration: none;
}

/* Brightcove player — inner <video> collapses to 0 height (audio-only playback)
 *
 * cslbehring.css ships:
 *   .video-brightcove .video-js .vjs-tech { position: relative }
 *
 * That rule was paired with an `.article__body__video.full` ancestor in legacy
 * markup that gave the player an explicit height. The new headapp renders the
 * Article Video / BasicVideo components without that ancestor, so the inner
 * <video class="vjs-tech"> ends up with:
 *   - position: relative (from cslbehring.css)
 *   - height: 100% (from Brightcove's own player CSS)
 *   - parent .video-js has height: 0 + padding-top: 56.25% (vjs-fluid aspect ratio)
 * height: 100% of 0 = 0. Audio streams, video frame has nowhere to render.
 *
 * Fix: switch position back to absolute so the element fills the padding box
 * that vjs-fluid creates. Lives here in migration-fixes.css (loaded after
 * cslbehring.css) so it wins on cascade order without needing !important.
 * Scoped to .video-brightcove so this only affects Brightcove player instances
 * (Article Video, Hero, Banner, etc). */
.video-brightcove .video-js .vjs-tech {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Article Video (media-library / Plyr) — keep controls visually separated.
 * In local/XM builds the Plyr controls bar can render transparent over the
 * black video wrapper, which makes controls look overlapped/covered. Legacy
 * styling expects a white controls strip for this module.
 * Scoped to article body only to avoid side effects on other video contexts. */
.article__body .module.video .plyr__controls {
    background: #fff;
}

/* Scrolling Ticker — confine the marquee animation to the first <div> only.
 *
 * cslbehring.css ships a descendant selector for the scrolling marquee:
 *   .marquee div {
 *     font-size: 18px;
 *     padding-left: 100%;
 *     display: inline-block;
 *     animation: animate 30s linear infinite;
 *     position: absolute;
 *   }
 *
 * It assumes exactly ONE <div> under .marquee (the legacy cshtml hand-wrote it
 * and `@Html.Sitecore().Field()` rendered the rich-text value with no extra
 * wrapper). In XMC the rendered DOM is deeper — the SDK's <RichText> outputs
 * its own <div>, and migrated rich-text field values frequently include a
 * wrapping <div> around the <p>. With multiple descendants matching, each one
 * compounds the translate(-100%, 0) and stacks another `padding-left: 100%`,
 * which (a) makes the visible scroll speed several times faster than legacy
 * and (b) leaves a long "empty ticker" gap between cycles before the text
 * re-enters from the right.
 *
 * Fix: reset animation + positioning + padding on any div nested two or more
 * levels deep inside .marquee. Higher specificity (0,1,2) than the legacy
 * rule (0,1,1), so it wins without !important. The first-level div keeps the
 * full legacy animation; deeper divs render as plain blocks and contribute
 * only their natural width. End result matches legacy: continuous scroll,
 * no gap, no compounded speed — even when content authors wrap text in
 * extra divs. */
.marquee div div {
    padding-left: 0;
    display: block;
    position: static;
    animation: none;
}

/* Featured Area — editing-mode placeholder visibility.
 *
 * Legacy 9.3 Experience Editor exposed every image field as a stacked,
 * full-width placeholder via `.experienceeditor .featured-area__img.lg,
 * .experienceeditor .featured-area__img.sm { display:block; width:100% !important;
 * height:auto !important; transform:none !important; min-height:100px; ... }`.
 * Pages Builder doesn't apply `.experienceeditor`, so the non-single
 * FeaturedArea keeps its production overlap layout (.lg at 75% width,
 * .sm with `margin-left:-25%; transform: translateY(170px)`), and empty
 * <NextImage> placeholders end up cramped or hidden — authors can't tell
 * where to click to assign images.
 *
 * The TSX adds `featured-area-edit-mode` to the section when `isEditing`
 * is true. These rules then flatten the layout so both figures stack at
 * full width with a min-height that guarantees the `scEmptyImage`
 * placeholder is visible and clickable. Mirrors the legacy editor UX.
 * Affects FAWO too — its `.single .sm { display:none }` is overridden so
 * authors can edit Image Mobile inline (parallel to legacy parity). */
.featured-area.featured-area-edit-mode .featured-area__imgs {
    display: block !important;
}
.featured-area.featured-area-edit-mode .featured-area__img.lg,
.featured-area.featured-area-edit-mode .featured-area__img.sm {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100px;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background-size: 0 !important;
    animation: none !important;
}
.featured-area.featured-area-edit-mode .featured-area__img > img {
    display: block;
}

/* ============================================================================
 * ArticleTagList — Legacy parity overrides
 *
 * Three cascade-fighting fixes carried over from the migrated rendering:
 *
 * 1. Container max-width re-pin (direct-child only).
 *    Bundled cslbehring.css ships `.module .container { max-width: none;
 *    width: 100% }`, stripping the default 1180px cap inside every module.
 *    Without it the Topics + tag-rows section grows to viewport width.
 *    Direct-child selector intentionally excludes `.news-hub > .container`
 *    (which legacy keeps at padding:0 / max-width:100%; that rule must
 *    survive). Specificity `.module.article-taglist > .container` (0,3,0)
 *    beats the bundled `.module .container` (0,2,0).
 *
 * 2. Tag-row layout: float-based, NOT flex or table.
 *    Bundled `.taglist { display: table }` + `.taglist__tags { display:
 *    table-cell }` doesn't enforce wrap on inline-block content in this
 *    build (verified: cell box was the expected 1110px wide, but content
 *    overflowed visually rather than breaking). Switching to flex made
 *    tags taller — flex blockifies the bundled inline `.ui-btn--tag`
 *    children, expanding height from legacy's 30px to ~46.5px (border-box
 *    math kicks in instead of line-height controlling height).
 *
 *    The working layout: `.taglist` is `display: block` with a clearfix;
 *    header floats left 40px; tags cell is a plain block with margin-left
 *    40px to clear the float. Tags inside remain `display: inline` (legacy
 *    default) and wrap naturally as inline content.
 *
 * 3. Mobile: header letters hidden (matches legacy).
 *    The bundled `.taglist .taglist__tagheader { display: none }` rule
 *    applies at < 768px. We wrap our desktop overrides in
 *    `@media (min-width: 768px)` so mobile falls back to the bundled
 *    defaults and the letter column disappears.
 *
 * (See also: ArticleTagList.tsx uses Fragment-wrapped tags with explicit
 * whitespace between each <a>, because tags carry `white-space: nowrap`
 * and need a break opportunity to wrap inline.)
 * ============================================================================ */

.module.article-taglist > .container {
    width: 100%;
    max-width: 1180px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}

.article-taglist .taglist {
    display: block;
    padding-bottom: 20px;
}

.article-taglist .taglist::after {
    content: '';
    display: block;
    clear: both;
}

@media (min-width: 768px) {
    .article-taglist .taglist .taglist__tagheader {
        display: block;
        float: left;
        width: 40px;
        line-height: 2.2em;
        color: #5e5e5e;
    }

    .article-taglist .taglist .taglist__tags {
        display: block;
        width: calc(100% - 40px);
        margin-left: 40px;
        /* padding-left:10px inherited from bundled .taglist__tags media-query
           rule provides the 10px gap between letter and first tag. */
    }
}

/* ============================================================================
 * ArticleTagMosaic — Legacy parity overrides
 *
 * The same Isotope-replacement grid rules AdvancedMosaic uses inline, but
 * targeted at `.tagmosaic` so we don't pollute the AdvancedMosaic cascade.
 * Tiles are rendered client-side (no SSR) so the `.grid` starts empty —
 * keep the layout intact regardless of fill state.
 * ============================================================================ */

.tagmosaic .grid {
    display: grid !important;
    grid-template-columns: repeat(3, calc(33% - 30px));
    gap: 30px;
    align-items: start;
    justify-content: center;
    overflow: visible !important;
    padding-bottom: 30px;
}

.tagmosaic .grid > .m-sizer {
    display: none !important;
}

.tagmosaic .grid > .m-tile {
    width: auto !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .tagmosaic .grid > .m-tile.m-tile--1x2 {
        height: 470px !important;
    }
}

.tagmosaic .grid > .m-tile.m-tile--1x2 .m-tile__image {
    aspect-ratio: 16 / 9;
    height: auto;
    padding: 0 !important;
    overflow: hidden;
    display: block;
}

.tagmosaic .grid > .m-tile.m-tile--1x2 .m-tile__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Pin the date + arrow row to the tile bottom — desktop only.
   At mobile the tile height is auto (no 470px rule), so absolute
   positioning would overlap the description. Let it flow naturally
   below the desc on mobile, matching legacy. */
@media (min-width: 768px) {
    .tagmosaic .grid > .m-tile .m-tile__meta {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        width: auto !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 0 !important;
    }
}

.tagmosaic .load-more-container {
    margin: 0 0 15px !important;
    text-align: center;
}

@media (max-width: 1023px) {
    .tagmosaic .grid {
        grid-template-columns: repeat(2, calc(50% - 30px));
    }
}

@media (max-width: 767px) {
    .tagmosaic .grid {
        grid-template-columns: 1fr;
    }
}

.tagmosaic.fetching {
    pointer-events: none !important;
    user-select: none;
}

/* Empty / loading placeholder fills the first grid cell so the row keeps
   its height while the client fetch is in flight. */
.tagmosaic .articletag-mosaic-loading,
.tagmosaic .articletag-mosaic-empty {
    grid-column: 1 / -1;
    min-height: 80px;
}

/* ArticlePagingMosaic — sort dropdown width fix.
 * Legacy JS sets an inline width on the .ui-selector wrapper, which causes
 * .l-list (width:100%) to be capped at that same width and clip the longer
 * option label. Allow the list to grow to fit its content. */
.paging-mosaic .ui-selector-orderby .l-list {
    width: max-content;
    min-width: 100%;
}

/* Chart List — match legacy inline padding-bottom on the heading/description section */
section.module.cslGraphs {
    padding-bottom: 10px;
}

/* ============================================================================
 * Fact Cards — Caption theme-based color fix
 *
 * Legacy SCSS bug: .fact-cards .caption { color: #fffffd } (almost white)
 * is hardcoded with NO theme-specific override. This makes captions invisible
 * on theme-white (white background). Caption should change color based on
 * the applied ColorTheme rendering parameter.
 *
 * Fix: Override caption color for each theme:
 * - theme-black: white text on dark background (#171717) — keep #fffffd
 * - theme-white: dark text on white background — use #29261e (color-gray-0)
 * - No theme selected: defaults to theme-white in FactCards.tsx
 *
 * Specificity: .fact-cards.theme-white .caption (0,2,0) beats the legacy
 * .fact-cards .caption (0,1,0) without needing !important.
 * ============================================================================ */

/* White theme — dark caption text for visibility on white background */
.fact-cards.theme-white .caption {
    color: #29261e; /* $color-gray-0 from legacy variables */
}

/* Black theme — ensure white caption text (legacy default) */
.fact-cards.theme-black .caption {
    color: #fffffd; /* $color-white from legacy variables */
}

/* Transparent theme (if used) — white caption for dark backgrounds */
.fact-cards.theme-transparent .caption {
    color: #fffffd;
}

/* ============================================================================
 * Content Teaser — wedge anchor (CBXCM-312)
 *
 * The wedge `<div class="content-block-wedge">` inside the section uses
 * `position: absolute; bottom: -1px`. The bundled cslbehring.css only sets
 * `position: relative` on the parent when one of two theme classes is also
 * present:
 *   .content-block.content-theme-gray  { background:#f1efea; position:relative }
 *   .content-block.content-theme-white { background:#fff;    position:relative }
 *
 * If an author doesn't pick a Background theme, the section has no
 * positioned ancestor and the wedge climbs the DOM, ending up pinned to
 * <body> — visible at the very bottom of the page (Vidushi CBXCM-312 Bug 3
 * mobile screenshot; reproduces identically in legacy 9.3 QA, so the bug
 * predates the migration but is corrected here per client request).
 *
 * Fix: give every `.module.content-block` a `position: relative` baseline.
 * When a theme IS set, the bundled rule sets the same value — no conflict,
 * no override war. When no theme is set, this baseline keeps the wedge
 * anchored to its own section.
 * ============================================================================ */

.module.content-block {
    position: relative;
}

/* ────────────────────────────────────────────────────────────────────────────
   Top Banner — main content offset
   ----------------------------------------------------------------------------
   The header is `position:absolute; top:0; height:auto`, so it overlays content
   and `main` clears it with a fixed top padding. (Legacy used margin-top, but
   margin collapses in the App Router DOM, which is why XMC's baseline shim uses
   padding-top.) When TopBanner renders it adds the banner as the first child of
   the absolute header — growing the header by the banner's own height

   OVERRIDE: Legacy brand CSS has `body.topbanner main { margin-top: 70px }` which
   applies regardless of hero. Since in XMC `no-hero` is on #root (not body), that
   rule incorrectly applies to hero pages. Reset it for hero pages here:
   ──────────────────────────────────────────────────────────────────────────── */
body.topbanner #root:not(.no-hero) main {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Non-hero pages with topbanner — restore the nav clearance that legacy lost.
   (.topbanner-mod min-height: 105px <768px, 70px ≥768px) — TopBanner also toggles
   the `topbanner` class on <body> (see TopBanner.tsx).

   How legacy clears the absolute header when the banner is on:
     body.topbanner main          { padding-top: 0; margin-top: 70px/105px }  ← banner height only
     body.topbanner.no-hero main  { margin-top: 160px/200px/230px }           ← banner + nav
   In legacy, `no-hero` was on <body>, so non-hero pages got the larger margin
   (banner + nav) and content cleared the whole header. In XMC, `no-hero` moved to
   div#root, so `body.topbanner.no-hero main` NEVER matches — only the generic
   `body.topbanner main` survives, which sets padding-top:0 and a margin equal to
   the BANNER HEIGHT ONLY. That clears the banner but not the nav, so content slid
   under the header. We restore the missing NAV clearance here as padding, scoped
   per brand main id with !important (it must beat legacy's `padding-top:0`).

   Total clearance = legacy margin (banner: 70/105) + this padding (nav region).
   So this padding is the NAV-REGION height ONLY — do NOT add the banner height
   to it (the legacy margin already does). Behring nav region = 150px ≥768 / 90px
   <768 (measured: header bottom 220 = 150 nav + 70 banner ≥768; 195 = 90 + 105
   <768). Result: content lands flush at the header bottom, same gap as banner-off.

   HISTORY: a previous version of this rule set padding = (baseline + banner),
   double-counting the banner height (legacy margin already adds it). That left a
   visible gap between the nav and first content module (QA-reported) — Behring
   desktop gap 65px (should be ~25px), mobile 148px (should be ~13px). The reset
   meant to neutralize the legacy margin —
       body.topbanner #root:not(.no-hero) main { margin-top:0; padding-top:0 }
   — never fires because `no-hero` is hardcoded on #root in every layout, so
   `:not(.no-hero)` matches nothing. Fixed by using the nav-region height alone.
   ──────────────────────────────────────────────────────────────────────────── */

/* CSL Behring — nav-region clearance only (legacy margin adds the banner).
   Nav region: 90px <1024, 150px ≥1024 (breaks at 1024, NOT 768 — the banner
   height change at 768 is handled by the legacy margin, not this padding). */
body.topbanner .no-hero #cslbehring-main {
    padding-top: 90px !important; /* <1024: nav region (legacy margin adds the banner: 105 <768 / 70 768–1024) */
}
@media screen and (min-width: 1024px) {
    body.topbanner .no-hero #cslbehring-main {
        padding-top: 150px !important; /* ≥1024: nav region; legacy margin:70 adds the banner */
    }
}

/* Corporate — reuses the CSL Behring header verbatim (same absolute-positioned
   markup/CSS) and shares the same banner-height values (70/105px), so it needs
   the same nav-region-only correction as Behring above. */
body.topbanner .no-hero #corporate-main {
    padding-top: 90px !important; /* <1024: nav region (legacy margin adds the banner: 105 <768 / 70 768–1024) */
}
@media screen and (min-width: 1024px) {
    body.topbanner .no-hero #corporate-main {
        padding-top: 150px !important; /* ≥1024: nav region; legacy margin:70 adds the banner */
    }
}

/* CSL Plasma & Seqirus — LEFT UNCHANGED (do not blindly apply the Behring fix).
   Verified on running sites and these brands behave differently from Behring:
     • Plasma (csl-plasma-us, banner ON): uses a full-bleed hero model — the hero
       extends up under the absolute header (content margin:0 padding:0, banner on
       top) and renders correctly. The padding rules below appear dormant on that
       page (computed padding-top resolved to 0, not 195/220), so the Behring-style
       double-count was NOT observed here.
     • Seqirus (seqirus-australia/-germany/-italy): "Enable Top Banner" is OFF on
       the available sites, so the banner code path can't be observed live.
   To finish: find a NON-hero Plasma/Seqirus page with the banner enabled, measure
   header-bottom vs content-top per breakpoint (as done for Behring), and only then
   decide whether these values need the same nav-region-only correction. */
body.topbanner .no-hero #cslplasma-main,
body.topbanner .no-hero #seqirus-main {
    padding-top: 195px !important; /* 90 + 105 */
}
@media screen and (min-width: 768px) {
    body.topbanner .no-hero #cslplasma-main,
    body.topbanner .no-hero #seqirus-main {
        padding-top: 160px !important; /* 90 + 70 */
    }
}
@media screen and (min-width: 1024px) {
    body.topbanner .no-hero #cslplasma-main,
    body.topbanner .no-hero #seqirus-main {
        padding-top: 220px !important; /* 150 + 70 */
    }
}

/* Content SideBar — constrain a CTA module placed in a sidebar column.
   The CTA module styles its inner container with fixed widths
   (.cta .container._cta { width: 752/1008/1180px }, specificity 0,3,0), which
   out-specifies the sidebar reset .sb-*-container aside .container { width:100% }
   (0,2,1). So a CTA dropped into the 70/30 SideBar renders at full page width
   and overflows off the right edge. The legacy CSS only gave this dedicated
   treatment to content-block (.sb-right-container .module.content-block .container);
   CTA was never handled, so legacy relied on authors not placing a CTA there.
   These rules add the missing analog (specificity 0,4,0, so they win without
   !important) to officially support CTA in either sidebar column. */
.sb-left-container .cta .container._cta,
.sb-right-container .cta .container._cta {
    width: 100%;
}

/* Content List card images — uniform aspect ratio (CBXCM-879 Bug 3).
   Legacy served these through the JCore "half width" server-side crop: every
   Content List Entry Image rendered at exactly 768x430 (verified across all
   7,358 migrated crop records), which is what kept the card grid aligned.
   XM Cloud has no server-side cropping — newly authored entries upload
   arbitrary images, so card heights drift and the grid misaligns. Enforce the
   legacy crop's aspect ratio with a cover fit. Pre-cropped migrated images are
   already 768x430, so this is a no-op for them. Also applies to
   MultipleAuthentication, which reuses the same content-list card markup and
   was likewise cropped in legacy (FieldCroppedImageUrl). */
.content[data-name="content-list"] .content__item__img img {
    width: 100%;
    aspect-ratio: 768 / 430;
    object-fit: cover;
}

/* ============================================================================
 * Subscription Block — Pages-canvas centering parity (CBXCM-748)
 *
 * The Pages editing runtime injects `display: inline-block` (plus min-width/
 * cursor) inline on every editable text element to make it clickable. That
 * shrinks the block-level headline elements to their text width, so their
 * `.subscription-block__t/__st { text-align: center }` no longer visually
 * centers — authors see left-aligned titles where legacy Experience Editor
 * showed them centered. Published DOM has no editing chrome and is unaffected.
 *
 * Restore full-width block display in editing only (`.editing-mode` is set by
 * the brand layouts when page.mode.isEditing). !important is required to beat
 * the runtime's inline style. */
.editing-mode .subscription-block .subscription-block__t,
.editing-mode .subscription-block .subscription-block__st {
    display: block !important;
}

/* Accordion Row — text-only content should span the full row width.
 *
 * _accordion.scss's .main-content flex layout (>= 1024px) only widens .text
 * via the adjacent-sibling selector `.media + .text` (a 66/33 split with the
 * image or video). When AccordionRow has no Image/Video but Text is set with
 * "Display Text in Columns" = 2 or 3, .text has no preceding .media sibling,
 * so the selector never matches and .text gets no explicit width — it falls
 * back to shrink-to-fit flex-item sizing. CSS multi-column layout then sizes
 * the element to its optimal per-column width instead of the available row
 * width, so the columns render narrow and hugging the left edge instead of
 * spanning the row.
 *
 * Fix: when .text is the only child of .main-content (no media rendered),
 * force it to fill the row. Scoped so the existing media+text split is
 * untouched when an image or video is present. */
@media screen and (min-width: 1024px) {
    .accordion__row .main-content > .text:only-child {
        width: 100%;
    }
}

/* Accordion Row — Image Size "medium"/"large" breaks the row width.
 *
 * _accordion.scss's .main-content flex layout (>= 1024px) sizes `.media`
 * per the `.media-{size}` modifier but always widens the sibling `.text`
 * through a single fixed rule — `.media + .text { width: 66% }` — that
 * doesn't vary by size:
 *   .media-small  → .media 33% + .text 66% =  99%  (fits, ~1% to spare)
 *   .media-medium → .media 45% + .text 66% = 111%  (overflows)
 *   .media-large  → .media 65% + .text 66% = 131%  (overflows badly)
 *
 * The flex container has no wrap, so anything over 100% grows the row
 * itself instead of reflowing. With "Image or Video Placement" = left
 * (default DOM order: media then text), the excess pushes column 2 past
 * the row's right edge and a horizontal scrollbar appears. With
 * placement = right (`media-right` sets flex-direction: row-reverse),
 * the same excess overflows past the row's start edge instead, which is
 * off-screen to the left — no scrollbar, but column 1's text gets
 * visibly clipped.
 *
 * Fix: give `.text` the complementary width for each non-small media
 * size, keeping the same ~1% spare margin the small case already has,
 * so `.media` + `.text` sums to ~99% regardless of Image Size. Selector
 * specificity (0,5,0) beats the legacy `.media + .text` (0,2,0) rule
 * without needing !important. */
@media screen and (min-width: 1024px) {
    .accordion__row .main-content.media-medium .media + .text {
        width: 54%;
    }
    .accordion__row .main-content.media-large .media + .text {
        width: 34%;
    }
}

/* Accordion Row — Image Size "full" + Image or Video Placement "right"
 * clips the first text column with no scrollbar.
 *
 * _accordion.scss's `.main-content` applies both size and placement
 * modifiers as independent sibling classes with no awareness of each
 * other. `&.media-right` sets `margin-left: -10px` to compensate for the
 * gap `flex-direction: row-reverse` leaves in the two-column (media +
 * text) layout. `&.media-full` switches `.main-content` to
 * `display: block` (media stacked above a full-width text block) — a
 * completely different layout where `flex-direction` no longer applies,
 * but the `-10px` margin-left is unconditional and still fires. That
 * shifts the whole stacked block (image and text together) 10px to the
 * left of the row, past the container's own edge — no scrollbar because
 * nothing widened, just clipped by the ancestor's overflow-x: hidden.
 * The visible symptom is the first ~1 character of every line in column 1
 * being cut off.
 *
 * Fix: zero the margin-left when both modifiers are combined. Extra
 * `.bottom-row__container` ancestor class pushes specificity to (0,5,0),
 * above the legacy `.main-content.media-right` rule's (0,4,0), so this
 * wins without !important regardless of stylesheet load order. */
@media screen and (min-width: 1024px) {
    .accordion__row .bottom-row__container .main-content.media-full.media-right {
        margin-left: 0;
    }
}

/* Accordion Row — column images/text should not add horizontal page scroll.
 *
 * _accordion.scss's `.content-lists`/`.list-item` grid intentionally bleeds
 * past its own container: `.content-lists` is sized to `calc(100% + Npx)`
 * (30px at >=768px, 25px for 3-column rows at >=1024px) and every
 * `.list-item` — including the LAST one in the row, with no `:last-child`
 * reset — carries a matching `margin-right`. The trailing item's margin
 * always pokes past the row's right edge; legacy relies on the bundled
 * `body { overflow-x: hidden }` rule to silently clip that empty bleed.
 *
 * A prior fix attempt here targeted `.accordion__row .content-lists` /
 * `.accordion__row .content-lists .list-item` etc. — but that undercounts
 * the compiled legacy selector. `.content-lists` and `.list-item` are
 * nested inside `.accordion { &__row { .bottom-row { &__container { ... } } } }`
 * in the SCSS, which compiles to
 * `.accordion__row .bottom-row__container .content-lists[.col-3] .list-item`
 * — one class deeper than the prior fix accounted for. Missing the
 * `.bottom-row__container` ancestor meant every rule below tied or lost on
 * specificity against the legacy rule it was meant to override, so the
 * bleed silently survived: `.content-lists` never actually got `width:100%`,
 * and the last `.list-item` never actually lost its trailing margin. With
 * no columns filled `.content-lists` isn't rendered at all (AccordionRow
 * returns null for the whole block), so the bleed was invisible until a
 * Column Image/Text/Video was actually added.
 *
 * Fix at the source instead of relying on upstream clipping: zero every
 * item's margin-right by default (needed below 768px too, where items
 * stack full-width and ANY margin-right overflows since there's no
 * sibling to absorb it into a gutter), then re-add the inter-column gutter
 * only on non-last items once the row goes flex. Selectors now include
 * `.bottom-row__container` so specificity matches or exceeds the legacy
 * rule at every step — winning outright where higher, and via cascade
 * order (this file loads after brand CSS) on exact ties — without
 * `!important`. */
.accordion__row .bottom-row__container .content-lists .list-item {
    margin-right: 0;
}
@media screen and (min-width: 768px) {
    .accordion__row .bottom-row__container .content-lists {
        width: 100%;
    }
    .accordion__row .bottom-row__container .content-lists .list-item:not(:last-child) {
        margin-right: 30px;
    }
}
@media screen and (min-width: 1024px) {
    .accordion__row .bottom-row__container .content-lists.col-3 {
        width: 100%;
    }
    .accordion__row .bottom-row__container .content-lists.col-3 .list-item:not(:last-child) {
        margin-right: 25px;
    }
}

/* Rotational Profile Module — dynamic container height.
 *
 * Legacy CSS uses position:absolute on .rp-fade-text panels, so the
 * container needs an explicit height. The React component tracks the
 * active panel's scrollHeight via state and writes it as an inline
 * style — this transition makes it animate smoothly when switching tabs.
 */
.rp-height-transition {
    transition: height 0.4s ease;
    /* overflow:hidden is applied via inline style once heights are measured
       to avoid clipping absolutely-positioned panels before the first
       layout-effect measurement runs. */
}