/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- variables */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:root {
    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- widths */

    --bhf-width-4xs: var(--width-4xs);
    --bhf-width-3xs: var(--width-3xs);
    --bhf-width-2xs: var(--width-2xs);
    --bhf-width-xs: var(--width-xs);
    --bhf-width-s: var(--width-s);
    --bhf-width-m: var(--width-m);
    --bhf-width-l: var(--width-l);
    --bhf-width-xl: var(--width-xl);
    --bhf-width-2xl: var(--width-2xl);
    --bhf-width-3xl: var(--width-3xl);
    --bhf-width-4xl: var(--width-4xl);
    --bhf-width-full-content: var(--width-full-content);
    --bhf-width-full: var(--width-full);

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- spacings */

    --bhf-spacing-gutter: var(--spacing-gutter);

    --bhf-spacing-none: var(--spacing-none);
    --bhf-spacing-3xs: var(--spacing-3xs);
    --bhf-spacing-2xs: var(--spacing-2xs);
    --bhf-spacing-xs: var(--spacing-xs);
    --bhf-spacing-s: var(--spacing-s);
    --bhf-spacing-m: var(--spacing-m);
    --bhf-spacing-l: var(--spacing-l);
    --bhf-spacing-xl: var(--spacing-xl);
    --bhf-spacing-2xl: var(--spacing-2xl);
    --bhf-spacing-3xl: var(--spacing-3xl);

    /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
    /* !- animations (inview) */

    --bhf-animation-inview-shift: var(--animation-inview-shift);
    --bhf-animation-inview-duration: var(--animation-inview-duration);
    --bhf-animation-inview-delay: var(--animation-inview-delay);
    --bhf-animation-inview-opacity-start: var(--animation-inview-opacity-start);
    --bhf-animation-inview-scale-start: var(--animation-inview-scale-start);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- baker's base */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * manually 'forked' from:
 * - normalize.css (original) - https://github.com/necolas/normalize.css
 * - normalize.css (updated) - https://github.com/csstools/normalize.css
 * - sanitize.css (opinionated) - https://github.com/csstools/sanitize.css
 * - modern-normalize (tailwind's base) - https://github.com/sindresorhus/modern-normalize
 * - CSS Remedy - https://github.com/jensimmons/cssremedy
 */

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- document */

/**
 * 1. Set the more-intuitive box-sizing model `border-box` in all browsers (opinionated).
 */

/* use the page wrapper class to not interfere with the bakehouse interface */
:where(.lp-page) *,
:where(.lp-page) ::before,
:where(.lp-page) ::after {
    box-sizing: border-box; /* 1 */
}

/**
 * 1. Use the default user interface font in all browsers (opinionated).
 * 2. Correct the `line-height` in all browsers. (Consider `line-sizing` for the future: https://drafts.csswg.org/css-inline-3/#line-sizing-property)
 * 3. Prevent adjustments of `font-size` after orientation changes in iOS.
 * 4. Turn off sub-pixel rendering and improve antialiased text display in Firefox and WebKit on macOS (opinionated).
 * 5. Use a more common and readable `tab-size` in all browsers (opinionated).
 */

:where(html) {
    font-family:
        system-ui,
        /* macOS 10.11-10.12 */ -apple-system,
        /* Windows 6+ */ "Segoe UI",
        /* Android 4+ */ "Roboto",
        /* Ubuntu 10.10+ */ "Ubuntu",
        /* Gnome 3+ */ "Cantarell",
        /* KDE Plasma 5+ */ "Noto Sans",
        /* fallback */ sans-serif,
        /* macOS emoji */ "Apple Color Emoji",
        /* Windows emoji */ "Segoe UI Emoji",
        /* Windows emoji */ "Segoe UI Symbol",
        /* Linux emoji */ "Noto Color Emoji"; /* 1 */
    line-height: 1.15; /* 2 */
    -webkit-text-size-adjust: none; /* 3 */
    text-size-adjust: none; /* 3 */
    -moz-osx-font-smoothing: grayscale; /* 4 */
    -webkit-font-smoothing: antialiased; /* 4 */
    -moz-tab-size: 4; /* 5 */
    tab-size: 4; /* 5 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- sections */

/**
 * 1. Remove the `body` margin in all browsers (opinionated). (https://www.miriamsuzanne.com/2022/07/04/body-margin-8px/)
 */

:where(body) {
    margin: 0; /* 1 */
}

/**
 * 1. Correct `h1` elements within nested contexts (`section` and `article`) in Chrome, Firefox, and Safari.
 */

:where(h1) {
    font-size: 2em; /* 1 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- grouping content */

/**
 * 1. Correct the sizing in Firefox.
 * 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 */

:where(hr) {
    height: 0; /* 1 */
    color: inherit; /* 2 */
}

/**
 * 1. Remove the `margin` on nested lists in Chrome, Edge, and Safari.
 */

:where(ol, ul, dl) :where(ol, ul, dl) {
    margin: 0; /* 1 */
}

/**
 * 1. Remove the `list-style` on navigation lists in all browsers (opinionated).
 *
 * Warning: VoiceOver ignores list semantics in Safari when `list-style-type` is set to `none`. (https://bugs.webkit.org/show_bug.cgi?id=170179)
 * This can be 'fixed' by explicitly applying `role="list"` to the list elements,
 * or by creating a pseudo-element with a 'zero-width space' character on the list items. (https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html)
 */

:where(nav) :where(ol, ul) {
    padding: 0; /* 1 */
    list-style-type: none; /* 1 */
}

/**
 * 1. Remove the `list-style` on bakehouse navigation lists, items and links in all browsers (opinionated).
 */

:where(.bh-navigation ul, .bh-language-navigation ul),
:where(.bh-navigation ul, .bh-language-navigation ul) :where(li),
:where(.bh-navigation ul, .bh-language-navigation ul) :where(a) {
    display: block; /* 1 */
    margin: 0; /* 1 */
    padding: 0; /* 1 */
    list-style-type: none; /* 1 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- text-level semantics */

/**
 * 1. Remove `margin` in all browsers (opinionated).
 */

:where(p, h1, h2, h3, h4, h5, h6, figure, blockquote, dl, dd) {
    margin: 0; /* 1 */
}

/**
 * 1. Use the `:any-link` selector to match every `a` and `area` element with a `href` attribute (hyperlink), thus all elements that match the `:link` or `:visited` selectors in all browsers (opinionated).
 * 2. Inherit the font `color` for hyperlinks in all browsers (opinionated).
 */

/* 1 */
:where(:any-link) {
    color: inherit; /* 2 */
}

/**
 * 1. Add the correct `text-decoration` in Safari.
 */

:where(abbr[title]) {
    text-decoration: underline; /* 1 */
    text-decoration: underline dotted; /* 1 */
}

/**
 * 1. Add the correct `font-weight` in Chrome, Edge, and Safari.
 */

:where(strong, b) {
    font-weight: bolder; /* 1 */
}

/**
 * 1. Add the correct `font-size` for `small` elements in all browsers.
 */

:where(small) {
    font-size: 80%; /* 1 */
}

/**
 * 1. Use the default `monospace` user interface font in all browsers (opinionated).
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Make `pre` text wrap to prevent overflow in all browser (opinionated).
 */

:where(pre, code, kbd, samp) {
    font-family:
        ui-monospace,
        /* macOS 10.10+ */ "Menlo",
        /* Windows 6+ */ "Consolas",
        /* Android 4+ */ "Roboto Mono",
        /* Ubuntu 10.10+ */ "Ubuntu Monospace",
        /* KDE Plasma 5+ */ "Noto Mono",
        /* KDE Plasma 4+ */ "Oxygen Mono",
        /* Linux/OpenOffice fallback */ "Liberation Mono",
        /* fallback */ monospace,
        /* macOS emoji */ "Apple Color Emoji",
        /* Windows emoji */ "Segoe UI Emoji",
        /* Windows emoji */ "Segoe UI Symbol",
        /* Linux emoji */ "Noto Color Emoji"; /* 1 */
    font-size: 1em; /* 2 */
}

:where(pre) {
    white-space: pre-wrap; /* 3 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- multimedia content */

/**
 * 1. Give replaced elements `block` display behavior in all browsers (opinionated).
 * 2. In case authors overwrite the `display` value, remove the strange space-below that is caused by `line-height` in all browsers (opinionated).
 * 3. Constrain replaced elements to the parent `width` in all browsers (opinionated).
 * 4. When `max-width` is applied for replaced elements that have an intrinsic ratio, maintain the intrinsic aspect ratio in all browsers (opinionated).
 * 5. Remove the default pixel `width` in all browsers (opinionated).
 *
 * Consider adding new elements like `picture` and `source` for the future:
 * picture { display: contents; }
 * source { display: none; }
 */

:where(img, svg, video, canvas, audio, iframe, embed, object) {
    display: block; /* 1 */
    vertical-align: middle; /* 2 */
    max-width: 100%; /* 3 */
}

:where(img, svg, video, canvas) {
    height: auto; /* 4 */
}

:where(audio) {
    width: 100%; /* 5 */
}

/**
 * Remove the `border` on `iframe` elements in all browsers (opinionated).
 */

:where(iframe) {
    border-style: none;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- tabular data */

/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table `border-color` inheritance in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 */

:where(table) {
    border-collapse: collapse; /* 1 */
    border-color: currentcolor; /* 2 */
    text-indent: 0; /* 3 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- forms */

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

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

/**
 * 1. Remove the inheritance of `text-transform` in Edge and Firefox.
 */

:where(button, select) {
    text-transform: none; /* 1 */
}

/**
 * 1. Change default button styles in all browsers (opinionated).
 * 2. Restore the `cursor` modified by the previous rule (1) for `disabled` buttons in all browsers (opinionated).
 */

:where(
    button,
    input:is([type="button" i], [type="reset" i], [type="submit" i])
) {
    -webkit-appearance: none; /* 1 */
    -moz-appearance: none; /* 1 */
    appearance: none; /* 1 */
    margin: 0; /* 1 */
    border: 0; /* 1 */
    border-radius: 0; /* 1 */
    padding: 0; /* 1 */
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    text-align: inherit; /* 1 */
    color: inherit; /* 1 */
    background: transparent; /* 1 */
    cursor: pointer; /* 1 */
}

:where(
    button:disabled,
    input:is([type="button" i], [type="reset" i], [type="submit" i]):disabled
) {
    cursor: initial; /* 2 */
}

/**
 * 1. Correct the odd `appearance` in Chrome, Edge, and Safari.
 * 2. Correct the `outline` style in Safari.
 */

:where(input[type="search" i]) {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
}

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

:where(progress) {
    vertical-align: baseline; /* 1 */
}

/**
 * 1. Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
    color: inherit; /* 1 */
    opacity: 0.54; /* 1 */
}

/**
 * 1. Remove the inner `padding` in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
    -webkit-appearance: none; /* 1 */
}

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

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

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change `font` properties to `inherit` in Safari.
 */

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

/**
 * 1. Remove the inner `border` and `padding` of focus outlines in Firefox.
 * 2. Restore the focus `outline` styles unset by the previous rule (1) in Firefox.
 */

:where(
    button,
    input:is(
        [type="button" i],
        [type="color" i],
        [type="reset" i],
        [type="submit" i]
    )
)::-moz-focus-inner {
    border-style: none; /* 1 */
    padding: 0; /* 1 */
}

:where(
    button,
    input:is(
        [type="button" i],
        [type="color" i],
        [type="reset" i],
        [type="submit" i]
    )
)::-moz-focusring {
    outline: 1px dotted ButtonText; /* 2 */
}

/**
 * 1. Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */

:where(:-moz-ui-invalid) {
    box-shadow: none; /* 1 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- interactive */

/**
 * 1. Add the correct `display` value in Chrome and Safari.
 */

:where(summary) {
    display: list-item; /* 1 */
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- gutter */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bhf-gutter {
    padding-inline: var(--bhf-spacing-gutter);
}

.bhf-gutter-right {
    padding-inline-end: var(--bhf-spacing-gutter);
}

.bhf-gutter-left {
    padding-inline-start: var(--bhf-spacing-gutter);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- alignment */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bhf-layout,
.bhf-align-center {
    margin-inline: auto;
}

.bhf-align-left {
    margin-inline: 0 auto;
}

.bhf-align-right {
    margin-inline: auto 0;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- widths */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

.bhf-layout,
.bhf-width {
    --max-width-default: var(--bhf-width-m);
    --max-width: var(--max-width-default);
    max-inline-size: var(--max-width);
}

.bhf-width-4xs {
    --max-width: var(--bhf-width-4xs);
}

.bhf-width-3xs {
    --max-width: var(--bhf-width-3xs);
}

.bhf-width-2xs {
    --max-width: var(--bhf-width-2xs);
}

.bhf-width-xs {
    --max-width: var(--bhf-width-xs);
}

.bhf-width-s {
    --max-width: var(--bhf-width-s);
}

.bhf-width-m {
    --max-width: var(--bhf-width-m);
}

.bhf-width-l {
    --max-width: var(--bhf-width-l);
}

.bhf-width-xl {
    --max-width: var(--bhf-width-xl);
}

.bhf-width-2xl {
    --max-width: var(--bhf-width-2xl);
}

.bhf-width-3xl {
    --max-width: var(--bhf-width-3xl);
}

.bhf-width-4xl {
    --max-width: var(--bhf-width-4xl);
}

.bhf-width-full-content {
    --max-width: var(--bhf-width-full-content);
}

.bhf-width-full,
.bhf-width-full-gutter-none {
    --max-width: var(--bhf-width-full);
}

:where(.bhf-gutter) > .bhf-width-full-gutter-none {
    margin-inline-start: calc(var(--bhf-spacing-gutter) * -1);
    inline-size: calc(100% + var(--bhf-spacing-gutter) * 2);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- margins */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/**
 * 1. Remove `margin-block-end` for the last child element (`.bhElement`) of a content section (`.bhContainer`)
 * 2. Remove `margin-block-end` for the last child element of a bodytext (`.bh-bodytext`)
 * 3. Remove `margin-bottom` from content.css (core) for content sections (`.bhContainer`)
 * 4. Consider hidden child elements (`.bhElement`) of a content section (`.bhContainer`) to remove `margin-block-end` (in a separat rule because support is not sufficient)
 *
 * use the `bhf-margin-last-exclude` class on a content section if 1-4 is not desired
 */

.bhContainer:not(.bhf-margin-last-exclude) > .bhElement:last-child, /* 1 */
.bhe-state-editing .bhContainer:not(.bhf-margin-last-exclude) > .bhElement:nth-last-child(2), /* 1 */
.bh-bodytext > *:last-child /* 2 */ {
    margin-block-end: 0 !important;
}

.bhe-state-content-empty, /* 3 */
.bhe-state-dragging .bhe-state-content-inherited /* 3 */ {
    margin-bottom: 0 !important;
}

.bh-bemode:not(.bhe-state-show-hidden-content)
    .bhContainer:not(.bhf-margin-last-exclude)
    > .bhElement:nth-last-child(
        1 of .bhElement:not(.bhe-state-content-hidden)
    ) /* 4 */ {
    margin-block-end: 0 !important;
}

.bhf-layout,
.bhf-margin {
    --margin-bottom-default: var(--bhf-spacing-m);
    --margin-bottom: var(--margin-bottom-default);
    margin-block-end: var(--margin-bottom);
}

.bhf-margin-none {
    --margin-bottom: var(--bhf-spacing-none);
}

.bhf-margin-3xs {
    --margin-bottom: var(--bhf-spacing-3xs);
}

.bhf-margin-2xs {
    --margin-bottom: var(--bhf-spacing-2xs);
}

.bhf-margin-xs {
    --margin-bottom: var(--bhf-spacing-xs);
}

.bhf-margin-s {
    --margin-bottom: var(--bhf-spacing-s);
}

.bhf-margin-m {
    --margin-bottom: var(--bhf-spacing-m);
}

.bhf-margin-l {
    --margin-bottom: var(--bhf-spacing-l);
}

.bhf-margin-xl {
    --margin-bottom: var(--bhf-spacing-xl);
}

.bhf-margin-2xl {
    --margin-bottom: var(--bhf-spacing-2xl);
}

.bhf-margin-3xl {
    --margin-bottom: var(--bhf-spacing-3xl);
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- animations (inview) */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

:where(body:not(.bhe-state-editing))
    :where([class*="bhf-animation-"]:not(.bhf-animation-noselect)) {
    opacity: var(--bhf-animation-inview-opacity-start);
    transition:
        opacity var(--bhf-animation-inview-duration),
        transform var(--bhf-animation-inview-duration);
    transition-delay: var(--bhf-animation-inview-delay);
}

:where(body:not(.bhe-state-editing)) :where(.bhf-animation-top) {
    transform: translateY(calc(var(--bhf-animation-inview-shift) * (-1)));
}

:where(body:not(.bhe-state-editing)) :where(.bhf-animation-right) {
    transform: translateX(var(--bhf-animation-inview-shift));
}

:where(body:not(.bhe-state-editing)) :where(.bhf-animation-bottom) {
    transform: translateY(var(--bhf-animation-inview-shift));
}

:where(body:not(.bhe-state-editing)) :where(.bhf-animation-left) {
    transform: translateX(calc(var(--bhf-animation-inview-shift) * (-1)));
}

:where(body:not(.bhe-state-editing)) :where(.bhf-animation-zoom) {
    transform: scale(var(--bhf-animation-inview-scale-start));
}

@media (max-width: 767.98px) {
    :where(body:not(.bhe-state-editing)) :where(.bhf-animation-top),
    :where(body:not(.bhe-state-editing)) :where(.bhf-animation-right),
    :where(body:not(.bhe-state-editing)) :where(.bhf-animation-left) {
        transform: translateY(var(--bhf-animation-inview-shift));
    }
}

body:not(.bhe-state-editing)
    .bh-js-inview[data-bh-inview="true"][class*="bhf-animation-"]:not(
        .bhf-animation-noselect
    ) {
    transform: scale(1) translate3d(0, 0, 0);
    opacity: 1;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- a11y */
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* !- reduced motion */

/**
 * 1. Remove timed scrolling behaviors when motion is reduced (opinionated).
 * 2. Remove fixed background attachments when motion is reduced (opinionated).
 * 3. Remove transitions when motion is reduced (opinionated).
 * 4. Remove animations when motion is reduced (opinionated).
 */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important; /* 1 */
        background-attachment: initial !important; /* 2 */
        transition-duration: 0s !important; /* 3 */
        transition-delay: 0s !important; /* 3 */
        animation-duration: 1ms !important; /* 4 */
        animation-delay: -1ms !important; /* 4 */
        animation-iteration-count: 1 !important; /* 4 */
    }
}