/*
 * Cookie consent bar, designed by Klemen Smrtnik, 24 Sep 2026. See changes/2026-09-24-cookie-bar.md.
 * The plugin is Pressidium Cookie Consent, which renders cookieconsent v2. Its consent window is set
 * to layout "bar", position "bottom" in the plugin settings (migration 011). This file then:
 *   - uses the footer's colour, #8b072a, with white text: 9.7 : 1;
 *   - sets the title to 20 px, the text and the buttons to 14 px (first 30 / 20 px as in the design;
 *     Klemen found that too big and asked for 20 / 14);
 *   - makes the bar at least 120 px high (Klemen: 160 px at first, then 120), with the content
 *     centred top to bottom; it grows when the text needs more room;
 *   - puts the content on the site's own edges: 100 px from each side above 1024 px, 40 px from
 *     768 to 1024 px, 20 px below (the same as the header and the footer);
 *   - up to 1024 px puts the buttons under the text, and on phones stacks them at full width.
 * Only the consent bar (#cm) is restyled. The cookie settings dialog keeps the plugin's colours.
 * Loaded after the plugin's stylesheet. The two-id selectors outrank its `#cm.bar` rules.
 */

#cc--main #cm.bar {
	box-sizing: border-box;
	display: flex !important;          /* the plugin forces block: #cc_div #cm { display:block!important } */
	align-items: center;
	width: 100%;
	max-width: none;
	min-height: 120px;
	padding: 12px 100px !important;    /* the plugin sets 1.2em !important on phones */
	border-radius: 0;
	box-shadow: none;
	background: #8b072a;
	color: #fff;
	font-family: inherit;
}
#cc--main #cm.bar #c-inr {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	width: 100%;
	max-width: none;
	margin: 0;
}
#cc--main #cm.bar #c-inr-i {
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
}
#cc--main #cm.bar #c-ttl {
	margin: 0 0 8px;
	color: #fff;
	font-size: 20px;
	font-weight: 400;
	line-height: 1.25;
}
#cc--main #cm.bar #c-txt {
	color: #fff;
	font-size: 14px;
	line-height: 1.45;
}
#cc--main #cm.bar #c-txt .cc-link {
	margin: 0;   /* the markup already has a space before it; a margin indented it when it wrapped */
	padding: 0;
	border: 0;
	background: none;
	color: #fff;
	font-size: inherit;
	font-weight: 400;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}
#cc--main #cm.bar #c-bns {
	display: flex;
	flex: 0 0 auto;
	gap: 8px;
	max-width: none;
	margin: 0;
}
#cc--main #cm.bar .c-bn {
	min-width: 200px;
	margin: 0;
	padding: 10px 20px;
	border: 1px solid #fff;
	border-radius: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
}
#cc--main #cm.bar #c-p-bn {
	background: #fff;
	color: #1a1a1a;
}
#cc--main #cm.bar #c-p-bn:hover {
	background: #f3e6ea;
}
#cc--main #cm.bar #c-s-bn {
	background: transparent;
	color: #fff;
}
#cc--main #cm.bar #c-s-bn:hover {
	background: rgba(255, 255, 255, 0.14);
}
#cc--main #cm.bar .c-bn:focus-visible,
#cc--main #cm.bar #c-txt .cc-link:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

/* Up to 1024 px the site stacks its columns (menu, footer), so the buttons go under the text here too.
   Beside the text they left it a column 240 px wide at 768 px, and the bar grew to 374 px. */
@media (max-width: 1024px) {
	#cc--main #cm.bar { padding: 16px 40px !important; }
	#cc--main #cm.bar #c-inr { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (max-width: 767px) {
	#cc--main #cm.bar { padding: 16px 20px !important; }
	#cc--main #cm.bar #c-inr { align-items: stretch; }
	#cc--main #cm.bar #c-bns { flex-direction: column; }
	#cc--main #cm.bar .c-bn { width: 100%; min-width: 0; }
}