/* Additions to the original stylesheet (the original's inline nav styles are printed verbatim by inc/original-head-style.css). */

/*
 * WordPress adds .admin-bar to <body> for logged-in users. The original CMS used that class
 * for its own toolbar (.admin-bar{background:#5a7a93;color:#fff;padding...} in default.css),
 * which turned inherited page text white for anyone logged in. Restore the body's original
 * look, and keep the fixed header below the WordPress toolbar.
 */
body.admin-bar {
	border-top: 0;
	border-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	background: #fff;
	color: #666;
}
@media only screen and (min-width: 73.75rem) {
	body.admin-bar #header {
		top: 32px;
	}
}
/* Up to 600px WordPress makes its toolbar position:absolute; the original CSS gives <body>
   position:relative, so the toolbar was placed 46px down (inside the html margin WordPress
   adds) and covered the logo. Pull it back to the top of the page. */
@media screen and (max-width: 600px) {
	body.admin-bar #wpadminbar {
		top: -46px;
	}
}

/*
 * DELIBERATE CHANGE from the original (requested by the client): the homepage slider's
 * "Read More" was a hollow white outline (.button.hollow) that disappeared over the lighter
 * photos. It is now a solid button in the site's blue-to-teal stripe colours with an arrow.
 * Placement (margins, hidden below 50rem) still comes from the original rules.
 */
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow {
	display: inline-flex;
	align-items: center;
	gap: 0.875rem;
	padding: 1.1875rem 1.75rem 1.1875rem 2.125rem; /* 54px tall, as the original button, so the caption keeps its position */
	border: 0;
	border-radius: 0.3125rem;
	background: linear-gradient(100deg, #134164 0%, #0d677c 48%, #499eaa 100%);
	background-size: 180% 100%;
	background-position: 0% 50%;
	color: #fff;
	font-family: "futura-pt", "Jost", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 0.625rem 1.5rem rgba(8, 37, 62, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
	transition: background-position 350ms ease, box-shadow 250ms ease, transform 250ms ease;
}
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow::after {
	content: "\f178"; /* FontAwesome long-arrow-right */
	font-family: "FontAwesome";
	font-size: 0.9375rem;
	letter-spacing: 0;
	transition: transform 250ms ease;
}
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:hover,
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:focus-visible {
	background-position: 100% 50%;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 0.875rem 1.875rem rgba(8, 37, 62, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:hover::after,
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:focus-visible::after {
	transform: translateX(0.3125rem);
}
.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
/* The original hides the caption button on small screens; keep that despite the display above. */
@media only screen and (max-width: 50rem) {
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow {
		display: none;
	}
}
@media (prefers-reduced-motion: reduce) {
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow,
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow::after {
		transition: none;
	}
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:hover,
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:focus-visible,
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:hover::after,
	.gallery-type-rotating .rotatingContainer .slide .caption .button.hollow:focus-visible::after {
		transform: none;
	}
}

/*
 * DELIBERATE CHANGE from the original (requested by the client): the two homepage service
 * cards sat left in a three-column row with an empty third slot, and a two-line title pushed
 * one card's text and button lower than the other's. They are now centred as a pair, and
 * each card is a subgrid of shared rows (image / title / text / button) so all four line up.
 * Browsers without subgrid still get equal-height cards with the buttons aligned at the
 * bottom. The equal-heights spacer (shobrook-equalize.js) is redundant here and hidden.
 */
@media only screen and (min-width: 40em) {
	.services-menu .eq-container {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 30rem));
		grid-template-rows: auto auto 1fr auto;
		justify-content: center;
		column-gap: 2.5rem;
	}
	.services-menu .eq-container::before,
	.services-menu .eq-container::after {
		display: none;
	}
	.services-menu .eq-container > .columns {
		float: none;
		width: auto;
		max-width: none;
		display: flex;
		flex-direction: column;
		align-items: center;
		grid-row: span 4;
	}
	.services-menu .eq-container > .columns > h3,
	.services-menu .eq-container > .columns > .eq {
		align-self: stretch;
	}
	.services-menu .eq-container > .columns > .button {
		margin-top: auto;
	}
	.services-menu .eq-container .eq .spacer {
		display: none;
	}
	@supports (grid-template-rows: subgrid) {
		.services-menu .eq-container > .columns {
			display: grid;
			grid-template-rows: subgrid;
			justify-items: center;
		}
		.services-menu .eq-container > .columns > h3 {
			align-self: center;
			justify-self: stretch;
		}
		.services-menu .eq-container > .columns > .eq {
			justify-self: stretch;
		}
		.services-menu .eq-container > .columns > .button {
			align-self: start;
			margin-top: 0;
		}
	}
}

/*
 * Reserve the fixed header's height before the footer scripts run (shobrook-common.js sizes
 * #content-wrapper exactly as the original did, then removes data-sb-prepad), so a slow
 * connection doesn't paint the page under the header first.
 */
@media only screen and (min-width: 73.75rem) {
	#content-wrapper[data-sb-prepad] { padding-top: 166px; }
	body:has(.top-gallery-container) #content-wrapper[data-sb-prepad] { padding-top: 116px; }
}
@media only screen and (min-width: 91.8125rem) {
	#content-wrapper[data-sb-prepad] { padding-top: 189px; }
	body:has(.top-gallery-container) #content-wrapper[data-sb-prepad] { padding-top: 139px; }
}

/* Logged-in users: keep the cookie banner below the WordPress toolbar. */
@media screen and (min-width: 783px) {
	body.admin-bar .cookie-policy-container { top: 32px; }
}
@media screen and (max-width: 782px) {
	body.admin-bar .cookie-policy-container { top: 46px; }
}

/* default.css draws ../img/hr.png under every table cell; the file is a 404 on the original site
   too, so it never showed. Drop the request rather than log a 404 on every table. */
table tr th,
table tr td {
	background-image: none;
}

/* Current Online Auctions tile (<b>): the original's head style caps "> b" at 9rem while its
   "> a" rule is dropped by the stray "?>", so the current tile sized differently; match "> a". */
html body #header #nav ul#nav-menu > li.online_auctions > b { max-width: none; }
@media only screen and (min-width: 73.75rem) { html body #header #nav ul#nav-menu > li.online_auctions > b { max-width: 8rem; } }
@media only screen and (min-width: 73.75rem) and (max-width: 91.75rem) { html body #header #nav ul#nav-menu > li.online_auctions > b { max-width: 6rem; } }

/* Photo bands before the gallery script runs: first photo in place, as the original paints. */
.gallery-type-rotating.nojs { position: relative; overflow: hidden; }
.gallery-type-rotating.nojs .rotatingContainer .slide { position: absolute; top: 0; left: 0; }
.gallery-type-rotating.nojs .rotatingContainer .slide + .slide { visibility: hidden; }

/* Service cards 640-800px: the original's full-width block buttons (with the deliberate layout). */
@media only screen and (min-width: 40em) and (max-width: 50rem) {
	.services-menu .eq-container > .columns > .button { align-self: stretch; }
	@supports (grid-template-rows: subgrid) {
		.services-menu .eq-container > .columns > .button { align-self: start; justify-self: stretch; }
	}
}