/*
Theme Name: Marcello Child
Theme URI: https://marcello.qodeinteractive.com
Description: ANJU Korean Tapas Bar — Child Theme von Marcello
Author: AddUse GmbH
Template: marcello
Version: 1.1.0
Text Domain: marcello
*/

/* Schrift Outfit lokal (OFL-1.1, via @fontsource-variable/outfit 5.3.0), statt Google Fonts */
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('fonts/outfit-latin-ext-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Outfit';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('fonts/outfit-latin-wght-normal.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ANJU-Farben. --qode-main-color setzt die Theme-Option «Main Color»; hier nur, was keine Option hat. */
:root {
	--anju-font: 'Outfit', system-ui, sans-serif;
	--anju-red: #e83f31;
	--anju-beige: #f4f0e8;
	--qode-secondary-color: var(--anju-red);
	--qode-header-light-hover-color: var(--anju-red);
	--qode-header-dark-hover-color: var(--anju-red);
}

/* Fliesstext gemäss Designvorgabe Outfit Light 300 (Theme: Muli 600) */
body {
	font-weight: 300;
}

/* ---------- Header (Divided-Layout: links Kicker-Logo, Mitte ANJU, rechts Öffnungszeiten-Icon) ---------- */
/* Breite des Logos setzt die Theme-Option «Logo SVG Path Size»; das Theme gibt SVG-Logos zusätzlich eine Kontur, die das Logo fetter macht. */
.qodef-header-logo-link.qodef-source--svg-path svg,
.qodef-mobile-header-logo-link.qodef-source--svg-path svg {
	stroke: none !important;
}
.anju-header-kicker {
	display: block;
	line-height: 0;
}
.anju-header-kicker svg {
	height: 58px;
	width: auto;
}
#qodef-page-header .qodef-side-area-opener svg {
	display: block;
	height: 66px;
	width: auto;
}
#qodef-page-header .qodef-side-area-opener {
	transition: transform .2s ease;
}
#qodef-page-header .qodef-side-area-opener:hover,
#qodef-page-header .qodef-side-area-opener:focus-visible {
	transform: rotate(-6deg);
}
#qodef-page-header .qodef-divided-header-left-wrapper,
#qodef-page-header .qodef-divided-header-right-wrapper {
	padding-inline: 32px;
}

/* ---------- Side Area: Öffnungszeiten + Kontakt (Inhalt: Widget «Side Area», Block-Widget) ---------- */
#qodef-side-area {
	background-color: var(--anju-beige);
}
#qodef-side-area .qodef-side-area-close,
#qodef-side-area .qodef-m-close {
	--qode-main-color: var(--anju-red);
}
.anju-side,
#qodef-side-area .widget .anju-side h4.anju-side-title {
	text-align: start;
	color: var(--anju-red);
}
#qodef-side-area .widget .anju-side h4.anju-side-title {
	font-size: 30px;
	line-height: 1.1;
}
.anju-side-kicker {
	margin: 0;
	font-weight: 400;
}
.anju-side-title {
	margin-block: 4px 20px;
}
.anju-side-hours {
	margin: 0 0 48px;
	display: grid;
	gap: 18px;
}
.anju-side-hours dt {
	font-weight: 600;
}
.anju-side-hours dd {
	margin: 0;
	font-weight: 300;
}
.anju-side-address {
	margin: 0;
	font-weight: 300;
}
@media (max-width: 680px) {
	#qodef-side-area {
		width: 100%;
		right: -100%;
	}
	.qodef-side-area--opened #qodef-side-area {
		right: 0;
	}
}

/* ---------- Sticker 음료 (Getränke) / 음식 (Essen) neben dem Logo, rein dekorativ ---------- */
#qodef-page-header .qodef-header-logo-link {
	position: relative;
	overflow: visible;
}
#qodef-page-header .qodef-header-logo-link::before,
#qodef-page-header .qodef-header-logo-link::after {
	content: '';
	position: absolute;
	width: 46px;
	height: 46px;
	background: center / contain no-repeat;
	pointer-events: none;
	animation: anju-sticker-spin 18s linear infinite;
}
#qodef-page-header .qodef-header-logo-link::before {
	background-image: url('img/sticker-drinks.svg');
	inset-inline-end: -118px;
	inset-block-end: -38px;
}
#qodef-page-header .qodef-header-logo-link::after {
	background-image: url('img/sticker-food.svg');
	inset-inline-end: -168px;
	inset-block-end: -8px;
	animation-direction: reverse;
}
@keyframes anju-sticker-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	#qodef-page-header .qodef-header-logo-link::before,
	#qodef-page-header .qodef-header-logo-link::after {
		animation: none;
	}
}

/* ---------- Mobile Header ---------- */
#qodef-page-mobile-header {
	background-color: var(--anju-beige);
}
#qodef-page-mobile-header .qodef-side-area-mobile-header-opener svg {
	display: block;
	height: 48px;
	width: auto;
}

/* ---------- Footer (Inhalt: Widgets «Footer Top Area Column 1–4»; Hintergrund/Abstände: Theme-Optionen)
   Masse aus dem PDF von Aorta, umgerechnet auf 1440 px Breite. ---------- */
/* Das Theme färbt Footer-Texte/-Links über --qode-main-color; auf Rot wird daraus Beige. */
#qodef-page-footer-top-area {
	--qode-main-color: var(--anju-beige);
	color: var(--anju-beige);
}
#qodef-page-footer-top-area .widget h5 {
	margin-block: 0 17px;
	font-size: 22px;
	line-height: 26px;
	text-transform: none;
	font-weight: 600;
}
#qodef-page-footer-top-area .widget p {
	font-size: 18px;
	line-height: 22px;
	font-weight: 300;
	margin-block: 0 21px;
}
#qodef-page-footer-top-area .widget p strong {
	font-weight: 400;
}
#qodef-page-footer-top-area a:hover,
#qodef-page-footer-top-area a:focus-visible {
	text-decoration: underline;
}
.anju-footer-logo {
	display: block;
	max-width: 340px;
}
#qodef-page-footer-top-area .anju-footer-logo svg {
	display: block;
	width: 340px;
	max-width: 100%;
	height: auto;
}
#qodef-page-footer-top-area .widget a.anju-footer-button {
	display: inline-block;
	min-width: 73px;
	padding: 0 14px;
	line-height: 21px;
	background: var(--anju-beige);
	color: var(--anju-red);
	font-size: 10px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
	text-decoration: none;
}
/* Impressum/Datenschutz stehen auf Höhe des Fliesstexts der Nachbarspalten (ohne Überschrift) */
#qodef-page-footer-top-area .widget .anju-footer-legal p:first-child {
	margin-block-start: 43px;
}
.anju-footer-by {
	display: flex;
	align-items: center;
	gap: 12px;
}
#qodef-page-footer-top-area .widget p.anju-footer-by {
	margin-block: 47px 39px;
}
#qodef-page-footer-top-area .widget p:has(> .anju-footer-button) {
	margin-block-start: -9px;
}
.anju-footer-by svg {
	height: 29px;
	width: auto;
}
#qodef-page-footer-top-area .widget p.anju-footer-credit {
	font-size: 14px;
	line-height: 18px;
	margin: 0;
}
/* Theme setzt Footer-Links in Versalien/fett; gemäss Vorlage normaler Text */
#qodef-page-footer-top-area .widget .anju-footer-col a:not(.anju-footer-button) {
	display: inline;
	line-height: inherit;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 300;
	font-size: inherit;
}
/* Spaltenraster gemäss PDF: 38.2 % | 23.1 % | 17.4 % | Rest, 48 px Seitenrand */
@media (min-width: 1025px) {
	#qodef-page-footer-top-area-inner .qodef-grid-inner {
		display: grid;
		grid-template-columns: 38.2% 23.1% 17.4% 1fr;
		margin: 0;
	}
	#qodef-page-footer-top-area-inner .qodef-grid-inner::before,
	#qodef-page-footer-top-area-inner .qodef-grid-inner::after {
		content: none;
	}
	#qodef-page-footer-top-area-inner .qodef-grid-item {
		float: none;
		width: auto;
		padding: 0;
		margin: 0;
	}
	#qodef-page-footer-top-area .widget,
	#qodef-page-footer-top-area .widget .anju-footer-col > :last-child {
		margin-block-end: 0;
	}
	/* Spalten 2–4 beginnen auf Höhe des Schriftzugs «anju», nicht der Katze */
	#qodef-page-footer-top-area-inner .qodef-grid-item:not(:first-child) {
		padding-block-start: 47px;
	}
}
@media (max-width: 1024px) {
	#qodef-page-footer-top-area .widget {
		margin-block-end: 0;
	}
	#qodef-page-footer-top-area .anju-footer-logo svg {
		width: 260px;
	}
}
@media (max-width: 680px) {
	#qodef-page-footer-top-area-inner .qodef-grid-item {
		margin-block-end: 40px;
	}
	#qodef-page-footer-top-area-inner .qodef-grid-item:last-child {
		margin-block-end: 0;
	}
	#qodef-page-footer-top-area .widget .anju-footer-legal p:first-child {
		margin-block-start: 0;
	}
	#qodef-page-footer-top-area .widget p.anju-footer-by {
		margin-block: 32px 24px;
	}
}

/* ---------- Tapas-Karussell (Plugin «ANJU Tapas», Markup des Theme-Produktkarussells) ---------- */
.anju-tapas .qodef-woo-product-tagline {
	font-weight: 300;
}
/* Theme blendet beim Hover den Preis aus und schiebt «In den Warenkorb» ein.
   Ohne Shop bliebe die Stelle leer – Preis bleibt deshalb stehen. */
.anju-tapas.qodef-woo-product-list .qodef-e-inner:hover .qodef-woo-product-content .price {
	transform: none;
	opacity: 1;
	visibility: visible;
}
/* «Neu»-Badge (Checkbox beim Gericht): Stil vom Theme, Schrift wie Überschriften */
.anju-tapas .qodef-woo-product-mark.qodef-new {
	font-weight: 600;
	font-size: 18px;
}

/* ---------- Blog-Detailseite: keine Tags, keine Kommentar-Anzeige (Theme hat dafür keine Option) ---------- */
.single-post .qodef-e-tags,
.qodef-e-info-comments-link,
.qodef-e-info-comments-link + .qodef-info-separator-end {
	display: none;
}

/* Pascha-Bar-Logo im Footer ist ein Link: Unterstreichung beim Hover vermeiden */
#qodef-page-footer-top-area .widget .anju-footer-col a.anju-footer-pascha {
	display: block;
	margin: 0;
	line-height: 0;
	text-decoration: none;
}
.anju-footer-pascha svg {
	display: block;
}
#qodef-page-footer-top-area .widget a.anju-footer-pascha:hover,
#qodef-page-footer-top-area .widget a.anju-footer-pascha:focus-visible {
	opacity: .8;
	text-decoration: none;
}

/* ---------- Rechtliche Seiten: Platzhalter, bis der Kunde die Angaben liefert ---------- */
mark.anju-platzhalter {
	background: #fff3a8;
	color: inherit;
	padding-inline: 2px;
}
.anju-legal {
	max-width: 760px;
}
.anju-legal h1 {
	font-size: clamp(40px, 5vw, 56px);
	line-height: 1.05;
	margin-block: 0 40px;
}
.anju-legal h2 {
	font-size: 22px;
	line-height: 26px;
	text-transform: none;
	margin-block: 36px 10px;
}
.anju-legal p {
	font-size: 17px;
	line-height: 1.45;
	margin-block: 0 12px;
}

/* Öffnungszeiten-Liste (Startseite): Zeit nicht umbrechen («16.00–23.00» bleibt zusammen) */
#oeffnungszeiten .qodef-working-hours-list .qodef-hours {
	white-space: nowrap;
}