/*
 * Legal - Notices.
 *
 * Read from cp-all-designer css/privacy-notice.css, css/legal.css:26 and
 * css/app.css (the head). What the Style tab sets arrives through the
 * widget's selectors, most of it as custom properties the rules below read.
 *
 * Tiers: mobile up to 767px, tablet 768-1024px, desktop 1025px and up; the
 * list also steps at the design's own 640px.
 */

/* ------------------------------------------------------------------ */
/* The band and the head — app.css:230-252, 291-294, 385-408           */
/* ------------------------------------------------------------------ */

.custom-legal-notices {
	position: relative;
	display: block;
	box-sizing: border-box;
}

.custom-legal-notices__inner {
	box-sizing: border-box;
	width: 100%;
	max-width: 1920px;                     /* the content cap, every band */
	margin: 0 auto;
}

.custom-legal-notices__head {
	margin-left: auto;
	margin-right: auto;
}

.custom-legal-notices__title {
	margin: 0;
	padding: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-legal-notices__title strong {
	font-weight: 700;
}

/* app.css:246-252 — the highlighted part, with the soft bar under it */
.custom-legal-notices__title em {
	position: relative;
	display: inline-block;
	font-style: italic;
	font-weight: 700;
}

.custom-legal-notices__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.06em;
	height: 0.16em;
	border-radius: 3px;
	background: currentColor;
	opacity: 0.18;
}

.custom-legal-notices [data-custom-sweep-ghost] em::after {
	opacity: 0.12;                         /* app.css:275 */
}

/* app.css:291-294 — a measure of its own, its words centred inside it */
.custom-legal-notices__intro {
	margin-bottom: 0;
	font-weight: 400;
	line-height: 1.7;
}

/* app.css:3016 — a phone's lead sets tighter */
@media (max-width: 640px) {
	.custom-legal-notices__intro {
		line-height: 1.5;
	}
}

/* ------------------------------------------------------------------ */
/* The list — privacy-notice.css, legal.css:26                         */
/* ------------------------------------------------------------------ */

.custom-legal-notices__list {
	min-width: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}

/* privacy-notice.css:21-24 */
.custom-legal-notices__note p {
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.85;
}

.custom-legal-notices__note p:last-child {
	margin-bottom: 0;
}

.custom-legal-notices__note b,
.custom-legal-notices__note strong {
	font-weight: 600;
}

/* privacy-notice.css:27-33 — one group */
.custom-legal-notices__group {
	overflow: hidden;
	margin: 0;
	background: #FFFFFF;
	border: 1px solid var(--custom-notices-edge, #EEF2F7);
	box-shadow: 0 6px 18px -6px rgba(22, 65, 140, 0.14);   /* app.css:159 --sh-sm */
}

.custom-legal-notices__group + .custom-legal-notices__group {
	margin-top: var(--custom-notices-gap, 14px);
}

.custom-legal-notices__group[open] {
	border-color: var(--custom-notices-edge-open, #50A3D5);
}

/* privacy-notice.css:42-63 — the bar: soft blue closed, navy open */
.custom-legal-notices__bar {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	cursor: pointer;
	font-weight: 600;
	line-height: 1.5;
	color: var(--custom-notices-bar-ink, #16418C);
	background: var(--custom-notices-bar, #F0F9FD);
	list-style: none;
	transition: background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-legal-notices__bar::-webkit-details-marker {
	display: none;
}

.custom-legal-notices__bar::marker {
	content: "";
}

.custom-legal-notices__group[open] > .custom-legal-notices__bar {
	color: var(--custom-notices-bar-open-ink, #FFFFFF);
	background: var(--custom-notices-bar-open, #16418C);
}

.custom-legal-notices__group[open] > .custom-legal-notices__bar .custom-legal-notices__n {
	color: var(--custom-notices-bar-open-ink, #FFFFFF);
	background: rgba(255, 255, 255, 0.16);
}

.custom-legal-notices__group[open] > .custom-legal-notices__bar .custom-legal-notices__count {
	color: var(--custom-notices-bar-open-ink, #FFFFFF);
	opacity: 0.72;
}

.custom-legal-notices__group[open] > .custom-legal-notices__bar .custom-legal-notices__chev {
	color: var(--custom-notices-bar-open-ink, #FFFFFF);
}

@media (hover: hover) {
	.custom-legal-notices__bar:hover {
		background: var(--custom-notices-bar-hover, #CCDAF2);
	}

	.custom-legal-notices__group[open] > .custom-legal-notices__bar:hover {
		background: var(--custom-notices-bar-open-hover, #0E1E54);
	}
}

.custom-legal-notices__bar:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: -2px;
}

/* privacy-notice.css:65-75 */
.custom-legal-notices__n {
	display: grid;
	flex-shrink: 0;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 12px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: var(--custom-notices-n-ink, #3D8CB8);
	background: var(--custom-notices-n, #F0F9FD);
}

.custom-legal-notices__label {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.custom-legal-notices__count {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--custom-notices-count, #64748B);
}

.custom-legal-notices__chev {
	display: block;
	flex-shrink: 0;
	color: var(--custom-notices-chev, #50A3D5);
	transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-legal-notices__group[open] .custom-legal-notices__chev {
	transform: rotate(180deg);
}

/* privacy-notice.css:78-92 — the documents */
.custom-legal-notices__body {
	padding-bottom: 6px;
	border-top: 1px solid var(--custom-notices-line, #EEF2F7);
}

.custom-legal-notices__docs {
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-legal-notices__doc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px 26px;                        /* clamp(16, 1.8*vwu, 28) */
	margin: 0;
	padding: 18px 0;                       /* clamp(14, 1.5*vwu, 18) */
	border-top: 1px solid var(--custom-notices-line, #EEF2F7);
}

.custom-legal-notices__doc:first-child {
	border-top: 0;
}

.custom-legal-notices__doc-title {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	line-height: 1.6;
}

.custom-legal-notices__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.custom-legal-notices__links li {
	margin: 0;
}

/* privacy-notice.css:94-101 */
.custom-legal-notices__chip {
	--custom-press-ink: var(--custom-notices-chip-ink, #16418C);
	--custom-press-edge: var(--custom-notices-chip-edge, #EEF2F7);
	--custom-press-ground: var(--custom-notices-chip-ground, transparent);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-width: 1px;
	border-style: solid;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.6;            /* app.css:174 body */
	white-space: nowrap;
	transition: transform 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 200ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-legal-notices__chip:hover {
	--custom-press-ink: var(--custom-notices-chip-hover-ink, #50A3D5);
	--custom-press-edge: var(--custom-notices-chip-hover-edge, #50A3D5);
	transform: translateY(-2px);
}

.custom-legal-notices__chip svg {
	display: block;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------ */
/* Tablet — the design's clamps at 1024px                              */
/* ------------------------------------------------------------------ */

@media (max-width: 1024px) {
	.custom-legal-notices__doc {
		gap: 10px 17px;
		padding: 14px 0;
	}
}

/* ------------------------------------------------------------------ */
/* The design's own step at 640px — privacy-notice.css:103-106         */
/* ------------------------------------------------------------------ */

@media (max-width: 640px) {
	.custom-legal-notices__doc {
		grid-template-columns: 1fr;
		gap: 10px 16px;
	}

	.custom-legal-notices__count {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-legal-notices__bar,
	.custom-legal-notices__chev,
	.custom-legal-notices__chip {
		transition: none;
	}
}