/*--------------------------------------------------------------
 * Triple Pharma Werkboek - Custom Styles
 *
 * Tailwind handles most styling via utility classes.
 * This file covers WordPress-specific overrides and
 * elements that need traditional CSS (e.g. .entry content
 * rendered by the WYSIWYG editor, TablePress, etc.).
 *--------------------------------------------------------------*/

/* Material Symbols Rounded (Google Fonts) */
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	vertical-align: middle;
}
/* Default size via :where() so Tailwind text-* utilities can override it. */
:where(.material-symbols-rounded) {
	font-size: 20px;
}

/*--------------------------------------------------------------
 * Public legal pages — prose styling
 *--------------------------------------------------------------*/
.legal-prose { color: #4b5563; line-height: 1.75; font-size: 16px; }
.legal-prose .lead { font-size: 18px; color: #374151; margin-bottom: 2rem; }
.legal-prose h2 {
	font-size: 1.5rem;
	font-weight: 600;
	color: #0A3766;
	margin-top: 2.25rem;
	margin-bottom: 0.75rem;
	letter-spacing: -0.01em;
}
.legal-prose h3 {
	font-size: 1.15rem;
	font-weight: 600;
	color: #0C447C;
	margin-top: 1.5rem;
	margin-bottom: 0.5rem;
}
.legal-prose p { margin-bottom: 1.1em; }
.legal-prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: 1.1em; }
.legal-prose ul li { margin-bottom: 0.35em; }
.legal-prose a { color: #185FA5; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.legal-prose a:hover { color: #0C447C; }
.legal-prose strong { color: #111827; font-weight: 600; }

/*--------------------------------------------------------------
 * Public marketing homepage — accessibility + polish
 *--------------------------------------------------------------*/

/* Smooth anchor scrolling, with offset for the sticky header */
html { scroll-behavior: smooth; }
.public-section[id],
section[id] { scroll-margin-top: 80px; }

/* Visible focus ring for keyboard users on all interactive elements */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #185FA5;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Fade-in-up on scroll (toggled by IntersectionObserver) */
.fade-up {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .7s ease-out, transform .7s ease-out;
	will-change: opacity, transform;
}
.fade-up.is-visible {
	opacity: 1;
	transform: none;
}

/* Respect user motion preferences: disable all decorative animation */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.fade-up,
	.fade-up.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* Prose / Entry content from WP editor */
.entry h1 { font-size: 1.5rem; font-weight: 600; color: #0C447C; margin-bottom: 0.75rem; margin-top: 1.5rem; }
.entry h2 { font-size: 1.25rem; font-weight: 600; color: #0C447C; margin-bottom: 0.5rem; margin-top: 1.25rem; }
.entry h3 { font-size: 1.1rem; font-weight: 600; color: #185FA5; margin-bottom: 0.5rem; margin-top: 1rem; }
.entry h4 { font-size: 1rem; font-weight: 600; color: #333; margin-bottom: 0.375rem; margin-top: 0.75rem; }

.entry p { margin-bottom: 1em; line-height: 1.7; }
.entry a { color: #185FA5; text-decoration: none; }
.entry a:hover { text-decoration: underline; }

.entry ul,
.entry ol {
	margin: 0 0 1em 1.5em;
	line-height: 1.7;
}

.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }

/* Fix: lege <p> tags tussen <li> items veroorzaken extra ruimte */
.entry ul p:empty,
.entry ol p:empty,
.entry li p:empty {
	display: none;
}

.entry li p {
	margin: 0;
}

.entry img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
}

.entry blockquote {
	border-left: 3px solid #185FA5;
	padding: 0.75em 1.25em;
	margin: 1em 0;
	color: #555;
	background: #f7f7f5;
	border-radius: 0 6px 6px 0;
}

/*--------------------------------------------------------------
 * Tables — unified mockup style
 *
 * Base styling applies to all tables (editor, TablePress,
 * databank, index). Specific overrides below for werkschema
 * and admin tables.
 *--------------------------------------------------------------*/

/* Base table reset */
table,
.entry table,
.tablepress {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 1.5em;
	border: none;
	border-radius: 8px;
	overflow: hidden;
}

/* Header row */
table thead th,
.entry table thead th,
.tablepress thead th {
	text-align: left;
	padding: 10px 14px;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	letter-spacing: 0.01em;
	border: none;
	border-bottom: 1px solid #ddd;
	background: #f7f7f5;
}

/* Smaller header for index tables */
.tp-index-table thead th {
	font-size: 12px;
	color: #888;
	letter-spacing: 0.02em;
}

/* Body cells */
table tbody td,
.entry table tbody td,
.tablepress tbody td {
	padding: 10px 14px;
	border: none;
	border-bottom: 1px solid #f0f0ec;
	color: #555;
	vertical-align: top;
}

/* Last row: no border */
table tbody tr:last-child td,
.entry table tbody tr:last-child td,
.tablepress tbody tr:last-child td {
	border-bottom: none;
}

/* Row hover — disabled */

/* Section/group rows (used in index + content tables) */
table tr.section-row td,
.entry table tr.section-row td,
table tbody tr.row-section td {
	background: #f7f7f5;
	font-weight: 600;
	color: #333;
	font-size: 14px;
	letter-spacing: 0.01em;
	padding: 11px 14px;
	border-bottom: 1px solid #e5e5e0;
}

table tr.section-row:hover td,
.entry table tr.section-row:hover td {
	background: #f7f7f5;
}

/*--------------------------------------------------------------
 * TablePress section headers (rows with colspan = chapter headers)
 *
 * TablePress renders #colspan# as merged cells. These rows
 * contain bold chapter titles like "Deel 1 - Management".
 * Style them as distinct section dividers matching the mockup.
 *--------------------------------------------------------------*/
.tablepress td[colspan] {
	background: #f7f7f5;
	font-weight: 600;
	color: #0C447C;
	font-size: 14px;
	letter-spacing: 0.01em;
	padding: 14px 14px 12px;
	border-bottom: 2px solid #e5e5e0;
	border-top: 1px solid #e5e5e0;
}

/* First section header: no top border */
.tablepress tbody tr:first-child td[colspan] {
	border-top: none;
}

/* The "Deel X" number cell in the same row as a colspan */
.tablepress td[colspan] ~ td,
.tablepress tr:has(td[colspan]) td {
	background: #f7f7f5;
	font-weight: 600;
	color: #0C447C;
	border-bottom: 2px solid #e5e5e0;
	border-top: 1px solid #e5e5e0;
}

/* Bold text inside section headers */
.tablepress td b,
.tablepress td B,
.tablepress td strong {
	color: #0C447C;
	font-weight: 600;
}

/* Index table column styling (only for 4-column tablepress tables) */
.tablepress.tp-index-table td:first-child {
	color: #999;
	font-size: 13px;
	width: 85px;
	white-space: nowrap;
}

.tablepress.tp-index-table td:nth-child(3) {
	font-size: 13px;
	color: #666;
	white-space: nowrap;
}

.tablepress.tp-index-table td:nth-child(4) {
	font-size: 13px;
	color: #999;
	white-space: nowrap;
}

/* Suppress hover on section header rows */
.tablepress tr:has(td[colspan]):hover td,
.tablepress tr.tp-section-row:hover td {
	background: #f7f7f5;
}

/* Disable hover highlight on content TablePress tables. Rows aren't striped,
 * and form/connected-cell tables are fill-in templates, so any hover flash is
 * unwanted. Note: form rows contain colspan value cells, so the colspan-row
 * rule above (meant for section headers) would otherwise highlight every row. */
.entry .tablepress > .row-hover > tr:hover > *,
.tablepress > .row-hover > tr:hover > *,
.entry .tablepress.tbody-has-connected-cells tr:hover td,
.tablepress.tbody-has-connected-cells tr:hover td,
.entry .tablepress.tp-form-table tr:hover td,
.tablepress.tp-form-table tr:hover td {
	background-color: transparent;
	color: inherit;
}

/* Fallback class added via JS for browsers without :has() */
.tablepress tr.tp-section-row td {
	background: #f7f7f5;
	font-weight: 600;
	color: #0C447C;
	font-size: 14px;
	letter-spacing: 0.01em;
	padding: 14px 14px 12px;
	border-bottom: 2px solid #e5e5e0;
	border-top: 1px solid #e5e5e0;
}

/*--------------------------------------------------------------
 * Form-style TablePress tables
 *
 * Tables with class .tbody-has-connected-cells or .tp-form-table
 * are styled as structured forms (e.g. organigram, checklists).
 *--------------------------------------------------------------*/
.tablepress.tp-form-table {
	border: none;
	border-radius: 0;
	overflow: visible;
	border-collapse: separate;
	border-spacing: 6px 4px;
}

/* Reset the index-table column overrides for form tables */
.tablepress.tp-form-table td:first-child {
	color: #333;
	font-size: 14px;
	width: auto;
	white-space: normal;
}

.tablepress.tp-form-table td:nth-child(3),
.tablepress.tp-form-table td:nth-child(4) {
	font-size: 14px;
	color: #555;
	white-space: normal;
}

/* All cells */
.tablepress.tp-form-table td {
	padding: 12px 16px;
	border: none;
	font-size: 14px;
	line-height: 1.6;
	vertical-align: top;
}

/* Label cells (first column in regular rows) */
.tablepress.tp-form-table td.column-1 {
	background: transparent;
	color: #444;
	font-weight: 500;
	width: 35%;
	border-right: none;
}

/* Value cells */
.tablepress.tp-form-table td.column-2,
.tablepress.tp-form-table td.column-3 {
	background: transparent;
	color: #333;
}

/* Empty value cells — subtle dotted bottom border to suggest "fill in" */
.tablepress.tp-form-table td.column-2:empty,
.tablepress.tp-form-table td.column-3:empty {
	background: transparent;
	border-bottom: 1px dashed #ccc;
	min-height: 40px;
}

/* Section header rows (colspan rows) in form tables */
.tablepress.tp-form-table td[colspan] {
	background: transparent;
	color: #0C447C;
	font-weight: 600;
	font-size: 14px;
	padding: 14px 16px;
	border: none;
	letter-spacing: 0.01em;
}

/* Sub-header row (Functie / Naam / Telefoonnummer) */
.tablepress.tp-form-table td strong {
	color: #0C447C;
}

/* Row with all bold cells = column header row */
.tablepress.tp-form-table tr:has(td.column-1 > strong):has(td.column-2 > strong) td {
	background: transparent;
	font-weight: 600;
	font-size: 13px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 10px 16px;
	border: none;
}

/* Hover on form rows — disabled */

/* Fallback: JS-added class for column header rows */
.tablepress.tp-form-table tr.tp-column-header td {
	background: transparent;
	font-weight: 600;
	font-size: 13px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 10px 16px;
	border: none;
}

/* Don't hover section/column-header rows */
.tablepress.tp-form-table tr:has(td[colspan]):hover td,
.tablepress.tp-form-table tr.tp-section-row:hover td,
.tablepress.tp-form-table tr.tp-column-header:hover td {
	background-color: transparent;
}

/* Override the general section rules that leak into form tables.
 * Because almost every form row has a colspan value cell, the rules
 * `.tablepress tr:has(td[colspan]) td` and `.tablepress td[colspan]`
 * (more specific than `.tp-form-table td`) would otherwise add a gray
 * fill and top/bottom section borders to every row. Clear them here.
 * The dashed "fill-in" underline on empty cells (`td.column-2:empty`)
 * has higher specificity and is intentionally preserved. */
.entry .tablepress.tp-form-table tr td,
.entry .tablepress.tp-form-table tr th,
.tablepress.tp-form-table tr td,
.tablepress.tp-form-table tr th {
	background: transparent;
	border-top: none;
	border-bottom: none;
}

/* Number column */
.nr,
table .nr {
	color: #aaa;
	font-size: 14px;
	width: 75px;
}

/* Title links in tables */
.title-link,
table .title-link,
table a {
	color: #185FA5;
	cursor: pointer;
	text-decoration: none;
}

.title-link:hover,
table .title-link:hover,
table a:hover {
	text-decoration: underline;
}

/* Version badges */
.badge {
	display: inline-block;
	font-size: 12px;
	padding: 3px 10px;
	border-radius: 20px;
	font-weight: 500;
	white-space: nowrap;
}

.badge.v2,
.badge-blue {
	background: #E6F1FB;
	color: #0C447C;
}

.badge.v7,
.badge-green {
	background: #EAF3DE;
	color: #27500A;
}

/* Date column */
.date-col,
table .date-col {
	font-size: 13px;
	color: #aaa;
	white-space: nowrap;
}

/*--------------------------------------------------------------
 * TablePress overrides
 *--------------------------------------------------------------*/
.tablepress {
	border: 1px solid #e5e5e0;
	border-radius: 8px;
}

.tablepress thead th {
	border-bottom: 1px solid #ddd;
}

.tablepress tbody td {
	border-bottom: 1px solid #f0f0ec;
}

.tablepress tfoot th {
	padding: 10px 14px;
	font-size: 12px;
	font-weight: 600;
	color: #888;
	background: #f7f7f5;
	border: none;
	border-top: 1px solid #ddd;
}

/* Alternating row colors (subtle) */
.tablepress .even td {
	background: transparent;
}

.tablepress .odd td {
	background: transparent;
}

/*--------------------------------------------------------------
 * Werkschema cards (restyled table.werkschema — card look)
 *
 * Markup is a SiteOrigin 3-column grid of <table class="werkschema">.
 * Each table renders as a rounded card: dark header bar, white body,
 * laptop rows (digital docs) + a "Bewaren:" section with book rows.
 *--------------------------------------------------------------*/
table.werkschema,
.entry table.werkschema {
	width: 100%;
	border: 1px solid #e5e5e0;
	border-radius: 12px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	margin: 0 0 24px;
}

/* Header bar — note: markup uses <td colspan="2">, not <th> */
table.werkschema thead,
.entry table.werkschema thead {
	background: #676565;
}

table.werkschema thead td,
.entry table.werkschema thead td,
table.werkschema thead th,
.entry table.werkschema thead th {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background: #676565;
	padding: 14px 18px;
	border: none;
	letter-spacing: 0;
}

/* Body rows */
table.werkschema tbody td,
.entry table.werkschema tbody td {
	font-size: 15px;
	padding: 11px 18px;
	border-bottom: 1px solid #f0f0ec;
	color: #555;
	vertical-align: top;
}

table.werkschema tbody tr:last-child td,
.entry table.werkschema tbody tr:last-child td {
	border-bottom: none;
}

/* Icon column (laptop / book) */
table.werkschema tbody td:first-child,
.entry table.werkschema tbody td:first-child {
	width: 1px;
	white-space: nowrap;
	padding-right: 0;
	text-align: center;
	color: #676565;
}

.entry table.werkschema i.far.fa-book-open,
.entry table.werkschema i.fas.fa-laptop,
table.werkschema i.far.fa-book-open,
table.werkschema i.fas.fa-laptop {
	font-size: 18px;
	color: #676565;
}

/* Links to digital documents */
table.werkschema a,
.entry table.werkschema a {
	color: #185FA5;
	text-decoration: none;
	font-weight: 500;
}

table.werkschema a:hover,
.entry table.werkschema a:hover {
	text-decoration: underline;
}

/* "Bewaren:" section break (full-width row with colspan="2") */
table.werkschema tbody td[colspan="2"],
.entry table.werkschema tbody td[colspan="2"] {
	border-top: 1px solid #ececec;
	padding-top: 13px;
}

table.werkschema tbody td[colspan="2"] strong,
.entry table.werkschema tbody td[colspan="2"] strong {
	color: #888;
	font-weight: 600;
}

/*--------------------------------------------------------------
 * Databank API tables (packing slips, COA, dossiers)
 *--------------------------------------------------------------*/
.databank-table {
	border: 1px solid #e5e5e0;
	border-radius: 8px;
	overflow: hidden;
}

.databank-table thead th {
	font-size: 12px;
	font-weight: 600;
	color: #888;
	background: #f7f7f5;
	padding: 10px 14px;
	border-bottom: 1px solid #ddd;
}

.databank-table tbody td {
	padding: 10px 14px;
	border-bottom: 1px solid #f0f0ec;
}

/* databank hover — disabled */

.databank-table a {
	color: #185FA5;
	text-decoration: none;
	font-weight: 500;
}

.databank-table a:hover {
	text-decoration: underline;
}

/* Highlight / info blocks (used in content) */
.highlight-uitleg {
	border-left: 3px solid #ffe407;
	padding: 1em;
	background-color: #feffda;
	border-radius: 3px;
	margin: 1.25em 0;
}

.informatieblok {
	border-left: 3px solid #ffe407;
	padding: 1.125em 1.125em 0.3125em;
	background-color: #feffda;
	border-radius: 3px;
	margin: 1.25em 0;
}

/* Admin link table */
.websitelinksbeheren { border-collapse: collapse; }
.websitelinksbeheren td {
	border-bottom: none;
	border-top: none;
	box-shadow: none;
}
.shortcode_link { font-size: 12px; }

/* Tooltip shortcode */
.su-tooltip { text-decoration: underline; }

/* Font Awesome icon spacing */
i.far.fa-check-square,
i.far.fa-square { margin-right: 5px; }

i.fal.fa-book-open {
	font-size: 20px;
	margin-right: 5px;
	color: brown;
}

/*--------------------------------------------------------------
 * ACF Front-end Forms (instellingen page)
 *--------------------------------------------------------------*/
.acf-form-fields {
	max-width: 640px;
}

.acf-field {
	padding: 16px 0 !important;
	border-bottom: 1px solid #f0f0ec;
	border-top: none !important;
}

.acf-field:last-child {
	border-bottom: none;
}

.acf-label label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #0C447C;
	margin-bottom: 4px;
}

.acf-label .description {
	font-size: 13px;
	color: #999;
	line-height: 1.5;
	margin-top: 2px;
	margin-bottom: 8px;
}

.acf-input-wrap input[type="text"],
.acf-input-wrap input[type="number"],
.acf-input-wrap input[type="email"],
.acf-input-wrap input[type="url"],
.acf-input-wrap input[type="tel"],
.acf-input textarea {
	width: 100%;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 1.5;
	color: #333;
	background: #fff;
	border: 1px solid #d4d4d0;
	border-radius: 8px;
	outline: none;
	transition: border-color 0.15s, box-shadow 0.15s;
	font-family: inherit;
}

.acf-input-wrap input:focus,
.acf-input textarea:focus {
	border-color: #185FA5;
	box-shadow: 0 0 0 3px rgba(24, 95, 165, 0.1);
}

.acf-input textarea {
	resize: vertical;
	min-height: 100px;
}

/* Submit button */
.acf-form-submit {
	padding-top: 20px;
	margin-top: 8px;
}

.acf-form-submit input[type="submit"],
.acf-form-submit .acf-button {
	display: inline-block;
	padding: 10px 28px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: #185FA5;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: background-color 0.15s;
	font-family: inherit;
}

.acf-form-submit input[type="submit"]:hover,
.acf-form-submit .acf-button:hover {
	background: #0C447C;
}

/* Print styles */
@media print {
	.sidebar,
	header.topbar,
	footer,
	[data-sidebar-toggle] {
		display: none !important;
	}

	.main {
		margin: 0;
		padding: 0;
	}

	.print-document-footer {
		page-break-before: avoid;
		margin-top: 2rem;
	}
}

/* SiteOrigin Panels */
.panel-layout {
	max-width: 100%;
	overflow: hidden;
}

.panel-grid {
	overflow: hidden;
}

.panel-grid-cell .panel {
	box-shadow: none;
}

/* Prevent tables from overflowing their container */
.entry table,
.panel-grid-cell table,
.tablepress {
	max-width: 100%;
	table-layout: fixed;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Allow content area to constrain everything inside */
.entry,
.panel-grid-cell {
	overflow-x: auto;
	max-width: 100%;
}

/* WordPress pagination styling */
.nav-links {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

.nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	border: 1px solid #e5e5e0;
	border-radius: 0.375rem;
	font-size: 0.875rem;
	color: #555;
	text-decoration: none;
	transition: background-color 0.15s;
}

.nav-links .page-numbers:hover {
	background-color: #f7f7f5;
}

.nav-links .page-numbers.current {
	background-color: #185FA5;
	border-color: #185FA5;
	color: #fff;
}

/* Post navigation */
.post-navigation {
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid #e5e5e0;
	display: flex;
	justify-content: space-between;
}

.post-navigation .nav-links {
	display: flex;
	justify-content: space-between;
	width: 100%;
}