/**
 * Components - UI Component Styles
 * Coach Dave Academy Theme
 *
 * This file contains styles for reusable UI components.
 * Requires variables.css to be loaded first.
 *
 * @package CoachDaveAcademy
 * @version 1.1.0
 */

/* ==========================================================================
   Advanced Layouts (Flexbox Sidebar Layouts)
   ========================================================================== */

.advanced-layout {
	display: flex;
	flex-direction: row;
}

.advanced-layout-left .header-site {
	order: 1;
	width: 20%;
}

.advanced-layout-left .wrapper-content {
	order: 2;
	width: 80%;
}

.advanced-layout-right .header-site {
	order: 2;
	width: 20%;
}

.advanced-layout-right .wrapper-content {
	order: 1;
}

/* ==========================================================================
   Slider (Swiper)
   ========================================================================== */

.swiper-container.container {
	padding: 0;
}

.swiper-container.loading {
	opacity: 0;
	transition: var(--transition-base);
}

.swiper-container.loaded {
	transition: var(--transition-base);
}

/* Slider Defaults */
.swiper-slide img {
	display: block;
	margin: auto;
}

.swiper-slide .overlay {
	display: flex;
	width: 100%;
	height: 100%;
	position: relative;
}

.auto-height .swiper-slide .overlay {
	padding-top: var(--space-16);
	padding-bottom: var(--space-16);
}

.swiper-slide .container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	padding: 0;
}

.swiper-slide .copy-container,
.swiper-slide .image-container {
	width: 100%;
	position: relative;
}

.swiper-slide .section-title {
	margin-bottom: 0;
}

.slide:not(.single-slide) .swiper-slide {
	cursor: grab;
}

/* Slider Height */
.swiper-container.full-screen {
	height: 100vh;
}

.layers-header-overlay .wrapper-content .widget:first-child.swiper-container .container {
	padding-top: 4%;
}

/* Slider Alignment */
.swiper-slide.image-top .container {
	flex-direction: column-reverse;
}

.swiper-slide .copy-container + .image-container {
	margin-top: var(--space-8);
}

.swiper-slide.image-top .copy-container + .image-container {
	margin-top: 0;
	margin-bottom: var(--space-8);
}

.swiper-slide.image-bottom .overlay {
	flex-direction: column;
}

/* Slider Pagination */
.swiper-container .pages {
	position: absolute;
	bottom: 0;
	opacity: 0;
	z-index: var(--z-tooltip);
	width: 100%;
	text-align: center;
}

.swiper-container:hover .pages {
	bottom: var(--space-4);
	opacity: 1;
}

.swiper-container .swiper-pagination-switch {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: var(--space-2);
	background: var(--color-white);
	border: 2px solid transparent;
	border-radius: var(--radius-full);
	overflow: hidden;
	text-indent: -999px;
	cursor: pointer;
	transform: scale(1);
	transition: var(--transition-base);
}

.swiper-container .swiper-pagination-switch:hover {
	transform: scale(1.5);
	background: transparent;
	border-color: var(--color-white);
}

.swiper-container .swiper-pagination-switch.swiper-visible-switch.swiper-active-switch {
	transform: scale(1.5);
	background: transparent;
	border-color: var(--color-white);
}

/* Slider Arrows */
.swiper-container .arrows {
	position: absolute;
	top: 50%;
	width: 100%;
	z-index: var(--z-tooltip);
	margin-top: -25px;
}

.swiper-container .arrows a {
	position: absolute;
	opacity: 0;
	display: block;
	overflow: hidden;
	color: var(--color-white);
	font-size: var(--text-2xl);
	line-height: 50px;
}

.swiper-container .arrows .l-left-arrow {
	left: 0;
}

.swiper-container .arrows .l-right-arrow {
	right: 0;
}

.swiper-container:hover .arrows .l-left-arrow {
	left: var(--space-2-5);
	opacity: 1;
}

.swiper-container:hover .arrows .l-right-arrow {
	right: var(--space-2-5);
	opacity: 1;
}

/* ==========================================================================
   Feature List (tick/cross icons)
   ========================================================================== */

.feature-list .media-body .excerpt ol,
.feature-list .media-body .excerpt ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.feature-list .excerpt del,
.feature-list .excerpt s {
	text-decoration: none;
}

.feature-list .excerpt del::before,
.feature-list .excerpt s::before {
	margin-right: var(--space-2);
	content: "\e900";
	font-family: 'layers-icons';
	font-size: var(--text-sm);
}

.feature-list .excerpt em {
	font-style: normal;
}

.feature-list .excerpt em::before {
	margin-right: var(--space-2);
	content: "\e901";
	font-family: 'layers-icons';
	font-size: var(--text-sm);
}

/* ==========================================================================
   Darken Overlay
   ========================================================================== */

.darken {
	position: relative;
}

.overlay.darken {
	background: var(--overlay-light);
}

:not(.overlay).darken .container::before {
	content: " ";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: var(--overlay-light);
}

/* ==========================================================================
   Avatar
   ========================================================================== */

.avatar {
	display: block;
	position: relative;
}

.avatar .avatar-image {
	display: block;
	float: left;
	margin-right: var(--space-2-5);
	max-width: 54px;
	border-radius: var(--radius-full);
	position: relative;
	z-index: 1;
}

.avatar .avatar-image img {
	display: block;
	margin: auto;
	border-radius: var(--radius-full);
}

.avatar .avatar-body {
	overflow: hidden;
	padding: var(--space-1) 0;
}

.avatar .avatar-body .avatar-name {
	display: block;
	font-weight: var(--font-bold);
}

.avatar.middled {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.avatar.middled .avatar-image {
	float: none;
	margin: auto;
}

/* ==========================================================================
   Story (Content Area)
   ========================================================================== */

.story {
	font-size: var(--text-md);
	word-wrap: break-word;
}

.story p {
	margin-bottom: var(--space-5);
}

.story address {
	margin-bottom: var(--space-6);
}

.story a:not(.button) {
	text-decoration: underline;
}

.story ul {
	list-style: disc;
	margin: 0 0 var(--space-6) var(--space-9);
}

.story ul li {
	list-style: disc;
	margin: 0 0 var(--space-1-5);
}

.story ol {
	list-style: decimal;
	margin: 0 0 var(--space-6) var(--space-9);
}

.story ol li {
	list-style: decimal;
	margin: 0 0 var(--space-1-5);
}

.story ul ul,
.story ul ol,
.story ol ol,
.story ol ul {
	margin-bottom: 0;
}

.story .feature-list {
	list-style: none;
	margin-left: var(--space-4);
}

.story dl {
	margin: 0 0 var(--space-6);
}

.story dd {
	margin-left: var(--space-9);
}

.story img {
	max-width: 100%;
	height: auto;
}

.story img.align-center {
	display: block;
}

.story h1 {
	margin-bottom: var(--space-6);
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
}

.story h2 {
	margin-bottom: var(--space-6);
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
}

.story h3 {
	margin-bottom: var(--space-6);
	font-size: var(--text-lg);
	font-weight: var(--font-bold);
}

.story h4 {
	margin-bottom: var(--space-6);
	font-size: 1.8rem;
	font-weight: var(--font-bold);
}

.story h5 {
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
}

.story h6 {
	margin-bottom: var(--space-6);
	font-size: var(--text-sm);
}

.story table {
	font-size: var(--text-sm);
}

.story blockquote {
	padding: var(--space-5);
	margin-bottom: var(--space-6);
	background: var(--color-bg-lighter);
	color: var(--color-text-muted);
}

.story blockquote p:last-child {
	margin-bottom: 0;
}

/* WordPress Captions */
.wp-caption {
	max-width: 100%;
	padding: var(--space-2-5);
	background: var(--color-gray-200);
}

.wp-caption-text {
	padding: var(--space-2-5) var(--space-1) var(--space-1);
	margin: 0;
	color: var(--color-gray-600);
	font-size: var(--text-sm);
}

.wp-caption p.wp-caption-text {
	padding: var(--space-2-5) var(--space-1) var(--space-1);
	margin: 0;
}

.wp-caption.alignright,
.story img.alignright {
	float: right;
	max-width: 320px;
	margin: calc(var(--space-2-5) * -1) 0 var(--space-2-5) var(--space-5);
}

.wp-caption.alignleft {
	float: left;
	max-width: 320px;
	margin: 0 var(--space-5) var(--space-2-5) 0;
}

.wp-caption.alignnone {
	margin: var(--space-1) var(--space-5) var(--space-5) 0;
}

.gallery-caption {
	font-size: var(--text-xs);
}

.bypostauthor {
	color: var(--color-gray-600);
}

.alignleft {
	float: left;
}

.alignright {
	float: right;
}

.aligncenter {
	clear: both;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.wp-caption.aligncenter {
	margin-bottom: var(--space-5);
}

/* ==========================================================================
   Meta Info
   ========================================================================== */

.meta-info {
	clear: both;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.meta-info + .heading {
	margin-top: var(--space-4);
}

.meta-info p {
	margin: 0;
}

.meta {
	overflow: hidden;
	color: var(--color-text-light);
	font-size: var(--text-xs);
	text-transform: uppercase;
}

.meta-list {
	overflow: hidden;
}

.meta-list li {
	padding: var(--space-1) 0;
	color: var(--color-gray-600);
}

div + .meta-list {
	margin-top: var(--space-2-5);
}

.meta-item {
	display: block;
	margin-top: var(--space-0-5);
}

.meta-item:first-child {
	margin-top: 0;
}

.meta-item i {
	display: inline-block;
	width: var(--space-4);
}

.meta-info + .heading,
.excerpt + .meta-info {
	margin-top: var(--space-4);
}

/* Single Page Meta */
.single .meta-item {
	display: inline-block;
	margin-right: var(--space-4);
}

.single .meta-info-vertical .meta-item {
	display: block;
	margin-right: 0;
}

/* ==========================================================================
   Comments
   ========================================================================== */

.comment {
	clear: both;
}

.comment .comment {
	margin-top: var(--space-5);
}

.comment .comment:last-child {
	margin-bottom: 0;
}

/* Comments Form */
.comment-notes {
	margin-bottom: var(--space-5);
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.comment-respond {
	clear: both;
	margin-top: 6%;
}

.comment-list .comment-respond {
	margin-top: 0;
	padding: var(--space-5);
	background: var(--color-bg-lighter);
}

.comment-list .comment .comment-respond {
	margin-top: var(--space-5);
}

.comment-reply-title {
	color: var(--color-text);
	font-size: var(--text-xl);
}

.logged-in-as {
	margin-bottom: var(--space-5);
	font-size: var(--text-xs);
}

.logged-in-as a {
	color: var(--color-text-muted);
}

.logged-in-as a:hover {
	text-decoration: underline;
}

p[class*='comment-form'] .required {
	color: var(--color-error);
}

p[class*='comment-form'] {
	margin-bottom: var(--space-4);
}

.form-allowed-tags {
	max-width: 660px;
	margin-bottom: var(--space-4);
	font-size: var(--text-xs);
}

.form-allowed-tags code {
	padding: 0;
	background: none;
}

.form-submit input[type=submit] {
	display: inline-block;
	padding: var(--space-1) var(--space-3-5);
	vertical-align: middle;
	background: var(--color-bg-dark);
	border: none;
	color: var(--color-white);
	text-align: center;
	font-weight: var(--font-bold);
	cursor: pointer;
	transition: var(--transition-base);
}

.form-submit input[type=submit]:hover {
	background: var(--color-text);
	color: var(--color-white);
}

/* ==========================================================================
   WordPress Widgets
   ========================================================================== */

.sidebar .widget li:not(:last-child) {
	padding: 0 0 var(--space-1-5);
	margin: 0 0 var(--space-1-5);
	border-bottom: 1px solid var(--color-border-light);
}

.sidebar .widget li ul {
	margin: var(--space-1-5) 0 0 var(--space-2-5);
}

.footer-site .widget li {
	margin-bottom: var(--space-2);
}

.footer-site .widget li:last-child {
	border-bottom: none;
}

/* Widget Nav Menu */
.widget.widget_nav_menu {
	max-width: none;
	margin: 0;
}

.wrapper-site .menu-main-menu-container {
	max-width: var(--container-default);
	padding: var(--space-5) 0;
	margin: auto;
	overflow: hidden;
	text-align: center;
}

.menu-main-menu-container li {
	display: inline;
	margin: 0 var(--space-2-5);
}

.menu-main-menu-container li a {
	display: inline-block;
	color: var(--color-text);
	text-align: center;
	font-weight: var(--font-bold);
}

.menu-main-menu-container li a:hover {
	color: var(--color-text-light);
}

/* Sidebar Nav Menu */
.sidebar .widget.widget_nav_menu {
	margin-bottom: var(--space-5);
}

.sidebar .menu-main-menu-container {
	padding: 0;
}

.sidebar .menu-main-menu-container li {
	display: block;
	font-weight: var(--font-normal);
}

.sidebar .menu-main-menu-container li a {
	display: block;
	text-align: left;
}

.sidebar .widget.widget_nav_menu .sub-menu {
	background-color: transparent;
	visibility: visible;
	opacity: 1;
	position: relative;
	top: auto;
	left: auto;
	border: none;
}

.sidebar .widget.widget_nav_menu .sub-menu li a {
	padding: 0;
}

.sidebar .widget.widget_nav_menu .sub-menu li a:hover {
	background-color: transparent;
	color: var(--color-text);
}

/* Search Widget */
.screen-reader-text {
	display: none;
}

.search-form {
	overflow: hidden;
}

.search-form label {
	margin-bottom: 0;
}

aside .search-submit {
	display: block;
	width: 100%;
}

aside .search-field {
	margin-bottom: var(--space-1);
}

/* Search in Footer */
.footer-site .search-form label {
	width: 70%;
	float: left;
}

.footer-site .search-form .search-field {
	border-radius: var(--radius-default) 0 0 var(--radius-default);
}

.footer-site .search-submit {
	width: 30%;
	float: left;
	height: 36px;
	border-radius: 0 var(--radius-default) var(--radius-default) 0;
}

/* Calendar Widget */
#wp-calendar {
	font-size: var(--text-xs);
}

#wp-calendar caption {
	text-align: left;
	text-transform: uppercase;
	font-size: var(--text-2xs);
	font-weight: var(--font-bold);
}

#wp-calendar th,
#wp-calendar td {
	padding: var(--space-1);
}

/* ==========================================================================
   Map (Add-on)
   ========================================================================== */

.layers-contact-widget img.google-map-img {
	width: 100%;
}

.row.has-map {
	padding-top: 0;
}

.full-width .layers-map {
	margin: 0 calc(var(--space-2-5) * -1);
}

.layers-map img {
	width: auto;
	max-width: none;
	display: block;
}

/* ==========================================================================
   Tooltips
   ========================================================================== */

.tooltip {
	cursor: help;
	position: relative;
}

.tooltip::after {
	width: 220px;
	padding: var(--space-4);
	border-radius: var(--radius-default);
	position: absolute;
	left: calc(var(--space-4) * -1);
	bottom: 40px;
	z-index: var(--z-tooltip);
	background: var(--overlay-dark);
	content: attr(title);
	visibility: hidden;
	opacity: 0;
	transition: var(--transition-base);
}

.tooltip::before {
	border: solid;
	content: "";
	position: absolute;
	left: var(--space-4);
	bottom: 34px;
	z-index: calc(var(--z-tooltip) + 1);
	border-color: var(--overlay-dark) transparent;
	visibility: hidden;
	opacity: 0;
	transition: var(--transition-base);
}

.tooltip:hover::after {
	opacity: 1;
	visibility: visible;
	bottom: 35px;
}

.tooltip:hover::before {
	opacity: 1;
	visibility: visible;
	bottom: 29px;
}

/* ==========================================================================
   Popular WP Plugins
   ========================================================================== */

/* Contact Form 7 */
.wpcf7-form p {
	margin-bottom: var(--space-4);
	vertical-align: top;
	font-weight: var(--font-bold);
}

.wpcf7-form br {
	display: none;
}

.wpcf7-form-control-wrap {
	display: block;
	margin-top: var(--space-1);
	font-weight: var(--font-normal);
}

/* ==========================================================================
   Invert Components (Light text on dark backgrounds)
   ========================================================================== */

.invert .meta-info {
	color: rgba(255, 255, 255, 0.65);
}

.invert .meta-info a {
	color: rgba(255, 255, 255, 0.85);
}

.invert .meta-info a:hover {
	color: var(--color-white);
}

/* ==========================================================================
   Notices & Status Messages
   ========================================================================== */

.success {
	display: inline-block;
	padding: var(--space-1) var(--space-2-5);
	background: var(--color-white);
	border: 1px solid var(--color-success);
	font-weight: var(--font-bold);
	color: var(--color-success);
	border-left: 4px solid var(--color-success);
}

/* Status Notice */
.status-notice {
	display: block;
	margin-bottom: var(--space-2-5);
	border: 1px solid;
	color: var(--color-white);
	font-weight: var(--font-bold);
	overflow: hidden;
	text-shadow: 0 1px 0 var(--overlay-light);
	line-height: 32px;
}

a.status-notice:hover {
	color: var(--color-white);
	text-decoration: none;
}

a.status-notice:hover span {
	text-decoration: underline;
}

.status-notice [class^="icon-"],
.status-notice [class*=" icon-"] {
	float: left;
	width: 32px;
	border-right: 1px solid rgba(0, 0, 0, 0.2);
	text-align: center;
	font-size: var(--text-sm);
	line-height: 32px;
}

.status-notice-heading {
	margin: 0;
	padding: 0;
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	line-height: var(--text-xs);
}

.status-notice-heading span {
	float: left;
	padding: var(--space-2-5) 0 var(--space-2-5) var(--space-2);
	overflow: hidden;
}

/* Status Colors */
.status-good {
	background: var(--color-success);
	border-color: var(--color-success-dark);
}

.status-neutral {
	background: var(--color-info);
	border-color: var(--color-info-dark);
}

.status-bad {
	background: var(--color-error);
	border-color: var(--color-error-dark);
}

/* ==========================================================================
   Responsive Components
   ========================================================================== */

@media only screen and (max-width: 480px) {
	.swiper-container .arrows {
		display: none;
	}
}

@media only screen and (min-width: 769px) {
	.sidebar .search-field {
		width: 65%;
		float: left;
	}

	.sidebar .search-submit {
		float: left;
		width: 35%;
		height: 36px;
	}
}