/* =========================================================
   Camping den Doove - Global Custom CSS
   Header navigation + site-wide header image
   ========================================================= */


/* -----------------------------
   Header navigation: Home label
   Replaces the long homepage title with "Home"
   ----------------------------- */

header.wp-block-template-part .wp-block-navigation__container > li:first-child > a {
  background: transparent !important;
  color: #111111 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: inherit !important;
  box-shadow: none !important;
}

header.wp-block-template-part .wp-block-navigation__container > li:first-child > a::after {
  content: "Home";
  font-size: 16px;
  line-height: inherit;
  color: #111111 !important;
}


/* -----------------------------
   Header navigation: Contact label
   Replaces "Contact Us" with "Contact"
   ----------------------------- */

header.wp-block-template-part .wp-block-navigation a[href*="/contact-us"] {
  background: transparent !important;
  color: #111111 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 0 !important;
  line-height: inherit !important;
  box-shadow: none !important;
}

header.wp-block-template-part .wp-block-navigation a[href*="/contact-us"]::after {
  content: "Contact";
  font-size: 16px;
  line-height: inherit;
  color: #111111 !important;
}


/* -----------------------------
   Header navigation hover states
   Keeps menu plain and clean
   ----------------------------- */

header.wp-block-template-part .wp-block-navigation a:hover,
header.wp-block-template-part .wp-block-navigation a:focus {
  background: transparent !important;
  color: #111111 !important;
  text-decoration: none !important;
}


/* -----------------------------
   Full-width responsive site header image
   Targets the top image block in the Pages template
   ----------------------------- */

.wp-site-blocks > figure.wp-block-image.wp-custom-css-8a9ecbd1,
.wp-site-blocks > figure.wp-block-image.dd-site-header-image,
.wp-block-image.wp-custom-css-8a9ecbd1,
.wp-block-image.dd-site-header-image {
  display: block !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  overflow: hidden !important;
}

.wp-site-blocks > figure.wp-block-image.wp-custom-css-8a9ecbd1 img,
.wp-site-blocks > figure.wp-block-image.dd-site-header-image img,
.wp-block-image.wp-custom-css-8a9ecbd1 img,
.wp-block-image.dd-site-header-image img {
  display: block !important;
  width: 100vw !important;
  max-width: none !important;
  height: clamp(180px, 28vw, 420px) !important;
  object-fit: cover !important;
  object-position: center center !important;
}


/* -----------------------------
   Mobile header image adjustment
   Keeps the panorama usable on phones
   ----------------------------- */

@media (max-width: 640px) {
  .wp-site-blocks > figure.wp-block-image.wp-custom-css-8a9ecbd1 img,
  .wp-site-blocks > figure.wp-block-image.dd-site-header-image img,
  .wp-block-image.wp-custom-css-8a9ecbd1 img,
  .wp-block-image.dd-site-header-image img {
    height: 190px !important;
    object-position: center center !important;
  }
}