/*
 * AW Calm Toggle styles.
 * Phone first: the base rules are for phones, min-width queries add the wider layout.
 * Every colour, font, size and easing comes from tokens.css.
 * Last task: T-015. Date: 2026-10-21.
 */

.aw-calm-toggle {
	display: inline-flex;
	align-items: center;
}

/* Without JavaScript the bootstrap never sets the class, so the button cannot work: hide it. */
html:not(.calm):not(.motion-on) .aw-calm-toggle {
	display: none;
}

.aw-calm-toggle__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid color-mix(in srgb, var(--paper) 50%, transparent);
	border-radius: 0;
	background: color-mix(in srgb, var(--ink) 45%, transparent);
	color: var(--paper);
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: .12em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: transform var(--t-press) var(--ease-out);
}

/* Hello Elementor's button focus rule outranks the bare :focus-visible in base.css, so restate the ring. */
.aw-calm-toggle .aw-calm-toggle__btn:focus-visible {
	outline: 3px solid var(--focus);
	outline-offset: 3px;
}

.aw-calm-toggle__btn:active {
	transform: scale(.97);
}

/* Calm mode is on: ink on paper, so the state never rests on colour alone. */
.aw-calm-toggle__btn[aria-pressed="true"] {
	background: var(--paper);
	border-color: var(--paper);
	color: var(--ink);
}

/* Phones show the short label, because the full one does not fit beside the button. */
.aw-calm-toggle__label {
	display: none;
}

.aw-calm-toggle__label--phone {
	display: inline;
}

@media (min-width: 480px) {
	.aw-calm-toggle__label {
		display: inline;
	}

	.aw-calm-toggle__label--phone {
		display: none;
	}
}

@media (hover: hover) and (pointer: fine) {
	.aw-calm-toggle__btn:hover {
		background: color-mix(in srgb, var(--ink) 65%, transparent);
	}

	.aw-calm-toggle__btn[aria-pressed="true"]:hover {
		background: var(--card);
	}
}

/* On paper, for the style guide and any page that is not over a photo. */
.aw-calm-toggle--paper .aw-calm-toggle__btn {
	background: transparent;
	border-color: var(--field-line);
	color: var(--ink);
}

.aw-calm-toggle--paper .aw-calm-toggle__btn[aria-pressed="true"] {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

@media (hover: hover) and (pointer: fine) {
	.aw-calm-toggle--paper .aw-calm-toggle__btn:hover {
		background: color-mix(in srgb, var(--ink) 6%, transparent);
	}

	.aw-calm-toggle--paper .aw-calm-toggle__btn[aria-pressed="true"]:hover {
		background: var(--char);
	}
}