:root {
  --off-white: #F4EEE7;
  --off-white-rgb: 244, 238, 231;
  --pale-taupe: #E4DBCF;
  --black: #2C1815;
  --brown: #5A473D;
  --red: #9A3521;
  --fairplex-wide: fairplex-wide, serif;
  --fairplex-narrow: fairplex-narrow, serif;
}

/*Navigation*/

.header-v4 .navigation-wrap {
  background: transparent !important;
  border-top: none !important;
}

.header-v4 .navigation-wrap .container {
  max-width: 1280px;
  width: auto;
}

.header-v4 .navigation-wrap .container .sixteen {
  width: 100%;
  margin: 0 auto;
  background-color: var(--black) !important;
}

.header-v4 #navigation > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

#navigation > ul > li > a {
  text-transform: uppercase;
  letter-spacing: .35em;
  font-family: var(--fairplex-wide) !important;
  font-weight: 500 !important;
}

.header-v4 #navigation > ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 0 65px;
}

@media (max-width: 1440px) {
  .header-v4 #navigation > ul {
    padding: 0;
  }
}

.header-v4 #navigation > ul li.has-children {
  position: relative;
}

.header-v4 #navigation > ul li.menu-item-has-children:after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3' fill='none'%3E%3Cpath d='M3 3L6 0H0L3 3Z' fill='%23F6F3EC'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  width: 10px;
  height: 10px;
}

.header-v4 #navigation > ul li:nth-last-child(2) {
  padding-right: 65px;
}

@media (max-width: 1440px) {
  .header-v4 #navigation > ul li:nth-last-child(2) {
    padding-right: 0;
  }
}

#mobile-navigation ul li i:before {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='3' viewBox='0 0 6 3' fill='none'%3E%3Cpath d='M3 3L6 0H0L3 3Z' fill='%232C1815'/%3E%3C/svg%3E");  background-repeat: no-repeat;
  background-position: center;
  width: 20px;
  height: 20px;
}

#mobile-navigation ul li.open i:before {
  transform: translateY(-50%) rotate(180deg);
}

.header-v4 #navigation > ul li.menu-item-has-children:hover:after {
  transform: translateY(-50%) rotate(180deg);
}

/*Hero*/

.home-hero {
  padding: 0 !important;
}

.home-hero img {
  max-height: 720px;
  object-fit: cover;
  width: 100%;
}

/*Text Image Module*/
.text-image .vc_col-sm-6:nth-child(2) {
  padding-left: 100px !important;
  padding-right: 100px !important;
  text-align: center;
}

.text-image .vc_col-sm-6:nth-child(2) h2 {
  font-size: 40px;
}

.text-image .vc_col-sm-6 .font-special {
  font-family: 'TAY Flapjack', sans-serif !important;
  font-size: 23px;
  line-height: 1;
  letter-spacing: 1px;
}
.text-image .span_12 {
  display: flex;
  align-items: center;
}

.text-image img {
  border: 4px solid var(--red);
}

.text-image .wpb_text_column {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
}


/* Page Hero Branding Replacement */
body:not(.home) .titlebar {
  background-image: none !important;
  background-color: transparent !important;
  padding: 80px !important;
  border-bottom: none !important;
  min-height: auto !important;
}

body:not(.home) .titlebar-overlay {
  display: none !important;
}

body:not(.home) .titlebar .container,
body:not(.home) .titlebar .sixteen.columns,
body:not(.home) .titlebar .ten.columns {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  text-align: center !important;
}

body:not(.home) .titlebar h1,
body:not(.home) .titlebar .title-h1 {
  font-family: var(--fairplex-wide) !important;
  font-weight: 500 !important;
  font-size: 54px !important;
  color: var(--black) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.02em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Accommodations specific font size */
body.page-id-26 .titlebar h1,
body.page-id-26 .titlebar .title-h1 {
  font-size: 32px !important;
}

/* Mobile adjustments for Page Hero */
@media only screen and (max-width: 767px) {
  body:not(.home) .titlebar {
    padding: 64px 24px !important;
  }

  body:not(.home) .titlebar h1,
  body:not(.home) .titlebar .title-h1 {
    font-size: 40px !important;
  }
}

/* Global Image Outline */
img {
  outline: 4pt solid var(--red) !important;
  outline-offset: -4pt; /* Keep it inside to avoid layout shift, or just use border if preferred */
}

/* Fix for logos and other images that shouldn't have outlines if needed */
#logo img,
.footer-logo img,
#mobile-logo img {
  outline: none !important;
}

.text-image.reversed .vc_col-sm-6:nth-child(1) {
  padding-left: 100px !important;
  padding-right: 100px !important;
  text-align: center;
}

.text-image.reversed .vc_col-sm-6:nth-child(2) {
  padding-left: 24px !important;
  padding-right: 24px !important;
}

.text-image.reversed .vc_col-sm-6:nth-child(1) h2 {
  font-size: 39px;
}


@media only screen and (max-width: 1200px) {
  .text-image .vc_col-sm-6:nth-child(2) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .text-image.reversed .vc_col-sm-6:nth-child(1) {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media only screen and (max-width: 768px) {
  .text-image .span_12 {
    flex-direction: column;
  }

  .text-image.reversed .span_12 {
    flex-direction: column-reverse;
  }
  .text-image.reversed .vc_col-sm-6:nth-child(1) h2,
  .text-image .vc_col-sm-6:nth-child(2) h2 {
    font-size: 32px;
  }
  .text-image.reversed .vc_col-sm-6:nth-child(2) {
    margin-bottom: 40px !important;
  }
}

/*hamburger button*/

#mobile-navigation-btn.active {
  /*transform: translateY(-50%); !* keep the vertical centering *!*/
}

.hamburger-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.hamburger {
  width: 42px;
  height: 2px;
  background-color: var(--off-white);
  position: absolute;
  left: 24px;
  transition: all 0.3s ease-in-out;
}
.hamburger:first-child {
  top: 12px;
}

.hamburger:nth-child(2) {
  top: 20px;
}
.hamburger:nth-child(3) {
  top: 28px;
}

#mobile-navigation-btn.active .hamburger:first-child {
  top: 20px;
  transform: rotate(45deg);
}

#mobile-navigation-btn.active .hamburger:nth-child(2) {
  opacity: 0;
}

#mobile-navigation-btn.active .hamburger:nth-child(3) {
  top: 20px;
  transform: rotate(-45deg);
}



/*Accommodation amenities*/

#amenities .span_12,
#rooms .span_12 {
  max-width: 1110px;
}

/* Footer Styles */
#footer .container {
  max-width: 1440px;
  width: 95%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

#footer .container .columns {
  margin-left: 0 !important;
  margin-right: 0 !important;
  float: none !important;
}

#footer .container .four.columns:first-child {
  flex: 0 0 346px; /* 346px */
}

#footer .container .four.columns:nth-child(2) {
  flex: 0 0 188px; /* 188px */
  margin-left: 90px !important; /* 90px */
  @media (max-width: 1200px) {
    margin-left: 0 !important;
  }
}

#footer .container .four.columns:nth-child(3) {
  flex: 0 0 404px; /* 404px */
  margin-left: auto !important;
}

#footer .container .four.columns:nth-child(3) h2 {
  color: var(--off-white);
  letter-spacing: 2px;
  font-weight: 500;
}

#footer .container .four.columns:nth-child(4) {
  display: none !important;
}

#footer .footer-logo {
  margin-bottom: 30px;
}

#footer .footer-logo img {
  max-width: 250px;
  height: auto;
}

#footer h3 {
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 25px;
  color: var(--off-white);
  line-height: 1.2;
}

#footer .widget_nav_menu h3 {
  margin-bottom: 30px;
}

#footer .widget_nav_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .widget_nav_menu ul li {
  margin-bottom: 20px;
  border: none;
  padding: 0 !important;
}

#footer .widget_nav_menu ul li a:hover {
  text-decoration: underline;
}

#footer .widget_nav_menu ul li a {
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--off-white);
  text-decoration: none;
}

/* Subscribe Form Styling */
#footer .columns:nth-child(3) h3 {
  font-size: 32px;
  font-family: fairplex-narrow, serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 30px;
}

#footer .gform_wrapper input[type=text],
#footer .gform_wrapper input[type=email] {
  background: transparent !important;
  border: 1px solid var(--off-white) !important;
  color: var(--off-white) !important;
  padding: 12px 15px !important;
  margin-bottom: 15px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#footer .gform_wrapper input::placeholder {
  color: rgba(var(--off-white-rgb), 0.5) !important;
  text-transform: uppercase;
  font-size: 12px;
}

#footer .gform_button {
  background: var(--off-white) !important;
  color: var(--red) !important;
  text-transform: uppercase;
  font-weight: bold;
  padding: 12px !important;
  width: 100% !important;
  border: none !important;
  cursor: pointer;
  font-family: fairplex-narrow, serif;
  font-size: 20px;
}

/* Footer Contact Info */
.footer-contact-info {
  margin-bottom: 30px;
  color: var(--off-white);
}
.footer-contact-info p {
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  color: var(--off-white);
}
.footer-contact-info p i,
.footer-contact-info p svg {
  width: 20px;
  margin-right: 8px;
  text-align: center;
  font-size: 18px;
  color: var(--off-white);
}
.footer-contact-info p a {
  font-family: var(--fairplex-narrow) !important;
  font-size: 18px;
  font-weight: 500;
  color: inherit;
  text-decoration: none;
}
.footer-contact-info p a:hover {
  text-decoration: underline;
}

/* Social Media in Footer */
#footer .social-media ul {
  display: flex;
  column-gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
  @media (max-width: 1200px) {
    flex-wrap: wrap;
  }
}

#footer .social-media ul li {
  margin: 0;
  padding: 0 !important;
  border: none;
  position: relative;
}

#footer .social-media ul li a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--off-white);
  text-decoration: none;
}

#footer .social-media ul li:not(:last-child):after {
  content: "|";
  margin-left: 15px;
  color: var(--off-white);
  display: inline-block !important;
  vertical-align: middle;
  pointer-events: none;
  position: absolute;
  right: -10px;
  top: -4px;
}

/* Button Styles */
.button,
a.button,
input[type="submit"],
input[type="button"],
button {
  font-family: var(--fairplex-narrow) !important;
  font-size: 20px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  padding: 16px 24px !important;
  margin-top: 32px !important;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Main Top Nav "Book now" button - Wide Med variable */
#navigation > ul > li.book-now > a,
#navigation > ul > li:last-child > a { /* Assuming it might be the last child if no class */
  font-family: var(--fairplex-wide) !important;
}

/* Input Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
textarea,
select {
  font-family: var(--fairplex-narrow) !important;
  font-weight: 500 !important;
  padding: 16px 24px !important;
  border: 1px solid var(--black);
  box-sizing: border-box;
}

/* Buttons Styles */

.button.btn-primary-pos,
.vc_btn3-color-btn-primary-pos {
  background-color: var(--red) !important;
  color: var(--off-white) !important;
  border: 1px solid var(--red) !important;
}
.button.btn-primary-pos:hover,
.vc_btn3-color-btn-primary-pos:hover {
  background-color: var(--brown) !important;
  border-color: var(--brown) !important;
  color: var(--off-white) !important;
}

.button.btn-secondary-pos,
.vc_btn3-color-btn-secondary-pos {
  background-color: transparent !important;
  color: var(--red) !important;
  border: 1px solid var(--red) !important;
  outline: 1px solid var(--red) !important;
}
.button.btn-secondary-pos:hover,
.vc_btn3-color-btn-secondary-pos:hover {
  background-color: var(--red) !important;
  color: var(--off-white) !important;
}

.button.btn-link-pos,
.vc_btn3-color-btn-link-pos {
  background-color: transparent !important;
  color: var(--red) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none !important;
  position: relative;
}
.button.btn-link-pos:hover,
.vc_btn3-color-btn-link-pos:hover {
  text-decoration: underline !important;
  color: var(--red) !important;
}


.button.btn-primary-neg,
.vc_btn3-color-btn-primary-neg {
  background-color: var(--off-white) !important;
  color: var(--black) !important;
  border: 1px solid var(--off-white) !important;
}
.button.btn-primary-neg:hover,
.vc_btn3-color-btn-primary-neg:hover {
  background-color: var(--black) !important;
  color: var(--off-white) !important;
  border-color: var(--black) !important;
}

.button.btn-secondary-neg,
.vc_btn3-color-btn-secondary-neg {
  background-color: transparent !important;
  color: var(--off-white) !important;
  border: 1px solid var(--off-white) !important;
  outline: 1px solid var(--off-white) !important;
}
.button.btn-secondary-neg:hover,
.vc_btn3-color-btn-secondary-neg:hover {
  background-color: var(--off-white) !important;
  color: var(--black) !important;
}

.button.btn-link-neg,
.vc_btn3-color-btn-link-neg {
  background-color: transparent !important;
  color: var(--off-white) !important;
  border: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  text-decoration: none !important;
  position: relative;
}

.button.btn-link-neg:hover,
.vc_btn3-color-btn-link-neg:hover {
  color: var(--off-white) !important;
  text-decoration: underline !important;
}


/* Responsive Footer */
@media only screen and (max-width: 1024px) {
  #footer .container {
    flex-wrap: wrap;
  }
  #footer .container .four.columns:first-child,
  #footer .container .four.columns:nth-child(2),
  #footer .container .four.columns:nth-child(3) {
    flex: 0 0 45%;
    margin-left: 0 !important;
    margin-bottom: 40px;
  }
}

@media only screen and (max-width: 767px) {
  #footer .container .four.columns:first-child,
  #footer .container .four.columns:nth-child(2),
  #footer .container .four.columns:nth-child(3) {
    flex: 0 0 100%;
  }
}