/*
 * altox.de - modern bridge layer on top of Pico CSS.
 *
 * The 66 legacy content templates still use a small shared class vocabulary
 * (.uebers, .subuebers, .klein, .box, .grau ...) and old presentational
 * markup (layout tables, bgcolor cells, fixed pixel widths, <font>). Rather
 * than editing every template, this file (a) themes Pico in the altox red,
 * (b) restyles the shared classes for a modern look, and (c) neutralises the
 * legacy markup inside .content so it stays readable and responsive.
 */

/* ---- Brand theme (altox red) ------------------------------------------- */
/* Matches Pico's own token selector specificity so these win by source order
   (this file loads after pico.min.css). A plain :root would lose to Pico's
   :root:not([data-theme=dark]). */
:root:not([data-theme="dark"]),
[data-theme="light"] {
	--pico-primary: #b30000;
	--pico-primary-background: #b30000;
	--pico-primary-hover: #8f0000;
	--pico-primary-hover-background: #8f0000;
	--pico-primary-focus: rgba(179, 0, 0, 0.3);
	--pico-primary-underline: rgba(179, 0, 0, 0.4);
}

:root {
	--pico-border-radius: 0.5rem;
}

/* Anti-spam e-mail obfuscation used in some templates (reversed text that
   CSS flips back to the correct reading order). */
span.codedirection {
	unicode-bidi: bidi-override;
	direction: rtl;
}

/* ---- Header / navigation ---------------------------------------------- */
.site-header {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
	border-bottom: 3px solid var(--pico-primary);
	margin-bottom: 1.5rem;
}

.site-header .brand img {
	height: 46px;
	width: auto;
	display: block;
}

.site-header nav .nav-main {
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	align-items: center;
}

.site-header nav a {
	text-decoration: none;
	font-weight: 600;
}

.site-header nav a[aria-current="page"] {
	color: var(--pico-primary);
	text-decoration: underline;
}

.login-btn {
	padding-block: 0.35rem;
	padding-inline: 0.9rem;
}

/* ---- Content card ------------------------------------------------------ */
/* Legacy templates carry fixed pixel widths (width="490" ...). Keep them
   from pushing the page wider than the viewport on small screens: wide
   tables scroll inside the card, and the page itself never scrolls sideways. */
html {
	overflow-x: hidden;
}

main .content {
	max-width: 100%;
	overflow-x: auto;
}

.site-footer {
	margin-top: 2rem;
	padding-block: 1.5rem;
	border-top: 1px solid var(--pico-muted-border-color);
	text-align: center;
	color: var(--pico-muted-color);
}

/* ---- Redefined shared legacy classes ---------------------------------- */
.uebers {
	display: block;
	color: var(--pico-primary);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.2;
	margin: 0.2rem 0 1rem;
}

.subuebers {
	display: block;
	font-size: 1.15rem;
	font-weight: 600;
	margin: 0.6rem 0;
}

.klein {
	font-size: 0.8rem;
	color: var(--pico-muted-color);
}

/* Scoped under `main .content` so these beat the generic cell-reset below
   (main .content td { background: transparent }) when they sit on a <td>. */
main .content .box {
	display: block;
	background: var(--pico-primary);
	color: #fff;
	font-weight: 600;
	text-align: center;
	padding: 0.4rem 0.6rem;
	border-radius: var(--pico-border-radius);
	background-image: none;
	height: auto;
}

main .content .grau {
	background: var(--pico-card-sectioning-background-color);
	text-align: center;
}

main .content .balken,
main .content .grauerstreifen {
	display: block;
	background: var(--pico-primary);
	background-image: none;
	color: #fff;
	font-weight: 700;
	text-align: center;
	padding: 0.35rem;
	border-radius: var(--pico-border-radius);
}

a.navi,
a.subnavi,
a.sublocator {
	color: var(--pico-primary);
	font-weight: 600;
	text-decoration: none;
}

/* ---- Neutralise legacy content markup --------------------------------- */
/* Layout tables must not look like Pico data tables. */
main .content table {
	width: auto;
	max-width: 100%;
	margin: 0;
	border: 0;
	background: transparent;
}

main .content th,
main .content td {
	border: 0;
	padding: 0.35rem 0.5rem;
	background: transparent;
	vertical-align: top;
}

/* Soften the old grey form-row cells into a subtle modern surface.
   (Presentational attributes lose to author CSS, so this wins.) Skip the
   intentional coloured bars (.box etc.), which set their own background and
   white text - otherwise the softened surface would hide their text. */
main .content [bgcolor]:not(.box):not(.balken):not(.grauerstreifen):not(.grau) {
	background: var(--pico-card-sectioning-background-color);
	border-radius: 0.25rem;
}

/* Legacy inline forms break if inputs are forced full-width blocks. */
main .content :is(input, select, button) {
	width: auto;
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 0.4rem;
}

main .content textarea {
	width: 100%;
	max-width: 100%;
}

main .content .input {
	max-width: 100%;
}

/* Images and old fixed widths stay within the page on every screen. */
main .content img {
	max-width: 100%;
	height: auto;
}

/* Drop legacy fixed pixel width *requests* (width="486" ...) so cells and
   tables reflow to the available space instead of forcing a wide layout. */
main .content [width] {
	width: auto;
	max-width: 100%;
}

/* Old <font> colours stay, but never smaller/greyer than readable. */
main .content font {
	font-size: inherit;
}