/*
Theme Name: verticus20
Theme URI: https://www.verticus.ag
Author: verticus Finanzmanagement AG
Author URI: https://www.verticus.ag
Description: Backend-Theme im Farbklima von verticus editorial. Das Frontend besteht aus dem Anmeldeschirm und den Rechtstexten; alles andere führt für nicht angemeldete Besucher dorthin zurück. Übernommen sind Token-Layer, Schriften und Komponentenoptik des Bludit-Themes verticus-editorial 2.0.0 (warmes Off-White, Source Serif 4 + IBM Plex Sans lokal gehostet, Blau ausschließlich als Aktionsfarbe) — keine Inhalte, damit nichts mit verticus.ag um dieselben Suchbegriffe konkurriert.
Version: 3.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: MIT
License URI: https://opensource.org/licenses/MIT
Text Domain: verticus20
Tags: translation-ready, accessibility-ready
*/

/*
 * Das Farbklima steht in:
 *   assets/css/fonts.css       Schriften (lokal, kein Google-Request)
 *   assets/css/tokens.css      Token-Layer - einzige Quelle fuer Farbe usw.
 *   assets/css/editorial.css   Komponenten, ausschliesslich aus Tokens
 * Alle drei sind unveraendert aus dem Bludit-Theme uebernommen.
 *
 * Hier steht, was diese drei nicht abdecken: Anmeldeschirm, Footer,
 * Rechtstext, Hinweisseite, Block-Editor. Jeder Wert kommt aus einem
 * Token - keine eigene Farbe, kein eigener Abstand.
 *
 * Von editorial.css bleibt vieles ungenutzt: es ist die unveraenderte
 * Datei aus der Vorlage. Bewusst nicht ausgeduennt - das Farbklima soll
 * die Originaldatei sein und nicht eine Abschrift davon.
 *
 * Weil das Theme eine theme.json hat, laedt WordPress classic-themes.css
 * nicht - also auch nicht deren Ersatzoptik fuer .wp-block-button__link
 * (dunkle Pille). Die Knopfregeln hier sind damit die einzigen, die
 * greifen; sie muessen vollstaendig sein und nichts ueberschreiben.
 */


/* ===================================================================
 * 0. Reset
 *
 * Diese vier Regeln standen in der abgeloesten base.css. tokens.css und
 * editorial.css setzen sie nicht - ohne sie stehen Eingabefelder mit
 * width:100% plus Innenabstand ueber ihren Kasten hinaus.
 * =================================================================== */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

img,
svg,
video {
	max-width: 100%;
}

img {
	height: auto;
}

/* Die Icons aus inc/icons.php sind reine Pfade ohne eigene Attribute -
 * Groesse, Strich und Farbe kommen von hier. Ohne diese Regel faellt
 * SVG auf fill:black und Standardgroesse zurueck, und aus einem Pfeil
 * wird ein schwarzer Klotz. Unveraendert aus der abgeloesten base.css. */
.vtc-icon {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
	vertical-align: -.12em;
}


/* ===================================================================
 * 1. Anmeldeschirm (Startseite)
 * =================================================================== */

.vtc-body--login #main-content {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: calc(100dvh - 76px - 96px);
	padding: var(--vtc-sp-7) var(--vtc-gutter);
	background: var(--vtc-hero);
}

.vtc-login {
	width: 100%;
	max-width: 27rem;
}

.vtc-login__card {
	padding: var(--vtc-sp-7) var(--vtc-sp-6);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius);
	background: var(--vtc-surface);
	box-shadow: var(--vtc-shadow-2);
	text-align: center;
}

.vtc-login__mark {
	width: auto;
	height: 48px;
	margin: 0 auto var(--vtc-sp-5);
}

.vtc-login__title {
	margin: 0;
	font-size: var(--vtc-fs-h2-sm);
}

.vtc-login__claim {
	margin: var(--vtc-sp-2) 0 0;
	color: var(--vtc-ink-3);
	font-size: var(--vtc-fs-sm);
}

.vtc-login__note {
	margin: var(--vtc-sp-5) 0 0;
	color: var(--vtc-ink-2);
	font-size: var(--vtc-fs-ui);
}

.vtc-login__actions {
	margin: var(--vtc-sp-5) 0 0;
}

.vtc-login__meta {
	margin: var(--vtc-sp-5) 0 0;
	font-size: var(--vtc-fs-meta);
	text-align: center;
}

.vtc-login__meta a {
	color: var(--vtc-ink-3);
	text-decoration: none;
}

.vtc-login__meta a:hover {
	color: var(--vtc-action);
	text-decoration: underline;
}

/* Das Formular kommt aus wp_login_form(); Klassen- und ID-Namen darin
 * gibt WordPress vor, nicht dieses Theme. */

#loginform {
	margin-top: var(--vtc-sp-6);
	text-align: left;
}

#loginform p {
	margin: 0 0 var(--vtc-sp-4);
}

#loginform label {
	display: block;
	margin-bottom: var(--vtc-sp-2);
	color: var(--vtc-ink);
	font-size: var(--vtc-fs-sm);
	font-weight: var(--vtc-fw-semi);
}

#loginform input[type="text"],
#loginform input[type="password"] {
	width: 100%;
	min-height: 48px;
	padding: var(--vtc-sp-3) var(--vtc-sp-4);
	border: 1px solid var(--vtc-line-2);
	border-radius: var(--vtc-radius);
	background: var(--vtc-surface);
	color: var(--vtc-ink-body);
	font-family: inherit;
	font-size: var(--vtc-fs-base);
}

#loginform input[type="text"]:focus,
#loginform input[type="password"]:focus {
	border-color: var(--vtc-action);
	outline: none;
	box-shadow: var(--vtc-focus);
}

#loginform .login-remember label {
	display: flex;
	align-items: center;
	gap: var(--vtc-sp-2);
	color: var(--vtc-ink-2);
	font-size: var(--vtc-fs-sm);
	font-weight: var(--vtc-fw-regular);
}

#loginform .login-remember input {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var(--vtc-action);
}

#loginform .login-submit {
	margin-bottom: 0;
}

#loginform #wp-submit {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: var(--vtc-sp-3) var(--vtc-sp-5);
	border: 1px solid transparent;
	border-radius: var(--vtc-radius);
	background: var(--vtc-action);
	color: var(--vtc-action-ink);
	font-family: inherit;
	font-size: var(--vtc-fs-ui);
	font-weight: var(--vtc-fw-semi);
	cursor: pointer;
}

#loginform #wp-submit:hover {
	background: var(--vtc-action-hover);
}


/* ===================================================================
 * 2. Footer
 * =================================================================== */

.vtc-foot {
	border-top: 1px solid var(--vtc-line);
	background: var(--vtc-surface);
}

.vtc-foot__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-sp-4);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--vtc-sp-5);
}

.vtc-foot__owner {
	margin: 0;
	color: var(--vtc-ink-3);
	font-size: var(--vtc-fs-meta);
}

.vtc-foot__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-sp-5);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtc-foot__list a {
	color: var(--vtc-ink-3);
	font-size: var(--vtc-fs-meta);
	text-decoration: none;
}

.vtc-foot__list a:hover {
	color: var(--vtc-action);
	text-decoration: underline;
}


/* ===================================================================
 * 3. Rechtstext und Hinweisseite
 * =================================================================== */

.vtc-legal {
	padding-block: var(--vtc-sp-7) var(--vtc-sp-9);
}

/* Der Rechtstext laeuft ohne Randspalte, aber in derselben Zeilenlaenge
 * wie ein Artikel - editorial.css bringt die Prosa ueber
 * .vtc-ed-article .vtc-content mit, inklusive Listen und Tabellen. */
.vtc-legal .vtc-ed-article {
	max-width: var(--vtc-measure);
}

.vtc-legal__stamp {
	margin-top: var(--vtc-sp-7);
	padding-top: var(--vtc-sp-4);
	border-top: 1px solid var(--vtc-line);
	color: var(--vtc-ink-3);
	font-size: var(--vtc-fs-meta);
}

/* Die Vorschau laeuft in derselben Zeilenlaenge wie ein Rechtstext -
 * es geht ums Lesen und Pruefen, nicht um eine Layoutprobe. */
.vtc-single {
	/* Weniger Luft oben als in der Vorlage: dort fuellte ein Titelbild
	 * den Raum zwischen Artikelkopf und Text. Hat ein Entwurf noch
	 * keins, addieren sich sonst zwei Innenabstaende zu einer Luecke,
	 * die wie ein Fehler aussieht. */
	padding-block: var(--vtc-sp-6) var(--vtc-sp-9);
}

.vtc-single .vtc-ed-article {
	max-width: var(--vtc-measure);
}

/* Das Band ueber jeder Vorschau. Warm statt blau: Blau ist in diesem
 * Farbklima die Aktionsfarbe, und hier gibt es nichts zu klicken
 * ausser dem Weg zurueck in den Editor. */
.vtc-preview {
	border-bottom: 1px solid var(--vtc-line-2);
	background: var(--vtc-warn-soft);
}

.vtc-preview__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-sp-3) var(--vtc-sp-5);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--vtc-sp-3);
}

.vtc-preview__text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--vtc-sp-2) var(--vtc-sp-3);
	margin: 0;
	font-size: var(--vtc-fs-meta);
}

.vtc-preview__text strong {
	color: var(--vtc-warn);
	font-weight: var(--vtc-fw-semi);
	letter-spacing: var(--vtc-track-eyebrow);
	text-transform: uppercase;
}

.vtc-preview__status {
	padding: 2px var(--vtc-sp-2);
	border: 1px solid var(--vtc-line-2);
	border-radius: var(--vtc-radius-pill);
	background: var(--vtc-surface);
	color: var(--vtc-ink);
	font-weight: var(--vtc-fw-medium);
}

.vtc-preview__note {
	color: var(--vtc-ink-2);
}

.vtc-preview__edit {
	display: inline-flex;
	align-items: center;
	gap: var(--vtc-sp-2);
	font-size: var(--vtc-fs-meta);
	font-weight: var(--vtc-fw-semi);
	text-decoration: none;
	white-space: nowrap;
}

.vtc-preview__edit:hover {
	text-decoration: underline;
}

/* Seitenumbruch im Text. Erscheint nur in der Vorschau - dort wird
 * ein <!--nextpage--> ausgegeben statt versteckt, damit niemand einen
 * halben Text gegenprueft. */
.vtc-pager {
	margin-top: var(--vtc-sp-6);
	padding-top: var(--vtc-sp-4);
	border-top: 1px solid var(--vtc-line);
}

.vtc-pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vtc-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vtc-pager__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: var(--vtc-sp-2) var(--vtc-sp-3);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius);
	background: var(--vtc-surface);
	font-size: var(--vtc-fs-meta);
	text-decoration: none;
}

a.vtc-pager__link:hover {
	border-color: var(--vtc-action);
	background: var(--vtc-action-soft);
}

.vtc-notice {
	max-width: var(--vtc-measure);
	padding-block: var(--vtc-sp-9) var(--vtc-sp-10);
}

.vtc-notice h1 {
	margin: var(--vtc-sp-3) 0 0;
	font-size: var(--vtc-fs-h1);
}

.vtc-notice p {
	margin: var(--vtc-sp-4) 0 0;
	color: var(--vtc-ink-2);
	font-size: var(--vtc-fs-lead);
}

.vtc-notice__actions {
	margin-top: var(--vtc-sp-6);
}


/* ===================================================================
 * 4. WordPress-Hilfsklassen
 * =================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.screen-reader-text:focus {
	display: block;
	top: var(--vtc-sp-4);
	left: var(--vtc-sp-4);
	z-index: 100;
	width: auto;
	height: auto;
	padding: var(--vtc-sp-3) var(--vtc-sp-4);
	clip: auto;
	clip-path: none;
	border-radius: var(--vtc-radius);
	background: var(--vtc-action);
	color: var(--vtc-action-ink);
	font-size: var(--vtc-fs-sm);
	font-weight: var(--vtc-fw-semi);
	text-decoration: none;
}

.vtc-content .alignleft {
	float: left;
	margin: 0 var(--vtc-sp-5) var(--vtc-sp-4) 0;
}

.vtc-content .alignright {
	float: right;
	margin: 0 0 var(--vtc-sp-4) var(--vtc-sp-5);
}

.vtc-content .aligncenter {
	display: block;
	margin-inline: auto;
}


/* ===================================================================
 * 5. Block-Editor im Rechtstext
 *
 * editorial.css bringt die Prosa mit (.vtc-ed-article .vtc-content).
 * Hier werden nur die Bloecke nachgezogen, die es in Bludit-Markdown
 * nicht gab.
 * =================================================================== */

.vtc-content .alignwide {
	margin-inline: calc(var(--vtc-sp-6) * -1);
	max-width: calc(100% + var(--vtc-sp-6) * 2);
}

.vtc-content .alignfull {
	margin-inline: calc(var(--vtc-gutter) * -1);
	max-width: calc(100% + var(--vtc-gutter) * 2);
}

@media (max-width: 47.999rem) {
	.vtc-content .alignwide {
		margin-inline: 0;
		max-width: 100%;
	}
}

.vtc-content figure {
	margin: 0 0 var(--vtc-sp-5);
}

.vtc-content figcaption,
.vtc-content .wp-element-caption {
	margin-top: var(--vtc-sp-2);
	color: var(--vtc-ink-3);
	font-size: var(--vtc-fs-meta);
	line-height: var(--vtc-lh-base);
}

.vtc-content .wp-block-image img,
.vtc-content .wp-block-cover img {
	height: auto;
	border-radius: var(--vtc-radius);
}

.vtc-content .wp-block-separator {
	max-width: 8rem;
	margin: var(--vtc-sp-7) auto;
	border: 0;
	border-top: 1px solid var(--vtc-line-2);
}

.vtc-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--vtc-sp-2);
	min-height: 48px;
	padding: var(--vtc-sp-3) var(--vtc-sp-5);
	border-radius: var(--vtc-radius);
	background: var(--vtc-action);
	color: var(--vtc-action-ink);
	font-size: var(--vtc-fs-ui);
	font-weight: var(--vtc-fw-semi);
	text-decoration: none;
}

.vtc-content .wp-block-button__link:hover {
	background: var(--vtc-action-hover);
	color: var(--vtc-action-ink);
}

.vtc-content .is-style-outline .wp-block-button__link {
	border: 1px solid var(--vtc-line-2);
	background: transparent;
	color: var(--vtc-action);
}

.vtc-content .wp-block-code,
.vtc-content pre {
	overflow: auto;
	padding: var(--vtc-sp-4);
	border: 1px solid var(--vtc-line);
	border-radius: var(--vtc-radius);
	background: var(--vtc-surface);
	font-family: var(--vtc-font-mono);
	font-size: var(--vtc-fs-sm);
	line-height: var(--vtc-lh-base);
}

.vtc-content code {
	padding: .1em .35em;
	border-radius: 3px;
	background: var(--vtc-tint);
	font-family: var(--vtc-font-mono);
	font-size: .9em;
}

.vtc-content .wp-block-embed iframe,
.vtc-content iframe {
	max-width: 100%;
	border-radius: var(--vtc-radius);
}