/*
  Tillfällig, färdigkompilerad CSS för menyn-siddelen (pagebuilder_menu).
  Källan är canvas/assets/sass/pageparts/pagebuilder_menu.scss, manuellt kompilerad
  eftersom sass-källan för style.min.css (style.scss + variabler) inte finns i denna
  serverkopia av temat.

  $color-black      -> #50312F  (body/rubrik-färgen på sajten)
  $color-orange     -> #9b3f38  (länk-/accentfärg)
  $color-light-grey -> #e0e0e0  (kortbakgrund, samma som t.ex. .newsText/.bigNewsTextInner)
  $color-white      -> #fff
  $color-text       -> #50312F

  TA BORT DENNA FIL och radera enqueue-raden i functions_canvas.php när
  @import "pagebuilder_menu"; är inlagd i pageparts.scss och byggd in i
  style.min.css via CodeKit (se INSTRUKTIONER.md steg 2.1 och 4).
*/

.pagebuilderMenu .menyOffers {
	margin-bottom: 40px;
}
.pagebuilderMenu .menyOffer {
	overflow: hidden;
	border: 1px solid rgba(80, 49, 47, .1);
	border-radius: 8px;
	background-color: #e0e0e0;
	margin-bottom: 30px;
}
.pagebuilderMenu .menyOffer:last-child {
	margin-bottom: 0;
}
.pagebuilderMenu .menyOfferImage img {
	display: block;
	width: 100%;
	height: 280px;
	object-fit: cover;
}
@media (min-width: 992px) {
	.pagebuilderMenu .menyOfferImage img {
		height: 100%;
	}
}
.pagebuilderMenu .menyOfferText {
	padding: 30px;
}
.pagebuilderMenu .menyOfferLabel {
	font-size: 0.8em;
	text-transform: uppercase;
	letter-spacing: .05em;
	opacity: .7;
	margin-bottom: 5px;
}
.pagebuilderMenu .menyOfferTitle {
	margin: 0 0 10px 0;
}
.pagebuilderMenu .menyOffer .menyDishPrice {
	font-size: 1.4em;
	margin-bottom: 10px;
}
.pagebuilderMenu .menyDishThumbWrap {
	flex: 0 0 60px;
	width: 60px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.pagebuilderMenu .menyDishThumbBtn {
	width: 60px;
	height: 60px;
	padding: 0;
	border: 0;
	background: none;
	border-radius: 4px;
	overflow: hidden;
	cursor: pointer;
}
.pagebuilderMenu .menyDishAdminLink {
	display: block;
	width: 100%;
	text-align: center;
	line-height: 20px;
	font-size: 0.85em;
	border: 1px solid rgba(80, 49, 47, .15);
	border-radius: 4px;
	color: #50312F;
}
.pagebuilderMenu .menyDishAdminLink:hover {
	text-decoration: none;
	background-color: rgba(80, 49, 47, .05);
}
.pagebuilderMenu .menyDishThumb {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.pagebuilderMenu .menyCategory {
	margin-bottom: 40px;
}
.pagebuilderMenu .menyCategory:last-child {
	margin-bottom: 0;
}
.pagebuilderMenu .menyCategory--shaded {
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
	background-color: #e0e0e0;
	padding: 40px 0;
}
.pagebuilderMenu .menyCategoryTitle {
	margin-bottom: 5px;
}
.pagebuilderMenu .menyCategoryText {
	margin-bottom: 25px;
}
.pagebuilderMenu .menyCategoryText p {
	margin: 0;
}
.pagebuilderMenu .menyDish {
	margin-bottom: 25px;
}
.pagebuilderMenu .menyDishInner {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	height: 100%;
	padding: 20px;
	border: 1px solid rgba(80, 49, 47, .1);
	border-radius: 8px;
	background-color: #e0e0e0;
}
.pagebuilderMenu .menyCategory--shaded .menyDishInner {
	background-color: #fff;
}
.pagebuilderMenu .menyDishText {
	flex: 1 1 auto;
}
.pagebuilderMenu .menyDishHead {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
}
.pagebuilderMenu .menyDishTitle {
	margin: 0;
}
.pagebuilderMenu .menyDishPrice {
	white-space: nowrap;
}
.pagebuilderMenu .menyDishPrice .menyPrisOld {
	text-decoration: line-through;
	opacity: 0.6;
	margin-right: 5px;
}
.pagebuilderMenu .menyDishPrice .menyPrisErbjudande {
	font-weight: bold;
}
.pagebuilderMenu .menyDishPrice .menyPrisLunch {
	display: block;
	font-size: 0.85em;
	opacity: 0.8;
}
.pagebuilderMenu .menyDishDescription {
	margin-top: 5px;
}
.pagebuilderMenu .menyDishIngredienser {
	margin-top: 3px;
	font-size: 0.85em;
	opacity: 0.7;
	font-style: italic;
}

.menyFavoriteStar {
	color: #9b3f38;
}

.single-meny .menyBackLink {
	display: inline-block;
	margin-bottom: 20px;
	color: #50312F;
}
.single-meny .menyBackLink:hover {
	text-decoration: underline;
}
.single-meny .menyDishImage {
	margin-bottom: 20px;
}
.single-meny .menyDishImage img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.single-meny .menyDishSingleText {
	max-width: 600px;
	margin: 0 auto;
}
.single-meny .menyDishPrice {
	font-size: 1.6em;
}
.single-meny .menyDishPrice .menyPrisErbjudande {
	color: #dc3545;
}
.single-meny .menyDishCategory {
	font-size: 1.2em;
	margin-bottom: -37px;
}
.single-meny .menyDishIngredienser {
	margin-top: 20px;
}
.single-meny .menyDishIngredienserLabel {
	font-weight: bold;
	font-style: italic;
	margin-bottom: 2px;
}
.single-meny .menyInactiveMessage {
	margin-top: 10px;
	font-style: italic;
	opacity: .8;
}

.menyImageModal .modal-content {
	background: none;
	border: 0;
}
.menyImageModal .btn-close {
	position: absolute;
	top: -15px;
	right: -15px;
	z-index: 1;
	background-color: #fff;
	border-radius: 50%;
	padding: 8px;
	opacity: 1;
}
.menyImageModal img {
	width: 100%;
	border-radius: 4px;
}