/*
Theme Name: Hotale Child Möllhagen
Theme URI: https://moellhagen.de/
Description: Child Theme for Hotale with CultBooking header buttons for Landhotel Möllhagen.
Author: Oliver Haufe (Haufe IT & EuroEDV LLC)
Template: hotale
Version: 1.0.4
Text Domain: hotale-child-moellhagen
*/

/* ------------------------------------------------------------
   Möllhagen CultBooking Button
   - Desktop: injected via Hotale's hotale_custom_main_menu_right filter
   - Mobile: rendered inside header/header-mobile.php in this child theme
   - Breakpoint: mobile/hamburger header starts below 1430px
   ------------------------------------------------------------ */

.moellhagen-booking-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: #ffffff !important;
  font-family: inherit;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none !important;
  text-transform: uppercase;
  white-space: nowrap;
}

.moellhagen-booking-button:hover,
.moellhagen-booking-button:focus {
  background: #ffffff !important;
  border-color: #ffffff !important;
  color: #8ca64d !important;
  text-decoration: none !important;
}

/* ------------------------------------------------------------
   Hotale breakpoint override
   Parent switches to mobile at 999px. With the booking button,
   desktop menu is too tight, so mobile/hamburger starts below 1430px.
   ------------------------------------------------------------ */
@media only screen and (max-width: 1429px) {
  body {
    width: 100%;
    overflow-x: hidden;
  }

  body.hotale-boxed div.hotale-body-wrapper {
    margin-top: 0;
    margin-bottom: 0;
  }

  .hotale-bullet-anchor {
    display: none;
  }

  /* Hide desktop header earlier */
  .hotale-top-bar,
  .hotale-header-wrap.hotale-header-style-plain,
  .hotale-header-wrap.hotale-header-style-bar,
  .hotale-navigation-bar-wrap,
  .hotale-header-background-transparent,
  .hotale-header-boxed-wrap,
  .hotale-header-side-nav,
  .hotale-header-transparent-substitute,
  .hotale-sticky-navigation {
    display: none !important;
  }

  /* Show Hotale mobile/hamburger header earlier */
  .hotale-mobile-header-wrap {
    display: block !important;
  }

  .hotale-mobile-header-wrap .hotale-top-bar {
    display: block;
    font-size: 13px;
  }

  .hotale-mobile-header-wrap .hotale-top-bar-left,
  .hotale-mobile-header-wrap .hotale-top-bar-right {
    padding-top: 0;
    padding-bottom: 0;
  }

  .hotale-mobile-header.hotale-fixed-navigation {
    display: block !important;
  }

  .hotale-sticky-menu-placeholder {
    display: none !important;
  }
}

/* Desktop / normal header ------------------------------------------------ */
.moellhagen-booking-button-mobile {
  display: none !important;
}

@media only screen and (min-width: 1430px) {

  /* Give the header enough room on desktop if Hotale uses custom header width. */
  .hotale-header-container.hotale-header-custom-container {
    max-width: 1320px !important;
  }

  /* The main menu was too wide with a separate booking button. */
  .hotale-navigation .hotale-main-menu {
    margin-left: 28px !important;
    padding-right: 0 !important;
  }

  .hotale-navigation .sf-menu > li {
    padding-left: 11px !important;
    padding-right: 11px !important;
  }

  .hotale-navigation .sf-menu > li > a {
    font-size: 16px !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  .hotale-main-menu-right-wrap {
    margin-left: 18px !important;
    margin-top: 4px !important;
  }

  .hotale-main-menu-right-button.moellhagen-booking-button-desktop {
    display: inline-flex !important;
    height: 40px !important;
    padding: 0 22px !important;
    margin-top: -13px !important;
    margin-left: 0 !important;
    border-width: 1.5px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1.8px !important;
  }

  .hotale-body .hotale-main-menu-right-button.moellhagen-booking-button-desktop {
    background: transparent !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
  }

  .hotale-body .hotale-main-menu-right-button.moellhagen-booking-button-desktop:hover,
  .hotale-body .hotale-main-menu-right-button.moellhagen-booking-button-desktop:focus {
    background: #ffffff !important;
    color: #8ca64d !important;
    border-color: #ffffff !important;
  }
}

/* Narrow desktop: still desktop header, but compact. Below 1430px hamburger takes over. */
@media only screen and (min-width: 1430px) and (max-width: 1540px) {
  .hotale-navigation .hotale-main-menu {
    margin-left: 18px !important;
  }

  .hotale-navigation .sf-menu > li {
    padding-left: 7px !important;
    padding-right: 7px !important;
  }

  .hotale-navigation .sf-menu > li > a {
    font-size: 15px !important;
  }

  .hotale-main-menu-right-wrap {
    margin-left: 12px !important;
  }

  .hotale-main-menu-right-button.moellhagen-booking-button-desktop {
    height: 38px !important;
    padding: 0 17px !important;
    font-size: 12px !important;
    letter-spacing: 1.3px !important;
  }
}


/* Tablet landscape sticky helper -----------------------------------------
   Hotale's own JS treats 960px+ as desktop. Because the child theme switches
   to the hamburger header until 1429px, the helper JS adds Hotale's native
   .hotale-fixed-navigation class for 960px-1429px while scrolling.
*/
@media only screen and (min-width: 960px) and (max-width: 1429px) {
  #hotale-mobile-header.hotale-fixed-navigation {
    display: block !important;
  }
}

/* Mobile / hamburger header --------------------------------------------- */
@media only screen and (max-width: 1429px) {
  .moellhagen-booking-button-desktop {
    display: none !important;
  }

  .hotale-mobile-header .moellhagen-booking-button-mobile {
    display: inline-flex !important;
    position: absolute;
    top: 50%;
    right: 112px;
    transform: translateY(-50%);
    z-index: 3;
    height: 34px;
    padding: 0 16px;
    border-width: 1.5px;
    font-size: 12px;
    letter-spacing: 1.6px;
  }

  /* Prevent sticky mobile logo from overlapping the booking button. */
  .hotale-mobile-header.hotale-fixed-navigation .hotale-logo-inner,
  .hotale-mobile-header.hotale-sticky-mobile-navigation.hotale-fixed-navigation .hotale-logo-inner {
    max-width: 130px !important;
  }

  .hotale-mobile-header.hotale-fixed-navigation .hotale-logo-inner img,
  .hotale-mobile-header.hotale-sticky-mobile-navigation.hotale-fixed-navigation .hotale-logo-inner img {
    max-width: 130px !important;
    height: auto !important;
  }
}

/* iPhone 8 / small phones */
@media only screen and (max-width: 390px) {
  .hotale-mobile-header .moellhagen-booking-button-mobile {
    right: 86px;
    height: 32px;
    padding: 0 13px;
    font-size: 11px;
    letter-spacing: 1.4px;
  }

  .hotale-mobile-header.hotale-fixed-navigation .hotale-logo-inner,
  .hotale-mobile-header.hotale-sticky-mobile-navigation.hotale-fixed-navigation .hotale-logo-inner {
    max-width: 112px !important;
  }

  .hotale-mobile-header.hotale-fixed-navigation .hotale-logo-inner img,
  .hotale-mobile-header.hotale-sticky-mobile-navigation.hotale-fixed-navigation .hotale-logo-inner img {
    max-width: 112px !important;
    height: auto !important;
  }
}

/* Very narrow fallback */
@media only screen and (max-width: 340px) {
  .hotale-mobile-header .moellhagen-booking-button-mobile {
    right: 78px;
    padding: 0 10px;
    font-size: 10px;
    letter-spacing: 1px;
  }

  .hotale-mobile-header .hotale-logo-inner {
    max-width: 105px !important;
  }
}