/* stylelint-disable no-descending-specificity */

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:root {
    /* nav height */
    --nav-height: 4.25rem;
    --nav-height-new: 4.25rem;
    --header-height: var(--nav-height-new);

    /* consent bar */
    --consent-bar-height: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* =======================================================
   CSS RESET — <a> elements
   Removes browser default blue color + underline globally.
   Header/footer/nav links inherit color from their parent
   and no longer need explicit text-decoration overrides.
   ======================================================= */
a {
    color: inherit;
    text-decoration: none;
}

body {
    display: none;
    margin: 0;
    background-color: var(--bg-page);
    color: var(--color-text-default);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: 1.6;
}

body.appear {
    display: block;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 1rem);
}

main [id],
main section[id],
main h1[id],
main h2[id],
main h3[id],
main h4[id],
main h5[id],
main h6[id] {
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.skip-to-main-content-link {
    position: absolute;
    left: -624.9375rem;
    z-index: 1;
    padding: 0 1em;
    background-color: var(--color-text-default);
    color: var(--color-text-inverse);
    opacity: 0;
}

.skip-to-main-content-link:focus,
.skip-to-main-content-link:focus-visible {
    position: fixed;
    left: 50%;
    top: -0.25rem;
    transform: translateX(-50%);
    opacity: 1;
    z-index: var(--z-index-skip-link);
    padding: 0.5rem 2.25rem;
    background-color: var(--color-text-default);
    color: var(--color-text-inverse);
    border-radius: var(--radius-md);
    outline: 0.1875rem solid var(--color-text-inverse);
    outline-offset: 0.125rem;
    white-space: nowrap;
}

/* Reserve header height before header JS runs to prevent main from shifting (CLS).
   min-height: var(--nav-height) matches body>header{height:6.25rem} in head.html so
   the spacer never collapses to auto when header.js lazily adds the header-wrapper class. */
header.header-wrapper {
    height: 4.25rem;
}

header.header-hidden {
    transform: translateY(-100%);
}

header.header-wrapper.has-secondary-nav {
    height: 7.75rem;
}

/* Landing page (no breadcrumb): reserve the fixed nav height; the first section's
   built-in 40px (2.5rem) top padding provides the gap before the body. */
header.header-wrapper.has-header-gap {
    min-height: 4.25rem;
    max-height: var(--nav-height);
}

/* Prevent CLS: sections/bands that receive the breadcrumb nav-secondary via JS
   get their top padding zeroed by CSS :has() so it applies before JS runs. */
main > .section:has(> .nav-secondary),
.author-header:has(> .nav-secondary) {
    padding-top: 0;
}

/* Critical nav-secondary (blog breadcrumb) layout styles — duplicated here from
   header.css so the breadcrumb has correct dimensions from first paint.
   header.css loads lazily; without these the breadcrumb would be 0-height
   until header.css arrives, causing CLS even though the DOM is pre-injected. */
.nav-secondary {
    width: 100%;
    height: auto;
}

.nav-secondary-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
    padding-inline: 1.5rem;
}

.nav-breadcrumb {
    display: flex;
    align-items: center;
    height: auto;
    padding: 1rem 0.4rem 2.5rem;
    overflow-x: auto; /* y-axis intentionally not hidden so focus outlines are not clipped */
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.nav-breadcrumb a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    font-size: 1rem;
    line-height: 1.25rem;
}

/* Duplicate from header.css so focus ring is styled before header.css loads */
.nav-breadcrumb a:focus-visible {
    outline: 2px solid var(--border-focus);
    outline-offset: 3px;
    border-radius: 2px;
    /* Prevent the fixed header from covering the focused link when the browser
       scrolls it into view during keyboard navigation */
    scroll-margin-top: calc(var(--nav-height) + 1rem);
}

.breadcrumb-with-icon::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background: url('/icons/blogs-left.svg') center / contain no-repeat;
    flex: 0 0 auto;
}

header .header,
footer .footer {
    visibility: hidden;
}

header .header[data-block-status="loaded"],
footer .footer[data-block-status="loaded"] {
    visibility: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-base);
    margin: 0;
}

h1 {
    font-size: var(--font-size-4xl);
    line-height: 2.4375rem;
    font-weight: var(--font-weight-light);
}

h2 {
    font-size: var(--font-size-3xl);
    line-height: 2rem;
    font-weight: var(--font-weight-medium);
}

body:not(.blogs-page) main > .section h1,
body:not(.blogs-page) main > .section h2,
body:not(.blogs-page) main > .section h3,
body:not(.blogs-page) main > .section h4,
body:not(.blogs-page) main > .section h5,
body:not(.blogs-page) main > .section h6 {
    padding-top: 2rem;
    padding-bottom: 1rem;
}

h3 {
    font-size: var(--font-size-2xl);
    line-height: 1.875rem;
    font-weight: var(--font-weight-medium);
}

h4 {
    font-size: var(--font-size-xl);
    line-height: 1.6875rem;
    font-weight: var(--font-weight-medium);
}

h5 {
    font-size: 1.1875rem;
    line-height: 1.5625rem;
    font-weight: var(--font-weight-medium);
}

h6 {
    font-size: 1.0625rem;
    line-height: 1.4375rem;
    font-weight: var(--font-weight-medium);
}

p {
    font-size: var(--font-size-sm);
    line-height: 1.25rem;
}

/* Scoped p styles — excluded from blog/author pages which manage their own p typography */
body:not(.blogs-page) main > .section p {
    font-size: 1.25rem;
    line-height: 1.5556rem;
    font-weight: var(--font-weight-regular);
    Padding-top: 1rem;
}

strong {
    font-weight: var(--font-weight-semibold);
}

p,
dl,
ol,
ul,
pre,
blockquote {
    margin-top: 0.8em;
    margin-bottom: 0.25em;
}

body:not(.blogs-page) main > .section:not(.cards-container) ul:not(.rss-feed-cards),
body:not(.blogs-page) main > .section:not(.cards-container) ol:not(.rss-feed-cards) {
    padding: 1rem 0 1rem 1.3rem;
    margin: 0;
}

body:not(.blogs-page) main > .section:not(.cards-container) ul:not(.rss-feed-cards) li,
body:not(.blogs-page) main > .section:not(.cards-container) ol:not(.rss-feed-cards) li {
    margin-top: 1rem;
    line-height: 1.55;
    font-size: 1.125rem;
}

body:not(.blogs-page) main > .section a:not(.cta-section__cta) {
    font-size: 1.25rem;
    font-weight: var(--font-weight-medium);
}

code,
pre {
    font-size: var(--font-size-sm);
}

sup,
sub {
    font-size: 0.75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

/* Trademark / registered / copyright superscripts — authored as (TM), (R), (C) */
sup.trademark {
    font-size: 0.45em;
    font-weight: inherit;
    letter-spacing: normal;
    vertical-align: super;
    line-height: 0;
}

sub {
    bottom: -0.25em;
}

pre {
    padding: 1rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    white-space: pre;
}

input,
textarea,
select,
button {
    font: inherit;
}

/* =======================================================
   LINKS — light theme, 4 states per Figma (node 38-157)
   Scoped to 'main' — header/footer inherit via CSS reset.
   Colors sourced from theme-xenserver.css --color-link-*
   ======================================================= */
main a:any-link {
    color: var(--color-link-default);                             /* default: black #000000 */
    overflow-wrap: break-word;
    transition: color var(--transition-fast, 150ms ease-in-out);
}

main a:hover {
    color: var(--color-link-hover);
}

main a:active {
    color: var(--color-link-pressed);             /* pressed: cobalt-70 #00236E */
    font-weight: var(--font-weight-medium);
    text-decoration: underline;
}

main a[aria-disabled="true"],
main a.disabled {
    color: var(--color-link-disabled);            /* disabled: grey-50 #97A09F */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    pointer-events: none;
    cursor: not-allowed;
}

/* =======================================================
   DARK / LIGHT SECTION THEMES
   Apply .dark class to any section with a dark background.
   All text and links become inverse (white) automatically.
   ======================================================= */
main .section.dark {
    color: var(--color-text-inverse);
}

main .section.dark.dark h1,
main .section.dark.dark h2,
main .section.dark.dark h3,
main .section.dark.dark h4,
main .section.dark.dark h5,
main .section.dark.dark h6,
main .section.dark.dark p,
main .section.dark.dark li,
main .section.dark.dark td,
main .section.dark.dark th,
main .section.dark.dark blockquote,
main .section.dark.dark dt,
main .section.dark.dark dd,
main .section.dark.dark figcaption,
main .section.dark.dark caption,
main .section.dark.dark *:not(a.btn-custom, a.btn-custom *, a.button, a.button *, button, button *) {
    color: var(--color-text-inverse);
}

/* Links — dark theme, 4 states per Figma (node 10159-6037) */
main .section.dark a:not(.btn-custom):not(.button):any-link {
    color: var(--color-link-default-dark);                /* default: white #FFFFFF */
    overflow-wrap: break-word;
    transition: color var(--transition-fast, 150ms ease-in-out);
}

main .section.dark p a:not(.btn-custom):not(.button):any-link,
main .section.dark li a:not(.btn-custom):not(.button):any-link,
main .section.dark blockquote a:not(.btn-custom):not(.button):any-link,
main .section.dark td a:not(.btn-custom):not(.button):any-link,
main .section.dark th a:not(.btn-custom):not(.button):any-link {
    text-decoration: underline;
}

main .section.dark a:not(.btn-custom):not(.button):hover {
    color: color-mix(in srgb, var(--color-link-default-dark) 80%, transparent);
    text-decoration: underline;
}

/* Primary/secondary buttons stay unlined on hover — only plain links and
   text-style buttons (.text/.primary/.text-icon) get the hover underline. */
main .section.dark a.btn-custom.solid:hover,
main .section.dark a.btn-custom.secondary:hover,
main .section.dark a.btn-custom.outline:hover {
    text-decoration: none;
}

main .section.dark a:not(.btn-custom):not(.button):active {
    color: var(--color-link-pressed-dark);        /* pressed: mint-40 #71FD95 */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
}

main .section.dark a[aria-disabled="true"],
main .section.dark a.disabled {
    color: var(--color-link-disabled-dark);       /* disabled: grey-50 #97A09F */
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    pointer-events: none;
    cursor: not-allowed;
}

/* buttons */
a.button:any-link,
button {
    display: inline-block;
    max-width: 100%;
    border: 0.125rem solid transparent;
    border-radius: 2.4em;
    padding: 0.5em 1.2em;
    font-style: normal;
    font-weight: var(--font-weight-medium);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    background-color: var(--action-primary-bg);
    color: var(--color-text-inverse);
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

button:disabled,
button:disabled:hover {
    background-color: var(--bg-disabled-subtle);
    cursor: unset;
}

a.button.secondary,
button.secondary {
    background-color: unset;
    border: 0.125rem solid currentcolor;
    color: var(--color-text-default);
}

main img {
    max-width: 100%;
    width: auto;
    height: auto;
}

.icon {
    display: inline-block;
    height: 1.5rem;
    width: 1.5rem;
}

.icon img {
    height: 100%;
    width: 100%;
}

/* sections */
:where(body:not(.blogs-page)) main > .section {
    padding: 3.09375rem 0;
}

main > .section.blog-detail-container,
main > .section.blog-listing-container,
main > .section.author-detail-container,
main > .section.author-listing-container {
    padding: 2.5rem 0 6.38rem;
}

main > .section > div {
    max-width: 90rem;
    margin: 0 auto;
    padding: 0 1.5rem;
}

body:not(.blogs-page) main > .section > div.default-content-wrapper,
body:not(.blogs-page) main > .section > div.text-custom-wrapper,
body:not(.blogs-page) main > .section > div.hero-banner-with-pattern-wrapper,
body:not(.blogs-page) main > .section > div.cta-section-wrapper,
body:not(.blogs-page) main > .section > div.logo-card-wrapper,
body:not(.blogs-page) main > .section > div[class$="-wrapper"] {
    max-width: var(--content-container-width);
    margin-inline: auto;
}

/* Full-bleed hero banners reset the wrapper to allow edge-to-edge background.
   This rule re-applies the content-width constraint on the inner layout div.
   Uses data-block-name^="hero-banner" so it covers ALL hero banner variants
   automatically — no need to list each block name individually. */
[data-block-name^="hero-banner"] {
    max-width: var(--content-container-width);
    margin-inline: auto;
}

[data-block-name^="hero-banner"] > div:first-child {
    max-width: var(--content-container-width);
    margin: 0 auto;
}

main > .section:first-of-type {
    margin-top: 0;
}

/* section metadata */
main .section.light,
main .section.highlight {
    background-color: var(--bg-surface-subtle);
    margin: 0;
    padding: 2.5rem 0;
}

/* ====================
    Section Spacing
   ==================== */

/* Padding Vertical (py-*) */
main > .section.py-0 {
    padding-top: 0;
    padding-bottom: 0;
}

main > .section.py-xs {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

main > .section.py-18 {
    padding-top: 1.125rem;
    padding-bottom: 1.125rem;
}

main > .section.py-sm {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

main > .section.py-md {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}

main > .section.py-lg {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

main > .section.py-36 {
    padding-top: 2.25rem;
    padding-bottom: 2.25rem;
}

main > .section.py-xl {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
}

main > .section.py-2xl {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

main > .section.py-custom-50 {
    padding-top: 3.09375rem;
    padding-bottom: 3.09375rem;
}

main > .section.py-3xl {
    padding-top: 5.625rem;
    padding-bottom: 5.625rem;
}

/* Padding Top (pt-*) */
main > .section.pt-0 {
    padding-top: 0;
}

main > .section.pt-xs {
    padding-top: 0.5rem;
}

main > .section.pt-18 {
    padding-top: 1.125rem;
}

main > .section.pt-sm {
    padding-top: 1rem;
}

main > .section.pt-md {
    padding-top: 1.5rem;
}

main > .section.pt-lg {
    padding-top: 2rem;
}

main > .section.pt-36 {
    padding-top: 2.25rem;
}

main > .section.pt-xl {
    padding-top: 2.5rem;
}

main > .section.pt-2xl {
    padding-top: 3rem;
}

main > .section.pt-custom-50 {
    padding-top: 3.09375rem;
}

main > .section.pt-3xl {
    padding-top: 5.625rem;
}

main > .section.pt-4xl {
    padding-top: 7.5rem;
}

/* Padding Bottom (pb-*) */
main > .section.pb-0 {
    padding-bottom: 0;
}

main > .section.pb-xs {
    padding-bottom: 0.5rem;
}

main > .section.pb-18 {
    padding-bottom: 1.125rem;
}

main > .section.pb-sm {
    padding-bottom: 1rem;
}

main > .section.pb-md {
    padding-bottom: 1.5rem;
}

main > .section.pb-lg {
    padding-bottom: 2rem;
}

main > .section.pb-36 {
    padding-bottom: 2.25rem;
}

main > .section.pb-xl {
    padding-bottom: 2.5rem;
}

main > .section.pb-2xl {
    padding-bottom: 3rem;
}

main > .section.pb-custom-50 {
    padding-bottom: 3.09375rem;
}

main > .section.pb-3xl {
    padding-bottom: 5.625rem;
}

main > .section.pb-4xl {
    padding-bottom: 7.5rem;
}

/* Mobile-specific padding utilities — apply on mobile, reset on tablet+ */
body:not(.blogs-page) main > .section.pt-m-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.pt-m-10 {
    padding-top: 0.625rem;
}

body:not(.blogs-page) main > .section.pt-m-20 {
    padding-top: 1.25rem;
}

body:not(.blogs-page) main > .section.pt-m-30 {
    padding-top: 1.875rem;
}

body:not(.blogs-page) main > .section.pt-m-40 {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.pb-m-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.pb-m-10 {
    padding-bottom: 0.625rem;
}

body:not(.blogs-page) main > .section.pb-m-20 {
    padding-bottom: 1.25rem;
}

body:not(.blogs-page) main > .section.pb-m-30 {
    padding-bottom: 1.875rem;
}

body:not(.blogs-page) main > .section.pb-m-40 {
    padding-bottom: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-10 {
    padding-top: 0.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-20 {
    padding-top: 1.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-30 {
    padding-top: 1.875rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-m-40 {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-10 {
    padding-bottom: 0.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-20 {
    padding-bottom: 1.25rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-30 {
    padding-bottom: 1.875rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-m-40 {
    padding-bottom: 2.5rem;
}

/* Tablet+: reset mobile-only padding utilities to section default */

/* Margin Vertical (my-*) */
main > .section.my-0 {
    margin-top: 0;
    margin-bottom: 0;
}

main > .section.my-xs {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

main > .section.my-sm {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

main > .section.my-md {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

main > .section.my-lg {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

main > .section.my-xl {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

/* ===========================
   Section Background Colors
   =========================== */

/* Xen Coral */
main > .section.bg-xen-coral-main-1 { background-color: #c75030; }
main > .section.bg-xen-coral-main-3 { background-color: #ec6f4c; }
main > .section.bg-xen-coral-light  { background-color: #fa7b57; }
main > .section.bg-xen-coral-tint   { background-color: #ffeee9; }

/* Sec Blue */
main > .section.bg-sec-blue-main-1  { background-color: #2255b8; }
main > .section.bg-sec-blue-main-2  { background-color: #005dd0; }
main > .section.bg-sec-blue-main-3  { background-color: #a3caf4; }

/* Blue */
main > .section.bg-blue-main-1      { background-color: #0045db; }
main > .section.bg-blue-main-2      { background-color: #00236e; }
main > .section.bg-blue-main-3      { background-color: #71fd95; }

/* Xen Grey */
main > .section.bg-xen-grey-main-1  { background-color: #686c7c; }
main > .section.bg-xen-grey-main-2  { background-color: #a4abb1; }
main > .section.bg-xen-grey-main-3  { background-color: #e5e8eb; }

/* XB Shades */
main > .section.bg-xb-shade-1       { background-color: #2a333f; }
main > .section.bg-xb-shade-2       { background-color: #344860; }
main > .section.bg-xb-shade-3       { background-color: #41618a; }

/* SB Shades */
main > .section.bg-sb-shade-1       { background-color: #152e48; }
main > .section.bg-sb-shade-2       { background-color: #163b6f; }
main > .section.bg-sb-shade-3       { background-color: #0204ea; }

/* XG Shade */
main > .section.bg-xg-shade         { background-color: #454853; }

/* XB Tints */
main > .section.bg-xb-tint-1        { background-color: #66aaeb; }
main > .section.bg-xb-tint-2        { background-color: #a3caf4; }
main > .section.bg-xb-tint-3        { background-color: #e9f4fb; }

/* SB Tints */
main > .section.bg-sb-tint-1        { background-color: #98b8d7; }
main > .section.bg-sb-tint-2        { background-color: #c0d4e7; }
main > .section.bg-sb-tint-3        { background-color: #ecf2f8; }

/* XG Tint */
main > .section.bg-xg-tint          { background-color: #f5f7fa; }

/* Black and White */
main > .section.bg-black            { background-color: #000000; }
main > .section.bg-white            { background-color: #ffffff; }

/* ===========================
   Section 50/50 Split Layout
   =========================== */

/* 50/50 Layout: Target the section itself - mobile first: single column */
body:not(.blogs-page) main > .section.layout-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 2rem 1rem;
}

body:not(.blogs-page) main > .section.layout-split-70-30 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: flex-start;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 3.09375rem 5rem;
}

body:not(.blogs-page) main > .section.layout-split > div,
body:not(.blogs-page) main > .section.layout-split-70-30 > div {
    width: 100%;
    max-width: 90rem;
    margin-inline: auto;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div:first-child {
    grid-column: 1;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div:last-child {
    grid-column: 2;
}

body:not(.blogs-page) main > .section.layout-split-70-30 > div > .block {
    width: 100%;
}


/* Ensure blocks inside wrappers take full width */
body:not(.blogs-page) main > .section.layout-split > div > .block {
    width: 100%;
}

/* Override padding when applied to layout-split */
body:not(.blogs-page) main > .section.layout-split.pt-0 {
    padding-top: 0;
}

body:not(.blogs-page) main > .section.layout-split.pt-xs {
    padding-top: 0.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-sm {
    padding-top: 1rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-md {
    padding-top: 1.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-lg {
    padding-top: 2rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-xl {
    padding-top: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-2xl {
    padding-top: 3rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-3xl {
    padding-top: 5.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pt-4xl {
    padding-top: 7.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-0 {
    padding-bottom: 0;
}

body:not(.blogs-page) main > .section.layout-split.pb-xs {
    padding-bottom: 0.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-sm {
    padding-bottom: 1rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-md {
    padding-bottom: 1.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-lg {
    padding-bottom: 2rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-xl {
    padding-bottom: 2.5rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-2xl {
    padding-bottom: 3rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-3xl {
    padding-bottom: 5.625rem;
}

body:not(.blogs-page) main > .section.layout-split.pb-4xl {
    padding-bottom: 7.5rem;
}

/* Mobile: Stack vertically — already handled by base 1-column grid above */

/* ===========================
   Global Button Styles
   =========================== */

/* Base Custom Button Style */
a.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    min-width: 8.75rem;
    border-radius: 2.5rem;
    font-size: var(--font-size-sm);
    line-height: var(--line-height-sm);
    font-weight: var(--font-weight-regular);
    color: var(--action-primary-text);
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
}

@media (width < 48rem) {
    a.btn-custom {
        max-width: 100%;
        white-space: normal;
        text-align: center;
        flex-shrink: 1;
    }
}

body:not(.blogs-page) main > .section a.btn-custom:not(.cta-section__cta) {
    margin-top: 3.09375rem;
}

/* ===========================
   Section Button Alignment
   =========================== */

/* Center align all buttons in the section */
main > .section.btn-center {
    text-align: center;
}

main > .section.btn-center .button-container,
main > .section.btn-center p:has(> a.button),
main > .section.btn-center div:has(> a.button) {
    text-align: center;
}

main > .section.btn-center a.button {
    margin-left: auto;
    margin-right: auto;
}

/* Left align all buttons in the section */
main > .section.btn-left {
    text-align: left;
}

main > .section.btn-left a.button {
    margin-right: auto;
}

/* Right align all buttons in the section */
main > .section.btn-right {
    text-align: right;
}

main > .section.btn-right a.button {
    margin-left: auto;
}

/* Primary Button */
a.button.primary:any-link {
    padding: 0.625rem;
    border-radius: var(--radius-md);
    background: var(--action-primary-bg);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-lg);
    color: var(--color-text-inverse);
}

/* CITRIX DOTS LOADER STYLES */
.citrix-dots-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.375rem;
    height: 3.3125rem;
}

.citrix-dot {
    width: 2rem;
    height: 2rem;
    border-radius: 3.125rem;
    background-color: var(--bg-loader-dot);
}

.citrix-dot:nth-child(1) {
    animation: dot1-trail 0.8s infinite ease-in-out;
}

.citrix-dot:nth-child(2) {
    animation: dot2-trail 0.8s infinite ease-in-out;
}

.citrix-dot:nth-child(3) {
    animation: dot3-trail 0.8s infinite ease-in-out;
}

@keyframes dot1-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    15% {
        height: 3.3125rem;
        opacity: 1;
    }

    30% {
        height: 2rem;
        opacity: 0.7;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

@keyframes dot2-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    30% {
        height: 2rem;
        opacity: 0.3;
    }

    45% {
        height: 3.3125rem;
        opacity: 1;
    }

    60% {
        height: 2rem;
        opacity: 0.7;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

@keyframes dot3-trail {
    0% {
        height: 2rem;
        opacity: 0.3;
    }

    60% {
        height: 2rem;
        opacity: 0.3;
    }

    75% {
        height: 3.3125rem;
        opacity: 1;
    }

    90% {
        height: 2rem;
        opacity: 0.7;
    }

    100% {
        height: 2rem;
        opacity: 0.3;
    }
}

html,
body {
    overflow-x: hidden;
    width: 100%;
}

html {
    scrollbar-gutter: stable;
}

/* Breadcrumb theme variants */
.breadcrumb-wrapper.theme-br-black a {
    color: var(--color-text-default);
}

.breadcrumb-wrapper.theme-br-black a.current,
.breadcrumb-wrapper.theme-br-black li:last-child {
    color: rgb(0 0 0 / 50%);
}

.breadcrumb-wrapper.theme-br-black .breadcrumb-separator {
    background: none;
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    background-color: var(--color-text-default);
    mask: url("../icons/bc-arrow.svg") no-repeat center / contain;
    vertical-align: middle;
}

/* stylelint-disable-next-line selector-id-pattern */
body #consent_blackbar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: var(--z-index-consent);
}

/* TrustArc renders non-anchor elements inside #teconsent — ensure pointer cursor */
/* stylelint-disable-next-line selector-id-pattern */
#teconsent,
#teconsent * {
    cursor: pointer;
}

/* Tablet+: larger typography */
@media (width >= 48rem) {
    h1 {
        font-size: 3rem;
        line-height: 3.5rem;
        font-weight: var(--font-weight-medium);
    }

    h2 {
        font-size: 2.25rem;
        line-height: 2.4375rem;
    }

    h3 {
        font-size: 1.75rem;
        line-height: 2.25rem;
    }

    h4 {
        font-size: 1.375rem;
        line-height: 1.875rem;
    }

    h5 {
        font-size: 1.125rem;
        line-height: 1.6875rem;
    }

    h6 {
        font-size: 1rem;
        line-height: 1.125rem;
    }

    p {
        font-size: 1.125rem;
        line-height:1.5rem;
    }

    body:not(.blogs-page) main > .section[class*="pt-m-"] {
        padding-top: 5rem;
    }

    body:not(.blogs-page) main > .section[class*="pb-m-"] {
        padding-bottom: 5rem;
    }

    body:not(.blogs-page) main > .section.layout-split {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }

    /* Target the wrapper divs directly as grid children — only from tablet+,
       so mobile keeps its natural single-column stack instead of forcing
       both wrappers into explicit columns (which collapses the second one). */
    body:not(.blogs-page) main > .section.layout-split > div:first-child {
        grid-column: 1;
        width: stretch;
    }

    body:not(.blogs-page) main > .section.layout-split > div:last-child {
        grid-column: 2;
        width: stretch;
    }

    body:not(.blogs-page) main > .section.layout-split-70-30 {
        grid-template-columns: 7fr 3fr;
        gap: 3rem;
    }
}

@media (width >= 64rem) {
    main > .section > div {
        padding: 0 5rem;
    }

    /* Split layout: padding on the section (not divs) keeps background full-width
       while aligning content at 5rem from edges — columns get wider space (536px vs 448px) */
    body:not(.blogs-page) main > .section.layout-split {
        padding-inline: 5rem;
    }

    body:not(.blogs-page) main > .section.layout-split > div {
        padding: 0;
    }

    /* 70-30 split: columns are full-width, no inner padding needed */
    body:not(.blogs-page) main > .section.layout-split-70-30 > div {
        padding: 0;
    }
}

@media (width >= 90rem) {
    /* Break split sections out to the viewport while keeping their inner
       content aligned to the standard 90rem rail with the usual 5rem gutter. */
    body:not(.blogs-page) main > .section.layout-split,
    body:not(.blogs-page) main > .section.layout-split-70-30 {
        width: 100vw;
        max-width: none;
        margin-inline: calc(50% - 50vw);
        padding-inline: calc((100vw - 90rem) / 2 + 5rem);
    }
}

/* Scroll-to-top button with scroll-progress ring */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 3.125rem;
    height: 3.125rem;
    border-radius: 50%;
    background: conic-gradient(var(--bg-primary) var(--scroll-progress, 0%), #e0e0e0 0);
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.2s ease;
    z-index: 99;
    padding: 0;
    margin: 0;
}

.scroll-to-top::before {
    content: "";
    position: absolute;
    inset: 0.0938rem;
    background-color: var(--bg-surface);
    border-radius: 50%;
    z-index: 1;
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.scroll-to-top .icon-arrow-up {
    position: relative;
    z-index: 2;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background-color: var(--bg-primary);
    mask: url("../icons/arrow-up.svg") no-repeat center / contain;
    transition: background-color 0.3s ease;
}

.scroll-to-top.completed .icon-arrow-up {
    background-color: var(--bg-primary);
}

/* ================================================================
   BLOG DETAIL PAGE — critical first-paint rules
   Duplicated from blog-detail.css so they apply at first paint
   (styles.css is preloaded) and prevent CLS when blog-detail.css
   and header.css load lazily after body.appear.
   ================================================================ */

/* Pre-reserve section padding so it doesn't change when blog-detail.css loads */
body .section.blog-detail-container {
    padding-bottom: var(--spacing-2xl);
    border-radius: var(--spacing-md);
}

/* Pre-reserve breadcrumb height (nav-secondary = 5.5rem) before header.js injects it.
   When header.js prepends nav-secondary and zeroes the padding in the same task,
   the article position stays constant — no layout shift. Uses :not(:has()) for higher
   specificity so it wins over blog-detail.css's padding-top:0 rule while active. */
body .section.blog-detail-container:not(:has(> .nav-secondary)) {
    padding-top: 5.5rem;
}

/* Pre-reserve wrapper padding so the default 0 1.5rem doesn't shift when blog-detail.css loads */
.section.blog-detail-container .blog-detail-wrapper {
    padding: 0;
}

/* Prevent nav-secondary going full-bleed when header.css loads lazily.
   header.css has a generic full-bleed rule for nav-secondary inside sections;
   this higher-specificity rule locks it to the section edge from first paint. */
.section.blog-detail-container > .nav-secondary {
    width: 100%;
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
}

.section.blog-detail-container > .nav-secondary .nav-secondary-inner {
    max-width: none;
    padding-inline: 0;
}

/* Hide the authored breadcrumb section on blog detail pages.
   The breadcrumb is provided via JS (nav-secondary inside blog-detail-container)
   so the authored section is empty — remove its padding/space from layout. */
body:has(.blog-detail-container) .section.breadcrumb-container {
    display: none;
}