/* ==========================================================================
   Policy pages: privacy, cookies, website terms, stays terms and cancellation,
   complaints, accessibility, the /policies/ index and the drafted PDF pages.
   Loaded after components.css (inc/assets.php loads every area-*.css).

   The page title is the one H1 (the page hero). The body starts at H2, then H3;
   it carries a "last updated" line and, on long policies, an "On this page"
   list of anchors (plain links, no JavaScript). Everything here is a class an
   editor can see in the block editor's Advanced > Additional CSS class(es).
   Colours and sizes come from theme.json via the preset variables.
   ========================================================================== */

/* ---- Last updated line -------------------------------------------------- */
.bnjc-policy-meta {
	margin-block: 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Notes for editors (staging only: each one is a mark.bnjc-gap) ------- */
.bnjc-policy-notes {
	margin-block-end: var(--wp--preset--spacing--50);
}

.bnjc-policy-notes > p {
	margin-block: 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
}

/* ---- On this page ------------------------------------------------------- */
.bnjc-policy-toc {
	box-sizing: border-box;
	max-inline-size: 68ch;
	margin-block: 0 var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 2px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.bnjc-policy-toc__title {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--navy);
}

.bnjc-policy-toc ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 782px) {

	/* Two columns once there are enough entries to need them. */
	.bnjc-policy-toc ul {
		columns: 2;
		column-gap: var(--wp--preset--spacing--70);
	}
}

.bnjc-policy-toc li {
	break-inside: avoid;
	margin: 0;
	padding: 0;
}

.bnjc-policy-toc a {
	display: flex;
	align-items: center;
	min-block-size: var(--touch-min, 44px);
	color: var(--wp--preset--color--navy);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.bnjc-policy-toc a:hover {
	text-decoration-thickness: 2px;
}

.bnjc-policy-toc a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* ---- Body: readable prose, room above each heading ----------------------- */
.bnjc-page-body h2[id],
.bnjc-page-body h3[id] {
	/* Landing on an anchor leaves the heading clear of the sticky header. */
	scroll-margin-block-start: calc(var(--header-h, 80px) + var(--wp--preset--spacing--40));
}

.bnjc-page-body .wp-block-list {
	max-inline-size: 68ch;
}

.bnjc-page-body .wp-block-list li {
	margin-block-end: var(--wp--preset--spacing--20);
}

/* Nested lists (who we share your data with) sit under their parent point. */
.bnjc-page-body .wp-block-list .wp-block-list {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* ---- Tables in policies (fees, contacts, the six principles) ------------- */
.bnjc-policy-table {
	margin-block: var(--wp--preset--spacing--60);
	overflow-x: auto;
}

.bnjc-policy-table table {
	inline-size: 100%;
	min-inline-size: 28rem;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-policy-table th,
.bnjc-policy-table td {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--grey-300);
	text-align: start;
	vertical-align: top;
}

.bnjc-policy-table thead th {
	border-block-end: 2px solid var(--wp--preset--color--navy);
	color: var(--wp--preset--color--navy);
	font-weight: 700;
}

.bnjc-policy-table caption,
.bnjc-policy-table figcaption {
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--grey-700);
	font-size: var(--wp--preset--font-size--small);
}

/* ---- Download the original PDF -------------------------------------------- */
.bnjc-policy-download {
	margin-block: 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--small);
}

.bnjc-policy-download a {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--touch-min, 44px);
}

/* ---- Media enquiries (patterns/media-enquiries.php) ----------------------- */
.bnjc-media-enquiries {
	box-sizing: border-box;
	max-inline-size: 68ch;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--grey-300);
	border-radius: 2px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

.bnjc-media-enquiries > :first-child {
	margin-block-start: 0;
}

.bnjc-media-enquiries > :last-child {
	margin-block-end: 0;
}

.bnjc-media-enquiries a {
	text-underline-offset: 3px;
}

.bnjc-media-enquiries a:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

@media print {

	.bnjc-policy-toc {
		break-inside: avoid;
	}
}

/* ==========================================================================
   The calm skin (14 Oct 2026; docs/prototypes/internal-pages-modern.html,
   "policy page"). A short band for the title, "On this page" as a row of pill
   links instead of a boxed list, headings in bold sentence case (from
   area-page.css), and a reading column with room around it.
   ========================================================================== */
.bnjc-page--narrow .bnjc-page-hero.has-band {
	min-block-size: 0;
}

.bnjc-page--narrow .bnjc-page-hero.has-band .bnjc-page-hero__inner {
	padding-block-end: var(--wp--preset--spacing--90);
}

.bnjc-policy-toc {
	padding: 0;
	border: 0;
	background: transparent;
}

.bnjc-policy-toc__title {
	margin-block-end: var(--wp--preset--spacing--40);
}

.bnjc-policy-toc ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	columns: auto;
}

.bnjc-policy-toc a {
	padding-inline: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--pill, 999px);
	background: var(--wp--preset--color--white);
	box-shadow: 0 8px 24px -16px rgba(11, 12, 56, 0.5);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
}

.bnjc-policy-toc a:hover {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

/* ==========================================================================
   One page for every policy (/about/policies/): an index, then one anchored
   section per policy. The full text sits in a <details> accordion, so every
   word is in the page for search engines and screen readers and nothing needs
   JavaScript. assets/js/policies.js only opens the section a link points at.
   ========================================================================== */
.bnjc-policy {
	scroll-margin-block-start: calc(var(--header-h, 80px) + var(--wp--preset--spacing--40));
	padding-block: var(--wp--preset--spacing--80);
	border-block-start: 1px solid var(--wp--custom--color--border-default);
}

.bnjc-policy > h2 {
	margin-block: 0 var(--wp--preset--spacing--40);
}

.bnjc-policy > p {
	max-inline-size: 68ch;
}

.bnjc-policy:target > h2 {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--ink-warm, currentColor);
	text-decoration-thickness: 3px;
	text-underline-offset: 6px;
}

.bnjc-policy .wp-block-details {
	max-inline-size: 68ch;
	margin-block-start: var(--wp--preset--spacing--50);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-policy .wp-block-details > summary {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	padding: var(--wp--preset--spacing--40) calc(var(--wp--preset--spacing--50) + 28px) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	font-weight: 700;
	color: var(--navy);
	list-style: none;
	cursor: pointer;
}

.bnjc-policy .wp-block-details > summary::-webkit-details-marker {
	display: none;
}

.bnjc-policy .wp-block-details > summary::after {
	content: "";
	position: absolute;
	inset-inline-end: var(--wp--preset--spacing--50);
	inset-block-start: 50%;
	inline-size: 9px;
	block-size: 9px;
	margin-block-start: -7px;
	border-inline-end: 2px solid var(--navy);
	border-block-end: 2px solid var(--navy);
	transform: rotate(45deg);
	transition: transform var(--dur-fast) var(--ease-out);
}

.bnjc-policy .wp-block-details[open] > summary::after {
	margin-block-start: -2px;
	transform: rotate(-135deg);
}

.bnjc-policy .wp-block-details > summary:hover {
	background: var(--wp--custom--color--hover-wash);
}

.bnjc-policy .wp-block-details > summary:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

.bnjc-policy .wp-block-details > :not(summary) {
	margin-inline: var(--wp--preset--spacing--50);
}

.bnjc-policy .wp-block-details > :last-child {
	margin-block-end: var(--wp--preset--spacing--50);
}

.bnjc-policy .wp-block-details h3 {
	margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--wp--preset--color--navy-darkest);
}

/* The list of policy documents (bnjc/policy-list). */
.bnjc-policylist {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	max-inline-size: 68ch;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
}

.bnjc-policylist__item {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	background: var(--white);
	border: 1px solid var(--wp--custom--color--border-subtle);
	border-radius: var(--wp--custom--radius--xs);
}

.bnjc-policylist__link,
.bnjc-policylist__name {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--wp--custom--layout--touch-min);
	font-weight: 700;
	color: var(--navy);
	overflow-wrap: anywhere;
}

.bnjc-policylist__link {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bnjc-policylist__type,
.bnjc-policylist__line,
.bnjc-policylist__reviewed {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	color: var(--grey-700);
}

.bnjc-policylist__link:focus-visible {
	outline: 2px solid var(--focus-ring);
	box-shadow: 0 0 0 4px var(--focus-halo);
	outline-offset: 2px;
}

/* The privacy policy, kept on its own page: a plain link out of its section. */
.bnjc-policy .bnjc-policy__out {
	margin-block-start: var(--wp--preset--spacing--50);
}

.bnjc-policy .bnjc-keyfacts {
	max-inline-size: 44rem;
	margin-block-start: var(--wp--preset--spacing--50);
}