/*
Theme Name: Pension Strmilov
*/

html {
    scroll-behavior: smooth;
}
[id] {
    scroll-margin-top: 4em;
}
body {
    background-color: var(--wp--preset--color--offwhite);
}
.layout-centre, .block-editor-block-list__layout.wp-block-post-content {
    display: grid;
    grid-template-columns: 
        [body-start] minmax(2em, 1fr)
        [wide-start] 80px
        [content-start] minmax(400px, 800px) [content-end]
        80px [wide-end]
        minmax(2em, 1fr) [body-end];
}
.layout-centre > *, .block-editor-block-list__layout.wp-block-post-content > * {
    grid-column-start: content-start;
    grid-column-end: content-end;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100%;
}
.whole {
    grid-column: body-start / body-end !important;
}
.wide {
    grid-column: wide-start / wide-end;
}
.partly-wide {
    grid-column: content-start / wide-end;
}
.side-bar {
    grid-column: body-start / body-end;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 80px;
    background-color: var(--wp--preset--color--background);
}
.inverted {
    background-color: var(--wp--preset--color--offwhite);
    color: var(--wp--preset--color--dark);
    padding: 64px 0;
}
.inverted main a {
    color: var(--wp--preset--color--background);
}
.background, .editor-styles-wrapper {
    background-color: var(--wp--preset--color--background);
}

.wp-block-separator {
    display: block;
    border: 0;
    height: 48px;
    background: url("images/Divider.svg");
    background-repeat: repeat;

    width: 100%;
    grid-column: body-start / body-end !important;

    margin: 96px 0;
}
.footer-divider {
    display: block;
    margin-top: 128px;
    margin-bottom: 64px;

    height: 112px;
    background-image: url("images/footerDivider-enormous.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: center;
}
.building {
    margin-top: 180px;
    margin-bottom: 200px;
}
.building::before {
    content: "";
    height: 180px;
    width: 100%;
    grid-column-start: body-start;
    grid-column-end: body-end;

    background-image: url("images/buildingPlanTop-enormous.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: calc(50% + 208px);
    position: absolute;
    top: -180px;
}
.building::after {
    content: "";
    height: 180px;
    width: 100%;
    grid-column-start: body-start;
    grid-column-end: body-end;

    background-image: url("images/buildingPlanBottom-enormous.svg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0%;
    position: absolute;
    bottom: -180px;
}
.decorated {
    /* border: transparent solid;
    border-width: 32px 0;
    border-image: url("images/Decoration.svg") repeat 100% 0; */
    margin: 32px 0;
    margin-block: 32px !important;
    position: relative;
}
.decorated::before, .decorated::after {
    content: "";
    display: block;
    position: absolute;
    height: 32px;
    top: -32px;
    width: 100%;
    background-image: url("images/Decoration.svg");
    background-repeat: round;
    border-right: 4px solid var(--wp--preset--color--background);
    box-sizing: border-box;
}
.decorated::after {
    top: unset;
    bottom: -32px;
}

.wp-block-spacer {
    margin-block: 0;
}
.has-fit-text {
    line-height: 1;
}
.leader-target {
    float: right;
    position: relative;
}
.no-decoration, .no-decoration a {
	text-decoration: none !important;
}

.cb-carousel-block {
    width: 100%;
    --wp--custom--carousel-block--navigation-color: var(--wp--preset--color--background);
    --wp--custom--carousel-block--navigation-size: 1.8em;
    --wp--custom--carousel-block--navigation-sides-offset: 0.4em;
}
.cb-slide img {
    aspect-ratio: 3 / 2;
   	background-color: hsl(from var(--wp--preset--color--background) h s l);
}

.wp-block-cloudcatch-light-modal-block {
    background-color: var(--wp--preset--color--offwhite);
}
form {
    display: flex;
    flex-direction: column;
    font-family: var(--wp--preset--font-family--standard);
}
form p {
    margin: 0;
    margin-block: 0 !important;
}
input, textarea {
    background-color: var(--wp--preset--color--offwhite);
	border: none;
	border-radius: 0; /* iOS reset */
    padding: 0.5em 0;
    color: #000;
    box-sizing: border-box;
    font-size: inherit;
    font-family: var(--wp--preset--font-family--standard);
}
input:focus, textarea:focus {
    outline: none;
}
input[type="text"], input[type="email"], textarea {
    width: 100%;
    resize: vertical;
}
input[type="submit"] {
    font-weight: 500;
}
.wpcf7 form .wpcf7-response-output {
    margin: 0;
    margin-top: 0.2em;
    color: #000;
}

@media (min-width: 696px) {
    .larger-on-desktop {
        font-size: 1.12em;
    }
}
@media (max-width: 696px) {
    body {
        font-size: 0.92rem;
    }
    .layout-centre {
        display: grid;
        grid-template-columns: 
            [body-start] minmax(2em, 1fr)
            [wide-start] 0px
            [content-start] minmax(320px, 800px) [content-end]
            0px [wide-end]
            minmax(2em, 1fr) [body-end];
    }
    .side-bar {
        width: 1em;
    }
    .inverted {
        padding: 32px 0;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    .desktop-only {
        display: none;
    }

    .building {
        margin-top: 100px;
        margin-bottom: 150px;
    }
    .building::before {
        height: 100px;
        top: -99px;
        background-position-x: center;
    }
    .building::after {
        height: 100px;
        bottom: -99px;
    }
    .footer-divider {
        height: 80px;
    }    
}