/*
 * samreis.co.uk — Sam's personal site.
 *
 * Ported from the original hand-built site (Style/body.css, index.css and
 * contact.css). The look is deliberately the same: charcoal background, system
 * sans, white text, and one colour per link matching the circles in the header
 * graphic. This is NOT a Bevl lead-gen site, so none of the mini-site design
 * rules in AGENTS.md apply here. See "Personal sites" in AGENTS.md.
 */

:root {
	--bg: #303030;
	--button: #212121;
	--text: #ffffff;
	--blue: #0b66c2;      /* LinkedIn */
	--blue-dark: #06427f;
	--pink: #ea4d89;      /* hover accent (was Dribbble) */
	--purple: #8248c3;    /* FileMaker resources */
	--purple-dark: #522882;
	--gold: #d2952d;      /* Bevl Software (was Solis Digital) */
	--gold-dark: #8f6419;
}

/* ---------- Page ---------- */

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* The original faded the page in with jQuery; this does the same with CSS only. */
@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

.main-section {
	box-sizing: border-box;
	width: 100%;
	max-width: 640px; /* 600px text column + 20px padding each side, as the original */
	margin: auto;
	padding: 50px 20px;
	animation: fade-in 1s ease both;
}

/* ---------- Header graphic (four circles + photo) ---------- */

.circle-title {
	display: block;
	width: 152px;
	height: auto;
	margin-bottom: 30px;
}

/* ---------- Text ---------- */

.title-text {
	font-weight: 400;
	font-size: 30px;
	letter-spacing: 1px;
	margin: 0 0 20px;
	line-height: 1.25;
}

.title-text strong {
	font-weight: 700;
}

.main-text {
	font-size: 20px;
	letter-spacing: 1px;
	line-height: 1.35;
	margin: 0 0 20px;
}

.main-text a {
	text-decoration: none;
}

.main-text a:hover {
	text-decoration: underline;
}

.link-bevl { color: var(--gold); }
.link-linkedin { color: #3d8ce0; } /* LinkedIn blue, lifted slightly for contrast on charcoal */
.link-fme { color: #a77de0; }      /* FileMaker purple, lifted slightly for contrast on charcoal */

/* ---------- Buttons ---------- */

.contact-section {
	margin-top: 50px;
}

.button,
.button-social {
	display: inline-block;
	font-size: 14px;
	padding: 17px 40px;
	color: #fff;
	border-radius: 4px;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.4s;
}

.button {
	background: var(--button);
}

.button:hover {
	background: var(--pink);
}

.button-section {
	margin-top: -10px;
	display: flex;
	flex-wrap: wrap;
	gap: 0 20px;
}

.button-social {
	margin-top: 20px;
}

.button-linkedin { background: var(--blue); }
.button-linkedin:hover { background: var(--blue-dark); }

.button-bevl { background: #a8721a; }
.button-bevl:hover { background: var(--gold-dark); }

.button-fme { background: var(--purple); }
.button-fme:hover { background: var(--purple-dark); }

.button i,
.button-social i {
	margin-right: 0.4em;
}

/* ---------- Accessibility (keep) ---------- */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
	padding: 10px 16px;
	background: #fff;
	color: #212121;
	border-radius: 4px;
	z-index: 10;
}

.skip:focus {
	left: 16px;
	top: 16px;
}

a:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}

@media (max-width: 600px) {
	.title-text { font-size: 26px; }
	.main-text { font-size: 18px; }
}