/*
 * Sketch skin for the CookieYes consent banner.
 * See ../../loader.php for why every declaration is !important.
 */

:root {
	--skcb-ink: #101010;          /* headings + primary button background */
	--skcb-body: #3c3c3c;         /* description copy */
	--skcb-muted: #adadad;        /* the "Cookie Policy" link */
	--skcb-surface: #ffffff;      /* card */
	--skcb-secondary: #f1f1f1;    /* Reject all / Customize */
	--skcb-secondary-hover: #e5e5e5;
	--skcb-ink-hover: #2b2b2b;
	--skcb-radius-card: 18px;
	--skcb-radius-btn: 9px;
	/* Site typeface, owned by modules/typography (Saans). Falls back to the
	   system stack if that module is ever disabled. */
	--skcb-font: var(--sk-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
	--skcb-font-display: var(--sk-font-heading, var(--skcb-font));
}

/* ---------------------------------------------------------------- card ---- */

.cky-consent-container {
	width: 372px !important;
	max-width: calc(100vw - 32px) !important;
	font-family: var(--skcb-font) !important;
}

.cky-consent-container .cky-consent-bar {
	background: var(--skcb-surface) !important;
	border: 1px solid rgba(16, 16, 16, 0.06) !important;
	border-radius: var(--skcb-radius-card) !important;
	box-shadow: 0 14px 36px rgba(16, 16, 16, 0.15) !important;
	padding: 22px 0 !important;
}

/* The plugin pads the card's children rather than the card itself. */
.cky-notice .cky-title,
.cky-notice-des,
.cky-notice-btn-wrapper {
	padding-left: 22px !important;
	padding-right: 22px !important;
}

/* ------------------------------------------------------------- content ---- */

.cky-notice .cky-title {
	font-family: var(--skcb-font-display) !important;
	color: var(--skcb-ink) !important;
	font-size: 20px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -0.01em !important;
	margin: 0 0 8px 0 !important;
}

.cky-notice-des,
.cky-notice-des *,
.cky-notice-group {
	color: var(--skcb-body) !important;
	font-family: var(--skcb-font) !important;
	font-size: 14px !important;
	line-height: 1.45 !important;
	font-weight: 400 !important;
}

/* Cookie policy link — quiet grey, no underline, no button chrome. */
.cky-notice-des a,
.cky-notice-des a.cky-policy,
.cky-notice-des button.cky-policy {
	color: var(--skcb-muted) !important;
	background: transparent !important;
	border: 0 !important;
	text-decoration: none !important;
	white-space: normal !important;
	transition: color 0.15s ease !important;
}

.cky-notice-des a:hover,
.cky-notice-des a.cky-policy:hover,
.cky-notice-des button.cky-policy:hover {
	color: var(--skcb-ink) !important;
}

/* ------------------------------------------------------------- buttons ---- */

.cky-notice-btn-wrapper {
	margin-top: 18px !important;
	gap: 8px !important;
}

.cky-btn,
.cky-notice-btn-wrapper .cky-btn {
	margin: 0 !important;
	font-family: var(--skcb-font) !important;
	font-size: 13.5px !important;
	line-height: 1.2 !important;
	font-weight: 500 !important;
	padding: 11px 10px !important;
	border: 0 !important;
	border-radius: var(--skcb-radius-btn) !important;
	box-shadow: none !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}

.cky-btn:hover {
	opacity: 1 !important; /* the plugin fades buttons on hover; we swap colour instead */
}

.cky-btn-customize,
.cky-btn-reject,
.cky-btn-preferences,
.cky-btn-cancel {
	background: var(--skcb-secondary) !important;
	color: var(--skcb-ink) !important;
	border-color: var(--skcb-secondary) !important;
}

.cky-btn-customize:hover,
.cky-btn-reject:hover,
.cky-btn-preferences:hover,
.cky-btn-cancel:hover {
	background: var(--skcb-secondary-hover) !important;
}

.cky-btn-accept,
.cky-btn-confirm {
	background: var(--skcb-ink) !important;
	color: #ffffff !important;
	border-color: var(--skcb-ink) !important;
}

.cky-btn-accept:hover,
.cky-btn-confirm:hover {
	background: var(--skcb-ink-hover) !important;
}

.cky-btn:focus-visible,
.cky-btn-close:focus-visible,
.cky-notice-des a.cky-policy:focus-visible,
.cky-switch input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--skcb-ink) !important;
	outline-offset: 2px !important;
}

/* Row order: Reject all · Customize · Accept all. Only while the buttons sit in
   a row — at 440px and below the plugin stacks them and puts Accept on top,
   which is the right call on a phone, so leave that alone. */
@media (min-width: 441px) {
	.cky-notice-btn-wrapper .cky-btn-reject {
		order: 1 !important;
	}
	.cky-notice-btn-wrapper .cky-btn-customize {
		order: 2 !important;
	}
	.cky-notice-btn-wrapper .cky-btn-accept {
		order: 3 !important;
	}
}

/* Stacked: the gap already spaces them, so drop the plugin's own margins. */
@media (max-width: 440px) {
	.cky-notice-btn-wrapper .cky-btn,
	.cky-notice-btn-wrapper .cky-btn-accept {
		margin: 0 !important;
	}
}

/* Small screens: the plugin pins the card flush into the corner and then goes
   full-bleed. Keep it inset instead so the rounded corners still read. */
@media (max-width: 576px) {
	.cky-consent-container {
		width: auto !important;
		max-width: 372px !important;
		left: 16px !important;
		right: 16px !important;
	}
	.cky-consent-container.cky-box-bottom-left,
	.cky-consent-container.cky-box-bottom-right {
		bottom: 16px !important;
	}
	.cky-consent-container.cky-box-top-left,
	.cky-consent-container.cky-box-top-right {
		top: 16px !important;
	}
	.cky-notice .cky-title,
	.cky-notice-des,
	.cky-notice-btn-wrapper {
		padding-left: 18px !important;
		padding-right: 18px !important;
	}
	.cky-consent-container .cky-consent-bar {
		padding: 20px 0 !important;
	}
}

/* -------------------------------------------------- preference centre ----- */
/* Reached via "Customize" — same card language so the two don't clash.        */

.cky-preference-center {
	border-radius: var(--skcb-radius-card) !important;
	font-family: var(--skcb-font) !important;
}

.cky-preference-title {
	font-family: var(--skcb-font-display) !important;
	color: var(--skcb-ink) !important;
	letter-spacing: -0.01em !important;
}

.cky-preference-content-wrapper,
.cky-preference-content-wrapper *,
.cky-accordion-header-des,
.cky-accordion-header-des * {
	color: var(--skcb-body) !important;
}

.cky-accordion-btn,
.cky-preference-content-wrapper .cky-show-desc-btn {
	font-family: var(--skcb-font) !important;
	color: var(--skcb-ink) !important;
}

.cky-switch input[type="checkbox"]:checked {
	background: var(--skcb-ink) !important;
}

.cky-audit-table,
.cky-accordion-body .cky-audit-table {
	border-radius: 12px !important;
}

/* ------------------------------------------------------ revisit button ---- */
/* The small floating badge that reopens preferences after a choice is made.   */

.cky-btn-revisit-wrapper {
	background: var(--skcb-ink) !important;
}