/*
Theme Name: Avada Child
Description: Child theme for Avada theme
Author: ThemeFusion
Author URI: https://theme-fusion.com
Template: Avada
Version: 1.0.0
Text Domain:  Avada
*/

/* Custom styles for blu-thu-restaurant.at. Loaded after Avada's CSS (functions.php, priority 20).
   Relative image paths resolve to this theme folder. */


/* ==========================================================================
   Brand colours
   ========================================================================== */

:root {
  --bluthu-orange: #ed7004;
  --bluthu-green: #6cb52d;
}


/* ==========================================================================
   Header and navigation
   ========================================================================== */

/* Logo at 100 x 50 in every browser. Avada lists the 200 x 100 file as both the 1x and the 2x
   logo: Chrome shows it at half size, Safari at full size, which makes the header taller than the
   menu and pushes the menu out of the vertical centre. */
.fusion-logo img.fusion-standard-logo {
  width: 100px;
  height: auto;
  max-height: 50px !important;
}

/* Menu icons (e.g. the van at "blu-thu go") orange, green on hover and on the current page. */
.fusion-main-menu .fas {
  color: var(--bluthu-orange);
}

.fusion-main-menu > ul > li > a:not(.fusion-logo-link):hover .fas,
.fusion-body .fusion-main-menu .current_page_item > a .fas {
  color: var(--bluthu-green);
}


/* ==========================================================================
   Layout: footer and sidebar
   ========================================================================== */

#footer {
  padding: 0;
}

#sidebar h4.widget-title {
  margin-top: 0;
}

#sidebar > .heading > h4 {
  font-size: 20px;
}

#sidebar .st_tip {
  margin-bottom: 45px;
}

#sidebar .st_tip .tip_title {
  font-weight: bold;
}


/* ==========================================================================
   Start page
   ========================================================================== */

.home .fusion-reading-box-container .reading-box h2 {
  font-size: 28px;
}

/* Content boxes that are switched off: all but the first are greyed out and not clickable. */
.home-boxes .content-box-column:not(.content-box-column-1) {
  opacity: 0.4;
  pointer-events: none;
}


/* ==========================================================================
   Menu (Speisen, Getränke, Wochenmenü)
   ========================================================================== */

/* Dish name on the left, price on the right. */
.menu-container {
  display: flex;
  margin-bottom: 10px;
  line-height: 1.5;
}

.menu-name {
  flex: 1;
}

.menu-price {
  width: 80px;
  text-align: right;
}

/* Used by the menu shortcodes in functions.php. */
.center {
  text-align: center;
}


/* ==========================================================================
   Popups (Popup Maker)
   ========================================================================== */

#popmake-5393 {
  border-radius: 4px;
}

.pum-container a:hover {
  color: var(--bluthu-orange);
}

.pum-theme-2836 .pum-content + .pum-close,
.pum-theme-standard-theme .pum-content + .pum-close:hover {
  background-color: var(--bluthu-green);
}


/* ==========================================================================
   Gallery and lightbox
   ========================================================================== */

html .ilightbox-toolbar.metro-white a:hover {
  background-color: #65bc7b;
}

#gallery-1 img {
  border: none !important;
}

#gallery-1 .gallery-item {
  margin: 0 !important;
}


/* ==========================================================================
   Forms (Gravity Forms)
   ========================================================================== */

/* ---- General ---- */

body .gform_wrapper .gform_footer {
  display: block;
}

.gform_wrapper input::placeholder {
  color: #e6e6e6;
}

/* ---- Date fields ----
   Full width with the calendar button inside the right edge. Gravity Forms gives date fields
   "width: auto" and puts the button next to them, where it hangs outside the field or spills into
   the hour field in narrow columns. */

.ginput_container_date {
  position: relative;
}

.gform_wrapper .ginput_container_date input {
  width: 100% !important;
  padding-right: 40px !important;
}

/* Centred on the 50 px field, measured from the bottom: in left-label forms (Bestellung) the
   container is taller than the field and the field sits at its bottom. */
.ginput_container_date button.gform-datepicker-toggle {
  position: absolute;
  top: auto;
  right: 10px;
  bottom: 25px;
  transform: translateY(50%);
}

/* ---- Time fields (HH : MM) ---- */

/* The ":" is as tall as the 50 px fields and aligned to their top, with the character centred by
   flexbox (Gravity Forms forces a 32 px line height), whether the HH/MM labels are below or hidden. */
.gform_wrapper .ginput_complex .hour_minute_colon {
  display: flex;
  align-items: center;
  align-self: flex-start;
  height: 50px;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1 !important;
}

/* Hour and minute are number inputs: no browser spinner arrows. */
.ginput_container_time input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.ginput_container_time input[type=number]::-webkit-inner-spin-button,
.ginput_container_time input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ---- +/− buttons (added by js/bluthu.js to quantity and number fields) ----
   An up and a down arrow inside the right edge of the field, sized from the field's height. The
   down arrow appears once there is a quantity. */

.incdecbtnwrapper {
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  display: flex;
  flex-direction: column;
  width: 22px;
}

.incdecbtnwrapper button.inc,
.incdecbtnwrapper button.dec {
  display: flex;
  flex: 1 1 50%;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: none;
  background-color: var(--bluthu-orange);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.incdecbtnwrapper button.inc {
  border-radius: 0 5px 0 0;
}

.incdecbtnwrapper button.dec {
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 0 0 5px 0;
  visibility: hidden;
}

.incdecbtnwrapper button.inc:hover,
.incdecbtnwrapper button.dec:hover {
  background-color: var(--bluthu-green);
}

/* Room for the buttons, and no browser spinner next to them. */
div:has(> .incdecbtnwrapper) > input {
  padding-right: 28px !important;
  -moz-appearance: textfield;
  appearance: textfield;
}

div:has(> .incdecbtnwrapper) > input::-webkit-inner-spin-button,
div:has(> .incdecbtnwrapper) > input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

div:has(> .incdecbtnwrapper) > input.ginput_quantity {
  width: 84px !important;
  padding-left: 12px !important;
}

/* ---- Menüplaner (form 1, Fest-Reservierungen) ---- */

#field_1_12 .gfield_required,
#field_1_12 label,
#field_1_9 label {
  display: none;
}

/* ---- Bestellung (form 2, blu-thu go) ---- */

/* Green marker in front of dishes marked "special". */
.special .gfield_label::before {
  content: '';
  position: absolute;
  left: -12px;
  display: block;
  width: 9px;
  height: 28px;
  background: url(img/bluthu-go-special.png);
  background-size: auto 100%;
  color: var(--bluthu-green);
}

#gfield_description_2_12 {
  margin-top: 0;
  padding-top: 0;
  font-size: 12px;
}

/* Delivery option while it is switched off (js/order.js). */
.disabled {
  color: lightgrey;
}