/*
Theme Name: Two Roads
Description: Theme for the Two Roads Ltd website, built on Twenty Twenty-Five.
Template: twentytwentyfive
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: 7.5rem;
}

/* 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;
	}
}

/* Full width, no title: full-width sections stretch edge to edge and bring their
   own spacing. Anything else keeps the normal reading width, with room around it
   at the top and bottom of the page. */
.tr-wide-page > .wp-block-post-content {
	padding-left: var(--wp--preset--spacing--40);
	padding-right: var(--wp--preset--spacing--40);
}

.tr-wide-page > .wp-block-post-content > .alignfull {
	margin-left: calc(-1 * var(--wp--preset--spacing--40)) !important;
	margin-right: calc(-1 * var(--wp--preset--spacing--40)) !important;
}

.tr-wide-page > .wp-block-post-content > :first-child:not(.alignfull) {
	margin-top: var(--wp--preset--spacing--60);
}

.tr-wide-page > .wp-block-post-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--preset--spacing--60);
}

/* Forms. Every Fluent Forms form on the site gets the same look, whatever page
   it's on and whatever it's connected to. */
.fluentform .ff-el-form-control {
	border-radius: 6px;
}

.fluentform .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;
}

.fluentform .ff-btn-submit:hover,
.fluentform .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;
	}
}

/* The header's phone button (added by the [tworoads_phone_button] shortcode). */
.tr-header-call .wp-block-button__link {
	padding: 0.5rem 1rem;
	white-space: nowrap;
}

/* When the menu's links don't fit across the header, assets/menu.js adds this
   class, and the menu button is used instead, as it is on phones. */
.tr-menu-collapsed .wp-block-navigation__responsive-container-open:not(.always-shown) {
	display: flex;
}

.tr-menu-collapsed .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
	display: none;
}

/* The page being viewed is underlined in the menu. */
.tr-header .wp-block-navigation .current-menu-item > a,
.tr-header .wp-block-navigation a[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.4em;
}

/* Drop-down menus under a menu link: wide enough for a page title on one line. */
.tr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container {
	min-width: 16rem !important;
	padding: 0.4rem 0;
	border: 0;
	border-radius: 0 0 6px 6px;
	box-shadow: 0 8px 24px rgba(18, 38, 58, 0.18);
}

.tr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.5rem 1rem;
}