/*
 * JV Productinformatie 1.0.0
 *
 * Opmaak van de bestaande WooCommerce-tabel onder "Aanvullende informatie".
 *
 * Elke selector begint met #tab-additional_information. Dat doet twee dingen
 * tegelijk: het begrenst deze CSS tot dit ene paneel, en het geeft genoeg
 * gewicht om de themaregels (.woocommerce table.shop_attributes ...) te
 * verslaan zonder ergens !important te gebruiken.
 *
 * Niet aangeraakt: de kop <h2>, de naamloze <div> die Loobek om de tabel zet en
 * die de accordeon open- en dichtschuift, het paneel zelf, en alles daarbuiten.
 */

#tab-additional_information table.shop_attributes {
	width: 100%;
	margin: 0;
	table-layout: fixed;          /* een lange maatlijst maakt de tabel nooit breder */
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #e3e8f0;
	border-radius: 12px;
	overflow: hidden;             /* klipt de celachtergrond op de afgeronde hoeken */
	background: #ffffff;
	display: table;            /* zie de opmerking hieronder */
	font-size: 14px;
	line-height: 1.5;
}

/*
 * WooCommerce zet in woocommerce-smallscreen.css (max-width: 768px) rij en cel op
 * display:block, waardoor kenmerk en waarde onder elkaar komen te staan. Binnen
 * dit paneel zetten we de tabelweergave terug, zodat de twee kolommen op elke
 * schermbreedte naast elkaar staan.
 */
#tab-additional_information table.shop_attributes tbody {
	display: table-row-group;
}

#tab-additional_information table.shop_attributes tr {
	display: table-row;
}

#tab-additional_information table.shop_attributes th,
#tab-additional_information table.shop_attributes td {
	display: table-cell;
	max-width: none;
	width: auto;
	min-width: 0;                 /* neutraliseert .panel table th{min-width:150px} */
	padding: 11px 14px;
	border: 0;
	border-bottom: 1px solid #eceff5;
	background: #ffffff;
	text-align: left;
	vertical-align: top;          /* lange waarden blijven met hun kenmerk uitlijnen */
	font-family: inherit;         /* het lettertype van de site, niets nieuws */
	font-weight: 400;
	font-style: normal;
	overflow-wrap: anywhere;      /* afbreken binnen de kolom, nooit horizontaal scrollen */
}

/* Kenmerk: gedempt grijs, vaste kolombreedte. */
#tab-additional_information table.shop_attributes th {
	width: 40%;
	color: #6b7280;
}

/* Waarde: donkerblauw. */
#tab-additional_information table.shop_attributes td {
	color: #16234a;
}

/* Afwisselend wit en heel licht grijsblauw. */
#tab-additional_information table.shop_attributes tr:nth-child(odd) > th,
#tab-additional_information table.shop_attributes tr:nth-child(odd) > td {
	background: #f5f7fb;
}

/* Onderste rij zonder scheidingslijn, anders dubbelt hij met de buitenrand. */
#tab-additional_information table.shop_attributes tr:last-child > th,
#tab-additional_information table.shop_attributes tr:last-child > td {
	border-bottom: 0;
}

/* Hoeken van de hoekcellen, voor browsers die overflow op een tabel niet klippen. */
#tab-additional_information table.shop_attributes tr:first-child > th {
	border-top-left-radius: 11px;
}
#tab-additional_information table.shop_attributes tr:first-child > td {
	border-top-right-radius: 11px;
}
#tab-additional_information table.shop_attributes tr:last-child > th {
	border-bottom-left-radius: 11px;
}
#tab-additional_information table.shop_attributes tr:last-child > td {
	border-bottom-right-radius: 11px;
}

/* WooCommerce zet elke waarde in een <p>. */
#tab-additional_information table.shop_attributes th p,
#tab-additional_information table.shop_attributes td p {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
#tab-additional_information table.shop_attributes td p + p {
	margin-top: 4px;
}

/* Links blijven links: zelfde kleur als de waarde, kleur bij hover, zichtbare focus. */
#tab-additional_information table.shop_attributes td a {
	color: inherit;
	text-decoration: none;
}
#tab-additional_information table.shop_attributes td a:hover,
#tab-additional_information table.shop_attributes td a:focus {
	color: var(--loobek-primary-color, #c6213b);
}
/*
 * De focusrand is de enige plek met !important, en met reden: loobek/css/reset.css
 * regel 185 zet site-breed a:focus{outline:none!important}. Omdat de links hierboven
 * dezelfde kleur als de waarde krijgen, verliest iemand die met het toetsenbord werkt
 * anders elk spoor van waar hij is. De regel staat binnen dit paneel, dus verandert
 * nergens anders iets.
 */
#tab-additional_information table.shop_attributes td a:focus-visible {
	outline: 2px solid currentColor !important;
	outline-offset: 2px !important;
	border-radius: 2px;
}

/* Vanaf 600px: iets meer lucht en een vaste kenmerkkolom. Bewust nét onder de
   768px-grens van woocommerce-smallscreen.css, zodat ook een tablet van 768px de
   ruimere variant krijgt. */
@media (min-width: 600px) {

	#tab-additional_information table.shop_attributes {
		font-size: 15px;
	}

	#tab-additional_information table.shop_attributes th,
	#tab-additional_information table.shop_attributes td {
		padding: 12px 18px;
	}

	#tab-additional_information table.shop_attributes th {
		width: 200px;
	}
}