/*
Theme Name: Two Roads
Description: Theme for the Two Roads Ltd website, built on Twenty Twenty-Five.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 7.1
Requires PHP: 8.2
Text Domain: tworoads
*/

/* Small touches theme.json can't express. Everything else lives in theme.json. */

html {
	scroll-behavior: smooth;
}

/* Leave room for the sticky header when jumping to a section. */
:where([id]) {
	scroll-margin-top: 6rem;
}

/* Keep the header at the top while scrolling. The sticky element has to be the
   template part's wrapper, because it's the header's only parent. */
.wp-site-blocks > header.wp-block-template-part:has(.tr-header) {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
}

.tr-header {
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
}

.tr-card {
	height: 100%;
	border-top: 4px solid var(--wp--preset--color--accent);
	box-shadow: 0 1px 2px rgba(18, 38, 58, 0.08), 0 4px 16px rgba(18, 38, 58, 0.06);
}

.tr-eyebrow {
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* Plain amber is too faint for small text on slate, so use the lighter shade. */
.tr-hero .tr-eyebrow {
	/* !important beats the block editor colour class (which uses !important too). */
	color: var(--wp--preset--color--accent-light) !important;
}

/* Hero photo: a lorry on a rural road (Artem Balashevsky, Unsplash).
   The dark slate tint is at least 80% opaque wherever there's text, so the text
   stays readable (WCAG AA) even over the brightest part of the photo. It fades on
   the right, where there's no text, so the lorry shows through. */
.tr-hero {
	background-image:
		linear-gradient(90deg, rgba(37, 51, 64, 0.82) 0%, rgba(37, 51, 64, 0.82) 55%, rgba(37, 51, 64, 0.45) 100%),
		url("assets/hero.jpg");
	/* Slightly larger than the section and anchored left, which moves the lorry
	   over to the right, away from the text. */
	background-size: max(130%, 1100px) auto;
	background-position: left 62%;
	background-repeat: no-repeat;
}

/* On narrower screens the text reaches further across, so the tint stays at full
   strength all the way. */
@media (max-width: 1280px) {
	.tr-hero {
		background-image:
			linear-gradient(rgba(37, 51, 64, 0.82), rgba(37, 51, 64, 0.82)),
			url("assets/hero.jpg");
	}
}

/* On phones a smaller copy of the photo saves data. */
@media (max-width: 781px) {
	.tr-hero {
		background-image:
			linear-gradient(rgba(37, 51, 64, 0.82), rgba(37, 51, 64, 0.82)),
			url("assets/hero-small.jpg");
		background-size: cover;
		background-position: 40% center;
	}
}

/* Contact form */
.tr-contact .ff-el-form-control {
	border-radius: 6px;
}

.tr-contact .ff-btn-submit {
	background-color: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--contrast) !important;
	border: 0 !important;
	border-radius: 6px !important;
	font-weight: 700 !important;
	padding: 0.8rem 1.6rem !important;
}

.tr-contact .ff-btn-submit:hover,
.tr-contact .ff-btn-submit:focus-visible {
	background-color: var(--wp--preset--color--accent-dark) !important;
}

/* Menu links on the navy header. */
.tr-header .wp-block-navigation a,
.tr-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.tr-header .wp-block-navigation a:hover,
.tr-header .wp-block-navigation a:focus-visible {
	color: var(--wp--preset--color--accent);
}

.tr-contact strong {
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

/* Logo: white on transparent, made from the original artwork. logo-dark.png is the black version for light backgrounds. */
.tr-logo { display: block; line-height: 0; }
.tr-logo img { height: auto; }

/* A smaller logo on phones, so the sticky header doesn't take up too much of the screen. */
@media (max-width: 781px) {
	.tr-header .tr-logo img {
		width: 80px;
	}
}