/*
Theme Name: Lech Journal
Description: Calm, white personal-blog layout for LECH on tour — large light headings, serif reading text, spaced capitals for labels, a hero for the newest post and an "about us" sidebar. Inspired by the layout of personal-blog themes such as Marcell; no code or artwork from them.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lech-journal
*/

/* ---- Labels: small spaced capitals (dates, categories, menu, headings in the sidebar) ---- */
.lj-label,
.lj-label a,
.wp-block-navigation.lj-nav,
.wp-block-post-date.lj-label,
.wp-block-post-terms.lj-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
}

/* Sidebar headings: wide spacing and a short rule underneath, like a magazine column. */
.lj-side-heading {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.4em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	padding-bottom: 0.6rem;
	position: relative;
}
.lj-side-heading::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.2rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

/* Links: graphite text with a soft gold underline (gold itself is too light to read as text). */
a { text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: var(--wp--preset--color--accent); }

/* Menu: "×" between the top-level items. */
.lj-nav .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after {
	content: "×";
	margin-left: 1.1rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.7rem;
}

/* Dropdowns as wide as their longest entry, e.g. "Lexe @ Montréal (2010–2011)". */
.lj-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { white-space: nowrap; }

/* ---- Hero: newest post on its own photo ---- */
.lj-hero .wp-block-post-title a { text-decoration: none; }
/* The hero shows the whole photo: its height follows the photo's proportions,
   up to 78% of the screen height. A tall photo is shown complete in the middle,
   with a blurred copy of itself filling the sides. */
.lj-hero .wp-block-cover {
	padding: 0 !important;
	min-height: 0 !important;
	border-radius: 22px;
	overflow: hidden;
	background: var(--wp--preset--color--contrast);
}
.lj-hero .wp-block-cover__image-background { filter: blur(28px) brightness(0.72); transform: scale(1.15); }
.lj-hero .wp-block-cover__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; position: relative; }
.lj-hero .lj-hero-img { margin: 0 !important; }
.lj-hero .lj-hero-img img {
	display: block;
	width: 100%;
	height: auto !important;
	max-height: min(78vh, 780px);
	object-fit: contain !important;
}
.lj-hero .lj-hero-text {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 !important;
	padding: 5rem 3.4rem 2.6rem;
	background: linear-gradient(0deg, rgba(46,42,37,.8) 0%, rgba(46,42,37,.45) 55%, rgba(46,42,37,0) 100%);
	pointer-events: none;
}
.lj-hero .lj-hero-text a { pointer-events: auto; }
.lj-hero .lj-hero-text .wp-block-post-title { max-width: 760px; margin-top: 0.6rem; text-shadow: 0 1px 18px rgba(0,0,0,.35); }

/* Search in the header: a thin circle, not a filled button. */
header .wp-block-search__button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--contrast);
	border: 1.5px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
	width: 2.6rem;
	height: 2.6rem;
	flex: 0 0 2.6rem;
	aspect-ratio: 1;
	padding: 0;
}
header .wp-block-search { flex-shrink: 0; }
.lj-side-box { margin-top: 3rem; }

/* ---- Cards: a grid that opens a second (third) column whenever a column
   can be at least 340px wide; each card is photo on top, text below ---- */
.lj-cards {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
	gap: 2.4rem 2rem;
}
.lj-cards > li { margin: 0; display: flex; }
.lj-cards > li > .lj-card { flex: 1; flex-direction: column; flex-wrap: nowrap !important; }
.lj-card {
	background: var(--wp--preset--color--white);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 22px 44px -30px rgba(90, 70, 30, 0.38);
	flex-wrap: wrap;
}
.lj-card > .lj-card-media { flex: 0 0 auto; width: 100%; margin: 0; }

/* Card photo: always the same 4:3 box, but the photo inside is shown whole.
   Where it does not fill the box (banners, portraits), a blurred copy of the
   same photo fills the rest. */
.lj-card-media.wp-block-cover {
	/* Frame follows the photo: square for portraits, up to 2:1 for panoramas. */
	aspect-ratio: clamp(1, var(--lot-ar, 1.3333), 2);
	min-height: 0 !important;
	padding: 0 !important;
	background: var(--wp--preset--color--surface);
}
.lj-card-media .wp-block-cover__image-background { filter: blur(22px) brightness(0.92); transform: scale(1.2); }
.lj-card-media .wp-block-cover__inner-container { width: 100% !important; height: 100%; max-width: none !important; margin: 0 !important; }
.lj-card-media .lj-card-img, .lj-card-media .lj-card-img a { display: block; width: 100%; height: 100%; margin: 0 !important; }
.lj-card-media .lj-card-img img { width: 100%; height: 100% !important; object-fit: contain !important; }
.lj-card > .lj-card-body { flex: 1 1 auto; width: 100%; }
.lj-card .wp-block-post-title a { text-decoration: none; }
.lj-card .wp-block-post-title a:hover { color: var(--wp--preset--color--accent); }

/* Category with a small round mark in front, as in a byline. */
.lj-cat a::before {
	content: "";
	display: inline-block;
	width: 0.55rem;
	height: 0.55rem;
	margin-right: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	vertical-align: 0.05rem;
}
.lj-cat .wp-block-post-terms__separator { display: none; }
.lj-cat .wp-block-post-terms__separator + a::before { margin-left: 1.2rem; }

/* ---- Sidebar lists ---- */
.lj-side .wp-block-categories-list { list-style: none; padding: 0; }
.lj-side .wp-block-categories-list li {
	font-family: var(--wp--preset--font-family--literata);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 0.45rem 0;
}
.lj-side .wp-block-categories-list a { text-decoration: none; }

/* Newest posts, numbered on round thumbnails. */
.lj-side .wp-block-latest-posts { counter-reset: lj; padding: 0; }
.lj-side .wp-block-latest-posts li {
	counter-increment: lj;
	display: grid;
	grid-template-columns: 4.6rem 1fr;
	column-gap: 1rem;
	align-items: center;
	margin-bottom: 1.1rem;
	position: relative;
}
.lj-side .wp-block-latest-posts__featured-image { grid-row: span 2; margin: 0 !important; }
.lj-side .wp-block-latest-posts__featured-image img { width: 4.6rem; height: 4.6rem; object-fit: cover; border-radius: 50%; }
.lj-side .wp-block-latest-posts li::before {
	content: counter(lj);
	position: absolute;
	left: -0.2rem;
	top: -0.2rem;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--contrast);
	font: 700 0.65rem/1.4rem var(--wp--preset--font-family--manrope);
	text-align: center;
	z-index: 1;
}
.lj-side .wp-block-latest-posts__post-title { font-family: var(--wp--preset--font-family--literata); text-decoration: none; line-height: 1.35; }
.lj-side .wp-block-latest-posts__post-date { font: 500 0.66rem var(--wp--preset--font-family--manrope); letter-spacing: 0.16em; text-transform: uppercase; color: var(--wp--preset--color--muted); }

/* About block: a sand card with a round portrait. */
.lj-about { background: var(--wp--preset--color--surface); border-radius: 18px; padding: 1.8rem 1.6rem 1.4rem; }
.lj-about-img img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 3px solid var(--wp--preset--color--white); }
.lj-side .wp-block-search__input { border-radius: 999px; border-color: var(--wp--preset--color--line); background: var(--wp--preset--color--white); padding-left: 1.1rem; }

/* Footer on a soft sand band. */
.lj-footer { background: var(--wp--preset--color--surface); }

/* ---- Pagination ---- */
.wp-block-query-pagination { font-family: var(--wp--preset--font-family--manrope); font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; }

/* ---- Phones ---- */
@media (max-width: 781px) {
	.lj-col-side { order: 2; margin-top: 3rem; }
	.lj-nav .wp-block-navigation__container > .wp-block-navigation-item::after { display: none; }
	.lj-hero .wp-block-post-title { font-size: 1.7rem !important; }
	/* On a phone the title goes below the photo, so it covers none of it. */
	.lj-hero .lj-hero-text { position: static; padding: 1.4rem 1.4rem 1.6rem; background: var(--wp--preset--color--contrast); }
}

/* ---- Tablets: the 30 % sidebar gets too narrow, so it moves below the posts
   and lays its boxes out side by side. ---- */
@media (min-width: 782px) and (max-width: 1024px) {
	.lj-layout { flex-wrap: wrap !important; }
	.lj-layout > .wp-block-column { flex-basis: 100% !important; }
	.lj-col-side { order: 2; margin-top: 3rem; }
	.lj-side { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: start; }
	.lj-side > .lj-about { grid-column: 1 / -1; }
	.lj-side > .lj-side-box { margin-top: 0 !important; }
}

/* Language switcher button (Google Language Translator) in the theme colours. */
#glt-translate-trigger {
	background: var(--wp--preset--color--champagne) !important;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 999px !important;
	box-shadow: 0 6px 18px -8px rgba(90, 70, 30, 0.45) !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
}
#glt-translate-trigger span { color: var(--wp--preset--color--contrast) !important; }

/* Card text starts at the top, so dates line up across a row. */
.lj-cards .lj-card-body { justify-content: flex-start !important; }

/* Menu on one line at the 1320px page width: slightly tighter spacing. */
@media (min-width: 1025px) {
	.wp-block-navigation.lj-nav { letter-spacing: 0.14em; --wp--style--block-gap: 0.85rem; gap: 0.85rem; }
	.lj-nav .wp-block-navigation__container { gap: 0.85rem; }
	.lj-nav .wp-block-navigation__container > .wp-block-navigation-item:not(:last-child)::after { margin-left: 0.85rem; }
}

/* ---- Title photo on the front page: the whole photo on the left, the
   welcome text on champagne on the right; stacked on tablets and phones.
   Built from normal blocks, so photo and text can be changed in the Site
   Editor (Design → Editor → Vorlagen → Blog-Startseite). ---- */
.lj-welcome {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	border-radius: 22px;
	overflow: hidden;
	background: var(--wp--preset--color--champagne);
	box-shadow: 0 30px 60px -40px rgba(90, 70, 30, 0.45);
}
.lj-welcome > * { margin: 0 !important; }
.lj-welcome-img img { display: block; width: 100%; height: 100%; aspect-ratio: var(--lot-ar, 1.3333); object-fit: cover; }
.lj-welcome-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 3rem clamp(1.8rem, 4vw, 3.6rem);
	color: var(--wp--preset--color--contrast);
}
.lj-welcome-text > * { margin-block: 0; }
.lj-welcome-text .lj-label { color: var(--wp--preset--color--accent); }
.lj-welcome-title { font-size: clamp(2rem, 3.4vw, 3.1rem); line-height: 1.1; margin-top: 0.8rem !important; }
.lj-welcome-sub { margin-top: 1rem !important; font-size: 1.05rem; line-height: 1.6; }
.lj-welcome-links { gap: 0.8rem; margin-top: 1.8rem !important; }
.lj-welcome-links .wp-block-button__link {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font: 600 0.72rem var(--wp--preset--font-family--manrope);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 0.8rem 1.4rem;
}
.lj-welcome-links .wp-block-button__link:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
.lj-welcome-links .is-style-outline .wp-block-button__link { background: transparent; color: var(--wp--preset--color--contrast); border: 1px solid var(--wp--preset--color--contrast); }
.lj-welcome-links .is-style-outline .wp-block-button__link:hover { background: rgba(255, 255, 255, 0.45); color: var(--wp--preset--color--contrast); }
/* A wide title photo is shown full width and whole; the text runs below it
   as a band: heading on the left, text and buttons on the right. */
.lj-welcome:has(.lj-welcome-img.is-wide) { grid-template-columns: 1fr; }
.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-img img { height: auto; }
@media (min-width: 901px) {
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-text {
		display: grid;
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		column-gap: 3rem;
		align-content: center;
		padding: 2.4rem 3.2rem 2.6rem;
	}
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-text > .lj-label { grid-column: 1; grid-row: 1; align-self: end; }
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-title { grid-column: 1; grid-row: 2; align-self: start; }
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-sub { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0 !important; }
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-links { grid-column: 2; grid-row: 3; margin-top: 0 !important; }
	.lj-welcome:has(.lj-welcome-img.is-wide) .lj-welcome-text { grid-template-rows: auto auto auto; row-gap: 0; }
}
#beitraege { scroll-margin-top: 2rem; }

@media (max-width: 900px) {
	.lj-welcome { grid-template-columns: 1fr; }
	.lj-welcome-img img { height: auto; }
	.lj-welcome-text { padding: 2rem 1.6rem 2.2rem; }
	.lj-welcome-title { font-size: 1.9rem; }
	.lj-welcome-sub { font-size: 0.98rem; }
}

/* The title photo already introduces the two of us, so the front page's
   sidebar starts with the categories; other pages keep the "Über uns" card. */
body.home .lj-side > .lj-about { display: none; }
body.home .lj-side > .lj-side-box:first-of-type { margin-top: 0; }

/* Cookie banner (WPConsent) in the theme colours. The plugin writes its
   colours as variables on #wpconsent-root; these win over them. All three
   buttons look the same, so none pushes towards accepting. */
#wpconsent-root {
	--wpconsent-background: var(--wp--preset--color--surface, var(--wp--preset--color--sand)) !important;
	--wpconsent-text: var(--wp--preset--color--contrast) !important;
	--wpconsent-outline-color: rgba(46, 42, 37, 0.18) !important;
	--wpconsent-accept-bg: var(--wp--preset--color--champagne) !important;
	--wpconsent-cancel-bg: var(--wp--preset--color--champagne) !important;
	--wpconsent-preferences-bg: var(--wp--preset--color--champagne) !important;
	--wpconsent-accept-color: var(--wp--preset--color--contrast) !important;
	--wpconsent-cancel-color: var(--wp--preset--color--contrast) !important;
	--wpconsent-preferences-color: var(--wp--preset--color--contrast) !important;
}

/* ---- Photo challenge posts: per day a box with date, theme and task, below
   it the two photos side by side, each with its text underneath. One column
   on phones. Order as in the post. Works for both ways the posts are built:
   2026 (box + two media & text blocks) and 2025 ("Tag N:" line + columns). ---- */
.lj-photo-challenge .wp-block-post-content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2.2rem;
	max-width: 1100px;
	margin-inline: auto;
}
.lj-photo-challenge .wp-block-post-content > * {
	box-sizing: border-box;
	grid-column: 1 / -1;
	justify-self: center;
	width: 100%;
	max-width: var(--wp--style--global--content-size);
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-spacer { display: none; }
.lj-photo-challenge .wp-block-post-content > .wp-block-gallery:first-child,
.lj-photo-challenge .wp-block-post-content > .wp-block-image:first-child { max-width: none; }

/* Day box: the group (2026) or the "Tag N:" line (2025) */
.lj-photo-challenge .wp-block-post-content > .wp-block-group,
.lj-photo-challenge .wp-block-post-content > p.lj-pc-day {
	max-width: none;
	margin-top: 3.6rem !important;
	margin-bottom: 0 !important;
	padding: 1.5rem 1.9rem !important;
	border: 0 !important;
	border-radius: 18px !important;
	background: var(--wp--preset--color--surface);
	font-size: 0.98rem !important;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-group > p:first-child,
.lj-photo-challenge .wp-block-post-content > p.lj-pc-day {
	font-family: var(--wp--preset--font-family--ysabeau-office);
	font-size: 1.45rem !important;
	line-height: 1.25;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-group > p:first-child { margin: 0 0 0.5rem; }
.lj-photo-challenge .wp-block-post-content > .wp-block-group > p + p { margin: 0; }

/* 2026: each photo is a media & text block, two per row */
.lj-photo-challenge .wp-block-post-content > .wp-block-media-text {
	grid-column: auto;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-self: start;
	margin-top: 1.6rem !important;
}
.lj-photo-challenge .wp-block-media-text__content { padding: 1rem 0.3rem 0 !important; }
.lj-photo-challenge .wp-block-media-text__content p { font-size: 0.98rem; line-height: 1.6; margin: 0 0 0.6rem; text-align: left; }

/* 2025: the two photos sit in columns (or a two-column gallery) */
.lj-photo-challenge .wp-block-post-content > .wp-block-columns {
	max-width: none;
	margin-top: 1.6rem !important;
	gap: 2.2rem;
	align-items: flex-start !important;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-gallery { gap: 2.2rem; margin: 0; }
/* A gallery holding both photos of a day: two side by side; a gallery with
   one photo (one per column): full column width. */
.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	width: calc(50% - 1.1rem) !important;
	flex-grow: 0 !important;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-gallery.has-nested-images figure.wp-block-image:only-child:not(#individual-image) {
	width: 100% !important;
}
.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-group { margin: 0; }

/* Every challenge photo: the same soft frame, the whole photo inside it */
.lj-photo-challenge .wp-block-media-text__media,
.lj-photo-challenge .wp-block-post-content > .wp-block-columns figure.wp-block-image {
	margin: 0;
	aspect-ratio: 6 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	flex-grow: 1;
}
.lj-photo-challenge .wp-block-media-text__media img,
.lj-photo-challenge .wp-block-post-content > .wp-block-columns figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}

@media (max-width: 700px) {
	.lj-photo-challenge .wp-block-post-content { grid-template-columns: minmax(0, 1fr); }
	.lj-photo-challenge .wp-block-post-content > .wp-block-group,
	.lj-photo-challenge .wp-block-post-content > p.lj-pc-day { margin-top: 2.6rem !important; padding: 1.2rem 1.3rem !important; }
	.lj-photo-challenge .wp-block-post-content > .wp-block-columns { gap: 1.4rem; }
	.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-gallery { gap: 1.4rem; }
	.lj-photo-challenge .wp-block-post-content > .wp-block-columns .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100% !important; }
}

/* ---- Challenge-Tag block (blocks/challenge-day): the same look as above,
   built from the block's data. Box with day, theme and task; below it a
   column per person with name, photo(s) and text. One column on phones. ---- */
.wp-block-post-content > .lj-challenge,
.lj-challenge {
	max-width: none;
	margin-top: 3.6rem !important;
}
.lj-photo-challenge .wp-block-post-content > .lj-challenge { max-width: none; }
.lj-challenge__box {
	padding: 1.5rem 1.9rem;
	border-radius: 18px;
	background: var(--wp--preset--color--surface);
	font-size: 0.98rem;
}
.lj-challenge__day {
	margin: 0 0 0.3rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
h2.lj-challenge__theme {
	margin: 0;
	font-family: var(--wp--preset--font-family--ysabeau-office);
	font-size: 1.45rem;
	font-weight: 400;
	line-height: 1.25;
}
.lj-challenge__task { margin: 0.5rem 0 0; line-height: 1.6; }
.lj-challenge__photos {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.2rem;
	margin-top: 1.6rem;
	align-items: start;
}
.lj-challenge__name {
	margin: 0 0 0.6rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}
.lj-challenge__photo { margin: 0 0 1.6rem; }
.lj-challenge__photo:last-child { margin-bottom: 0; }
.lj-challenge__photo a { display: block; }
.lj-challenge__frame {
	display: block;
	aspect-ratio: 6 / 5;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}
.lj-challenge__frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.lj-challenge__text {
	margin: 0;
	padding: 1rem 0.3rem 0;
	font-size: 0.98rem;
	line-height: 1.6;
	text-align: left;
}
.lj-challenge__empty {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 6 / 5;
	border: 1.5px dashed var(--wp--preset--color--line);
	border-radius: 16px;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.85rem;
	color: var(--wp--preset--color--muted);
}
/* Editor only: day and date as small inline fields, photo buttons */
.lj-challenge__day--edit input {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	border: 0;
	border-bottom: 1px dashed var(--wp--preset--color--line);
	background: transparent;
	color: inherit;
	padding: 0 0.1rem;
}
.lj-challenge__day--edit input[type="number"] { width: 3.6em; }
.lj-challenge__day--edit input[type="text"] { width: 9em; }
.lj-challenge__tools { display: flex; gap: 0.4rem; padding: 0.5rem 0.3rem 0; }
.lj-challenge__add { margin-top: 0.8rem; }

@media (max-width: 700px) {
	.lj-challenge { margin-top: 2.6rem !important; }
	.lj-challenge__box { padding: 1.2rem 1.3rem; }
	.lj-challenge__photos { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; }
}

/* "Nach oben" button (To Top plugin) in the theme colours: a champagne circle
   with a graphite arrow. The plugin sets its colour inline, hence !important.
   The plugin's own stylesheet and the icon font "dashicons" are not loaded
   (see functions.php): its base rules are here, the arrow is a CSS chevron. */
#to_top_scrollup {
	display: none;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 9999;
	box-sizing: content-box;
	padding: 0;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
}
#to_top_scrollup::before {
	content: "" !important;
	display: block;
	width: 0.42em;
	height: 0.42em;
	margin: 0.44em auto 0;
	border-top: 2.5px solid currentColor;
	border-left: 2.5px solid currentColor;
	transform: rotate(45deg);
	font-family: inherit !important;
}
#to_top_scrollup {
	background-color: var(--wp--preset--color--champagne) !important;
	color: var(--wp--preset--color--contrast) !important;
	width: 2.9rem !important;
	height: 2.9rem !important;
	line-height: 2.9rem !important;
	font-size: 1.6rem !important;
	border-radius: 50% !important;
	box-shadow: 0 8px 20px -10px rgba(90, 70, 30, 0.55);
	opacity: 0.92 !important;
	transition: background-color 0.2s ease;
}
#to_top_scrollup:hover { background-color: var(--wp--preset--color--gold) !important; opacity: 1 !important; }

/* Long links and words written into a post (e.g. a full Wikipedia address)
   wrap instead of pushing the page sideways on phones. */
.wp-block-post-content :where(p, li, figcaption, td, blockquote) { overflow-wrap: break-word; }

/* Translate button on phones: smaller, and lifted off the bottom edge so it
   clears the iPhone home indicator and Safari's toolbar. */
@media (max-width: 781px) {
	#glt-translate-trigger {
		left: 12px !important;
		bottom: calc(12px + env(safe-area-inset-bottom)) !important;
		font-size: 0.8rem !important;
		padding: 0.35rem 0.85rem 0.3rem !important;
		line-height: 1.4 !important;
	}
}

/* Photos placed in pages (e.g. "Über uns"): the theme's rounded corners. */
.lj-page-photo img { border-radius: 18px; }

/* "Nach oben" on phones: smaller, level with the Translate button. */
@media (max-width: 781px) {
	#to_top_scrollup {
		width: 2.4rem !important;
		height: 2.4rem !important;
		line-height: 2.4rem !important;
		font-size: 1.3rem !important;
		padding: 0 !important;
		right: 12px !important;
		bottom: calc(12px + env(safe-area-inset-bottom)) !important;
	}
}

/* ---- Newsletter box in the sidebar (MailPoet form via [lj_newsletter]) ---- */
.lj-newsletter-intro { margin: 0 0 1rem; }
.lj-newsletter-note { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--wp--preset--color--muted); }
.lj-newsletter .mailpoet_form { padding: 0 !important; }
.lj-newsletter .mailpoet_paragraph { margin-bottom: 0.7rem !important; }
.lj-newsletter input.mailpoet_text {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	font: inherit !important;
	padding: 0.7rem 1.1rem !important;
}
.lj-newsletter input.mailpoet_text:focus { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; }
.lj-newsletter input.mailpoet_submit {
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--champagne) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 0.85rem 1.1rem !important;
	cursor: pointer;
}
.lj-newsletter input.mailpoet_submit:hover { background: var(--wp--preset--color--gold) !important; }
.lj-newsletter .mailpoet_message p { margin: 0.6rem 0 0; font-size: 0.9rem; }

/* ---- MailPoet pages: manage subscription, unsubscribe (templates/single-mailpoet_page.html) ---- */
.lj-mailpoet-page .mailpoet-manage-subscription h2,
.lj-mailpoet-page .mailpoet-manage-subscription h3,
.lj-mailpoet-page .mailpoet-manage-subscription legend {
	font-family: var(--wp--preset--font-family--ysabeau-office) !important;
	font-weight: 300 !important;
	color: var(--wp--preset--color--contrast) !important;
}
.lj-mailpoet-page .mailpoet_text_label,
.lj-mailpoet-page .mailpoet_select_label,
.lj-mailpoet-page .mailpoet-manage-subscription-list-name {
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 0.78rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast) !important;
}
.lj-mailpoet-page input.mailpoet_text,
.lj-mailpoet-page select.mailpoet_select {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 12px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--literata) !important;
	box-shadow: none !important;
}
.lj-mailpoet-page input.mailpoet_text:focus,
.lj-mailpoet-page select.mailpoet_select:focus { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 1px; }
.lj-mailpoet-page input.mailpoet_text[readonly],
.lj-mailpoet-page input.mailpoet_text[disabled] { background: var(--wp--preset--color--surface) !important; }
.lj-mailpoet-page .mailpoet-manage-subscription-list-choice label,
.lj-mailpoet-page .mailpoet-manage-subscription-choice-label {
	border-color: var(--wp--preset--color--line) !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
}
.lj-mailpoet-page .mailpoet-manage-subscription-list-choice label:has(input:checked),
.lj-mailpoet-page .mailpoet-manage-subscription-choice-label:has(input:checked) {
	background: var(--wp--preset--color--champagne) !important;
	border-color: var(--wp--preset--color--gold) !important;
}
.lj-mailpoet-page input[type="radio"] { accent-color: var(--wp--preset--color--accent); }
.lj-mailpoet-page input.mailpoet_submit,
.lj-mailpoet-page .mailpoet_confirm_unsubscribe a {
	display: inline-block;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--wp--preset--color--champagne) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--manrope) !important;
	font-size: 0.72rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none !important;
	padding: 0.95rem 1.6rem !important;
	box-shadow: none !important;
	cursor: pointer;
}
.lj-mailpoet-page input.mailpoet_submit:hover,
.lj-mailpoet-page .mailpoet_confirm_unsubscribe a:hover { background: var(--wp--preset--color--gold) !important; }
.lj-mailpoet-page .mailpoet_confirm_unsubscribe a { margin-top: 1.2rem; }

/* ---- 404 page (templates/404.html) ---- */
.lj-404-number {
	font-family: var(--wp--preset--font-family--ysabeau-office);
	font-weight: 200;
	font-size: clamp(5rem, 18vw, 9.5rem);
	line-height: 1;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--contrast);
	margin: 0.4rem 0 0.6rem !important;
}
.lj-404-number span {
	display: inline-block;
	font-size: 0.62em;
	vertical-align: 0.18em;
	margin: 0 0.06em;
	animation: lj-404-spin 6s ease-in-out infinite;
}
@keyframes lj-404-spin {
	0%, 100% { transform: rotate(-25deg); }
	45% { transform: rotate(200deg); }
	60% { transform: rotate(160deg); }
}
@media (prefers-reduced-motion: reduce) { .lj-404-number span { animation: none; } }
.lj-404-search { max-width: 460px; margin-inline: auto !important; }
.lj-404-search .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	padding: 4px !important;
}
.lj-404-search .wp-block-search__input { border: 0 !important; background: transparent; padding-left: 1.2rem !important; }

/* ---- Old Blogger photos with a caption: a small table, photo in the first
   row, caption in the second (121 posts). Make the caption read as the
   photo's caption — smaller, muted, close to the photo, as wide as the photo
   — and leave more room before the next photo. Tables floated beside the
   text and tables with several photos keep their own layout. ---- */
.wp-block-post-content table:not([style*="float"]):has(> tbody > tr:first-child img):not(:has(> tbody > tr:not(:first-child) img)) {
	width: min-content;   /* as wide as the photo, so the caption wraps under it */
	margin: 0.4rem auto 3rem !important;
	border-collapse: collapse;
}
/* With the table as wide as its content, a percentage max-width would shrink
   photos without width/height attributes to nothing: size them by the screen. */
.wp-block-post-content table:not([style*="float"]):has(> tbody > tr:first-child img):not(:has(> tbody > tr:not(:first-child) img)) img {
	max-width: min(calc(100vw - 3rem), 720px) !important;
	height: auto;
}
.wp-block-post-content table:not([style*="float"]):has(> tbody > tr:first-child img):not(:has(> tbody > tr:not(:first-child) img)) > tbody > tr:not(:first-child) > td {
	padding: 0.45rem 0.25rem 0 !important;
	font-size: 0.86rem;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	text-align: center;
}
.wp-block-post-content table:not([style*="float"]):has(> tbody > tr:first-child img):not(:has(> tbody > tr:not(:first-child) img)) > tbody > tr:not(:first-child) > td:empty { padding: 0 !important; }
.wp-block-post-content table:not([style*="float"]):has(> tbody > tr:first-child img):not(:has(> tbody > tr:not(:first-child) img)) + br { display: none; }

/* Lightbox (FooBox) captions in the theme's text font */
/* The caption is part of the lightbox: the white frame continues below the
   photo with the topic and the text, instead of a dark bar over the photo.
   FooBox sizes the photo from the padding of .fbx-inner-spacer, so a larger
   bottom padding leaves room for the caption below it. */
.fbx-modal .fbx-inner-spacer { padding-bottom: 190px !important; }
.fbx-modal .fbx-stage,
.fbx-modal .fbx-item-current { overflow: visible !important; }
.fbx-modal .fbx-inner { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.fbx-modal .fbx-caption,
.fbx-modal.fbx-phone .fbx-caption {
	position: absolute !important;
	top: calc(100% + 8px) !important;
	bottom: auto !important;
	left: -8px !important;
	right: -8px !important;
	width: auto !important;
	max-height: 170px;
	overflow-y: auto;
	padding: 0.4rem 1.2rem 1rem;
	box-sizing: border-box;
	background: #fff !important;
	border-radius: 0 0 6px 6px;
	color: var(--wp--preset--color--contrast) !important;
	text-align: left;
	opacity: 1 !important;
}
.fbx-modal .fbx-caption.fbx-hide-caption { display: none !important; }
/* No sliding or fading: while FooBox changes the photo the caption is hidden
   (it would show at the old photo's width), then it is simply there. */
.fbx-modal .fbx-caption { transition: none !important; transform: none !important; }
.fbx-modal .fbx-caption.fbx-slide-caption,
.fbx-modal .fbx-caption.fbx-fade-caption { visibility: hidden !important; }
/* Photo and caption read as one white frame: no shadow line between them */
.fbx-modal .fbx-inner.fbx-inner-shadow { box-shadow: none !important; }
/* Phones: more room for the caption, so topic and text fit without scrolling */
.fbx-modal.fbx-phone .fbx-inner-spacer { padding-bottom: 290px !important; }
.fbx-modal.fbx-phone .fbx-caption { max-height: 280px; }
.fbx-modal.fbx-phone .fbx-caption { top: 100% !important; left: 0 !important; right: 0 !important; }
.fbx-modal .fbx-close-caption,
.fbx-modal .fbx-open-caption { display: none !important; }
.fbx-modal .fbx-caption-title,
.fbx-modal .fbx-caption-desc {
	padding: 0 !important;
	font-family: var(--wp--preset--font-family--literata) !important;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast) !important;
	background: none !important;
	text-align: left !important;
}
/* The same sizes as the topic and the photo text on the page */
.fbx-modal .fbx-caption-title { font-family: var(--wp--preset--font-family--ysabeau-office) !important; font-size: 1.45rem; line-height: 1.25; }
.fbx-modal .fbx-caption-desc { font-size: 0.98rem; line-height: 1.6; }
.fbx-modal .fbx-caption-title + .fbx-caption-desc { margin-top: 0.6rem; }
/* The topic in a box in the colour of the day boxes on the page */
.fbx-modal .fbx-caption-title {
	display: inline-block;
	margin-top: 0.4rem;
	padding: 0.35rem 0.9rem !important;
	border-radius: 12px;
	background: var(--wp--preset--color--surface) !important;
}
/* "Bild 3 von 61" above the frame, where the caption no longer is */
.fbx-modal .fbx-count { top: -1.6rem !important; bottom: auto !important; color: #fff !important; }
.fbx-modal .fbx-count { font-family: var(--wp--preset--font-family--manrope) !important; letter-spacing: 0.08em; }