/**
 * enVisual Openingstijden – front-end stijl.
 * Accentkleuren worden via inline CSS-variabelen gezet:
 *   --envisual-ot-accent          (hoofdkleur)
 *   --envisual-ot-accent-soft     (zachte tint voor achtergrondbalk)
 *   --envisual-ot-accent-contrast (leesbare tekstkleur op de gevulde badge)
 */

/* Standaardwaarden op :root, zodat de door de plugin geïnjecteerde kleur
   (eveneens op :root) ze kan overschrijven. Niet op .envisual-ot zetten:
   een definitie op de container zelf zou de ingestelde kleur overrulen. */
:root {
	--envisual-ot-accent: #c9a43d;
	--envisual-ot-accent-soft: rgba( 201, 164, 61, 0.16 );
	--envisual-ot-accent-contrast: #1a1a1a;
}

.envisual-ot {
	display: inline-block;
	max-width: 100%;
	/* Erf lettertype en tekstkleur van het thema (o.a. Divi). */
	font-family: inherit;
	color: inherit;
}

.envisual-ot__titel {
	margin: 0 0 .6em;
	font-size: 1.15em;
}

/* Tabel op basis van CSS-grid: dag links, tijd rechts, netjes uitgelijnd. */
.envisual-ot__tabel {
	display: grid;
	grid-template-columns: auto auto;
	align-items: baseline;
}

.envisual-ot__rij {
	display: contents;
}

.envisual-ot__dag,
.envisual-ot__tijd {
	/* Gelijke insets op elke rij, zodat een gevulde highlight nette marges heeft
	   én de kolommen exact uitgelijnd blijven. */
	border: 1px solid transparent;
	line-height: 1.3;
}

.envisual-ot__dag {
	padding: .4em 1.4em .4em .7em;
	font-weight: 700;
	text-transform: uppercase;
	white-space: nowrap;
}

.envisual-ot__tijd {
	padding: .4em .7em .4em 0;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

/* Bijzondere gesloten dag in de huidige week. */
.envisual-ot__rij.is-bijzonder-gesloten .envisual-ot__tijd {
	font-style: italic;
}

.envisual-ot__leeg {
	margin: 0;
	font-style: italic;
}

/* =========================================================================
 *  Highlight-stijlen voor de huidige dag (.is-vandaag)
 * ====================================================================== */

/* 1. Onderlijn – 1px accentrandje onder de rij. */
.envisual-ot--onderlijn .is-vandaag .envisual-ot__dag,
.envisual-ot--onderlijn .is-vandaag .envisual-ot__tijd {
	border-bottom-color: var( --envisual-ot-accent );
}

/* 2. Achtergrondbalk – zachte tint over de hele rij, afgeronde uiteinden. */
.envisual-ot--achtergrond .is-vandaag .envisual-ot__dag,
.envisual-ot--achtergrond .is-vandaag .envisual-ot__tijd {
	background: var( --envisual-ot-accent-soft );
}
.envisual-ot--achtergrond .is-vandaag .envisual-ot__dag {
	border-top-left-radius: .45em;
	border-bottom-left-radius: .45em;
}
.envisual-ot--achtergrond .is-vandaag .envisual-ot__tijd {
	border-top-right-radius: .45em;
	border-bottom-right-radius: .45em;
}

/* 3. Accentbalk links – verticaal streepje voor de dag. */
.envisual-ot--balk-links .is-vandaag .envisual-ot__dag {
	box-shadow: inset .18em 0 0 0 var( --envisual-ot-accent );
}

/* 4. Gevulde badge – volledige accentkleur met contrasttekst. */
.envisual-ot--badge .is-vandaag .envisual-ot__dag,
.envisual-ot--badge .is-vandaag .envisual-ot__tijd {
	background: var( --envisual-ot-accent );
	color: var( --envisual-ot-accent-contrast );
}
.envisual-ot--badge .is-vandaag .envisual-ot__dag {
	border-top-left-radius: .45em;
	border-bottom-left-radius: .45em;
}
.envisual-ot--badge .is-vandaag .envisual-ot__tijd {
	border-top-right-radius: .45em;
	border-bottom-right-radius: .45em;
}

/* 5. Accentkleur tekst – dag en tijd in de accentkleur. */
.envisual-ot--tekst .is-vandaag .envisual-ot__dag,
.envisual-ot--tekst .is-vandaag .envisual-ot__tijd {
	color: var( --envisual-ot-accent );
}