/* -- Cookie-banner -- */

#clearcookie-banner {
	z-index: 20000 !important; /* So the cookie banner also covers the top navigation */
}
#clearcookie-banner .clearcookie__inner__footer__button {
    width: calc(50% - 15px) !important;
}

#clearcookie-banner .clearcookie-button--deny-all {
    display: none !important;
}

dialog#clearcookie-banner { /* Add this to reset the default <dialog> styles and maintain the overlay as stated in the clearcookie banner */
  border: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

/*
 * Suppress focus ring on the auto-selected button when the banner first opens.
 *
 * Why not :focus-visible:
 * Chrome applies :focus-visible to programmatic .focus() calls made before any
 * user input has occurred (page load), because it has no input modality context
 * yet and defaults to keyboard-like behaviour. So :focus:not(:focus-visible)
 * does not suppress the ring on initial load.
 *
 * Class-based approach:
 * The accessibility script adds clearcookie-button--suppress-ring to the
 * auto-focused button, then removes it on the first keydown event. This means:
 * - Page opens: ring hidden on the auto-focused "Toon instellingen" button
 * - User presses any key: class removed, ring appears normally during Tab navigation
 * Higher specificity (2 classes + ID + pseudo-class) beats the vendor's
 * (1 class + ID + pseudo-class), so this wins without !important.
 *
 * :focus:not(:focus-visible) is kept below for mouse-click focus (after the
 * user has interacted, clicking a button should not show a ring).
 */
#clearcookie-banner .clearcookie-button.clearcookie-button--suppress-ring:focus {
	box-shadow: inset 0 0 0 var(--clearcookie-secondary-button-border-width) var(--clearcookie-secondary-button-border-color);
	outline: none;
}

/* Mouse-click focus: suppress ring when the user clicks a button */
#clearcookie-banner .clearcookie-button:focus:not(:focus-visible),
#clearcookie-preferences-pane .clearcookie-button:focus:not(:focus-visible) {
	box-shadow: inset 0 0 0 var(--clearcookie-secondary-button-border-width) var(--clearcookie-secondary-button-border-color);
}
#clearcookie-banner .clearcookie-button--primary:focus:not(:focus-visible),
#clearcookie-preferences-pane .clearcookie-button--primary:focus:not(:focus-visible) {
	box-shadow: inset 0 0 0 var(--clearcookie-secondary-button-border-width) var(--clearcookie-secondary-button-border-color);
}

/* Make box-shadow changes instant — vendor animates border-color on hover over 0.15s which is visually distracting */
#clearcookie-banner .clearcookie-button,
#clearcookie-preferences-pane .clearcookie-button {
    transition: background-color 0.15s;
}

/* Focus ring on the Functioneel (required) toggle row when reached via Tab */
#clearcookie-banner .clearcookie__inner__body__settings__setting--required:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--clearcookie-toggle-border-color-focus);
    border-radius: 4px;
}

/*
 * Suppress focus ring on Functioneel label when settings panel first opens.
 * Mirrors the clearcookie-button--suppress-ring pattern used for the button
 * on banner open. The accessibility script adds this class before focusing
 * functionalLabel, then removes it on the first keydown so Tab navigation
 * shows the ring normally from that point on.
 */
#clearcookie-banner .clearcookie__inner__body__settings__setting--required.clearcookie--suppress-ring:focus {
    box-shadow: none;
    outline: none;
}

/* Add logo on top of the cookie banner title */
.clearcookie__inner__header {
	display: block !important;
  	text-align: center;
	align-content: center;
}
.clearcookie__inner__header__logo {
	max-width: 300px;
	justify-content: center;
	justify-items: center;
	justify-self: center;
	text-align: center;
	margin-left: auto;
	margin-right: auto; 
	opacity: .33;
	height: 100% !important; /* Fix the auto height of 20px when this is off */
	width: 100% !important; /* Needed to show logo on mobile too */
}