/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* Fix for modal z-index conflict with tawk.to */
.modal {
    z-index: 9999 !important;
}

.modal-backdrop {
    z-index: 9998 !important;
}

/* Fix: modal inside body-inner appears below backdrop - lift body-inner when modal is open */
.body-inner:has(.modal.show) {
    z-index: 9999 !important;
    position: relative;
}

/* Remove low z-index on modal-dialog that can cause stacking issues */
.modal-dialog {
    z-index: 1 !important;
}

/* Ensure tawk.to widget doesn't overlap with modals */
#tawkto-container {
    z-index: 9997 !important;
}

/* Video lightbox - large but fits viewport, no scrolling */
.mfp-video-fullscreen.mfp-wrap {
    overflow: hidden;
}
.mfp-video-fullscreen.mfp-wrap .mfp-container {
    padding: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder {
    padding: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder .mfp-content {
    width: min(90vw, 160vh);
    max-width: 1400px;
    line-height: 0;
}
.mfp-video-fullscreen .mfp-iframe-holder .mfp-close {
    top: 10px;
    right: 10px;
    color: #fff;
    z-index: 9999;
}
.mfp-video-fullscreen .mfp-iframe-scaler {
    width: 100%;
    padding-top: 56.25%;
    height: 0;
    overflow: hidden;
}
.mfp-video-fullscreen .mfp-iframe-scaler iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Menu hover color - blue (override dark header's gray #c1c3ce) */
#mainMenu nav > ul > li.hover-active > a,
#mainMenu nav > ul > li.hover-active > span,
#mainMenu nav > ul > li.current > a,
#mainMenu nav > ul > li.current > span,
#mainMenu nav > ul > li:hover > a,
#mainMenu nav > ul > li:hover > span,
#mainMenu nav > ul > li:focus > a,
#mainMenu nav > ul > li:focus > span,
#header.dark #mainMenu nav > ul > li.hover-active > a,
#header.dark #mainMenu nav > ul > li.hover-active > span,
#header.dark #mainMenu nav > ul > li.current > a,
#header.dark #mainMenu nav > ul > li.current > span,
#header.dark #mainMenu nav > ul > li:hover > a,
#header.dark #mainMenu nav > ul > li:hover > span,
#header.dark #mainMenu nav > ul > li:focus > a,
#header.dark #mainMenu nav > ul > li:focus > span,
#header.dark.submenu-light #mainMenu nav > ul > li:hover > a,
#header.dark.submenu-light #mainMenu nav > ul > li:hover > span,
#header.dark.submenu-light #mainMenu nav > ul > li.current > a,
#header.dark.submenu-light #mainMenu nav > ul > li.current > span {
    color: #2250fc !important;
}
#mainMenu nav > ul > li .dropdown-menu > li > a:hover,
#mainMenu nav > ul > li .dropdown-menu > li > span:hover,
#mainMenu nav > ul > li .dropdown-menu > li:hover > a,
#mainMenu nav > ul > li .dropdown-menu > li:hover > span {
    color: #2250fc !important;
}
#mainMenu.menu-lines nav > ul > li:hover > a:after,
#mainMenu.menu-lines nav > ul > li.current > a:after {
    background-color: #2250fc !important;
}
#mainMenu.menu-hover-background nav > ul > li:hover,
#mainMenu.menu-hover-background nav > ul > li.current {
    background-color: #2250fc !important;
}
#mainMenu.menu-rounded nav > ul > li:hover > a,
#mainMenu.menu-rounded nav > ul > li.current > a {
    background-color: #2250fc !important;
}
#mainMenu.menu-outline nav > ul > li:hover > a,
#mainMenu.menu-outline nav > ul > li.current > a {
    color: #2250fc !important;
    border-color: #2250fc !important;
}

/* Hero slideshow - text shadow for readability on all slides (inline styles get stripped by slider JS) */
#slider.inspiro-slider .slide .slide-captions h2 {
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.8), 0 0 10px rgba(0, 0, 0, 0.6), 1px 1px 2px rgba(0, 0, 0, 0.9);
}

/* Reserve spot form - section headers */
.reserve-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #e0e0e0;
}
.reserve-section:last-of-type {
    border-bottom: none;
}
.reserve-section-title {
    color: #c9a227;
    font-weight: 600;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    font-size: 1.1rem;
}