/* ========================================
 * COMBINED CSS FILE
 * ========================================
 */

/* ----------------------------------------
 * COMMON STYLES (present in both files)
 * ----------------------------------------
 */

/* Text styling with drop shadows for hero sections */


.hero-fg h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  font-size: calc(1.3rem + 0.6vw);
}

.hero-fg h1 a {
  color: white;
  text-decoration: none;
}

.hero-fg h2 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  font-size: calc(1.3rem + 0.6vw);
}

.hero-fg h2 a {
  color: white;
  text-decoration: none;
}

.hero-fg h3 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  font-size: calc(1.3rem + 0.6vw);
}

.hero-fg h3 a {
  color: white;
  text-decoration: none;
}

.hero-fg h4 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
  font-size: calc(1.3rem + 0.6vw);
}

.hero-fg h4 a {
  color: white;
  text-decoration: none;
}

.drop_shadow {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}

/* Brand styling */
.navbar-brand #logo {
  font-size: 1.5em;
  color: #6297BC;
  font: bolder;
  font-family: Arial, Sans-serif;
  letter-spacing: -2px;
  text-transform: capitalize;
}

.green {
  color: #9EC630;
}

/* Responsive grid layouts */
@media (min-width: 576px) {
  .card-columns {
    column-count: 2;
  }
}

@media (min-width: 768px) {
  .card-columns {
    column-count: 2;
  }
}

@media (min-width: 992px) {
  .card-columns {
    column-count: 3;
  }
}

@media (min-width: 1200px) {
  .card-columns {
    column-count: 3;
  }
}

/* iFrame containers */
.wrapper {
  width: 100%;
  max-width: 600px;
  height: 100%;
  margin: 0 auto;
  background: #CCC;
}

.h_iframe {
  position: relative;
  padding-top: 56%;
}

.h_iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 */
  position: relative;
}

.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

/* Responsive embeds */
.embed-responsive {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
}

.embed-responsive::before {
  display: block;
  content: "";
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.embed-responsive-21by9::before {
  padding-top: 42.857143%;
}

.embed-responsive-16by9::before {
  padding-top: 56.25%;
}

.embed-responsive-4by3::before {
  padding-top: 75%;
}

.embed-responsive-1by1::before {
  padding-top: 100%;
}

/* Object-fit utilities */
.obj-fit-contain,
.obj-fit-cover,
.bg-img {
  width: 100%;
  height: 100%;
}

.obj-fit-cover,
.bg-img {
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}

.obj-fit-contain {
  -o-object-fit: contain;
  object-fit: contain;
  -o-object-position: center;
  object-position: center;
}

/* Custom ratio for hero images */
.ratio-3x1 {
  --bs-aspect-ratio: 33.3333%;
}

.content-img {
  position: relative;
  width: 100%;
  padding-top: 66.66%; /* 3:2 ratio for these cards, or 56.25% for 16:9? */
  overflow: hidden;
  margin-bottom: 10px;
}

.content-img img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background image utilities */
.has-bg-img {
  background-position: center;
  background-size: cover;
}

.has-bg-pattern {
  background-repeat: repeat;
  background-size: auto;
  background-position: top left;
}

.ldh-bg-img {
  background-position: bottom left;
  background-size: cover;
}

/* Card image handling */
.ratio .card-img-top {
  object-fit: cover;
}

/* Time separator styling */
.time-separator {
  display: flex;
  align-items: center;
  width: 100%;
}

.time-separator time {
  margin-right: 10px;
  padding: 2px;
  font: bold;
  font-size: 16px;
  background-color: yellow;
  color: #000;
  white-space: nowrap;
}

.time-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: #000;
}

/* Reserve fixed space for the AdSense ad */
.ad-container {
  width: 100%;
  min-height: 250px;
  background-color: #f8f9fa; /* Fallback background */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ad-container .adsbygoogle {
  display: block;
  width: 100%;
  min-height: 250px;
}

/* ========================================
 * UNIQUE TO kwt.css
 * ========================================
 */

#content, .codered-article, .codered-article .container {
  background-color: inherit;
}

.codered-article .container {
  margin-bottom: 50px;
}

@media (min-width: 768px) {
  .codered-article .article-body {
    font-size: 1.2em;
  }
  .codered-article > img {
    margin-bottom: -15vw;
  }
  .codered-article.has-img .container {
    position: relative;
    padding: 2vw;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
  }
}

.card {
  background-size: cover;
  background-position: center center;
}

[class^="container"] [class^="container"] {
  width: 100%;
  padding: 0;
  margin: 0;
}

/* Video and map containers */
.video-container,
.map-container {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.video-container::before,
.map-container::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.video-container iframe,
.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Hero background responsive heights */
.hero-bg {
  height: 200px;
}

@media (max-width: 575.98px) {
  .hero-bg {
    height: 150px;
  }
  #ad-slot {
    height: 100px;
    width: 320px;
  }
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .hero-bg {
    height: 175px;
  }
  #ad-slot {
    height: 372px;
    width: 447px;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-bg {
    height: 175px;
  }
  #ad-slot {
    height: 372px;
    width: 447px;
  }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
  .hero-bg {
    height: 200px;
  }
  #ad-slot {
    height: 90px;
    width: 728px;
  }
}

@media (min-width: 1200px) {
  .hero-bg {
    height: 200px;
  }
  #ad-slot {
    height: 250px;
    width: 970px;
  }
}


/* h2 override to match h3 */
h2 {
  font-size: 1.75rem;
}

@media (max-width: 768px) {
  h2 {
    font-size: 1.75rem;
  }
}

@media (min-width:1200px) {
  .h3,h3 {
    font-size:1.75rem;
  }
}

.ratio .w-100 {
  object-fit: cover;
}

/* ========================================
 * UNIQUE TO custom.css
 * ========================================
 */

/* Navbar brand slogan - different margin in custom.css */
.navbar-brand #slogan {
  display: block;
  font-size: 0.6em;
  font: bold;
  font-family: Tahoma, Sans-serif;
  margin: 0px 0px 0px 15px; /* Different from kwt.css (66px) */
  color: #666666;
  text-transform: uppercase;
}

/* Footer styling */
#footer {
  color: white;
  background-color: #000000;
}

footer {
  color: white;
  background-color: #9EC630;
}

footer a {
  color: white;
}

footer a:link {
  text-decoration: none;
}

footer a:visited {
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
  color: white;
}

footer a:active {
  text-decoration: underline;
  color: white;
}

/* Social media icons and sharing */
.social-facebook {
  font-size: 100px;
  color: #3b5998;
}

.social {
  display: inline-block;
}

.social a {
  color: white;
  padding: 5px 15px;
  margin: 0px;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  text-decoration: none !important;
}

.social a:hover {
  background: #666;
}

.social i {
  font-size: 100%;
}

.social .social-facebook {
  font-size: 100%;
  background: #39599f;
}

.social-twitter {
  background: #45b0e3;
}

.social-stumble {
  background: #eb4924;
}

.social-linkedin {
  background: #65b7d2;
}

/* Date fields */
#check-in-date {
  max-width: 130px;
}

#check-out-date {
  max-width: 130px;
}

/* Fareharbor specific styles */
#content-container-option2 {
  width: 100%;
  margin-top: 0px;
  height: 1080px;
  transition: height 0.3s ease;
  overflow: hidden;
}

#fh-image-button-container-option2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  font-size: 20px;
  margin: 0px;
  height: 1050px;
}

#fh-image-button-container-option2 .image-button {
  display: flex;
  position: relative;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  margin: 1% 1% 15px 1%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  border-radius: 15px;
  background-size: cover;
  overflow: hidden;
  text-decoration: none;
  transition: all 200ms ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 4px 6px 0 rgba(0, 0, 0, 0.10);
  height: 340px;
  flex-basis: 98%;
}

#fh-image-button-container-option2 .bgimage {
  display: flex;
  background-position: center center;
  background-size: cover;
  height: 200px;
  width: 100%;
  filter: brightness(90%);
  transition: filter 200ms ease;
}

#fh-image-button-container-option2 .image-button:hover>a>span {
  filter: brightness(110%);
}

#fh-image-button-container-option2 .tour-info {
  color: black;
  line-height: 1em !important;
  font-size: 1em;
  padding: 15px 0 !important;
  text-decoration: none;
  font-weight: bold;
  font-family: sans-serif;
  display: block;
}

#fh-image-button-container-option2 .title {
  display: inline;
  line-height: 1.3;
  font-size: 1.25rem !important;
  margin-bottom: 0;
  margin: 0;
}

#fh-image-button-container-option2 .subtitle {
  display: inline;
  line-height: 1;
  font-size: 1.00rem !important;
  margin-top: 0;
  margin: 0;
}

#fh-image-button-container-option2 .fh-button-true-flat-color.fh-size--small {
  border-radius: 5px !important;
  font-size: 15px !important;
  margin: 10px 15px 15px 15px !important;
  display: inline-block;
}

/* Listing color styles */
.listing-gold {
  background-image: linear-gradient(to right top, #ffd700, #fddf4f, #fce67a, #fbeca1, #faf2c6);
}

.listing-silver {
  background-image: linear-gradient(to right top, #c0c0c0, #cdcbcc, #dbd7d6, #e7e3e0, #f0f0ea);
}

.listing-bronze {
  background-image: linear-gradient(to right top, #daa520, #dfb857, #e4ca84, #eadbb2, #f0ecdf);
}

/* FH responsive adjustments */
@media (min-width: 768px) {
  #fh-image-button-container-option2 .title {
    font-size: 1.00rem !important;
  }

  #fh-image-button-container-option2 .subtitle {
    font-size: 0.75rem !important;
  }
}

@media (min-width: 992px) {
  #fh-image-button-container-option2 .title {
    font-size: 1.10rem !important;
  }

  #fh-image-button-container-option2 .subtitle {
    font-size: 0.90rem !important;
  }
}

@media (min-width: 1200px) {
  #fh-image-button-container-option2 .title {
    font-size: 1.25rem !important;
  }

  #fh-image-button-container-option2 .subtitle {
    font-size: 1.00rem !important;
  }
}

/* Medium screens and larger - horizontal layout */
@media only screen and (min-width: 768px) {
  #content-container-option2 {
    height: 360px;
  }

  #fh-image-button-container-option2 {
    flex-direction: row;
    flex-wrap: nowrap;
    height: 330px;
    align-items: stretch;
  }

  #fh-image-button-container-option2 .image-button {
    flex-basis: 31.3%;
    height: 330px;
    margin: 1%;
  }

  #fh-image-button-container-option2 .bgimage {
    height: 160px;
  }

  #fh-image-button-container-option2 .tour-info {
    padding: 15px 0 !important;
  }
}


/* Custom heading overrides for Bootswatch Journal theme */

/* Override H1 to match H2 */
h1 {
  font-size: calc(1.325rem + 0.9vw);
}

/* Override H2 to match H3 */
h2 {
  font-size: calc(1.3rem + 0.6vw);
}

/* Override H3 to match H5 */
h3 {
  font-size: 1.25rem;
}

/* Media query for screens 1200px and larger */
@media (min-width: 1200px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  /* No need for h3 here, as 1.25rem applies at all sizes */
}

.card-body h2 {
  font-size: 1.25rem;
}


.viator-container {
  background: #f9f9f9; /* optional placeholder background */
  overflow: visible;   /* let the widget expand if needed */
}

/* Wide screens: set a minimum height and center the widget */
@media (min-width: 992px) {
  .viator-container {
    min-height: 400px; /* adjust to reserve enough space for the widget */
    text-align: center;
  }
  /* Force the widget to occupy only 60% of the container width */
  .viator-container > div {
    display: inline-block;
    width: 90%;
  }
}

/* Smaller screens: allow full width with a taller reserved height */
@media (max-width: 991.98px) {
  .viator-container {
    min-height: 600px; /* adjust based on the one-column layout */
  }
  .viator-container > div {
    width: 100%;
  }
}