/* ==========================================================================
   Hotel Rembrandt overrides.

   Loaded after theme.css. Presentation only — no markup or structure changes.
   ========================================================================== */

:root {
    --rb-card-img-height: 240px;
    --rb-room-card-img-height: 380px;
    --rb-gallery-img-height: 260px;
    --rb-hero-zoom-duration: 6s;
}

/* --------------------------------------------------------------------------
   1. Background images cover their container.

   theme.css writes `background-size: "cover"` and `background-attachment:
   "fixed"` with quotes. Quoted keywords are invalid CSS, so the browser drops
   those declarations and every background fell back to `auto`. Restore the
   intended behaviour here rather than editing the vendor file.
   -------------------------------------------------------------------------- */
.image-wrapper,
.image-wrapper.bg-full,
.image-wrapper.bg-cover {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: scroll;
}

.image-wrapper.bg-auto {
    background-size: auto;
}

/* --------------------------------------------------------------------------
   2. White text anywhere the background is dark.
   -------------------------------------------------------------------------- */
[data-bs-theme="dark"],
[data-bs-theme="dark"] h1,
[data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3,
[data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5,
[data-bs-theme="dark"] h6,
[data-bs-theme="dark"] p,
[data-bs-theme="dark"] li,
[data-bs-theme="dark"] span,
[data-bs-theme="dark"] small,
[data-bs-theme="dark"] strong,
[data-bs-theme="dark"] em,
[data-bs-theme="dark"] cite,
[data-bs-theme="dark"] blockquote,
[data-bs-theme="dark"] .text-body,
[data-bs-theme="dark"] .text-body-emphasis,
[data-bs-theme="dark"] .text-body-secondary,
[data-bs-theme="dark"] .text-body-tertiary,
[data-bs-theme="dark"] .text-secondary,
[data-bs-theme="dark"] .h-sub-font,
[data-bs-theme="dark"] .h-special-font,
[data-bs-theme="dark"] .breadcrumb-item,
[data-bs-theme="dark"] .breadcrumb-item.active,
[data-bs-theme="dark"] .blockquote-footer,
[data-bs-theme="dark"] a:not(.btn) {
    color: #fff;
}

[data-bs-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: #fff;
}

/* Links keep their hover colour. */
[data-bs-theme="dark"] a:not(.btn):hover,
[data-bs-theme="dark"] a:not(.btn):focus {
    color: var(--bs-primary);
}

/* Dark panels that do not carry data-bs-theming. */
.bg-primary,
.bg-primary h1,
.bg-primary h2,
.bg-primary h3,
.bg-primary h4,
.bg-primary h5,
.bg-primary h6,
.bg-primary p,
.bg-primary span,
.bg-primary small,
.bg-primary .text-body-emphasis,
.bg-primary .h-sub-font,
.text-bg-primary,
.text-bg-primary span,
.text-bg-primary strong,
.text-bg-dark,
.text-bg-dark span,
.text-bg-dark .card-title {
    color: #fff;
}

/* Text sitting on top of an image. */
.card-img-overlay,
.card-img-overlay h1,
.card-img-overlay h2,
.card-img-overlay h3,
.card-img-overlay h4,
.card-img-overlay h5,
.card-img-overlay h6,
.card-img-overlay p,
.card-img-overlay span,
.card-img-overlay small,
.card-img-overlay strong,
.card-img-overlay .card-title,
.card-img-overlay .card-text,
.card-img-overlay a:not(.btn) {
    color: #fff;
}

/* Buttons. */
.btn-primary,
.btn-primary span,
.btn-primary i,
.btn-primary:hover,
.btn-primary:hover span,
.btn-primary:hover i,
.btn-outline-light,
.btn-outline-light span,
.btn-outline-light i {
    color: #fff;
}

.card-img-overlay .btn-light,
.card-img-overlay .btn-light span,
.card-img-overlay .btn-light i {
    color: var(--bs-dark);
}

/* --------------------------------------------------------------------------
   3. Cards and gallery images: equal height, images cropped to cover.
   -------------------------------------------------------------------------- */
.card-img,
.card-img-top,
.card-img-bottom {
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Equal height inside sliders. */
.swiper-wrapper {
    align-items: stretch;
}

.swiper-slide {
    height: auto;
}

.swiper-slide > .card,
.swiper-slide > article.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.swiper-slide > .card > .card-body,
.swiper-slide > article.card > .card-body {
    flex: 1 1 auto;
}

/* Equal height inside plain grids. */
#offers .row > [class*="col-"] > .card,
#offers .row > [class*="col-"] > article.card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#offers .row > [class*="col-"] > .card > .card-body,
#offers .row > [class*="col-"] > article.card > .card-body {
    flex: 1 1 auto;
}

/* Facilities tiles (home and accommodation).
   The tiles carry their own bottom margin, but once they stretch to fill the
   column that margin no longer separates the grid rows — move the spacing to
   the row gutter so the gaps stay even. */
#facilities .row > [class*="col-"] > .mb-7,
#facilities .row > [class*="col-"] > .mb-7 > .border {
    height: 100%;
}

#facilities .row > [class*="col-"] > .mb-7 {
    margin-bottom: 0 !important;
}

#facilities .row {
    row-gap: 1.75rem;
}

/* Card image heights per context. */
#offers .card-img-top,
#services .card-img-top,
#news .card-img-top,
#otherPost .card-img-top,
#related .card-img-top {
    height: var(--rb-card-img-height);
}

/* Accommodation room cards. Scoped to the grid so the home page's
   .room-slide (which sizes its own images) is left alone. */
#rooms .row > [class*="col-"] > .card.card-overlay-bottom {
    height: 100%;
}

#rooms .row > [class*="col-"] > .card.card-overlay-bottom > figure {
    height: 100%;
    margin-bottom: 0;
}

#rooms .row > [class*="col-"] > .card.card-overlay-bottom > figure > .card-img {
    height: 100%;
    min-height: var(--rb-room-card-img-height);
    -o-object-fit: cover;
    object-fit: cover;
}

/* Photo galleries. */
#gallery .row > [class*="col-"] > a > figure,
#gallery .row > [class*="col-"] > a > figure > img {
    height: var(--rb-gallery-img-height);
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Room / dining / spa photo sliders. */
.room-photo-slider-2 .swiper-slide figure,
.room-photo-slider-2 .swiper-slide figure img,
.spa-photo-slider .swiper-slide figure,
.spa-photo-slider .swiper-slide figure img {
    height: var(--rb-card-img-height);
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

/* Reviews slides. */
.client-say-slider .swiper-slide > .d-md-flex {
    height: 100%;
}

/* --------------------------------------------------------------------------
   4. Hero slider: cover image plus a slow zoom between slides.
   -------------------------------------------------------------------------- */
#heroCarousel .carousel-item {
    overflow: hidden;
}

#heroCarousel .carousel-item .image-wrapper {
    transform: scale(1);
    will-change: transform;
}

#heroCarousel .carousel-item.active .image-wrapper {
    animation: rbHeroZoom var(--rb-hero-zoom-duration) ease-out forwards;
}

@keyframes rbHeroZoom {
    from {
        transform: scale(1);
    }
    to {
        transform: scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    #heroCarousel .carousel-item.active .image-wrapper {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   5. Home room slider: collapsed titles read vertically, upright on hover.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    .room-slide .room-slide-item .card-title {
        transform-origin: left bottom;
        transition: transform 0.35s ease-in-out, font-size 0.35s ease-in-out;
    }

    .room-slide .room-slide-item:not(.active) .card-img-overlay {
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .room-slide .room-slide-item:not(.active) .card-title {
        position: absolute;
        left: var(--bs-room-slide-item-content-padding-collapse);
        bottom: var(--bs-room-slide-item-content-padding-collapse);
        width: auto;
        margin: 0;
        text-align: left;
        white-space: nowrap;
        transform: rotate(-90deg) translateY(-0.25rem);
    }

    .room-slide .room-slide-item.active .card-title {
        transform: rotate(0deg);
    }
}

/* --------------------------------------------------------------------------
   6. Footer.
   -------------------------------------------------------------------------- */
#footer .footer-brand-logo {
    display: block;
    height: auto;
    max-height: 110px;
    width: auto;
    margin-bottom: 1rem;
}

#footer .footer-bottom {
    text-align: center;
}

#footer .footer-bottom .list-inline {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. Tab panes: optional image beside the content.
   -------------------------------------------------------------------------- */
.tab-pane-figure {
    height: 100%;
    overflow: hidden;
}

.tab-pane-figure img {
    width: 100%;
    height: 100%;
    min-height: 220px;
    -o-object-fit: cover;
    object-fit: cover;
}


/* --------------------------------------------------------------------------
   8. Mobile burger.

   The navbar toggler was missing from the converted header, so below xl the
   offcanvas menu had nothing to open it. Only the toggler is styled here — the
   brand keeps its original appearance.

   Bootstrap bakes the stroke colour into the toggler icon's background-image,
   so `color` cannot recolour it. Swap the SVG per header state instead:
   white while the header sits transparent over the hero, dark once the page is
   scrolled and the header turns solid light.
   -------------------------------------------------------------------------- */
#header .header-navbar .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.95%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    transition: background-image 0.35s ease-in-out;
}

#header .header-navbar.header-navbar-sticky .navbar-toggler .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2824,24,24,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

#header .header-navbar .navbar-toggler {
    border-color: transparent;
    box-shadow: none;
    position: relative;
    z-index: 3;
}

/* --------------------------------------------------------------------------
   9. Hero caption and the Book Now menu CTA.
   -------------------------------------------------------------------------- */

/* The global sub-heading colour is a muted gold that reads poorly on the hero
   image, so the hero's own sub-heading stays white. */
#hero .hero-caption p,
#hero .hero-caption .h-sub-font {
    color: #fff;
}

/* Hero button: the label turns primary on hover. Section 2 forces the inner
   span/i white, so the hover state has to restate them or the label would sit
   white-on-white once Bootstrap fills the button. */
#hero .hero-caption .btn-outline-light:hover,
#hero .hero-caption .btn-outline-light:focus,
#hero .hero-caption .btn-outline-light:hover span,
#hero .hero-caption .btn-outline-light:focus span,
#hero .hero-caption .btn-outline-light:hover i,
#hero .hero-caption .btn-outline-light:focus i {
    color: var(--bs-primary);
}

/* "Book Now" navigation item, desktop navbar and mobile offcanvas alike. */
#header .header-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link,
#header .header-navbar.header-navbar-sticky .navbar-nav > .nav-item.menu-item-book > .nav-link,
.offcanvas-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link {
    background-color: var(--bs-primary);
    color: #fff;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

#header .header-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link:hover,
#header .header-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link:focus,
#header .header-navbar.header-navbar-sticky .navbar-nav > .nav-item.menu-item-book > .nav-link:hover,
#header .header-navbar.header-navbar-sticky .navbar-nav > .nav-item.menu-item-book > .nav-link:focus,
.offcanvas-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link:hover,
.offcanvas-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link:focus {
    background-color: var(--bs-primary);
    color: #fff;
    opacity: 0.9;
}

/* In the offcanvas the items are full width, so keep the CTA a self-contained
   block rather than a full-bleed bar. */
@media (max-width: 1199.98px) {
    .offcanvas-navbar .navbar-nav > .nav-item.menu-item-book {
        margin-top: 0.75rem;
    }

    .offcanvas-navbar .navbar-nav > .nav-item.menu-item-book > .nav-link {
        display: inline-block;
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   10. Image slider beside tab content.
   -------------------------------------------------------------------------- */
.tab-photo-slider {
    overflow: hidden;
}

.tab-photo-slider .swiper-slide .tab-pane-figure,
.tab-photo-slider .swiper-slide .tab-pane-figure img {
    height: 300px;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.tab-photo-nav .tab-photo-prev,
.tab-photo-nav .tab-photo-next {
    cursor: pointer;
}