/*
 * Consent: the project's own reopen controls, and a bounded skin over the
 * provider's banner.
 *
 * THE BANNER IS NOT THIS PROJECT'S MARKUP. Complianz Free renders it and owns
 * every behaviour in it. Most of its appearance is reached through the
 * provider's own settings — width, radius, border, position, checkbox style
 * and all six colour groups are configured in fixtures/consent.php, not here,
 * because a setting survives a plugin update and a stylesheet override does
 * not.
 *
 * What is left is the short list of design facts the settings cannot express.
 * Each block below says which one it is, and how it wins.
 *
 * HOW IT WINS, stated once. The provider generates its banner stylesheet into
 * wp-content/uploads and injects it at RUNTIME, so it is always later in the
 * document than this file and beats it at equal specificity. Two techniques
 * are used, in this order of preference:
 *
 *   1. REDEFINE THE PROVIDER'S OWN CUSTOM PROPERTIES on `.cmplz-cookiebanner`.
 *      The generated sheet declares them on `:root` and its own rules read
 *      them, so a declaration on the banner element is simply a nearer
 *      ancestor and wins whatever the order. This is the preferred form: it
 *      changes an input the vendor already reads rather than fighting a rule.
 *   2. A more specific selector, matching the vendor's own selector path with
 *      one element qualifier added. Used only where the value is hardcoded.
 *
 * NO RULE HERE CHANGES BEHAVIOUR. Nothing is hidden, nothing is moved out of
 * reach, and every button rule applies to all four buttons at once — the
 * Accept/Deny visual contract is measured by qa/consent.spec.mjs and would
 * fail if one were treated better than the other.
 *
 * NO CUSTOM PROVIDER TEMPLATE. The vendor's markup, its ARIA and its focus
 * handling are used as they ship, so a later upgrade to Premium is a licence
 * key rather than a rebuild.
 *
 * Source: assets/css/style.css, the `.consent` block.
 */

/* ------------------------------------------------ the project's controls -- */

/*
 * The footer reopen control. It sits in `.footer-links`, a grid of anchors, so
 * it has to look like one of them: the browser's own button chrome is stripped
 * and nothing else is added. Colour, size, weight and hover all come from the
 * footer's existing rules, which is the point — this is one more line in the
 * column, exactly as the design draws it.
 */
.footer-links .footer-consent {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.footer-links .footer-consent:hover {
	color: var(--white);
}

/*
 * The design's focus treatment, which a `<button>` needs stated because the
 * footer's anchors inherit theirs from the base stylesheet's `a` rules.
 */
.footer-links .footer-consent:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

/* ------------------------------------------------ the provider's banner -- */

/*
 * The provider's own variables, re-pointed at the source's measurements.
 *
 * `--cmplz_title_font_size`  the source's `.consent-copy strong` is 17px; the
 *                            provider derives 15px from the body size.
 * `--cmplz_button_font_size` the source's consent buttons are 14px; the
 *                            provider derives 15px the same way.
 * `--cmplz_category_header_always_active_color`
 *                            the provider paints "Vedno omogočeni" green.
 *                            There is no setting for it and the design has no
 *                            green anywhere, so it takes the muted text
 *                            colour the rest of the dialog uses.
 */
.cmplz-cookiebanner {
	--cmplz_title_font_size: 17px;
	--cmplz_button_font_size: 14px;
	--cmplz_category_header_always_active_color: var(--muted);
}

/*
 * The panel, CENTRED. The provider offers bottom-left, bottom-right, a
 * full-width bar and a middle-of-screen modal; the design's is a fixed-width
 * panel centred along the bottom edge, which is none of the four. Everything
 * else about the position — the width, the 10px inset, the full-width
 * behaviour under 768px — is the provider's `bottom-right` layout untouched.
 */
@media ( min-width: 769px ) {
	/*
	 * Doubled class, like the rules below it: the provider's `bottom-right`
	 * layout sets `right` and `transform` on the bare `.cmplz-cookiebanner`,
	 * and its stylesheet is injected after this one.
	 */
	.cmplz-cookiebanner.cmplz-cookiebanner {
		right: 50%;
		transform: translateX(50%);
	}

	/*
	 * 760px exactly. The provider's `banner_width` is a MIN width, so the
	 * three buttons in a row push the panel 12px past it; the source's panel
	 * is 760 and its buttons are content-sized. Capping the panel rather than
	 * the buttons keeps all three the same width as each other, which is the
	 * property that matters here.
	 */
	.cmplz-cookiebanner.cmplz-cookiebanner {
		max-width: 760px;
	}
}

/*
 * The design's edge insets on small screens. The provider takes its mobile
 * banner edge to edge; the source keeps 16px of page behind it, and 10px
 * under 560px, so its rounded corners stay visible. `inset-inline` because
 * the provider's own mobile rule sets `left`/`right` to `initial`, and the
 * banner is `position: fixed` — a margin would not move it.
 */
@media ( max-width: 768px ) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		inset-inline: 16px;
		bottom: 16px;
		width: auto;

		/*
		 * The provider's `min-width: banner_width` starts at 768px and its
		 * full-width mobile rule ends at 768px, so at exactly 768 both apply
		 * and the panel would stay 760 wide inside a 736 box. A minimum has to
		 * be released before an inset can take effect; a maximum cannot do it.
		 */
		min-width: 0;
	}
}

@media ( max-width: 560px ) {
	.cmplz-cookiebanner.cmplz-cookiebanner {
		inset-inline: 10px;
		bottom: 10px;

		/* `.consent-inner` drops to 18px below 560 in the source. */
		border-radius: 18px;
	}
}

/*
 * Padding and shadow. `.consent-inner` is 24px/26px with a wide, soft, blue-
 * tinted shadow; the provider ships 15px/20px and a generic two-layer black
 * one. Neither is a setting.
 */
.cmplz-cookiebanner.cmplz-cookiebanner {
	padding: 24px 26px;
	box-shadow: 0 26px 70px rgba(8, 24, 52, .22);
}

.cmplz-cookiebanner.cmplz-show:hover {
	box-shadow: 0 26px 70px rgba(8, 24, 52, .22);
}

/*
 * The title. The provider paints every string in the banner with one colour
 * and one weight; the source paints the heading navy and heavy against the
 * muted paragraph. The paragraph is the configured colour because it is most
 * of the words, so the heading is the one said here.
 */
.cmplz-cookiebanner .cmplz-header div.cmplz-title {
	color: var(--navy);
	font-weight: 800;

	/*
	 * Left, not centred. The provider centres the title in a three-column
	 * header between a logo slot and a close button; this banner has neither,
	 * so the title is alone on that row and the design sets it flush with the
	 * paragraph beneath it.
	 */
	grid-column: 1 / -1;
	justify-self: start;

	/*
	 * KEPT ON MOBILE. The provider hides the title below 425px to save
	 * vertical space. The design shows it at every width, and it is the
	 * element the dialog's own `aria-labelledby` points at -- a dialog whose
	 * visible heading disappears on a phone is the one place a title is most
	 * useful. Restored rather than left to the provider's default.
	 */
	display: block;
}

/*
 * Buttons. The site's buttons are heavier than a default control and the
 * source gives consent buttons their own height and horizontal padding
 * (`.consent-actions .btn`, the rules Slice 1 transcribed and Slice 12
 * removed once this banner replaced the one they were written for).
 *
 * APPLIED TO ALL FOUR AT ONCE. Accept, Deny, View preferences and Save get
 * identical geometry, identical family and identical weight; the only thing
 * that distinguishes them is colour, which is configured, and which the
 * Accept/Deny contract test measures.
 */
.cmplz-cookiebanner .cmplz-buttons button.cmplz-btn {
	min-height: 46px;
	padding-inline: 22px;
	font-family: "Google Sans", Inter, system-ui, sans-serif;
	font-weight: 800;
}

/*
 * Category titles. Same reason as the banner title: the source sets its
 * category names in navy and heavy against the muted description text. The
 * vendor's own rule for this is five classes deep, so this one matches it and
 * adds an element qualifier.
 */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header span.cmplz-category-title {
	color: var(--navy);
	font-weight: 800;
}

/*
 * The document links. The source puts them inline in the message paragraph;
 * the provider lists them under the buttons. The list is kept — it is the
 * provider's structure and it carries the correct `/sl/` routes — and the
 * links take the source's link colour, which is already the configured
 * hyperlink colour, plus its font family.
 */
.cmplz-cookiebanner .cmplz-documents a.cmplz-link {
	font-family: "Google Sans", Inter, system-ui, sans-serif;
	font-weight: 700;
}