/*
 * Site stylesheet. Two kinds of rule live here:
 *
 * 1. The theme customisations that used to be inlined into every page by
 *    WordPress (customify output + wp-custom-css), carried over verbatim in
 *    meaning: the gold accent, the fonts, the caption style.
 * 2. Rules for what replaced WordPress plugins: the photo gallery and its
 *    lightbox, and heroes drawn as a colour instead of a one-colour PNG.
 */

/* ------------------------------------------------------------- fonts */

h1, h2, h3, h4, h5, h6, hgroup, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
blockquote, .tabs__nav, .popular-posts__time, .pagination li a,
.pagination li span {
	font-family: "Source Sans 3", "SF Pro Text", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 200;
}

.headline__secondary {
	font-family: "Herr Von Muellerhoff", "Lucida Handwriting", "Brush Script MT", "Comic Sans", "Comic Sans MS", Chalkboard, cursive;
	font-weight: 400;
}

.navigation a {
	font-family: Cabin, "SF Pro Text", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
}

html, .wp-caption-text, .small-link, .post-nav-link__label, .author__social-link, .comment__links, .score__desc {
	font-family: Cabin, "SF Pro Text", Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
}

/* ---------------------------------------------- theme accent (C59D5F) */

.article__header[class] .article__headline .headline__description .btn:hover,
.article__header[class] .article__headline .headline__description .btn:active,
.article__header[class] .article__headline .headline__description .btn:focus { background-color: #C59D5F; }

.btn--text.wpcf7-form-control.wpcf7-submit { color: #C59D5F; }
blockquote { color: #C59D5F; border-color: #C59D5F; }
a, a:hover, .article__content a:not([class]), .nav--main a:hover,
.headroom--not-top .nav--main a:hover, .tabs__nav a.current,
.site-footer .separator--flower, .copyright-text a, .nav--footer a:hover { color: #C59D5F; }
.menu-list__item-highlight-title, .promo-box__container { background-color: #C59D5F; }
blockquote, .menu-list__item-highlight-wrapper:before { border-color: #C59D5F; }
select:focus, textarea:focus, input[type="text"]:focus, input[type="email"]:focus,
input[type="tel"]:focus { outline-color: #C59D5F; }
.copyright-area.copyright-area__accent svg path { fill: #C59D5F; }
.sidebar--footer a:hover, .sidebar--footer .widget [class*="social"] > ul a:before { color: #C59D5F; }
.sidebar--footer__accent, .copyright-area.copyright-area__accent { background-color: #C59D5F; }

/* ------------------------------------------------------------ layout */

.container, .search__container, .site-header__container, .header--sticky .site-header__container { max-width: 1250px; }
.headline__secondary { margin-bottom: -38px; }
.headline__secondary .first-letter { top: 9px; }
.navigation a { font-size: 13px; letter-spacing: 1px; }
.nav--main > .menu-item > a { text-transform: uppercase; text-decoration: none; }
body { font-size: 16px; line-height: 1.7; }
.site-title--image img { max-height: 31px; }
.site-logo { font-size: 31px; }

@media screen and (min-width: 900px) {
	.page .type-page .article__content { padding-top: 78px; padding-bottom: 78px; }
	.sidebar--main { width: 300px; }
	.page-content.has-sidebar .page-content__wrapper { margin-right: 300px; }
	.page-content.has-sidebar { margin-right: -300px; }
	body > .page, .site-header { border-width: 0; }
	div.page { padding-left: 0; padding-right: 0; }
}

@media only screen and (max-width: 899px) {
	body .navigation--main { background-color: #252525; }
	.navigation--main .nav--main li a { color: #CCCCCC; }
}

/* --------------------------------------------------- former custom css */

.site-content article, .widget-area .widget {
	word-wrap: normal;
	hyphens: none;
}

.wp-caption-text {
	position: absolute;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-bottom: 0 !important;
	font-size: 22px;
	line-height: 180% !important;
	width: 100%;
	text-align: center;
	color: #f5f5f5;
	background: rgba(0, 0, 0, 0.50);
}

li p:empty { display: inline; }

/* Headings and dish titles carry the theme's heavier weight. */
.menu-list__item-title, h2 { font-weight: 800; }

/* The call-to-action button on Events und Catering spans the middle third.
 * The original targeted the link by its absolute URL; the class says why. */
.btn--wide {
	display: flex;
	margin-left: 35%;
	margin-right: 35%;
	align-content: center;
	justify-content: center;
}

/* --------------------------------------------------------------- hero */

/* The hero of every page was a solid-colour PNG; now it is just a colour.
 * The class sits on the section header the build writes. The value is what
 * the browser finally painted of that PNG (it carries colour metadata, so the
 * stored #70202b renders as this). */
.c-hero__background { background-color: #632029; }
.c-hero__background .c-hero__image { display: none; }
.c-hero__background { min-height: 100%; }

/* The theme's script pinned the full-height hero to 600px, capped by the
 * window; the stylesheet's 100vh never wins in practice. */
.c-hero.full-height { min-height: min(600px, 100vh); }

/* The theme's script faded the headline in as its hero scrolled into view.
 * rosa.css already parks these at opacity 0 and carries the `fade-in`
 * keyframes; what it never had was the class that plays them. `--revealed`
 * is that class, and everything here is scoped to `.js` — which is set before
 * first paint — so a browser that never runs the script simply shows the
 * headings, rather than being left with an invisible hero. */
.js .article__header--revealed .article__headline .headline__primary,
.js .article__header--revealed .article__headline .headline__secondary,
.js .article__header--revealed .article__headline .headline__description,
.js .article__header--revealed .article__headline .star,
.js .article__header--revealed .article__headline .line,
.js .article__header--revealed .article__headline .arrow {
	/* The resting state is this declaration, not the animation's fill: if the
	 * animation never runs, the headline is still visible. */
	opacity: 1;
	animation: fade-in 0.8s ease-out both;
}

/* The pieces arrive in reading order rather than all at once. */
.js .article__header--revealed .article__headline .headline__primary { animation-delay: 0.12s; }
.js .article__header--revealed .article__headline .star,
.js .article__header--revealed .article__headline .line,
.js .article__header--revealed .article__headline .arrow { animation-delay: 0.24s; }
.js .article__header--revealed .article__headline .headline__description { animation-delay: 0.32s; }

/* Without the script, and for anyone who asked for less movement, the
 * headline is simply there. */
html:not(.js) .article__header .article__headline .headline__primary,
html:not(.js) .article__header .article__headline .headline__secondary,
html:not(.js) .article__header .article__headline .headline__description,
html:not(.js) .article__header .article__headline .star,
html:not(.js) .article__header .article__headline .line,
html:not(.js) .article__header .article__headline .arrow { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
	.js .article__header .article__headline .headline__primary,
	.js .article__header .article__headline .headline__secondary,
	.js .article__header .article__headline .headline__description,
	.js .article__header .article__headline .star,
	.js .article__header .article__headline .line,
	.js .article__header .article__headline .arrow { opacity: 1; animation: none; }

	.c-bully__bullet, .c-bully__bullet--active { animation: none; transition: none; }
}

/* The customiser widened the theme's 24px item padding to 26px; at that width
 * the last item wraps to a second line, exactly as on the old site. */
@media screen and (min-width: 900px) {
	.nav--main > li > a { padding-left: 26px; padding-right: 26px; }
}

@media screen and (max-width: 899px) {
	.site-title { padding: 0 16px 0 58px; text-align: center; }
	.site-logo { font-size: 24px; line-height: 1.2; }
}

/* ------------------------------------------------------------- gallery */

/* A justified photo grid: rows are packed to the container width, each row's
 * height derived from its images' aspect ratios. No plugin, no dependency. */
.gallery { display: block; overflow: hidden; margin: 0 !important; }
.gallery-row { display: flex; gap: 4px; margin-bottom: 4px; justify-content: center; }
.gallery .gallery-item { width: auto; position: relative; margin: 0; border: 0; cursor: zoom-in; }
.gallery-row .gallery-item { flex: var(--aspect) 1 0; min-width: 0; }
.gallery-row .gallery-item img { display: block; width: 100%; height: auto; }
.gallery-item.has-caption figcaption {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: .3em .6em;
	text-align: center;
	color: #f5f5f5;
	background: rgba(0, 0, 0, 0.50);
	font-size: 15px;
	opacity: 0;
	transition: opacity .2s;
}
.gallery-item.has-caption:hover figcaption,
.gallery-item.has-caption:focus-within figcaption { opacity: 1; }

.grid-gallery { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.grid-gallery .gallery-item { flex: 0 0 150px; width: 150px; border: 1px solid #e0e0e0; }
/* The theme's dots are buttons here, so they can be reached by keyboard. That
 * brings the UA's `color: buttontext`, which would shadow the colour inherited
 * from .c-bully — and the theme draws each dot with `currentColor`, so the
 * inverted (white-on-hero) state would silently render black. */
.c-bully__bullet { display: block; background: none; border: 0; font: inherit; color: inherit; }
.grid-gallery .gallery-item img { width: 150px; height: 150px; object-fit: cover; }

/* The lightbox: one dialog per page, filled on click. Esc / click outside /
 * the × close it; ← → move; the counter is announced to screen readers. */
.lightbox[open] { width: auto; height: auto; max-width: none; max-height: none; border: 0; padding: 0; background: transparent; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.92); }
.lightbox-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 96vw; height: 92vh; }
.lightbox-stage img { max-width: 100%; max-height: 100%; object-fit: contain; user-select: none; }
.lightbox-caption { position: absolute; left: 0; right: 0; bottom: 1rem; text-align: center; color: #eee; font-size: 15px; pointer-events: none; }
.lightbox-counter { position: absolute; top: 1rem; left: 50%; transform: translateX(-50%); color: #bbb; font-size: 14px; }
.lightbox button {
	position: absolute; background: none; border: 0; color: #fff;
	font-size: 2.4rem; line-height: 1; cursor: pointer; padding: .5em;
}
.lightbox-close { top: 0; right: 0; }
.lightbox-prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 0; top: 50%; transform: translateY(-50%); }
.lightbox button:focus-visible { outline: 2px solid #C59D5F; }

/* Keep the header surface and its lettering in sync instead of snapping at
 * different points in the theme's steep easing curve. */
@media (prefers-reduced-motion: no-preference) {
	.site-header { transition: background-color 220ms ease-out, color 220ms ease-out; }
	.site-header .site-logo--text,
	.site-header .nav--main a { transition: color 220ms ease-out; }
	.site-header .nav-icon,
	.site-header .nav-icon::before,
	.site-header .nav-icon::after { transition: background-color 220ms ease-out; }
	.c-bully { transition: color 180ms ease-out; }
}

@media (prefers-reduced-motion: reduce) {
	.site-header,
	.site-header .site-logo--text,
	.site-header .nav--main a,
	.site-header .nav-icon,
	.site-header .nav-icon::before,
	.site-header .nav-icon::after,
	.c-bully { transition: none; }
}