/* Practical Privacy reference section - scoped styles, matches site's navy/blue palette */

/* This is now a page of its own rather than a section bolted below the
   assessment tool, so the rule that separated it from what came above is
   gone and the column sits under the page heading instead of centred. */
#practical-privacy {
	max-width: 52em;
	margin: 0;
}

.pp-intro p {
	margin-bottom: 1em;
}

.pp-index-label {
	color: rgba(255,255,255,0.55);
	font-size: 0.9em;
	margin: 1.5em 0 0.5em 0;
}

.pp-index {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16em, 1fr));
	gap: 0.4em 1.5em;
	margin: 0 0 2em 0;
	padding: 1em 1.25em;
	border: solid 1px rgba(255,255,255,0.1);
	border-radius: 0.5em;
	background: rgba(255,255,255,0.02);
}

.pp-index {
	list-style: none;
}

.pp-index li {
	list-style: none;
	font-size: 0.9em;
}

.pp-index a {
	color: #7fb2e5;
	border-bottom: none;
}

.pp-index a:hover {
	color: #fff;
}

.pp-accordion {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.pp-item {
	border: solid 1px rgba(255,255,255,0.15);
	border-radius: 0.5em;
	background: rgba(255,255,255,0.03);
	overflow: hidden;
}

.pp-item summary {
	list-style: none;
	cursor: pointer;
	padding: 1em 1.25em;
	font-weight: bold;
	color: #fff;
	display: flex;
	align-items: baseline;
	gap: 0.75em;
	position: relative;
}

.pp-item summary::-webkit-details-marker {
	display: none;
}

.pp-item summary::after {
	content: '\f107';
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	position: absolute;
	right: 1.25em;
	top: 1.1em;
	color: rgba(255,255,255,0.4);
	transition: transform 0.2s ease;
}

.pp-item[open] summary::after {
	transform: rotate(180deg);
}

.pp-item summary:hover {
	background: rgba(255,255,255,0.04);
}

.pp-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: rgba(127,178,229,0.15);
	color: #7fb2e5;
	font-size: 0.85em;
	flex: 0 0 auto;
}

.pp-body {
	padding: 0 1.25em 1.25em 1.25em;
	color: rgba(255,255,255,0.65);
	font-size: 0.95em;
}

.pp-body p {
	margin-bottom: 1em;
	line-height: 1.6;
}

.pp-body p strong {
	color: #fff;
}

.pp-body ul,
.pp-body ol {
	margin: 0 0 1em 0;
	padding: 0;
}

.pp-body ul li,
.pp-body ol li {
	list-style: none;
	padding: 0.3em 0 0.3em 1.4em;
	position: relative;
	line-height: 1.55;
}

.pp-body ul li::before {
	content: '\2013';
	position: absolute;
	left: 0.1em;
	color: #7fb2e5;
}

.pp-body ol {
	counter-reset: pp-ol;
}

.pp-body ol li::before {
	counter-increment: pp-ol;
	content: counter(pp-ol) '.';
	position: absolute;
	left: 0;
	color: #7fb2e5;
	font-variant-numeric: tabular-nums;
}

.pp-body table {
	font-size: 0.9em;
}

@media (max-width: 736px) {
	#practical-privacy { margin-top: 3em; padding-top: 2em; }
	.pp-index { grid-template-columns: 1fr; }
}