/* ==========================================================================
   Frijns theme — documentviewer voor PDF's (privacy statement, voorwaarden)
   ========================================================================== */

.doc-viewer {
	margin: clamp(2rem, 4vw, 3rem) 0 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: var(--shadow-card);
}

/* Balk boven het document met titel en downloadknop */
.doc-viewer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.85rem clamp(0.9rem, 2vw, 1.25rem);
	background: var(--color-tint);
	border-bottom: 1px solid var(--color-border);
}

/* Dit is een h2 (voor een nette koppenstructuur), maar oogt als een label. */
.doc-viewer__title {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0;
	font-weight: 700;
	color: var(--color-navy);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	line-height: 1.4;
	letter-spacing: 0;
}

.doc-viewer__title svg {
	width: 1.15rem;
	height: 1.15rem;
	color: var(--color-primary);
	flex-shrink: 0;
}

.doc-viewer__download {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-pill);
	background: var(--color-primary);
	color: var(--color-white);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--transition-base);
}

.doc-viewer__download:hover {
	background: var(--color-primary-dark);
	color: var(--color-white);
}

.doc-viewer__download svg {
	width: 1rem;
	height: 1rem;
}

/* Het document zelf */
.doc-viewer__frame {
	position: relative;
	background: #f4f5f9;
	line-height: 0;
}

.doc-viewer__frame iframe {
	width: 100%;
	height: clamp(520px, 78vh, 900px);
	border: 0;
	display: block;
}

.doc-viewer__fallback {
	margin: 0;
	padding: 0.85rem clamp(0.9rem, 2vw, 1.25rem);
	border-top: 1px solid var(--color-border);
	font-size: var(--wp--preset--font-size--small, 0.95rem);
	color: var(--color-muted);
	line-height: 1.6;
}

.doc-viewer__fallback a {
	color: var(--color-primary);
	font-weight: 600;
}

/* Op telefoons tonen browsers een ingesloten PDF vaak niet (of als lege
   pagina). Daar vervangen we de viewer door een duidelijke downloadkaart. */
@media (max-width: 781px) {
	.doc-viewer__frame {
		display: none;
	}

	.doc-viewer__bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.85rem;
		border-bottom: 0;
	}

	.doc-viewer__download {
		width: 100%;
		justify-content: center;
		padding: 0.75rem 1.25rem;
	}

	.doc-viewer__fallback {
		border-top: 1px solid var(--color-border);
	}
}