/* The "only for women*" badge. Markup: inc/badge.php.
   Change the look here, in the variables. Everything else follows.
   The badge is a highlight, like a word selected with a double click:
   Primary text on a Secondary box with square corners that fits the line
   tightly, no padding above or below. It is not a pill, so it does not read as
   a button. The tilt (clockwise) sets it apart further. */
:root {
	--ce-badge-bg: var(--ce-secondary);
	--ce-badge-fg: var(--ce-primary);
	--ce-badge-radius: 0;
	--ce-badge-tilt: 7deg;
}

.ce-women-badge {
	display: inline-block;
	box-sizing: border-box;
	padding: 0 0.25em;
	border-radius: var(--ce-badge-radius);
	background: var(--ce-badge-bg);
	color: var(--ce-badge-fg);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	text-transform: lowercase;
	text-decoration: none;
	white-space: nowrap;
	transform: rotate(var(--ce-badge-tilt));
	transform-origin: center;
	/* It is a label, not a control: clicks go to what is under it. */
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}

@media (forced-colors: active) {
	.ce-women-badge {
		border: 2px solid CanvasText;
	}
}

/* Homepage: centered above the two buttons, so it covers both. The wrapper is
   as wide as the buttons, so the badge stays centered over them when they wrap
   on a phone. */
.ce-badge-anchor {
	position: relative;
	width: fit-content;
	max-width: 100%;
}

/* The badge hangs above the buttons, so the gap above them is bigger than the
   usual 2rem. It is set on the wrapper, not on the buttons inside it. */
.ce-section .ce-badge-anchor {
	margin-top: 3.25rem;
}

.ce-section .ce-badge-anchor .wp-block-buttons {
	margin-top: 0;
}

.ce-women-badge--hero {
	position: absolute;
	top: 0;
	left: 50%;
	z-index: 1;
	transform: translate(-50%, -95%) rotate(var(--ce-badge-tilt));
}

/* Menu: on the top right corner of the label, like a sticker. It is out of the
   flow, so it never pushes the pills next to the label. */
.wp-block-navigation.ce-menu.ce-menu .ce-menu__top > .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation.ce-menu.ce-menu .ce-menu__top .ce-women-badge {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	transform: translate(34%, -62%) rotate(var(--ce-badge-tilt));
}

@media (max-width: 781px) {
	.wp-block-navigation.ce-menu.ce-menu .ce-menu__top .ce-women-badge {
		font-size: 0.9375rem;
	}
}

@media (min-width: 782px) {
	.wp-block-navigation.ce-menu.ce-menu .ce-menu__top .ce-women-badge {
		transform: translate(30%, -55%) rotate(var(--ce-badge-tilt));
	}
}