/* general */
@media (min-width: 768px) {
    #logo {
        height: 150px;
        line-height: 150px;
        width: 250px;
    }
}

h2,
main.aside_content h1.big_title {
    color: #003020;
}

.de_block_gallery,
.de_block_booking_form,
#offers_page {
    display: none;
}

/* anchor */
.anchor_menu .anchors_wrap .wrap .label span {
    width: max-content;
}

.anchor_menu .anchors_wrap .wrap .label:not(:first-child):before {
    background: none;
}

/* max-content leaves the labels almost touching, so widen the breathing space
   between them: the theme's own padding is 0.5em */
@media (min-width: 992px) {
    .anchor_menu .anchors_wrap .wrap .label span {
        padding: 0 1em;
    }
}

.anchor_menu .anchors_wrap .wrap .label,
#anchors_book_wrap #anchors_book a {
    color: var(--bg);
}

#anchors_book_wrap #anchors_book a {
    background-color: #ba7b45;
}

/* main */
main.aside_content,
.main.aside_content {
    /* same gap above the title and under the paragraph */
    --content-space: 45px;
    /* featured image inset */
    --image-inset: 50px;
}

@media (min-width: 992px) {
    main.aside_content h1.big_title {
        padding-right: 100px;
    }
}

@media (max-width: 992px) {
    #main-content-1 > div > div > h1 {
        text-align: center;
    }
}

/* max-height: 500px used to cut the block: the height follows the text now */
@media (min-width: 992px) {
    main.aside_content aside,
    main.aside_content .aside,
    .main.aside_content aside,
    .main.aside_content .aside {
        height: auto;
        align-self: stretch;
        min-height: 420px;
    }

    aside .aside_wrapper,
    .aside .aside_wrapper {
        height: 100%;
        padding: var(--image-inset);
        box-sizing: border-box;
    }

    aside .aside_wrapper a,
    .aside .aside_wrapper a {
        margin: 0;
        min-height: 0;
    }

    /* centring keeps the two gaps equal at any text length */
    main.aside_content .content_wrap,
    .main.aside_content .content_wrap {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: var(--content-space) 40px;
    }
}

/* image hidden here, so the block carries both gaps; the subtitle above already
   adds 20px of its own */
@media (max-width: 991px) {
    main.aside_content,
    .main.aside_content {
        --content-space: 30px;
        padding-top: var(--content-space);
        padding-bottom: var(--content-space);
    }
}

/* empty on this page, but still reserved 1em under the paragraph */
main.aside_content .btns_wrap {
    margin-top: 0;
    margin-bottom: 0;
}

main.aside_content .btns_wrap:has(*) {
    margin-top: 1em;
}

main.aside_content h1.big_title {
    font-size: 2.5em;
    text-align: left;
    padding-bottom: 30px;
    /* the top gap comes from the content wrap now */
    padding-top: 0;
    @media (max-width: 767px) {
        font-size: 1.8em;
    }
}

@media (min-width: 992px) {
    main.aside_content .container,
    .main.aside_content .container {
        /*margin-top: 100px;*/
    }

    main.aside_content .the_content {
        max-width: 620px;
    }
}

/* button */
.btns_wrap .btnCta a {
    color: #fff;
    border-radius: 10px;
    font-size: 0.8em;
}

.btns_wrap .btnCta:hover a {
    color: var(--main);
    background-color: var(--bg);
    border: 2px solid var(--main);
    border-radius: 10px;
}

.btn {
    letter-spacing: 1px;
    transition: 0.1s !important;
}

.btns_wrap {
    margin-bottom: 1em;
}

/* responsive */
@media (min-width: 992px) {
    .slideshow_container .caption.center_center {
        left: 30%;
    }
}

@media (min-width: 992px) {
    #logo {
        margin-left: 3em;
        margin-right: auto;
    }
}

@media (min-width: 768px) {
    .slideshow_container .caption .title.big_title {
        line-height: 1.5em;
    }
}

@media (min-width: 768px) and (max-width: 992px) {
    .slideshow_container .caption .title.big_title {
        font-size: 3em;
    }
}

/* post preview */
.children_previews .grid_2 .item_wrap .content_wrap .content .subtitle {
    color: var(--secondary);
}

.children_previews .grid_2 .item_wrap .content_wrap .content .title {
    color: #003020;
}

.children_previews .grid_2 .item_wrap .thumb {
    border-radius: 10px 10px 0px 0px;
}

.children_previews .grid_2 .item_wrap .item {
    box-shadow: 5px 5px rgba(110, 139, 61, 0.1);
    border-radius: 10px;
}

/* map */
.map_section #map_content {
    background-color: #003020;
}

.map_section #map_content,
#itinerary_container #itinerary .itinerary_title a {
    color: var(--bg);
}

#itinerary_container #itinerary .field.submit a,
#itinerary_container #itinerary .field.from input {
    letter-spacing: 1px;
}

.map_section #map_content .content .title {
    font-size: 2.5em;
    line-height: 1em;
}

.map_section #map_content .content .contacts a {
    color: #ba7b45;
}

.map_section #map_content .content .contacts {
    text-align: left;
}

/* footer */
#footer .logo img {
    max-width: 400px;
    max-height: 150px;
}

#footer .footer_bottom .wrap ul.menu > li > span > a {
    color: #3b3433;
}

/* icons 1&2 */
.section_icons .wrap {
    background-color: var(--bg);
}

/* icons 2 */
#icons-list-2.section_icons .wrap .icons .item .icon {
    color: #ba7b45;
}

/* side-by-side */
@media (min-width: 992px) {
    #icons-list-2 .icons {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 60px;
        align-items: center;
    }

    /* Each item: icon | text */
    #icons-list-2 .icons > .item {
        display: grid !important;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 25px;

        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    /* Icon */
    #icons-list-2 .item .icon {
        margin: 0 !important;
        flex-shrink: 0;
    }

    /* Text */
    #icons-list-2 .item .label {
        width: auto !important;
        margin: 0 !important;
        text-align: left;
    }

    #icons-list-2 .icons > .item {
        display: grid !important;
        grid-template-columns: 100px 1fr;
        align-items: center;
        gap: 25px;
    }

    #icons-list-2 .item .icon {
        justify-self: center;
        margin: 0 !important;
    }
}

/* icons 1 */
@media (min-width: 1400px) {
    #icons-list-1.de_block_icons_list .container {
        max-width: 100%;
    }
}

#icons-list-1.section_icons .wrap .icons .item {
    display: inline-block;
    max-width: 200px;
}

#icons-list-1 .icon_title {
    font-weight: 700;
}

#icons-list-1 .icon_description {
    font-size: 0.8em;
    line-height: 0.5;
}

#icons-list-1.section_icons .wrap {
    color: #003020;
}

/* slideshow */
.slideshow_container .caption .title,
.slideshow_container .caption .subtitle {
    color: #fff;
    text-align: left;
}

#slideshow-1 .slide picture {
    position: relative;
    display: block;
}

/* Overlay */
#slideshow-1 .slide picture::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background: rgba(0, 0, 0, 0.2);
}

/* Image */
#slideshow-1 .slide picture img {
    position: relative;
    z-index: 0;
    display: block;
}

/* Keep caption above overlay */
#slideshow-1 .slide .caption {
    z-index: 2;
}

@media (max-width: 767px) {
    /* Uniform overlay works better with centred text */
    #slideshow-1 .slide picture::after {
        background: rgba(0, 0, 0, 0.2);
    }

    /* Centre caption horizontally */
    #slideshow-1 .slide .caption {
        left: 50%;
        right: auto;
        width: 90%;
        max-width: none;
        transform: translate(-50%, -50%);
        text-align: center;
        align-items: center;
        top: 60%;
    }

    #slideshow-1 .caption .title,
    #slideshow-1 .caption .subtitle {
        width: 100%;
        text-align: center;
        font-size: 2em;
        line-height: 1.5em;
    }

    #slideshow-1 .caption .subtitle {
        font-size: 1.5em;
    }
    #header {
        /*justify-content: flex-start;*/
        /*padding-left: 1em;*/
    }
    #footer .footer_bottom .wrap ul.menu > li {
        width: 100%;
    }
}

@media (max-width: 991px) {
    .anchor_menu .anchors_wrap .arrow {
        display: block !important;
        opacity: 1 !important;
        height: 30px;
        width: 30px;

        &:after,
        &:before {
            width: 11px;
        }
    }

    .arrow:hover {
        background: unset !important;
    }

    .anchor_menu .anchors_wrap .wrap .label span:empty {
        display: none;
    }

    .anchor_menu .anchors_wrap .wrap {
        width: 85%;
        margin: 0 auto;
    }

    /* the labels scroll natively here instead of through slick, which left an empty
       gap after the last one: flex-start keeps the first ones inside the scroll area */
    .anchor_menu .anchors_wrap .wrap:not(.slick-initialized) {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .anchor_menu .anchors_wrap .wrap:not(.slick-initialized)::-webkit-scrollbar {
        display: none;
    }

    .anchor_menu .anchors_wrap .wrap:not(.slick-initialized) .label {
        flex: 0 0 auto;
    }

    /* the auto margins collapse once the labels overflow, so they stay centred
       while they fit without ever pushing the first ones out of reach */
    .anchor_menu .anchors_wrap .wrap:not(.slick-initialized) .label:first-of-type {
        margin-left: auto;
    }

    .anchor_menu .anchors_wrap .wrap:not(.slick-initialized) .label:last-of-type {
        margin-right: auto;
    }

    section.section_icons {
        padding-top: 0;
    }

    p {
        text-align: center;
    }
}


#footer .footer_bottom .wrap {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
}

#additional-content-5 h3.the_subtitle {
    font-size: 1.6em;
}

/* this block's own padding made the gap under the text three times the one above */
#icons-list-2.section {
    padding-top: 0;
}

@media (min-width: 992px) {
    #icons-list-2 .wrap {
        padding-top: 20px;
    }
}

@media (max-width: 991px) {
    #icons-list-2 .wrap {
        padding-top: 0;
    }
    #logo {
        text-align: center;
    }
}

/* main content image */
/* cover cropped the photo differently at every width: contain never crops, and
   11/6 is the ratio of the file (2200x1200) - update it if the photo changes */
@media (min-width: 992px) {
    aside .aside_wrapper,
    .aside .aside_wrapper {
        display: flex;
        align-items: center;
    }

    aside .aside_wrapper a,
    .aside .aside_wrapper a {
        width: 100%;
        height: auto;
        aspect-ratio: 11 / 6;
        background-size: contain;
        background-position: center;
        background-color: transparent;
    }
}