/* --- CSS Table of Contents --- */
/* 1. Self-hosted font (@font-face) */
/* 2. Root Variables (Colours & Fonts) */
/* 3. General Styles & Structure */
/* 4. Page Header & Title */
/* 5. Message Block */
/* 6. Dark Mode Theme */
/* 7. Media Queries for Responsiveness */
/* 8. Reduced Motion */
/* ----------------------------- */

/* File: style.css */

/* --- 1. Self-hosted font --- */
/* Same Lato files as hostingdetails.eu, copied (not linked) into this
   domain's own /fonts/ folder. No request goes to Google Fonts or any
   other third party. */
@font-face {
	font-family: 'Lato';
	src: url('/fonts/lato-v25-latin-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Lato';
	src: url('/fonts/lato-v25-latin-700.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* --- 2. Root Variables --- */
/* Same token names and neutrals as hostingdetails.eu, with a red accent
   in place of purple. Contrast ratios below are WCAG 2 figures, computed
   by hand against the backgrounds each colour actually sits on.

   Light theme:
   accent #d10000, white text on it          5.66:1
   accent #d10000 as text on title bg        4.95:1
   text-secondary #656d75 on surface         5.25:1

   Dark theme:
   accent #ff1f1f on surface                 4.34:1, used for borders
                                             only (non-text minimum 3:1)
   link/highlight #ff4040 on dark title bg   4.98:1
   text-primary #e0e0e0 on dark title bg     13.08:1
   text-secondary #adb5bd on dark surface    8.03:1

   The first version used softer, orange-leaning reds (#c0392b and
   #ff6b5e). These are pure reds with no green or blue in them, pushed
   as far as the contrast minimums allow.

   Worth knowing: red is also the error colour on hostingdetails.eu. On a
   placeholder with no status messages that is harmless, but should this
   page ever grow into a real site, the accent and the error colour need
   to be told apart. */
:root {
	--font-family: 'Lato', sans-serif;

	--colour-background-light: #f4f6f9;
	--colour-surface-light: #ffffff;
	--colour-text-primary-light: #212529;
	--colour-text-secondary-light: #656d75;
	--colour-border-light: #dee2e6;
	--colour-accent-light: #d10000;
	--colour-accent-hover-light: #a30000;
	--colour-title-bg-light: #fdecec;

	--colour-background-dark: #121212;
	--colour-surface-dark: #1e1e1e;
	--colour-text-primary-dark: #e0e0e0;
	--colour-text-secondary-dark: #adb5bd;
	--colour-border-dark: #3a3a3a;
	--colour-accent-dark: #ff1f1f;
	--colour-accent-hover-dark: #ff7070;
	--colour-title-bg-dark: #330f0f;
	--colour-link-dark: #ff4040;
}

/* --- 3. General Styles & Structure --- */
* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

/* Vertically and horizontally centred, since there is only one block of
   content on the page and no header controls or footer to anchor to. */
body {
	font-family: var(--font-family);
	margin: 0;
	padding: 15px;
	min-height: 100vh;
	background-color: var(--colour-background-light);
	color: var(--colour-text-primary-light);
	font-size: 0.9em;
	line-height: 1.4;
	display: flex;
	align-items: center;
	justify-content: center;
}

.container {
	width: 100%;
	max-width: 800px;
}

/* --- 4. Page Header & Title --- */
.page-header {
	margin-bottom: 15px;
	background-color: var(--colour-title-bg-light);
	padding: 0 20px;
	border-radius: 8px;
	border-bottom: 3px solid var(--colour-accent-light);
}

h1 {
	font-size: 1.6em;
	font-weight: 700;
	margin: 0;
	padding: 15px 0;
	color: var(--colour-text-primary-light);
	text-align: center;
	/* A long hostname must wrap rather than push the page sideways. */
	overflow-wrap: anywhere;
}

h1 span {
	color: var(--colour-accent-light);
}

/* --- 5. Message Block --- */
/* Matches .error-page-content and .static-page-content on
   hostingdetails.eu: the same surface, border and radius. */
.message {
	padding: 20px;
	background-color: var(--colour-surface-light);
	border: 1px solid var(--colour-border-light);
	border-radius: 8px;
	text-align: center;
}

.message p {
	margin: 0;
	color: var(--colour-text-secondary-light);
	font-size: 1.1em;
}

/* --- 6. Dark Mode Theme --- */
/* Follows the system setting through a media query instead of the
   body.dark-mode class used on hostingdetails.eu. That class is driven
   by the theme cookie, which is scoped to hostingdetails.eu and never
   reaches this domain, and a toggle button would need JavaScript for a
   page with nothing on it to read. */
@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--colour-background-dark);
		color: var(--colour-text-primary-dark);
	}

	.page-header {
		background-color: var(--colour-title-bg-dark);
		border-bottom-color: var(--colour-accent-dark);
	}

	h1 {
		color: var(--colour-text-primary-dark);
	}

	h1 span {
		color: var(--colour-link-dark);
	}

	.message {
		background-color: var(--colour-surface-dark);
		border-color: var(--colour-border-dark);
	}

	.message p {
		color: var(--colour-text-secondary-dark);
	}
}

/* --- 7. Media Queries for Responsiveness --- */
@media (max-width: 768px) {
	body {
		padding: 10px;
	}

	.page-header {
		padding: 0 15px;
	}

	h1 {
		font-size: 1.4em;
	}

	.message {
		padding: 15px;
	}
}

/* --- 8. Reduced Motion --- */
/* Nothing on this page moves. Kept anyway so the rule is already in
   place should a transition ever be added, same as hostingdetails.eu. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
	}
}