/*
 * hpp theme
 * Layout for speed.hpp.com (HPP Speedtest)
 *
 * @author Gustaf Mossakowski <gustaf@koenige.org>
 * @copyright Copyright © 2026 Gustaf Mossakowski
 * @license http://opensource.org/licenses/lgpl-3.0.html LGPL-3.0
 *
 * Visual language aligned with hpp.com 2025 (Helvetica Neue stack, generous spacing).
 */


:root {
	--font-regular: HelveticaNeueLTStd-Roman, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-bold: HelveticaNeueLTStd-Bd, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-size-body: 19px;
	--font-size-medium: 30px;
	--font-size-big: 48px;
	--margin-x: 50px;
	--gap: 40px;
	--gap-half: 20px;
	--canvas-top: 32px;
}

@media screen and (max-width: 639px) {
	:root {
		--font-size-body: 16px;
		--font-size-medium: 24px;
		--font-size-big: 32px;
		--margin-x: 16px;
		--gap: 24px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body.theme-hpp {
	margin: 0;
	font-family: var(--font-regular);
	font-size: var(--font-size-body);
	line-height: 1.4;
	color: #000;
	background: #fff;
}

a {
	color: inherit;
}

a:hover {
	text-decoration-thickness: 2px;
}

.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--gap-half);
	padding: var(--canvas-top) var(--margin-x) var(--gap-half);
	border-bottom: 1px solid #000;
}

.site-logo {
	margin: 0;
	line-height: 0;
}

.site-logo img {
	display: block;
	height: 52px;
	width: auto;
	max-width: min(220px, 45vw);
}

.site-tagline {
	margin: 0 0 0.35rem;
	font-family: var(--font-bold);
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.site-tagline a {
	text-decoration: none;
}

.site-tagline a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

main {
	padding: var(--gap) var(--margin-x) calc(var(--gap) * 2);
	max-width: 56rem;
}

main h1 {
	font-family: var(--font-bold);
	font-size: var(--font-size-big);
	line-height: 1.15;
	font-weight: normal;
	margin: 0 0 var(--gap-half);
	max-width: 40rem;
}

.site-footer {
	padding: var(--gap-half) var(--margin-x) var(--gap);
	border-top: 1px solid #000;
	font-size: 0.9rem;
}

.site-footer p {
	margin: 0;
}

/* zzform on public feedback page */
body.theme-hpp #zzform {
	max-width: 48rem;
}

body.theme-hpp #zzform .explanation {
	margin-bottom: 1.5rem;
	max-width: 40rem;
}

body.theme-hpp #zzform .zz_radio_list {
	list-style: none;
	margin: 0.5rem 0 0;
	padding: 0;
}

body.theme-hpp #zzform .zz_radio_list li {
	margin: 0.35rem 0;
}

body.theme-hpp #zzform .zz_radio_list input[type="text"] {
	margin-left: 0.35rem;
	width: min(100%, 28rem);
}

body.theme-hpp #zzform .emptytable {
	margin: 1rem 0 1.5rem;
	color: #444;
}

body.theme-hpp #zzform h2 {
	font-family: var(--font-bold);
	font-size: 1.25rem;
	font-weight: normal;
	margin: 2rem 0 0.75rem;
}

body.theme-hpp #zzform .zz_rating {
	line-height: 1;
	white-space: nowrap;
	--rating-star-size: 2.625rem; /* zzform default 1.75rem × 1.5 */
}

body.theme-hpp #zzform table.data .zz_rating {
	--rating-star-size: 1.65rem; /* list 1.1rem × 1.5 */
}

body.theme-hpp #zzform .zz_rating label {
	font-size: var(--rating-star-size);
	color: #bbb;
}

body.theme-hpp #zzform .zz_rating label span {
	display: inline-block;
	width: var(--rating-star-size);
	height: var(--rating-star-size);
	text-align: center;
}

body.theme-hpp #zzform .zz_rating label.ratingselected {
	color: #000;
}

body.theme-hpp #zzform table.data {
	width: 100%;
	border-collapse: collapse;
	margin-top: 2rem;
}

body.theme-hpp #zzform table.data th,
body.theme-hpp #zzform table.data td {
	border-bottom: 1px solid #ccc;
	padding: 0.5rem 0.75rem 0.5rem 0;
	vertical-align: top;
}

body.theme-hpp #zzform table.record th {
	font-family: var(--font-bold);
	font-weight: normal;
	width: 12rem;
	padding-top: 0.65rem;
}

body.theme-hpp #zzform input[type="text"],
body.theme-hpp #zzform input[type="url"],
body.theme-hpp #zzform input[type="number"],
body.theme-hpp #zzform textarea,
body.theme-hpp #zzform select {
	font-family: var(--font-regular);
	font-size: var(--font-size-body);
	max-width: 100%;
	padding: 0.35rem 0.5rem;
	border: 1px solid #000;
}

body.theme-hpp #zzform textarea {
	width: 100%;
	min-height: 5rem;
}

body.theme-hpp #zzform input[type="submit"],
body.theme-hpp #zzform button,
.add-new {
	font-family: var(--font-bold);
	font-size: 1rem;
	padding: 0.55rem 1.25rem;
	border: 1px solid #000;
	background: #000;
	color: #fff;
	cursor: pointer;
	display: inline-block;
}

body.theme-hpp #zzform input[type="submit"]:hover,
body.theme-hpp #zzform button:hover {
	background: #333;
}

body.theme-hpp #zzform .field_explanation {
	color: #444;
	font-size: 0.9rem;
}

body.theme-hpp #zzform #breadcrumbs,
body.theme-hpp #breadcrumbs {
	display: none;
}

/*
 * Cascading Style Sheets (CSS)
 * for login form
 *
 * Part of »Zugzwang Project«
 * https://www.zugzwang.org/modules/default
 *
 * @author Gustaf Mossakowski <gustaf@koenige.org>
 * @copyright Copyright © 2025-2026 Gustaf Mossakowski
 * @license http://opensource.org/licenses/lgpl-3.0.html LGPL-3.0
 */


#login		{ max-width: 40rem; margin: 5rem auto;
			--default_login_css_background_color: ;
			--background-color-login: var(--default_login_css_background_color, #FFF); }
#login fieldset
			{ position: relative; border: none; margin: 2.5rem 0 1rem;
			display: grid; grid-template-columns: 9rem 12.5rem; gap: .5rem;
			background: var(--background-color-login) repeat-y 100% 0;
			background-image: url(/_layout/hpp/zugzwang-stripes.png);
			background-size: 75%; padding: 1.5rem 1rem 1rem; border-radius: 3px; }
#login legend
			{ position: absolute; padding: .75rem 1rem; transform: translateY(-50%);
			background-color: inherit; border-radius: inherit; }
#login form	{ margin: 1rem 0 0; }
#login fieldset p	{ margin: 0; }
#login input[type=submit], p.submit
			{ grid-column: 2 / 3; height: 1.6rem; }
#login .error
			{ grid-column: 1 / 3; text-wrap: balance; }
@media screen and (max-width: 30rem) {
	#login fieldset
				{ background-size: 75%; }
}
@media screen and (max-width: 25rem) {
	#login		{ margin: 1rem auto; }
	#login fieldset
				{ grid-template-columns: auto; background-size: 100%;
				background-position: 4rem 0; }
	#login input[type=submit], p.submit
				{ grid-column: 1 / 2; }
	#login fieldset label
				{ margin-bottom: -.25rem; }
	#login .error
				{ grid-column: 1 / 2; }
}