:root {
    --max-content-width: 1600px;
    --max-text-width: 560px;
    --text-v-spacing: 2px;
    --text-h-spacing: 2px;
    --font-weight-regular: 400;
    --font-weight-bold: 600;

    --pitch-black-01: #ffffff; /* light */
    --pitch-black-02: #f7f5f2; /* light */
    --pitch-black-03: #efebe6; /* light */
    --pitch-black-04: #e8e1d9; /* light */
    --pitch-black-05: #e0d7cc; /* light */
    --pitch-black-06: #d8cdc0; /* light */
    --pitch-black-07: #d0c3b3; /* light */
    --pitch-black-08: #c9b9a6; /* light */
    --pitch-black-09: #c1af9a; /* light */
    --pitch-black-10: #b9a58d; /* light */
    --pitch-black-11: #b19b81;
    --pitch-black-12: #aa9174;
    --pitch-black-13: #a28867;
    --pitch-black-14: #987d5d;
    --pitch-black-15: #8b7355;
    --pitch-black-16: #7e684e;
    --pitch-black-17: #725e46;
    --pitch-black-18: #65543e;
    --pitch-black-19: #594936;
    --pitch-black-20: #4c3f2f;
    --pitch-black-21: #3f3427;
    --pitch-black-22: #332a1f;
    --pitch-black-23: #261f17;
    --pitch-black-24: #17130e; /* main */
    --pitch-black-25: #0d0a08;

    --charcoal-blue-01: #ffffff; /* light */
    --charcoal-blue-02: #f3f5f7; /* light */
    --charcoal-blue-03: #e7ebee; /* light */
    --charcoal-blue-04: #dbe1e6; /* light */
    --charcoal-blue-05: #cfd7dd; /* light */
    --charcoal-blue-06: #c3cdd5; /* light */
    --charcoal-blue-07: #b7c3cc; /* light */
    --charcoal-blue-08: #abb9c4; /* light */
    --charcoal-blue-09: #a0afbb; /* light */
    --charcoal-blue-10: #94a5b3;
    --charcoal-blue-11: #889baa;
    --charcoal-blue-12: #7c91a2;
    --charcoal-blue-13: #708799;
    --charcoal-blue-14: #667d8f;
    --charcoal-blue-15: #5d7383;
    --charcoal-blue-16: #556877;
    --charcoal-blue-17: #4c5e6b;
    --charcoal-blue-18: #445460; /* main */
    --charcoal-blue-19: #3b4954;
    --charcoal-blue-20: #333f48;
    --charcoal-blue-21: #2a343c;
    --charcoal-blue-22: #222a30;
    --charcoal-blue-23: #191f24;
    --charcoal-blue-24: #111518;
    --charcoal-blue-25: #080a0c;

    --golden-bronze-01: #ffffff; /* light */
    --golden-bronze-02: #faf7ef; /* light */
    --golden-bronze-03: #f6eee0; /* light */
    --golden-bronze-04: #f1e6d0; /* light */
    --golden-bronze-05: #ecdec0; /* light */
    --golden-bronze-06: #e8d5b0; /* light */
    --golden-bronze-07: #e3cda1; /* light */
    --golden-bronze-08: #dec491; /* light */
    --golden-bronze-09: #d9bc81; /* light */
    --golden-bronze-10: #d5b472; /* light */
    --golden-bronze-11: #d0ab62; /* light */
    --golden-bronze-12: #cba352;
    --golden-bronze-13: #c69a42; /* main */
    --golden-bronze-14: #bc9038;
    --golden-bronze-15: #ad8434;
    --golden-bronze-16: #9d782f;
    --golden-bronze-17: #8d6c2a;
    --golden-bronze-18: #7e6026;
    --golden-bronze-19: #6e5421;
    --golden-bronze-20: #5e481c;
    --golden-bronze-21: #4f3c17;
    --golden-bronze-22: #3f3013;
    --golden-bronze-23: #2f240e;
    --golden-bronze-24: #1f1809;
    --golden-bronze-25: #100c05;

    --coffee-bean-01: #ffffff; /* light */
    --coffee-bean-02: #f8f4f2; /* light */
    --coffee-bean-03: #f1eae5; /* light */
    --coffee-bean-04: #e9dfd8; /* light */
    --coffee-bean-05: #e2d5ca; /* light */
    --coffee-bean-06: #dbcabd; /* light */
    --coffee-bean-07: #d4bfb0; /* light */
    --coffee-bean-08: #ccb5a3; /* light */
    --coffee-bean-09: #c5aa96; /* light */
    --coffee-bean-10: #bea089;
    --coffee-bean-11: #b7957b;
    --coffee-bean-12: #af8a6e;
    --coffee-bean-13: #a88061;
    --coffee-bean-14: #9e7657;
    --coffee-bean-15: #916c50;
    --coffee-bean-16: #846248;
    --coffee-bean-17: #785942; /* main */
    --coffee-bean-18: #694e3a;
    --coffee-bean-19: #5c4533;
    --coffee-bean-20: #4f3b2b;
    --coffee-bean-21: #423124;
    --coffee-bean-22: #35271d;
    --coffee-bean-23: #271d16;
    --coffee-bean-24: #1a140e;
    --coffee-bean-25: #0d0a07;

    --dark-coffee-01: #ffffff; /* light */
    --dark-coffee-02: #f7f5f2; /* light */
    --dark-coffee-03: #efeae6; /* light */
    --dark-coffee-04: #e7e0d9; /* light */
    --dark-coffee-05: #e0d6cd; /* light */
    --dark-coffee-06: #d8cbc0; /* light */
    --dark-coffee-07: #d0c1b4; /* light */
    --dark-coffee-08: #c8b7a7; /* light */
    --dark-coffee-09: #c0ac9b; /* light */
    --dark-coffee-10: #b8a28e;
    --dark-coffee-11: #b09782;
    --dark-coffee-12: #a98d75;
    --dark-coffee-13: #a18368;
    --dark-coffee-14: #97795e;
    --dark-coffee-15: #8a6e56;
    --dark-coffee-16: #7d644f;
    --dark-coffee-17: #715a47;
    --dark-coffee-18: #64503f;
    --dark-coffee-19: #584637;
    --dark-coffee-20: #4b3c2f;
    --dark-coffee-21: #3f3227;
    --dark-coffee-22: #2d241c; /* main */
    --dark-coffee-23: #261e18;
    --dark-coffee-24: #191410;
    --dark-coffee-25: #0d0a08;

    --pitch-black: var(--pitch-black-24);
    --charcoal-blue: var(--charcoal-blue-18);
    --golden-bronze: var(--golden-bronze-13);
    --coffee-bean: var(--coffee-bean-17);
    --dark-coffee: var(--dark-coffee-22);

    --charcoal-blue-light: var(--charcoal-blue-16);
    --charcoal-blue-dark: var(--charcoal-blue-20);
    --golden-bronze-light: var(--golden-bronze-10);
    --golden-bronze-dark: var(--golden-bronze-15);

    --color-text-primary: var(--pitch-black);
    --color-text-secondary: var(--dark-coffee);
    --color-text-inverted-primary: var(--pitch-black-02);
    --color-text-inverted-secondary: var(--dark-coffee-06);
    --color-text-link: var(--golden-bronze);
    --color-text-link-hover: var(--golden-bronze-light);
    --color-text-description: var(--charcoal-blue-15);

    --color-background-primary: var(--charcoal-blue-01);
    --color-background-secondary: var(--charcoal-blue-03);
}

@supports (interpolate-size: allow-keywords) {
    :root {
        interpolate-size: allow-keywords;
    }

    ::details-content {
        transition: height 0.5s ease, content-visibility 0.5s ease allow-discrete;
        height: 0;
        overflow: clip;
    }

    [open]::details-content {
        height: auto;
    }
}

.placeholder {
    border: 2px solid black;
    min-height: 1lh;
    min-width: 1lh;
    background: linear-gradient(
        to bottom right,
        transparent calc(50% - 1.5px),
        black 50%,
        transparent calc(50% + 1.5px)
    ),
    linear-gradient(
        to bottom left,
        transparent calc(50% - 1.5px),
        black 50%,
        transparent calc(50% + 1.5px)
    );
}

:is(h1, h2, h3, h4, p, li) {
    max-width: var(--max-text-width);
    text-wrap: pretty;
    text-wrap-style: avoid-orphans;

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
}

:is(h1, h2, h3, h4) {
    font-weight: var(--font-weight-bold);
}

:is(p, li) {
    font-weight: var(--font-weight-regular);
}

:is(h1, h2, h3, h4, p) {
    margin-block: 0;
    word-spacing: var(--text-h-spacing);
}

h1 {
    font-size: 64px;
    line-height: calc(72px + 2 * var(--text-v-spacing));
}

h2 {
    font-size: 28px;
    line-height: calc(36px + 2 * var(--text-v-spacing));
}

h3 {
    font-size: 20px;
    line-height: calc(28px + var(--text-v-spacing));
}

h4 {
    font-size: 16px;
    line-height: calc(24px + var(--text-v-spacing));
}

p {
    font-size: 16px;
    line-height: calc(24px + var(--text-v-spacing));
}

:is(h1, h2, h3, h4, p):has(+ h1, + h2, + h3, + h4, + p) {
    margin-block: 1rem;
}

html {
    position: absolute;
    inset: 0;
    overflow: hidden;
    scroll-behavior: smooth;
}

body {
    position: relative;
    margin: 0;
    color: var(--color-text-primary);
    background-color: var(--charcoal-blue-24);

    height: 100%;
    overflow-y: auto;
    scrollbar-color: var(--color-background-secondary) var(--charcoal-blue-24);
    scrollbar-gutter: stable;

    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: var(--font-weight-regular);
    font-style: normal;
    font-variation-settings: "wdth" 100;

    & > * {
        max-width: var(--max-content-width);
        margin: 0 auto;
    }
}

a {
    text-decoration: none;
    color: currentColor;
}

button {
    text-align: center !important;
    white-space: nowrap !important;
    transition: 100ms background-color, 300ms color, 150ms box-shadow !important;

    &:focus {
        outline: 0 !important;
    }

    &:focus-visible {
        box-shadow: 0 0 2px 2px var(--color-background-primary), 0 0 2px 4px var(--golden-bronze) !important;
    }
}

header {
    position: sticky;
    top: 0;
    z-index: 1;
    --current-background-color: rgba(0 0 0 / 0.5); /*/ var(--color-background-primary); */
    background-color: var(--current-background-color);
    /*background-color: rgba(255 255 255 / 0.7);*/
    display: flex;
    flex-direction: row;
    justify-content: center;

    & > nav {
        width: 100%;
        max-width: calc(var(--max-text-width) + 4rem);
        padding-inline: 2rem;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        @media (max-width: 768px) {
            flex-direction: column;
        }

        & > div {
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: var(--font-weight-bold);
            color: var(--color-text-inverted-primary);
            text-shadow: 2px 2px 1px var(--charcoal-blue-24);

            @media (max-width: 768px) {
                padding: 0.5rem 1rem;
            }
        }

        & > ul {
            list-style-type: none;
            margin: 0;
            padding: 0.5rem;
            display: flex;
            flex-direction: row;
            /*justify-content: end;*/
            gap: 0.5rem;
            width: 100%;
            justify-content: space-evenly;

            @media (max-width: 768px) {
                align-self: center;
            }

            & > li {
                display: flex;

                @media (max-width: 768px) {
                    flex-direction: row;
                }

                & > a {
                    height: 32px;
                    flex: 1;
                    border-radius: 0.5rem;
                    display: inline-grid;
                    align-items: center;
                    padding: 1rem 2rem 0.75rem;
                    font-weight: var(--font-weight-bold);
                    text-align: center;
                    white-space: nowrap;
                    color: var(--color-text-primary);
                    transition: 100ms background-color, 300ms color, 150ms box-shadow;
                    --webkit-backdrop-filter: blur(10px) brightness(1.4);
                    backdrop-filter: blur(10px) brightness(1.2);
                    --current-background-color: rgba(255 255 255 / 0.3);
                    background-color: var(--current-background-color);

                    &:hover, &.active {
                        --webkit-backdrop-filter: blur(10px) brightness(1.4);
                        backdrop-filter: blur(10px) brightness(1.2);
                        background: var(--charcoal-blue-03);
                        color: var(--color-text-primary);
                    }

                    &:focus {
                        outline: 0;
                    }

                    &:focus-visible {
                        box-shadow: 0 0 2px 2px rgba(0 0 0 / 0.05), 0 0 2px 4px var(--golden-bronze);
                    }
                }
            }
        }
    }
}

main {
    --current-background-color: var(--color-background-primary);
    background-color: var(--current-background-color);

    & > article {
        background-color: var(--current-background-color);
        max-width: calc(var(--max-text-width) + 4rem);
        margin: 0 auto;
        padding: 2rem;

        & section {
            margin-block-start: 1rem;

            & :is(h1, h2, h3, h4) {
                margin-block-start: 1rem;
            }

            &:not(:first-of-type) {
                & :is(h1, h2, h3, h4) {
                    margin-block-start: 2rem;
                }
            }

            &:not(:last-of-type) {
                margin-block-end: 1rem;
            }
        }

        & ul {
            max-width: var(--max-text-width);
        }

        & :is(ul, ol) > li {
            margin-block: 0.5rem;

            &::marker {
                color: var(--charcoal-blue-20);
            }
        }

        & :is(h1, h2, h3, h4) {
            color: var(--charcoal-blue-20);
            text-shadow: 2px 2px 1px var(--charcoal-blue-03);
            /*color: var(--charcoal-blue);*/

            &:first-child {
                margin-block-start: 0;
            }

            &:last-child {
                margin-block-end: 0;
            }
        }

        & :is(h1, h2, h3, h4, p, ul) {
            /*margin-inline: auto;*/
        }

        & a {
            text-decoration-line: underline;
            transition: 300ms color, 300ms text-underline-offset, 300ms text-decoration-color;
            text-underline-offset: var(--text-v-spacing);
            color: var(--color-text-link);

            &:is(:hover,:focus-visible) {
                text-decoration-color: transparent;
                text-underline-offset: 3px;
                color: var(--color-text-link-hover);
            }

            &:focus {
                outline: 0;
            }

            &:focus-visible {
                box-shadow: 0 0 0 2px var(--current-background-color), 0 0 2px 4px var(--golden-bronze-dark);
                border-radius: 4px;
            }
        }
    }
}


section:not(:first-of-type):has(> details) {
    margin-block-start: 1rem;

    & :is(h1, h2, h3, h4) {
        margin-block-start: 2rem;
    }
}

details {
    &:has(h1, h2, h3, h4) {
        display: block;
        max-width: var(--max-text-width);
        margin-block-start: 2rem;
        /*margin-inline: auto;*/
    }

    summary {
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        width: 100%;

        &:focus {
            outline: 0;
        }

        &:focus-visible::before {
            box-shadow: 0 0 0 2px var(--current-background-color), 0 0 2px 4px var(--golden-bronze-dark);
            border-radius: 4px;
        }

        &::marker {
            content: "";
        }

        &:is(:hover,:focus-visible)::before {
            text-decoration-color: transparent;
            text-underline-offset: 3px;
            color: var(--color-text-link-hover);
        }

        &::after {
            content: "⏷ ";
            flex: 0;
            margin-inline-start: 2rem;
            color: var(--color-text-link);
        }

        &::before {
            content: attr(data-marker-open);
            order: 1;
            margin-inline-start: 0.5ch;
            color: var(--color-text-link);
            text-decoration-line: underline;
            transition: 300ms color, 300ms text-underline-offset, 300ms text-decoration-color;
        }

        & > h1, h2, h3, h4 {
            width: 100%;
            margin: 0 !important;
            display: inline-block;
        }

    }

    &[open] {
        summary {
            &::after {
                content: "⏶ ";
            }

            &::before {
                content: attr(data-marker-close);
                color: var(--color-text-link);
            }
        }

    }
}

.image {
    width: 100%;
}

@keyframes parallax-person-warszawa {
    from {
        background-position: top 1365px center;
    }
    to {
        background-position: top calc(1365px / 4 * 3) center;
    }
}

@keyframes parallax-person-garwolin {
    from {
        background-position: top 1315px center;
    }
    to {
        background-position: top calc(1315px / 4 * 3) center;
    }
}

img.about {
    max-width: var(--max-content-width);
    width: 100%;
    height: 600px;
    content-visibility: hidden;
    background-repeat: repeat-y;

    &.about-warszawa {
        background-image: url(/img/ATudek_002.jpg);
        animation: parallax-person-warszawa linear 1ms;
        @supports (animation-timeline: scroll()) {
            animation-timeline: scroll();
        }
        @supports not (animation-timeline: scroll()) {
            background-position: top 1365px center;
        }

        @media (max-width: 768px) {
            background-position-x: calc(50% - 220px) !important;
        }
    }

    &.about-garwolin {
        background-image: url(/img/ATudek_005.jpg);
        animation: parallax-person-garwolin linear 1ms;
        @supports (animation-timeline: scroll()) {
            animation-timeline: scroll();
        }
        @supports not (animation-timeline: scroll()) {
            background-position: top 1315px center;
        }
        background-position-x: calc(50% + 220px) !important;

        @media (max-width: 768px) {
            background-position-x: calc(50% + 30px) !important;
        }
    }

    &.about-online {
        background-image: url(/img/ATudek_006.jpg);
    }

}

@keyframes parallax-warszawa {
    from {
        background-position: top calc(1280px / 4 * 1) center;
    }
    to {
        background-position: top calc(1280px / 4 * 3) center;
    }
}

@keyframes parallax-garwolin {
    from {
        background-position: top calc(1280px / 4 * 1) center;
    }
    to {
        background-position: top calc(1280px / 4 * 3) center;
    }
}

img.practice {
    width: 100%;
    height: 600px;
    content-visibility: hidden;

    &.practice-warszawa {
        background: url(/img/warszawa-2.jpeg) repeat-y;
        animation: parallax-warszawa linear 1ms;
        @supports (animation-timeline: scroll()) {
            animation-timeline: scroll();
        }
        @supports not (animation-timeline: scroll()) {
            background-position: top calc(1280px / 4 * 3) center;
        }
    }

    &.practice-garwolin {
        background: url(/img/warszawa-1.jpeg) repeat-y;
        animation: parallax-garwolin linear 1ms;
        @supports (animation-timeline: scroll()) {
            animation-timeline: scroll();
        }
        @supports not (animation-timeline: scroll()) {
            background-position: top calc(1280px / 4 * 3) center;
        }
    }
}

.card {
    position: absolute;
    top: 20rem;
    left: calc(max(50% - 30rem, 2rem));
    color: var(--color-text-inverted-primary);
    text-shadow: 4px 4px 2px var(--color-text-secondary);

    & > h1, & > h2 {
        margin: 0;
    }

    @media (max-width: 768px) {
        max-width: calc(var(--max-text-width) + 4rem);
        margin: 0 auto;
        padding: 2rem;
        position: static;
        color: var(--charcoal-blue-20);
        text-shadow: 2px 2px 1px var(--charcoal-blue-03);
    }

}

:where(article) + img:has(+ article) {
    margin-block: 2rem;
}

.name {
    font-size: 4rem;
}

.profession {
    font-size: 2rem;
}

.details {
    display: inline-block;
    font-size: 12px;
    line-height: calc(16px + var(--text-v-spacing));
    color: var(--color-text-description);
}

.tp-widget.tp-widget {
    background: transparent !important;
    border-radius: unset !important;
    box-shadow: none !important;
    max-width: var(--max-text-width) !important;
    grid-template-columns: 1fr max-content;
    column-gap: 20px !important;
}

.tp-widget__top {
    display: none;
}

.tp-widget-overflow-hidden.tp-widget-overflow-hidden {
    overflow: visible !important;
}

.tp-widget__select.tp-widget__select,
.tp-widget__calendar-title.tp-widget__calendar-title,
.tp-widget__calendar-header.tp-widget__calendar-header,
.tp-widget__calendar-hour-container.tp-widget__calendar-hour-container {
    margin-inline: 0 !important;
}

.tp-widget-select__dropdown.tp-widget-select__dropdown {
    overflow: hidden !important;
}

.tp-widget-select__label.tp-widget-select__label,
.tp-widget__calendar-title.tp-widget__calendar-title,
.tp-widget__empty-link.tp-widget__empty-link,
.tp-widget-select__dropdown-item-subtitle.tp-widget-select__dropdown-item-subtitle,
.tp-widget__calendar-header-days-day-span.tp-widget__calendar-header-days-day-span,
.tp-widget-select__selected-item-subtitle.tp-widget-select__selected-item-subtitle {
    font-family: "Noto Sans", sans-serif !important;
    font-optical-sizing: auto !important;
    font-style: normal !important;
    font-variation-settings: "wdth" 100 !important;
}

.tp-widget__empty-link.tp-widget__empty-link {
    text-decoration-line: underline !important;
    transition: 300ms color, 300ms text-underline-offset, 300ms text-decoration-color;
    text-underline-offset: var(--text-v-spacing) !important;
    color: var(--color-text-link) !important;

    &:is(:hover,:focus-visible) {
        text-decoration-color: transparent !important;
        text-underline-offset: 3px !important;
        color: var(--color-text-link-hover) !important;
    }

    &:focus {
        outline: 0 !important;
    }

    &:focus-visible {
        box-shadow: 0 0 0 2px var(--current-background-color), 0 0 2px 4px var(--golden-bronze-dark) !important;
        border-radius: 4px !important;
    }
}

.tp-widget-select__dropdown-item-subtitle.tp-widget-select__dropdown-item-subtitle,
.tp-widget__calendar-header-days-day-span.tp-widget__calendar-header-days-day-span,
.tp-widget-select__selected-item-subtitle.tp-widget-select__selected-item-subtitle,
.tp-widget__empty-text.tp-widget__empty-text {
    color: var(--color-text-description) !important;
}

.tp-widget-select__label.tp-widget-select__label,
.tp-widget__calendar-title.tp-widget__calendar-title {
    font-size: 20px !important;
    line-height: calc(28px + var(--text-v-spacing)) !important;

    color: var(--charcoal-blue-20) !important;
    text-shadow: 2px 2px 1px var(--charcoal-blue-03) !important;
    margin-block: 1rem 0 !important;
}

.tp-widget-select__dropdown-button.tp-widget-select__dropdown-button {
    margin-block: 0.5rem !important;
}

.tp-widget__calendar {
    min-width: 310px;
}

.tp-widget__calendar-hour-container.tp-widget__calendar-hour-container {
    width: 100% !important;
    grid-template-columns: 30px 66px 66px 66px 66px 30px !important
}

.tp-widget__calendar-hour-container-day-container-hour-div.tp-widget__calendar-hour-container-day-container-hour-div {
    padding: 1.5rem 1rem !important;
}

.tp-widget__calendar-hour-container-day-container-hour--selected-span.tp-widget__calendar-hour-container-day-container-hour--selected-span {
    width: 74px !important;
    height: 56px !important;
}

.tp-widget__calendar-header-button.tp-widget__calendar-header-button {
    justify-self: center;

    &:focus {
        outline: 0;
    }

    &:focus-visible::before {
        box-shadow: 0 0 0 2px var(--current-background-color), 0 0 2px 4px var(--golden-bronze-dark) !important;
    }
}

.tp-widget__calendar-header-days.tp-widget__calendar-header-days {
    justify-content: space-evenly !important;
    padding-inline: 5px !important;
}

.tp-widget__button-wrapper.tp-widget__button-wrapper {
    padding-inline: 0 !important;
    --current-background-color: var(--color-background-primary);
}

.tp-widget__button-wrapper-button.tp-widget__button-wrapper-button {
    height: 60px !important;
}

.tp-widget-button.tp-widget-button, .tp-widget-button-variant.tp-widget-button-variant, .tp-widget-simple__link.tp-widget-simple__link, .tp-widget__button-wrapper-button.tp-widget__button-wrapper-button {
    &:focus {
        outline: 0;
    }

    &:focus-visible::before {
        box-shadow: 0 0 0 2px var(--current-background-color), 0 0 2px 4px var(--golden-bronze-dark) !important;
    }
}