/* Cookie Consent — banner & settings styling
   Layout/structure follows the GOV.UK Design System cookie banner
   pattern (plain panel, equal-weight buttons so neither Accept nor
   Reject is visually favoured). Colours and font are theme-matched:
   --gcc-color-primary / --gcc-color-primary-text / --gcc-color-link
   are set inline by the plugin from your Settings → Cookie Consent
   colour pickers (default: Divi's standard accent blue), and the
   font-family is left as `inherit` so it picks up Divi's body font
   automatically. */

:root {
	--gcc-color-primary: #2ea3f2;
	--gcc-color-primary-text: #ffffff;
	--gcc-color-link: #2ea3f2;
	--gcc-black: #0b0c0c;
	--gcc-grey-panel: #f3f2f1;
	--gcc-border: #b1b4b6;
	--gcc-focus: #ffdd00;
}

.gcc-cookie-banner {
	position: relative;
	width: 100%;
	background: var(--gcc-grey-panel);
	border-bottom: 1px solid var(--gcc-border);
	font-family: inherit;
	color: var(--gcc-black);
}

.gcc-cookie-banner[hidden] {
	display: none;
}

/* Visible focus ring on the banner region itself when it receives
   programmatic focus, and on every interactive element within it —
   required so keyboard users can always see where they are. */
.gcc-cookie-banner:focus {
	outline: 3px solid var(--gcc-focus);
	outline-offset: -3px;
}

.gcc-cookie-banner__inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 2.2rem 2.2rem;
}

.gcc-cookie-banner__heading {
	font-size: 1.25rem;
	margin: 0 0 10px;
}

.gcc-cookie-banner__content p {
	margin: 0;
	line-height: 1.4;
	font-size: 1rem;
}

.gcc-button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 2.2rem;
}

/* Both Accept and Reject use the identical .gcc-button style
   deliberately — equal size, weight and colour, per ICO guidance
   that rejecting must be exactly as easy as accepting. Colour comes
   from --gcc-color-primary, set in Settings to match your Divi
   accent colour. */
.gcc-button {
	display: inline-block;
	background: var(--gcc-color-primary);
	color: var(--gcc-color-primary-text);
	border: 2px solid transparent;
	padding: 10px 16px;
	font-size: 0.95rem;
	font-family: inherit;
	font-weight: 600;
	border-radius: 0px;
	cursor: pointer;
	filter: brightness(1);
}

.gcc-button:hover {
	filter: brightness(0.88);
}

/* Focus state is deliberately loud (thick outline, high-contrast
   yellow) and never relies on colour alone, so it's visible against
   any theme colour scheme and for low-vision keyboard users. */
.gcc-button:focus,
.gcc-link:focus {
	outline: 3px solid var(--gcc-focus);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--gcc-black);
}

.gcc-button:focus:not(:focus-visible) {
	box-shadow: none;
}

.gcc-link {
	color: var(--gcc-color-link);
	text-decoration: underline;
	font-size: 0.95rem;
}

/* Settings page */
.gcc-settings {
	max-width: 640px;
	font-family: inherit;
}

.gcc-settings fieldset {
	border: none;
	padding: 0;
	margin: 0 0 20px;
}

.gcc-radios__item {
	margin-bottom: 8px;
}

.gcc-radios__item label {
	margin-left: 6px;
}

.gcc-radios__item input:focus {
	outline: 3px solid var(--gcc-focus);
	outline-offset: 2px;
}

.gcc-settings__confirmation {
	margin-top: 14px;
	padding: 12px;
	background: #eaf6ff;
	border: 1px solid var(--gcc-color-primary);
	border-radius: 3px;
}

/* Respect users who've asked the OS to reduce motion/transition effects. */
@media (prefers-reduced-motion: reduce) {
	.gcc-button {
		transition: none;
	}
}

/* Compatibility shim: Divi Accessibility (≤2.0.x) JS-inserts a skip link
   with class .da11y-screen-reader-text, but its hiding style lives in a
   stylesheet that can be missing entirely (GitHub "master" zip installs
   ship without the built CSS — the file 404s), leaving the skip link
   permanently visible. Recreate the intended visually-hidden-until-focus
   behaviour here so the banner and skip link coexist correctly. */
.skip-link.da11y-screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link.da11y-screen-reader-text:focus {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 10px 16px;
	clip: auto;
	clip-path: none;
	background: #fff;
}