/*
 * Photo Contest — vote button, confirmation dialog, announcements.
 * Colours follow the GoNetanya tokens with the AA corrections agreed for this
 * project: dark text on orange, a two-tone focus ring. Logical properties
 * throughout so a right-to-left language can be added later.
 */

:root {
	--pc-blue-900: #024f6e;
	--pc-blue-700: #0378a6;
	--pc-cyan-100: #bbe8f2;
	--pc-orange-500: #f2911b;
	--pc-orange-600: #d97d0c;
	--pc-ink: #062a38;
	--pc-gray-200: #d8e2e8;
	--pc-gray-600: #45525a;
	--pc-radius-pill: 999px;
	--pc-radius-lg: 16px;
	--pc-font: var(--e-global-typography-primary-font-family, "Rubik"), "Helvetica Neue", Arial, sans-serif;
}

/* ---------- vote button ---------- */

body button.pc-vote {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: 48px;
	padding-block: 12px;
	padding-inline: 26px;
	border: 2px solid transparent;
	border-radius: var(--pc-radius-pill);
	background: var(--pc-orange-500);
	color: var(--pc-ink);
	font-family: var(--pc-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease;
}

.pc-vote[hidden] {
	display: none;
}

.pc-vote:hover {
	background: var(--pc-orange-600);
	color: var(--pc-ink);
}

body button.pc-vote--small {
	min-block-size: 36px;
	padding-block: 6px;
	padding-inline: 14px;
}

.pc-vote__icon {
	font-size: 1.25em;
	line-height: 1;
}

.pc-vote .pc-l2 {
	font-weight: 500;
}

/* "This is my choice": not colour alone — the heart is filled, the label
   changes and aria-pressed is true. */
.pc-vote.is-mine {
	background: transparent;
	border-color: var(--pc-blue-900);
	color: var(--pc-blue-900);
}

.pc-vote.is-mine:hover {
	background: var(--pc-blue-900);
	color: #fff;
}

.pc-vote.is-pending {
	cursor: progress;
	opacity: 0.85;
}

/* On dark backgrounds (the photo window). */
.pc-on-dark .pc-vote.is-mine {
	border-color: #fff;
	color: #fff;
}

.pc-on-dark .pc-vote.is-mine:hover {
	background: #fff;
	color: var(--pc-blue-900);
}

.pc-vote:focus-visible,
.pc-dialog__btn:focus-visible {
	outline: 3px solid var(--pc-blue-900);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px #fff;
}

/* ---------- confirmation dialog ---------- */

.pc-dialog-backdrop {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(6, 32, 45, 0.72);
}

.pc-dialog {
	inline-size: min(480px, 100%);
	padding: 28px;
	border-radius: var(--pc-radius-lg);
	background: #fff;
	color: var(--pc-ink);
	font-family: var(--pc-font);
	box-shadow: 0 18px 50px rgba(2, 79, 110, 0.3);
}

.pc-dialog__text {
	margin: 0;
	font-size: 16px;
	line-height: 1.55;
}

.pc-dialog__text.pc-l2 {
	margin-block-start: 10px;
	font-size: 14.5px;
	color: var(--pc-blue-700);
}

.pc-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-block-start: 24px;
}

body button.pc-dialog__btn {
	min-block-size: 48px;
	padding-block: 10px;
	padding-inline: 20px;
	border-radius: var(--pc-radius-pill);
	font-family: var(--pc-font);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.25;
	cursor: pointer;
}

.pc-dialog__btn .pc-l2 {
	font-weight: 500;
}

.pc-dialog__btn--confirm {
	border: 2px solid var(--pc-orange-500);
	background: var(--pc-orange-500);
	color: var(--pc-ink);
}

.pc-dialog__btn--confirm:hover {
	border-color: var(--pc-orange-600);
	background: var(--pc-orange-600);
}

.pc-dialog__btn--keep {
	border: 2px solid var(--pc-blue-900);
	background: #fff;
	color: var(--pc-blue-900);
}

.pc-dialog__btn--keep:hover {
	background: var(--pc-blue-900);
	color: #fff;
}

/* ---------- announcements ---------- */

.pc-toast {
	position: fixed;
	inset-block-end: 24px;
	inset-inline: 16px;
	z-index: 100001;
	inline-size: fit-content;
	max-inline-size: min(560px, calc(100vw - 32px));
	margin-inline: auto;
	padding: 14px 20px;
	border-radius: var(--pc-radius-lg);
	background: var(--pc-blue-900);
	color: #fff;
	font-family: var(--pc-font);
	font-size: 14px;
	line-height: 1.5;
	box-shadow: 0 12px 32px rgba(2, 79, 110, 0.28);
}

.pc-toast[hidden] {
	display: none;
}

.pc-toast .pc-l2 {
	color: var(--pc-cyan-100);
}

.pc-toast--error {
	background: #fff;
	color: var(--pc-ink);
	border: 2px solid var(--pc-blue-900);
}

.pc-toast--error .pc-l2 {
	color: var(--pc-blue-700);
}

/* Turnstile shows itself only when it needs the visitor to do something. */
.pc-turnstile {
	position: fixed;
	inset-block-end: 88px;
	inset-inline: 16px;
	z-index: 100002;
	inline-size: fit-content;
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	.pc-vote {
		transition: none;
	}
}

/* ---------- theme-proofing ----------
 * Themes (Hello Elementor among them) style every <button> on hover and on
 * focus. These rules repeat ours with a stronger selector so the buttons keep
 * the contest colours in every state.
 */

body button.pc-vote,
body button.pc-vote:focus {
	border-color: transparent;
	background: var(--pc-orange-500);
	color: var(--pc-ink);
}

body button.pc-vote:hover {
	border-color: transparent;
	background: var(--pc-orange-600);
	color: var(--pc-ink);
}

body button.pc-vote.is-mine,
body button.pc-vote.is-mine:focus {
	border-color: var(--pc-blue-900);
	background: transparent;
	color: var(--pc-blue-900);
}

body button.pc-vote.is-mine:hover {
	border-color: var(--pc-blue-900);
	background: var(--pc-blue-900);
	color: #fff;
}

.pc-on-dark body button.pc-vote.is-mine,
.pc-on-dark body button.pc-vote.is-mine:focus {
	border-color: #fff;
	background: transparent;
	color: #fff;
}

.pc-on-dark body button.pc-vote.is-mine:hover {
	border-color: #fff;
	background: #fff;
	color: var(--pc-blue-900);
}

body button.pc-dialog__btn--confirm,
body button.pc-dialog__btn--confirm:focus {
	border-color: var(--pc-orange-500);
	background: var(--pc-orange-500);
	color: var(--pc-ink);
}

body button.pc-dialog__btn--confirm:hover {
	border-color: var(--pc-orange-600);
	background: var(--pc-orange-600);
	color: var(--pc-ink);
}

body button.pc-dialog__btn--keep,
body button.pc-dialog__btn--keep:focus {
	border-color: var(--pc-blue-900);
	background: #fff;
	color: var(--pc-blue-900);
}

body button.pc-dialog__btn--keep:hover {
	border-color: var(--pc-blue-900);
	background: var(--pc-blue-900);
	color: #fff;
}