/* Custom overrides — uniform empty tiles + red/grey theme */

/* ---------- Uniform tiles (no images) ---------- */
.tiles article > .image {
	aspect-ratio: 4 / 3;
	background-color: var(--grey-700);
}

.tiles article > .image img {
	display: none;
}

/* ---------- Red & grey palette ---------- */
:root {
	--red-700:  #7f1d1d;
	--red-600:  #b91c1c;
	--red-500:  #dc2626;
	--red-400:  #ef4444;
	--grey-900: #1f2937;
	--grey-800: #2d2d2d;
	--grey-700: #3f3f46;
	--grey-500: #6b7280;
	--grey-300: #d1d5db;
	--grey-200: #e5e7eb;
	--grey-100: #f3f4f6;
	--white:    #ffffff;
}

body, body.is-preload {
	background-color: var(--grey-100);
	color: var(--grey-900);
}

body:before {
	background-color: var(--grey-100) !important;
	background-image: linear-gradient(180deg, #ffffff 0%, #f3f4f6 60%, #e5e7eb 100%) !important;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--grey-900) !important;
}

p, li, label, td, th {
	color: var(--grey-900);
}

a {
	color: var(--red-600);
}

a:hover {
	color: var(--red-400);
}

/* Header */
#header .logo .title,
#header nav ul li a {
	color: var(--grey-900);
}

#header nav ul li a:hover {
	color: var(--red-600);
}

/* Menu (overlay) */
#menu {
	background-color: var(--grey-900);
	color: var(--white);
}

#menu h2,
#menu a {
	color: var(--white) !important;
}

#menu a:hover {
	color: var(--red-400) !important;
}

/* Tile colour wash — alternating red/grey for a sustained palette */
.tiles article.style1 > .image:before { background-color: var(--red-600); }
.tiles article.style2 > .image:before { background-color: var(--grey-700); }
.tiles article.style3 > .image:before { background-color: var(--red-700); }
.tiles article.style4 > .image:before { background-color: var(--grey-800); }
.tiles article.style5 > .image:before { background-color: var(--red-500); }
.tiles article.style6 > .image:before { background-color: var(--grey-900); }

.tiles article > a,
.tiles article > a h2,
.tiles article > a .content,
.tiles article > a:hover {
	color: var(--white) !important;
}

body:not(.is-touch) .tiles article:hover > .image:before {
	background-color: var(--grey-900) !important;
	opacity: 0.6;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="password"],
select,
textarea {
	background-color: var(--white) !important;
	border: 1px solid var(--grey-300) !important;
	color: var(--grey-900) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
	border-color: var(--red-600) !important;
	box-shadow: 0 0 0 1px var(--red-600) !important;
}

::placeholder {
	color: var(--grey-500) !important;
}

/* Buttons */
input[type="submit"],
input[type="button"],
button,
.button {
	background-color: var(--grey-800) !important;
	color: var(--white) !important;
	box-shadow: none !important;
	border: 0 !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
.button:hover {
	background-color: var(--grey-700) !important;
	color: var(--white) !important;
}

input[type="submit"].primary,
.button.primary {
	background-color: var(--red-600) !important;
}

input[type="submit"].primary:hover,
.button.primary:hover {
	background-color: var(--red-500) !important;
}

/* Footer */
#footer h2,
#footer p,
#footer li,
#footer a {
	color: var(--grey-900);
}

#footer .copyright a {
	color: var(--red-600);
}

#footer .icons .icon.style2:before {
	color: var(--grey-800) !important;
	border-color: var(--grey-800) !important;
}

#footer .icons .icon.style2:hover:before {
	color: var(--red-600) !important;
	border-color: var(--red-600) !important;
}