/*
  legal-section styles: See imprint-main.css
*/
.legal-section > [role="list-title"] {
	margin-bottom: 0.5rem;
}

/* Indented list styling - for regular bulleted lists */
.legal-section ul {
	padding-left: 1.5rem;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

.legal-section li + li {
  margin-top: 0.25rem; /* Space only between items */
}

.policy-header {
    text-align: center;
    margin-bottom: 2rem;
}

.policy-title {
    font-size: 2rem;
    font-weight: bold;
    color: var(--primary);
    margin-bottom: 0.5rem;
    padding-top: 2rem;
    border-top: 2px solid var(--accent);
}

/* policy-toc dt a uses font-size: 1.1rem; in addition */
/* animated underline effect */
/* .policy-toc dt a::after, */
.legal-section a::after {
	content: '';
	position: absolute; /* Position relative to the link */
	bottom: -2px; /* Adjust based on your design - positions under text */
	left: 50%;
	width: 0;
	height: 2px;
	background-color: var(--border);
	transition: width 0.2s ease;
	transform: translateX(-50%);
}

/* This is the fix: target the ::after on hover */
/* .policy-toc dt a:hover::after, */
.legal-section a:hover::after {
	width: 100%;
}

/* Only show on keyboard navigation */
.legal-section a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.policy-toc {
	margin: 2.5rem 0;
	background-color: var(--bg);
}

.policy-toc > details {
	padding-left: var(--list-indent-increment);
}

.policy-toc > details > summary {
display: inline;
	padding: 1.25rem 0 1rem;
	line-height: 1.2;
	white-space: nowrap;
}

.policy-toc > details > summary::-webkit-details-marker {
	display: none; /* Remove WebKit default */
}

.policy-toc > details > summary::before {
	content: '▶'; /* "\25B6" */
	display: inline-block;
	position: relative;
	top: 1.25rem;
	vertical-align: top;
	padding-right: 0.5rem;
	color: var(--accent);
	font-size: 1rem;
}

.policy-toc details[open] summary::before {
	transform: rotate(90deg);
	padding-top: 0.5rem;
}

.policy-toc > details > summary > h2 {
	display: inline-block;
	margin: 1rem 0 0.5rem 0; 
	padding-bottom: 0.333rem;
	width: 93%;
	border-bottom: 2px solid var(--border);
}

.p-t-sum-h2-span {
    color: var(--accent);
    white-space: normal;
    margin-right: 0.5rem;
}

.p-t-sum-h2-lawref-span {
	font-weight: normal;
	font-size: 1.1rem;
	color: var(--primary);
	white-space: nowrap;
}

.p-t-sum-hint {
	margin: 0.5rem 0.1em 0 0;
	padding-left: 1.25rem;
	font-size: 0.9em;
	color: var(--text-light);
}

.policy-toc > details[open] .p-t-sum-hint {
	display: none;
}

/* === Layout for the Definition List === */
.policy-toc > details > dl {
	margin: 0;
	display: grid;
}

.policy-toc > details > dl > *  {
	/* Separate all children by small extra space */
	padding-bottom: 0.1rem;
}

.policy-toc > details > dl > dt {
	/* Description Term with dynamic indention */
	margin-left: var(--list-indent-increment);
}

.policy-toc > details > dl > dt > a {
	/* Similar to ".legal-section a" but with font-size: 1.1rem; */
	position: relative; /* Needed for ::after positioning */
	display: inline-block; /* Ensures proper width containment */
	text-decoration: none;
	color: var(--accent);
	font-weight: 600;
	font-size: 1.1rem;
	border-bottom: 2px solid transparent;
	transition: border-color 0.2s ease;
}

.policy-toc > details > dl > dt i {
	/* mostly only icons as idiomatic text */
	color: var(--accent);
	margin-right: 0.75rem;
}

.policy-toc > details > dl > dd {
	/* Definition Description is indipendently indented */
	margin: 0 0 0.75rem calc(var(--list-indent-increment) + 1.75rem);
	color: var(--text-light); /* Medium gray */
	font-size: 0.95rem;
	line-height: 1.5;
}

/* Custom-bullet list (prepend checkmark per line) */
.ul-fair-usage {
	padding-left: 0 !important;
}

.ul-fair-usage li {
	list-style: none;
	position: relative; /* Create positioning context */
	padding-left: 1.5em; /* Space for the bullet */
}

.ul-fair-usage li:before {
	content: "✓";
	font-weight: 600;
	color: var(--accent);
position: absolute;
	left: 0;
}

/* ===== TECHNICAL DETAILS and NESTED dualstack-DETAILS ===== */
.technical-details {
	overflow: hidden;
}

.technical-details p {
	margin: 0.75rem 0 1rem;
}

.dualstack-details summary,
.technical-details summary {
	display: flex;
	align-items: center;
	padding: 0.75rem;
	color: var(--accent);
	font-weight: 600;
	list-style: none;
	justify-content: center;
}

.technical-details[open] > summary {
	font-weight: normal;
	background: var(--accent-10);
}

.technical-details summary i {
	color: var(--accent);
	padding-right: 0.2rem;
}

.technical-details summary:hover {
	background-color: var(--accent-10);
}

.dualstack-details > summary::after,
.technical-details > summary::after {
	font-weight: normal;
	font-size: 1.1rem;
	content: '▼';
	margin-left: 0.5rem;
}

.dualstack-details[open] > summary::after,
.technical-details[open] > summary::after {
	content: '▲';
}

.summary-closed {
	display: inline; /* outer-only */
}

.summary-open {
	display: none; /* outer-only */
}

/* Summary text states - OUTER (technical-details) ONLY */
.technical-details[open] > summary .summary-open {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--text-light);
	font-size: 0.9rem;
}

.technical-details[open] > summary .summary-open i {
	font-size: 1rem;
}

.technical-details[open] > summary .summary-open strong {
	color: var(--accent);
	font-weight: 600;
}

.technical-details[open] > summary .summary-closed {
	display: none;
}

/* ===== NESTED ADJUSTMENTS for INNER (dualstack-) details ===== */
.dualstack-details {
	margin: 0; /* only difference to .technical-details */
	overflow: hidden;
}

.dualstack-details summary i {
	padding-right: 0.5rem; /* slightly more space than for .technical-details summary i */
}

.dualstack-details summary:hover {
	background-color: var(--card-bg); /* no visible hover effect */
}

/* ===== KEYBOARD-ONLY FOCUS BOX (color doesn't work) ===== */
.technical-details summary:focus-visible,
.dualstack-details summary:focus-visible {
	border: 1px solid var(--accent) !important;
	border-radius: 6px; /* --radius-md */
}

.technical-details h3 {
	margin-bottom: 0.25rem;
	font-size: 1rem;
	color: var(--accent);
	font-weight: 600;
}

/* ===== DUAL-STACK CONTENT ===== */
.dual-stack-detection {
	padding: 0.5rem 0 0 clamp(1rem, 2dvw, 2rem);
	background: var(--bg);
}

.ip-frames {
	display: grid;
	grid-template-columns: minmax(min-content, 16em) minmax(min-content, 40em);
	gap: 1rem;
	padding: 0.75rem 0;
}

.ip-frames h4 {
	margin: 0 0 0.3rem 0.25rem;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--accent);
}

.ip-frames > div:first-child .ip-display {
	max-width: 16ch; /* Limit only the iframe, not the label */
}

.ip-display {
	background: var(--card-bg);
	border: 1px solid var(--border);
	border-radius: 2px; /* --radius-xs */
	padding: 0.4rem 0.4rem 0 0.2rem;
	height: 3rem;
	max-width: 40ch; /* IPv6 address is maximum 8 colon separated 4-figure hex (8*4=32+7)*/
}

/* ===== LOG DATA DISPLAY ===== */

.log-data-dl {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.25rem 1rem;
	align-items: center;
	margin: 0.5rem 0;
	font-size: 0.9rem;
}

.log-data-dl dt {
	grid-column: 1;
	font-weight: 600;
	color: var(--primary);
	text-align: right;
	white-space: nowrap;
	padding: 0.15rem 0;
	margin-bottom: 0.25rem;
}

.log-data-dl dd {
	grid-column: 2;
	font-family: var(--font-mono);
	font-size: 0.9rem;
	color: var(--accent);
	background: var(--bg);
	padding: 0.25rem 0.5rem;
	border-radius: 2px; /* --radius-xs */
	border: 1px solid var(--border-light);
	word-break: break-word;
	line-height: 1.3;
	margin-bottom: 0.25rem;
}

.log-empty {
	color: var(--text-light);
	font-style: italic;
	font-family: inherit;
	font-size: 0.9em;
}

.log-empty:before {
	content: 'NONE';
	font-style: normal;
	padding: 0 0.4rem 0 0.15rem;
}

/* ===== LOG EXAMPLE (RAW LOG LINE) ===== */

.log-line-summary {
	margin: 1rem 0 0.5rem 0;
}

.log-example {
	font-family: var(--font-mono);
	font-size: 0.75em;
	background: var(--bg);
	padding: 1rem;
	border-radius: 4px; /* --radius-sm */
	border: 1px solid var(--border);
	white-space: pre-wrap;
	word-break: break-all;
	line-height: 1.4;
}

.retention-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	padding: 0 1.5rem;
	gap: 3rem;
}

.retention-period {
	font-size: 2rem;
	color: var(--accent);
	font-family: var(--font-mono);
	font-weight: bold;
	line-height: 1;
}

.retention-description {
	color: var(--text);
	font-size: 0.9rem;
	margin-top: 0.5rem;
}

.policy-details-summary {
	margin-bottom: 1rem;
}

.privacy-pledge-separator {
	margin: 0 min(1.9rem, 3dvw) 4rem; /* no min(), max() and clamp() fallback - use default */
	text-align: center;
}

.privacy-pledge-separator .separator-subtitle {
	color: var(--text-light);
	font-style: italic;
	font-weight: normal;
	margin-top: 0.5rem;
}

/* ===== RESPONSIVE ADJUSTMENTS within TECHNICAL DETAILS===== */
@media (max-width: 36rem) {
	.log-data-dl {
		grid-template-columns: 1fr;
		gap: 0.25rem;
	}
	
	.log-data-dl dt {
		margin-bottom: 0.75rem;
		padding: 3px; /* was 0.15rem 0; */
		font-size: 0.9em;
	}
	
	.log-data-dl dd {
		margin-bottom: 0.75rem;
		padding: 3px; /* was padding: 0.25rem 0.5rem; */
		font-size: 0.9em;
	}
	
	.ip-frames {
		grid-template-columns: 1fr;
	}
}