/*Theme Name: Bass Lake Theme

Theme URI: Bass Lake Theme - www.dinokanlic.com
Author: Dino Kanlic
Author URI: dinokanlic@gmail.com
Version: 1.1
Description: Bass Lake Theme.
*/


:root {
  --title-fonts: "Playfair Display", serif;
  --text-fonts: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --small-title: "Mrs Saint Delafield", cursive;
  --icon-fonts: "template-icon", sans-serif;

  --primary-color: #134074;
  --secondary-color: #0A1D3B;
  --highlight-color: #B00901;

  --text-color: #000000;
  --light-color: #EFF2F4;
  --dark-color: #1F1F1F;

  --bg-alt-3: #0A1D3B;
  --bg-alt-2: #EFF2F4;
  --bg-alt-1: #F0F1F2;
  --body-bg:  #ffffff;

  --bg-header:   #0A1D3B;
  --header-color:#ffffff;
  --bg-footer:   #0A1D3B;
  --footer-color:#ffffff;
}

/* Text selection */
::-moz-selection { color: #fff; background: #134074; }
::selection      { color: #fff; background: #134074; }

/* Base type uses your variables */
html {
  font-family: var(--text-fonts);
  box-sizing: border-box !important;
  color: var(--text-color);
  font-size: 18px;
  line-height: 30.6px; /* keep if you like this rhythm */
}


body {
  font-family: var(--text-fonts);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5 !important;
  color: var(--text-color);
  background: var(--body-bg);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

body p {
    margin-bottom: 0;
    font-family: var(--text-fonts);
    box-sizing: border-box !important;
    color: var(--text-color);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 30.6px !important;
    margin: 0 0 20px 0;
}
.toggler-icon {
    background: #fff !important;
}
/* Headings use Playfair Display */
.h1, .h2, .h3, .h4, .h5, .h6,
h1,  h2,  h3,  h4,  h5,  h6 {
  font-family: var(--title-fonts);
  font-weight: 600;
  line-height: 1;
  color: var(--secondary-color);
  margin-bottom: 20px;
}

h1 { margin-bottom: unset; }
.h1-content {
    margin: 0;
    text-align: center;
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
}
h2 { text-transform: uppercase; font-weight: 700; }
h2, .uk-h2 {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: capitalize;
    color: var(--primary-color);
}
h3 { font-weight: 700; }
h6 { margin-top: 4em; }

select { cursor: pointer; }

/* Optional accent class for the script font */
.small-title {
  font-family: var(--small-title);
  color: var(--highlight-color);
}

body.wp-singular.page-template-default h1 {
    color: var(--primary-color);
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 30px;
}

body.wp-singular.page-template-default h2 {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: capitalize;
    color: var(--primary-color);
}

body.wp-singular.page-template-default h5,
body.wp-singular.page-template-default .uk-h5 {
    font-family: var(--text-fonts);
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3.2px;
    text-transform: uppercase;
}

select {

    cursor: pointer;

}


/* BUTTONS */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 15px 35.07px;
    opacity: 1;
    transition: all .4s;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
    font-family: var(--text-fonts);
    border-radius: 50px;
    border: 1px solid #fff;
}
a.btn.reservation-btn {
    color: #fff;
    margin-left: 1em;
}
a.header-phone {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--body-bg);
    font-family: var(--text-fonts);
    border-bottom: 1px solid transparent;
    position: relative;
}
.uk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 15px 35.07px;
    opacity: 1;
    transition: all .4s;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
    font-family: var(--text-fonts);
    border-radius: 50px;
    border: 1px solid #fff;
}
.uk-button-primary {
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
.uk-button:not(:disabled) {
    cursor: pointer;
}
.uk-button-primary:hover,
.uk-button-primary:focus,
.uk-button-primary:focus-visible {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
    text-decoration: none;
}
.mx-auto a.uk-button.uk-button-primary {
    margin: 0 auto;
}
/* NAV STYLE */
.navbar-light .navbar-nav .nav-link {
    font-size: 16px;
    font-style: normal;
    line-height: 100%;
    color: var(--body-bg);
    font-family: var(--text-fonts);
    font-weight: 400;
    text-transform: capitalize;
    margin-right: 20px;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    padding-left: 1px !important;
    padding-right: 1px !important;
}

 .navbar-light .navbar-nav .nav-link:hover,
 .navbar-light .navbar-nav a.nav-link.active {
    color: var(--body-bg);
    text-decoration: none;
    border-bottom: 1px solid #fff;
}
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: #134074;
}
.dropdown-item:focus, .dropdown-item:hover {
    color: #fff;
    text-decoration: none;
    background-color: #134074;
}



/* Base sticky header */
.navigation-bg.sticky-top{
  
  height: 104px;
  display: flex;
  top: 0;
  z-index: 105;
  width: 100%;

  /* smooth transition + no CLS from border appearing */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* On scroll */
.navigation-bg.sticky-top.is-fixed{
  background: var(--primary-color); /* #134074 */
  border-bottom-color: rgba(255,255,255,.2);
  /* optional depth */
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}


.header-logo{
  max-height: 72px;
  height: auto;
  width: auto;
}
.navbar-light .navbar-nav .nav-link:focus {
    color: #fff !important;
    text-decoration: underline;
}

/* ALERT BAR */
#site-alert-bar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 99999;
  display: none;
  padding: 10px 0;
}

#site-alert-bar.is-visible{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
  background: #134074;
  color: #fff;
  display: block;
}

#site-alert-bar .site-alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

#site-alert-bar .site-alert-message{
  color: #fff;
}

#site-alert-bar .site-alert-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 5px 10px;
    font-size: 14px;
    background: #ffcd2a;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
    font-weight: bold;
}





/* HAMBURGER MENU */



.navbar-toggler {

    width: 20px;
    height: 20px;
    position: relative;
    transition: .5s ease-in-out;

}



.navbar-toggler,
.navbar-toggler:focus,
.navbar-toggler:active,
.navbar-toggler-icon:focus {

    outline: none;
    box-shadow: none;
    border: 0;

}



.navbar-toggler span {

    margin: 0;
    padding: 0;

}



.toggler-icon {

    display: block;
    position: absolute;
    height: 1.5px;
    width: 100%;
    background: #151515;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: .25s ease-in-out;

}



.middle-bar {

    margin-top: 0px;

}


iframe#canary-chat-widget {
    bottom: 5em !important;
}


/* when navigation is clicked */



.navbar-toggler .top-bar {

    margin-top: 0px;
    transform: rotate(135deg);

}



.navbar-toggler .middle-bar {

    opacity: 0;
    filter: alpha(opacity=0);

}



.navbar-toggler .bottom-bar {

    margin-top: 0px;
    transform: rotate(-135deg);

}





/* State when the navbar is collapsed */



.navbar-toggler.collapsed .top-bar {

    margin-top: -20px;
    transform: rotate(0deg);

}



.navbar-toggler.collapsed .middle-bar {

    opacity: 1;
    filter: alpha(opacity=100);

}



.navbar-toggler.collapsed .bottom-bar {

    margin-top: 20px;
    transform: rotate(0deg);

}

/* NAVIGATION WITH IMAGES */

/* MEGA submenu — desktop only */
@media (min-width: 992px) {

  /* Make top-level dropdown parent not constrain the absolute child */
  .navbar .navbar-nav > .dropdown {
    position: static;
  }

  /* Stretch the dropdown to the full navbar/container width */
  .navbar .dropdown-menu.mega-dropdown {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    min-width: 100% !important;
    border: 0;
    border-radius: 0;
    transform: none !important; /* ignore Popper translations */
    z-index: 1000;
    position: fixed !important;
    top: auto;
  }

  /* Tile grid */
  .submenu-grid {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -0.5rem;
  }

  .submenu-grid .submenu-tile {
    flex: 0 0 20%;     /* 5 per row on desktop */
    max-width: 20%;
    padding: 0 0.5rem;
    text-decoration: none;
  }

  /* Equal-height image area as background */
  .submenu-grid .submenu-thumb {
    width: 100%;
    height: 200px;                 /* fixed height for all images */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
  }

  /* Label */
  .submenu-grid .submenu-label {
    font-weight: 600;
    line-height: 1.2;
    font-size: 1.5em;
    display: block;
    margin-top: 0.5rem;
  }
}



.dropdown-menu {
        margin-top: 1em;
        background: var(--primary-color);
}
.dropdown-menu a {
        color: #fff;
}
a.submenu-tile:hover {
    background: #fff;
    color: #000;
}

}

/* Smaller breakpoints: 3/2/1 columns for nice wrap */
@media (max-width: 991.98px) { /* mobile/tablet */
  .submenu-grid .submenu-tile { flex: 0 0 100%; max-width: 100%; }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  .submenu-grid .submenu-tile { flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .submenu-grid .submenu-tile { flex: 0 0 33.3333%; max-width: 33.3333%; }
}



body.page-template-homepage {

    background: #FFFFFF;

}



body.page-template-contact {

    background: #f6f6f6;

}



.white-clipping-bg {
    position: absolute;
    background-color: #FFFFFF;
    clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
    position: absolute;
    background: #fff;
    width: 9999px;
    height: 748px;
    left: -1000px;
    top: 0px;
    -ms-transform: rotate(5deg);
    -webkit-transform: rotate(5deg);
    transform: rotate(5deg);
    z-index: 0;
    overflow: hidden;
}
.skip-content-area {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    margin-top: -7%;
}
/* HOMEPAGE */
/* ================================
   HERO: Vimeo Progressive MP4 / Iframe
   ================================ */

html,
body {
  height: 100%;
}

#home-hero.home-hero-banner {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
}

#home-hero.home-hero-banner::after {
  position: absolute;
  content: "";
  background: url(/wp-content/themes/BassLakeHotels/images/bannerpattern.webp);
  width: 100%;
  height: 122px;
  bottom: -30px;
  left: 0;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: 3;
}

/* Fluid wrapper should also stretch full height */
#home-hero .container-fluid {
  min-height: 100vh;
}

/* Inner containers keep structure but also stretch */
#home-hero .hero-image {
  position: relative;
  width: 100%;
  margin: 0 auto;
  min-height: 100vh;
  overflow: hidden;
}

#home-hero .hero-image-wrap.home-video__block {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-position: center center;
  background-size: cover;
}

/* Native video fills viewport and covers */
#home-hero .home-video__block .video-swap {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center center;

  display: block;
  z-index: 1;
}

/* If using Vimeo iframe (not MP4) treat similarly */
#home-hero .home-video__block iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  width: 100%;
  height: 100%;

  border: 0;
  display: block;
  z-index: 1;
}

/* Centered overlay for the H1 */
#home-hero .hero-center-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0 1.25rem;
  text-align: center;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(0, 0, 0, .1) 0%, rgba(0, 0, 0, .1) 100%), linear-gradient(180deg, rgba(0, 58, 84, .9) 0%, rgba(0, 83, 119, 0) 35.62%);
}

/* =========================================
   YOUR TITLE STYLES (applied exactly)
   ========================================= */
.hero-slideshow__caption-title {
  color: var(--body-bg);
  margin: 0;
  font-family: var(--title-fonts);
  font-size: 60px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-transform: uppercase;
  max-width: 980px;
  text-align: center;
  text-shadow: 0 0 var(--body-bg);

  /* allow selection/copy inside a pointer-events:none overlay */
  pointer-events: auto;
}

/* Short viewports: reduce perceived height a bit */
@media (max-height: 680px) {
  #home-hero .container-fluid,
  #home-hero .hero-image,
  #home-hero .hero-image-wrap.home-video__block {
    min-height: 88vh;
  }
}

/* Small screens: scale title a touch without changing your base size */
@media (max-width: 575.98px) {
  .hero-slideshow__caption-title {
    font-size: clamp(24px, 8vw, 60px);
  }
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  #home-hero .video-swap {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================
   HERO SCROLL / SKIP LINK
   ========================================= */

.hero-sec {
  position: relative;
}

.hero-skip-link {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.hero-skip-link:hover,
.hero-skip-link:focus {
  text-decoration: underline;
  color:#fff ;
}


/* PAGE TEMPLATE */

/* Hero background + top gradient overlay */
.hero-sec {
  height: 500px;
  overflow: hidden;
  position: relative;
}
#mainimage.has-bg {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
}
#mainimage.has-bg::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  z-index: 9;
  background:
    linear-gradient(0deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.1) 100%),
    linear-gradient(180deg, rgba(0,58,84,.9) 0%, rgba(0,83,119,0) 35.62%);
}

/* Keep nav above gradient, below modals */
.navigation-bg.sticky-top { z-index: 1040; }

/* Gallery tile (left/right image block) */
.gallery-tile {
  position: relative;
  height: 360px; /* adjust as needed */
  border-radius: 4px;
}
.bg-image-cover {
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    width: 610px;
    aspect-ratio: auto 610 / 460;
    height: 460px;
    aspect-ratio: auto 610 / 460;
}
.padd-img-left {
    padding-left:4.5em;

}
.padd-img-right {
    padding-right:4.5em;
}

/* Thumbnail strip */
.gallery-thumbs {
    display: flex !important;
    flex-direction: row;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    align-content: flex-end;
    height: 100%;
}
.gallery-thumbs .thumb-img {
    display: block;
    width: 80px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    border: 2px solid transparent;
}
button.thumb.btn.p-0.mr-2 {
    display: flex;
    border: none;
    border-radius: 0px;
    line-height: 1;
    min-height: auto !important;
}
/* Active/thumb hover states */
.gallery-thumbs .thumb.active .thumb-img,
.gallery-thumbs .thumb:focus .thumb-img,
.gallery-thumbs .thumb:hover .thumb-img {
  border-color: rgba(255,255,255,0.8); /* adjust for your theme */
  outline: 0;
}

/* Feature list (icon + name inline) */
.feature-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.feature-name { font-weight: 600; }

.h1-headline__tagline.smalltitle {
    margin-bottom: 15px;
    font-size: 16px;
    font-family: var(--text-fonts);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3.2px;
    text-align: center;
}
h1.h1-headline__title {
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
}
.tag-title {
    margin-bottom: 15px;
    font-size: 16px;
    font-family: var(--text-fonts);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3.2px;
    text-align: center;
}
.zigzag-row ul {
    padding-inline-start: 20px;
}
.zigzag-row a.uk-button.uk-button-primary {
    margin: 0 !important;
    padding: 15px 3em;
    margin-top: 1em !important;
}
.zigzag-row {
    margin-top: 5em;
    margin-bottom: 5em;
}
a.view-details {
    margin: 0 !important;
    padding: 15px 3em;
    margin-top: 1em !important;
    color: var(--primary-color);
    font-size: 16px;
    line-height: 18px;
    color: var(--primary-color);
    font-weight: 600;
    font-family: var(--text-fonts);
    text-align: center;
    text-transform: capitalize;
    display: inline-flex;
    align-items: center;
    padding: 0;
    background: transparent;
    min-height: auto;
    position: relative;
    padding-right: 25px;
    letter-spacing: 0;
    margin-left: 2em !important;
}
a.view-details:hover {
    text-decoration: none;
}
img.arrow-info {
    margin-left: 10px;
    max-width: 15px;
    margin-top: 3px;
}
/* Accordion +/- icon based on aria-expanded */
.acc-icon::before { content: "+"; }
button[aria-expanded="true"] .acc-icon::before { content: "-"; }

/* Minor spacing for zigzag rows on small screens */
@media (max-width: 767.98px) {
  .zigzag-row .gallery-tile { margin-bottom: 1rem; }
}

/* HEADER NAV CODE */

/* Ensure hero is behind header overlay */
#mainimage { position: relative; z-index: 1; }

/* default state */
.site-header{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1045;
  top: var(--alert-bar-height, 0px);
}

/* when sticky is active */
.site-header.is-fixed{
  position: fixed;
  top: var(--alert-bar-height, 0px);
  left: 0;
  right: 0;
  z-index: 1045;
}


/* Header inner bar visuals + transition */
.navigation-bg{
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}

/* Scrolled (fixed) state */
.site-header.is-fixed{
  position: fixed; /* pull it out of flow */
}

.site-header.is-fixed .navigation-bg{
  background: var(--primary-color);           /* #134074 */
  border-bottom-color: rgba(255,255,255,.2);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
}

/* Optional: logo sizing so it fits overlay nicely */
.header-logo{ max-height: 72px; height: auto; width: auto; }

/* Spacer starts at 0 height */
#header-spacer{ height: 0; }


/* Footer base */
.site-footer {
    position: relative;
    background-color: #162d47;
    padding: 50px 0 50px;
    color: #ffffff;
}

/* Mountain image line at the bottom */
.site-footer::before{
  content:"";
  position:absolute;
  left:0; right:0;
  bottom:-60px;
  width:100%;
  height:122px;
  background-image: url('/wp-content/themes/BassLakeHotels/images/footermountain.webp');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center bottom;
  pointer-events:none;
}

/* Double-line container */
.footer__container{
  position: relative;
  border-top:    1px solid rgba(255,255,255,.5);
  border-bottom: 1px solid rgba(255,255,255,.5);
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-top: 3.75rem;   /* keep lines visually inset */
  padding-bottom: 3.75rem;
}
.footer__container::before,
.footer__container::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  height:1px;
  background: rgba(255,255,255,.5);
}
.footer__container::before{ top: 19px; }
.footer__container::after { bottom: 19px; }

/* Newsletter title area (extra hook for styling if needed) */
.footer__newsletter-title h3{ margin:0; }

/* Logo + images */
.footer__logo{ max-width: 220px; height:auto; }
.footer__social a{ display:inline-block; margin-right:.5rem; margin-bottom:.5rem; }
.footer__social img{ width:28px; height:28px; object-fit:contain; }
.footer__badges img{ height:32px; margin-right:.5rem; margin-bottom:.5rem; }

/* Links */
.footer__links a{
  display:block;
  color:#ffffff;
  text-decoration:none;
  margin-bottom:.35rem;
}
.footer__links a:hover{ text-decoration:underline; }

/* Contact links inherit white */
.footer__contact a{ color:#ffffff; }

.footer__newsletter-title h3 {
    margin: 0;
    letter-spacing: 0;
    color: var(--footer-color);
    font-family: var(--title-fonts);
    font-size: 30px;
    font-style: normal;
    font-weight: 400;
    line-height: 140%;
    text-transform: capitalize;
}

.footer__address a {
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    text-transform: capitalize;
    font-family: var(--title-fonts);
    color: #fff;
    text-align: center;
}
.footer__address p {
    text-align: center;
}

.more-info {
    font-size: 15px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    font-family: var(--text-fonts);
    color: #fff;
}
div#gf_1 label.gfield_label.gform-field-label;
div#gf_1 span.gfield_required.gfield_required_text,
div#gf_1 legend.gfield_label.gform-field-label.gfield_label_before_complex,
div#gf_1 label.gfield_label.gform-field-label {
    color: #fff !important;
}

.footer__contact.mb-1 {
    text-align: center;
}
.footer__contact {
    text-align: center;
}
/* STICKY PARENT NAV */

/* Sticky wrapper sits under the header using the CSS var set by your footer JS */
.parentbar-sticky{
  position: sticky;
  top: var(--header-height, 0px);
  z-index: 1040; /* below header (which you set ~1045), above content */
}

/* Your existing bar look */
.sticky-parent-nav{
  background: var(--bg-header, #0A1D3B);
  padding: .5rem 0;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

/* Links */
.parent-nav { gap: .25rem .5rem; }
.parent-nav__link{
  color: var(--header-color, #fff);
  text-decoration: none;
  padding: .5rem .75rem;
  border-radius: .25rem;
  transition: color .2s ease, background-color .2s ease;
  white-space: nowrap;
}
.parent-nav__link:hover { 
    background: var(--highlight-color, #B00901);
    color: #fff;
}
.parent-nav__link.active-link {
    background: var(--primary-color);
    color: #fff;
}

.parent-nav__link:hover {
    text-decoration: none;
}

.js-texttoggle-content p {
    margin-bottom: 10px;
}
.navbar-light .navbar-nav .show>.nav-link {
    color: #fff !important;
}

/* =========================
   SECTION 2: Intro Content
   ========================= */

#intro-content {
  position: relative;
  width: 100%;
}

#intro-content .intro-welcome-copy h2 {
  letter-spacing: 0;
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-transform: capitalize;
  max-width: 700px;
  text-align: center;
  margin: 0 auto 35px;
}

/* The centered col that carries the contained bg image */
.home-containedbg-col {
  min-height: 420px;
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* Your duplicated content blocks (outer & inner) */
.home-containedbg__content {
    position: relative;
    width: 100%;
    border: 1px solid #ffffff;
    padding: 10px;
    background: transparent;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: -5em;
}
.inner-card-area {
    position: relative;
    border: 1px solid #ffffff;
    padding: 30px 0px;
    margin-left: auto;
    margin-right: auto;
    background: #fff;
    background: #fff;
    box-shadow: 0 10px 22px 0 rgba(0, 0, 0, .1), 0 41px 41px 0 rgba(0, 0, 0, .09);
    color: #000;
    text-align: left;
}

section#intro-content h2 {
    margin-bottom: 0.8em;
    font-size: 2.5em;
}
.home-containedbg__copy h3 {
    color: #000;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 130%;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    font-family: var(--text-fonts);
    max-width: 150px;
    display: block;
    margin: 0 auto 30px;
    text-align: center;
}
/* Logo strip outside Section 2 block */
.logo-strip__img {
  height: auto;
  max-height: 74px;
}
div#logo-control {
    gap: 3em;
}
.home-containedbg__copy.mb-3 ul li {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 200%;
}
/* =========================
   SECTION 3: Tabs Area
   ========================= */

.our-accommodations-title {
  font-size: 50px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-transform: capitalize;
  color: var(--primary-color);
  margin-bottom: 1.5rem;
}

/* Wrapper */
.home-explore__wrap {
  position: relative;
  width: 100%;
}

/* NAV inside each tab, pinned to top over media */
.home-explore__tabs-wrap {
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
}

/* Tabs nav look (your base) */
.home-explore__tabs .nav-link {
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
  border: 0;
  margin: 0 0.25rem;
}

.home-explore__tabs .nav-link.active {
  color: #fff;
  background: rgba(0, 0, 0, 0.55);
}

/* Background area per tab */
.home-explore__slider-media {
  position: relative;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 94vh; /* as requested */
}

/* Gradient overlays */
.home-explore__slider-media::before {
  position: absolute;
  content: "";
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0.16%, rgba(0, 0, 0, 0) 47.22%),
    linear-gradient(0deg, rgba(0, 0, 0, 0.8) 19.43%, rgba(0, 0, 0, 0) 71.29%);
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

/* Ensure content sits above gradient */
.home-explore__slider-media > .col-12 {
  position: relative;
  z-index: 2;
}

/* Your typography overrides */
.home-explore__tab-name {
  font-size: 70px;
  line-height: 100%;
  letter-spacing: .7px;
  color: var(--body-bg);
  margin: 0;
  font-family: var(--small-title);
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  margin-bottom: 0 !important;
}

.home-explore__tab-desc p {
  color: var(--body-bg);
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.5em !important;
  text-align: center;
  width: 100%;
  margin: 0;
}

a.btn.btn-primary.home-explore__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 15px 35.07px;
  opacity: 1;
  transition: all .4s;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  text-transform: capitalize;
  font-family: var(--text-fonts);
  border-radius: 50px;
  border: 1px solid #fff;
  color: var(--body-bg);
  background: transparent;
}

a.btn.btn-primary.home-explore__cta:hover {
  color: var(--primary-color);
  background: var(--body-bg);
}
.home-explore__tabs .nav-link {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3.2px;
    text-transform: uppercase;
    color: var(--body-bg);
    opacity: .6;
    position: relative;
    display: block;
    padding-bottom: 30px;
    background: transparent;
}
.home-explore__tabs .nav-link.active {
    color: #fff;
    background: transparent;
    opacity: 1;
    border-bottom: 3px solid #fff;
    padding-left: 5px;
    padding-right: 5px;
}
.home-explore__tabs .nav-link:hover {
    opacity: 1;
}
ul.nav.nav-tabs.home-explore__tabs.justify-content-center {
    justify-content: space-around !important;
    align-items: center;
}
/* Small screens */
@media (max-width: 767.98px) {
  .home-explore__tabs .nav-link {
    font-size: 0.9rem;
    padding: 0.35rem 0.75rem;
  }
}
/* =======================================
   SECTION 4 – Things To Do (Static Grid)
   ======================================= */

.ttd-section .ttd-section-bg {
  background-image: url("/wp-content/themes/BassLakeHotels/images/ttdbackimage.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Title */
.ttd-section .ttd-title {
  font-size: 50px;
  font-weight: 400;
  line-height: 110%;
  text-transform: capitalize;
  color: var(--primary-color);
  margin: 2rem 0 1.5rem;
  text-align: center;
}

/* Card layout */
.ttd-section .ttd-card {
  position: relative;
  width: 100%;
  max-width: 566px;
  height: 546px;
  overflow: hidden;
}

.ttd-section .ttd-card__bg {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

.ttd-section .ttd-card__img {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .4s ease;
}

.ttd-section .ttd-card:hover .ttd-card__img {
  transform: scale(1.1);
}

/* White frame */
.ttd-section .ttd-card__bg::before {
  content: "";
  position: absolute;
  box-sizing: border-box;
  left: 20px; right: 20px; top: 20px; bottom: 20px;
  border: 1px solid #fff;
  opacity: .5;
  z-index: 2;
  pointer-events: none;
}

/* Gradient overlay */
.ttd-section .ttd-card__bg::after {
  position: absolute;
  content: "";
  background:
    linear-gradient(0deg, rgba(0, 0, 0, .2) 0%, rgba(0, 0, 0, 0) 36.16%),
    linear-gradient(180deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) 29.46%),
    linear-gradient(0deg, rgba(0, 0, 0, .4) 0%, rgba(0, 0, 0, .4) 100%);
  left: 0; right: 0; top: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}

/* Content layer */
.ttd-section .ttd-card__layer {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 3;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  text-align: center;
}

.ttd-section .ttd-card__tag {
  color: var(--body-bg);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 4px;
}

.ttd-section .ttd-card__title {
  font-family: var(--title-fonts);
  color: var(--body-bg);
  font-size: 28px;
  font-weight: 400;
  line-height: 110%;
  text-transform: capitalize;
  margin: 0;
  padding: 0 2em;
}

/* Responsive adjustments */
@media (max-width: 1199.98px) {
  .ttd-section .ttd-card { height: 460px; }
  .ttd-section .ttd-card__title { font-size: 36px; }
}
@media (max-width: 991.98px) {
  .ttd-section .ttd-card { height: 360px; }
  .ttd-section .ttd-card__title { font-size: 30px; }
}
@media (max-width: 767.98px) {
  .ttd-section .ttd-card { height: 300px; }
  .ttd-section .ttd-title { font-size: 40px; }
  .ttd-section .ttd-card__title { font-size: 24px; }
}


/* =======================================
   SECTION 5 – Explore Back/Front Title + Map Area
   ======================================= */

section#explore-section {
  background: #efefef;
}

/* Title wrapper anchors the absolute front title */
.explore-headings {
  position: relative;
  min-height: 320px;
}

/* Back (big) title */
.explore-back-title {
  color: #000;
  text-shadow: 0 0 #ddd;
  filter: opacity(.07);
  font-size: 250px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%;
  text-transform: capitalize;
  text-align: center;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
}

/* Front title overlay */
.explore-front-title {
    font-family: var(--small-title);
    font-size: 120px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 1.2px;
    text-transform: lowercase;
    color: var(--primary-color);
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    display: block;
    margin: 0 auto;
    bottom: 30%;
}

/* =========================
   Map area ON container-fluid
   ========================= */
#map-area.explore_map {
  position: relative;            /* anchor absolute children */
  height: 847px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  top: -120px;
  z-index: 9;
}

/* =========================
   CTA: flexible bottom-right
   ========================= */
/* Center CTA directly under the third image (desktop/tablet) */
.explore_action {
  position: absolute;
  /* align to the same right edge as .home-third-explore */
  right: 3em;

  /* give it the same width as the third image so we can center inside */
  width: clamp(190px, 23.7%, 380px);
  text-align: center;

  /* place it below the third image:
     top-of-third + height-of-third + gap */
  top: calc(
    clamp(60px, 10vh, 160px) +      /* matches .home-third-explore top */
    clamp(140px, 195px, 230px) +    /* matches .home-third-explore height */
    24px                            /* spacing below image */
  );

  z-index: 2;
}

/* Keep your button inline-centered within the strip */
.explore_action .home-explore__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}





/* ============================================================
   Three “cards” as absolutely-positioned background blocks
   Use % anchors + clamp() for flexible sizing without many MQs
   ============================================================ */

/* 1) Left card */
.home-first-explore {
  position: absolute;
  left: 0;
  top: clamp(40px, 8vh, 140px);
  width: clamp(180px, 22.5%, 360px);
  height: clamp(140px, 195px, 220px);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top;
}

/* 2) Middle-left card */
.home-second-explore {
    position: absolute;
    left: 15%;
    top: clamp(523px, 30vh, 520px);
    width: clamp(180px, 22.5%, 360px);
    height: clamp(140px, 195px, 220px);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
}

/* 3) Right card */
.home-third-explore {
  position: absolute;
  right: 3em;
  top: clamp(60px, 10vh, 160px);
  width: clamp(190px, 23.7%, 380px);
  height: clamp(140px, 195px, 230px);
  background-repeat: no-repeat;
  background-size: cover !important;
  background-position: top;
}

/* ---------- Responsive tweaks (titles/map height only) ---------- */
@media (max-width: 1399.98px) {
  .explore-back-title {
    font-size: 210px;
  }
  .explore-front-title {
    font-size: 100px;
    bottom: 42px;
  }
  #map-area.explore_map {
    top: -100px;
    height: 760px;
  }
}

@media (max-width: 1199.98px) {
  .explore-back-title {
    font-size: 180px;
  }
  .explore-front-title {
    font-size: 84px;
  }
  #map-area.explore_map {
    top: -90px;
    height: 700px;
  }
  .bg-image-cover {
    width: 100%;
    height: auto !important;
}
}

/* ===== Mobile rules:
   - show only the first image
   - place first image at bottom, centered
   - hide second & third
   - pull CTA up a bit so it doesn’t collide
   ======================================== */
@media (max-width: 991.98px) {
  .explore-back-title {
    font-size: 140px;
  }
  .explore-front-title {
    font-size: 64px;
    bottom: 36px;
  }
  #map-area.explore_map {
    top: -70px;
    height: 700px;
  }
}

@media (max-width: 767.98px) {
  .explore-headings {
    min-height: 240px;
  }
  .explore-back-title {
    font-size: 90px;
  }
  .explore-front-title {
    font-size: 44px;
    bottom: 28px;
  }
  #map-area.explore_map {
    top: -50px;
    height: 520px;
  }

  .home-first-explore {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: 0;                                 /* stick to bottom */
    width: clamp(220px, 62vw, 380px);
    height: clamp(120px, 28vw, 180px);
    background-position: center top;
  }

  .home-second-explore,
  .home-third-explore {
    display: none !important;                  /* hide on mobile */
  }

 /* Mobile: only first image shows — keep CTA near bottom, centered */

  .explore_action {
    width: auto;                          /* no need to mirror third img */
    right: 50%;
    transform: translateX(50%);           /* center relative to container */
    left: auto;
    top: auto;
    bottom: clamp(24px, 8vw, 80px);
    text-align: center;
  }

}

a.btn.btn-primary.home-explore__cta {
    background: var(--primary-color);
    color: #fff;
}

/* =========================
   SECTION 6 – Dine Block
   ========================= */

/* Light gray background on the container */
#dine-section .dine-container-bg {
  background: rgb(239, 239, 239);
  padding-bottom: 6em;
}

/* The media column */
#dine-section .home-containedbg-col {
  min-height: 560px;
}

/* Overlay (on top of the image, below text) */
#dine-section .dine-overlay {
  z-index: 1;
  left: 0;
  top: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%);
}

/* Content sits above overlay */
#dine-section .dine-overlay-content {
  z-index: 2;
}

/* Zoom-on-hover media */
#dine-section .home-dinebg__media {
  left: 0;
  top: 0;
  z-index: 0;
  overflow: hidden;
}
#dine-section .home-dinebg__media img {
  transform: scale(1);
  transition: transform 0.7s ease;
  object-fit: cover;
}
#dine-section .home-dinebg__media:hover img,
#dine-section .home-dinebg__media:focus img,
#dine-section .home-containedbg-col:hover .home-dinebg__media img {
  transform: scale(1.3);
}

/* small title */
#dine-section .dine-overlay-content > .smalltitle {
  text-transform: uppercase;
      font-size: 25px;
    font-style: normal;
    font-weight: 400;
    line-height: 131%;
    text-transform: capitalize;
    font-family: var(--title-fonts);
    color: var(--body-bg);
    margin: 0px auto;
  color: var(--body-bg);
  max-width: 300px;
}

/* styled title */
#dine-section .styled-font {
  font-size: 70px;
  line-height: 100%;
  letter-spacing: .7px;
  color: var(--body-bg);
  margin: 0;
  font-family: var(--small-title);
  font-style: normal;
  font-weight: 400;
  text-transform: lowercase;
  margin-bottom: 0 !important;
}

/* copy */
#dine-section .dine-content {
  color: var(--body-bg);
}
#dine-section .dine-content p:last-child {
  margin-bottom: 0;
}

/* responsive nudge */
@media (max-width: 767.98px) {
  #dine-section .home-containedbg-col { min-height: 460px; }
  #dine-section .styled-font { font-size: 48px; }
}

/* =======================================
   SECTION 7 – Weddings Area
   ======================================= */

/* Container background is inline (left-positioned image + #efefef) */

/* ===== Weddings area ===== */
#weddings-section .weddings-main-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;            /* no rounded corners */
}

/* Tabs strip — no default bootstrap borders/backgrounds */
.home-dine-tab {
  border-bottom: 0;
  gap: .25rem;
}
.home-dine-tab .nav-link {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: var(--primary-color);
  position: relative;
  background: transparent;     /* no background on idle */
  border: 0;                   /* remove default borders */
  border-radius: 0;
  padding: .5rem .75rem;
}

/* Active state: solid bg + 3px bottom border (same color) */
.home-dine-tab .nav-link.active {
    background: transparent;
    border-bottom: 3px solid var(--primary-color);
    font-size: 16px;
    font-style: normal;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
    position: relative;
    font-weight: 700;
    padding-left: 2px;
    padding-right: 2px;
}

/* Optional: make non-active links look clickable without bg */
.home-dine-tab .nav-link:hover {
  text-decoration: none;
  opacity: .85;
}

/* Right column typography spacing */
#weddings-section .weddings-tab-copy h2 {
  margin-bottom: .75rem;
}
#weddings-section .weddings-tab-copy p:last-child {
  margin-bottom: 0;
}
ul.nav.nav-tabs.home-dine-tab.mb-3 {
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    gap: 3em;
}

a.btn.reservation-btn:hover {
    background: #fff;
    color: var(--primary-color);
}
/* Small nudge on mobile */
@media (max-width: 767.98px) {
  .home-dine-tab {
    justify-content: center;
  }
}
.container-fluid.gallery-container {
    position: relative;
    padding-top: 6em;
    padding-bottom: 6em;
}
#gallery-area .gallery-overlay {
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.3); /* darken image */
  pointer-events: none;
}
.minus-top {
    margin-top: -2em;
}
.gallery-left-wysiwyg h2 {
    font-size: 50px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: capitalize;
    font-family: var(--title-fonts);
    text-align: left;
    margin-bottom: 10px;
    opacity: 1;
    color: #fff !important;
}
.gallery-left-wysiwyg strong {
    font-family: var(--small-title);
    font-size: 70px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: lowercase;
}
section#gallery-area a.btn.reservation-btn {
    margin-left: 0px;
}

/* Events */

body.wp-singular.events-template-default.single .container-fluid.navigation-bg {
    background: #134074;
}
.info-area .sticky-top {
    top: 6em;
}


/* =======================================
   SECTION 10 – Specials
   ======================================= */

/* Anchor pseudo and grid image */
.home-specials {
  position: relative;
  overflow: visible; /* allow the before element to sit above if needed */
}

/* Blue pattern above the section */
.home-specials::before {
  position: absolute;
  content: "";
  background: url(/wp-content/uploads/2025/10/special-blue-patten.webp);
  width: 100%;
  height: 487px;
  left: 0;
  top: -385px;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  z-index: -1;
}

/* Decorative mountain grid on the right, “on top” of the container wrapper */
.grid_imag {
  position: absolute;
  width: 738px;
  height: 361px;
  background-repeat: no-repeat;
  background-position: right;
  background-image: url(/wp-content/uploads/2025/10/event-mountain.webp);
  right: 0;
  top: -225px;
  z-index: -2; /* keep it behind the content but within the section */
  pointer-events: none;
}

/* Optional: make text inside specials-copy readable on the dark bg */
.specials-copy,
.specials-copy p,
.specials-copy h1,
.specials-copy h2,
.specials-copy h3,
.specials-copy h4,
.specials-copy h5,
.specials-copy h6 {
  color: #fff;
  margin-bottom: 0;
}
.specials-copy p + p {
    margin-top: .75rem;
}
h3.card-title.mb-3 {
    font-size: 2.2em;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: capitalize;
    font-family: var(--title-fonts);
    color: var(--primary-color);
    margin-top: 15px;
    min-height: 128px;
}
a.btn.btn-primary.home-explore__cta:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: #fff;
}
/* Card header as BG block with zoom-on-hover */
.event-card__thumb {
  position: relative;
  overflow: hidden;
  height: 269px;                /* requested fixed height */
}

.event-card__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .4s ease 0s;   /* requested transition */
}

/* Zoom only the BG on card hover */
.card:hover .event-card__bg,
.card:focus-within .event-card__bg {
  transform: scale(1.1);
}

/* Small responsiveness */
@media (max-width: 991.98px) {
  .grid_imag {
    width: 520px;
    height: 280px;
    top: -120px;
  }
}
@media (max-width: 767.98px) {
  .grid_imag {
    width: 360px;
    height: 200px;
    top: -90px;
  }
}
section#specials-section a.btn.reservation-btn {
    margin-left: 0em;
}
h2.special_title {
    margin-bottom: 20px;
}

#gform_wrapper_1 .gform_footer,
#gform_submit_button_1 { display:none; }

input#input_1_1,
input#input_1_3 {
    background: #fff;
    border-radius: 50px;
    height: 56px;
    padding: 0 35px;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
    font-family: var(--text-fonts);
    color: #000;
    border-color: var(--header-color);
}

#gform_wrapper_1 button.gform_button.button {
    color: var(--header-color) !important;
    background: transparent !important;
    border-color: var(--body-bg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 15px 35.07px;
    opacity: 1;
    transition: all .4s;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
    font-family: var(--text-fonts);
    border-radius: 50px;
    border: 1px solid #fff;
        background: var(--header-color) !important;
    color: var(--primary-color) !important;
}
.gchoice.gchoice_1_4_1 label,
.gchoice.gchoice_1_5_1 label {
    color: #fff;
}
.gchoice.gchoice_1_4_1 label a {
    color:  #fff;
    text-decoration: underline;
}

/* ================================
   FAQ Template Styles
   ================================ */

/* Wrap */
#faq-area .faq-wrap,
section#gallery-area {
  background-color: var(--bg-alt-1) !important;
}

/* Small title line */
#faq-area .small-title-page {
  color: var(--text-color);
  letter-spacing: 0;
  text-transform: uppercase;
  font-family: var(--text-fonts);
  font-size: 16px;
  line-height: 1.2;
  font-weight: 400;
  margin-bottom: 25px;
  position: relative;
  padding-bottom:0px;
}

/* Main H1 */
#faq-area .faq-main-title {
    margin: 0;
    text-align: center;
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
}

/* Tabs */
#faq-area .faq-tabs .nav-link {
    border: 0;
    background: transparent;
    margin: 0 0.15rem;
    padding: 15px;
    color: var(--text-color);
    letter-spacing: 0;
    font-family: var(--text-fonts);
    text-transform: uppercase;
    position: relative;
    font-size: 15px;
    display: block;
    transition: all .4s ease;
    font-weight: 700;
    line-height: 140%;
    padding-left: 10px;
    padding-right: 10px;
}
#faq-area .faq-tabs .nav-link.active {
    color: var(--primary-color);
    background: transparent;
    border-bottom: 3px solid var(--primary-color);
    padding: 15px;
    letter-spacing: 0;
    font-family: var(--text-fonts);
    text-transform: uppercase;
    position: relative;
    font-size: 16px;
    display: block;
    transition: all .4s ease;
    font-weight: 700;
    line-height: 140%;
}

/* Accordion cards */
#faq-area .faq-card {
    border: none;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 12px;
    background: #fff;
    border-bottom: 1px solid var(--bg-alt-1);
}

/* Toggle row */
#faq-area .faq-toggle {
    color: var(--primary-color);
    padding: .9rem 1rem;
    text-decoration: none;
    padding-left: 5px;
}
#faq-area .card-body {
    padding-left: 5px;
    padding-top: 0px;
}
#faq-area .faq-toggle:hover { text-decoration: none; }

/* Title left, icon right */
#faq-area .faq-title-text {
    flex: 1 1 auto;
    text-align: left;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-color);
    font-weight: 700;
    position: relative;
    display: block;
    padding-right: 25px;
}
#faq-area .card-header {
    background: transparent;
    border: none;
}
/* Plus/Minus indicator using the .collapsed class Bootstrap toggles */
#faq-area .faq-toggle-icon::before {
  content: "+";
  font-size: 32px;
  line-height: 1;
  display: inline-block;
  transform: translateY(-1px);
  color: var(--primary-color);
}
#faq-area .faq-toggle[aria-expanded="true"] .faq-toggle-icon::before {
  content: "–"; /* en dash minus */
}

/* Card body copy */
#faq-area .card-body p:last-child { margin-bottom: 0; }



body.page-template-faq .container-fluid.navigation-bg,
body.page-template-Gallery .container-fluid.navigation-bg,
body.page-template-History .container-fluid.navigation-bg,
body.page-template-StartPlanning .container-fluid.navigation-bg,
body.page-template-Accessibility .container-fluid.navigation-bg,
body.page-template-WhitePage .container-fluid.navigation-bg,
body.page-template-Location .container-fluid.navigation-bg,
body.wp-singular.post-template-default .container-fluid.navigation-bg,
body.page-template-Blog .container-fluid.navigation-bg,
body.search .container-fluid.navigation-bg,
body.archive .container-fluid.navigation-bg,
body.archive.post-type-archive.post-type-archive-events .container-fluid.navigation-bg {
    background: var(--primary-color);
    border-bottom-color: rgba(255, 255, 255, .2);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}
h3.title.margin-bottom-l {
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 1.2px;
    color: var(--primary-color);
    font-size: 40px;
    font-family: var(--title-fonts);
    text-transform: unset;
}
#grey-area-bg {
    background: var(--bg-alt-1) !important;
}
.header-main-title-page {
    margin: 0;
    text-align: center;
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
}
p.header-small-title-page {
    color: var(--text-color);
    letter-spacing: 0;
    text-transform: uppercase;
    font-family: var(--text-fonts);
    font-size: 16px;
    line-height: 1.2;
    font-weight: 400;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 0px;
}
#white-content-area {
    background: #fff;
    padding-top: 0.5em;
}
#separated-area {
    border-top: 1px solid var(--bg-alt-1);
    padding-top: 3em;
}
h1.amenities-main-title {
    color: var(--primary-color);
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 30px;
    text-align: center;
}
h4.amenity-icon-title.mb-0 {
    letter-spacing: 0;
    font-weight: normal;
    font-size: 18px;
    line-height: 1.5;
}
img.img-fluid.amenity-icon.mb-3 {
    max-width: 44px;
    height: auto !important;
}
.title-blue {
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
}
div#centered-btsn a.uk-button.uk-button-primary.mr-3.mb-2.cta-align.center-buttons {
    margin: 0 !important;
}
div#centered-btsn a.view-details {
    margin-top: 0px !important;
    padding-top: 0px !important;
}
.ttd2-card a.uk-button.uk-button-primary.mr-3.mb-2.cta-align.center-buttons {
    margin: 0;
    width: 100% !important;
}
.gform-theme--foundation .gform_fields {
    column-gap: 1em !important;
    row-gap: 1.2em !important;
}
input#gform_submit_button_2,
input#gform_submit_button_3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 56px;
    padding: 15px 35.07px;
    opacity: 1;
    transition: all .4s;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: capitalize;
    font-family: var(--text-fonts);
    border-radius: 50px;
    border: 1px solid #fff;
    background-color: transparent;
    color: var(--primary-color);
    border-color: var(--primary-color);
}
input#gform_submit_button_2:hover,
input#gform_submit_button_3:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
input#input_2_4 {
    width: 100%;
}
.info-area a {
    color: var(--primary-color);
}
/* On larger screens, revert to normal behavior (center, wrap if needed) */
@media (min-width: 992px) {
  .faq-tabs {
    overflow: visible !important;
    white-space: normal;
  }
}

/* Tabs header container — match FAQ */
.nav-tabs.faq-tabs {
  border-bottom: 1px solid #E5E7EB;
  gap: .25rem;
  scrollbar-width: thin;
}

/* Tab links */
.nav-tabs.faq-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  background: transparent !important;
  color: #6B7280;         /* slate-500 */
  font-weight: 600;
  white-space: nowrap;
  padding: .75rem 1rem;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}

/* Hover/focus */
.nav-tabs.faq-tabs .nav-link:hover,
.nav-tabs.faq-tabs .nav-link:focus {
  color: #111827;         /* gray-900 */
  border-bottom-color: #BFDBFE; /* blue-200 */
  text-decoration: none;
}

/* Active */
.nav-tabs.faq-tabs .nav-link.active,
.nav-tabs.faq-tabs .nav-link[aria-selected="true"] {
  color: #0F172A;         /* slate-900 */
  border-bottom-color: #0D6EFD; /* Bootstrap primary */
  background: transparent !important;
}

/* Make the scrollable header smooth on mobile */
.nav-tabs.faq-tabs.flex-nowrap {
  -webkit-overflow-scrolling: touch;
}

/* Optional: flatten radii */
.nav-tabs.faq-tabs .nav-link { border-radius: 0 !important; }

/* Card basics (keeps it tidy; adjust if you already have FAQ styles loaded) */
.ttd2-card {
    border: 1px solid #efefef;
    border-radius: 0;
    background: #fff;
    padding: 1rem;
}

.ttd2-card h3 {
    font-size: 40px;
    font-style: normal;
    font-weight: 400;
    line-height: 110%;
    text-transform: capitalize;
    color: var(--primary-color);
}
.ttd2-card__desc p:last-child { margin-bottom: 0; }
.ttd2-card__cta {
    text-decoration: none;
    font-size: 16px;
    line-height: 18px;
    color: var(--primary-color);
    font-weight: 600;
    font-family: var(--text-fonts);
    text-align: center;
    padding: 0;
    background: transparent;
    min-height: auto;
    position: relative;
    padding-right: 25px;
    letter-spacing: 0;
    text-transform: uppercase;
    width: 100%;
    border-top: 1px solid #efefef;
    border-bottom: 1px solid #efefef;
    padding-top: 1em;
    padding-bottom: 1em;
}
.ttd2-card__desc.mb-3 a {
    color: var(--primary-color);
    font-weight: bold;
}
.ttd2-card__cta:hover { text-decoration: underline; }


/* GALLERY PAGE */
/* Header look keeps your FAQ classes */
.faq-wrap .small-title-page {
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 13px;
  opacity: .85;
}

.faq-main-title {
  font-size: 44px;
  font-weight: 600;
  line-height: 1.2;
}

/* Tabs strip reuse */
.faq-tabs .nav-link {
  white-space: nowrap;
  border: none;
  border-bottom: 2px solid transparent;
  color: #555;
  padding: .75rem 1rem;
}
.faq-tabs .nav-link.active {
  color: var(--primary-color);
  border-bottom-color: var(--primary-color);
}

/* Grid card with hover zoom */
.gal-card {
  display: block;
  text-decoration: none;
}
.gal-card__inner {
  position: relative;
  width: 100%;
  padding-top: 75%;         /* 4:3; adjust as needed */
  overflow: hidden;
  border-radius: 6px;
  background: #f6f6f6;
}
.gal-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform .35s ease;
}
.gal-card__inner:hover .gal-card__img,
.gal-card:focus .gal-card__img {
  transform: scale(1.06);
}

/* Modal visuals */
.modal-content.bg-transparent {
  background: transparent !important;
  box-shadow: none;
  border: 0;
}
.modal-content .carousel-item img {
  max-height: 80vh;
  width: auto;
}

/* Spacing tweaks */
#gallery-area .tab-content .row > [class*="col-"] {
  margin-bottom: 1.25rem;   /* ~20px */
}
.gallery-title {
    margin: 0;
    text-align: center;
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--primary-color);
}

img.icons-cont {
    max-width: 20px;
    height: auto;
}
.content-text-area h3 {
    letter-spacing: 0;
    font-size: 20px;
    color: var(--text-color);
    font-family: var(--title-fonts);
    line-height: 1.5;
    font-weight: 700;
}
.content-text-area a {
    color: var(--primary-color);
}
.privacy h2 {
    letter-spacing: 0;
    font-family: var(--title-fonts);
    font-size: 28px;
    line-height: 1.45;
    font-weight: 700;
    margin-top: 1em;
}
.privacy h3 {
    letter-spacing: 0;
    font-size: 20px;
    font-family: var(--title-fonts);
    line-height: 1.5;
    font-weight: 700;
    text-transform: capitalize;
    margin-bottom: 0.5em;
    margin-top: 1em;
}
.privacy a {
    color: var(--primary-color);
}
.title-blue {
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
}
.page-main-content h1 {
    font-family: var(--title-fonts);
    font-size: 60px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
    text-transform: uppercase;
    margin-bottom: 15px;
}
p.small-title-page.mb-2 {
    margin-bottom: 15px;
    font-size: 16px;
    font-family: var(--text-fonts);
    font-weight: 400;
    line-height: 100%;
    letter-spacing: 3.2px;
}
.location-content-area p strong {
    font-size: 16px;
    letter-spacing: .32px;
    line-height: 1.5;
    color: var(--text-color);
    font-family: var(--title-fonts);
    font-weight: 700;
    margin-bottom: 0px !important;
}
.location-content-area p {
    margin-bottom: 10px !important;
}
.location-content-area a {
    color: var(--text-color);
}
.team-member h3.h5.mb-1 {
    font-family: var(--title-fonts);
    color: var(--primary-color);
    font-style: normal;
    font-weight: 400;
    text-transform: capitalize;
    font-size: 32px;
    line-height: normal;
}
.team-member a {
    color: var(--primary-color);
    font-size: 0.9em;
    line-height: 1;
}
.card.card-grey-area.p-4.text-left {
    background: #f2f2f2;
    line-height: 1.5em;
}


/* HERO AREA */
.single-hero-container {
    padding-left: 0;
    padding-right: 0;
}

.single-hero-inner {
    overflow: hidden;
}

.single-hero-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    transform: scale(1.05);
    margin-top: 3em;
    object-position: center;
}

/* MAIN POST AREA */
.single-post-container {
    background-color: #ffffff;
}

.single-post-header {
    margin-bottom: 30px;
}

.post-categories {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #666666;
    margin-bottom: 10px;
}

.post-categories a {
    color: inherit;
    text-decoration: none;
}

.post-categories a:hover {
    text-decoration: underline;
}

.PostTitle {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Your provided HR styles */
hr.title_break {
    width: 50px;
    display: block;
    margin: auto;
    margin-bottom: 20px;
    border-color: #222;
    border-top: 2px solid #222;
}

/* Extra rule kept for compatibility with your snippet */
hr.title_break {
    border-color: #02599e;
}

.single-post-date {
    font-size: 14px;
    color: #777777;
}

/* CONTENT AREA */
.single-post-content-wrapper {
    margin-bottom: 30px;
}

.single-post-content {
    font-size: 16px;
    line-height: 1.7;
}

/* TAGS */
.post-tags-area {
    font-size: 14px;
    color: #555555;
    border-top: 1px solid #e5e5e5;
    margin-top: 30px;
    padding-top: 15px;
}

.post-tags-label {
    font-weight: 600;
    margin-right: 5px;
}

.post-tags-list a {
    color: #555555;
    text-decoration: none;
}

.post-tags-list a:hover {
    text-decoration: underline;
}

/* AUTHOR AREA */
.single-post-author {
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

.single-post-author-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999999;
    margin-bottom: 0;
}

.single-post-author-name {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
}

/* RELATED POSTS */
.single-related-posts {
    border-top: 1px solid #e5e5e5;
    padding-top: 30px;
    margin-top: 30px;
}

.related-posts-title {
    font-size: 22px;
    font-weight: 700;
}

.related-post-card {
    border: 1px solid #e5e5e5;
    padding: 15px;
    border-radius: 4px;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.related-post-image-wrapper {
    overflow: hidden;
}

.related-post-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.related-post-title {
    font-size: 16px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.related-post-title a {
    color: #222222;
    text-decoration: none;
}

.related-post-title a:hover {
    text-decoration: underline;
}

.related-post-date {
    font-size: 13px;
    color: #777777;
}

/* SIDEBAR - STICKY ON DESKTOP */
.sticky-sidebar {
    position: static;
}

@media (min-width: 992px) {
    .sticky-sidebar {
        position: sticky;
        top: 100px;
    }
}



/* SINGLE POST STYLES */

h2.wp-block-heading {
    font-size: 40px;
}
.single-post-content p {
    font-size: 15px;
    color: #394247;
}
.single-post-content a {
    font-weight: bold;
}
.sticky-sidebar a {
    color: #222222;
    font-size: 15px;
}

a.wp-block-button__link.wp-element-button:hover {
    color: #fff;
}
.recent-posts-sidebar .recent-sidebar-item {
    line-height: 1.3;
}

.recent-sidebar-thumb {
    flex: 0 0 60px;
    max-width: 60px;
}

.recent-sidebar-thumb-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    display: block;
}

.recent-sidebar-text {
    flex: 1 1 auto;
}

.recent-sidebar-title {
    font-weight: 600;
    display: block;
    margin-bottom: 3px;
    color: inherit;
    text-decoration: none;
}

.recent-sidebar-title:hover {
    text-decoration: underline;
}

.recent-sidebar-date {
    padding: 0;
    margin-top: 0;
    color: #999;
    letter-spacing: 0;
    font-size: 12px;
    font-style: italic;
}


/* =========================
   EVENTS ARCHIVE PAGE
   ========================= */

/* Header / Title */
.events-archive-header {
    background-color: #ffffff;
}

.events-archive-title {
    font-size: 32px;
    font-weight: 700;
}

/* Category Filters */
.events-category-filters {
    text-align: center;
}

/* Wrapper card for each category filter */
.events-category-card {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
}

/* Base button inside card */
.events-category-filter {
    width: 100%;
    background-color: transparent;   /* no grey background */
    border: none;                    /* no box border */
    padding: 10px 5px;
    cursor: pointer;
    border-radius: 0px;
}

/* Active state: primary background and white text */
.events-category-filter.active {
    background: var(--primary-color);
    color: #ffffff;
    border-bottom: none;
    border-radius: 0px;
}

/* Ensure label goes white on active */
.events-category-filter.active .events-category-name {
    color: #ffffff;
}

.events-category-icon {
    max-width: 50px;
    max-height: 50px;
    margin-bottom: 0px;
    transition: filter 0.2s ease-in-out;
    margin-right: 5px;
}

.events-category-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #222222;
}


/* Month headings */
.events-month-heading {
    font-size: 24px;
    font-weight: 700;
}

/* Event cards (based on your "You might also like" style) */
.event-card {
    border: 1px solid #e5e5e5;
    padding: 15px;
    border-radius: 4px;
    background-color: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.event-card-image-wrapper {
    overflow: hidden;
}

.event-card-image {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.event-card-category {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777777;
}

.event-card-title {
    font-size: 18px;
    font-weight: 600;
    margin-top: 5px;
    margin-bottom: 8px;
}

.event-card-title a {
    color: #222222;
    text-decoration: none;
    font-weight: bold;
    font-family: var(--text-fonts);
}

.event-card-title a:hover {
    text-decoration: underline;
}

/* Date & Address rows */
.event-card-meta {
    font-size: 14px;
    color: #555555;
}

.event-card-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
}

.event-card-date,
.event-card-address {
    display: inline-block;
}

/* General list spacing */
.events-archive-list {
    background-color: #ffffff;
}
/* Make category icons go white when active */
.events-category-icon {
    max-width: 50px;
    max-height: 50px;
    margin-bottom: 5px;
    transition: filter 0.2s ease-in-out;
}

.events-category-filter.active .events-category-icon {
    filter: brightness(0) invert(1); /* turns icon to white-ish */
}

/* Back link */
.events-back-link {
    text-transform: uppercase;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 14px;
}

.events-back-link:hover {
    text-decoration: underline;
    color: var(--primary-color);
}

.events-back-icon {
    width: 24px;
    height: 16px;
    margin-right: 8px;
}

/* Divider under back link */
.events-divider {
    border-color: #dddddd;
}

/* Category + title */
.single-event-category {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #777777;
    margin-bottom: 5px;
}

.single-event-title {
    font-family: var(--text-fonts);
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 15px;
}
section#upcoming-events h3 {
    font-family: var(--text-fonts);
    font-weight: bold;
}
/* Meta rows (date, address, time, add link) */
.single-event-meta-row {
    margin-bottom: 8px;
}

.single-event-icon {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    flex-shrink: 0;
}

.single-event-date,
.single-event-address,
.single-event-time,
.event-add-to-calendar-text {
    font-size: 14px;
    color: #333333;
}

/* Add to calendar link */
.event-add-to-calendar {
    text-decoration: none;
}

.event-add-to-calendar:hover .event-add-to-calendar-text {
    text-decoration: underline;
}
/* Map area under content */
.single-event-map-row {
    margin-top: 2rem;
}

.single-event-map-wrapper {
    width: 100%;
}

.single-event-map-iframe {
    width: 100%;
    height: 300px;
    border: 0;
}

.single-event-map-heading {
    font-weight: 600;
    margin-bottom: 0.5em;
}

/* Latest events grey section */
.events-latest-section {
    background-color: #f5f5f5;
}

.events-latest-heading {
    font-weight: 700;
}

/* Small date under latest event cards */
.event-card-date-small {
    font-size: 14px;
    color: #555555;
}

/* Back button in latest events section */
.events-back-all-btn {
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 24px;
}
/***********************************************
 * BLOG / ARCHIVE / SEARCH – GENERAL
 ***********************************************/
.blog-container,
.blog-archive,
.blog-search-results {
    background-color: #ffffff;
}

.blog-container .col-lg-10,
.blog-archive .col-lg-10,
.blog-search-results .col-lg-10 {
    padding-left: 15px;
    padding-right: 15px;
}

/***********************************************
 * BLOG HERO (Template: Blog)
 ***********************************************/
.blog-hero-wrapper {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}

.blog-hero-image {
    border-radius: 4px;
    display: block;
}

.blog-hero-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.blog-hero-title a {
    color: #222222;
    text-decoration: none;
}

.blog-hero-title a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.blog-hero-meta {
    font-size: 0.875rem;
    color: #888888;
}

.blog-hero-date {
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-hero-excerpt p {
    margin-bottom: 0;
}

/***********************************************
 * BLOG SEARCH BAR (on Blog template)
 ***********************************************/
.blog-search-wrapper {
    margin-bottom: 2rem;
}

.blog-search-form .form-control {
    border-radius: 0;
    border-color: #dddddd;
        margin-right: 1em;
    border-radius: 10px;
    padding: 2em;
}

.blog-search-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.1rem rgba(0, 0, 0, 0.05);
}

.blog-search-form .btn.btn-primary {
    border-radius: 0;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.blog-search-form .btn.btn-primary:hover {
    filter: brightness(0.9);
}

/***********************************************
 * RELATED POST CARD – SHARED STYLE
 * Used by: single, blog grid, archive, search, events
 ***********************************************/
.related-post-card {
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
        box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
}

.related-post-card:hover {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);

}

.related-post-image-wrapper {
    overflow: hidden;
    border-radius: 4px;
}

.related-post-image {
    width: 100%;
    height: 215px;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.related-post-card:hover .related-post-image {
    transform: scale(1.03);
}

.related-post-title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 10px 0 5px 0;
}

.related-post-title a {
    color: #222222;
    text-decoration: none;
}

.related-post-title a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.related-post-date {
    font-size: 0.9rem;
    color: #777777;
    margin-bottom: 0;
}

/* Ensure spacing in grids */
.blog-grid .col-12,
.archive-grid .col-12,
.search-grid .col-12 {
    margin-bottom: 30px;
}

/***********************************************
 * ARCHIVE HEADER
 ***********************************************/
.archive-header {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.archive-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.archive-description {
    font-size: 0.95rem;
    color: #555555;
}

/***********************************************
 * SEARCH RESULTS HEADER
 ***********************************************/
.search-results-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
}

/***********************************************
 * PAGINATION (SHARED)
 ***********************************************/
.blog-pagination {
    text-align: center;
}

.blog-pagination .page-numbers {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
    display: inline-flex;
    flex-wrap: wrap;
}

.blog-pagination .page-numbers li {
    margin: 0 3px;
}

.blog-pagination .page-numbers a,
.blog-pagination .page-numbers span {
    display: inline-block;
    padding: 6px 10px;
    border: 1px solid #dddddd;
    border-radius: 3px;
    font-size: 0.9rem;
    text-decoration: none;
    color: #555555;
}

.blog-pagination .page-numbers .current,
.blog-pagination .page-numbers a:hover {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: #ffffff;
}

/***********************************************
 * RESPONSIVE TWEAKS
 ***********************************************/
@media (max-width: 767.98px) {
    .blog-hero-title {
        font-size: 1.5rem;
    }

    .archive-title,
    .search-results-title {
        font-size: 1.5rem;
    }
}

.blog-search-wrapper .input-group.w-100 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}


.related-post-date-row {
    font-size: 0.875rem;
    color: #777;
}

.related-post-categories {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.category-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 999px;
    background: #134074;
    color: #fff;
    text-decoration: none;
}


.category-tag:hover {
    background: #ddd;
}

/* IFRAME INTEGRATION */

div#embeded-area {
    background: #162d47;
    padding: 1em;
    padding-top: 1.2em;
}
div#IframeArea {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}
div#search-widget_IO312PWQ {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
}
.guesty-root-element .lightpick__day.is-in-range,
.lightpick__day.is-available.is-start-date.is-in-range {
    background: #162d47 !important;
    color: #fff !important;
}
div#IframeArea button {
    background: #134074 !important;
    color: #fff !important;
    font-weight: bold !important;
    border: 1px solid !important;
}

#map-area .single-event-map-iframe {
    height: 450px;
}

/* COOKIES POLICY PAGE */

table.wpconsent-cookie-policy-table {
    border: 1px solid #000;
    width: 100%;
    margin-top: 2em;
}
table.wpconsent-cookie-policy-table td {
    border: 1px solid #000;
    padding: 1em;
    font-size: 17px;
}
/* ALL MOBILE DEVICES */

@media (max-width: 575px) {
.padd-img-left {
    padding-left:0em;

}
.padd-img-right {
    padding-right:0em;
}
.zigzag-row {
    margin-top: 2em;
    margin-bottom: 2em;
}
/* Toggler bars */
.navbar-toggler .toggler-icon {
  width: 22px;
  height: 2px;
  background: var(--primary-color);
  display: block;
  margin: 0px;
}

/* Ensure mobile collapse is full width */
#bs4navbar-mobile {
        background: var(--body-bg, #fff);
        padding: .5rem 1rem;
        z-index: 9999 !important;
        margin-bottom: 1em;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
    line-height: 2em;
}
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav a.nav-link.active {
    color: #000 !important;
}

/* MOBILE fixed Book Now bar */
.mobile-fixed-cta {
  position: fixed;
  display: flex !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--primary-color);           /* full-width blue container */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .6rem 1rem .8rem;
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.mobile-fixed-cta .reservation-btn {
    border: 1px solid rgba(255, 255, 255, .85);
    min-height: 48px;
    padding: .5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    margin-left: 0px !important;
    color: var(--primary-color) !important;
    font-weight: 800;
    width: 100%;
}
.mobile-fixed-cta .reservation-btn:hover {
  background: rgba(255,255,255,.12);
}

/* Make tabs scroll horizontally on mobile */
.faq-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch; /* smooth inertial scroll on iOS */
  white-space: nowrap;               /* prevent wrapping */
  scrollbar-width: thin;             /* Firefox (optional) */
}
.faq-tabs .nav-item {
  flex: 0 0 auto;                    /* keep each tab its natural width */
}
.faq-tabs .nav-link {
  display: inline-block;             /* ensure no wrapping inside */
}

h1,
#faq-area .faq-main-title {
    font-size: 2em;
}

/* subtle fade at edges to hint scrolling */
.faq-tabs {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

iframe#canary-chat-widget {
    bottom: 7em !important;
}
.page-main-content h1,
body.wp-singular.page-template-default h1,
.title-blue {
    font-size: 3em;
}
h2,
body.wp-singular.page-template-default h2 {
    font-size: 2.5em;
}
#site-alert-bar .site-alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-direction: column;
}
iframe#canary-chat-widget {
    bottom: 6em !important;
}
}



/* TABLET DEVICES */



@media (min-width: 575px) and (max-width: 768px) {
.padd-img-left {
    padding-left:0em;

}
.padd-img-right {
    padding-right:0em;
}
.zigzag-row {
    margin-top: 2em;
    margin-bottom: 2em;
}
a.header-phone {
    margin-right: 0px !important;
}
/* Toggler bars */
.navbar-toggler .toggler-icon {
  width: 22px;
  height: 2px;
  background: var(--primary-color);
  display: block;
  margin: 0px;
}

/* Ensure mobile collapse is full width */
#bs4navbar-mobile {
        background: var(--body-bg, #fff);
        padding: .5rem 1rem;
        z-index: 9999 !important;
        margin-bottom: 1em;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
    line-height: 2em;
}
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav a.nav-link.active {
    color: #000 !important;
}

/* MOBILE fixed Book Now bar */
.mobile-fixed-cta {
  position: fixed;
  display: flex !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--primary-color);           /* full-width blue container */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .6rem 1rem .8rem;
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.mobile-fixed-cta .reservation-btn {
    border: 1px solid rgba(255, 255, 255, .85);
    min-height: 48px;
    padding: .5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    margin-left: 0px !important;
    color: var(--primary-color) !important;
    font-weight: 800;
    width: 100%;
}
.mobile-fixed-cta .reservation-btn:hover {
  background: rgba(255,255,255,.12);
}
/* Make tabs scroll horizontally on mobile */
.faq-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch; /* smooth inertial scroll on iOS */
  white-space: nowrap;               /* prevent wrapping */
  scrollbar-width: thin;             /* Firefox (optional) */
}
.faq-tabs .nav-item {
  flex: 0 0 auto;                    /* keep each tab its natural width */
}
.faq-tabs .nav-link {
  display: inline-block;             /* ensure no wrapping inside */
}

h1,
#faq-area .faq-main-title {
    font-size: 2em;
}
/* subtle fade at edges to hint scrolling */
.faq-tabs {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.home-explore__slider-media {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 65vh;
}
iframe#canary-chat-widget {
    bottom: 7em !important;
}
#site-alert-bar .site-alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-direction: column;
}
iframe#canary-chat-widget {
    bottom: 6em !important;
}
}



/* TABLETS AND SMALLER LAPTOPS */



@media (min-width: 769px) and (max-width: 1024px) {

.padd-img-left {
    padding-left:0em;

}
.padd-img-right {
    padding-right:0em;
}
.zigzag-row {
    margin-top: 3em;
    margin-bottom: 3em;
}
.home-explore__slider-media {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 65vh;
}

#site-alert-bar .site-alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-direction: column;
}
}


@media (min-width: 769px) and (max-width: 991px) {
.padd-img-left {
    padding-left:0em;

}
.padd-img-right {
    padding-right:0em;
}
.zigzag-row {
    margin-top: 2em;
    margin-bottom: 2em;
}
a.header-phone {
    margin-right: 0px !important;
}
/* Toggler bars */
.navbar-toggler .toggler-icon {
  width: 22px;
  height: 2px;
  background: var(--primary-color);
  display: block;
  margin: 0px;
}

/* Ensure mobile collapse is full width */
#bs4navbar-mobile {
        background: var(--body-bg, #fff);
        padding: .5rem 1rem;
        z-index: 9999 !important;
        margin-bottom: 1em;
}
.navbar-light .navbar-nav .nav-link {
    color: #000;
    line-height: 2em;
}
.navbar-light .navbar-nav .show>.nav-link,
.navbar-light .navbar-nav a.nav-link.active {
    color: #000 !important;
}

/* MOBILE fixed Book Now bar */
.mobile-fixed-cta {
  position: fixed;
  display: flex !important;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background: var(--primary-color);           /* full-width blue container */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .6rem 1rem .8rem;
  box-shadow: 0 -6px 20px rgba(0,0,0,.12);
}
.mobile-fixed-cta .reservation-btn {
    border: 1px solid rgba(255, 255, 255, .85);
    min-height: 48px;
    padding: .5rem 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    margin-left: 0px !important;
    color: var(--primary-color) !important;
    font-weight: 800;
    width: 100%;
}
.mobile-fixed-cta .reservation-btn:hover {
  background: rgba(255,255,255,.12);
}

/* Make tabs scroll horizontally on mobile */
.faq-tabs {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch; /* smooth inertial scroll on iOS */
  white-space: nowrap;               /* prevent wrapping */
  scrollbar-width: thin;             /* Firefox (optional) */
}
.faq-tabs .nav-item {
  flex: 0 0 auto;                    /* keep each tab its natural width */
}
.faq-tabs .nav-link {
  display: inline-block;             /* ensure no wrapping inside */
}

h1,
#faq-area .faq-main-title {
    font-size: 2em;
}

/* subtle fade at edges to hint scrolling */
.faq-tabs {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.home-explore__slider-media {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 65vh;
}
iframe#canary-chat-widget {
    bottom: 7em !important;
}
#site-alert-bar .site-alert-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-direction: column;
}
iframe#canary-chat-widget {
    bottom: 6em !important;
}
}

/* Bigger Laptops */



@media (min-width: 1025px) and (max-width: 1440px) {

.zigzag-row {
    margin-top: 3em;
    margin-bottom: 3em;
}
    .bg-image-cover {
        width: 100%;
        height: auto !important;
    }
}


/* MEDIUM Laptops and zoomed in screens */



@media (min-width: 1440px) {

.bg-image-cover {
    width: 100%;
    height: auto !important;
}
}