/**
 * Vertical text helpers: classes topdown / downtop.
 *
 * Always loaded with Elements front CSS. Optionally site-wide via
 * Settings → Dynamic Templates & Elements (vertical text site-wide option).
 *
 * downtop: rotate ONLY the text block once — not the nested <a> as well
 * (heading+link both at 180° cancelled out and looked like topdown).
 */

.topdown,
.topdown .wp-block-button__link,
.topdown .wp-block-heading,
.topdown a,
.downtop,
.downtop .wp-block-button__link,
.downtop .wp-block-heading,
.downtop a {
	cursor: pointer;
	white-space: nowrap;
}

/*
 * Headings/paragraphs often have theme margins; with vertical writing-mode those
 * show up as uneven “padding” at one end of the tab.
 */
.topdown.wp-block-heading,
.topdown.wp-block-paragraph,
.topdown > .wp-block-heading,
.topdown > p,
.topdown > .wp-block-paragraph,
.downtop.wp-block-heading,
.downtop.wp-block-paragraph,
.downtop > .wp-block-heading,
.downtop > p,
.downtop > .wp-block-paragraph,
p.topdown,
p.downtop {
	margin: 0 !important;
	line-height: 1.2;
}

/* No link underline (themes often force it). */
.topdown a,
.topdown a:hover,
.topdown a:focus,
.topdown a:active,
.downtop a,
.downtop a:hover,
.downtop a:focus,
.downtop a:active {
	text-decoration: none !important;
	text-decoration-line: none !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

/* Top → bottom (readable downward). */
.topdown,
.topdown.wp-block-paragraph,
p.topdown,
.topdown > .wp-block-heading,
.topdown > p,
.topdown.wp-block-heading,
.topdown .wp-block-button__link,
.topdown.wp-block-button__link {
	display: inline-block;
	writing-mode: vertical-rl !important;
	text-orientation: sideways !important;
	transform: none !important;
}

.topdown a {
	writing-mode: inherit !important;
	text-orientation: inherit !important;
	transform: none !important;
	color: inherit;
}

/*
 * Bottom → top (readable upward).
 * Rotate the text element once; nested links inherit (no second rotate).
 */
.downtop.wp-block-paragraph,
p.downtop,
.downtop > .wp-block-heading,
.downtop > p,
.downtop > .wp-block-paragraph,
.downtop.wp-block-heading,
.downtop .wp-block-button__link,
.downtop.wp-block-button__link {
	display: inline-block;
	writing-mode: vertical-rl !important;
	text-orientation: sideways !important;
	transform: rotate(180deg) !important;
}

.downtop .wp-block-heading a,
.downtop.wp-block-heading a,
.downtop.wp-block-paragraph a,
p.downtop a,
.downtop > p a {
	display: inline;
	writing-mode: inherit !important;
	text-orientation: inherit !important;
	transform: none !important;
	color: inherit;
}