/**
 * One World theme: details theme.json can't express.
 * Colours, type scale and spacing come from theme.json presets.
 */

/* Type: Archivo's width axis carries the voice. Headings run wide, like freight markings. */
body {
	font-stretch: 100%;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1,
.wp-block-site-title {
	font-stretch: 125%;
}

h2 {
	font-stretch: 116%;
}

h3 {
	font-stretch: 106%;
}

h1,
h2,
h3 {
	text-wrap: balance;
}

p,
li {
	text-wrap: pretty;
}

::selection {
	background: var(--wp--preset--color--tag);
	color: var(--wp--preset--color--ink);
}

/* Keyboard focus: visible on light and dark sections. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--paddock);
	outline-offset: 3px;
	border-radius: 2px;
}

:where(.has-paddock-background-color, .has-paddock-deep-background-color) :focus-visible {
	outline-color: var(--wp--preset--color--tag);
}

/* Links on the green bands. */
:where(.has-paddock-background-color, .has-paddock-deep-background-color) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white);
	text-decoration-color: var(--wp--preset--color--tag);
	text-underline-offset: 0.2em;
}

/* Full-width sections sit flush against the header and footer,
   and the footer stays at the bottom of short pages. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* A heading that follows running text gets room to start a new section. */
.wp-site-blocks :where(.is-layout-flow, .is-layout-constrained) > :is(p, ul, ol) + h2 {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Header */
.ow-header {
	border-bottom: 1px solid var(--wp--preset--color--saltbush);
}

.ow-nav .wp-block-navigation-item__content:hover,
.ow-nav .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--tag);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45em;
}

/* Five links, the site name and the enquiry button only fit on one line from 1024px,
   so the menu button takes over below that (core switches at 600px). */
@media (min-width: 600px) and (max-width: 1023.98px) {
	.ow-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

@media (max-width: 599px) {
	.wp-site-blocks .ow-header-cta {
		display: none;
	}
}

/* Open menu: links start on the left and are big enough to tap.
   The list repeats the navigation's justification classes, so it needs the override too. */
.ow-nav .wp-block-navigation__responsive-container.is-menu-open,
.ow-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
}

.ow-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: var(--wp--preset--font-size--x-large);
	font-stretch: 116%;
	font-weight: 700;
}

/* Buttons */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	border-color: var(--wp--preset--color--paddock);
	color: var(--wp--preset--color--paddock);
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--paddock);
	border-color: var(--wp--preset--color--paddock);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-on-dark > .wp-block-button__link {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.75);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-on-dark > .wp-block-button__link:hover {
	background: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--paddock);
}

/* Home hero: the headline is the one loud thing on the site.
   Narrow text sits in left-justified groups so it lines up with the rest of the page. */
.ow-hero h1 {
	max-width: 14ch;
}

p.ow-lead {
	max-width: 40rem;
}

/* Photo strip overlaps the bottom of the hero band. */
.wp-site-blocks .ow-strip {
	margin-block-start: calc(-1 * var(--wp--preset--spacing--60));
	position: relative;
	z-index: 1;
}

.ow-strip .wp-block-image figcaption {
	margin-top: 0.6em;
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 560;
}

/* Fact row: label above value, separated by quiet rules. */
.wp-block-columns.is-style-facts {
	border-top: 2px solid var(--wp--preset--color--paddock);
	padding-top: var(--wp--preset--spacing--30);
}

.wp-block-columns.is-style-facts > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--wp--preset--color--saltbush);
	padding-left: var(--wp--preset--spacing--30);
}

@media (max-width: 781px) {
	.wp-block-columns.is-style-facts > .wp-block-column + .wp-block-column {
		border-left: 0;
		padding-left: 0;
		border-top: 1px solid var(--wp--preset--color--saltbush);
		padding-top: var(--wp--preset--spacing--20);
	}
}

.ow-fact-label {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 560;
	margin-bottom: 0.2em;
}

.ow-fact-value {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 640;
	line-height: 1.3;
	margin-top: 0;
}

/* List markers shaped like a livestock ear tag. */
.wp-block-list.is-style-tags {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-tags > li {
	position: relative;
	padding-left: 1.65em;
}

.wp-block-list.is-style-tags > li + li {
	margin-top: 0.45em;
}

.wp-block-list.is-style-tags > li::before {
	content: "";
	position: absolute;
	left: 0.15em;
	top: 0.32em;
	width: 0.72em;
	height: 0.9em;
	border-radius: 0.36em 0.36em 0.14em 0.14em;
	background:
		radial-gradient(circle at 50% 30%, var(--wp--preset--color--paddock) 0 0.1em, transparent 0.12em),
		var(--wp--preset--color--tag);
}

/* Product entries */
.ow-product h3 {
	margin-top: var(--wp--preset--spacing--20);
}

.ow-product .ow-more {
	font-weight: 620;
}

/* Footer */
.ow-footer a {
	color: var(--wp--preset--color--white);
	text-decoration-color: rgba(255, 255, 255, 0.45);
	text-underline-offset: 0.2em;
}

.ow-footer a:hover {
	text-decoration-color: var(--wp--preset--color--tag);
}

.ow-footer .wp-block-site-title a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.ow-footer h2 {
	font-size: var(--wp--preset--font-size--small);
	font-stretch: 100%;
	font-weight: 680;
	letter-spacing: 0;
	color: var(--wp--preset--color--tag);
}

.ow-footer-base {
	border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.ow-footer-links {
	list-style: none;
}

.ow-footer-links li + li {
	margin-top: 0.3em;
}

/* Enquiry form (Fluent Forms) in the theme's voice. */
.fluentform .ff-el-input--label label {
	font-weight: 600;
}

.fluentform .ff-el-form-control {
	border: 1px solid #8D9B93;
	border-radius: 4px;
	font: inherit;
	padding: 0.75em 0.85em;
}

.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--paddock);
	box-shadow: 0 0 0 3px rgba(31, 61, 47, 0.25);
}

.fluentform .ff-btn-submit,
.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--tag) !important;
	border: 2px solid var(--wp--preset--color--tag) !important;
	border-radius: 4px !important;
	color: var(--wp--preset--color--ink) !important;
	font: inherit;
	font-weight: 680;
	padding: 0.9em 1.45em;
}

.fluentform .ff-btn-submit:hover {
	background: var(--wp--preset--color--tag-deep) !important;
	border-color: var(--wp--preset--color--tag-deep) !important;
}

/* Help, required and error text dark enough to read on the saltbush panel. */
.wp-site-blocks .fluentform .ff-el-help-message {
	color: var(--wp--preset--color--slate);
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	margin-top: 0.4em;
}

.wp-site-blocks .fluentform .ff-el-is-required.asterisk-right label::after {
	color: #9f2a1e;
}

.wp-site-blocks .fluentform .ff-el-is-error .text-danger {
	color: #9f2a1e;
	font-size: var(--wp--preset--font-size--small);
}

.wp-site-blocks .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: #9f2a1e;
}

.wp-site-blocks .ff-message-success {
	background: var(--wp--preset--color--white);
	border: 0;
	border-left: 4px solid var(--wp--preset--color--paddock);
	box-shadow: none;
	color: var(--wp--preset--color--ink);
	padding: 1em 1.25em;
}