/*
 * Garni Dornach – modern layer on top of combinedcss.css / dornach.css.
 * Same font (Rubik) and colour palette, refreshed spacing, cards, navigation and image handling.
 */

:root {
    --brown: #7e6253;
    --brown-dark: #5b443c;
    --brown-text: #6a452d;
    --brown-soft: #947c6e;
    --sand: #fbecd9;
    --sand-light: #fdf3e7;
    --sand-dark: #ead6bf;
    --taupe: #b9a295;
    --radius: 16px;
    --radius-small: 10px;
    --shadow: 0 10px 30px -12px rgba(91, 68, 60, .35), 0 2px 6px rgba(91, 68, 60, .08);
    --shadow-hover: 0 18px 40px -14px rgba(91, 68, 60, .45), 0 4px 10px rgba(91, 68, 60, .10);
    --ease: cubic-bezier(.22, .61, .36, 1);
}

html { -webkit-text-size-adjust: 100%; }
body {
    background-color: var(--sand);
    color: var(--brown-text);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
::selection { background: var(--brown); color: #fff; }

/* keyboard focus is visible again (dornach.css removed all outlines) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.card-wrapper:focus-visible {
    outline: 2px solid var(--brown) !important;
    outline-offset: 3px;
    border-radius: 6px;
}

/* ------------------------------------------------------------------ images: smooth loading */

/* placeholder tone while a photo is on its way, then a soft fade-in */
.js img.lazy { opacity: 0; transition: opacity .6s var(--ease), transform 1s var(--ease); }
.js img.lazy.is-loaded { opacity: 1; }
.hero-slider .image_wrapper, .carousel-section .carousel-inner, .activity-img-wrap, .room-card .card-img {
    background-color: var(--sand-dark);
}
img { max-width: 100%; }

/* ------------------------------------------------------------------ navigation */

.cid-qwYGTl41gN .navbar.transparent { background: transparent; }
.cid-qwYGTl41gN .navbar {
    transition: background-color .35s var(--ease), box-shadow .35s var(--ease), min-height .35s var(--ease);
}
.navcontainer {
    background-color: var(--brown);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .35);
    padding: 4px 10px;
    border-radius: 999px;
}
.navcontainer .nav-link { transition: opacity .2s; }
.navcontainer .nav-item-link:hover { transform: none; opacity: .85; }
.dropdown-item:hover { transform: none; background-color: rgba(255, 255, 255, .12) !important; }
.cid-qwYGTl41gN .dropdown-menu {
    border: 0;
    border-radius: 0 0 var(--radius-small) var(--radius-small) !important;
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, .35);
    background-color: var(--brown) !important;
}
.cid-qwYGTl41gN .navbar .nav-brand {
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35));
    transition: height .35s var(--ease);
}
/* after scrolling: solid bar */
.cid-qwYGTl41gN .navbar.is-scrolled {
    background-color: var(--brown) !important;
    box-shadow: 0 8px 24px -14px rgba(0, 0, 0, .5);
    min-height: 64px;
}
.cid-qwYGTl41gN .navbar.is-scrolled .navcontainer { background-color: transparent; box-shadow: none; }
.cid-qwYGTl41gN .navbar.is-scrolled .nav-brand { height: 3rem !important; filter: none; }

/* language flags: one item with both flags */
.lang-switch { display: flex; align-items: center; }
.lang-switch .nav-link { padding-left: .45rem !important; padding-right: .45rem !important; }
.lang-switch img.language-link { display: block; width: 20px !important; height: 20px !important; }

/* mobile menu: full-width panel, everything centred (also while it opens), equal spacing */
@media (max-width: 991px) {
    .navcontainer { background-color: transparent; box-shadow: none; padding: 0; }
    .cid-qwYGTl41gN #navbarSupportedContent.show, .cid-qwYGTl41gN #navbarSupportedContent.collapsing {
        align-self: stretch;
        margin: 10px 16px 0;
        padding: 8px 0 !important;
        background-color: var(--brown);
        border-radius: var(--radius);
        box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .5);
    }
    .cid-qwYGTl41gN #navbarSupportedContent .navbar-nav { width: 100%; text-align: center; }
    .cid-qwYGTl41gN #navbarSupportedContent .nav-item { margin: 0 !important; height: auto !important; width: auto !important; text-align: center; }
    .cid-qwYGTl41gN #navbarSupportedContent .nav-item > .nav-link {
        display: block;
        margin: 0 !important;
        padding: .7rem 1rem !important;
        line-height: 1.4;
        text-align: center;
    }
    /* closed sub-menus take no space (they used to add 20px of invisible padding) */
    .cid-qwYGTl41gN #navbarSupportedContent .dropdown > .dropdown-menu {
        display: block;
        height: auto !important;
        max-height: 0;
        margin: 0;
        padding: 0 !important;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        box-shadow: none;
        background-color: transparent !important;
        transition: max-height .35s var(--ease), opacity .25s ease, padding .35s var(--ease), visibility 0s linear .35s;
    }
    .cid-qwYGTl41gN #navbarSupportedContent .dropdown.open > .dropdown-menu {
        max-height: 24rem;
        padding: 0 0 .5rem !important;
        opacity: 1;
        visibility: visible;
        transition-delay: 0s;
    }
    .cid-qwYGTl41gN #navbarSupportedContent .dropdown-item {
        text-align: center;
        padding: .45rem 1rem !important;
        font-size: .95rem;
        opacity: .9;
    }
    .cid-qwYGTl41gN #navbarSupportedContent .dropdown.open > .dropdown-toggle { color: #fff !important; opacity: .7; }
    .cid-qwYGTl41gN #navbarSupportedContent .lang-switch { justify-content: center; gap: 1.25rem; padding: .5rem 0 .25rem; }
    .cid-qwYGTl41gN #navbarSupportedContent .lang-switch .nav-link { padding: .4rem !important; }
    .cid-qwYGTl41gN #navbarSupportedContent .lang-switch img.language-link { width: 26px !important; height: 26px !important; }
}
@media (max-width: 767px) {
    .cid-qwYGTl41gN .navbar.is-scrolled .nav-brand { height: 2.2rem !important; }
}

/* ------------------------------------------------------------------ hero */

.hero-slider { position: relative; overflow: hidden; }
.hero-img {
    display: block;
    width: 100%;
    height: 82vh;
    height: 82svh;
    min-height: 420px;
    max-height: 1000px;
    object-fit: cover;
}
.welcome-slider-phone .hero-img { height: 72vh; height: 72svh; min-height: 360px; }
/* darker top edge keeps the navigation readable, soft fade into the page below */
.hero-slider .insetshadow {
    box-shadow: none;
    background:
        linear-gradient(to bottom, rgba(0, 0, 0, .38) 0, rgba(0, 0, 0, 0) 22%),
        linear-gradient(to top, rgba(0, 0, 0, .25) 0, rgba(0, 0, 0, 0) 25%);
    pointer-events: none;
}
.hero-slider .carousel-indicators { bottom: 18px; }
.hero-slider .carousel-indicators li {
    width: 9px; height: 9px; border-radius: 50%; border: 0; margin: 0 5px;
    background-color: rgba(255, 255, 255, .55);
    transition: transform .3s var(--ease), background-color .3s;
}
.hero-slider .carousel-indicators li.active { background-color: #fff; transform: scale(1.35); }
.carousel-fade .carousel-item { transition-duration: 1.1s; }

/* ------------------------------------------------------------------ carousel arrows */

.carousel-control-prev, .carousel-control-next { opacity: 0; transition: opacity .3s var(--ease); width: 12%; }
.carousel:hover .carousel-control-prev, .carousel:hover .carousel-control-next,
.carousel-control-prev:focus-visible, .carousel-control-next:focus-visible { opacity: 1; }
@media (hover: none) { .carousel-control-prev, .carousel-control-next { opacity: .9; } }
.carousel-control {
    height: 42px !important;
    width: 42px;
    border-radius: 50%;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .35));
    transition: transform .25s var(--ease);
}
.carousel-control-prev:hover .carousel-control, .carousel-control-next:hover .carousel-control { transform: scale(1.1); }

/* ------------------------------------------------------------------ sections & typography */

.features11, .features3features3 { background-color: transparent; }
.title.display-2 { letter-spacing: -.01em; }
.subtitle { color: var(--brown-soft) !important; }

/* body text: larger, airy and limited to a comfortable line length */
.content-text.text, .block-content .text {
    font-size: 1.05rem;
    line-height: 1.75;
    text-align: left !important;
    max-width: 46rem;
    margin-left: auto !important;
    margin-right: auto !important;
}
.content-text.text b, .content-text.text strong { font-weight: bold; color: var(--brown-dark); }

hr { margin: 64px auto; max-width: 70%; }

a { color: var(--brown-text); text-underline-offset: 3px; }
a:hover { color: var(--brown-dark); }
.mbr-text a[href^="tel:"], .mbr-text a[href^="mailto:"] { color: var(--brown); text-decoration: underline; text-decoration-color: rgba(126, 98, 83, .4); }

/* house photo galleries */
.carousel-section.gallery {
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    max-width: 1110px;
}
.carousel-section.gallery .carousel-img { height: 562px; object-fit: cover; }
@media (max-width: 600px) {
    .carousel-section.gallery { border-radius: 0; box-shadow: none; }
    .carousel-section.gallery .carousel-img { height: 300px; }
}

/* ------------------------------------------------------------------ cards */

.card {
    border: 0;
    border-radius: var(--radius);
    overflow: hidden;
    background-color: #fff;
    box-shadow: var(--shadow);
    -webkit-box-shadow: var(--shadow);
    transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
/* hover lift only on cards that can be clicked (rooms, activities), not on address/contact */
.room-card:hover, .activity-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card-wrapper { display: block; height: 100%; color: inherit; text-decoration: none !important; cursor: pointer; }
.card-box { padding: 1.1rem 1.25rem 1.25rem; }
.card-title { color: var(--brown-dark); margin-bottom: .4rem; line-height: 1.3; }

/* apartments: responsive grid instead of one big card per row */
.room-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
    padding-top: 10px;
    padding-bottom: 10px;
}
.room-card { margin: 0 !important; width: auto; display: flex; flex-direction: column; }
.room-card .card-img { height: 260px; width: 100%; padding: 0 !important; position: relative; overflow: hidden; }
.room-card .zoom, .room-card .carousel, .room-card .carousel-inner, .room-card .carousel-item { height: 100%; }
.room-card .room-img { width: 100%; height: 260px; object-fit: cover; display: block; }
.room-grid .room-card .card-box { position: relative; padding: 1.15rem 1.3rem 1.3rem !important; flex: 1; }
.room-grid .room-card .card-title { font-size: 1.2rem; line-height: 1.3; margin-bottom: .45rem; }
.room-card .mbr-text { font-size: .92rem; line-height: 1.55; margin-bottom: 0; color: var(--brown-text); }
@media (max-width: 600px) {
    .room-grid { gap: 20px; padding-left: 16px !important; padding-right: 16px !important; }
    .room-card .card-img, .room-card .room-img { height: 230px; }
}

/* image zoom on hover */
.zoom img, .zoom:hover img { transition: transform .9s var(--ease), opacity .6s var(--ease); }
.room-card:hover .zoom img, .activity-card:hover .activity-img { transform: scale(1.05); }

/* activities */
.activity-container { max-width: 1240px; }
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 24px;
    padding: 0 10px;
}
.activity-card { margin: 0 !important; width: auto; }
.activity-img-wrap { height: 180px; overflow: hidden; position: relative; }
.activity-img { width: 100%; height: 180px; object-fit: cover; display: block; }
.activity-grid .activity-card .card-box { min-height: 0; padding: .95rem 1.15rem 1.1rem !important; }
.activity-card .card-title { font-size: 1.05rem; line-height: 1.35; margin-bottom: 0; }
.activity-card .mbr-text { font-size: .85rem; margin: .4rem 0 0; }
@media (max-width: 600px) {
    .activity-grid { grid-template-columns: 1fr; padding: 0 16px; gap: 18px; }
    .activity-img-wrap, .activity-img { height: 190px; }
}
.specialcarcontroltext { font-size: 1rem; }
.specialcarcontrol img { transition: transform .25s var(--ease); }
.specialcarcontrol:hover img { transform: scale(1.12); }

/* ------------------------------------------------------------------ approach & contact */

/* black transport icons tinted in the brand brown */
#approach .transport {
    border-radius: var(--radius);
    transition: background-color .3s var(--ease), transform .3s var(--ease);
    text-decoration: none;
}
#approach .transport:hover { background: rgba(126, 98, 83, .1); transform: translateY(-3px); }
#approach .transport img {
    filter: invert(39%) sepia(15%) saturate(900%) hue-rotate(338deg) brightness(90%) contrast(88%);
}
#contact .card { min-width: 240px; }
#contact .card-box { padding: 1.5rem 1.75rem; }
.footer-link { border-radius: var(--radius); transition: background-color .3s, transform .3s var(--ease); }
.footer-link:hover { background: rgba(255, 255, 255, .25); transform: translateY(-2px); }

/* ------------------------------------------------------------------ buttons, forms, dialogs */

.btn { border-radius: 999px; transition: background-color .25s, border-color .25s, transform .2s var(--ease), box-shadow .25s; }
.btn-primary { padding: .6rem 1.6rem; box-shadow: 0 6px 16px -8px rgba(91, 68, 60, .6); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 20px -10px rgba(91, 68, 60, .7); }
.btn-primary:active { transform: translateY(0); }

.form-control { border-radius: var(--radius-small); border-color: #d9c4b2; transition: border-color .2s, box-shadow .2s; }
.form-control:focus { border-color: var(--brown); box-shadow: 0 0 0 3px rgba(126, 98, 83, .18); }

.modal-backdrop.show { opacity: .55; }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .modal-backdrop.show { opacity: 1; background-color: rgba(60, 45, 38, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.modal-content { border: 0; border-radius: 20px; box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .45); overflow: hidden; }
.modal.fade .modal-dialog { transition: transform .35s var(--ease), opacity .35s var(--ease); transform: translateY(18px) scale(.985); opacity: 0; }
.modal.show .modal-dialog { transform: none; opacity: 1; }
.prev-img { border-radius: var(--radius-small); object-fit: cover; }
.tbl-pricing { border-radius: var(--radius-small); }

/* ------------------------------------------------------------------ footer */

#footer6-e a.text-white { opacity: .9; transition: opacity .2s; }
#footer6-e a.text-white:hover { opacity: 1; text-decoration: underline; }

/* ------------------------------------------------------------------ blog */

.blog-page .carousel-section { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }

/* ------------------------------------------------------------------ accessibility: less motion */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
    .room-card:hover, .activity-card:hover, .btn-primary:hover { transform: none; }
}

/* the category arrows of the activities section are always visible */
.carousel-control-prev.specialcarcontrol, .carousel-control-next.specialcarcontrol { opacity: 1; width: auto; }

/* the theme adds 2rem padding above card titles and below the card link */
.activity-grid .card-wrapper, .room-grid .card-wrapper { padding: 0 !important; display: flex; flex-direction: column; }
.activity-grid .card-title, .room-grid .card-title { padding-top: 0 !important; }

/* dialog close button: round button in the dialog's top-right corner. "sticky" keeps it inside
   the dialog at the top and lets it follow along while the dialog is scrolled. */
.bootbox .modal-content { overflow: hidden; overflow: clip; }   /* clip (unlike hidden) keeps sticky working */
.bootbox .modal-body { padding-top: 14px; }
.bootbox .bootbox-close-button {
    position: -webkit-sticky;
    position: sticky;
    top: 14px !important;
    right: auto !important;
    float: none !important;
    display: block;
    margin: 0 0 -44px auto;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50%;
    background-color: var(--brown) !important;
    color: #fff !important;
    text-shadow: none;
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    opacity: 1 !important;
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
    transition: background-color .2s, transform .2s var(--ease);
    z-index: 1060;
}
@media (max-width: 600px) { .bootbox .bootbox-close-button { margin-right: 10px; top: 10px !important; } }
.bootbox .bootbox-close-button:hover { background-color: var(--brown-dark) !important; transform: rotate(90deg); }

/* ------------------------------------------------------------------ rounded hover highlights */

/* menu entries: rounded highlight that sits inside the menu instead of touching its edges */
.cid-qwYGTl41gN .dropdown-menu .dropdown-item {
    margin: 2px .45rem !important;
    width: auto;
    border-radius: var(--radius-small);
    transition: background-color .2s var(--ease), color .2s;
}
.cid-qwYGTl41gN .dropdown-menu .dropdown-item:hover,
.cid-qwYGTl41gN .dropdown-menu .dropdown-item:focus-visible {
    background-color: rgba(255, 255, 255, .14) !important;
    color: #fff !important;
}

/* booking request: room rows and the privacy toggle */
#request_room .form-group { gap: 8px; align-items: stretch; }
#request_room .room-select { border-radius: var(--radius-small); }
.accordion, .expander {
    border-radius: var(--radius-small);
    transition: background-color .2s var(--ease);
}
.accordion:hover, .accordion.active { background-color: #c2a493; }
.expander { padding-right: 10px; }
.expander:hover { background-color: rgba(194, 164, 147, .45); text-decoration: none; }
#request_room .panel { border-radius: var(--radius-small); }

/* desktop drop-down menus: solid brown, unfold downward from the bar instead of appearing instantly */
@media (min-width: 992px) {
    .cid-qwYGTl41gN .navbar-nav .dropdown > .dropdown-menu {
        display: block !important;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        /* the clip reveals the menu from top to bottom; the extra -40px leaves room for the shadow */
        clip-path: inset(0 -40px 100% -40px);
        transition: clip-path .32s var(--ease), transform .32s var(--ease), opacity .2s ease, visibility 0s linear .32s;
    }
    .cid-qwYGTl41gN .navbar-nav .dropdown:hover > .dropdown-menu,
    .cid-qwYGTl41gN .navbar-nav .dropdown.open > .dropdown-menu,
    .cid-qwYGTl41gN .navbar-nav .dropdown:focus-within > .dropdown-menu {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        clip-path: inset(0 -40px -60px -40px);
        transition-delay: 0s;
    }
}

/* ------------------------------------------------------------------ accessibility */

/* "skip to content" link: invisible until reached with the keyboard */
.skip-link {
    position: absolute;
    left: 16px;
    top: -60px;
    z-index: 2000;
    padding: .6rem 1.1rem;
    border-radius: 999px;
    background: var(--brown-dark);
    color: #fff !important;
    text-decoration: none;
    transition: top .2s var(--ease);
}
.skip-link:focus { top: 12px; }

/* contrast: required-field star and the darker price-table rows (WCAG AA) */
.fb-required { color: #b00000 !important; }
.tbl-pricing > tbody > tr:nth-child(odd) { color: #3e2c26; }
.tbl-pricing > tbody > tr:nth-child(odd) td { color: #3e2c26; }

/* drop-down buttons in the menu are reachable with the keyboard now */
.cid-qwYGTl41gN [data-toggle="dropdown-submenu"] { cursor: pointer; }

/* ------------------------------------------------------------------ sub pages (activities, apartments, legal) */

.subpage-main { padding-top: 110px; }
@media (max-width: 767px) { .subpage-main { padding-top: 80px; } }
.subpage .cid-qwYGTl41gN .navbar { background-color: var(--brown) !important; }
.subpage .navcontainer { box-shadow: none; }

.breadcrumbs ol {
    display: flex; flex-wrap: wrap; gap: .25rem .5rem;
    list-style: none; margin: 0 auto 1.5rem; padding: 0 1rem;
    font-size: .9rem; color: var(--brown-soft);
}
.breadcrumbs li { color: var(--brown-text) !important; }
.breadcrumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--brown-soft); }
.breadcrumbs a { color: var(--brown-text); text-decoration: underline; text-decoration-color: rgba(126, 98, 83, .35); }
.breadcrumbs [aria-current] { color: var(--brown-dark); }

.subpage-article { max-width: 960px; margin: 0 auto; }
.subpage-header { text-align: center; margin-bottom: 1.5rem; }
.subpage-kicker {
    display: inline-block; margin: 0 0 .6rem; padding: .25rem .8rem; border-radius: 999px;
    background: rgba(126, 98, 83, .12); color: var(--brown-dark); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase;
}
.subpage-figure { margin: 0 auto 2rem; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: var(--sand-dark); }
.subpage-img { display: block; width: 100%; max-height: 560px; object-fit: cover; }
.subpage-text { margin-bottom: 2rem; }
.subpage-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1rem 0 3rem; }
.btn-secondary-outline {
    border: 1px solid var(--brown); color: var(--brown-dark) !important; background: transparent;
    padding: .6rem 1.6rem; font-size: 1.1em;
}
.btn-secondary-outline:hover { background: rgba(126, 98, 83, .1); }
.subpage-room .features3features3 { padding-top: 0; }
.subpage-room .align-left { margin-top: 0 !important; }

.related { margin-bottom: 3rem; }
.related-title { font-size: 1.8rem !important; margin-bottom: 1.5rem; }
.related-links { list-style: none; padding: 0; max-width: 46rem; margin: 0 auto; }
.related-links li { padding: .8rem 1rem; border-bottom: 1px solid rgba(126, 98, 83, .2); text-align: left; }
.related-links a { font-size: 1.1rem; color: var(--brown-dark); }
.related-sub { display: block; font-size: .9rem; color: var(--brown-text); margin-top: .2rem; }
.legal-page { padding-bottom: 2rem; }
/* red markers/messages in the booking form (some come from CMS texts with inline colours) */
#bookingrequest span[style*="color: red"], #bookingrequest .invalid-feedback, #bookingrequest .feedback-room { color: #b00000 !important; }