/* ----------------------------------------------------------------
	Cafe demo styles
-----------------------------------------------------------------*/

:root {
	--cnvs-themecolor: #c0bb62;
	--cnvs-themecolor-rgb: 192, 187, 98;
	--cnvs-body-font: 'Lato', sans-serif;
	--cnvs-primary-font: 'Playfair Display', serif;
	--cnvs-secondary-font: 'Nothing you could do';
}

#header-wrap { background: transparent; }

.dark #wrapper,
.dark #content,
.dark .section.dark,
.dark .css3-spinner { background-color: #000 }

@media (min-width: 992px) {
	.dark .dots-menu .page-menu-item > a { background-color: rgba(255,255,255,0.5) }
	.dark .dots-menu .page-menu-item:hover > a { background-color: rgba(255,255,255,0.9) }

	.dark .dots-menu.dots-menu-border .page-menu-item > a {
		border-color: rgba(255,255,255,0.4);
	}

	.dark .dots-menu.dots-menu-border .page-menu-item > a:hover {
		border-color: rgba(255,255,255,0.7);
	}
}

.heading-block h3 {
	text-transform: none;
	font-size: 42px;
	letter-spacing: 2px;
	font-weight: 400;
}

.before-heading {
	text-transform: uppercase;
	font-style: normal;
	letter-spacing: 6px;
	font-size: 14px;
}

.dark .section.dark p { color: #BBB; }

.dark .section.dark p.text-muted { color: #666; }

a.gallery-img {
	overflow: visible;
	width: 70%;
}

a.gallery-img.fleft { margin-top: -60px; }

.fslider p {
	font-family: var(--cnvs-primary-font);
	font-weight: 400;
	font-size: 18px;
}

.flex-control-nav {
	top: auto;
	bottom: 14px;
	right: 20px;
}

.dark .fslider p { color: #BBB !important; }

.food-menu:not(:first-child) { margin-top: 20px; }

.menu-list span {
	font-family: var(--cnvs-secondary-font);
	letter-spacing: 2px;
	font-size: 18px;
	color: #444;
}

.dark .menu-list span { color: #DDD; }

.menu-list h5 {
	color: #AAA;
	font-family: var(--cnvs-body-font);
	letter-spacing: 2px;
	font-weight: 300;
	font-size: 17px;
}

.dark .menu-list h5 { color: #777; }

.menu-price h3 {
	padding-top: 8px;
	font-size: 22px;
	letter-spacing: 1px;
	font-family: 'source Sans Pro';
}

.form-control:not(.not-dark):active,
.form-control:not(.not-dark):focus,
.sm-form-control:not(.not-dark):active,
.sm-form-control:not(.not-dark):focus,
.form-control:not(.not-dark),
.sm-form-control:not(.not-dark) {
	margin-bottom: 10px;
	border-radius: 2px !important;
}

.dark .form-control:not(.not-dark):active,
.dark .form-control:not(.not-dark):focus,
.dark .sm-form-control:not(.not-dark):active,
.dark .sm-form-control:not(.not-dark):focus,
.dark .form-control:not(.not-dark),
.dark .sm-form-control:not(.not-dark) {
	background-color: #222;
	border: 1px solid #111;
}

.dark .form-control:active,
.dark .form-control:focus {
	border-color: #999;
	box-shadow: none;
	background-color: #FFF;
}

.button {
	font-weight: 300 !important;
	font-size: 14px !important;
}

.button.button-black {
	background-color:  #333 !important;
	border: 0;
}
.button:hover.button-black { color: #CCC !important; }

.css3-spinner > div {
	margin-top: -32px;
	margin-left: -32px;
	width: 62px;
	height: 62px;
	-webkit-animation: none;
	animation: none;
}

.is-expanded-menu.overlay-menu .primary-menu.dark {
	background-color: rgba(0,0,0,.85)
}

@media (max-width: 991px) {
	#header.dark.transparent-header {
		background-color: #000 !important;
	}

	#page-menu { display: none; }
}
/* ----------------------------------------------------------------
	ADDITIVE: the sections this theme builds with real blocks where
	the static reference used page-builder markup (hero), plus the
	menu collection page and the single dish page that ship with the
	demo. Everything below is scoped to the demo's own classes and
	uses the demo tokens declared above.
-----------------------------------------------------------------*/

/* Hero
-----------------------------------------------------------------*/
.cafe-hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 100vh;
	padding: 140px 0;
	overflow: hidden;
}

.cafe-hero-bg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cafe-hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.35);
}

.cafe-hero > .container {
	position: relative;
	z-index: 2;
}

.cafe-hero-caption { max-width: 640px; }

.cafe-hero-caption .before-heading {
	display: block;
	margin-bottom: 26px;
}

.cafe-hero-title {
	margin-bottom: 45px;
	color: #FFF;
	font-family: var(--cnvs-primary-font);
	font-size: 70px;
	line-height: 70px;
	font-weight: 400;
	letter-spacing: 0;
}

.cafe-hero-button {
	letter-spacing: 2px;
	text-transform: uppercase;
}

.cafe-hero-button i { margin-right: 8px; }

@media (max-width: 1024px) {
	.cafe-hero-title { font-size: 50px; line-height: 55px; }
}

@media (max-width: 778px) {
	.cafe-hero { padding: 120px 0; }
	.cafe-hero-caption .before-heading { font-size: 10px; letter-spacing: 4px; }
	.cafe-hero-title { font-size: 40px; line-height: 45px; }
}

/* Full menu page
-----------------------------------------------------------------*/
.cafe-menu-page { padding: 120px 0 100px; }

.cafe-menu-intro span:not(.before-heading) { max-width: 640px; margin: 0 auto; }

.cafe-menu-section { margin-top: 70px; }

.cafe-menu-section-head { margin-bottom: 40px; }

.cafe-dish-col { margin-bottom: 30px; }

.cafe-dish {
	display: block;
	height: 100%;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 3px;
	background-color: rgba(255,255,255,0.03);
	text-decoration: none;
	transition: border-color .3s ease, transform .3s ease;
}

.cafe-dish:hover {
	border-color: rgba(var(--cnvs-themecolor-rgb),0.55);
	transform: translateY(-4px);
}

.cafe-dish-image { display: block; overflow: hidden; }

.cafe-dish-image img {
	display: block;
	width: 100%;
	height: 230px;
	object-fit: cover;
	transition: transform .5s ease;
}

.cafe-dish:hover .cafe-dish-image img { transform: scale(1.06); }

.cafe-dish-body { display: block; padding: 26px 24px; }

.cafe-dish-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
}

.cafe-dish-name {
	font-family: var(--cnvs-secondary-font);
	font-size: 22px;
	letter-spacing: 2px;
	color: #DDD;
}

.cafe-dish-price {
	flex: 0 0 auto;
	font-size: 20px;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
}

.cafe-dish-desc {
	display: block;
	margin-top: 12px;
	color: #888;
	font-family: var(--cnvs-body-font);
	font-weight: 300;
	font-size: 15px;
	letter-spacing: 1px;
	line-height: 1.6;
}

/* Single dish page
-----------------------------------------------------------------*/
.cafe-single .page-title {
	padding: 160px 0 60px;
	background-color: transparent;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cafe-single .page-title h1 {
	color: #FFF;
	font-family: var(--cnvs-primary-font);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: none;
}

.cafe-single .page-title .breadcrumb,
.cafe-single .page-title .breadcrumb a { color: #777; }

.cafe-single .page-title .breadcrumb a:hover { color: var(--cnvs-themecolor); }

.cafe-single #content { padding: 80px 0 90px; }

.cafe-single .entry {
	background-color: transparent;
	box-shadow: none;
}

.cafe-single .single-dish-media img {
	width: 100%;
	border-radius: 3px;
}

.cafe-single .dish-category {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--cnvs-body-font);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 6px;
	text-transform: uppercase;
	color: var(--cnvs-themecolor);
}

.cafe-single .dish-category a { color: inherit; }

.cafe-single .dish-price {
	margin-bottom: 12px;
	font-family: var(--cnvs-primary-font);
	font-size: 34px;
	letter-spacing: 1px;
	color: var(--cnvs-themecolor);
}

.cafe-single .dish-lead {
	margin-bottom: 22px;
	font-family: var(--cnvs-secondary-font);
	font-size: 20px;
	letter-spacing: 2px;
	color: #DDD;
}

.cafe-single .dish-attributes {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 18px;
	margin: 0 0 28px;
	padding: 24px 0 0;
	list-style: none;
	border-top: 1px solid rgba(255,255,255,0.1);
}

.cafe-single .dish-attributes .attr-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #777;
}

.cafe-single .dish-attributes .attr-value {
	font-family: var(--cnvs-primary-font);
	font-size: 16px;
	font-weight: 400;
	color: #DDD;
}

.cafe-single .single-dish-details .entry-content p { color: #AAA; }

.cafe-single .single-dish-cta { margin-top: 30px; }

.cafe-single .single-dish-footer {
	margin-top: 80px;
	padding-top: 50px;
	border-top: 1px solid rgba(255,255,255,0.08);
}

.cafe-single .single-dish-back {
	background-color: transparent !important;
	border: 1px solid rgba(255,255,255,0.25);
	color: #DDD !important;
}

.cafe-single .single-dish-back:hover {
	border-color: var(--cnvs-themecolor);
	color: var(--cnvs-themecolor) !important;
}

.cafe-single .related-dishes { margin-top: 50px; }

.cafe-single .related-dishes-title {
	margin-bottom: 30px;
	font-family: var(--cnvs-primary-font);
	font-size: 24px;
	font-weight: 400;
	letter-spacing: 2px;
	color: #FFF;
}

/* Subscribe popup
-----------------------------------------------------------------*/
.cafe-subscribe-inner { padding: 40px; }

.cafe-subscribe-inner form {
	max-width: 400px;
	margin-top: 130px;
}

.cafe-subscribe-inner .button { margin-top: 20px; }

/* Demo scope restatements
-----------------------------------------------------------------*/
/* The design is the dark colour scheme end to end: keep the page
   backdrop dark behind #wrapper as well. */
body.cafe { background-color: #212529; }

/* Light ("not-dark") form controls stay white, as in the reference. */
.cafe .form-control.not-dark { background-color: #FFF; }

/* The reference form spaces its fields with the control's own 10px
   bottom margin (declared above), so the field wrapper adds none. The
   message-box height comes from the field's own Rows option. */
.cafe .cnvs-form .cnvs-form-field { margin-bottom: 0; }

/* The kitchen list on the menu page reuses the printed-menu line from the
   home page; keep the line length readable in the full-width container. */
.cafe-menu-section .food-menu { max-width: 860px; }

.cafe-menu-section .menu-list span a { color: inherit; }

.cafe-menu-section .menu-list span a:hover { color: var(--cnvs-themecolor); }

/* Category archives (a dish category listing)
-----------------------------------------------------------------*/
.cafe-archive .page-title {
	padding: 160px 0 60px;
	background-color: transparent;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.cafe-archive .page-title h1 {
	color: #FFF;
	font-family: var(--cnvs-primary-font);
	font-size: 42px;
	font-weight: 400;
	letter-spacing: 2px;
	text-transform: none;
}

.cafe-archive .page-title .breadcrumb,
.cafe-archive .page-title .breadcrumb a { color: #777; }

.cafe-archive .page-title .breadcrumb a:hover { color: var(--cnvs-themecolor); }

.cafe-archive #content { padding: 70px 0 80px; }

.cafe-archive .entry { margin-bottom: 30px; }

@media (min-width: 992px) {
	.cafe-archive #posts .entry.col-12 { width: 33.3333%; }
}

.cafe-archive .entry .grid-inner {
	overflow: hidden;
	height: 100%;
	border: 1px solid rgba(255,255,255,0.09);
	border-radius: 3px;
	background-color: rgba(255,255,255,0.03);
}

.cafe-archive .entry-image { margin-bottom: 0; }

.cafe-archive .entry-image img {
	width: 100%;
	height: 230px;
	object-fit: cover;
}

.cafe-archive .entry-title { padding: 24px 24px 0; }

.cafe-archive .entry-title h2 {
	margin-bottom: 0;
	font-family: var(--cnvs-secondary-font);
	font-size: 22px;
	font-weight: 400;
	letter-spacing: 2px;
}

.cafe-archive .entry-title h2 a { color: #DDD; }

.cafe-archive .entry-title h2 a:hover { color: var(--cnvs-themecolor); }

/* A dish is not an article: the archive card shows the name, the line
   and the link, not a post date / byline. */
.cafe-archive .entry-meta { display: none; }

.cafe-archive .entry-content {
	padding: 12px 24px 0;
	color: #888;
	font-weight: 300;
	letter-spacing: 1px;
}

.cafe-archive .entry-content p { margin-bottom: 0; }

.cafe-archive .more-link {
	display: inline-block;
	margin: 14px 24px 24px;
	border-bottom: 0;
	color: var(--cnvs-themecolor);
	font-family: var(--cnvs-body-font);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
}