/**
 * Butterfields – legal pages (privacy policy, cookie policy)
 *
 * These pages use Hello Elementor's default template rather than an Elementor
 * layout, so out of the box they render in the parent theme's system font at
 * 14px. This sheet matches them to the Elementor content pages: Cormorant
 * Garamond headings and Manrope 16px/24px body copy in #34403c.
 *
 * Selectors go through `#content` so they outrank Complianz's document.min.css,
 * which styles the cookie policy via `#cmplz-document …` (1,0,1).
 *
 * Only enqueued on those pages — see butterfields_is_legal_page().
 */

.bf-legal-page {
	--bf-legal-ink: #34403c;
	--bf-legal-muted: #65706c;
	--bf-legal-rule: #e4e3da;
	--bf-legal-cream: #faf9f4;
}

.bf-legal-page #content {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(860px + 2 * var(--bf-gutter));
	margin-inline: auto;
	padding: clamp(40px, 5vw, 80px) var(--bf-gutter) clamp(56px, 7vw, 112px);
	font-family: var(--bf-font-primary);
	font-size: 16px;
	line-height: 1.5;
	color: var(--bf-legal-ink);
}

/* -------------------------------------------------------------------------
 * Title
 * ---------------------------------------------------------------------- */

.bf-legal-page #content .page-header {
	margin-bottom: clamp(24px, 3vw, 40px);
	padding-bottom: clamp(20px, 2.4vw, 32px);
	border-bottom: 1px solid var(--bf-legal-rule);
}

.bf-legal-page #content .entry-title {
	margin: 0;
	font-family: var(--bf-font-accent);
	font-weight: 500;
	font-size: clamp(34px, 3.2vw, 48px);
	line-height: 1.1;
	color: var(--bf-legal-ink);
}

/* -------------------------------------------------------------------------
 * Body copy
 * ---------------------------------------------------------------------- */

.bf-legal-page #content h2 {
	margin: clamp(32px, 3.4vw, 48px) 0 12px;
	padding: 0;
	border: 0;
	font-family: var(--bf-font-accent);
	font-weight: 500;
	font-size: clamp(24px, 2vw, 30px);
	line-height: 1.2;
	text-transform: none;
	color: var(--bf-legal-ink);
}

.bf-legal-page #content h3,
.bf-legal-page #content h4 {
	margin: 24px 0 8px;
	padding: 0;
	border: 0;
	font-family: var(--bf-font-primary);
	font-weight: 500;
	font-size: 20px;
	line-height: 1.3;
	text-transform: none;
	color: var(--bf-legal-ink);
}

.bf-legal-page #content h4 {
	font-size: 17px;
}

.bf-legal-page #content p,
.bf-legal-page #content li,
.bf-legal-page #content td,
.bf-legal-page #content th {
	font-family: var(--bf-font-primary);
	font-size: 16px;
	line-height: 1.5;
	color: var(--bf-legal-ink);
}

.bf-legal-page #content p {
	margin: 0 0 14px;
}

.bf-legal-page #content ul,
.bf-legal-page #content ol {
	margin: 0 0 16px;
	padding-left: 1.4em;
}

.bf-legal-page #content li {
	margin-bottom: 6px;
}

.bf-legal-page #content li::marker {
	color: var(--bf-primary);
}

.bf-legal-page #content strong {
	font-weight: 600;
}

/* "Last updated" lines and other small print. */
.bf-legal-page #content .bf-legal-meta,
.bf-legal-page #content #cmplz-document > p:first-child {
	color: var(--bf-legal-muted);
	font-size: 15px;
}

/* -------------------------------------------------------------------------
 * Links
 *
 * `:active` is repeated because the parent's reset.css paints every link
 * `a:active,a:hover{color:#336}`.
 * ---------------------------------------------------------------------- */

.bf-legal-page #content a,
.bf-legal-page #content a:visited {
	color: var(--bf-olive-dark);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bf-legal-page #content a:hover,
.bf-legal-page #content a:active,
.bf-legal-page #content a:focus-visible {
	color: var(--bf-legal-ink);
	text-decoration-thickness: 2px;
}

.bf-legal-page #content a:focus {
	border: 0;
	padding: 0;
}

.bf-legal-page #content a:focus-visible {
	outline: 2px solid var(--bf-primary);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
 * Tables (privacy policy) and Complianz's cookie dropdowns
 * ---------------------------------------------------------------------- */

.bf-legal-page #content table {
	width: 100%;
	margin: 0 0 20px;
	border-collapse: collapse;
}

.bf-legal-page #content th,
.bf-legal-page #content td {
	padding: 10px 12px;
	border: 1px solid var(--bf-legal-rule);
	text-align: left;
	vertical-align: top;
}

.bf-legal-page #content th {
	background-color: var(--bf-legal-cream);
	font-weight: 600;
}

.bf-legal-page #content .cmplz-dropdown {
	margin-bottom: 10px;
	border: 1px solid var(--bf-legal-rule);
	background-color: var(--bf-legal-cream);
}

.bf-legal-page #content .cmplz-dropdown summary {
	background-color: transparent;
	padding: 12px 14px;
}

.bf-legal-page #content .cmplz-dropdown summary h3 {
	margin: 0;
	font-size: 18px;
}

.bf-legal-page #content .cmplz-dropdown p,
.bf-legal-page #content .cmplz-dropdown a {
	font-size: 15px;
}

@media (max-width: 575px) {
	.bf-legal-page #content th,
	.bf-legal-page #content td {
		padding: 8px;
		font-size: 15px;
	}
}