/*
 * Ordinary pages from patterns/page-*.php and patterns/section-help.php: About, Contact and information pages.
 * They sit under Blocksy's Forest title band, in the page's text column; `alignwide` blocks reach the site
 * container. Text and images are edited in the block editor; layout and colour live here.
 */

/* Opening paragraph, a step up from body text. */
.ca-lede {
	font-size: var(--ca-text-body-lg);
	line-height: var(--ca-text-body-lg-line-height);
	color: var(--ca-text-primary);
}

/* Where a page's figures come from (the TAMS page). */
.ca-source {
	font-size: var(--ca-text-small);
	line-height: var(--ca-text-small-line-height);
	color: var(--ca-text-secondary);
}

/* Three short points, each under a Wheat rule (the homepage trust strip's look). */
.ca-points {
	gap: var(--ca-space-6);
	margin-block-end: var(--ca-space-10);
}

.ca-points__item {
	padding-block-start: var(--ca-space-4);
	border-block-start: 3px solid var(--ca-decor-gold);
}

.ca-points .ca-points__title {
	margin: 0 0 var(--ca-space-1);
	font-size: var(--ca-text-h4);
	line-height: var(--ca-text-h4-line-height);
}

.ca-points .ca-points__text {
	margin: 0;
	color: var(--ca-text-secondary);
}

/* Help box: the phone is how most customers get advice, so it closes the information pages. */
.ca-help {
	margin-block: var(--ca-space-10) 0;
	padding: var(--ca-space-6);
	border-inline-start: var(--ca-border-width-accent) solid var(--ca-decor-gold);
	border-radius: var(--ca-radius-md);
	background: var(--ca-bg-brand-subtle);
}

.ca-help > * {
	margin-block: 0 var(--ca-space-4);
}

.ca-help > :last-child {
	margin-block-end: 0;
}

.ca-help .ca-help__title {
	font-size: var(--ca-text-h3);
	line-height: var(--ca-text-h3-line-height);
}

/* Contact page: details beside the form, stacked on phones (the column block's own breakpoint). */
.ca-contact {
	gap: var(--ca-space-8);
	margin-block: var(--ca-space-8) var(--ca-space-10);
}

.ca-contact h2 {
	margin-block: 0 var(--ca-space-4);
	font-size: var(--ca-text-h3);
	line-height: var(--ca-text-h3-line-height);
}

.ca-call {
	margin-block-end: var(--ca-space-6);
}

.ca-panel {
	padding: var(--ca-space-6);
	border: 1px solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
	box-shadow: var(--ca-shadow-1);
}

/* Contact details: a small label over each value, as in the footer. */
.ca-contact-list {
	display: grid;
	gap: var(--ca-space-3);
	margin: 0;
}

.ca-contact-list dt {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-caption);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ca-contact-list dd {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: var(--ca-size-control);
	margin: 0;
}

.ca-contact-list address {
	font-style: normal;
}

.ca-contact-list a {
	display: inline-flex;
	align-items: center;
	min-height: var(--ca-size-control);
}

.ca-contact-list .ca-contact-list__phone {
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h3);
	font-weight: var(--ca-text-h3-weight);
}

/* Tables on information pages: delivery prices and the like. */
.ca-table {
	margin-block: var(--ca-space-6);
}

.ca-table table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid var(--ca-border-default);
}

/* Long values (cookie names) wrap, so the table fits a phone instead of scrolling sideways. */
.ca-table :is(th, td) {
	padding: var(--ca-space-3) var(--ca-space-4);
	border: 1px solid var(--ca-border-default);
	text-align: start;
	overflow-wrap: anywhere;
}

@media (max-width: 47.99rem) {
	.ca-table :is(th, td) {
		padding: var(--ca-space-2) var(--ca-space-3);
	}
}

.ca-table th {
	background: var(--ca-bg-subtle);
	font-weight: 600;
}

/* Legal pages (patterns/page-legal-*.php): the date they were last changed, then a contents list built from
 * the page's headings (inc/pages.php). */
.ca-legal-updated {
	color: var(--ca-text-secondary);
	font-size: var(--ca-text-small);
}

.ca-contents {
	margin-block: var(--ca-space-6) var(--ca-space-10);
	padding: var(--ca-space-5) var(--ca-space-6);
	border: 1px solid var(--ca-border-default);
	border-radius: var(--ca-radius-lg);
	background: var(--ca-bg-surface);
}

.ca-contents .ca-contents__title {
	margin: 0 0 var(--ca-space-2);
	font-family: var(--ca-font-heading);
	font-size: var(--ca-text-h4);
	font-weight: var(--ca-text-h4-weight);
	line-height: var(--ca-text-h4-line-height);
}

.ca-contents ol {
	margin: 0;
	padding-inline-start: var(--ca-space-6);
}

.ca-contents a {
	display: inline-block;
	padding-block: calc((var(--ca-size-control) - 1lh) / 2);
}

@media (min-width: 48rem) {
	.ca-contents ol {
		columns: 2;
		column-gap: var(--ca-space-8);
	}

	.ca-contents li {
		break-inside: avoid;
	}
}

/* Page not found (inc/pages.php): a Forest band like the page titles, then search, categories and help. */
.ca-band {
	padding-block: var(--ca-space-12);
	border-block-end: var(--ca-space-1) solid var(--ca-decor-gold);
	background: var(--ca-bg-brand);
	text-align: center;
}

.ca-band .ca-band__title {
	margin: 0;
	color: var(--ca-text-on-brand);
}

.ca-not-found {
	max-width: var(--theme-narrow-container-max-width, 750px);
	padding-block-start: var(--ca-space-10);
}

.ca-not-found .ca-lede {
	margin-block: 0 var(--ca-space-6);
}

.ca-not-found--help {
	padding-block: 0 var(--ca-space-16);
}

.ca-not-found--help .ca-help {
	margin-block-start: 0;
}
