/* Palette preview (inc/palette-preview.php). Local installs and admins only. */

/* Colours the theme hard-codes, routed through the palette while a preview palette is on. */
.tibit-palette a:hover {
	color: var(--tibit-accent-dark);
}

.tibit-palette .site-footer__legal {
	border-top-color: var(--tibit-rule);
}

.tibit-palette .tibit-stats__head {
	color: var(--tibit-heart);
}

.tibit-palette .tibit-week__day.is-roza { --tibit-day-accent: var(--tibit-day-1); }
.tibit-palette .tibit-week__day.is-lila { --tibit-day-accent: var(--tibit-day-2); }
.tibit-palette .tibit-week__day.is-nebo { --tibit-day-accent: var(--tibit-day-3); }

/* Her old TI8IT logo (inc/template-tags.php) shows only with the "TI8IT" palette. */
.tibit-logo.is-ti8it,
.tibit-logo-ti8it svg.tibit-logo {
	display: none;
}

.tibit-logo-ti8it .tibit-logo.is-ti8it {
	display: block;
}

/* And the loader: her TI8IT logo instead of the heart. On the first visit the colour logo rises
   over a faint copy with the loading progress (assets/js/loader.js); on page changes it is simply shown. */
.tibit-loader__ti8it,
.tibit-logo-ti8it .tibit-loader__logo {
	display: none;
}

.tibit-logo-ti8it .tibit-loader__ti8it {
	display: block;
	position: relative;
	width: min(260px, 62vw);
}

.tibit-loader__ti8it img {
	display: block;
	width: 100%;
	height: auto;
}

.tibit-loader__ti8it .is-base {
	opacity: 0;
}

.tibit-loader__ti8it .is-fill {
	position: absolute;
	inset: 0;
}

.tibit-loader-intro .tibit-loader__ti8it {
	animation: tibit-loader-in 0.5s ease-out both;
}

.tibit-loader-intro .tibit-loader__ti8it .is-base {
	opacity: 0.16;
	filter: grayscale(1);
}

.tibit-loader-intro .tibit-loader__ti8it .is-fill {
	clip-path: inset(calc((1 - var(--tibit-loader-progress, 0)) * 100%) 0 0 0);
}

/* Same for the hero: the logo lettering goes with the new logo, the TI8IT palette gets the plain headline. */
.tibit-hero__title-text,
.tibit-logo-ti8it .tibit-hero__title-svg {
	display: none;
}

.tibit-logo-ti8it .tibit-hero__title-text {
	display: inline;
}

.tibit-logo-ti8it .tibit-hero__title.is-logo {
	line-height: 1.02;
}

/* The recoloured graphic is a little lighter than the pink and blue print. */
.tibit-palette .tibit-hero__bg.is-graphic {
	opacity: 0.2;
}

/* Heading font preview: Myriad (Adobe Fonts), narrow and light, everywhere the heading font is used. */
html.tibit-font-myriad {
	--tibit-font-head: "myriad-variable", sans-serif;
}

.tibit-font-myriad :is(h1, h2, h3, h4, .site-nav__menu a, .site-footer__motto, .tibit-loader__text, .tibit-figures__value, .tibit-packages__price, .tibit-hero__figure, .tibit-stats__number, .tibit-statements__title, .tibit-press__outlet, .tibit-testimonials__item.is-featured blockquote p),
.tibit-font-myriad ol.tibit-statements__list li::before {
	font-variation-settings: "wdth" 70, "wght" 300;
}

/* Floating switcher, bottom right. Fixed colours, so it looks the same on every palette. */
.tibit-palette-switch {
	position: fixed;
	right: 16px;
	bottom: 16px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	font: 500 14px/1.3 system-ui, -apple-system, sans-serif;
	color: #1d1d1f;
}

.tibit-palette-switch__toggle {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
	cursor: pointer;
}

.tibit-palette-switch__toggle:focus-visible,
.tibit-palette-switch__copy:focus-visible,
.tibit-palette-switch__option:has(:focus-visible) {
	outline: 2px solid #1d1d1f;
	outline-offset: 2px;
}

.tibit-palette-switch__swatch {
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%);
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.tibit-palette-switch__toggle .tibit-palette-switch__swatch {
	width: 30px;
	height: 30px;
}

.tibit-palette-switch__panel {
	width: 230px;
	padding: 14px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.tibit-palette-switch__panel[hidden] {
	display: none;
}

.tibit-palette-switch__title {
	margin: 0 0 8px;
	font-weight: 700;
}

.tibit-palette-switch__title.is-sub {
	margin: 14px 0 6px;
}

.tibit-palette-switch__fonts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

.tibit-palette-switch__option.is-font {
	justify-content: center;
	font-size: 18px;
}

.tibit-palette-switch__title span {
	margin-left: 4px;
	font-weight: 500;
	font-size: 12px;
	color: #6e6e73;
}

.tibit-palette-switch__option {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	cursor: pointer;
}

.tibit-palette-switch__option:hover {
	background: #f2f2f4;
}

.tibit-palette-switch__option:has(input[type="radio"]:checked) {
	background: #ececef;
	font-weight: 700;
}

.tibit-palette-switch__option input[type="radio"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.tibit-palette-switch__color {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	overflow: hidden;
	background: none;
	cursor: pointer;
}

.tibit-palette-switch__color::-webkit-color-swatch-wrapper {
	padding: 0;
}

.tibit-palette-switch__color::-webkit-color-swatch {
	border: 0;
	border-radius: 50%;
}

.tibit-palette-switch__color::-moz-color-swatch {
	border: 0;
	border-radius: 50%;
}

.tibit-palette-switch__copy {
	width: 100%;
	margin-top: 10px;
	padding: 9px;
	border: 1px solid #d2d2d7;
	border-radius: 8px;
	background: #fff;
	font: inherit;
	color: inherit;
	cursor: pointer;
}

.tibit-palette-switch__copy:hover {
	background: #f2f2f4;
}

.tibit-palette-switch__colors {
	display: inline-flex;
	gap: 4px;
}

.tibit-palette-switch__save {
	display: flex;
	gap: 6px;
	margin: 6px 0 0;
}

.tibit-palette-switch__save[hidden] {
	display: none;
}

.tibit-palette-switch__save input {
	flex: 1;
	min-width: 0;
	padding: 7px 9px;
	border: 1px solid #d2d2d7;
	border-radius: 8px;
	font: inherit;
}

.tibit-palette-switch__save button {
	padding: 7px 12px;
	border: 0;
	border-radius: 8px;
	background: #1d1d1f;
	color: #fff;
	font: inherit;
	cursor: pointer;
}

.tibit-palette-switch__row {
	display: flex;
	align-items: center;
}

.tibit-palette-switch__row .tibit-palette-switch__option {
	flex: 1;
	min-width: 0;
}

.tibit-palette-switch__delete {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: #6e6e73;
	font-size: 18px;
	cursor: pointer;
}

.tibit-palette-switch__delete:hover {
	background: #f2f2f4;
	color: #1d1d1f;
}

.tibit-palette-switch__panel {
	max-height: calc(100vh - 96px);
	overflow-y: auto;
}