/**
 * Styling for the holiday notice.
 *
 * Three variants of one message, because the same sentence has to work in three very
 * different slots: a full-width bar under the header, a card inside product and cart
 * content, and a tight line directly above the order button.
 *
 * The colours arrive as custom properties on the element itself, set from the settings, so
 * the shop can recolour the notice without touching this file. Nothing here sets a font
 * family: the notice inherits the theme's typography on purpose, which is what keeps it
 * looking like part of the shop rather than like a plugin talking.
 *
 * Everything is scoped under .pa-vacation so it cannot leak into the theme.
 */

.pa-vacation {
	box-sizing: border-box;
	background: var(--pa-vac-bg, #f3ede2);
	color: var(--pa-vac-fg, #1a1a1a);
}

.pa-vacation *,
.pa-vacation *::before,
.pa-vacation *::after {
	box-sizing: border-box;
}

.pa-vacation__inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.pa-vacation__icon {
	flex: 0 0 auto;
	line-height: 1.45;
	/* Emoji keep their own colours, so the icon is dimmed rather than recoloured. */
	opacity: .9;
}

.pa-vacation__body {
	margin: 0;
	padding: 0;
	font-size: 14px;
	line-height: 1.55;
	color: inherit;
}

.pa-vacation__title {
	font-weight: 700;
	color: inherit;
}

/* Keeps headline and text on one line while there is room, and lets the text drop under the
   headline when there is not, without a media query guessing where that happens. */
.pa-vacation__title + .pa-vacation__text::before {
	content: " ";
}

.pa-vacation__text {
	color: inherit;
	opacity: .92;
}

/*
 * Site-wide bar.
 *
 * Sits directly under the opening body tag, above the header. Full-bleed, because a bar with
 * a page margin around it reads as a dismissed cookie banner rather than as shop information.
 */
.pa-vacation--banner {
	width: 100%;
	padding: 11px 20px;
	border-bottom: 1px solid var(--pa-vac-line, rgba(0, 0, 0, .12));
	text-align: left;
}

/* Matches the width of the shop's own header row, so the notice lines up with the logo
   instead of sitting in a narrower column of its own. */
.pa-vacation--banner .pa-vacation__inner {
	max-width: 1400px;
	margin: 0 auto;
	align-items: center;
}

.pa-vacation--banner .pa-vacation__body {
	font-size: 13.5px;
}

/*
 * Card, used inside product, cart, checkout and order received content.
 */
.pa-vacation--block {
	margin: 0 0 22px;
	padding: 16px 18px;
	border: 1px solid var(--pa-vac-line, rgba(0, 0, 0, .12));
	border-radius: 12px;
}

/* On the product page the notice follows the price and precedes the add-to-cart button, so it
   needs air on both sides rather than only below. */
.woocommerce div.product .pa-vacation--block,
.pa-vacation--block.pa-vacation--block {
	margin-bottom: 22px;
}

.woocommerce div.product .summary .pa-vacation--block {
	margin-top: 18px;
}

/*
 * Compact line above the order button.
 *
 * Deliberately quieter than the card: by this point the customer has already read the notice
 * at least once, and a second loud box in the same colour reads as an error state.
 */
.pa-vacation--compact {
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--pa-vac-line, rgba(0, 0, 0, .12));
}

.pa-vacation--compact .pa-vacation__body {
	font-size: 13px;
	line-height: 1.5;
}

/* The box above is also written into the elements' style attributes by VacationMode, so that
   an "unused CSS" pass cannot leave the notice as bare text. Inline declarations outrank a
   stylesheet, which is why what follows is marked important: these are the two cases the
   attribute cannot express, and they still have to win. */
@media (max-width: 600px) {
	.pa-vacation--banner {
		padding: 10px 16px !important;
	}

	.pa-vacation__body {
		font-size: 13px !important;
	}

	.pa-vacation--banner .pa-vacation__inner {
		align-items: flex-start !important;
	}
}

/* The notice carries information the customer needs in order to decide, so it has to survive
   onto the printed page like the rest of the order details. */
@media print {
	.pa-vacation {
		border: 1px solid #000 !important;
		background: transparent !important;
		color: #000 !important;
	}
}