/*
 Theme Name:   Akropolis (Bricks Child)
 Description:  Rebuild of the wp-gaucho design for Restaurant Akropolis Rosenheim.
 Template:     bricks
 Version:      1.0
 Text Domain:  bricks
*/

@font-face {
	font-family: 'Khand';
	src: url('fonts/khand-regular-webfont.woff2') format('woff2'), url('fonts/khand-regular-webfont.woff') format('woff');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'Sarala';
	src: url('fonts/Sarala-Regular.woff') format('woff');
	font-weight: 400;
	font-display: swap;
}

:root {
	--akro-dark: #381e1d;
	--akro-brown: #533834;
	--akro-text: #382f2f;
	--akro-gold: #aea512;
	--akro-blue: #5aa1e3;
	--akro-taupe: #938372;
	--akro-deep: #425c80;
	--akro-grey: #666;
	--akro-font-heading: 'Khand', sans-serif;
	--akro-font-body: 'Sarala', sans-serif;
}

body {
	font-family: var(--akro-font-body);
	font-size: 16px;
	line-height: 2;
	color: var(--akro-text);
	background: #fff;
}
h1, h2, h3, h4, h5 {
	font-family: var(--akro-font-heading);
	font-weight: 400;
	color: var(--akro-brown);
	line-height: 1.2;
}
a { color: var(--akro-blue); }

/* ---------- Buttons ---------- */
.akro-btn {
	display: inline-block;
	font-family: var(--akro-font-heading);
	font-size: 18px;
	line-height: 1;
	padding: 9px 16px;
	color: #fff;
	background: var(--akro-taupe);
	border: 1px solid rgba(0, 0, 0, .15);
	border-radius: 2px;
	transition: filter .2s;
}
.akro-btn:hover { filter: brightness(1.1); color: #fff; }
.akro-btn--blue { background: var(--akro-blue); }

/* ---------- Headings ---------- */
.akro-eyebrow {
	font-family: var(--akro-font-body);
	font-size: 16px;
	letter-spacing: 3px;
	color: var(--akro-gold);
	margin: 0;
}
.akro-eyebrow--caps { text-transform: uppercase; }
/* Title with lines left and right */
.akro-lines {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 18px;
	text-align: center;
}
.akro-lines::before,
.akro-lines::after {
	content: '';
	flex: 0 0 40px;
	height: 1px;
	background: currentColor;
	opacity: .7;
	transform: translateY(.35em);
}
/* Title followed by a short line (info columns) */
.akro-dash::after {
	content: '';
	display: inline-block;
	width: 30px;
	height: 1px;
	margin-left: 14px;
	background: currentColor;
	vertical-align: middle;
}
/* Title with underline (contact page) */
.akro-underline {
	display: inline-block;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--akro-brown);
	font-size: 28px;
}

/* ---------- Header ---------- */
.akro-topbar {
	background: var(--akro-dark);
	color: #fff;
	font-size: 16px;
	padding: 0 40px;
	min-height: 52px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	position: relative;
	z-index: 20;
}
.akro-topbar strong { font-weight: 700; }
.akro-topbar__right { flex-direction: row; align-items: center; gap: 40px; width: auto; }
.akro-topbar .brxe-icon { color: var(--akro-blue); font-size: 15px; }
.akro-topbar .brxe-search { color: #fff; }

.akro-header {
	position: absolute;
	top: 52px;
	left: 0;
	right: 0;
	z-index: 15;
	height: 70px;
	padding-left: 20px;
	background: rgba(70, 70, 75, .55);
	flex-direction: row;
	align-items: stretch;
	justify-content: space-between;
}
.akro-header .brxe-logo { align-self: center; }
.akro-header .brxe-logo img { height: 38px; width: auto; }
.akro-header .brxe-nav-menu,
.akro-header .brxe-nav-menu > nav,
.akro-header .bricks-nav-menu { height: 100%; gap: 0; }
.akro-header .bricks-nav-menu > li { height: 100%; margin: 0; }
.akro-header .bricks-nav-menu > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 30px;
	color: #fff;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	transition: background .2s;
}
.akro-header .bricks-nav-menu > li > a:hover,
.akro-header .bricks-nav-menu > .current-menu-item > a { background: rgba(255, 255, 255, .15); }
.akro-header .bricks-mobile-menu-toggle { color: #fff; }
.akro-header .bricks-mobile-menu-wrapper { background: var(--akro-dark); }
.akro-header .bricks-mobile-menu a { color: #fff; text-transform: uppercase; letter-spacing: 2px; font-size: 14px; }

/* ---------- Page hero (subpages) ---------- */
.akro-page-hero {
	position: relative;
	min-height: 440px;
	padding: 140px 20px 80px;
	justify-content: center;
	align-items: center;
	text-align: center;
	background-size: cover;
	background-position: center;
}
.akro-page-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(66, 110, 170, .55);
}
.akro-page-hero--warm::before { background: rgba(40, 20, 15, .35); }
.akro-page-hero--plain::before { display: none; }
.akro-page-hero > * { position: relative; }
.akro-page-hero h1 { color: #fff; font-size: 32px; margin: 0; }
.akro-page-hero .akro-eyebrow { color: #fff; }
.akro-page-hero--small { min-height: 340px; }

/* ---------- Home ---------- */
.akro-hero {
	position: relative;
	background-color: var(--akro-deep);
}

/* Slideshow */
.akro-slider { width: 100%; }
.akro-slide {
	position: relative;
	overflow: hidden;
	justify-content: center;
	padding: 122px 75px 300px;
}
/* Image on its own layer so only the image zooms (Ken Burns) */
.akro-slide::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	transform-origin: 60% 40%;
}
.akro-slide.is-active::before { animation: akro-kenburns 9s ease-out forwards; }
@keyframes akro-kenburns {
	from { transform: scale(1); }
	to { transform: scale(1.12); }
}
.akro-slide::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(66, 105, 160, .55) 0, rgba(66, 98, 145, .55) 420px, var(--akro-deep) 760px);
}
.akro-slide > * { position: relative; z-index: 1; }
.akro-slider .splide__arrow { background: none; opacity: .8; z-index: 2; }
.akro-slider .splide__arrow:hover { opacity: 1; }
.akro-slider .splide__arrow,
.akro-slider .splide__arrow svg,
.akro-slider .splide__arrow i { color: #fff; fill: #fff; }
.akro-slider .splide__pagination { display: none; }
@media (max-width: 991px) {
	.akro-slider .splide__arrows { display: none; }
}

.akro-hero__welcome {
	align-self: flex-end;
	align-items: flex-end;
	text-align: right;
	max-width: 620px;
	opacity: 0;
	transform: translateX(-60px);
	transition: opacity .8s ease, transform .8s ease;
}
.akro-slide.is-active .akro-hero__welcome { opacity: 1; transform: none; transition-delay: .4s; }
.akro-hero__title { color: #fff; font-size: 54px; line-height: .78; margin: 0 0 30px; }
.akro-hero__welcome p { color: #fff; font-size: 18px; margin: 0 0 18px; }

.akro-intro {
	width: calc(100% - 140px);
	max-width: 1310px;
	margin: -280px auto 0;
	padding-bottom: 60px;
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 418px 1fr;
}
.akro-intro__logo {
	grid-column: 1;
	grid-row: 1;
	background: linear-gradient(#e2e5ea, #c2c9d4);
	align-items: center;
	padding: 40px 20px 20px;
	border-top: 6px solid rgba(255, 255, 255, .25);
}
.akro-intro__logo img { width: 210px; }
.akro-intro__quote {
	grid-column: 1;
	grid-row: 2;
	background-color: var(--akro-taupe);
	background-repeat: no-repeat !important;
	background-position: center bottom !important;
	background-size: 100% auto !important;
	color: #fff;
	text-align: center;
	padding: 70px 40px 260px;
	border: 5px solid rgba(255, 255, 255, .15);
	border-right: 0;
}
.akro-intro__quote .akro-quote { font-family: var(--akro-font-heading); font-size: 24px; line-height: 2; color: #fff; }
.akro-intro__quote .akro-quote-source { font-size: 13px; margin-top: 18px; }
.akro-intro__text {
	grid-column: 2;
	grid-row: 2;
	background: #fff;
	padding: 60px 70px;
	text-align: center;
	align-items: center;
	justify-content: center;
	border: 5px solid rgba(255, 255, 255, .15);
	background-clip: padding-box;
}
.akro-intro__text h2 { font-size: 40px; margin: 0 0 22px; }
.akro-intro__text p { line-height: 2; margin: 22px 0 40px; }
.akro-buttons { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 20px; }

.akro-featured {
	position: relative;
	padding: 120px 0 160px;
	background:
		url('/wp-content/uploads/2019/04/oliveharvest_alpha.png') no-repeat 20px 0 / 250px auto,
		url('/wp-content/uploads/2019/04/salat_vector_alpha.png') no-repeat right 40px bottom 0 / 320px auto;
}
.akro-featured__inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 60px;
	padding: 0 40px;
}
.akro-featured__title { align-items: center; text-align: center; gap: 28px; }
.akro-featured__title h2 { font-size: 46px; margin: 0; }

.akro-info {
	position: relative;
	padding: 90px 0 70px;
	background-size: cover;
	background-position: center;
	color: #fff;
}
.akro-info::before { content: ''; position: absolute; inset: 0; background: rgba(80, 140, 220, .7); }
.akro-info__inner {
	position: relative;
	width: 100%;
	max-width: 1300px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 60px;
}
.akro-info h3 { color: #fff; font-size: 34px; margin: 0 0 18px; }
.akro-info p, .akro-info dl { color: #fff; font-size: 16px; margin: 0; }

/* Opening hours table */
.akro-hours { display: grid; grid-template-columns: 180px 1fr; row-gap: 10px; margin: 0 0 14px; }
.akro-hours dt { font-weight: 700; }
.akro-hours dd { margin: 0; }

/* ---------- Food menu ---------- */
.akro-food-menu { padding: 50px 20px 90px; align-items: center; }
.akro-food-menu__notice { font-size: 24px; margin: 0 0 40px; text-align: center; }
.akro-filter {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px 4px;
	max-width: 1000px;
	margin-bottom: 14px;
}
.akro-filter button {
	font-family: var(--akro-font-body);
	font-size: 13px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--akro-text);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: 4px 14px;
	cursor: pointer;
	transition: color .2s, border-color .2s;
}
.akro-filter button:hover,
.akro-filter button.is-active { color: var(--akro-blue); border-bottom-color: var(--akro-blue); }
.akro-tags { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 30px; }
.akro-tags button {
	font-family: var(--akro-font-body);
	font-size: 13px;
	color: var(--akro-taupe);
	background: #fff;
	border: 1px solid var(--akro-taupe);
	border-radius: 20px;
	padding: 2px 14px;
	cursor: pointer;
	transition: background .2s, color .2s;
}
.akro-tags button.is-active { background: var(--akro-taupe); color: #fff; }
.akro-tags:not(:has(button)) { display: none; }

.akro-group { width: 100%; max-width: 1100px; align-items: center; padding-top: 30px; }
.akro-group__tab:empty { display: none; }
.akro-group__title { font-size: 32px; margin: 0 0 30px; }

/* Fade in/out while filtering */
.akro-group,
.akro-dish { transition: opacity .3s ease, transform .3s ease; }
.akro-group.is-leaving,
.akro-dish.is-leaving { opacity: 0; transform: translateY(12px) scale(.98); }
.akro-group[hidden],
.akro-dish[hidden] { display: none !important; }

/* Dish list */
.akro-list {
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 70px;
	row-gap: 22px;
}
.akro-dish {
	display: grid;
	grid-template-columns: 50px 1fr;
	align-items: baseline;
}
.akro-dish__number { font-size: 12px; color: var(--akro-taupe); }
.akro-dish__head { display: flex; align-items: baseline; gap: 8px; flex-direction: row; }
.akro-dish__name { font-family: var(--akro-font-heading); font-size: 21px; color: var(--akro-brown); text-transform: capitalize; line-height: 1.3; }
.akro-dish__dots { flex: 1; border-bottom: 1px dotted #c9c0b8; min-width: 10px; }
.akro-dish__price { font-family: var(--akro-font-heading); font-size: 21px; color: var(--akro-brown); white-space: nowrap; }
.akro-dish__description { grid-column: 2; font-size: 15px; line-height: 1.9; color: var(--akro-taupe); }
.akro-dish__description:empty { display: none; }

.akro-band {
	position: relative;
	min-height: 300px;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 60px 20px;
	color: #fff;
}
.akro-band::before { content: ''; position: absolute; inset: 0; background: rgba(80, 140, 220, .6); }
.akro-band > * { position: relative; }
.akro-band h3 { color: #fff; font-size: 32px; }
.akro-band p { color: #fff; font-size: 15px; font-weight: 700; margin: 0 0 10px; }

.akro-lunch { padding: 60px 20px 90px; align-items: center; }
.akro-lunch h2 { font-size: 34px; margin: 0 0 10px; }
.akro-lunch__notice { font-size: 15px; margin-bottom: 40px; }
.akro-lunch .akro-list { max-width: 1200px; }

/* ---------- About ---------- */
.akro-section { width: 100%; max-width: 1140px; margin: 0 auto; padding: 70px 40px; }
.akro-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.akro-divider { border-top: 3px double rgba(0, 0, 0, .1); }
.akro-dropcap::first-letter { float: left; font-family: var(--akro-font-heading); font-size: 44px; line-height: 1; margin: 4px 8px 0 0; color: var(--akro-text); }
.akro-photo img, .akro-photo .splide__slide img { border: 4px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); }
.akro-reviews {
	position: relative;
	padding: 50px 20px 70px;
	background-size: cover;
	background-position: center;
	align-items: center;
	text-align: center;
	color: #fff;
}
.akro-reviews::before { content: ''; position: absolute; inset: 0; background: rgba(80, 140, 220, .6); }
.akro-reviews > * { position: relative; }
.akro-reviews h2 { color: #fff; font-size: 34px; margin: 0 0 16px; }
.akro-reviews p { color: #fff; max-width: 820px; }
.akro-quote-box { background: rgba(40, 60, 90, .7); padding: 30px; max-width: 740px; margin-top: 20px; align-items: center; }
.akro-cta {
	max-width: 860px;
	margin: 60px auto;
	padding: 30px;
	background: #f7f7f7;
	border: 1px solid #eee;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.akro-cta h2 { font-size: 30px; margin: 0 0 10px; }
.akro-cta p { margin: 0; }

/* ---------- Contact ---------- */
.akro-contact { gap: 100px; padding-top: 90px; padding-bottom: 120px; }
.akro-map-image { border: 1px solid #a9d1f0; padding: 4px; margin: 30px 0 14px; text-align: center; }
.akro-map-image figcaption { padding: 6px 0 4px; }
.akro-social { flex-direction: row; gap: 22px; margin-top: 30px; font-size: 20px; }
.akro-social .brxe-icon { color: var(--akro-text); }

/* ---------- Legal pages ---------- */
.akro-legal { width: 100%; max-width: 1140px; margin: 0 auto; padding: 70px 40px 90px; }
.akro-legal h1 { font-size: 40px; }
.akro-legal h2, .akro-legal h3 { margin-top: 1.5em; }

/* ---------- Footer ---------- */
.akro-footer {
	position: relative;
	padding: 45px 20px;
	text-align: center;
	background-size: cover;
	background-position: center;
	color: var(--akro-grey);
}
.akro-footer::before { content: ''; position: absolute; inset: 0; background: rgba(240, 240, 240, .85); }
.akro-footer > * { position: relative; }
.akro-footer a { color: var(--akro-grey); }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
	.akro-featured { padding: 80px 0; background: none; }
	.akro-topbar { padding: 0 16px; font-size: 13px; }
	.akro-topbar__right { display: none; }
	.akro-header { position: absolute; padding: 0 16px; }
	.akro-slide { padding: 140px 16px 60px; }
	.akro-hero__welcome { align-self: center; align-items: center; text-align: center; }
	.akro-hero__title { font-size: 34px; line-height: 1; }
	.akro-hero__welcome p { display: none; }
	.akro-intro { width: 100%; grid-template-columns: 1fr; margin-top: 0; padding-bottom: 40px; }
	.akro-intro__logo { display: none; }
	.akro-intro__quote { padding: 30px 20px; background-image: none !important; border: 0; }
	.akro-intro__text { grid-column: 1; grid-row: auto; padding: 40px 20px; border: 0; }
	.akro-intro__text h2 { font-size: 34px; }
	.akro-featured__inner, .akro-info__inner, .akro-two-col { grid-template-columns: 1fr; padding: 0 16px; gap: 40px; }
	.akro-list { grid-template-columns: 1fr; }
	.akro-section, .akro-legal { padding: 50px 16px; }
	.akro-cta { flex-direction: column; align-items: flex-start; margin: 40px 16px; }
	.akro-contact { gap: 40px; }
	.akro-hours { grid-template-columns: 1fr; row-gap: 0; }
	.akro-band { background-attachment: scroll; }
}

@media (prefers-reduced-motion: reduce) {
	.akro-group, .akro-dish, .akro-hero__welcome { transition: none; }
	.akro-slide.is-active::before { animation: none; }
}

/* ---------- Refinements ---------- */
.akro-btn { white-space: nowrap; }
.akro-topbar .brxe-search .toggle { color: #fff; }
.akro-contact .akro-underline { margin-top: 50px; margin-bottom: 20px; }
.akro-contact .brxe-block > .akro-underline:first-child { margin-top: 0; }
.akro-social .brxe-icon,
.akro-social svg { width: 20px; height: 20px; font-size: 20px; }
.akro-photo .splide__arrows { display: none; }
.akro-dish__head { flex-wrap: nowrap; }
.akro-dish__name { flex: 0 1 auto; }
@media (max-width: 991px) {
	.akro-intro__quote { grid-row: auto; }
}
/* Mobile menu above the top bar, in Akropolis brown */
.akro-header { z-index: 25; }
.akro-header .bricks-mobile-menu-wrapper:before { background-color: var(--akro-dark); }
.akro-header .bricks-mobile-menu a { line-height: 1.4; }

/* ---------- Campaign popup ---------- */
.brx-popup:has(.akro-popup) { justify-content: center; align-items: center; }
.brx-popup-content:has(> .akro-popup) { width: auto; padding: 0; background: none; box-shadow: none; }
.akro-popup {
	position: relative;
	width: min(560px, calc(100vw - 32px));
	max-height: calc(100vh - 32px);
	overflow-y: auto;
	padding: 50px 40px 40px;
	background: #fff;
	border-top: 6px solid var(--akro-taupe);
	box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
	align-items: center;
	text-align: center;
	gap: 18px;
}
.akro-popup h2 { font-size: 36px; margin: 0; }
.akro-popup p { margin: 0; line-height: 1.8; }
.akro-popup .akro-hours { grid-template-columns: auto auto; column-gap: 24px; text-align: left; margin: 16px auto; width: fit-content; }
.akro-popup__close {
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: 22px;
	color: var(--akro-taupe);
	cursor: pointer;
}
.akro-popup__close:hover, .akro-popup__close:focus { color: var(--akro-brown); }
.akro-popup__close:focus { outline: 2px solid rgba(147, 131, 114, .5); outline-offset: 4px; border-radius: 50%; }
@media (max-width: 991px) {
	.akro-popup { padding: 44px 20px 30px; }
	.akro-popup h2 { font-size: 30px; }
	.akro-popup .akro-hours { grid-template-columns: 1fr; }
}

/* Popup with image (e.g. Christmas Eve) */
.akro-popup--image {
	display: grid;
	grid-template-columns: 42% 1fr;
	width: min(900px, calc(100vw - 32px));
	padding: 0;
	gap: 0;
	text-align: center;
}
.akro-popup__image { min-height: 100%; background-size: cover; background-position: center; }
.akro-popup__content { align-items: center; gap: 16px; padding: 56px 44px 40px; }
.akro-popup--image h2 { font-size: 40px; line-height: 1.1; }
.akro-popup__event {
	align-items: center;
	width: 100%;
	padding: 18px 10px;
	border-top: 1px solid rgba(147, 131, 114, .35);
	border-bottom: 1px solid rgba(147, 131, 114, .35);
}
.akro-popup__date { font-family: var(--akro-font-heading); font-size: 34px; line-height: 1.1; color: var(--akro-brown); }
.akro-popup__time { font-size: 17px; letter-spacing: 1px; color: var(--akro-text); }
.akro-popup__note { font-size: 15px; }
.akro-popup--image .akro-popup__close { z-index: 2; }
@media (max-width: 767px) {
	.akro-popup--image { grid-template-columns: 1fr; }
	.akro-popup__image { min-height: 190px; }
	.akro-popup__content { padding: 28px 20px 26px; gap: 12px; }
	.akro-popup--image h2 { font-size: 30px; }
	.akro-popup__date { font-size: 28px; }
	.akro-popup--image .akro-popup__close { color: #fff; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6)); }
}