/**
 * Cookie consent — banner, preference centre, footer link.
 *
 * Loaded only when the banner is switched on (inc/cookie-consent.php), so this
 * file costs nothing on a site that has turned the feature off.
 *
 * DESIGN NOTE. There is no Figma frame for this — the current site's banner is
 * OneTrust's stock furniture. It is therefore built from the theme's own tokens
 * rather than approximated from a screenshot: maroon solid button, hairline
 * outline secondary, the site's radius and type scale. It should read as part of
 * the site, which is also the honest presentation — this is Orkla asking, not a
 * third party interrupting.
 *
 * TWO ACCESSIBILITY DECISIONS THAT LOOK LIKE STYLE AND ARE NOT:
 *
 *   - Reject and Accept are the same size, the same weight and equally
 *     prominent. Making refusal visually quieter than acceptance is a dark
 *     pattern, and it is one that regulators name explicitly — the EDPB's
 *     cookie-banner report and the CNIL's fines both turn on it. It is also the
 *     easiest thing in the world to "fix" later without realising what has been
 *     broken, so: they match on purpose.
 *   - Every control keeps a visible focus ring. The banner sits over the page
 *     and is often the first thing a keyboard user reaches; a control they
 *     cannot see themselves land on is unusable.
 */

/* ---------------------------------------------------------------------------
   Scope tokens. Local aliases so the component can be lifted into another
   Orkla build by redefining six values rather than by reading the whole file.
   --------------------------------------------------------------------------- */
.ck {
	--ck-maroon: var(--c-primary, #720421);
	--ck-maroon-dark: var(--c-primary-600, #5a031a);
	--ck-ink: var(--c-text, #24272c);
	--ck-body: var(--c-text-body, #6f6f6f);
	--ck-line: var(--c-border, #dfe1e7);
	--ck-surface: var(--c-white, #fff);
	--ck-radius: 12px;

	/* 13px, below the theme's smallest rung (--fs-s is 14). Two things in this
	   component are fine print by intent — the cookie table and the consent
	   receipt — and until 2026-09-08 both wrote .8125rem literally, in different
	   parts of the file, with nothing saying they were the same decision. They
	   are, so it is one value now. It is local rather than a theme token because
	   nothing outside this component wants a rung below 14. */
	--ck-fs-fine: .8125rem;

	font-family: var(--ff-body, system-ui, sans-serif);
	color: var(--ck-ink);
}

/* The root is a positioning context only — it must never take layout space, or
   an empty div would push the footer around on every page. */
.ck[hidden] {
	display: none;
}

/* ---------------------------------------------------------------------------
   Banner
   --------------------------------------------------------------------------- */
/* A CARD IN THE CORNER, not a bar across the page (2026-09-21).

   Full-bleed was the first shape, and on a wide screen it was mostly empty: two
   short sentences at one end, two buttons at the other, a metre of white between
   them, and the hero behind it wiped out. A banner is an interruption either way,
   so it should take the least room that still reads. This one is bounded, sits in
   the same bottom-left corner the floating button uses, and stacks its copy above
   its two answers instead of stretching them apart. */
.ck__banner {
	position: fixed;
	z-index: 9000;
	left: 16px;
	bottom: 16px;
	width: min(452px, calc(100vw - 32px));
	background: var(--ck-surface);
	border: 1px solid var(--ck-line);
	border-radius: var(--ck-radius);
	box-shadow: 0 18px 48px rgba(17, 17, 17, .18);
	padding: 18px 20px;
}

.ck__banner[hidden] {
	display: none;
}

.ck__banner-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.ck__banner-copy {
	min-width: 0;
}

.ck__title {
	margin: 0 0 6px;
	font-family: var(--ff-heading, Georgia, serif);
	font-size: 1.0625rem; /* 17px. The panel keeps the bigger --fs-xl below. */
	font-weight: var(--fw-bold, 700);
	line-height: var(--lh-heading, 1.3);
	color: var(--ck-ink);
}

.ck__body {
	margin: 0;
	font-size: var(--fs-s, .875rem);
	line-height: 1.55;
	color: var(--ck-body);
}

.ck__link {
	color: var(--ck-maroon);
	font-weight: var(--fw-semibold, 600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ck__link:hover,
.ck__link:focus-visible {
	color: var(--ck-maroon-dark);
}

/* On the banner the policy link gets its own line. Inline, it breaks across two
   lines mid-phrase with an underline running off the end of one and onto the
   next, which reads as damage rather than as a link — and it costs no height,
   because that broken second line was already there. */
.ck__banner-copy .ck__link {
	display: block;
	width: fit-content;
	margin-top: 6px;
}

/* Both answers take exactly half the row. Equal prominence was already the rule
   (see the button note below); at this width it is also the tidiest thing to do
   with the space, so the two goals stop competing. */
.ck__banner-actions {
	display: flex;
	gap: 10px;
}

.ck__banner-actions .ck__btn {
	flex: 1 1 0;
	padding-inline: 12px;
}

/* ---------------------------------------------------------------------------
   Buttons. Solid and outline are deliberately the same metrics — see the header.

   EQUAL PROMINENCE, and it is a compliance rule rather than a taste. On the
   BANNER, Reject and Accept are both --solid: same size, same fill, same
   contrast, same one click, Reject first. Identical metrics with different fills
   is exactly the asymmetry EDPB Guidelines 03/2022 on deceptive design names,
   and it is the cheapest possible finding to hand a reviewer. Do not "improve"
   the banner by making one of them quieter.

   In the PANEL foot the pair is both --outline, with --solid reserved for Save
   my choices — which is the panel's own action rather than a third answer, so
   the pair is still equal to each other.
   --------------------------------------------------------------------------- */
.ck__btn {
	appearance: none;
	cursor: pointer;
	font-family: inherit;
	font-size: var(--fs-s, .875rem);
	font-weight: var(--fw-semibold, 600);
	line-height: 1;
	padding: 12px 20px;
	border-radius: 999px;
	border: 1px solid transparent;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.ck__btn--solid {
	background: var(--ck-maroon);
	color: #fff;
	border-color: var(--ck-maroon);
}

.ck__btn--solid:hover {
	background: var(--ck-maroon-dark);
	border-color: var(--ck-maroon-dark);
}

.ck__btn--outline {
	background: transparent;
	color: var(--ck-maroon);
	border-color: var(--ck-maroon);
}

.ck__btn--outline:hover {
	background: var(--c-primary-05, #7204210d);
}

/* .ck__btn--ghost was "Manage preferences" on the banner, a third and genuinely
   lesser action. The client asked for a two-answer banner on 2026-09-21 and that
   button moved to .ck__fab, so the modifier is no longer rendered anywhere and
   its rules (and its 900px row-breaking rule) went with it. */

.ck__btn:focus-visible,
.ck__close:focus-visible,
.ck__cat-toggle:focus-visible,
.ck-settings-link:focus-visible {
	outline: 2px solid var(--ck-maroon);
	outline-offset: 2px;
}

.ck__switch input:focus-visible + .ck__track {
	outline: 2px solid var(--ck-maroon);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Global Privacy Control acknowledgement.

   Sits where the banner would, but it is deliberately not banner-shaped: one
   line, no decision to make, dark rather than white. A visitor whose browser
   already refused should be able to tell at a glance that this is not another
   thing asking them something.
   --------------------------------------------------------------------------- */
.ck__signal {
	position: fixed;
	z-index: 9000;
	right: 16px;
	bottom: 16px;
	max-width: min(520px, calc(100vw - 32px));
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 14px 14px 18px;
	border-radius: var(--ck-radius);
	background: var(--c-primary-900, #2b0410);
	color: #fff;
	box-shadow: 0 18px 48px rgba(17, 17, 17, .28);
}

.ck__signal[hidden] {
	display: none;
}

.ck__signal-text {
	margin: 0;
	font-size: var(--ck-fs-fine);
	line-height: 1.55;
	color: rgba(255, 255, 255, .88);
}

.ck__signal-btn {
	appearance: none;
	cursor: pointer;
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 4px 2px;
	border-radius: 4px;
	font-family: inherit;
	font-size: var(--ck-fs-fine);
	font-weight: var(--fw-semibold, 600);
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	white-space: nowrap;
}

.ck__signal-close {
	appearance: none;
	cursor: pointer;
	flex: 0 0 auto;
	background: none;
	border: 0;
	padding: 2px;
	border-radius: 4px;
	color: rgba(255, 255, 255, .7);
	line-height: 0;
}

.ck__signal-close:hover {
	color: #fff;
}

/* Shares .ck__x with the panel's close button, which is sized for a modal
   header. This is a one-line toast, so the icon comes down with it. */
.ck__signal .ck__x {
	width: 18px;
	height: 18px;
}

.ck__signal-btn:focus-visible,
.ck__signal-close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Floating re-entry button (client request, 2026-09-21)

   Bottom LEFT, deliberately: the banner spans the full width at the bottom and
   the GPC acknowledgement sits bottom right, so the left corner is the one spot
   nothing else in this component claims — and it is where a returning visitor's
   eye is not already being asked for something.

   It hides itself whenever the banner or the panel is on screen. That is done in
   CSS off the root's state classes rather than in JS, so there is no third piece
   of code that has to remember to toggle it.
   --------------------------------------------------------------------------- */
.ck__fab {
	position: fixed;
	z-index: 8990; /* under the banner (9000), over the page */
	left: 16px;
	bottom: 16px;
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid var(--ck-line);
	border-radius: 50%;
	background: var(--ck-surface);
	color: var(--ck-maroon);
	box-shadow: 0 8px 24px rgba(17, 17, 17, .16);
	cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.ck__fab:hover {
	background: var(--ck-maroon);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(17, 17, 17, .22);
}

.ck__fab:focus-visible {
	outline: 2px solid var(--ck-maroon);
	outline-offset: 3px;
}

.ck__fab-icon {
	width: 24px;
	height: 24px;
}

/* One question at a time: while the banner is asking, or the panel is open, the
   button that reopens them is noise. */
.ck.is-banner .ck__fab,
.ck.is-open .ck__fab {
	display: none;
}

/* ---------------------------------------------------------------------------
   Preference centre
   --------------------------------------------------------------------------- */
.ck__scrim {
	position: fixed;
	inset: 0;
	z-index: 9100;
	background: rgba(17, 17, 17, .55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
}

.ck__scrim[hidden] {
	display: none;
}

/* Stops the page behind scrolling under the modal. Belt and braces with the
   dialog's own overflow: without it, a wheel gesture over the scrim scrolls the
   article underneath and the modal appears to drift. */
.ck-locked,
.ck-locked body {
	overflow: hidden;
}

.ck__panel {
	background: var(--ck-surface);
	border-radius: var(--ck-radius);
	box-shadow: 0 24px 64px rgba(17, 17, 17, .3);
	width: min(760px, 100%);
	max-height: min(86vh, 820px);
	display: flex;
	flex-direction: column;
}

.ck__panel-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 22px 24px 16px;
	border-bottom: 1px solid var(--ck-line);
}

.ck__close {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ck-body);
	padding: 4px;
	border-radius: 6px;
	flex: 0 0 auto;
}

.ck__close:hover {
	color: var(--ck-ink);
}

.ck__x {
	width: 22px;
	height: 22px;
	display: block;
}

.ck__panel-body {
	padding: 18px 24px 24px;
	overflow-y: auto;
	flex: 1 1 auto;
}

/* ---- category rows ---- */
.ck__cat {
	border-top: 1px solid var(--ck-line);
	padding: 4px 0;
}

.ck__cat:first-of-type {
	margin-top: 18px;
}

.ck__cat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
}

.ck__cat-toggle {
	appearance: none;
	background: none;
	border: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 6px 4px 0;
	border-radius: 6px;
	font-family: inherit;
	font-size: var(--fs-m, 1rem);
	font-weight: var(--fw-semibold, 600);
	color: var(--ck-ink);
	text-align: left;
}

.ck__caret {
	width: 16px;
	height: 16px;
	flex: 0 0 16px;
	color: var(--c-gray-500, #929cb2);
	transition: transform .18s ease;
}

.ck__cat-toggle[aria-expanded="true"] .ck__caret {
	transform: rotate(90deg);
}

.ck__always {
	font-size: var(--fs-s, .875rem);
	font-weight: var(--fw-semibold, 600);
	color: var(--c-success-600, #208c53);
	white-space: nowrap;
}

.ck__cat-detail[hidden] {
	display: none;
}

.ck__cat-desc {
	margin: 0 0 12px;
	font-size: var(--fs-s, .875rem);
	line-height: 1.6;
	color: var(--ck-body);
}

.ck__none {
	margin: 0 0 14px;
	font-size: var(--fs-s, .875rem);
	line-height: 1.6;
	color: var(--c-gray-600, #747c8e);
	font-style: italic;
}

/* ---- cookie table ---- */
.ck__table-wrap {
	overflow-x: auto;
	margin: 0 0 16px;
	border: 1px solid var(--ck-line);
	border-radius: 8px;
}

.ck__table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ck-fs-fine);
	min-width: 520px;
}

.ck__table th,
.ck__table td {
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid var(--ck-line);
	vertical-align: top;
}

.ck__table tr:last-child td {
	border-bottom: 0;
}

.ck__table th {
	background: var(--c-gray-05, #929cb20d);
	font-weight: var(--fw-semibold, 600);
	color: var(--ck-ink);
	white-space: nowrap;
}

.ck__table td {
	color: var(--ck-body);
}

.ck__table code {
	/* Deliberately not --ck-fs-fine. A monospace face at the same computed size
	   as the sans around it reads a step larger, so this is the optical match to
	   the table, not a third fine-print value that got away. Left literal
	   because one use is not a token. */
	font-size: .78rem;
	color: var(--ck-ink);
	word-break: break-word;
}

/* ---- switch ---- */
.ck__switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	flex: 0 0 auto;
}

/* Opacity, not display:none. A visually hidden checkbox that is still in the
   accessibility tree keeps the control operable by keyboard and announced as a
   checkbox; display:none would remove it from both. */
.ck__switch input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.ck__track {
	display: block;
	width: 46px;
	height: 26px;
	border-radius: 999px;
	background: var(--c-gray-300, #bdc3d0);
	transition: background-color .18s ease;
}

.ck__knob {
	display: block;
	width: 20px;
	height: 20px;
	margin: 3px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(17, 17, 17, .3);
	transition: transform .18s ease;
}

.ck__switch input:checked + .ck__track {
	background: var(--ck-maroon);
}

.ck__switch input:checked + .ck__track .ck__knob {
	transform: translateX(20px);
}

/* ---------------------------------------------------------------------------
   The statutory notice — DPDPA s.5, GDPR Art. 13.

   Set apart from the category rows with a rule and a tint, because it is a
   different kind of content: the rows are controls, this is the disclosure the
   controls are attached to. Someone scanning for "who do I complain to" should
   find it without reading the toggles.
   --------------------------------------------------------------------------- */
.ck__notice {
	margin: 24px 0 0;
	padding: 18px 18px 4px;
	border-radius: 8px;
	background: var(--c-gray-05, #929cb20d);
	border: 1px solid var(--ck-line);
}

/* The .ck__lang selector rules were removed on 2026-09-21 with the picker
   itself (client request — the site is getting one language switcher of its own,
   and this component should follow it rather than carry a second). */

.ck__notice-title {
	margin: 0 0 10px;
	font-family: var(--ff-heading, Georgia, serif);
	font-size: var(--fs-m, 1rem);
	font-weight: var(--fw-bold, 700);
	color: var(--ck-ink);
}

.ck__notice-p {
	margin: 0 0 12px;
	font-size: var(--fs-s, .875rem);
	line-height: 1.65;
	color: var(--ck-body);
}

/* Devanagari sits smaller than Latin at the same computed size and its
   ascenders need more room, so the Hindi notice gets a nudge on both. Keyed off
   the lang attribute rather than a class, so a translator adding a language
   through the filter inherits it by writing the right code.

   DORMANT since 2026-09-21: only the English notice is rendered, so nothing
   matches this today. It is kept because it belongs to the translations — which
   are still in PHP — and not to the picker that was removed. */
.ck__notice-body[lang="hi"] .ck__notice-p,
.ck__notice-body[lang="mr"] .ck__notice-p,
.ck__notice-body[lang="ne"] .ck__notice-p,
.ck__notice-body[lang="sa"] .ck__notice-p {
	font-size: var(--fs-m, 1rem);
	line-height: 1.8;
}

.ck__policy {
	margin: 18px 0 0;
	font-size: var(--fs-s, .875rem);
}

.ck__receipt {
	margin: 14px 0 0;
	padding: 10px 12px;
	border-radius: 8px;
	background: var(--c-gray-05, #929cb20d);
	font-size: var(--ck-fs-fine);
	color: var(--c-gray-600, #747c8e);
}

.ck__receipt[hidden] {
	display: none;
}

.ck__panel-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: flex-end;
	padding: 16px 24px;
	border-top: 1px solid var(--ck-line);
	background: var(--c-surface, #f8f8f8);
	border-radius: 0 0 var(--ck-radius) var(--ck-radius);
}

/* ---------------------------------------------------------------------------
   [cookie_table] — the full inventory inside page content.

   Borrows .ck__table and nothing else. It is NOT inside .ck, so it has to carry
   --ck-fs-fine itself: that token is declared on .ck, and a var() that resolves
   to nothing makes the whole font-size declaration invalid, which would silently
   leave the table at the article's body size.
   --------------------------------------------------------------------------- */
.ck-inventory {
	--ck-fs-fine: .8125rem;
	--ck-line: var(--c-border, #dfe1e7);
	--ck-ink: var(--c-text, #24272c);
	--ck-body: var(--c-text-body, #6f6f6f);
	margin: 24px 0;
}

.ck-inventory__cat + .ck-inventory__cat {
	margin-top: 32px;
}

.ck-inventory__title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
	margin: 0 0 8px;
}

.ck-inventory__always {
	font-size: var(--fs-s, .875rem);
	font-weight: var(--fw-semibold, 600);
	color: var(--c-success-600, #208c53);
}

.ck-inventory__desc {
	margin: 0 0 14px;
}

.ck-inventory__foot {
	margin-top: 28px;
	padding-top: 18px;
	border-top: 1px solid var(--c-border, #dfe1e7);
}

/* In page content the settings control is a sentence's worth of link, not a
   footer item, so it earns its underline here. */
.ck-inventory__foot .ck-settings-link {
	color: var(--c-primary, #720421);
	font-weight: var(--fw-semibold, 600);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   The "Cookie settings" control.

   A <button> that has to sit convincingly among <a> elements in the footer's
   legal row — see inc/cookie-consent.php for why it is not a link. Everything
   here is undoing default button chrome so it matches its neighbours.
   --------------------------------------------------------------------------- */
.ck-settings-link {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	text-decoration: none;
	border-radius: 3px;
}

.ck-settings-link:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
   Responsive
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
	.ck__fab {
		left: 8px;
		bottom: 8px;
		width: 44px;
		height: 44px;
	}

	.ck__signal {
		right: 8px;
		bottom: 8px;
		left: 8px;
		max-width: none;
		flex-wrap: wrap;
		padding: 14px;
	}

	/* The close button keeps its corner; the copy takes the full width and the
	   link drops beneath it, rather than all three fighting over one row. */
	.ck__signal-text {
		flex: 1 1 100%;
		order: -1;
	}

	.ck__banner {
		bottom: 8px;
		left: 8px;
		width: calc(100vw - 16px);
		padding: 16px;
		/* The banner can grow past the viewport on a small phone once the copy
		   wraps, and a fixed element that overflows simply loses its buttons. */
		max-height: 84vh;
		overflow-y: auto;
	}

	.ck__scrim {
		padding: 0;
	}

	.ck__panel {
		max-height: 100vh;
		height: 100%;
		width: 100%;
		border-radius: 0;
	}

	.ck__panel-foot {
		border-radius: 0;
	}

	.ck__panel-foot .ck__btn {
		flex: 1 1 100%;
	}
}

/* Honour a reduced-motion preference: the transitions here are decoration. */
@media (prefers-reduced-motion: reduce) {
	.ck__btn,
	.ck__caret,
	.ck__fab,
	.ck__track,
	.ck__knob {
		transition: none;
	}

	.ck__fab:hover {
		transform: none;
	}
}