@layer resets, tokens, settings, general, components, utilities, debug;

@layer resets{

/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
Use a better box model (opinionated).
*/

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

html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}

/*
Sections
========
*/

body {
	margin: 0; /* Remove the margin in all browsers. */
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

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

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
   Disable due to https://github.com.mcas.ms/sindresorhus/modern-normalize/commit/928b4b566e3a20c60d8f37f6302d0eefb6c5d705
2. Correct the outline style in Safari.
*/

[type='search'] {
	/*-webkit-appearance: textfield; !* 1 *!*/
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}
}

@layer resets{

h1, h2, h3, h4, h5, h6,
figure {
    margin: 0;
}

a {
    color: var(--cy-base-color-link);

    &:hover {
        color: var(--cy-base-color-link-hover);
    }
}
}

@layer tokens{

/**
 * Base (semantic) tokens.
 * 
 * Do not edit directly, this file was auto-generated.
 */

:root {
  --cy-base-animation-duration-base: 300ms;
  --cy-base-animation-timing-function-base: ease;
  --cy-base-border-width-small: 1px;
  --cy-base-border-width-base: 1px;
  --cy-base-border-width-large: 2px;
  --cy-base-border-radius-base: 0px;
  --cy-base-color-brand: #16343d;
  --cy-base-color-white: #ffffff;
  --cy-base-color-black: #000000;
  --cy-base-color-text: #000000;
  --cy-base-color-link: #0000ff;
  --cy-base-color-surface-white: #ffffff;
  --cy-base-color-surface-light: #f2f2f2;
  --cy-base-color-surface-medium: #808080;
  --cy-base-color-surface-dark: #1a1a1a;
  --cy-base-color-shadow: #808080;
  --cy-base-color-border: #808080;
  --cy-base-color-status-success: #00ff00;
  --cy-base-color-status-error: #ff0000;
  --cy-base-color-status-warning: #ffff00;
  --cy-base-icon-font-family: sans-serif;
  --cy-base-icon-font-weight: 400;
  --cy-base-icon-size-small: 20px;
  --cy-base-icon-size-base: 32px;
  --cy-base-icon-size-large: 40px;
  --cy-base-asset-image-logo: url("clientlib-vwfs-uix-base/assets/logo.svg");
  --cy-base-box-shadow-base: 0px 1px 2px 0px rgb(0 0 0 / 10%), 0px 2px 6px 0px rgb(0 0 0 / 20%);
  --cy-base-size-xxsmall: 4px;
  --cy-base-size-xsmall: 8px;
  --cy-base-size-small: 12px;
  --cy-base-size-base: 16px;
  --cy-base-size-large: 32px;
  --cy-base-size-xlarge: 64px;
  --cy-base-size-xxlarge: 80px;
  --cy-base-text-font-family-base: arial;
  --cy-base-text-font-family-base-fallbacks: sans-serif;
  --cy-base-text-font-weight-normal: 400;
  --cy-base-text-font-weight-bold: 700;
  --cy-base-text-font-letter-spacing-base:  ;
  --cy-base-text-font-letter-spacing-small:  ;
  --cy-base-text-font-line-height-base: 1.5;
  --cy-base-text-font-line-height-small: 1.1;
  --cy-base-text-font-size-xsmall: 14px;
  --cy-base-text-font-size-small: 16px;
  --cy-base-text-font-size-base: 18px;
  --cy-base-text-font-size-large: 20px;
  --cy-base-text-font-size-xlarge: 24px;
  --cy-base-text-font-size-xxlarge: 30px;
  --cy-base-text-font-size-xxxlarge: 36px;
  --cy-base-border-base: var(--cy-base-border-width-base) solid var(--cy-base-color-border);
  --cy-base-color-link-hover: var(--cy-base-color-link);
  --cy-base-color-disabled-text: var(--cy-base-color-surface-medium);
  --cy-base-color-disabled-border: var(--cy-base-color-surface-medium);
  --cy-base-color-disabled-background: var(--cy-base-color-surface-light);
  --cy-base-icon-size-xsmall: var(--cy-base-icon-size-small);
  --cy-base-icon-size-xlarge: var(--cy-base-icon-size-large);
  --cy-base-space-xxsmall: var(--cy-base-size-xxsmall);
  --cy-base-space-xsmall: var(--cy-base-size-xsmall);
  --cy-base-space-small: var(--cy-base-size-small);
  --cy-base-space-base: var(--cy-base-size-base);
  --cy-base-space-large: var(--cy-base-size-large);
  --cy-base-space-xlarge: var(--cy-base-size-xlarge);
  --cy-base-space-xxlarge: var(--cy-base-size-xxlarge);
  --cy-base-padding-xxlarge: var(--cy-base-size-xxlarge);
  --cy-base-padding-xsmall: var(--cy-base-size-xsmall);
  --cy-base-padding-small: var(--cy-base-size-small);
  --cy-base-padding-base: var(--cy-base-size-base);
  --cy-base-padding-large: var(--cy-base-size-large);
  --cy-base-padding-xlarge: var(--cy-base-size-xlarge);
  --cy-base-text-font-family-base-list: var(--cy-base-text-font-family-base), var(--cy-base-text-font-family-base-fallbacks);
  --cy-base-text-font-family-heading: var(--cy-base-text-font-family-base);
  --cy-base-text-font-family-heading-fallbacks: var(--cy-base-text-font-family-base-fallbacks);
  --cy-base-text-font-weight-light: var(--cy-base-text-font-weight-normal);
  --cy-base-text-font-size-xxsmall: var(--cy-base-text-font-size-xsmall);
  --cy-base-text-font-size-xxxxlarge: var(--cy-base-text-font-size-xxxlarge);
  --cy-base-color-disabled-text-hover: var(--cy-base-color-disabled-text);
  --cy-base-color-disabled-text-active: var(--cy-base-color-disabled-text);
  --cy-base-color-disabled-border-hover: var(--cy-base-color-disabled-border);
  --cy-base-color-disabled-border-active: var(--cy-base-color-disabled-border);
  --cy-base-color-disabled-background-hover: var(--cy-base-color-disabled-background);
  --cy-base-color-disabled-background-active: var(--cy-base-color-disabled-background);
  --cy-base-icon-size-xxsmall: var(--cy-base-icon-size-xsmall);
  --cy-base-icon-size-xxlarge: var(--cy-base-icon-size-xlarge);
  --cy-base-text-font-family-heading-list: var(--cy-base-text-font-family-heading), var(--cy-base-text-font-family-heading-fallbacks);
  --cy-base-text-font-size-xxxsmall: var(--cy-base-text-font-size-xxsmall);
  --cy-base-text-font-size-xxxxxlarge: var(--cy-base-text-font-size-xxxxlarge);
}
}

@layer general{

html {
    font-family: var(--cy-base-text-font-family-base-list);
    line-height: var(--cy-base-text-font-line-height-base);
    color: var(--cy-base-color-text);

    /* Disable transitions when user prefers reduced motion
       Sets --cy-if-user-prefers-reduced-motion to an empty value,
       which can be used as a toggle in other transition properties */
    @media screen and (prefers-reduced-motion: reduce), (update: slow) {
        --cy-if-user-prefers-reduced-motion: ;
        scroll-behavior: auto;
    }
}

body {
    overflow-x: hidden;
}
}

@layer general{

[data-cy-page] {
    display: grid;
    align-content: start;
    overflow-y: clip;

    &:has(> [data-cy-page-push]) {
        min-height: 100dvh;
    }
}

/** Kind of hacky, but stable way to push the footer to the end of the page.
    https://front-end.social/@kizu/113669852492883417 */
[data-cy-page-push="end"] {
    position: sticky;
    inset-block-start: 100dvh;
}
}

@layer general{
/* WIP global styles */
hgroup {
    > :first-child {
        margin-block-start: 0;
    }
}

/* Remove top margin from children of slotted elements */
[slot] > :first-child {
    margin-block-start: 0;
}

/* Remove bottom margin from children of slotted elements */
[slot] > :last-child {
    margin-block-end: 0;
}
}

@layer components{

/**
 * This is the globally scoped part of the Logo component.
 * Check the corresponding component CSS file:
 * src/components/logo/logo.css
 */

/* Only select `cy-logo` elements that don’t use a custom image (via `src` property). */
cy-logo:not([src])::part(logo) {
    background-image: var(--cy-base-asset-image-logo-small, var(--cy-base-asset-image-logo));
}
}

@layer components{
/**
 * Corresponding component styles:
 * src/components/page-header/page-header.styles.css
 */
:root {
    --cy-if-page-header-navigation-is-hidden: initial;
    --cy-page-header-size: xsmall;
    --cy-if-page-header-size-xsmall: initial;
    --cy-if-page-header-size-small: initial;
    --cy-if-page-header-size-large: ;

    @media (width > 600px) {
        --cy-page-header-size: small;
        --cy-if-page-header-size-xsmall: ;
        --cy-if-page-header-size-large: ;

        /* Disable (optional) small logo variant properties. */
        --cy-base-asset-image-logo-small: initial;
        --cy-base-asset-image-logo-small-aspect-ratio: initial;
        --cy-page-header-logo-small-block-size: initial !important;
    }

    @media (width > 1000px) {
        --cy-page-header-size: large;
        --cy-if-page-header-size-large: initial;
        --cy-if-page-header-size-small: ;
    }

    --cy-page-header-layout: var(--cy-page-header-size);
}

/* Disable body scrolling when the navigation is expanded in small viewports. */
body:has([data-cy-page-header-layout="xsmall"][data-cy-page-header-navigation-is-expanded]) {
     overflow: hidden;
}
}

@layer utilities{

/**
 * Heading Utilities
 *
 * Provides semantic heading styles using data attributes instead of direct HTML element styling.
 * This approach allows for flexible typography hierarchy while maintaining semantic HTML structure.
 */

@layer settings {
    :root {
        /* Base heading font family */
        --_cy-heading-font-family: var(--cy-heading-font-family, var(--cy-base-text-font-family-heading-list, sans-serif));

        /* base heading font size */
        --_cy-heading-font-size: var(--cy-heading-font-size, var(--cy-base-text-font-size-xlarge));

        /* Base heading font weight */
        --_cy-heading-font-weight: var(--cy-heading-font-weight, var(--cy-base-text-font-weight-bold));

        /* Base heading line height */
        --_cy-heading-line-height: var(--cy-heading-line-height, var(--cy-base-text-font-line-height-sall));

        /* Base heading color */
        --_cy-heading-color: var(--cy-heading-color, var(--cy-base-color-text));

        /* Heading XXL */
        --_cy-heading-xxl-font-family: var(--cy-heading-xxl-font-family, var(--_cy-heading-font-family));
        --_cy-heading-xxl-size: var(--cy-heading-xxl-size, var(--cy-base-text-font-size-xxxxlarge));
        --_cy-heading-xxl-font-weight: var(--cy-heading-xxl-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-xxl-line-height: var(--cy-heading-xxl-line-height, var(--_cy-heading-line-height));
        --_cy-heading-xxl-color: var(--cy-heading-xxl-color, var(--_cy-heading-color));

        /* Heading XL */
        --_cy-heading-xl-font-family: var(--cy-heading-xl-font-family, var(--_cy-heading-font-family));
        --_cy-heading-xl-size: var(--cy-heading-xl-size, var(--cy-base-text-font-size-xxxlarge));
        --_cy-heading-xl-font-weight: var(--cy-heading-xl-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-xl-line-height: var(--cy-heading-xl-line-height, var(--_cy-heading-line-height));
        --_cy-heading-xl-color: var(--cy-heading-xl-color, var(--_cy-heading-color));

        /* Heading L */
        --_cy-heading-l-font-family: var(--cy-heading-l-font-family, var(--_cy-heading-font-family));
        --_cy-heading-l-size: var(--cy-heading-l-size, var(--cy-base-text-font-size-xxlarge));
        --_cy-heading-l-font-weight: var(--cy-heading-l-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-l-line-height: var(--cy-heading-l-line-height, var(--_cy-heading-line-height));
        --_cy-heading-l-color: var(--cy-heading-l-color, var(--_cy-heading-color));

        /* Heading M */
        --_cy-heading-m-font-family: var(--cy-heading-m-font-family, var(--_cy-heading-font-family));
        --_cy-heading-m-size: var(--cy-heading-m-size, var(--cy-base-text-font-size-xlarge));
        --_cy-heading-m-font-weight: var(--cy-heading-m-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-m-line-height: var(--cy-heading-m-line-height, var(--_cy-heading-line-height));
        --_cy-heading-m-color: var(--cy-heading-m-color, var(--_cy-heading-color));

        /* Heading S */
        --_cy-heading-s-font-family: var(--cy-heading-s-font-family, var(--_cy-heading-font-family));
        --_cy-heading-s-size: var(--cy-heading-s-size, var(--cy-base-text-font-size-large));
        --_cy-heading-s-font-weight: var(--cy-heading-s-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-s-line-height: var(--cy-heading-s-line-height, var(--_cy-heading-line-height));
        --_cy-heading-s-color: var(--cy-heading-s-color, var(--_cy-heading-color));

        /* Heading XS */
        --_cy-heading-xs-font-family: var(--cy-heading-xs-font-family, var(--_cy-heading-font-family));
        --_cy-heading-xs-size: var(--cy-heading-xs-size, var(--cy-base-text-font-size-base));
        --_cy-heading-xs-font-weight: var(--cy-heading-xs-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-xs-line-height: var(--cy-heading-xs-line-height, var(--_cy-heading-line-height));
        --_cy-heading-xs-color: var(--cy-heading-xs-color, var(--_cy-heading-color));

        /* Heading Card */
        --_cy-heading-card-font-family: var(--cy-heading-card-font-family, var(--_cy-heading-font-family));
        --_cy-heading-card-size: var(--cy-heading-card-size, var(--cy-base-text-font-size-large));
        --_cy-heading-card-font-weight: var(--cy-heading-card-font-weight, var(--_cy-heading-font-weight));
        --_cy-heading-card-line-height: var(--cy-heading-card-line-height, var(--_cy-heading-line-height));
        --_cy-heading-card-color: var(--cy-heading-card-color, var(--_cy-heading-color));

        /* Heading Card Subtitle */
        --_cy-heading-card-subtitle-font-family: var(--cy-heading-card-subtitle-font-family, var(--_cy-heading-font-family));
        --_cy-heading-card-subtitle-size: var(--cy-heading-card-subtitle-size, var(--cy-base-text-font-size-small));
        --_cy-heading-card-subtitle-font-weight: var(--cy-heading-card-subtitle-font-weight, var(--_cy-heading-card-font-weight));
        --_cy-heading-card-subtitle-line-height: var(--cy-heading-card-subtitle-line-height, var(--_cy-heading-line-height));
        --_cy-heading-card-subtitle-color: var(--cy-heading-card-subtitle-color, var(--_cy-heading-color));
    }
}

@layer main {
    /* Base heading styles */
    [data-cy-heading] {
        /* Reset default margins */
        margin: 0;
        font-family: var(--_cy-heading-font-family);
        font-size: var(--_cy-heading-font-size);
        font-weight: var(--_cy-heading-font-weight);
        line-height: var(--_cy-heading-line-height);
        color: var(--_cy-heading-color);
    }

    /* Heading size variants - combines semantic HTML defaults with utility classes */
    h1[data-cy-heading=""],
    [data-cy-heading="xxl"] {
        --_cy-heading-font-family: var(--_cy-heading-xxl-font-family);
        --_cy-heading-font-size: var(--_cy-heading-xxl-size);
        --_cy-heading-font-weight: var(--_cy-heading-xxl-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-xxl-line-height);
        --_cy-heading-color: var(--_cy-heading-xxl-color);
    }

    h2[data-cy-heading=""],
    [data-cy-heading="xl"] {
        --_cy-heading-font-family: var(--_cy-heading-xl-font-family);
        --_cy-heading-font-size: var(--_cy-heading-xl-size);
        --_cy-heading-font-weight: var(--_cy-heading-xl-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-xl-line-height);
        --_cy-heading-color: var(--_cy-heading-xl-color);
    }

    h3[data-cy-heading=""],
    [data-cy-heading="l"] {
        --_cy-heading-font-family: var(--_cy-heading-l-font-family);
        --_cy-heading-font-size: var(--_cy-heading-l-size);
        --_cy-heading-font-weight: var(--_cy-heading-l-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-l-line-height);
        --_cy-heading-color: var(--_cy-heading-l-color);
    }

    h4[data-cy-heading=""],
    [data-cy-heading="m"] {
        --_cy-heading-font-family: var(--_cy-heading-m-font-family);
        --_cy-heading-font-size: var(--_cy-heading-m-size);
        --_cy-heading-font-weight: var(--_cy-heading-m-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-m-line-height);
        --_cy-heading-color: var(--_cy-heading-m-color);
    }

    h5[data-cy-heading=""],
    [data-cy-heading="s"] {
        --_cy-heading-font-family: var(--_cy-heading-s-font-family);
        --_cy-heading-font-size: var(--_cy-heading-s-size);
        --_cy-heading-font-weight: var(--_cy-heading-s-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-s-line-height);
        --_cy-heading-color: var(--_cy-heading-s-color);
    }

    h6[data-cy-heading=""],
    [data-cy-heading="xs"] {
        --_cy-heading-font-family: var(--_cy-heading-xs-font-family);
        --_cy-heading-font-size: var(--_cy-heading-xs-size);
        --_cy-heading-font-weight: var(--_cy-heading-xs-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-xs-line-height);
        --_cy-heading-color: var(--_cy-heading-xs-color);
    }

    /* Heading Card */
    [data-cy-heading="card"] {
        --_cy-heading-font-family: var(--_cy-heading-card-font-family);
        --_cy-heading-font-size: var(--_cy-heading-card-size);
        --_cy-heading-font-weight: var(--_cy-heading-card-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-card-line-height);
        --_cy-heading-color: var(--_cy-heading-card-color);
    }

    /* Heading Card Subtitle */
    [data-cy-heading="card-subtitle"] {
        --_cy-heading-font-family: var(--_cy-heading-card-subtitle-font-family);
        --_cy-heading-font-size: var(--_cy-heading-card-subtitle-size);
        --_cy-heading-font-weight: var(--_cy-heading-card-subtitle-font-weight);
        --_cy-heading-line-height: var(--_cy-heading-card-subtitle-line-height);
        --_cy-heading-color: var(--_cy-heading-card-subtitle-color);
    }
}
}

@layer utilities{

@layer settings {
    :root {
        /* Padding around page wrap element in inline direction.
         Uses clamp for responsive padding between small and base sizes. */
        --_cy-page-wrap-padding-inline: var(
            --cy-page-wrap-padding-inline,
            clamp(
                var(--cy-base-padding-small, 0.75rem),
                2dvw,
                var(--cy-base-padding-base, 1rem)
            )
        );

        /* Max widths for different page wrap sizes. */
        --_cy-page-wrap-small-max-width: var(--cy-page-wrap-small-max-width, 600px);
        --_cy-page-wrap-default-max-width: var(--cy-page-wrap-default-max-width, 900px);
        --_cy-page-wrap-wide-max-width: var(--cy-page-wrap-wide-max-width, 1200px);
    }
}

@layer main {
    /* Base page wrap. */
    [data-cy-page-wrap] {
        padding-inline: var(--_cy-page-wrap-padding-inline);

        /* Inner small column size - min() ensures the column never exceeds its max width while allowing
           it to shrink below that width when the container is narrower than the max width */
        --_small-column-size: min(100%, var(--_cy-page-wrap-small-max-width));

        /* The default column size is determined by the min() function which selects the smaller of two values:
           1) Half the container width minus half the small max width (ensures responsive scaling)
           2) Half the difference between default and small max widths (ensures max width constraint) */
        --_default-column-size:
            min(
                50% - var(--_cy-page-wrap-small-max-width) / 2,
                (var(--_cy-page-wrap-default-max-width) - var(--_cy-page-wrap-small-max-width)) / 2
            );

        /* The wide column size uses minmax() to set both minimum and maximum constraints:
            - Minimum of 0 prevents negative widths
            - Maximum is half the difference between wide and default max widths,
              allowing the wide sections to expand up to the full wide width */
        --_wide-column-size: minmax(
            0,
            calc(
                (var(--_cy-page-wrap-wide-max-width) - var(--_cy-page-wrap-default-max-width)) / 2
            )
        );

        /* Grid layout with named lines for different wrap sizes. */
        display: grid;
        grid-column: var(--_cy-page-wrap-column, --full); /* Needed for nested page wraps. */

        /*
            Define grid columns by naming the grid lines for different wrap sizes, creating named grid columns.

            Page wrap sizes (grid column visualization):

            | ===== | === | === | === --full ==== | === | === | ===== |
            |       | === | === | === --wide ==== | === | === |       |
            |       |     | === | == --default == | === |     |       |
            |       |     |     | === --small === |     |     |       |

        */
        grid-template-columns:
            [--full-start]
            1fr

            [--wide-start]
            var(--_wide-column-size)

            [--default-start]
            var(--_default-column-size)

            [--small-start]
            var(--_small-column-size)
            [--small-end]

            var(--_default-column-size)
            [--default-end]

            var(--_wide-column-size)
            [--wide-end]

            1fr
            [--full-end];

        /* Nested page wraps */
        [data-cy-page-wrap] {
            /* Set page wrap CONTENT column to page wrap column by default */
            --_cy-page-wrap-content-column: var(--_cy-page-wrap-column);
            padding-inline: 0;
        }

        /* Position all direct children that are not page wraps or are the `root` part of custom elements
           into the page wrap grid. */
        > :is(
            :not([data-cy-page-wrap]),
            ::part(root)
        ) {
            grid-template-columns: subgrid; /* Necessary for elements width `display: grid;` */
            grid-column: var(--_cy-page-wrap-column, --default); /* Defaults to --default column */
        }

        /* Nested page wraps that don’t have custom sizes or have a custom page wrap CONTENT size */
        > :is(
            [data-cy-page-wrap=""],
            [data-cy-page-wrap-content]
        ):not([data-cy-page-wrap-content="none"]) {
            display: grid;
            /* Inherit parent (page wrap) grid columns */
            grid-template-columns: inherit;

            /* Position CONTENT of all direct children that are not non-custom sized page wraps or are the `root` part
               of custom elements. */
            > :not([data-cy-page-wrap=""]),
            > &::part(root) {
                grid-column: var(--_cy-page-wrap-content-column, --default); /* Defaults to --default column */
            }
        }

        /* Position CONTENT of direct children that are the `root` part of custom elements. */
        > ::part(root) {
            grid-column: var(--_cy-page-wrap-content-column, --default);
        }

        /* Nested default size page wrap */
        > [data-cy-page-wrap="default"] {
            --_cy-page-wrap-column: --default;
        }

        /* Nested small size page wrap */
        > [data-cy-page-wrap="small"] {
            --_cy-page-wrap-column: --small;
        }

        /* Nested wide size page wrap */
        > [data-cy-page-wrap="wide"] {
            --_cy-page-wrap-column: --wide;
        }

        /* Nested full size page wrap with inline padding and negative inline margins
           to bypass the padding of the outer page wrap  */
        > [data-cy-page-wrap="full"] {
            --_cy-page-wrap-column: --full;
            margin-inline: calc(var(--_cy-page-wrap-padding-inline) * -1);
            padding-inline: var(--_cy-page-wrap-padding-inline);
        }

        --cy-page-wrap-max-width: var(--_cy-page-wrap-default-max-width);
        &[data-cy-page-wrap="default"] {
        --cy-page-wrap-max-width: var(--_cy-page-wrap-default-max-width);
        }

        &[data-cy-page-wrap="small"] {
            --cy-page-wrap-max-width: var(--_cy-page-wrap-small-max-width);
        }

        &[data-cy-page-wrap="wide"] {
            --cy-page-wrap-max-width: var(--_cy-page-wrap-wide-max-width);
        }

        &[data-cy-page-wrap="full"] {
            --cy-page-wrap-max-width: 100dvw;
        }


    }

}

/* Content column of page wrap items can be set separately from the page wrap column
   width the [data-cy-page-wrap-content] attribute. */
@layer wrap-content {
    [data-cy-page-wrap-content="default"] > *,
    [data-cy-page-wrap-content="default"]::part(root) {
        --_cy-page-wrap-content-column: --default;
    }

    [data-cy-page-wrap-content="small"] > *,
    [data-cy-page-wrap-content="small"]::part(root) {
        --_cy-page-wrap-content-column: --small;
    }

    [data-cy-page-wrap-content="wide"] > *,
    [data-cy-page-wrap-content="wide"]::part(root) {
        --_cy-page-wrap-content-column: --wide;
    }

    [data-cy-page-wrap-content="full"] > *,
    [data-cy-page-wrap-content="full"]::part(root) {
        --_cy-page-wrap-content-column: --full;
    }
}

/* Some components may need to adjust when also acting as page wrap item. */
@layer components {
    [data-cy-page-wrap] {
        /* Align content indent (used for figcaption) to page wrap padding. */
        > cy-image {
            --cy-content-indent: var(--_cy-page-wrap-padding-inline);
            padding-inline: 0;
        }
    }
}
}

@layer utilities{

/**
 * Aspect Ratio Utilities
 *
 * Control the aspect ratios of elements to ensure uniform dimensions
 * across various items. This is particularly beneficial for media elements,
 * such as images and videos.
 */

@layer settings {
    :root {
        --_cy-aspect-ratio: var(--cy-aspect-ratio, 1);
    }
}

@layer main {
    [data-cy-aspect-ratio],
    [data-cy-aspect-ratio="1:1"] {
        width: fit-content; /* @NOTE: Not 100% sure about this, maybe refactor later if this creates problems */
        aspect-ratio: var(--_cy-aspect-ratio);
    }

    [data-cy-aspect-ratio="1:2"] {
        --_cy-aspect-ratio: 1 / 2;
    }

    [data-cy-aspect-ratio="2:1"] {
        --_cy-aspect-ratio: 2 / 1;
    }

    [data-cy-aspect-ratio="3:2"] {
        --_cy-aspect-ratio: 3 / 2;
    }

    [data-cy-aspect-ratio="2:3"] {
        --_cy-aspect-ratio: 2 / 3;
    }

    [data-cy-aspect-ratio="4:3"] {
        --_cy-aspect-ratio: 4 / 3;
    }

    [data-cy-aspect-ratio="3:4"] {
        --_cy-aspect-ratio: 3 / 4;
    }

    [data-cy-aspect-ratio="16:9"] {
        --_cy-aspect-ratio: 16 / 9;
    }

    [data-cy-aspect-ratio="21:9"] {
        --_cy-aspect-ratio: 21 / 9;
    }
}
}

@layer utilities{

/**
 * Space Block Utilities
 *
 * Manage margin-based spacing between block elements within the container where the utility is applied.
 */

:root {
    --_cy-space-block-size: var(--cy-space-block-size, var(--cy-base-space-base, 1rem));
    --_cy-space-block-size-xxsmall: var(--cy-space-block-size-xxsmall, var(--cy-base-space-xxsmall, 0.3rem));
    --_cy-space-block-size-xsmall: var(--cy-space-block-size-xsmall, var(--cy-base-space-xsmall, 0.5rem));
    --_cy-space-block-size-small: var(--cy-space-block-size-small, var(--cy-base-space-small, 0.75rem));
    --_cy-space-block-size-large: var(--cy-space-block-size-large, var(--cy-base-space-large, 1.5rem));
}

[data-cy-space-block] {
    > :not([hidden]) ~ :not([hidden]) {
        margin-block-start: var(--_cy-space-block-size);
    }
}

@layer variants {
    [data-cy-space-block="xxsmall"] {
        --_cy-space-block-size: var(--_cy-space-block-size-xxsmall);
    }

    [data-cy-space-block="xsmall"] {
        --_cy-space-block-size: var(--_cy-space-block-size-xsmall);
    }

    [data-cy-space-block="small"] {
        --_cy-space-block-size: var(--_cy-space-block-size-small);
    }

    [data-cy-space-block="large"] {
        --_cy-space-block-size: var(--_cy-space-block-size-large);
    }

    /**
     * Override spacing to zero for specific elements.
     * Applies only to direct children elements with the attribute
     * `data-cy-space-block="none"`.
     */
    [data-cy-space-block] {
        > [data-cy-space-block="none"] {
            --_cy-space-block-size: 0;
        }
    }
}
}

@layer utilities{

/**
 * Sticky Positioning Utilities
 *
 * Provides utility classes and attribute selectors to apply CSS sticky positioning.
 */

/**
 * Sticky Positioning
 *
 * Applies sticky positioning to elements based on data attributes.
 * Allows customization of the sticky offset using the --cy-sticky-offset custom property.
 */
[data-cy-sticky],
[data-cy-sticky="start"] {
    position: sticky;
    inset-block-start: var(--cy-sticky-offset, 0);
    z-index: 1; /* @TODO: z-index value */
}

/**
 * Sticky Positioning to the End
 *
 * Applies sticky positioning to the last element in the context or to elements marked as "end".
 * Allows customization of the sticky offset using the --cy-sticky-offset custom property.
 */
[data-cy-sticky]:last-child,
[data-cy-sticky="end"] {
    inset-block: auto var(--cy-sticky-offset, 0);
}
}

@layer utilities{

/**
 * Stretch Behaviour Utilities
 *
 * Control the stretch behavior of elements to ensure filling available space
 * This is particularly beneficial for media elements such as images and videos.
 */

[data-cy-stretch="both"],
[data-cy-stretch="inline"] {
    inline-size: stretch;
    inline-size: -webkit-fill-available;
    inline-size: -moz-available;

    /* @TODO: Remove when browser support is better: https://caniuse.com/mdn-css_properties_width_stretch */
    @supports not (inline-size: stretch) {
        inline-size: 100%;
    }
}

[data-cy-stretch="both"],
[data-cy-stretch="block"] {
    block-size: stretch;
    block-size: -webkit-fill-available;

    /* @TODO: Remove when browser support is better: https://caniuse.com/mdn-css_properties_height_stretch */
    @supports not (block-size: stretch) {
        block-size: 100%;
    }
}
}

@layer utilities{

/**
 * Width Utility
 *
 * This CSS module defines a flexible system for setting width based on fractions.
 * The system uses CSS custom properties to manage numerators and denominators
 * allowing for easy configuration and responsive adjustments.
 *
 * Usage:
 * Use data attributes or utility class names to specify the desired width fraction.
 * The custom properties work in conjunction with container queries to enable
 * responsive behavior based on the size of the container element.
 */

/** Helper property for tracking current breakpoint (for debug purposes). */
@property --cy-current-breakpoint {
    syntax: "<string>";
    inherits: false;
    initial-value: default;
}

/** A numerical value representing the numerator of the width fraction. */
@property --cy-width-numerator {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/** A numerical value representing the denominator of the width fraction. */
@property --cy-width-denominator {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}

/**
 * Width Calculation
 *
 * Sets the width of elements using either a data attribute or class name format.
 * It computes the width based on the defined numerator and denominator.
 */
[data-cy-width] {
    /* Calculates width as a fraction of the container's full width */
    width: calc(100% / var(--_cy-width-responsive-denominator, var(--cy-width-denominator)) * var(--_cy-width-responsive-numerator, var(--cy-width-numerator)));
}

/**
 * Numerators
 *
 * These rules set the numerator part of the width fraction based on attribute or class name.
 * Example:
 * - `data-cy-width="2/3"` or `class="u-width-2/3` sets the numerator to 2.
 */
[data-cy-width^="1/"]  { --cy-width-numerator: 1; }
[data-cy-width^="2/"]  { --cy-width-numerator: 2; }
[data-cy-width^="3/"]  { --cy-width-numerator: 3; }
[data-cy-width^="4/"]  { --cy-width-numerator: 4; }
[data-cy-width^="5/"]  { --cy-width-numerator: 5; }
[data-cy-width^="6/"]  { --cy-width-numerator: 6; }
[data-cy-width^="7/"]  { --cy-width-numerator: 7; }
[data-cy-width^="8/"]  { --cy-width-numerator: 8; }
[data-cy-width^="9/"]  { --cy-width-numerator: 9; }
[data-cy-width^="10/"] { --cy-width-numerator: 10; }
[data-cy-width^="11/"] { --cy-width-numerator: 11; }
[data-cy-width^="12/"] { --cy-width-numerator: 12; }

/**
 * Denominators
 *
 * These rules set the denominator part of the width fraction based on attribute or class name.
 * Example:
 * - `data-cy-width="1/3"` or `class="u-width-1/3"` set the denominator to 3.
 */
[data-cy-width$="/1"]  {--cy-width-denominator: 1; }
[data-cy-width$="/2"]  {--cy-width-denominator: 2; }
[data-cy-width$="/3"]  {--cy-width-denominator: 3; }
[data-cy-width$="/4"]  {--cy-width-denominator: 4; }
[data-cy-width$="/12"] {--cy-width-denominator: 12; }

/**
 * Responsive Width Adjustments
 *
 * These rules adjust the width properties based on the width of the container.
 * It uses container queries to set different numerators and denominators for specific breakpoints.
 * This allows for adaptive layouts that respond to changes in container size.
 *
 * Two approaches are supported:
 *
 * 1. Data attributes: Use data attributes to set different numerators and denominators for specific breakpoints.
 *    Example:
 *.   - `data-cy-width-at-s="1/2"` sets the numerator to 1 and the denominator to 2 at the small breakpoint.
 *
 * 2. CSS custom properties: Use custom properties to set different numerators and denominators for specific breakpoints.
 *    Example:
 *.   - `--cy-width-numerator@s: 1; --cy-width-denominator@s: 2;` sets the numerator to 1 and
 *.   the denominator to 2 at the small breakpoint.
 *
 * Container query breakpoints:
 * @NOTE: When container query values are updated, the corresponding table in widths.mdx is also updated.
 */
[data-cy-width] {
    /* Default state before any breakpoints. The property value changes at different container widths.
       This could be used as a style query hook. */
    --cy-current-breakpoint: default;

    @container (width >= 15rem) {
        --cy-current-breakpoint: s;

        /* Use small (@s) breakpoint adjustments if available */
        --_cy-width-responsive-numerator: var(--cy-width-numerator\@s);
        --_cy-width-responsive-denominator: var(--cy-width-denominator\@s);

        &[data-cy-width-at-s] {
            &[data-cy-width-at-s^="1/"]  { --cy-width-numerator: 1; }
            &[data-cy-width-at-s^="2/"]  { --cy-width-numerator: 2; }
            &[data-cy-width-at-s^="3/"]  { --cy-width-numerator: 3; }
            &[data-cy-width-at-s^="4/"]  { --cy-width-numerator: 4; }
            &[data-cy-width-at-s^="5/"]  { --cy-width-numerator: 5; }
            &[data-cy-width-at-s^="6/"]  { --cy-width-numerator: 6; }
            &[data-cy-width-at-s^="7/"]  { --cy-width-numerator: 7; }
            &[data-cy-width-at-s^="8/"]  { --cy-width-numerator: 8; }
            &[data-cy-width-at-s^="9/"]  { --cy-width-numerator: 9; }
            &[data-cy-width-at-s^="10/"] { --cy-width-numerator: 10; }
            &[data-cy-width-at-s^="11/"] { --cy-width-numerator: 11; }
            &[data-cy-width-at-s^="12/"] { --cy-width-numerator: 12; }

            &[data-cy-width-at-s$="/1"]  {--cy-width-denominator: 1; }
            &[data-cy-width-at-s$="/2"]  {--cy-width-denominator: 2; }
            &[data-cy-width-at-s$="/3"]  {--cy-width-denominator: 3; }
            &[data-cy-width-at-s$="/4"]  {--cy-width-denominator: 4; }
            &[data-cy-width-at-s$="/12"] {--cy-width-denominator: 12; }
        }
    }

    @container (width >= 33rem) {
        --cy-current-breakpoint: m;

        /* Use medium {@m)breakpoint adjustments, defaulting to small if not set */
        --_cy-width-responsive-numerator: var(--cy-width-numerator\@m, var(--cy-width-numerator\@s));
        --_cy-width-responsive-denominator: var(--cy-width-denominator\@m, var(--cy-width-denominator\@s));

        &[data-cy-width-at-m] {
            &[data-cy-width-at-m^="1/"]  { --cy-width-numerator: 1; }
            &[data-cy-width-at-m^="2/"]  { --cy-width-numerator: 2; }
            &[data-cy-width-at-m^="3/"]  { --cy-width-numerator: 3; }
            &[data-cy-width-at-m^="4/"]  { --cy-width-numerator: 4; }
            &[data-cy-width-at-m^="5/"]  { --cy-width-numerator: 5; }
            &[data-cy-width-at-m^="6/"]  { --cy-width-numerator: 6; }
            &[data-cy-width-at-m^="7/"]  { --cy-width-numerator: 7; }
            &[data-cy-width-at-m^="8/"]  { --cy-width-numerator: 8; }
            &[data-cy-width-at-m^="9/"]  { --cy-width-numerator: 9; }
            &[data-cy-width-at-m^="10/"] { --cy-width-numerator: 10; }
            &[data-cy-width-at-m^="11/"] { --cy-width-numerator: 11; }
            &[data-cy-width-at-m^="12/"] { --cy-width-numerator: 12; }

            &[data-cy-width-at-m$="/1"]  {--cy-width-denominator: 1; }
            &[data-cy-width-at-m$="/2"]  {--cy-width-denominator: 2; }
            &[data-cy-width-at-m$="/3"]  {--cy-width-denominator: 3; }
            &[data-cy-width-at-m$="/4"]  {--cy-width-denominator: 4; }
            &[data-cy-width-at-m$="/12"] {--cy-width-denominator: 12; }
        }
    }

    @container (width >= 50rem) {
        --cy-current-breakpoint: l;

        /* Use large (@l) breakpoint adjustments, defaulting to medium if not set */
        --_cy-width-responsive-numerator: var(--cy-width-numerator\@l, var(--cy-width-numerator\@m));
        --_cy-width-responsive-denominator: var(--cy-width-denominator\@l, var(--cy-width-denominator\@m));

        &[data-cy-width-at-l] {
            &[data-cy-width-at-l^="1/"]  { --cy-width-numerator: 1; }
            &[data-cy-width-at-l^="2/"]  { --cy-width-numerator: 2; }
            &[data-cy-width-at-l^="3/"]  { --cy-width-numerator: 3; }
            &[data-cy-width-at-l^="4/"]  { --cy-width-numerator: 4; }
            &[data-cy-width-at-l^="5/"]  { --cy-width-numerator: 5; }
            &[data-cy-width-at-l^="6/"]  { --cy-width-numerator: 6; }
            &[data-cy-width-at-l^="7/"]  { --cy-width-numerator: 7; }
            &[data-cy-width-at-l^="8/"]  { --cy-width-numerator: 8; }
            &[data-cy-width-at-l^="9/"]  { --cy-width-numerator: 9; }
            &[data-cy-width-at-l^="10/"] { --cy-width-numerator: 10; }
            &[data-cy-width-at-l^="11/"] { --cy-width-numerator: 11; }
            &[data-cy-width-at-l^="12/"] { --cy-width-numerator: 12; }

            &[data-cy-width-at-l$="/1"]  {--cy-width-denominator: 1; }
            &[data-cy-width-at-l$="/2"]  {--cy-width-denominator: 2; }
            &[data-cy-width-at-l$="/3"]  {--cy-width-denominator: 3; }
            &[data-cy-width-at-l$="/4"]  {--cy-width-denominator: 4; }
            &[data-cy-width-at-l$="/12"] {--cy-width-denominator: 12; }
        }
    }

    @container (width >= 70rem) {
        --cy-current-breakpoint: xl;

        /* Use extra-large (@xl) breakpoint adjustments, defaulting to large if not set */
        --_cy-width-responsive-numerator: var(--cy-width-numerator\@xl, var(--cy-width-numerator\@l));
        --_cy-width-responsive-denominator: var(--cy-width-denominator\@xl, var(--cy-width-denominator\@l));

        &[data-cy-width-at-xl] {
            &[data-cy-width-at-xl^="1/"]  { --cy-width-numerator: 1; }
            &[data-cy-width-at-xl^="2/"]  { --cy-width-numerator: 2; }
            &[data-cy-width-at-xl^="3/"]  { --cy-width-numerator: 3; }
            &[data-cy-width-at-xl^="4/"]  { --cy-width-numerator: 4; }
            &[data-cy-width-at-xl^="5/"]  { --cy-width-numerator: 5; }
            &[data-cy-width-at-xl^="6/"]  { --cy-width-numerator: 6; }
            &[data-cy-width-at-xl^="7/"]  { --cy-width-numerator: 7; }
            &[data-cy-width-at-xl^="8/"]  { --cy-width-numerator: 8; }
            &[data-cy-width-at-xl^="9/"]  { --cy-width-numerator: 9; }
            &[data-cy-width-at-xl^="10/"] { --cy-width-numerator: 10; }
            &[data-cy-width-at-xl^="11/"] { --cy-width-numerator: 11; }
            &[data-cy-width-at-xl^="12/"] { --cy-width-numerator: 12; }

            &[data-cy-width-at-xl$="/1"]  {--cy-width-denominator: 1; }
            &[data-cy-width-at-xl$="/2"]  {--cy-width-denominator: 2; }
            &[data-cy-width-at-xl$="/3"]  {--cy-width-denominator: 3; }
            &[data-cy-width-at-xl$="/4"]  {--cy-width-denominator: 4; }
            &[data-cy-width-at-xl$="/12"] {--cy-width-denominator: 12; }
        }
    }
}
}

@layer utilities{

/**
 * Visually Hidden Utility
 *
 * Hides content visually while keeping it accessible to screen readers.
 * This is useful for elements that should be available to assistive technologies
 * but hidden from visual users.
 */

@layer utilities {
    /** Base visually hidden styles. */
    [data-cy-visually-hidden] {
        position: var(--cy-if-hidden-disable, absolute) !important;
        width: var(--cy-if-hidden-disable, 1px) !important;
        height: var(--cy-if-hidden-disable, 1px) !important;
        overflow: var(--cy-if-hidden-disable, hidden) !important;
        margin: var(--cy-if-hidden-disable, -1px) !important;
        padding: var(--cy-if-hidden-disable, 0) !important;
        border: var(--cy-if-hidden-disable, 0) !important;
        white-space: var(--cy-if-hidden-disable, nowrap) !important;
        clip: var(--cy-if-hidden-disable, rect(0, 0, 0, 0)) !important;
    }

    /**
     * Focusable variant.
     * Shows the element when it receives focus (e.g., when tabbed to).
     */
    [data-cy-visually-hidden="focusable"]:focus-visible,
    [data-cy-visually-hidden="focusable"]:focus-within {
        --cy-if-hidden-disable: ;
    }
}
}

@layer debug{

@property --debug-outline-width {
    syntax: "<length>";
    inherits: false;
    initial-value: 1px;
}

@property --debug-outline-style {
    syntax: "<custom-ident>";
    inherits: false;
    initial-value: solid;
}

@property --debug-color {
    syntax: "<color>";
    inherits: false;
    initial-value: #ef2aa7;
}

@property --debug-outline-offset {
    syntax: "<length>";
    inherits: false;
    initial-value: 0;
}

@property --debug-background-color {
    syntax: "<custom-ident>";
    inherits: false;
    initial-value: _;
}

:root {
    --debug: ;
    --debug-recursive: ;
    --debug-background-color: ;
    --debug-color-1: #ef2aa7;
    --debug-color-2: #f08439;
    --debug-color-3: #09a719;
    --debug-color-4: #33bde2;
    --debug-color-5: #9c33e2;
}

[debug], [debugr] {
    --debug-outline-width: 3px;
    --debug-outline-style: dashed;
    --debug-outline-offset: 3px;

    > * {
        --debug-color: var(--debug-color-2);

        > * {
            --debug-color: var(--debug-color-3);

            > * {
                --debug-color: var(--debug-color-4);

                > * {
                    --debug-color: var(--debug-color-5);
                }
            }
        }
    }
}
}