@font-face {
    font-family: 'Labrada';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url(Labrada-ExtraBold.woff2) format('woff2');
}

@font-face {
    font-family: 'Labrada';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url(Labrada-Medium.woff2) format('woff2');
}

:root {
    --color-white: white;
    --color-lighter: #F8F3F2;
    --color-light: #F1E6E4;
    --color-medium: #80694D;
    --color-dark: #241714;
    --color-black: black;
    --color-accent-bright: #C3F910;
    --color-accent-muted: #003459;
    --color-accent-muted-lighter: #006BB8;
    --color-danger: #D7263D;
    --color-shadow: rgba(0, 0, 0, .2);
    --border-width: 2px;
    --border-radius: 5px;
    --min-overall-padding: calc((100vw - 1200px) / 2);
    --transition-settings: .12s ease-in-out;
}

html {
    font-family: 'Labrada', serif;
    font-size: 20px;
    line-height: 1.3;
    display: flex;
    justify-content: center;
    background: var(--color-white);
    scroll-behavior: smooth;
}

/* @media (prefers-reduced-motion) {
    * {
        transition: none !important;
    }
} */

p {
    margin: .5em 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    line-height: 1.1;
    margin: .6rem 0;
}

h1 {
    font-size: 3em;
}

h1 + .subtitle {
    font-size: 1.5em;
    font-weight: bold;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.5em;
}

a, .hoverable {
    color: var(--color-accent-muted);
    transition: color var(--transition-settings);
}

a:hover, .hoverable:hover {
    color: var(--color-accent-muted-lighter);
}

svg {
    fill: currentColor;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -.125em;
}

.center  {
    text-align: center;
}

.image {
    border-radius: 1rem;
    background-size: cover;
}

/* FORMS */

label {
    font-weight: bold;
    margin: .6em 0 .2em;
}

label + label {
    margin-top: 0;
}

label.validation-error {
    font-size: .9em;
    font-weight: initial;
    background-color: var(--color-danger);
    color: var(--color-white);
    padding: .25em .5em;
    border-radius: var(--border-radius);
}


input, select, a.button {
    outline: solid transparent var(--border-width);
    border: none;
    margin-bottom: .1em;
    padding: 0 .4em .2em;
    line-height: 1.5;
    border: solid var(--color-shadow) var(--border-width);
    border-radius: var(--border-radius);
    transition: all var(--transition-settings);
}

input:focus, select:focus, a.button:focus {
    outline: solid var(--color-black) var(--border-width);
}

input[type="submit"], a.button {
    background-color: var(--color-accent-bright);
    color: var(--color-black);
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    letter-spacing: .1em;
    box-shadow: 0 .25rem 0 var(--color-black), 0 .4rem .5rem var(--color-shadow);
    padding: 0 .8em .2em;
    margin: 1.5rem 0;
    cursor: pointer;
}

input[type="submit"]:hover, a.button:hover {
    background-color: var(--color-accent-bright);
}

input[type="submit"]:active, a.button:active {
    box-shadow: 0 0 0 var(--color-black), 0 0 0 -0.1rem var(--color-shadow);
    transform: translateY(.25rem);
}

a.button {
    display: inline-block;
}

@keyframes submit-loading {
    from {
        box-shadow: 0 .25rem 0 var(--color-black), 0 .4rem .5rem var(--color-shadow), inset var(--color-shadow) 0 0 0 0;
    }
    to {
        box-shadow: 0 .25rem 0 var(--color-black), 0 .4rem .5rem var(--color-shadow), inset var(--color-shadow) 0 0 0 1em;
    }
}

.htmx-request input[type="submit"] {
    animation: submit-loading .9s ease-in-out infinite alternate;
}

p.success {
    background: var(--color-accent-bright);
    padding: .4em .8em .6em;
    border-radius: var(--border-radius);
    border: solid var(--border-width) var(--color-shadow);
}

/* HEADER AND FOOTER */

body > header, body > footer {
    padding: 0.5rem max(var(--min-overall-padding), 1rem);
    background: var(--color-white);
    box-shadow: 0 0 1rem var(--color-shadow);
}

/* HEADER */

body > header {
    z-index: 10;
    min-height: 2rem;
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    font-weight: bold;
}

body > header .logo {
    display: flex;
    align-items: center;
    flex-grow: 0;
    font-size: 1.5em;
}

body > header .logo a {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    gap: .25rem;
}

body > header .logo img {
    height: 1.25em;
}

header nav {
    display: flex;
    flex-wrap: nowrap;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    gap: .1em 0;
}

header nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: right;
    align-items: center;
    text-align: right;
    gap: .4em 1em;
}

header a {
    display: inline-block;
    text-decoration: underline solid;
}

header nav #menu-toggle {
    display: none;
}

header nav #menu-toggle + label {
    margin: 0;
    display: none;
    cursor: pointer;
}

@media (max-width: 50rem) {
    header nav #menu-toggle + label {
        display: flex;
        align-items: center;
    }

    header nav ul {
        overflow: hidden;
        max-height: 12em;
        transition: max-height var(--transition-settings);
    }

    header nav #menu-toggle:not(:checked) ~ ul {
        max-height: 0;
    }
    
    header nav #menu-toggle:not(:checked) + label .menu-close {
        display: none;
    }

    header nav #menu-toggle:checked + label .menu-bars {
        display: none;
    }
}

:target {
    scroll-margin-top: 3rem;
}

/* BODY */

body {
    width: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
}

/* SECTIONS */

body > section {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    color: var(--color-dark);
    background: var(--color-light);
    padding: 2.5rem max(var(--min-overall-padding), 2rem);
}

body > section:nth-child(even) {
    background: var(--color-lighter);
}

#wstep {
    flex-flow: row wrap;
    align-items: stretch;
    gap: 1rem 1.5rem;
}

#wstep .text {
    width: 30rem;
    flex-shrink: 1;
    flex-grow: 2;
}

#wstep .with-button {
    text-align: center;
}

#wstep .with-button .button {
    font-size: 1.5rem;
}

#wstep .image {
    flex-grow: 5;
    min-width: 15rem;
    min-height: 15rem;
    background-image: url(mdf-wall.jpg);
    background-position: center;
}

/*#wstep .images {
     --animation-duration: 20s;
    flex-grow: 5;
    display: flex;
    flex-flow: row wrap;
    flex-basis: min-content;
    gap: .5rem;
    border-radius: 1rem;
    overflow: hidden;
    min-width: 16rem;
    min-height: 15rem;
    animation: images var(--animation-duration) step-end 0s infinite;
}

@keyframes images {
    0%   {flex-direction: row-reverse;}
    16%  {flex-direction: row;}
    83% {flex-direction: row-reverse;}
}

#wstep .images .image {
    min-width: 13rem;
    min-height: 8rem;
    flex-grow: 0;
    flex-grow: 1;
    border-radius: 0;
    background-position: center;
    animation-name: image;
    animation-timing-function: cubic-bezier(.5,0,.15,1);
    animation-duration: var(--animation-duration);
    animation-iteration-count: infinite;
}

#wstep .images .image1 {
    background-image: url(chipboard-panels.jpg);
    background-position: center 10%;
    animation-delay: calc(var(--animation-duration) * -1 / 3);
}

#wstep .images .image2 {
    background-image: url(wood-edges.jpg);
    animation-delay: 0s;
}

#wstep .images .image3 {
    background-image: url(mdf-wall.jpg);
    animation-delay: calc(var(--animation-duration) / 3);
}

@keyframes image {
    0%       {flex-grow: 0;}
    25%      {flex-grow: 0;}
    33.333%  {flex-grow: 1;}
    58.333%  {flex-grow: 1;}
    66.666%  {flex-grow: 0;}
    100%     {flex-grow: 0;}
} */

#jak-to-dziala {
    gap: 1rem;
}

#jak-to-dziala .descriptions-and-diagram {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-shrink: 1;
}

#jak-to-dziala .descriptions {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: .5rem 1.5rem;
}

#jak-to-dziala .descriptions article {
    max-width: 25rem;
}

.icon-with-desc {
    width: 12em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.icon-with-desc svg {
    fill: currentColor;
}

.diagram {
    justify-content: center;
    text-align: center;
    font-size: 1.4em;
    z-index: 1;
}

.diagram .top-row, .diagram .bottom-row {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
}

.diagram .top-row {
    gap: 2em;
}

.diagram .icon-with-desc {
    width: 12em;
}

.diagram h3 {
    margin: 0;
    font-size: 1em;
}

.diagram .icon-with-desc .line {
    width: 50%;
    height: 3em;
    margin-top: .25em;
    --border-width: .25em;
    border-bottom: solid var(--color-dark) var(--border-width);
    z-index: -2;
}

.diagram .icon-with-desc.left .line {
    border-left: solid var(--color-dark) var(--border-width);
    border-radius: 0 0 0 var(--border-radius);
    align-self: self-end;
}

.diagram .icon-with-desc.right .line {
    border-right: solid var(--color-dark) var(--border-width);
    border-radius: 0 0 var(--border-radius) 0;
    align-self: self-start;
}

.diagram .bottom-row {
    margin-top: -3.5em;
}

.diagram .bottom-row .icon-with-desc {
    width: 8em;
    height: 8em;
    border-radius: 50%;
    background: var(--color-lighter);
    z-index: -1;
}

#korzysci {
    flex-flow: row-reverse wrap;
    gap: 0 2rem;
}

#korzysci .text {
    flex-grow: 1;
    margin-bottom: 1rem;
}

#korzysci header {
    margin-bottom: 1rem;
}

#korzysci ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: 1.5rem;
}

#korzysci ul li {
    padding: .35em 0;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* #korzysci ul li:nth-child(even) {
    flex-direction: row-reverse;
} */

#korzysci ul li:not(:last-child) {
    border-bottom: solid var(--color-light) 4px;
}

#korzysci ul li svg {
    width: 2em;
}

#korzysci .image {
    background-image: url(mdf-artsy.jpg);
    background-position: center 25%;
    flex-grow: 5;
    min-width: 15rem;
    min-height: 15rem;
}

#moduly-dodatkowe .text {
    text-align: center;
}

#moduly-dodatkowe .icons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
}

#moduly-dodatkowe .icon-with-desc {
    width: 14rem;
}

#moduly-dodatkowe .icon-with-desc .title {
    font-size: 1.5em;
}

#kontakt {
    flex-flow: row-reverse wrap;
    justify-content: flex-end;
    gap: 0 2rem;
}

#kontakt .form {
    width: 20rem;
    flex-shrink: 1;
    flex-grow: 2;
}

#kontakt .form form {
    display: flex;
    flex-direction: column;
}

#kontakt .image {
    background-image: url(carpenter-with-tablet.jpg);
    background-position: center 10%;
    flex-grow: 10;
    min-width: 15rem;
    min-height: 15rem;
}

/* TEST ENVIRONMENT */

div[style*="z-index:999999"] {
    width: initial !important;
}