/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/

/* Event / service titles */
#events h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	color: #1a5c5a;
	margin: 0.3rem 0 0.2rem;
}

/* Duration text under each service */
#events p.duration, #events div.duration {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #735022;
	opacity: 0.85;
}

/* Service description text */
#events p.description, #events div.description {
	font-family: 'Montserrat', sans-serif;
	font-weight: 300;
	font-size: 0.83rem;
	line-height: 1.95;
	color: #2e5554;
}

/* Selected event highlight */
#events .selectedEvent {
	background-color: #faf6ef;
	border-left: 2px solid #c4975a;
	box-shadow: none;
}

/* "Reserve time" button */
#events input.reserve_time_btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid #c4975a;
	color: #c4975a;
	padding: 0.85rem 2.2rem;
	cursor: pointer;
	transition: all 0.3s;
}
#events input.reserve_time_btn:hover {
	background: #c4975a;
	color: #133f3e;
}

/* "Select another" button */
#events input.select_another_btn {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: transparent;
	border: 1px solid #1a5c5a;
	color: #1a5c5a;
	padding: 0.85rem 2.2rem;
	cursor: pointer;
	transition: all 0.3s;
}
#events input.select_another_btn:hover {
	background: #1a5c5a;
	color: #e8dcc8;
}

/* "Choose date" / "Choose time" headings on the booking form */
#eventForm #start_date-block-container h3,
#eventForm #timeline-container h3 {
	font-family: 'Cormorant Garamond', serif;
	font-weight: 400;
	font-size: 1.3rem;
	letter-spacing: 0.03em;
	color: #1a5c5a;
	margin-bottom: 0.8rem;
}

/* "Save" / confirm booking button */
#eventForm #save_button {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.65rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: #c4975a;
	border: none;
	color: #133f3e;
	padding: 0.85rem 2.2rem;
	cursor: pointer;
	transition: opacity 0.3s;
}
#eventForm #save_button:hover {
	opacity: 0.85;
}

/* jQuery UI widget content (calendar body, panels) */
div.ui-widget-content {
	background: #faf6ef;
	border: 1px solid rgba(196,151,90,0.3);
	color: #1a3a39;
	font-family: 'Montserrat', sans-serif;
}

/* jQuery UI widget header (calendar month/year bar) */
div.ui-widget-header {
	background: #1a5c5a;
	border: 1px solid #1a5c5a;
	color: #e8dcc8;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.05em;
}

/* Timeline table (time slot grid) */
#timeline-container table.timeline {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.78rem;
	border-collapse: collapse;
	background: #faf6ef;
}

/* Unavailable / not-worked slots */
.timeline td.not_worked_time {
	background: #e8dcc8;
	color: rgba(26,58,57,0.35);
}

/* Free / bookable slots */
.timeline td.free_time {
	background: #ffffff;
	color: #1a5c5a;
	border: 1px solid rgba(196,151,90,0.25);
	transition: background 0.3s, color 0.3s;
}
.timeline td.free_time:hover {
	background: #c4975a;
	color: #133f3e;
	cursor: pointer;
}

/* Currently selected slot */
.timeline td.selected_time {
	background: #c4975a;
	color: #133f3e;
	font-weight: 500;
}

/* Already reserved / booked slots */
.timeline td.reserved_time {
	background: #133f3e;
	color: rgba(232,220,200,0.4);
}

/* Loading overlay */
div#loading {
	background: rgba(250,246,239,0.85);
	color: #1a5c5a;
	font-family: 'Montserrat', sans-serif;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-size: 0.7rem;
}

/* Date-picker form labels */
#start_date-block-container .zend_form dt,
start_date-block-container .zend_form dt b,
start_date-block-container .zend_form dd label {
	font-family: 'Montserrat', sans-serif;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #1a5c5a;
	font-weight: 500;
}

.hero-title {
  margin: 0 !important;
  padding: 1.8rem 1.5rem 0.5rem !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 2.8rem !important;
  line-height: 1.25 !important;
  color: rgb(26, 92, 90) !important;
  letter-spacing: 0.03em !important;
  text-align: center !important;
}
.hero-title em {
  color: rgb(115, 80, 34) !important;
}
.welcome-title {
  margin: 0 !important;
  padding: 1.2rem 1.5rem 1.4rem !important;
  font-family: 'Cormorant Garamond', serif !important;
  font-size: 1.9rem !important;
  line-height: 1.15 !important;
  color: rgb(26, 92, 90) !important;
  letter-spacing: 0.03em !important;
}
.welcome-title div {
  text-align: center !important;
}
.welcome-title span {
  letter-spacing: 0.03em !important;
}

@media (max-width: 600px) {
  .hero-title {
    font-size: 1.6rem !important;
    padding: 1.4rem 1.2rem 0.4rem !important;
  }
  .welcome-title {
    font-size: 1.1rem !important;
    padding: 1rem 1.2rem 1.1rem !important;
  }
}