/*
 Theme Name:   ref-neftenbach
 Theme URI:    https://ref-hettlingen-anmeldung.ch/
 Author:       Picture-Planet GmbH
 Author URI:   https://www.picture-planet.ch/
 Description:  Childtheme of GeneratePress
 Template:     generatepress
 Version:      3.2.4 
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

*/

/* --------------------------------------------------------
  Variables
-------------------------------------------------------- */
:root {
    /* Space / Margins / Paddings */
    --space-big: 2em;
    --space-normal: 1em;
    --space-small: 0.5em;
    --space-mini: 0.25em;

    /* Border Radius */
    --radius-big: 24px;
    --radius-normal: 12px;
    --radius-small: 6px;

}

/* --------------------------------------------------------
  General
-------------------------------------------------------- */
::selection,
.verowa-form ::selection  {
    color: #fff !important;
    background-color: var(--link) !important;
}

html {
    overflow-x: hidden;
}

@media (max-width: 920px) {
  #main {
    margin-left: 40px !important;
    margin-right:  40px !important;
  }
  
  .inside-header{
      flex-direction: inherit;
  }
}

.grid-container {
  max-width: 100% !important;
}

h1 {
    margin-top: var(--space-big);
}

p {
    hyphens: auto;
}

ul,
ol {
    margin: 0 0 1.2em 1.2em;
}

a:focus {
    color: color: var(--link);
}

/* --------------------------------------------------------
  Agenda 
-------------------------------------------------------- */
/* Agenda Event List Template */
.event_list_wrapper .event_list_item {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--space-big) !important;
    transition: background-color 0.3s ease-in-out !important;
    font-size: .9em;
    align-items: center;
    border-top: none !important;
    border-bottom: 1px solid #ebebeb;
}

.event_list_wrapper .event_list_item:hover {
    background: #f8f8f8;
}

.event_list_wrapper .event_list_item .event_container {
    flex: auto !important;
    width: auto !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
}

.event_list_wrapper .event_list_item .event_date a span.weekday,
.event_list_wrapper .event_list_item .event_date a span.day,
.event_list_wrapper .event_list_item .event_date a span.month,
.event_list_wrapper .event_list_item .verowa-date-prefix {
    color: var(--contrast-2);
    letter-spacing: 0.5px;
}


.event_list_wrapper .event_list_item:hover .event_date a span.weekday,
.event_list_wrapper .event_list_item:hover .event_date a span.day,
.event_list_wrapper .event_list_item:hover .event_date a span.month,
.event_list_wrapper .event_list_item:hover .verowa-date-prefix {
    color: white;
}


.event_list_wrapper .event_list_item .event_date a span.day {
    font-size: 2em;
    font-weight: 400;
    line-height: 1;
}

.event_list_wrapper .event_list_item a {
    text-decoration: none !important;
    color: var(--color-dark-green) !important;
}

.event_list_wrapper .event_list_item .event_date {
    background: white;
    transition: background-color 0.3s ease-in-out !important;
    margin-right: var(--space-mini) !important;
    padding: var(--space-normal) var(--space-normal);

}

.event_list_wrapper .event_list_item:hover .event_date {
    background: var(--link);
}

.event_button_list_new {
    margin-right: var(--space-normal);
}

.verowa-subs-deadline-expired,
button.subscription.subscription-waiting-list {
  padding: 0 var(--space-small) !important  ;
  color: #4c4c4c !important;
  background: #f0f0f0 !important;
  border: none !important;
  border-radius: var(--radius-small) !important;
  line-height: 1.5;
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.1em !important;
  letter-spacing: 0.02 !important;
  cursor: default !important;
}

.verowa-subs-deadline-expired:hover,
button.subscription.subscription-waiting-list:hover {
  cursor: default !important;
}

/* --------------------------------------------------------
  Agenda Jquery Calendar
-------------------------------------------------------- */
/* Component containers */
.ui-datepicker .ui-widget-content {
  border: 1px solid #dddddd;
  background: white;
  color: #333333;
}
.ui-datepicker .ui-widget-header {
  border: 1px solid #1e73be;
  background: #1e73be;
  color: #FFFFFF;
  font-weight: bold;
}

/* Interaction states */
.ui-datepicker .ui-state-default,
.ui-datepicker .ui-widget-content .ui-state-default,
.ui-datepicker .ui-widget-header .ui-state-default,
.ui-datepicker .ui-button,
/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-datepicker .ui-button.ui-state-disabled:hover,
html .ui-datepicker .ui-button.ui-state-disabled:active {
  border: 1px solid #f6f6f6 !important;
  background: #f6f6f6 !important;
  font-weight: normal;
  color: #222222 !important;
}

.ui-datepicker .ui-state-hover,
.ui-datepicker .ui-state-focus {
  border: 1px solid #1e73be;
  background: #dcebf8;
  font-weight: normal;
  color: #222222;
}

.ui-datepicker .ui-state-active {
  border: 1px solid #3083cd !important;
  background: #dcebf8 !important;
  font-weight: normal;
  color: #222222;
}

.ui-datepicker .ui-state-highlight {
  border: 1px solid #1e73be !important;
  background: white !important;
  color: #222222;
}

.ui-datepicker .ui-state-disabled {
  opacity: .35;
  background-image: none;
}

.ui-datepicker .ui-state-highlight,
.ui-datepicker .ui-widget-content .ui-state-highlight,
.ui-datepicker .ui-widget-header .ui-state-highlight {
  border: 1px solid #1e73be !important;
  background: #dcebf8 !important;
  color: #222222 !important;
}

/* Hide default jQuery UI icons */
.ui-datepicker-prev .ui-icon,
.ui-datepicker-next .ui-icon {
  filter: brightness(0) invert(1); /* Makes icons white */
}

a.ui-datepicker-prev:hover .ui-icon,
a.ui-datepicker-next:hover .ui-icon {
  filter: brightness(0) invert(0); 
}

/* Corner radius */
.ui-datepicker .ui-corner-all {
  border-radius: 3px;
}

/* --------------------------------------------------------
  Verowa -  Newsletter
-------------------------------------------------------- */
.verowa-newsletter.small-form {
  width: 100%;
}

.verowa-newsletter.small-form form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* --------------------------------------------------------
  Forms
-------------------------------------------------------- */

form:has(.verowa-renting-formfields) {
    max-width: 50%;
    padding: var(--space-big);
    background: var(--base-2);
}

@media (max-width: 860px) {
    form:has(.verowa-renting-formfields) {
        max-width: 100%;
    }
}

.verowa-form h2. .verowa-form h3 {
    word-break: normal;
    hyphens: auto;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="time"],
input[type="date"],
textarea,
select,
input[type="radio"],
input[type="checkbox"] {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
input[type="time"]:focus,
input[type="date"]:focus,
textarea:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid var(--link);
}

input[type="time"],
input[type="date"] {
    min-height: 44px;
}

.verowa-single-checkbox-wrapper:has(ul) .checkbox-label {
    align-items: baseline !important;
}

.verowa-single-checkbox-wrapper:has(ul) .checkbox-text {
    display: block !important;
}

.verowa-input-radio-wrapper {
    margin-top: var(--space-normal);
}

#verowa_renting_form_submit {
    margin: var(--space-normal) 0 !important;
}