/* ============================================================
   Announcement-balk (Below Header widget) — Scently-stijl
   Werkt op de standaard tekstwidget in de header-widget-regio.

   Opmaak-conventies voor de widgettekst:
   - <strong> of <b>  → benadrukt (donkere inkt)
   - <code>CODE</code> → kortingscode-chip (gestippelde rand)
   - <a>               → terracotta link met subtiele onderstreping
   ============================================================ */

.header-widget-region {
	background: linear-gradient(90deg, #FBE0DA 0%, #F8ECE4 45%, #FBE0DA 100%);
	border-bottom: 1px solid rgba(227, 115, 104, .18);
}

.header-widget-region .col-full {
	display: flex;
	justify-content: center;
}

.header-widget-region .widget {
	margin: 0;
	padding: 10px 16px;
	width: 100%;
}

.header-widget-region .textwidget p {
	margin: 0;
	text-align: center;
	font-size: 13px;
	line-height: 1.55;
	letter-spacing: .03em;
	color: #574B45;
	font-weight: 500;
}

.header-widget-region .textwidget strong,
.header-widget-region .textwidget b {
	color: #1F1A18;
	font-weight: 650;
}

/* Kortingscode-chip: <code>VAKANTIE10</code> */
.header-widget-region .textwidget code {
	display: inline-block;
	background: #FFFFFF;
	border: 1.4px dashed #E37368;
	border-radius: 8px;
	padding: 1px 10px;
	margin: 0 3px;
	font-family: inherit;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	color: #C9564B;
	vertical-align: baseline;
	white-space: nowrap;
}

.header-widget-region .textwidget a {
	color: #C9564B;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.header-widget-region .textwidget a:hover { color: #E37368; }

/* ── Roterende berichten (Rituals-stijl) ─────────────────────
   Elke <p> in de widget is een slide. JS voegt .is-rotating toe
   zodra er 2+ berichten zijn; zonder JS blijven alle regels
   gewoon zichtbaar onder elkaar. Grid stapelt de slides zodat de
   balk de hoogte van het langste bericht aanhoudt (geen springen). */
.header-widget-region .textwidget.is-rotating {
	display: grid;
}
.header-widget-region .textwidget.is-rotating > p {
	grid-area: 1 / 1;
	opacity: 0;
	transition: opacity .55s ease;
	pointer-events: none;
}
.header-widget-region .textwidget.is-rotating > p.is-active {
	opacity: 1;
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.header-widget-region .textwidget.is-rotating > p { transition: none; }
}

@media (max-width: 640px) {
	.header-widget-region .widget { padding: 8px 14px; }
	.header-widget-region .textwidget p { font-size: 12px; }
}