/* ==========================================================================
   COOKIE BAR — brand layer for oveleon/contao-cookiebar
   ==========================================================================
   The bundle is token-driven: its own stylesheet reads --ccb-* custom
   properties for every colour. So branding it means SETTING THOSE TOKENS
   rather than overriding its rules.

   That matters. Fighting the bundle's selectors means re-specifying
   padding, radius and width to stop half-overridden buttons looking wrong,
   and it breaks on every bundle update. Setting its tokens uses the API it
   deliberately exposes, and its layout keeps working.

   For the same reason the site's .btn rules are NOT applied here. The
   bundle stacks equal-width full-bleed buttons on mobile and rows them
   above 768px; imposing the site button on top produced a full-width pill
   sitting oddly beside the others.

   Tokens the bundle exposes (defaults in its own stylesheet):
     --ccb-btn-bg / -bdr / -clr / -bg-hvr    buttons
     --ccb-focus-clr                          focus ring
     --ccb-checked-bg / -clr                  toggle, on
     --ccb-unchecked-bg / -clr                toggle, off
     --ccb-disabled-bg / -clr                 toggle, locked
     --ccb-backdrop                           overlay behind the bar
     --ccb-anim-duration                      open/close timing
   ========================================================================== */

.contao-cookiebar {
	/* Secondary buttons — deny, save, details. Outlined, so they do not
	   compete with accept. */
	--ccb-btn-bg: transparent;
	--ccb-btn-bdr: var(--stroke);
	--ccb-btn-clr: var(--text);
	--ccb-btn-bg-hvr: var(--grey-light);

	/* The bundle already ships a correct :focus-visible ring and only asks
	   for the colour, so this is all that is needed — no competing outline. */
	--ccb-focus-clr: var(--prime);

	/* Toggles */
	--ccb-checked-bg: var(--grey-light);
	--ccb-checked-clr: var(--prime);
	--ccb-unchecked-bg: var(--white);
	--ccb-unchecked-clr: var(--grey-dark);
	--ccb-disabled-bg: var(--grey-light);
	--ccb-disabled-clr: var(--grey-dark);
}

/* Accept — the primary action, so it takes the site's button colours
   (--second, hovering to --prime) exactly as .btn does elsewhere.
   .highlight is the bundle's "emphasise accept" backend option; covering
   both means the branding holds whichever variant is configured. */
.contao-cookiebar .cc-btn.success,
.contao-cookiebar .highlight .success {
	--ccb-btn-bg: var(--second);
	--ccb-btn-bdr: var(--second);
	--ccb-btn-clr: var(--white);
	--ccb-btn-bg-hvr: var(--prime);
}


/* --------------------------------------------------------------------------
   TYPE
   --------------------------------------------------------------------------
   The bundle sets its own font-size in px. Inheriting keeps the bar on the
   site's type scale instead of a fixed 15px.
   -------------------------------------------------------------------------- */
.contao-cookiebar,
.contao-cookiebar .cc-btn {
	font-family: inherit;
}

.contao-cookiebar p,
.contao-cookiebar a {
	margin-bottom: 0;
}

/* Links must stay distinguishable from surrounding copy — colour alone is
   not sufficient (WCAG 1.4.1), so the underline is kept. */
.contao-cookiebar a:not(.cc-btn) {
	color: var(--prime);
	border-bottom: 1px solid var(--prime);
}

.contao-cookiebar a:not(.cc-btn):hover {
	color: var(--second);
	border-bottom-color: var(--second);
}

/* --------------------------------------------------------------------------
   BUTTON LAYOUT
   --------------------------------------------------------------------------
   The bundle stacks all three buttons full-width, then lets them size to
   their text above 768px. This gives them an explicit hierarchy instead:

       Accept all          full width, on its own line
       Deny all  |  Privacy settings     half each, sharing the next line

   Accept and Deny stay one click apart on the first layer — both are
   equally reachable, which is what consent has to be. Accept is only
   visually dominant, which is a normal hierarchy and not a dark pattern.

   .cc-footer also contains the collapsible .cc-groups panel, so it is
   pushed to its own full-width line below the buttons.

   `flex: 1 1 0` rather than `width: 50%` on purpose: with a zero basis the
   two share whatever is left after the gap, so they are exactly equal and
   never overflow — a 50% width plus a gap would.
   -------------------------------------------------------------------------- */

.contao-cookiebar .cc-footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Beat the bundle's own sizing at both breakpoints. All margins are zeroed,
   not just the bottom: it also sets margin-right: 15px for its inline row,
   which would add to the flex gap and clip 15px off the full-width button. */
.contao-cookiebar .cc-footer .cc-btn {
	width: auto;
	margin: 0;
}

.contao-cookiebar .cc-footer .cc-btn.success {
	flex: 1 1 100%;
}

.contao-cookiebar .cc-footer .cc-btn.deny,
.contao-cookiebar .cc-footer .cc-btn.info {
	flex: 1 1 0;
}

/* The settings panel is a sibling of the buttons — keep it on its own row. */
.contao-cookiebar .cc-footer .cc-groups {
	flex: 1 1 100%;
}