/**
 * Vertical text helpers: classes topdown / downtop.
 *
 * Loaded only when Settings → “Load topdown / downtop CSS site-wide” is on,
 * or when an Element on the page uses those classes. Themes such as Ollie
 * may already provide vertical text — leave the setting off to skip this file.
 *
 * downtop: rotate ONLY the text block once — not the nested <a> as well
 * (heading+link both at 180° cancelled out and looked like topdown).
 *
 * Fixed side tabs: keep writing-mode here. Safari position drift is corrected
 * in assets/elements-front.js (snapFixedVerticalTabs).
 */

.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 !important;
}

/*
 * Headings/paragraphs often have theme margins; with vertical writing-mode those
 * show up as uneven “padding” at one end of the tab (especially in Safari).
 */
.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,
.topdown .wp-block-heading,
.downtop .wp-block-heading,
.topdown p,
.downtop p {
	margin: 0 !important;
	line-height: 1 !important;
}

/* 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;
	box-sizing: border-box;
	line-height: 1 !important;
	-webkit-writing-mode: vertical-rl !important;
	writing-mode: vertical-rl !important;
	-webkit-text-orientation: sideways !important;
	text-orientation: sideways !important;
	transform: none !important;
}

.topdown a {
	-webkit-writing-mode: inherit !important;
	writing-mode: inherit !important;
	-webkit-text-orientation: 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;
	box-sizing: border-box;
	line-height: 1 !important;
	-webkit-writing-mode: vertical-rl !important;
	writing-mode: vertical-rl !important;
	-webkit-text-orientation: sideways !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;
	-webkit-writing-mode: inherit !important;
	writing-mode: inherit !important;
	-webkit-text-orientation: inherit !important;
	text-orientation: inherit !important;
	transform: none !important;
	color: inherit;
}

/* Constrained Groups assign a content max-width to children — that wraps vertical labels. */
.topdown.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull),
.downtop.is-layout-constrained > *:not(.alignleft):not(.alignright):not(.alignfull) {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/*
 * Fixed Elements: do not let max-width:100% / 360px cap turn a vertical label
 * into a second column. Keep the side tab sized by its content.
 */
.fse-ta-element--fixed:has(.topdown),
.fse-ta-element--fixed:has(.downtop) {
	max-width: none;
}

.fse-ta-element--fixed > .fse-ta-element__content > .topdown,
.fse-ta-element--fixed > .fse-ta-element__content > .downtop {
	max-width: none !important;
}