/*
 * Delivery promise panels, and the shared look for every notice this plugin
 * puts on the shop front.
 *
 * Everything visual comes from the variables below, so the child theme can
 * restyle all of it in one place without waiting for a plugin update:
 *
 *   :root {
 *     --bam-notice-bg:  #48bea3;
 *     --bam-notice-ink: #10352d;
 *   }
 *
 * White ink on #48BEA3 measures about 2.3:1, under the 4.5:1 that WCAG asks for
 * at this size. That is a deliberate choice, made with the trade-off understood.
 * Two things soften it: nothing is set in a lighter or transparent white, since
 * fading white on a mid-tone is what actually makes it hard to read, and the
 * smallest line is a little larger than it was. If it ever needs correcting,
 * either --bam-notice-ink: #10352d (7:1) or --bam-notice-bg: #1f7a66 (5.2:1)
 * fixes it from the child theme alone.
 */

:root {
	--bam-notice-bg: #48bea3;
	--bam-notice-ink: #ffffff;
	/* Full white, not a faded one: transparency here costs legibility outright. */
	--bam-notice-quiet: #ffffff;
	--bam-notice-rule: rgba(255, 255, 255, .35);
	--bam-notice-radius: 4px;
	--bam-notice-warn-bg: #f5c451;
	--bam-notice-warn-ink: #3d2c00;
}

.bam-promise {
	padding: .85rem 1.1rem;
	margin: 0 0 1.25rem;
	border: 0;
	border-radius: var(--bam-notice-radius);
	background: var(--bam-notice-bg);
	color: var(--bam-notice-ink);
	font-size: .93rem;
	line-height: 1.55;
}

.bam-promise p {
	margin: 0 0 .4rem;
}

.bam-promise p:last-child {
	margin-bottom: 0;
}

.bam-promise a {
	color: inherit;
	text-decoration: underline;
}

/*
 * The headline reads as a sentence, not a banner: normal weight throughout, with
 * only the two things the customer is deciding on — how long they have, and the
 * date they get — carrying any weight.
 */
.bam-promise-headline {
	font-size: 1.02rem;
	font-weight: 400;
}

.bam-promise-detail {
	color: var(--bam-notice-ink);
}

.bam-promise-small {
	/* Nudged up from .82rem: white on this green needs the size back. */
	font-size: .86rem;
	color: var(--bam-notice-quiet);
}

.bam-countdown-live {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.bam-strong {
	font-weight: 700;
}

.bam-countdown-urgent {
	/* Inside a coloured panel a red would fight the background, so lean on weight. */
	font-weight: 700;
	text-decoration: underline;
}

.bam-countdown-done {
	font-weight: 400;
	opacity: .85;
}

.bam-promise-late {
	background: var(--bam-notice-warn-bg);
	color: var(--bam-notice-warn-ink);
}

.bam-promise-late .bam-promise-small,
.bam-promise-late .bam-promise-detail {
	color: inherit;
}

.bam-promise-order {
	margin-bottom: 1rem;
}